🧪 Testing Guide: Advanced Booking Calendar

Versão: 1.0
Última Atualização: 2025-02-24
Status: Ready for Testing ✅

---

📋 Test Plan Overview

Teste	Prioridade	Tempo	Status
Visualização básica	🔴 P0	5min	Pending
Drag & Drop	🔴 P0	10min	Pending
Resize Top/Bottom	🔴 P0	10min	Pending
Validação Conflitos	🔴 P0	5min	Pending
Navegação Semanas	🟡 P1	5min	Pending
Toast Notifications	🟡 P1	5min	Pending
Responsividade	🟡 P1	10min	Pending
Performance	🟢 P2	10min	Pending

---

🎯 Teste 1: Visualização Básica

Setup

# Navegar para BookingsPage
URL: /admin/bookings

Passos

1. Clique em "📅 Calendário" (view toggle)
2. Verificar se semana atual aparece no header
3. Validar que todos os 7 dias aparecem (Dom-Sab)
4. Conferir horas no lado esquerdo (00-23)
5. Observar grid de horas com linhas cinzentas

Esperado

✅ Week view renderiza corretamente
✅ 7 colunas de dias visíveis
✅ 24 linhas de horas visíveis
✅ Grid layout responsivo
✅ Sem erros no console

Troubleshooting

Se não aparecer: Verificar AdvancedBookingCalendar.tsx imports

---

🎯 Teste 2: Renderização de Marcações

Setup

1. Criar 3-5 marcações em dias diferentes
2. Navegar para /admin/bookings → Calendário

Passos

1. Buscar marcação no calendário visualmente
2. Verificar booking number aparece
3. Conferir cliente e horário
4. Observar cor (cyan-900/80)
5. Hover deve mudar para cyan-800

Esperado

✅ Marcações aparecem no dia/hora corretos
✅ Texto legível (booking_number, client_name)
✅ Posição vertical corresponde ao horário
✅ Altura proporcional à duração
✅ Hover efeito suave

Exemplo Visual

Marcação com 1h de duração:
┌──────────────────────┐
│ BK-001              │
│ João Silva          │
│ 10:00 - 11:00       │  ← altura = 60px
└──────────────────────┘

---

🎯 Teste 3: Drag & Drop - Reschedule

Setup

1. Ter marcação confirmada em segunda (10:00-11:00)
2. Navegar para calendário

Passos

1. Passar rato sobre dia Seg, horário 10:00 (card deve ter hover)
2. Clicar e manter pressionado no card
3. Arrastar para Ter, 14:00 (arrastando para baixo)

Expected Behavior During Drag

- Cursor deve mudar para pointer
- Card deve manter aparência (no preview visual)
- Log no console mostra novo tempo calculado

Expected on Drop

✅ Toast: "Marcação redesenhada com sucesso"
✅ Calendário atualiza automaticamente
✅ Marcação agora em Ter 14:00-15:00
✅ Duração mantida (1h)

Test Cases

Test 3a: Drag dentro do mesmo dia
- De 10:00 para 13:00 (mesmo dia)
- Esperado: ✅ Sucesso

Test 3b: Drag para dia seguinte
- Segunda 10:00 para Terça 14:30
- Esperado: ✅ Sucesso

Test 3c: Drag para fim de semana
- Segunda 10:00 para Sábado 16:00
- Esperado: ✅ Sucesso

Test 3d: Drag muito cedo (fora de horário)
- Segunda 23:00 para Segunda 23:30 (além das 23:59)
- Esperado: ❌ Toast error "Não é possível marcar..."

---

🎯 Teste 4: Resize - Estender Duração (Bottom)

Setup

1. Ter marcação 1h (10:00-11:00)
2. Navegar para calendário
3. Encontrar marcação no grid

Passos

1. Passar rato na borda inferior do card
2. Resize handle deve ficar cyan e visível (linha de ~2px)
3. Clicar + arrastar para baixo em 1 hora (60px)

Expected During Resize

Console output: "Resizing bottom to: [new end time]"

Expected on Drop

✅ Toast: "Duração estendida com sucesso"
✅ Card agora tem altura 2x (120px)
✅ Horário final mudou de 11:00 para 12:00

Test Cases

Test 4a: Extend 15 min (mínimo válido)
- De 11:00 para 11:15
- Esperado: ✅ Sucesso

Test 4b: Extend 2 horas
- De 11:00 para 13:00
- Esperado: ✅ Sucesso

Test 4c: Try to shrink abaixo de 15min
- De 10:30 para 10:40 (10min < 15min)
- Esperado: ❌ Sem alteração (mínimo não permitido)

Test 4d: Extend enquanto existe conflito
- Se houver marcação às 12:00, extend de 11:00 p/ 12:30
- Esperado: ❌ Toast "Conflito com outra marcação"

---

🎯 Teste 5: Resize - Encolher Duração (Top)

Setup

1. Ter marcação 2h (10:00-12:00)
2. Navegar para calendário

Passos

1. Passar rato na borda superior do card
2. Resize handle deve ficar cyan e visível
3. Clicar + arrastar para baixo em 30min (30px)

Expected on Drop

✅ Toast: "Duração encolhida com sucesso"
✅ Horário inicial mudou de 10:00 para 10:30
✅ Card altura reduzida
✅ Duração agora 1h30

Test Cases

Test 5a: Shrink 30 minutos
- De 10:00 para 10:30
- Esperado: ✅ Sucesso

Test 5b: Shrink para mínimo (15min)
- De 10:00 para 10:45 (reduz de 2h para 15min)
- Esperado: ✅ Sucesso

Test 5c: Try to shrink abaixo de 15min (12:00 → 12:05)
- De 12:00 para 12:05 (5min < 15min)
- Esperado: ❌ Sem alteração ou erro

Test 5d: Drag for cima (mover início)
- De 10:00 para 09:30
- Esperado: ✅ Resize muda início, alarga end

---

🎯 Teste 6: Validação & Conflitos

Setup

1. Criar 2 marcações:
   • Marcação A: Seg 10:00-11:00
   • Marcação B: Seg 11:30-12:30

Passos - Cenário Conflito Direto

1. Drag Marcação A de 10:00 para 11:00 (overlap com B)
2. Na drop, sistema valida

Expected

❌ Toast: "Não é possível marcar neste horário"
❌ Card volta para posição original
❌ Nenhuma alteração na BD

Passos - Cenário Conflito Parcial

1. Drag Marcação A de 10:00-11:00 para 10:45-11:45 (overlap 50%)
2. Na drop, sistema valida

Expected

❌ Toast error (conflito detectado)

Passos - Cenário Sem Conflito

1. Drag Marcação A de 10:00 para 13:00 (gap de 1h30)
2. Na drop, sistema valida

Expected

✅ Toast: "Marcação redesenhada com sucesso"
✅ Card move para novo horário

---

🎯 Teste 7: Navegação de Semanas

Setup

• Estar em calendário

Passos

1. Clicar botão "← Anterior" (ir semana anterior)

2. Verificar header muda datas

3. Marcações da semana anterior aparecem

4. Clicar botão "Próxima →" (3x voltar)

5. Verificar avanço de semanas

6. Clicar botão "Hoje" (volta para semana atual)

7. Verificar volta correto

Expected

✅ Header atualiza com datas novas
✅ Marcações carregam dinamicamente
✅ Sem erros de API
✅ Botão "Hoje" funciona

---

🎯 Teste 8: Toast Notifications

Setup

• Completar testes de drag/drop/resize anteriores

Validar Cada Notificação

Ação	Tipo	Mensagem Esperada
Drag bem-sucedido	success	"Marcação redesenhada..."
Drag com conflito	error	"Não é possível marcar..."
Resize extensão	success	"Duração estendida..."
Resize conflito	error	"Conflito com outra..."
Network error	error	"Erro ao atualizar..."

Validar Propriedades Toast

✅ Aparece bottom-right da tela
✅ Auto-dismiss após 3-4 segundos
✅ Cor apropriada (green=success, red=error)
✅ Click para dismiss funciona
✅ Stack múltiplas notificações

---

🎯 Teste 9: StaffDashboard Integration

Setup

1. Login como Staff
2. Navegar para /staff/dashboard

Passos

1. Verificar "Calendário de Marcações" aparece
2. AdvancedBookingCalendar carrega (week view)
3. Apenas marcações do staff filtrado aparecem
4. Drag/drop/resize funcionam igual

Pending Approvals

Se houver pending approvals:
✅ Alert banner aparece: "[N] marcação(ões) pendente(s)"
✅ Botão "Revisar Agora" funciona
✅ ApprovalModal abre corretamente

---

🎯 Teste 10: Performance

Setup

• Backend com 50+ booking visíveis na semana

Passos

1. Carregar calendário (medir tempo de carga)
2. Fazer drag de uma marcação (medir latência)
3. Fazer resize (medir responsiveness)
4. Navegar para próxima semana (medir load time)

Esperado

✅ Carga inicial < 2s
✅ Drag responsivo (sem lag)
✅ Resize suave
✅ Navegação < 1s
✅ Sem memory leaks (DevTools)

---

🎯 Teste 11: Responsiveness

Setup

• Usar DevTools para emular diferentes tamanhos

Breakpoints a Testar

[ ] Desktop (1920x1080) - Ganador esperado
[ ] Laptop (1366x768) - Scrollbar horizontal OK?
[ ] Tablet Portrait (768x1024) - Ainda funciona?
[ ] Mobile (375x667) - Muito apertado?

Expected

✅ Desktop: Perfeito, sem scroll
✅ Laptop: Pequeno scroll horizontal aceitável
✅ Tablet: Funcional com scroll
✅ Mobile: Desabilitado ou com versão alternativa?

---

📊 Matriz de Testes

┌─────────────────────────────────────────────────────────┐
│ Teste │ Status │ Resultado │ Bugs │ Notes               │
├─────────────────────────────────────────────────────────┤
│ 1     │ [ ]    │           │      │ Visualização básica │
│ 2     │ [ ]    │           │      │ Renderização        │
│ 3     │ [ ]    │           │      │ Drag & Drop         │
│ 4     │ [ ]    │           │      │ Resize Bottom       │
│ 5     │ [ ]    │           │      │ Resize Top          │
│ 6     │ [ ]    │           │      │ Conflitos           │
│ 7     │ [ ]    │           │      │ Navegação           │
│ 8     │ [ ]    │           │      │ Notificações        │
│ 9     │ [ ]    │           │      │ StaffDashboard      │
│ 10    │ [ ]    │           │      │ Performance         │
│ 11    │ [ ]    │           │      │ Responsiveness      │
└─────────────────────────────────────────────────────────┘

---

🐛 Bug Report Template

### 🐛 Bug: [Título Descritivo]

**Test Case**: [Qual teste encontrou]
**Steps to Reproduce**:
1. ...
2. ...
3. ...

**Esperado**: [O que deveria acontecer]
**Obtido**: [O que realmente aconteceu]

**Evidence**: 
- Screenshot: [anexar]
- Console Error: [copiar erro]
- Network Tab: [screenshot]

**Environment**: 
- Browser: Chrome/Firefox/Safari
- OS: macOS/Windows/Linux
- Resolution: 1920x1080

---

✅ Sign-Off Checklist

Após concluir todos os testes, marque como teste completo:

• Todos os 11 testes executados
• Nenhum bug crítico (P0) encontrado
• Feedback positivo do projeto
• Documentação atualizada
• Code review aprovado
• Ready para merge → staging
• Ready para deploy → production

---

Responsável Teste: [Seu Nome]
Data Início: ___________
Data Conclusão: ___________
Resultado Final: ✅ APROVADO / ⚠️ COM RESSALVAS / ❌ REJEITADO