sgse-app/TESTE_UPLOAD_AVATAR_COMPLETO.md

# 🧪 Teste Completo: Upload de Avatar e Imagem Personalizada

## ✅ Status da Implementação

- ✅ **30 avatares 3D realistas** adicionados (15 masculinos + 15 femininos)
- ✅ **Grid responsivo** ajustado (3/5/6 colunas)
- ✅ **Scroll automático** na galeria (máx 500px)
- ✅ **Sistema de upload** de imagem personalizada mantido
- ✅ **Atualização instantânea** com estado local

---

## 📋 Teste 1: Galeria de 30 Avatares

### **Objetivo:**
Verificar se todos os 30 avatares 3D realistas estão carregando corretamente.

### **Passos:**
1. Faça login no sistema
2. Clique no ícone de perfil (canto superior direito)
3. Clique em **"Perfil"**
4. Clique na **área do avatar/foto** (ícone de edição deve aparecer)
5. O modal **"Alterar Foto de Perfil"** deve abrir
6. Verifique que a aba **"Escolher Avatar"** está ativa
7. Verifique a mensagem: **"Escolha um dos 30 avatares profissionais para seu perfil"**

### **Verificações:**
- [ ] Modal abriu corretamente
- [ ] Texto mostra "30 avatares profissionais"
- [ ] Grid está exibindo avatares em:
  - 3 colunas (mobile)
  - 5 colunas (tablet)
  - 6 colunas (desktop)
- [ ] Galeria tem scroll vertical quando necessário
- [ ] Total de **30 avatares** visíveis (conte-os!)
- [ ] Todos os avatares são fotos reais 3D profissionais
- [ ] Mistura balanceada de masculinos e femininos

### **Lista dos 30 Avatares (Para Conferência):**

#### **MASCULINOS (15):**
1. Carlos Silva (ID 12)
2. João Santos (ID 68)
3. Rafael Costa (ID 15)
4. Bruno Oliveira (ID 59)
5. Lucas Ferreira (ID 51)
6. Pedro Almeida (ID 7)
7. Ricardo Pinto (ID 13)
8. Thiago Rocha (ID 52)
9. Marcelo Dias (ID 58)
10. André Castro (ID 70)
11. Fernando Lima (ID 6)
12. Gabriel Santos (ID 14)
13. Rodrigo Souza (ID 53)
14. Paulo Martins (ID 60)
15. Diego Oliveira (ID 33)

#### **FEMININOS (15):**
16. Ana Souza (ID 47)
17. Juliana Lima (ID 32)
18. Maria Rodrigues (ID 20)
19. Beatriz Alves (ID 38)
20. Fernanda Martins (ID 44)
21. Camila Costa (ID 1)
22. Patricia Santos (ID 5)
23. Amanda Silva (ID 9)
24. Larissa Pinto (ID 10)
25. Vanessa Rocha (ID 16)
26. Mariana Dias (ID 23)
27. Carolina Castro (ID 24)
28. Renata Oliveira (ID 25)
29. Aline Ferreira (ID 27)
30. Gabriela Almeida (ID 29)

### **Resultado Esperado:**
✅ Galeria com 30 avatares profissionais 3D realistas funcionando perfeitamente.

---

## 📋 Teste 2: Seleção de Avatar

### **Objetivo:**
Testar a seleção e aplicação de um avatar da galeria.

### **Passos:**
1. Na galeria de avatares (já aberta do Teste 1)
2. **Clique em um avatar** qualquer
3. Observe que o avatar selecionado recebe um **anel azul** (ring-4 ring-primary)
4. Observe que o **preview no topo do modal** atualiza instantaneamente
5. Clique no botão **"Confirmar"**
6. Aguarde a confirmação
7. Observe que o avatar **atualiza instantaneamente** na tela de perfil

### **Verificações:**
- [ ] Clique no avatar adiciona anel azul de seleção
- [ ] Preview no topo do modal atualiza imediatamente
- [ ] Botão "Confirmar" fica habilitado
- [ ] Ao confirmar, modal fecha
- [ ] Avatar na página de perfil atualiza instantaneamente
- [ ] Avatar persiste após recarregar a página (F5)
- [ ] Avatar aparece no header (canto superior direito)

### **Resultado Esperado:**
✅ Avatar selecionado, aplicado e persistido com sucesso.

---

## 📋 Teste 3: Upload de Imagem Personalizada

### **Objetivo:**
Testar o upload de uma imagem personalizada do usuário.

### **Passos:**

#### **3.1. Preparar Imagem de Teste:**
- Prepare uma foto de perfil (JPG ou PNG)
- Tamanho recomendado: 300x300px a 1000x1000px
- Tamanho máximo: 10MB
- Formato: JPG, PNG, ou WEBP

#### **3.2. Fazer Upload:**
1. Abra o modal de avatar (clique na foto de perfil)
2. Clique na aba **"Enviar Foto"**
3. Verifique que aparece:
   - Área de arrastar e soltar
   - Ou botão "Selecionar Foto"
4. Clique em **"Selecionar Foto"** (ou arraste a imagem)
5. Selecione sua imagem de teste
6. Aguarde o upload (barra de progresso deve aparecer)
7. Observe o **preview atualizar** com sua foto
8. Clique em **"Confirmar"**

### **Verificações:**
- [ ] Aba "Enviar Foto" funciona
- [ ] Área de upload aparece corretamente
- [ ] Botão "Selecionar Foto" abre seletor de arquivos
- [ ] Upload inicia após selecionar arquivo
- [ ] Barra de progresso é exibida
- [ ] Preview atualiza com a imagem enviada
- [ ] Botão "Confirmar" fica habilitado
- [ ] Ao confirmar, modal fecha
- [ ] Foto personalizada aparece na página de perfil
- [ ] Foto aparece no header
- [ ] Foto persiste após recarregar (F5)

### **Possíveis Erros e Soluções:**

#### **Erro 1: "Arquivo muito grande"**
- **Causa:** Imagem maior que 10MB
- **Solução:** Comprimir a imagem ou usar uma menor

#### **Erro 2: "Formato não suportado"**
- **Causa:** Arquivo não é JPG/PNG/WEBP
- **Solução:** Converter para formato suportado

#### **Erro 3: Upload trava ou não completa**
- **Causa:** Conexão lenta ou problema no Convex
- **Solução:** 
  1. Verifique console do navegador (F12)
  2. Tente novamente
  3. Use imagem menor

#### **Erro 4: Foto não atualiza instantaneamente**
- **Causa:** Estado local não sincronizado
- **Solução:** 
  1. Recarregue a página (F5)
  2. Se persistir, limpe cache do navegador

### **Resultado Esperado:**
✅ Foto personalizada enviada, aplicada e persistida com sucesso.

---

## 📋 Teste 4: Alternar Entre Avatar e Foto

### **Objetivo:**
Testar a troca entre avatar da galeria e foto personalizada.

### **Passos:**

#### **Cenário 1: Avatar → Foto Personalizada**
1. Selecione um **avatar da galeria**
2. Confirme e verifique que aplicou
3. Abra o modal novamente
4. Vá na aba **"Enviar Foto"**
5. Faça upload de uma foto personalizada
6. Confirme
7. Verifique que a foto personalizada **substituiu** o avatar

#### **Cenário 2: Foto Personalizada → Avatar**
1. Com foto personalizada aplicada
2. Abra o modal
3. Vá na aba **"Escolher Avatar"**
4. Selecione um avatar diferente
5. Confirme
6. Verifique que o avatar **substituiu** a foto personalizada

### **Verificações:**
- [ ] Avatar → Foto funciona perfeitamente
- [ ] Foto → Avatar funciona perfeitamente
- [ ] Apenas um tipo (avatar OU foto) está ativo por vez
- [ ] Preview sempre mostra a opção mais recente
- [ ] Atualização é instantânea em ambos os casos
- [ ] Persistência funciona em ambos os casos

### **Resultado Esperado:**
✅ Troca entre avatar e foto funciona perfeitamente em ambas direções.

---

## 📋 Teste 5: Performance e UX

### **Objetivo:**
Verificar performance e experiência do usuário.

### **Verificações:**

#### **5.1. Performance:**
- [ ] Galeria de 30 avatares carrega rapidamente (< 2s)
- [ ] Scroll na galeria é suave
- [ ] Seleção de avatar é instantânea (sem lag)
- [ ] Upload de foto mostra progresso claro
- [ ] Atualização da foto/avatar é instantânea

#### **5.2. Responsividade:**
- [ ] Modal funciona bem em **mobile** (3 colunas)
- [ ] Modal funciona bem em **tablet** (5 colunas)
- [ ] Modal funciona bem em **desktop** (6 colunas)
- [ ] Avatares têm tamanho adequado em todas telas
- [ ] Upload funciona em todas as resoluções

#### **5.3. Acessibilidade:**
- [ ] Modal pode ser fechado com ESC
- [ ] Botões têm labels adequados
- [ ] Navegação por teclado funciona
- [ ] Foco visual é claro
- [ ] Textos são legíveis

#### **5.4. Feedback Visual:**
- [ ] Avatar selecionado tem anel azul claro
- [ ] Hover nos avatares mostra feedback
- [ ] Botões desabilitados durante upload
- [ ] Loading spinner durante processamento
- [ ] Mensagens de erro são claras

### **Resultado Esperado:**
✅ Sistema responsivo, performático e com excelente UX.

---

## 📸 Capturas de Tela Requeridas

Por favor, tire prints das seguintes situações:

### **Print 1: Galeria de 30 Avatares**
- Modal aberto
- Aba "Escolher Avatar" ativa
- Todos os 30 avatares visíveis (com scroll)
- Demonstração do grid responsivo

### **Print 2: Avatar Selecionado**
- Avatar com anel azul de seleção
- Preview no topo do modal atualizado

### **Print 3: Após Confirmar Avatar**
- Modal fechado
- Página de perfil com novo avatar
- Avatar no header atualizado

### **Print 4: Aba "Enviar Foto"**
- Modal aberto na aba de upload
- Área de upload visível
- Instruções claras

### **Print 5: Upload em Progresso**
- Barra de progresso durante upload
- Botões desabilitados

### **Print 6: Foto Personalizada Aplicada**
- Modal fechado
- Página de perfil com foto personalizada
- Foto no header atualizada

### **Print 7: Console do Navegador (F12)**
- Sem erros no console
- Requisições bem-sucedidas
- Logs de confirmação (se houver)

---

## 🔧 Informações Técnicas para Debug

### **Arquivos Envolvidos:**
- `apps/web/src/lib/utils/avatars.ts` - Galeria de avatares
- `apps/web/src/routes/(dashboard)/perfil/+page.svelte` - Página de perfil
- `packages/backend/convex/usuarios.ts` - Backend (upload/atualização)
- `apps/web/src/lib/stores/auth.svelte.ts` - Estado de autenticação

### **Convex Functions:**
- `api.usuarios.uploadFotoPerfil` - Gera URL de upload
- `api.usuarios.atualizarPerfil` - Atualiza avatar/foto
- `api.usuarios.obterPerfil` - Busca dados do usuário

### **Estados Importantes:**
```typescript
// Estado local (atualização instantânea)
let fotoPerfilLocal = $state<string | null>(null);
let avatarLocal = $state<string | null>(null);

// AuthStore (persistência)
authStore.usuario?.avatar        // ID do avatar (ex: "avatar-male-1")
authStore.usuario?.fotoPerfilUrl // URL da foto personalizada
```

### **Fluxo de Upload:**
1. Usuário seleciona arquivo
2. Frontend chama `api.usuarios.uploadFotoPerfil()`
3. Convex retorna URL temporária de upload
4. Frontend envia arquivo via POST para URL
5. Frontend recebe `storageId`
6. Frontend chama `api.usuarios.atualizarPerfil({ fotoPerfil: storageId })`
7. Backend atualiza banco de dados
8. Frontend chama `authStore.refresh()`
9. Estado local atualiza para feedback instantâneo

### **Verificar no Console:**
```javascript
// Verificar usuário atual
console.log(authStore.usuario);

// Verificar avatar
console.log(authStore.usuario?.avatar);

// Verificar foto de perfil
console.log(authStore.usuario?.fotoPerfilUrl);
```

---

## ✅ Checklist Final

Antes de finalizar o teste, confirme:

- [ ] ✅ 30 avatares carregando corretamente
- [ ] ✅ Seleção de avatar funciona
- [ ] ✅ Upload de foto funciona
- [ ] ✅ Alternância entre avatar/foto funciona
- [ ] ✅ Atualização instantânea funciona
- [ ] ✅ Persistência funciona (após F5)
- [ ] ✅ Avatar aparece no header
- [ ] ✅ Responsividade (mobile/tablet/desktop)
- [ ] ✅ Sem erros no console
- [ ] ✅ Performance adequada
- [ ] ✅ UX intuitiva e agradável

---

## 📊 Resultado Final

| Teste | Status | Observações |
|-------|--------|-------------|
| 1. Galeria de 30 Avatares | ⬜ | |
| 2. Seleção de Avatar | ⬜ | |
| 3. Upload de Imagem | ⬜ | |
| 4. Alternar Avatar/Foto | ⬜ | |
| 5. Performance e UX | ⬜ | |

**Legenda:**
- ✅ = Passou
- ❌ = Falhou
- ⚠️ = Parcial
- ⬜ = Não testado

---

## 🐛 Problemas Encontrados

Liste aqui qualquer problema encontrado durante os testes:

### **Problema 1:**
- **Descrição:** 
- **Passos para reproduzir:**
- **Esperado:**
- **Observado:**
- **Print:**

### **Problema 2:**
- **Descrição:**
- **Passos para reproduzir:**
- **Esperado:**
- **Observado:**
- **Print:**

---

## 🎉 Conclusão

Após completar todos os testes acima:

1. ✅ **Marque os checkboxes**
2. 📸 **Anexe os 7 prints solicitados**
3. 📝 **Documente qualquer problema**
4. ✉️ **Envie o relatório para revisão**

**Data do Teste:** _________________  
**Testador:** _________________  
**Navegador:** _________________  
**Sistema Operacional:** _________________  
**Versão da Aplicação:** 1.0.0  

---

**Status Geral:** ⬜ APROVADO | ⬜ APROVADO COM RESSALVAS | ⬜ REPROVADO