App-Estoque-LiberiKids/GUIA-TESTE-CATALOGO-V2.md

🧪 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:

sql/add-campos-catalogo-melhorias.sql

2. ✅ Servidor está rodando:

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:

// 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:

# 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:

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