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:

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

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