400 lines
9.4 KiB
Markdown
400 lines
9.4 KiB
Markdown
# 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! 💬✨
|
|
|