4.7 KiB
4.7 KiB
🧪 Teste do Sistema de Chat
✅ Upload de Foto de Perfil - Implementado!
Como testar:
- Faça login no sistema
- Clique no ícone de usuário (canto superior direito)
- Selecione "Perfil"
- Passe o mouse sobre a foto/avatar
- Clique no botão de câmera que aparece
- Selecione uma imagem (JPG, PNG ou GIF até 5MB)
- A foto será carregada automaticamente!
O que foi implementado:
- ✅ Avatar maior (24x24 → w-24 h-24) com ring colorido
- ✅ Botão de edição aparece ao passar o mouse (efeito hover)
- ✅ Modal dedicado para upload de foto
- ✅ Preview da foto atual
- ✅ Validação de tipo e tamanho de arquivo
- ✅ Loading indicator durante upload
- ✅ CARGO/FUNÇÃO aparece em destaque abaixo do nome
- ✅ Status de férias exibido como badge
- ✅ Atualização automática do perfil após upload
📱 Teste do Chat Entre Usuários
Pré-requisitos:
Para testar o chat, você precisa de 2 usuários diferentes cadastrados no sistema.
Passo a Passo:
1️⃣ Preparar 2 usuários
Usuário 1 - Admin/TI:
- Login: (seu usuário atual)
- Acesse: TI > Usuários
- Crie um segundo usuário de teste se não existir
Usuário 2 - Teste:
- Matricula: 999999
- Nome: João Teste
- Email: joao.teste@exemplo.com
- Senha inicial: senha123
2️⃣ Abrir Chat Widget
- Faça login com o Usuário 1
- No canto inferior direito, clique no botão roxo flutuante 💬
- O chat deve abrir
3️⃣ Iniciar Conversa
- Clique em "Nova Conversa" ou no ícone de "+"
- Selecione "João Teste" (Usuário 2) da lista
- Digite uma mensagem: "Olá, esta é uma mensagem de teste!"
- Pressione Enter ou clique em Enviar
4️⃣ Verificar Recebimento (em outra aba/navegador)
- Abra uma nova janela/aba anônima/privada
- Faça login com o Usuário 2 (joao.teste@exemplo.com)
- Veja o sino de notificações 🔔 no canto superior direito
- Deve aparecer um contador vermelho com "1"
- Clique no sino para ver a notificação
- Clique na notificação ou abra o chat
- Responda: "Recebi sua mensagem!"
5️⃣ Confirmar Sincronização
- Volte para a aba do Usuário 1
- Você deve ver a resposta aparecer automaticamente (real-time)
- O sino deve notificar a nova mensagem
🔍 Funcionalidades do Chat para Testar:
✅ Conversas 1-para-1
- Enviar mensagem
- Receber mensagem em tempo real
- Marcar como lida
- Buscar usuários
✅ Notificações
- Contador no sino 🔔
- Notificação ao receber mensagem
- Som de notificação (se habilitado)
- Badge "não lida" nas conversas
✅ Interface
- Lista de conversas
- Busca de usuários
- Avatares com foto ou iniciais
- Timestamp das mensagens
- Status online/offline (se implementado)
- Chat flutuante no canto direito
🐛 Problemas Comuns:
Chat não abre
- ✅ RESOLVIDO: z-index ajustado para 99999
- Verifique se o widget está visível no canto inferior direito
Mensagem não chega
- Verifique se ambos os usuários estão logados
- Abra o Console (F12) e veja se há erros
- Confirme que o Convex está rodando
Notificação não aparece
- Verifique se está na aba correta do usuário
- Recarregue a página (F5)
- Confira as permissões do navegador
📸 Capturas de Tela Esperadas:
Perfil atualizado:
┌─────────────────────────────────────┐
│ [FOTO] João Silva │
│ 📷 Desenvolvedor Senior │ ← CARGO
│ joao@exemplo.com │
│ 🏷️ TI_MASTER 👥 Equipe TI │
└─────────────────────────────────────┘
Chat Widget:
[Botão Chat 💬]
┌──────────────┐
│ Conversas │
├──────────────┤
│ 👤 João │
│ Olá! │
│ 12:30 │
├──────────────┤
│ 👤 Maria │
│ OK! │
│ 11:15 │
└──────────────┘
✨ Conclusão
Se todos os testes passarem, você terá:
- ✅ Upload de foto de perfil funcionando
- ✅ Cargo exibido no perfil
- ✅ Chat em tempo real entre usuários
- ✅ Notificações funcionando
- ✅ Interface moderna e responsiva
Boa sorte nos testes! 🚀