367 lines
8.7 KiB
Markdown
367 lines
8.7 KiB
Markdown
# 🧪 Guia de Teste - Sistema de Catálogo v2.0
|
||
|
||
## 📋 Pré-requisitos
|
||
|
||
Antes de começar os testes, certifique-se de:
|
||
|
||
1. ✅ Executar o script SQL:
|
||
```bash
|
||
sql/add-campos-catalogo-melhorias.sql
|
||
```
|
||
|
||
2. ✅ Servidor está rodando:
|
||
```bash
|
||
npm run dev
|
||
```
|
||
|
||
3. ✅ Bucket `catalogo` criado e configurado
|
||
|
||
---
|
||
|
||
## 🎯 Roteiro de Testes
|
||
|
||
### 1. **Teste: Acessar Painel Admin**
|
||
|
||
**Passo a Passo:**
|
||
1. Abra o navegador: `http://localhost:5000`
|
||
2. Faça login
|
||
3. Clique em **"Site / Catalogo"** no menu lateral
|
||
|
||
**Resultado Esperado:**
|
||
- ✅ Interface em formato de tabela
|
||
- ✅ URL fixa mostrando `/catalogo`
|
||
- ✅ 5 cards de estatísticas visíveis:
|
||
- Total de Produtos
|
||
- Visíveis
|
||
- Ocultos
|
||
- Em Promoção (🏷️)
|
||
- Novidades (✨)
|
||
|
||
---
|
||
|
||
### 2. **Teste: Configurações do Catálogo**
|
||
|
||
**Passo a Passo:**
|
||
1. Verifique a seção **"Configurações do Catálogo"**
|
||
2. Observe os toggles disponíveis:
|
||
- Catálogo Ativo
|
||
- Exibir Preços
|
||
- Exibir Estoque
|
||
- Exibir Badge "Novidades"
|
||
- Exibir Badge "Promoções"
|
||
|
||
**Teste:**
|
||
1. Desative **"Exibir Preços"**
|
||
2. Clique em **"Salvar Configurações"**
|
||
3. Abra `/catalogo` em nova aba
|
||
4. Verifique se os preços foram ocultados
|
||
|
||
**Resultado Esperado:**
|
||
- ✅ Configurações salvam corretamente
|
||
- ✅ Mensagem de sucesso aparece
|
||
- ✅ Mudanças refletem no site público
|
||
|
||
---
|
||
|
||
### 3. **Teste: Marcar Produto como Promoção**
|
||
|
||
**Método 1 - Definindo Preço:**
|
||
1. Na tabela, localize um produto
|
||
2. Na coluna **"Preço Promocional"**, digite um valor menor que o preço normal
|
||
- Exemplo: Se preço normal é R$ 99,90, digite `79.90`
|
||
3. Pressione **Tab** ou clique fora do campo
|
||
|
||
**Resultado Esperado:**
|
||
- ✅ Valor é salvo automaticamente
|
||
- ✅ Badge 🏷️ **PROMO** aparece na coluna Status
|
||
- ✅ Toast de sucesso: "Preço promocional atualizado"
|
||
- ✅ Estatística "Em Promoção" aumenta
|
||
|
||
**Método 2 - Toggle de Promoção:**
|
||
1. Clique no badge 🏷️ na coluna **"Status"**
|
||
|
||
**Resultado Esperado:**
|
||
- ✅ Badge alterna entre ativo/inativo
|
||
- ✅ Toast de sucesso aparece
|
||
- ✅ Estatística atualiza
|
||
|
||
---
|
||
|
||
### 4. **Teste: Marcar Produto como Novidade**
|
||
|
||
**Passo a Passo:**
|
||
1. Na tabela, localize um produto
|
||
2. Clique no badge ✨ na coluna **"Status"**
|
||
|
||
**Resultado Esperado:**
|
||
- ✅ Badge alterna entre **"✨ NOVO"** e vazio
|
||
- ✅ Toast: "Novidade atualizada!"
|
||
- ✅ Estatística "Novidades" atualiza
|
||
- ✅ Badge fica azul quando ativo
|
||
|
||
---
|
||
|
||
### 5. **Teste: Visualizar no Catálogo Público**
|
||
|
||
**Passo a Passo:**
|
||
1. No painel admin, clique no botão **"Ver Catálogo"**
|
||
- Ou acesse manualmente: `http://localhost:5000/catalogo`
|
||
|
||
**Teste Produto Normal:**
|
||
- ✅ Imagem do produto
|
||
- ✅ Nome do produto
|
||
- ✅ Preço normal
|
||
- ✅ Tamanhos disponíveis
|
||
|
||
**Teste Produto em Promoção:**
|
||
- ✅ Badge **🏷️ PROMOÇÃO** no canto superior esquerdo
|
||
- ✅ Preço original **riscado** em cinza
|
||
- ✅ Preço promocional em **vermelho** e maior
|
||
- ✅ Animação de pulsação no badge
|
||
|
||
**Teste Produto Novidade:**
|
||
- ✅ Badge **✨ NOVO** no canto superior direito
|
||
- ✅ Cor roxa/azul no badge
|
||
- ✅ Animação de pulsação no badge
|
||
|
||
**Teste Produto Novidade + Promoção:**
|
||
- ✅ Ambos os badges aparecem
|
||
- ✅ Badge novidade fica mais abaixo para não sobrepor
|
||
- ✅ Preço promocional exibido
|
||
- ✅ Ambos animando
|
||
|
||
---
|
||
|
||
### 6. **Teste: Esconder Badges**
|
||
|
||
**Passo a Passo:**
|
||
1. No painel admin, vá em **"Configurações do Catálogo"**
|
||
2. Desative **"Exibir Badge Promoções"**
|
||
3. Clique em **"Salvar Configurações"**
|
||
4. Recarregue `/catalogo`
|
||
|
||
**Resultado Esperado:**
|
||
- ✅ Produtos em promoção **NÃO** mostram badge 🏷️
|
||
- ✅ Preço promocional ainda aparece
|
||
- ✅ Apenas badge visualmente está oculto
|
||
|
||
**Teste com Novidades:**
|
||
1. Desative **"Exibir Badge Novidades"**
|
||
2. Salve e recarregue
|
||
|
||
**Resultado Esperado:**
|
||
- ✅ Badge ✨ **NOVO** não aparece
|
||
- ✅ Produto continua marcado como novidade no banco
|
||
|
||
---
|
||
|
||
### 7. **Teste: Gerenciar Fotos Adicionais**
|
||
|
||
**Passo a Passo:**
|
||
1. Na coluna **"Ações"**, clique no ícone de **foto** (📷)
|
||
2. Modal "Gerenciar Fotos" abre
|
||
3. Clique em **"Adicionar Nova Foto"**
|
||
4. Selecione uma imagem (máx 5MB)
|
||
5. Aguarde upload
|
||
|
||
**Resultado Esperado:**
|
||
- ✅ Upload completa
|
||
- ✅ Foto aparece no grid do modal
|
||
- ✅ Toast: "Foto adicionada com sucesso!"
|
||
- ✅ Foto aparece na galeria do produto no catálogo
|
||
|
||
**Teste Exclusão:**
|
||
1. Passe o mouse sobre uma foto
|
||
2. Clique no **"×"** vermelho
|
||
3. Confirme exclusão
|
||
|
||
**Resultado Esperado:**
|
||
- ✅ Foto removida do grid
|
||
- ✅ Toast: "Foto removida!"
|
||
|
||
---
|
||
|
||
### 8. **Teste: Múltiplos Produtos**
|
||
|
||
**Cenário: Criar uma vitrine completa**
|
||
|
||
1. Marque 3 produtos como **Novidade**
|
||
2. Marque 2 produtos como **Promoção** (com preço)
|
||
3. Marque 1 produto como **Novidade + Promoção**
|
||
4. Deixe 1 produto normal
|
||
|
||
**No Catálogo Público:**
|
||
- ✅ 3 produtos com badge ✨
|
||
- ✅ 2 produtos com badge 🏷️
|
||
- ✅ 1 produto com ambos badges
|
||
- ✅ 1 produto sem badges
|
||
- ✅ Todos organizados no grid
|
||
|
||
---
|
||
|
||
### 9. **Teste: Responsividade**
|
||
|
||
**Desktop (> 1024px):**
|
||
- ✅ Tabela mostra todas as colunas
|
||
- ✅ Estatísticas em linha (5 cards)
|
||
|
||
**Tablet (768px - 1024px):**
|
||
- ✅ Tabela com scroll horizontal
|
||
- ✅ Estatísticas em 2-3 colunas
|
||
|
||
**Mobile (< 768px):**
|
||
- ✅ Tabela com scroll horizontal
|
||
- ✅ Estatísticas empilhadas
|
||
- ✅ Badges visíveis
|
||
- ✅ Preços legíveis
|
||
|
||
---
|
||
|
||
### 10. **Teste: Integração Completa**
|
||
|
||
**Fluxo End-to-End:**
|
||
|
||
1. **Admin cria promoção:**
|
||
- Define preço promocional
|
||
- Marca como promoção
|
||
- Adiciona fotos extras
|
||
|
||
2. **Cliente visualiza:**
|
||
- Acessa `/catalogo`
|
||
- Vê badge de promoção
|
||
- Vê preço riscado + promo
|
||
- Clica no produto
|
||
|
||
3. **Modal do produto:**
|
||
- Galeria com fotos extras
|
||
- Preço promocional destacado
|
||
- Variações disponíveis
|
||
|
||
4. **Compra:**
|
||
- Seleciona tamanho
|
||
- Adiciona ao carrinho
|
||
- Envia via WhatsApp
|
||
|
||
**Resultado Esperado:**
|
||
- ✅ Fluxo completo sem erros
|
||
- ✅ Informações corretas em todas etapas
|
||
- ✅ WhatsApp com preço promocional
|
||
|
||
---
|
||
|
||
## 🐛 Troubleshooting
|
||
|
||
### Problema: Badges não aparecem no site
|
||
|
||
**Verificar:**
|
||
1. Configurações estão ativas?
|
||
2. Produtos estão marcados corretamente?
|
||
3. JavaScript carregou sem erros?
|
||
|
||
**Solução:**
|
||
```javascript
|
||
// Abra o console (F12)
|
||
console.log(catalogoConfig);
|
||
// Deve mostrar exibirNovidades: true, exibirPromocoes: true
|
||
```
|
||
|
||
### Problema: Preço promocional não salva
|
||
|
||
**Verificar:**
|
||
1. Valor está correto (número com ponto)?
|
||
2. Servidor está rodando?
|
||
3. Endpoint existe?
|
||
|
||
**Solução:**
|
||
```bash
|
||
# Testar endpoint
|
||
curl -X PATCH http://localhost:5000/api/produtos/{ID}/preco-promocional \
|
||
-H "Content-Type: application/json" \
|
||
-d '{"precoPromocional": 79.90}'
|
||
```
|
||
|
||
### Problema: Upload de fotos falha
|
||
|
||
**Verificar:**
|
||
1. Bucket `catalogo` existe?
|
||
2. Políticas RLS configuradas?
|
||
3. Arquivo é menor que 5MB?
|
||
|
||
**Solução:**
|
||
```bash
|
||
node test-upload-catalogo.js
|
||
```
|
||
|
||
---
|
||
|
||
## ✅ Checklist de Testes
|
||
|
||
- [ ] SQL executado com sucesso
|
||
- [ ] Painel admin abre corretamente
|
||
- [ ] URL fixa `/catalogo` aparece
|
||
- [ ] 5 estatísticas visíveis
|
||
- [ ] Configurações salvam
|
||
- [ ] Preço promocional funciona (método 1)
|
||
- [ ] Toggle promoção funciona (método 2)
|
||
- [ ] Toggle novidade funciona
|
||
- [ ] Badge promoção aparece no site
|
||
- [ ] Badge novidade aparece no site
|
||
- [ ] Preço riscado + promocional visível
|
||
- [ ] Ambos badges funcionam juntos
|
||
- [ ] Esconder badges funciona
|
||
- [ ] Upload de fotos funciona
|
||
- [ ] Exclusão de fotos funciona
|
||
- [ ] Galeria de fotos no modal
|
||
- [ ] Responsivo em mobile
|
||
- [ ] Fluxo completo funciona
|
||
|
||
---
|
||
|
||
## 📊 Casos de Teste
|
||
|
||
| # | Teste | Entrada | Saída Esperada | Status |
|
||
|---|-------|---------|----------------|--------|
|
||
| 1 | Definir preço promo | 79.90 | Badge ativo + preço salvo | ⬜ |
|
||
| 2 | Toggle promoção | Clique | On/Off alternado | ⬜ |
|
||
| 3 | Toggle novidade | Clique | On/Off alternado | ⬜ |
|
||
| 4 | Combo promo+novidade | Ambos ativos | 2 badges visíveis | ⬜ |
|
||
| 5 | Esconder badges | Config OFF | Badges ocultos | ⬜ |
|
||
| 6 | Upload foto | IMG 3MB | Foto adicionada | ⬜ |
|
||
| 7 | Deletar foto | Clique × | Foto removida | ⬜ |
|
||
| 8 | Ver catálogo | /catalogo | Site carrega | ⬜ |
|
||
|
||
---
|
||
|
||
## 🎓 Dicas de Teste
|
||
|
||
1. **Limpe o cache** do navegador entre testes
|
||
2. **Abra o console** (F12) para ver erros
|
||
3. **Use modo anônimo** para simular cliente
|
||
4. **Teste em mobile real** quando possível
|
||
5. **Verifique o banco** para confirmar salvamentos
|
||
|
||
---
|
||
|
||
## 📝 Relatório de Bugs
|
||
|
||
Se encontrar problemas, anote:
|
||
|
||
**Bug #:**
|
||
**Descrição:**
|
||
**Passos para Reproduzir:**
|
||
1.
|
||
2.
|
||
3.
|
||
|
||
**Resultado Esperado:**
|
||
**Resultado Atual:**
|
||
**Console Errors:**
|
||
**Screenshots:**
|
||
|
||
---
|
||
|
||
**Data de Criação:** 24 de outubro de 2025
|
||
**Versão Testada:** 2.0.0
|
||
**Testador:** _______________
|
||
**Status Geral:** ⬜ Passou | ⬜ Falhou | ⬜ Parcial
|