feat: implement comprehensive chat system with user presence management, notification handling, and avatar integration; enhance UI components for improved user experience
This commit is contained in:
399
GUIA_TESTE_CHAT.md
Normal file
399
GUIA_TESTE_CHAT.md
Normal file
@@ -0,0 +1,399 @@
|
||||
# Guia de Testes - Sistema de Chat SGSE
|
||||
|
||||
## Pré-requisitos
|
||||
|
||||
1. **Backend rodando:**
|
||||
```bash
|
||||
cd packages/backend
|
||||
npx convex dev
|
||||
```
|
||||
|
||||
2. **Frontend rodando:**
|
||||
```bash
|
||||
cd apps/web
|
||||
npm run dev
|
||||
```
|
||||
|
||||
3. **Pelo menos 2 usuários cadastrados no sistema**
|
||||
|
||||
---
|
||||
|
||||
## Roteiro de Testes
|
||||
|
||||
### 1. Login e Interface Inicial ✅
|
||||
|
||||
**Passos:**
|
||||
1. Acesse http://localhost:5173
|
||||
2. Faça login com um usuário
|
||||
3. Verifique se o sino de notificações aparece no header (ao lado do nome)
|
||||
4. Verifique se o botão de chat aparece no canto inferior direito
|
||||
|
||||
**Resultado esperado:**
|
||||
- Sino de notificações visível
|
||||
- Botão de chat flutuante visível
|
||||
- Status do usuário como "online"
|
||||
|
||||
---
|
||||
|
||||
### 2. Configurar Perfil 👤
|
||||
|
||||
**Passos:**
|
||||
1. Clique no avatar do usuário no header
|
||||
2. Clique em "Meu Perfil"
|
||||
3. Escolha um avatar ou faça upload de uma foto
|
||||
4. Preencha o setor (ex: "Recursos Humanos")
|
||||
5. Adicione uma mensagem de status (ex: "Disponível para reuniões")
|
||||
6. Configure o status de presença
|
||||
7. Ative notificações
|
||||
8. Clique em "Salvar Configurações"
|
||||
|
||||
**Resultado esperado:**
|
||||
- Avatar/foto atualizado
|
||||
- Configurações salvas com sucesso
|
||||
- Mensagem de confirmação aparece
|
||||
|
||||
---
|
||||
|
||||
### 3. Abrir o Chat 💬
|
||||
|
||||
**Passos:**
|
||||
1. Clique no botão de chat no canto inferior direito
|
||||
2. A janela do chat deve abrir
|
||||
|
||||
**Resultado esperado:**
|
||||
- Janela do chat abre com animação suave
|
||||
- Título "Chat" visível
|
||||
- Botões de minimizar e fechar visíveis
|
||||
- Mensagem "Nenhuma conversa ainda" aparece
|
||||
|
||||
---
|
||||
|
||||
### 4. Criar Nova Conversa Individual 👥
|
||||
|
||||
**Passos:**
|
||||
1. Clique no botão "Nova Conversa"
|
||||
2. Na tab "Individual", veja a lista de usuários
|
||||
3. Procure um usuário na busca (digite o nome)
|
||||
4. Clique no usuário para iniciar conversa
|
||||
|
||||
**Resultado esperado:**
|
||||
- Modal abre com lista de usuários
|
||||
- Busca funciona corretamente
|
||||
- Status de presença dos usuários visível (bolinha colorida)
|
||||
- Ao clicar, conversa é criada e modal fecha
|
||||
- Janela de conversa abre automaticamente
|
||||
|
||||
---
|
||||
|
||||
### 5. Enviar Mensagens de Texto 📝
|
||||
|
||||
**Passos:**
|
||||
1. Na conversa aberta, digite uma mensagem
|
||||
2. Pressione Enter para enviar
|
||||
3. Digite outra mensagem
|
||||
4. Pressione Shift+Enter para quebrar linha
|
||||
5. Pressione Enter para enviar
|
||||
|
||||
**Resultado esperado:**
|
||||
- Mensagem enviada aparece à direita (azul)
|
||||
- Timestamp visível
|
||||
- Indicador "digitando..." aparece para o outro usuário
|
||||
- Segunda mensagem com quebra de linha enviada corretamente
|
||||
|
||||
---
|
||||
|
||||
### 6. Testar Tempo Real (Use 2 navegadores) 🔄
|
||||
|
||||
**Passos:**
|
||||
1. Abra outro navegador/aba anônima
|
||||
2. Faça login com outro usuário
|
||||
3. Abra o chat
|
||||
4. Na primeira conta, envie uma mensagem
|
||||
5. Na segunda conta, veja a mensagem chegar em tempo real
|
||||
|
||||
**Resultado esperado:**
|
||||
- Mensagem aparece instantaneamente no outro navegador
|
||||
- Notificação aparece no sino
|
||||
- Som de notificação toca (se configurado)
|
||||
- Notificação desktop aparece (se permitido)
|
||||
- Contador de não lidas atualiza
|
||||
|
||||
---
|
||||
|
||||
### 7. Upload de Arquivo 📎
|
||||
|
||||
**Passos:**
|
||||
1. Na conversa, clique no ícone de anexar
|
||||
2. Selecione um arquivo (PDF, imagem, etc - max 10MB)
|
||||
3. Aguarde o upload
|
||||
|
||||
**Resultado esperado:**
|
||||
- Loading durante upload
|
||||
- Arquivo aparece na conversa
|
||||
- Se for imagem, preview inline
|
||||
- Se for arquivo, ícone com nome e tamanho
|
||||
- Outro usuário pode baixar o arquivo
|
||||
|
||||
---
|
||||
|
||||
### 8. Agendar Mensagem ⏰
|
||||
|
||||
**Passos:**
|
||||
1. Na conversa, clique no ícone de relógio (agendar)
|
||||
2. Digite uma mensagem
|
||||
3. Selecione uma data futura (ex: hoje + 2 minutos)
|
||||
4. Selecione um horário
|
||||
5. Veja o preview: "Será enviada em..."
|
||||
6. Clique em "Agendar"
|
||||
|
||||
**Resultado esperado:**
|
||||
- Modal de agendamento abre
|
||||
- Data/hora mínima é agora
|
||||
- Preview atualiza conforme você digita
|
||||
- Mensagem aparece na lista de "Mensagens Agendadas"
|
||||
- Após o tempo definido, mensagem é enviada automaticamente
|
||||
- Notificação é criada para o destinatário
|
||||
|
||||
---
|
||||
|
||||
### 9. Cancelar Mensagem Agendada ❌
|
||||
|
||||
**Passos:**
|
||||
1. No modal de agendamento, veja a lista de mensagens agendadas
|
||||
2. Clique no ícone de lixeira de uma mensagem
|
||||
3. Confirme o cancelamento
|
||||
|
||||
**Resultado esperado:**
|
||||
- Mensagem removida da lista
|
||||
- Mensagem não será enviada
|
||||
|
||||
---
|
||||
|
||||
### 10. Criar Grupo 👥👥👥
|
||||
|
||||
**Passos:**
|
||||
1. Clique em "Nova Conversa"
|
||||
2. Vá para a tab "Grupo"
|
||||
3. Digite um nome para o grupo (ex: "Equipe RH")
|
||||
4. Selecione 2 ou mais participantes
|
||||
5. Clique em "Criar Grupo"
|
||||
|
||||
**Resultado esperado:**
|
||||
- Grupo criado com sucesso
|
||||
- Nome do grupo aparece no header
|
||||
- Emoji de grupo (👥) aparece
|
||||
- Todos os participantes recebem notificação
|
||||
- Mensagens enviadas são recebidas por todos
|
||||
|
||||
---
|
||||
|
||||
### 11. Notificações 🔔
|
||||
|
||||
**Passos:**
|
||||
1. Com usuário 1, envie mensagem para usuário 2
|
||||
2. No usuário 2, verifique:
|
||||
- Sino com contador
|
||||
- Badge no botão de chat
|
||||
- Notificação desktop (se permitido)
|
||||
- Som (se ativado)
|
||||
3. Clique no sino
|
||||
4. Veja as notificações no dropdown
|
||||
5. Clique em "Marcar todas como lidas"
|
||||
|
||||
**Resultado esperado:**
|
||||
- Contador atualiza corretamente
|
||||
- Dropdown mostra notificações recentes
|
||||
- Botão "Marcar todas como lidas" funciona
|
||||
- Notificações somem após marcar como lidas
|
||||
|
||||
---
|
||||
|
||||
### 12. Status de Presença 🟢🟡🔴
|
||||
|
||||
**Passos:**
|
||||
1. No perfil, mude o status para "Ausente"
|
||||
2. Veja em outro navegador - bolinha deve ficar amarela
|
||||
3. Mude para "Em Reunião"
|
||||
4. Veja em outro navegador - bolinha deve ficar vermelha
|
||||
5. Feche a aba
|
||||
6. Veja em outro navegador - status deve mudar para "Offline"
|
||||
|
||||
**Resultado esperado:**
|
||||
- Status atualiza em tempo real para outros usuários
|
||||
- Cores corretas:
|
||||
- Verde = Online
|
||||
- Amarelo = Ausente
|
||||
- Azul = Externo
|
||||
- Vermelho = Em Reunião
|
||||
- Cinza = Offline
|
||||
|
||||
---
|
||||
|
||||
### 13. Indicador "Digitando..." ⌨️
|
||||
|
||||
**Passos:**
|
||||
1. Com 2 navegadores abertos na mesma conversa
|
||||
2. No navegador 1, comece a digitar (não envie)
|
||||
3. No navegador 2, veja o indicador aparecer
|
||||
|
||||
**Resultado esperado:**
|
||||
- Texto "Usuário está digitando..." aparece
|
||||
- 3 bolinhas animadas
|
||||
- Indicador desaparece após 10s sem digitação
|
||||
- Indicador desaparece se mensagem for enviada
|
||||
|
||||
---
|
||||
|
||||
### 14. Mensagens Não Lidas 📨
|
||||
|
||||
**Passos:**
|
||||
1. Com usuário 1, envie 3 mensagens para usuário 2
|
||||
2. No usuário 2, veja o contador
|
||||
3. Abra a lista de conversas
|
||||
4. Veja o badge de não lidas na conversa
|
||||
5. Abra a conversa
|
||||
6. Veja o contador zerar
|
||||
|
||||
**Resultado esperado:**
|
||||
- Badge mostra número correto (max 9+)
|
||||
- Ao abrir conversa, mensagens são marcadas como lidas automaticamente
|
||||
- Contador zera
|
||||
|
||||
---
|
||||
|
||||
### 15. Minimizar e Maximizar 📐
|
||||
|
||||
**Passos:**
|
||||
1. Abra o chat
|
||||
2. Clique no botão de minimizar (-)
|
||||
3. Veja o chat minimizar
|
||||
4. Clique no botão flutuante novamente
|
||||
5. Chat abre de volta no mesmo estado
|
||||
|
||||
**Resultado esperado:**
|
||||
- Chat minimiza para o botão flutuante
|
||||
- Estado preservado (conversa ativa mantida)
|
||||
- Animações suaves
|
||||
|
||||
---
|
||||
|
||||
### 16. Scroll de Mensagens 📜
|
||||
|
||||
**Passos:**
|
||||
1. Em uma conversa com poucas mensagens, envie várias mensagens
|
||||
2. Veja o auto-scroll para a última mensagem
|
||||
3. Role para cima
|
||||
4. Veja mensagens mais antigas
|
||||
5. Envie nova mensagem
|
||||
6. Role deve continuar na posição (não auto-scroll)
|
||||
7. Role até o final
|
||||
8. Envie mensagem - deve auto-scroll
|
||||
|
||||
**Resultado esperado:**
|
||||
- Auto-scroll apenas se estiver no final
|
||||
- Scroll manual preservado
|
||||
- Performance fluída
|
||||
|
||||
---
|
||||
|
||||
### 17. Responsividade 📱
|
||||
|
||||
**Passos:**
|
||||
1. Abra o chat no desktop (> 768px)
|
||||
2. Redimensione a janela para mobile (< 768px)
|
||||
3. Abra o chat
|
||||
4. Veja ocupar tela inteira
|
||||
|
||||
**Resultado esperado:**
|
||||
- Desktop: janela 400x600px, bottom-right
|
||||
- Mobile: fullscreen
|
||||
- Transição suave entre layouts
|
||||
|
||||
---
|
||||
|
||||
### 18. Logout e Presença ⚡
|
||||
|
||||
**Passos:**
|
||||
1. Com chat aberto, faça logout
|
||||
2. Em outro navegador, veja o status mudar para "offline"
|
||||
|
||||
**Resultado esperado:**
|
||||
- Status muda para offline imediatamente
|
||||
- Chat fecha ao fazer logout
|
||||
|
||||
---
|
||||
|
||||
## Checklist de Funcionalidades ✅
|
||||
|
||||
- [ ] Login e visualização inicial
|
||||
- [ ] Configuração de perfil (avatar, foto, setor, status)
|
||||
- [ ] Abrir/fechar/minimizar chat
|
||||
- [ ] Criar conversa individual
|
||||
- [ ] Criar grupo
|
||||
- [ ] Enviar mensagens de texto
|
||||
- [ ] Upload de arquivos
|
||||
- [ ] Upload de imagens
|
||||
- [ ] Mensagens em tempo real (2 navegadores)
|
||||
- [ ] Agendar mensagem
|
||||
- [ ] Cancelar mensagem agendada
|
||||
- [ ] Notificações no sino
|
||||
- [ ] Notificações desktop
|
||||
- [ ] Som de notificação
|
||||
- [ ] Contador de não lidas
|
||||
- [ ] Marcar como lida
|
||||
- [ ] Status de presença (online/offline/ausente/externo/em_reunião)
|
||||
- [ ] Indicador "digitando..."
|
||||
- [ ] Busca de conversas
|
||||
- [ ] Scroll de mensagens
|
||||
- [ ] Auto-scroll inteligente
|
||||
- [ ] Responsividade (desktop e mobile)
|
||||
- [ ] Animações e transições
|
||||
- [ ] Loading states
|
||||
- [ ] Mensagens de erro
|
||||
|
||||
---
|
||||
|
||||
## Problemas Comuns e Soluções 🔧
|
||||
|
||||
### Chat não abre
|
||||
**Solução:** Verifique se está logado e se o backend Convex está rodando
|
||||
|
||||
### Mensagens não aparecem em tempo real
|
||||
**Solução:** Verifique a conexão com o Convex (console do navegador)
|
||||
|
||||
### Upload de arquivo falha
|
||||
**Solução:** Verifique o tamanho (max 10MB) e se o backend está rodando
|
||||
|
||||
### Notificações não aparecem
|
||||
**Solução:** Permitir notificações no navegador (Settings > Notifications)
|
||||
|
||||
### Som não toca
|
||||
**Solução:** Adicionar arquivo `notification.mp3` em `/static/sounds/`
|
||||
|
||||
### Indicador de digitação não aparece
|
||||
**Solução:** Aguarde 1 segundo após começar a digitar (debounce)
|
||||
|
||||
### Mensagem agendada não enviada
|
||||
**Solução:** Verificar se o cron está rodando no Convex
|
||||
|
||||
---
|
||||
|
||||
## Logs para Debug 🐛
|
||||
|
||||
Abra o Console do Navegador (F12) e veja:
|
||||
|
||||
```javascript
|
||||
// Convex queries/mutations
|
||||
// Erros de rede
|
||||
// Notificações
|
||||
// Status de presença
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Conclusão 🎉
|
||||
|
||||
Se todos os testes passaram, o sistema de chat está **100% funcional**!
|
||||
|
||||
Aproveite o novo sistema de comunicação! 💬✨
|
||||
|
||||
Reference in New Issue
Block a user