{"id":"repo/testing-guide","source":"repo","sourceLabel":"repository root","sourcePath":"TESTING_GUIDE.md","routePath":"/fastapp/public-docs/page/repo/testing-guide","rawPath":"/fastapp/public-docs/raw/repo/testing-guide","slug":["repo","testing-guide"],"slugPath":"repo/testing-guide","title":"📋 Guia de Testes Drag & Drop Reordenação","description":"!/usr/bin/env node","headings":["📋 Guia de Testes Drag & Drop Reordenação","1. Pré requisitos","2. Testes de Interface (UI)","2.1 Componente PropertyListEditor","2.2 Componente DynamicList","3. Testes Funcionais (Drag & Drop)","3.1 Reordenar Propriedades PropertyListEditor","3.2 Reordenar Registros DynamicList","4. Testes de Estado (Dirty Flag)","4.1 Marcar como Dirty","4.2 Limpar Dirty Flag","5. Testes de Persistência","5.1 Banco de Dados","6. Testes de Performance","6.1 Muitas Propriedades","7. Testes de Validação","7.1 Formários de Entrada","8. Testes de Acessibilidade","8.1 Keyboard Navigation","8.2 Responsive Design","9. Testes de Integração","9.1 Com CRM.vue (Formulários)","10. Testes de Erro","10.1 Tratamento de Erros"],"wordCount":1572,"markdown":"#!/usr/bin/env node\r\n\r\n/**\r\n * GUIA DE TESTES: FUNCIONALIDADE DE DRAG & DROP\r\n * Arquivo: TESTING_GUIDE.md\r\n * \r\n * Este guia fornece um conjunto abrangente de testes para validar\r\n * a implementação de reordenação nativa no DynamicList.vue e PropertyListEditor.vue\r\n */\r\n\r\n# 📋 Guia de Testes - Drag & Drop Reordenação\r\n\r\n## 1. Pré-requisitos\r\n\r\n- [ ] Projeto iniciado com `npm run dev`\r\n- [ ] Navegador moderno (Chrome, Firefox, Safari, Edge)\r\n- [ ] DevTools aberto para verificar console\r\n- [ ] API de backend rodando\r\n- [ ] Usuário autenticado no Schema Manager\r\n\r\n## 2. Testes de Interface (UI)\r\n\r\n### 2.1 Componente PropertyListEditor\r\n\r\n#### Teste 2.1.1: Renderização Básica\r\n**Passos**:\r\n1. Abrir Schema Manager (`/schema`)\r\n2. Selecionar um App na sidebar\r\n3. Clicar \"Editar Objeto\" em qualquer objeto\r\n4. Confirmar que PropertyListEditor apareceu\r\n\r\n**Validação**:\r\n- ✓ Dialog abre com campo \"PROPRIEDADES (X)\"\r\n- ✓ Botão \"+ Adicionar Campo\" está visível\r\n- ✓ Lista de propriedades renderiza sem erros\r\n- ✓ Cada propriedade tem um ícone `⋮⋮` (drag handle)\r\n\r\n#### Teste 2.1.2: Visibilidade do Drag Handle\r\n**Passos**:\r\n1. Mover mouse sobre uma propriedade\r\n2. Clicar no ícone `⋮⋮`\r\n3. Verificar cursor muda para \"grab\"\r\n\r\n**Validação**:\r\n- ✓ Ícone `⋮⋮` é visível em cada linha\r\n- ✓ Cursor muda para \"grab\" ao passar sobre\r\n- ✓ Cursor muda para \"grabbing\" ao clicar\r\n\r\n#### Teste 2.1.3: Campos Editáveis\r\n**Passos**:\r\n1. Clicar em um field de propriedade\r\n2. Modificar nome, label ou tipo\r\n3. Confirmar que isDirty marca como true\r\n\r\n**Validação**:\r\n- ✓ InputText para \"name\" é editável\r\n- ✓ InputText para \"label\" é editável\r\n- ✓ Dropdown para \"type\" funciona\r\n- ✓ InputText para \"layout_grid\" é editável\r\n- ✓ Checkboxes de flags funcionam\r\n- ✓ Indicador visual de dirty state aparece\r\n\r\n### 2.2 Componente DynamicList\r\n\r\n#### Teste 2.2.1: Lista Sem Reordenação\r\n**Passos**:\r\n1. Criar página com `<DynamicList :sortable=\"false\" />`\r\n2. Tentar arrastar uma linha\r\n3. Confirmar que não é arrastável\r\n\r\n**Validação**:\r\n- ✓ Sem prop `sortable`, funciona como antes\r\n- ✓ Nenhum handle visual é mostrado\r\n- ✓ Arraste não funciona (comportamento normal)\r\n\r\n#### Teste 2.2.2: Lista Com Reordenação Ativada\r\n**Passos**:\r\n1. Criar página com `<DynamicList :sortable=\"true\" />`\r\n2. Verificar que handles aparecem\r\n3. Tentar arrastar uma linha\r\n\r\n**Validação**:\r\n- ✓ Ícone `⋮⋮` aparece em cada linha\r\n- ✓ Arraste é possível\r\n- ✓ Linha muda de posição suavemente\r\n- ✓ Evento `reorder` é emitido\r\n\r\n## 3. Testes Funcionais (Drag & Drop)\r\n\r\n### 3.1 Reordenar Propriedades - PropertyListEditor\r\n\r\n#### Teste 3.1.1: Arrastar Propriedade para Baixo\r\n**Passos**:\r\n1. Abrir dialog de edição de objeto\r\n2. Identificar propriedade em posição X\r\n3. Arrastar para posição X+2\r\n4. Soltar o mouse\r\n\r\n**Validação**:\r\n- ✓ Propriedade move suavemente\r\n- ✓ Outras propriedades se ajustam\r\n- ✓ Animação é fluida (não piscante)\r\n- ✓ isDirty é marcado como true\r\n- ✓ Toast notifica: \"Propriedades Reordenadas\"\r\n\r\n**Log Esperado**:\r\n```\r\n[Schema] Properties reordered. New order: 1. name, 2. phone, 3. email, 4. status\r\n```\r\n\r\n#### Teste 3.1.2: Arrastar Propriedade para Cima\r\n**Passos**:\r\n1. Propriedade em posição 4\r\n2. Arrastar para posição 1\r\n3. Soltar e confirmar ordem\r\n\r\n**Validação**:\r\n- ✓ Propriedade move para início\r\n- ✓ Ordem é correta nos números seriais\r\n- ✓ isDirty = true\r\n- ✓ Console mostra nova ordem\r\n\r\n#### Teste 3.1.3: Arrastar Entre Extremos\r\n**Passos**:\r\n1. Arrastar primeira propriedade para última posição\r\n2. Soltar\r\n3. Arrastar última propriedade para primeira\r\n\r\n**Validação**:\r\n- ✓ Reordenação funciona nos extremos\r\n- ✓ Sem error no console\r\n- ✓ isDirty permanece true\r\n\r\n#### Teste 3.1.4: Arrastar e Cancelar\r\n**Passos**:\r\n1. Começar a arrastar propriedade\r\n2. Pressionar ESC ou clicar fora\r\n3. Soltar o mouse\r\n\r\n**Validação**:\r\n- ✓ Propriedade volta à posição original\r\n- ✓ Sem erro ou estado inconsistente\r\n\r\n### 3.2 Reordenar Registros - DynamicList\r\n\r\n**Passos similares a 3.1 mas para registros de dados**\r\n\r\n#### Teste 3.2.1: Reordenar Registros (DataList)\r\n**Passos**:\r\n1. Página com `<DynamicList :sortable=\"true\" />`\r\n2. Arrastar primeiro registro para terceira posição\r\n3. Confirmar evento e ordem\r\n\r\n**Validação**:\r\n- ✓ Registro move de posição\r\n- ✓ Evento `reorder` contém novo array\r\n- ✓ Ordem renderiza corretamente\r\n\r\n## 4. Testes de Estado (Dirty Flag)\r\n\r\n### 4.1 Marcar como Dirty\r\n\r\n#### Teste 4.1.1: Reordenação Marca Dirty\r\n**Passos**:\r\n1. Abrir dialog com objeto\r\n2. Verificar isDirty = false inicialmente\r\n3. Arrastar propriedade\r\n4. Verificar isDirty = true\r\n\r\n**Validação**:\r\n- ✓ Indicador amarelo aparece em \"PROPRIEDADES\"\r\n- ✓ Botão \"Salvar\" na header fica habilitado\r\n- ✓ isDirty permanece true até salvar\r\n\r\n#### Teste 4.1.2: Edição de Campo Marca Dirty\r\n**Passos**:\r\n1. Modificar \"label\" de uma propriedade\r\n2. Verificar isDirty status\r\n\r\n**Validação**:\r\n- ✓ isDirty = true após edição\r\n- ✓ Toast pode aparecer (opcional)\r\n\r\n#### Teste 4.1.3: Adicionar Propriedade Marca Dirty\r\n**Passos**:\r\n1. Clicar \"+ Adicionar Campo\"\r\n2. Verificar isDirty\r\n\r\n**Validação**:\r\n- ✓ isDirty = true\r\n- ✓ Nova propriedade apareceu com valores padrão\r\n\r\n#### Teste 4.1.4: Remover Propriedade Marca Dirty\r\n**Passos**:\r\n1. Clicar ícone trash em uma propriedade\r\n2. Confirmar remoção\r\n3. Verificar isDirty\r\n\r\n**Validação**:\r\n- ✓ Confirmação apareceu\r\n- ✓ Propriedade removida\r\n- ✓ isDirty = true\r\n- ✓ Ordem reorganiza automaticamente\r\n\r\n### 4.2 Limpar Dirty Flag\r\n\r\n#### Teste 4.2.1: Aplicar Mudanças\r\n**Passos**:\r\n1. Fazer alterações (reordenar)\r\n2. Clicar \"Aplicar ao App\"\r\n3. Verificar dialog fecha\r\n\r\n**Validação**:\r\n- ✓ Dialog fecha\r\n- ✓ isDirty continua true (até salvar)\r\n- ✓ Alterações refletem no objeto visual\r\n\r\n#### Teste 4.2.2: Salvar Mudanças\r\n**Passos**:\r\n1. Fazer alterações\r\n2. Clicar \"Salvar\" na header\r\n3. Aguardar resposta API\r\n\r\n**Validação**:\r\n- ✓ Toast: \"Aplicação salva!\"\r\n- ✓ isDirty = false\r\n- ✓ Botão \"Salvar\" fica desabilitado\r\n- ✓ Indicador amarelo desaparece\r\n\r\n#### Teste 4.2.3: Descartar Mudanças\r\n**Passos**:\r\n1. Fazer alterações\r\n2. Selecionar outro App sem salvar\r\n3. Confirmar \"Descartar\"\r\n\r\n**Validação**:\r\n- ✓ Confirmação aparece\r\n- ✓ Mudanças são descartadas\r\n- ✓ App anterior não é alterado no store\r\n\r\n## 5. Testes de Persistência\r\n\r\n### 5.1 Banco de Dados\r\n\r\n#### Teste 5.1.1: Ordem Persiste no Banco\r\n**Passos**:\r\n1. Reordenar propriedades\r\n2. Clicar \"Aplicar ao App\"\r\n3. Clicar \"Salvar\"\r\n4. Aguardar sucesso\r\n5. Recarregar página (F5)\r\n6. Abrir mesmo objeto\r\n7. Verificar ordem\r\n\r\n**Validação**:\r\n- ✓ Ordem é a mesma após recarregar\r\n- ✓ Manifesto JSON tem novo order\r\n- ✓ API retornou sucesso 200/201\r\n\r\n#### Teste 5.1.2: Verificar JSON Manifest\r\n**Passos**:\r\n1. Abrir modo JSON do Schema Manager\r\n2. Procurar o objeto editado\r\n3. Verificar array de properties\r\n4. Confirmar ordem reflete mudanças\r\n\r\n**Validação**:\r\n- ✓ JSON é válido\r\n- ✓ Ordem de `properties` está correta\r\n- ✓ Sem duplicatas ou perdas de dados\r\n\r\n## 6. Testes de Performance\r\n\r\n### 6.1 Muitas Propriedades\r\n\r\n#### Teste 6.1.1: Lista com 50+ Propriedades\r\n**Passos**:\r\n1. Objeto com muitas propriedades (50+)\r\n2. Arrastar propriedade\r\n3. Monitorar performance\r\n\r\n**Validação**:\r\n- ✓ Sem lag ou travamento\r\n- ✓ Animações fluidas (60fps)\r\n- ✓ Renderização rápida\r\n\r\n#### Teste 6.1.2: Scroll Durante Arraste\r\n**Passos**:\r\n1. Lista com scroll\r\n2. Arrastar propriedade para último\r\n3. Verificar auto-scroll\r\n\r\n**Validação**:\r\n- ✓ Container rola automaticamente (se implementado)\r\n- ✓ Ou arraste funciona com scroll manual\r\n\r\n## 7. Testes de Validação\r\n\r\n### 7.1 Formários de Entrada\r\n\r\n#### Teste 7.1.1: Validação de Nome Único\r\n**Passos**:\r\n1. Editar nome de propriedade\r\n2. Tentar duplicar nome existente\r\n\r\n**Validação**:\r\n- ✓ Validação ocorre (se implementada)\r\n- ✓ Ou error aparece ao salvar\r\n\r\n#### Teste 7.1.2: Validação de Tipo\r\n**Passos**:\r\n1. Selecionar tipo inválido\r\n2. Tentar salvar\r\n\r\n**Validação**:\r\n- ✓ Validação funciona\r\n- ✓ Mensagem de erro aparece\r\n\r\n## 8. Testes de Acessibilidade\r\n\r\n### 8.1 Keyboard Navigation\r\n\r\n#### Teste 8.1.1: Tab Entre Campos\r\n**Passos**:\r\n1. Clicar na lista de propriedades\r\n2. Pressionar TAB múltiplas vezes\r\n3. Verificar foco\r\n\r\n**Validação**:\r\n- ✓ Foco move entre inputs\r\n- ✓ Ordem lógica de tab\r\n- ✓ Handle é focável (se desejado)\r\n\r\n#### Teste 8.1.2: Enter/Space para Ações\r\n**Passos**:\r\n1. Focar em botão delete\r\n2. Pressionar Enter ou Space\r\n\r\n**Validação**:\r\n- ✓ Ação executada\r\n- ✓ Confirmação aparece\r\n\r\n### 8.2 Responsive Design\r\n\r\n#### Teste 8.2.1: Mobile (320px)\r\n**Passos**:\r\n1. Redimensionar para 320px\r\n2. Verificar PropertyListEditor\r\n3. Tentar arrastar\r\n\r\n**Validação**:\r\n- ✓ Layout adapta\r\n- ✓ Handle é clicável\r\n- ✓ Arraste funciona\r\n\r\n#### Teste 8.2.2: Tablet (768px)\r\n**Passos**:\r\n1. Redimensionar para 768px\r\n2. Verificar UI\r\n\r\n**Validação**:\r\n- ✓ Layout é legível\r\n- ✓ Campos têm tamanho apropriado\r\n\r\n## 9. Testes de Integração\r\n\r\n### 9.1 Com CRM.vue (Formulários)\r\n\r\n#### Teste 9.1.1: Ordem Reflete em Formulário\r\n**Passos**:\r\n1. Reordenar propriedades no Schema\r\n2. Salvar\r\n3. Abrir CRM/formulário\r\n4. Verificar ordem dos campos\r\n\r\n**Validação**:\r\n- ✓ Campos aparecem na nova ordem\r\n- ✓ Ordem respeita a definição de metadados\r\n\r\n#### Teste 9.1.2: Campo Oculto Não Aparece\r\n**Passos**:\r\n1. Desmarcar \"Mostrar no Formulário\"\r\n2. Salvar\r\n3. Abrir formulário\r\n\r\n**Validação**:\r\n- ✓ Campo não aparece no form (se implementado)\r\n\r\n## 10. Testes de Erro\r\n\r\n### 10.1 Tratamento de Erros\r\n\r\n#### Teste 10.1.1: Erro na API ao Salvar\r\n**Passos**:\r\n1. Desabilitar conexão de rede\r\n2. Fazer alterações\r\n3. Clicar \"Salvar\"\r\n4. Verificar erro\r\n\r\n**Validação**:\r\n- ✓ Toast de erro aparece\r\n- ✓ isDirty permanece true\r\n- ✓ Dados locais preservados\r\n\r\n#### Teste 10.1.2: Conflito de Dados (Concorrência)\r\n**Passos**:\r\n1. Abrir mesmo objeto em duas abas\r\n2. Modificar em Tab A\r\n3. Modificar em Tab B\r\n4. Salvar A\r\n5. Salvar B\r\n6. Verificar resultado\r\n\r\n**Validação**:\r\n- ✓ último save prevalece (ou conflito detectado)\r\n- ✓ Sem corrupção de dados\r\n\r\n## 11. Checklist Final\r\n\r\n### Antes de Deploy\r\n\r\n- [ ] Todos os testes 2.x passaram (UI)\r\n- [ ] Todos os testes 3.x passaram (Drag & Drop)\r\n- [ ] Todos os testes 4.x passaram (Dirty Flag)\r\n- [ ] Todos os testes 5.x passaram (Persistência)\r\n- [ ] Todos os testes 6.x passaram (Performance)\r\n- [ ] Todos os testes 7.x passaram (Validação)\r\n- [ ] Todos os testes 8.x passaram (Acessibilidade)\r\n- [ ] Todos os testes 9.x passaram (Integração)\r\n- [ ] Todos os testes 10.x passaram (Erros)\r\n- [ ] Console sem erros 🔴\r\n- [ ] Sem warnings (ou apenas warnings conhecidos)\r\n- [ ] Documentação atualizada\r\n- [ ] Code review realizado\r\n- [ ] Teste end-to-end com dados reais\r\n\r\n## 12. Relatório de Bugs Encontrados\r\n\r\nSe você encontrar bugs, documente aqui:\r\n\r\n```\r\n### Bug #1: [Título]\r\n**Data**: DD/MM/YYYY\r\n**Passos para Reproduzir**: \r\n1. ...\r\n2. ...\r\n3. ...\r\n\r\n**Resultado Esperado**: ...\r\n**Resultado Obtido**: ...\r\n**Gravidade**: [Crítica/Alta/Média/Baixa]\r\n**Status**: [Novo/Aberto/Em Progresso/Resolvido]\r\n\r\n---\r\n```\r\n\r\n## 13. Notas Adicionais\r\n\r\n- Todos os testes devem ser executados em navegadores modernos\r\n- Recomenda-se testar em Chrome, Firefox e Safari\r\n- Manter DevTools aberto durante testes para validar console\r\n- Screenshots/videos de problemas são muito úteis\r\n\r\n---\r\n\r\n**Data de Criação**: 17/02/2026\r\n**Última Atualização**: 17/02/2026\r\n**Status**: Pronto para Teste Manual\r\n"}