TESTING_GUIDE.md

📋 Guia de Testes Drag & Drop Reordenação

Voltar ao índiceMarkdown rawllms.txt

Public Markdown Document

📋 Guia de Testes Drag & Drop Reordenação

!/usr/bin/env node

1572 palavras24 headingsrepository root

#!/usr/bin/env node

/**

  • GUIA DE TESTES: FUNCIONALIDADE DE DRAG & DROP
  • Arquivo: TESTING_GUIDE.md
  • Este guia fornece um conjunto abrangente de testes para validar
  • a implementação de reordenação nativa no DynamicList.vue e PropertyListEditor.vue
    */

📋 Guia de Testes - Drag & Drop Reordenação

1. Pré-requisitos

  • Projeto iniciado com npm run dev
  • Navegador moderno (Chrome, Firefox, Safari, Edge)
  • DevTools aberto para verificar console
  • API de backend rodando
  • Usuário autenticado no Schema Manager

2. Testes de Interface (UI)

2.1 Componente PropertyListEditor

Teste 2.1.1: Renderização Básica

Passos:

  1. Abrir Schema Manager (/schema)
  2. Selecionar um App na sidebar
  3. Clicar "Editar Objeto" em qualquer objeto
  4. Confirmar que PropertyListEditor apareceu

Validação:

  • ✓ Dialog abre com campo "PROPRIEDADES (X)"
  • ✓ Botão "+ Adicionar Campo" está visível
  • ✓ Lista de propriedades renderiza sem erros
  • ✓ Cada propriedade tem um ícone ⋮⋮ (drag handle)

Teste 2.1.2: Visibilidade do Drag Handle

Passos:

  1. Mover mouse sobre uma propriedade
  2. Clicar no ícone ⋮⋮
  3. Verificar cursor muda para "grab"

Validação:

  • ✓ Ícone ⋮⋮ é visível em cada linha
  • ✓ Cursor muda para "grab" ao passar sobre
  • ✓ Cursor muda para "grabbing" ao clicar

Teste 2.1.3: Campos Editáveis

Passos:

  1. Clicar em um field de propriedade
  2. Modificar nome, label ou tipo
  3. Confirmar que isDirty marca como true

Validação:

  • ✓ InputText para "name" é editável
  • ✓ InputText para "label" é editável
  • ✓ Dropdown para "type" funciona
  • ✓ InputText para "layout_grid" é editável
  • ✓ Checkboxes de flags funcionam
  • ✓ Indicador visual de dirty state aparece

2.2 Componente DynamicList

Teste 2.2.1: Lista Sem Reordenação

Passos:

  1. Criar página com <DynamicList :sortable="false" />
  2. Tentar arrastar uma linha
  3. Confirmar que não é arrastável

Validação:

  • ✓ Sem prop sortable, funciona como antes
  • ✓ Nenhum handle visual é mostrado
  • ✓ Arraste não funciona (comportamento normal)

Teste 2.2.2: Lista Com Reordenação Ativada

Passos:

  1. Criar página com <DynamicList :sortable="true" />
  2. Verificar que handles aparecem
  3. Tentar arrastar uma linha

Validação:

  • ✓ Ícone ⋮⋮ aparece em cada linha
  • ✓ Arraste é possível
  • ✓ Linha muda de posição suavemente
  • ✓ Evento reorder é emitido

3. Testes Funcionais (Drag & Drop)

3.1 Reordenar Propriedades - PropertyListEditor

Teste 3.1.1: Arrastar Propriedade para Baixo

Passos:

  1. Abrir dialog de edição de objeto
  2. Identificar propriedade em posição X
  3. Arrastar para posição X+2
  4. Soltar o mouse

Validação:

  • ✓ Propriedade move suavemente
  • ✓ Outras propriedades se ajustam
  • ✓ Animação é fluida (não piscante)
  • ✓ isDirty é marcado como true
  • ✓ Toast notifica: "Propriedades Reordenadas"

Log Esperado:

[Schema] Properties reordered. New order: 1. name, 2. phone, 3. email, 4. status

Teste 3.1.2: Arrastar Propriedade para Cima

Passos:

  1. Propriedade em posição 4
  2. Arrastar para posição 1
  3. Soltar e confirmar ordem

Validação:

  • ✓ Propriedade move para início
  • ✓ Ordem é correta nos números seriais
  • ✓ isDirty = true
  • ✓ Console mostra nova ordem

Teste 3.1.3: Arrastar Entre Extremos

Passos:

  1. Arrastar primeira propriedade para última posição
  2. Soltar
  3. Arrastar última propriedade para primeira

Validação:

  • ✓ Reordenação funciona nos extremos
  • ✓ Sem error no console
  • ✓ isDirty permanece true

Teste 3.1.4: Arrastar e Cancelar

Passos:

  1. Começar a arrastar propriedade
  2. Pressionar ESC ou clicar fora
  3. Soltar o mouse

Validação:

  • ✓ Propriedade volta à posição original
  • ✓ Sem erro ou estado inconsistente

3.2 Reordenar Registros - DynamicList

Passos similares a 3.1 mas para registros de dados

Teste 3.2.1: Reordenar Registros (DataList)

Passos:

  1. Página com <DynamicList :sortable="true" />
  2. Arrastar primeiro registro para terceira posição
  3. Confirmar evento e ordem

Validação:

  • ✓ Registro move de posição
  • ✓ Evento reorder contém novo array
  • ✓ Ordem renderiza corretamente

4. Testes de Estado (Dirty Flag)

4.1 Marcar como Dirty

Teste 4.1.1: Reordenação Marca Dirty

Passos:

  1. Abrir dialog com objeto
  2. Verificar isDirty = false inicialmente
  3. Arrastar propriedade
  4. Verificar isDirty = true

Validação:

  • ✓ Indicador amarelo aparece em "PROPRIEDADES"
  • ✓ Botão "Salvar" na header fica habilitado
  • ✓ isDirty permanece true até salvar

Teste 4.1.2: Edição de Campo Marca Dirty

Passos:

  1. Modificar "label" de uma propriedade
  2. Verificar isDirty status

Validação:

  • ✓ isDirty = true após edição
  • ✓ Toast pode aparecer (opcional)

Teste 4.1.3: Adicionar Propriedade Marca Dirty

Passos:

  1. Clicar "+ Adicionar Campo"
  2. Verificar isDirty

Validação:

  • ✓ isDirty = true
  • ✓ Nova propriedade apareceu com valores padrão

Teste 4.1.4: Remover Propriedade Marca Dirty

Passos:

  1. Clicar ícone trash em uma propriedade
  2. Confirmar remoção
  3. Verificar isDirty

Validação:

  • ✓ Confirmação apareceu
  • ✓ Propriedade removida
  • ✓ isDirty = true
  • ✓ Ordem reorganiza automaticamente

4.2 Limpar Dirty Flag

Teste 4.2.1: Aplicar Mudanças

Passos:

  1. Fazer alterações (reordenar)
  2. Clicar "Aplicar ao App"
  3. Verificar dialog fecha

Validação:

  • ✓ Dialog fecha
  • ✓ isDirty continua true (até salvar)
  • ✓ Alterações refletem no objeto visual

Teste 4.2.2: Salvar Mudanças

Passos:

  1. Fazer alterações
  2. Clicar "Salvar" na header
  3. Aguardar resposta API

Validação:

  • ✓ Toast: "Aplicação salva!"
  • ✓ isDirty = false
  • ✓ Botão "Salvar" fica desabilitado
  • ✓ Indicador amarelo desaparece

Teste 4.2.3: Descartar Mudanças

Passos:

  1. Fazer alterações
  2. Selecionar outro App sem salvar
  3. Confirmar "Descartar"

Validação:

  • ✓ Confirmação aparece
  • ✓ Mudanças são descartadas
  • ✓ App anterior não é alterado no store

5. Testes de Persistência

5.1 Banco de Dados

Teste 5.1.1: Ordem Persiste no Banco

Passos:

  1. Reordenar propriedades
  2. Clicar "Aplicar ao App"
  3. Clicar "Salvar"
  4. Aguardar sucesso
  5. Recarregar página (F5)
  6. Abrir mesmo objeto
  7. Verificar ordem

Validação:

  • ✓ Ordem é a mesma após recarregar
  • ✓ Manifesto JSON tem novo order
  • ✓ API retornou sucesso 200/201

Teste 5.1.2: Verificar JSON Manifest

Passos:

  1. Abrir modo JSON do Schema Manager
  2. Procurar o objeto editado
  3. Verificar array de properties
  4. Confirmar ordem reflete mudanças

Validação:

  • ✓ JSON é válido
  • ✓ Ordem de properties está correta
  • ✓ Sem duplicatas ou perdas de dados

6. Testes de Performance

6.1 Muitas Propriedades

Teste 6.1.1: Lista com 50+ Propriedades

Passos:

  1. Objeto com muitas propriedades (50+)
  2. Arrastar propriedade
  3. Monitorar performance

Validação:

  • ✓ Sem lag ou travamento
  • ✓ Animações fluidas (60fps)
  • ✓ Renderização rápida

Teste 6.1.2: Scroll Durante Arraste

Passos:

  1. Lista com scroll
  2. Arrastar propriedade para último
  3. Verificar auto-scroll

Validação:

  • ✓ Container rola automaticamente (se implementado)
  • ✓ Ou arraste funciona com scroll manual

7. Testes de Validação

7.1 Formários de Entrada

Teste 7.1.1: Validação de Nome Único

Passos:

  1. Editar nome de propriedade
  2. Tentar duplicar nome existente

Validação:

  • ✓ Validação ocorre (se implementada)
  • ✓ Ou error aparece ao salvar

Teste 7.1.2: Validação de Tipo

Passos:

  1. Selecionar tipo inválido
  2. Tentar salvar

Validação:

  • ✓ Validação funciona
  • ✓ Mensagem de erro aparece

8. Testes de Acessibilidade

8.1 Keyboard Navigation

Teste 8.1.1: Tab Entre Campos

Passos:

  1. Clicar na lista de propriedades
  2. Pressionar TAB múltiplas vezes
  3. Verificar foco

Validação:

  • ✓ Foco move entre inputs
  • ✓ Ordem lógica de tab
  • ✓ Handle é focável (se desejado)

Teste 8.1.2: Enter/Space para Ações

Passos:

  1. Focar em botão delete
  2. Pressionar Enter ou Space

Validação:

  • ✓ Ação executada
  • ✓ Confirmação aparece

8.2 Responsive Design

Teste 8.2.1: Mobile (320px)

Passos:

  1. Redimensionar para 320px
  2. Verificar PropertyListEditor
  3. Tentar arrastar

Validação:

  • ✓ Layout adapta
  • ✓ Handle é clicável
  • ✓ Arraste funciona

Teste 8.2.2: Tablet (768px)

Passos:

  1. Redimensionar para 768px
  2. Verificar UI

Validação:

  • ✓ Layout é legível
  • ✓ Campos têm tamanho apropriado

9. Testes de Integração

9.1 Com CRM.vue (Formulários)

Teste 9.1.1: Ordem Reflete em Formulário

Passos:

  1. Reordenar propriedades no Schema
  2. Salvar
  3. Abrir CRM/formulário
  4. Verificar ordem dos campos

Validação:

  • ✓ Campos aparecem na nova ordem
  • ✓ Ordem respeita a definição de metadados

Teste 9.1.2: Campo Oculto Não Aparece

Passos:

  1. Desmarcar "Mostrar no Formulário"
  2. Salvar
  3. Abrir formulário

Validação:

  • ✓ Campo não aparece no form (se implementado)

10. Testes de Erro

10.1 Tratamento de Erros

Teste 10.1.1: Erro na API ao Salvar

Passos:

  1. Desabilitar conexão de rede
  2. Fazer alterações
  3. Clicar "Salvar"
  4. Verificar erro

Validação:

  • ✓ Toast de erro aparece
  • ✓ isDirty permanece true
  • ✓ Dados locais preservados

Teste 10.1.2: Conflito de Dados (Concorrência)

Passos:

  1. Abrir mesmo objeto em duas abas
  2. Modificar em Tab A
  3. Modificar em Tab B
  4. Salvar A
  5. Salvar B
  6. Verificar resultado

Validação:

  • ✓ último save prevalece (ou conflito detectado)
  • ✓ Sem corrupção de dados

11. Checklist Final

Antes de Deploy

  • Todos os testes 2.x passaram (UI)
  • Todos os testes 3.x passaram (Drag & Drop)
  • Todos os testes 4.x passaram (Dirty Flag)
  • Todos os testes 5.x passaram (Persistência)
  • Todos os testes 6.x passaram (Performance)
  • Todos os testes 7.x passaram (Validação)
  • Todos os testes 8.x passaram (Acessibilidade)
  • Todos os testes 9.x passaram (Integração)
  • Todos os testes 10.x passaram (Erros)
  • Console sem erros 🔴
  • Sem warnings (ou apenas warnings conhecidos)
  • Documentação atualizada
  • Code review realizado
  • Teste end-to-end com dados reais

12. Relatório de Bugs Encontrados

Se você encontrar bugs, documente aqui:

### Bug #1: [Título]
**Data**: DD/MM/YYYY
**Passos para Reproduzir**: 
1. ...
2. ...
3. ...

**Resultado Esperado**: ...
**Resultado Obtido**: ...
**Gravidade**: [Crítica/Alta/Média/Baixa]
**Status**: [Novo/Aberto/Em Progresso/Resolvido]

---

13. Notas Adicionais

  • Todos os testes devem ser executados em navegadores modernos
  • Recomenda-se testar em Chrome, Firefox e Safari
  • Manter DevTools aberto durante testes para validar console
  • Screenshots/videos de problemas são muito úteis

Data de Criação: 17/02/2026
Última Atualização: 17/02/2026
Status: Pronto para Teste Manual