161 lines
4.7 KiB
Markdown
161 lines
4.7 KiB
Markdown
# 🧪 Teste do Sistema de Chat
|
||
|
||
## ✅ Upload de Foto de Perfil - Implementado!
|
||
|
||
### Como testar:
|
||
1. Faça login no sistema
|
||
2. Clique no ícone de usuário (canto superior direito)
|
||
3. Selecione **"Perfil"**
|
||
4. Passe o mouse sobre a foto/avatar
|
||
5. Clique no botão de câmera que aparece
|
||
6. Selecione uma imagem (JPG, PNG ou GIF até 5MB)
|
||
7. 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**
|
||
|
||
1. Faça login com o **Usuário 1**
|
||
2. No canto inferior direito, clique no **botão roxo flutuante** 💬
|
||
3. O chat deve abrir
|
||
|
||
#### 3️⃣ **Iniciar Conversa**
|
||
|
||
1. Clique em **"Nova Conversa"** ou no ícone de "+"
|
||
2. Selecione **"João Teste"** (Usuário 2) da lista
|
||
3. Digite uma mensagem: "Olá, esta é uma mensagem de teste!"
|
||
4. Pressione Enter ou clique em Enviar
|
||
|
||
#### 4️⃣ **Verificar Recebimento** (em outra aba/navegador)
|
||
|
||
1. Abra uma nova janela/aba **anônima/privada**
|
||
2. Faça login com o **Usuário 2** (joao.teste@exemplo.com)
|
||
3. Veja o sino de notificações 🔔 no canto superior direito
|
||
- Deve aparecer um contador vermelho com "1"
|
||
4. Clique no sino para ver a notificação
|
||
5. Clique na notificação ou abra o chat
|
||
6. Responda: "Recebi sua mensagem!"
|
||
|
||
#### 5️⃣ **Confirmar Sincronização**
|
||
|
||
1. Volte para a aba do **Usuário 1**
|
||
2. Você deve ver a resposta aparecer automaticamente (real-time)
|
||
3. 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! 🚀**
|
||
|