sgse-app/GUIA_TESTE_CHAT.md

Guia de Testes - Sistema de Chat SGSE

Pré-requisitos

1. Backend rodando:

cd packages/backend
npx convex dev

2. Frontend rodando:

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:

// 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! 💬✨