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