#!/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