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