UI/UX Transversal - Plano de testes

Escopo

Testes transversais de UI/UX que se aplicam a todos os modulos do Contrasync, incluindo alternancia dark mode/light mode, layout responsivo, internacionalizacao (pt-BR e en), estados de loading, erro e vazio, validacoes de formularios, navegacao e acessibilidade basica.

Pre-condicoes

• Usuario autenticado com empresa selecionada
• Acesso a todos os modulos da aplicacao
• Navegadores de teste: Chrome, Firefox, Safari (ultimas 2 versoes)
• Dispositivos de teste: Desktop (1920x1080), Tablet (768x1024), Mobile (375x812)
• MSW configurado para simular estados de loading e erro

Cenarios de teste

Dark mode / Light mode

#	Cenario	Passos	Resultado esperado	Prioridade
1	Alternar para dark mode	1. Em qualquer pagina (light mode) 2. Clicar no botao de alternancia de tema	Toda a interface muda para tema escuro. Cores de fundo, texto e componentes adaptam	Alta
2	Alternar para light mode	1. Em dark mode 2. Clicar no botao de alternancia	Interface retorna ao tema claro	Alta
3	Preferencia persistida	1. Selecionar dark mode 2. Fechar navegador 3. Reabrir a aplicacao	Tema dark mode permanece selecionado	Alta
4	Formularios em dark mode	1. Ativar dark mode 2. Acessar qualquer formulario	Campos de input, selects, datepickers leggiveis com contraste adequado	Alta
5	Tabelas em dark mode	1. Ativar dark mode 2. Acessar pagina com tabelas	Tabelas legiveis. Linhas alterndas com contraste. Headers visiveis	Media
6	Graficos em dark mode	1. Ativar dark mode 2. Acessar pagina com graficos (ex: consolidado)	Graficos adaptam cores. Labels e eixos legiveis	Media
7	Modais e drawers em dark mode	1. Ativar dark mode 2. Abrir modal ou drawer	Componentes overlay respeitam o tema escuro	Media
8	Badges e tags em dark mode	1. Ativar dark mode 2. Verificar badges de status e tags	Cores e contraste adequados para leitura	Media

Layout responsivo

#	Cenario	Passos	Resultado esperado	Prioridade
9	Desktop (1920x1080)	1. Acessar aplicacao em resolucao desktop 2. Navegar pelos modulos	Layout completo com sidebar, conteudo principal e paineis laterais	Alta
10	Tablet (768x1024)	1. Redimensionar para resolucao de tablet 2. Navegar pelos modulos	Layout adapta: sidebar recolhida ou menu hamburger, conteudo ocupa largura total	Alta
11	Mobile (375x812)	1. Redimensionar para resolucao mobile 2. Navegar pelos modulos	Layout empilhado: menu mobile, conteudo em coluna unica, botoes em largura total	Alta
12	Tabelas responsivas	1. Acessar tabela em tela pequena	Tabela com scroll horizontal ou layout alternativo (cards)	Media
13	Formularios responsivos	1. Acessar formulario em tela mobile	Campos em coluna unica. Botoes acessiveis. Teclado nao obstrui inputs	Media
14	Sidebar em tablet	1. Em resolucao tablet 2. Abrir e fechar sidebar	Sidebar funciona como overlay ou recolhivel. Conteudo acessivel	Media

Internacionalizacao (i18n)

#	Cenario	Passos	Resultado esperado	Prioridade
15	Trocar idioma para ingles	1. Acessar configuracoes de idioma 2. Selecionar "English"	Toda a interface traduzida para ingles. Nenhum texto em portugues	Alta
16	Trocar idioma para portugues	1. Em ingles 2. Selecionar "Portugues (BR)"	Toda a interface traduzida para portugues. Nenhum texto em ingles	Alta
17	Preferencia de idioma persistida	1. Selecionar idioma 2. Recarregar pagina	Idioma selecionado permanece	Alta
18	Mensagens de validacao traduzidas	1. Em ingles 2. Acionar validacao de formulario	Mensagens de erro em ingles	Media
19	Datas formatadas por locale	1. Verificar exibicao de datas em pt-BR e en	pt-BR: "23/03/2026", en: "03/23/2026" ou formato local	Media
20	Numeros formatados por locale	1. Verificar valores monetarios em pt-BR e en	pt-BR: "R$ 1.500,00", en: "$1,500.00" ou formato adequado	Media
21	Nenhuma chave de traducao visivel	1. Em ambos os idiomas 2. Navegar por todas as paginas	Nenhum texto tipo "auth.login.title" visivel. Todas as chaves traduzidas	Alta

Estados de loading

#	Cenario	Passos	Resultado esperado	Prioridade
22	Loading em listagens	1. Acessar pagina com listagem (prestadores, templates) 2. Observar carregamento	Skeleton, spinner ou indicador de loading exibido ate dados carregarem	Alta
23	Loading em formularios ao salvar	1. Preencher formulario 2. Clicar em "Salvar"	Botao exibe loading (spinner ou texto "Salvando..."). Botao desabilitado	Alta
24	Loading em upload de arquivo	1. Fazer upload de arquivo 2. Observar durante envio	Barra de progresso ou spinner exibido ate upload completar	Media

Estados de erro

#	Cenario	Passos	Resultado esperado	Prioridade
25	Erro de carregamento de pagina	1. Simular erro 500 ao carregar pagina	Mensagem de erro amigavel exibida. Opcao de "Tentar novamente"	Alta
26	Erro de submissao de formulario	1. Simular erro ao salvar formulario	Mensagem de erro exibida. Dados do formulario preservados	Alta
27	Erro de rede (offline)	1. Desabilitar conexao de rede 2. Tentar qualquer acao	Mensagem informando problema de conexao	Media
28	Toast de erro	1. Acionar qualquer erro de API	Toast/notificacao de erro exibida com mensagem legivel (nao tecnica)	Alta

Estados vazios

#	Cenario	Passos	Resultado esperado	Prioridade
29	Lista vazia - templates	1. Acessar modulo sem templates criados	Mensagem "Nenhum template encontrado" com call-to-action para criar	Alta
30	Lista vazia - contratos	1. Acessar modulo sem contratos	Estado vazio com mensagem orientativa	Alta
31	Lista vazia apos filtro	1. Aplicar filtro que nao retorna resultados	Mensagem "Nenhum resultado encontrado" com sugestao de ajustar filtros	Media

Validacoes de formularios

#	Cenario	Passos	Resultado esperado	Prioridade
32	Campo obrigatorio vazio	1. Deixar campo obrigatorio vazio 2. Submeter formulario	Campo destacado com borda vermelha e mensagem de erro abaixo	Alta
33	Email com formato invalido	1. Digitar "email-invalido" em campo de email	Mensagem de formato invalido exibida	Alta
34	Validacao em tempo real	1. Preencher campo com valor invalido 2. Mover foco para proximo campo	Validacao exibida ao perder foco (blur)	Media
35	Mascara de campos (CPF, CNPJ, telefone)	1. Digitar numeros em campos com mascara	Formatacao aplicada automaticamente conforme digitacao	Media

Navegacao

#	Cenario	Passos	Resultado esperado	Prioridade
36	Menu lateral - item ativo	1. Acessar modulo de templates 2. Verificar menu lateral	Item "Templates" destacado como ativo no menu	Alta
37	Botao voltar do navegador	1. Navegar: Dashboard > Templates > Detalhe 2. Clicar "Voltar" no navegador	Retorna para lista de templates (pagina anterior) sem erros	Alta
38	Navegacao por URL direta	1. Digitar URL direta de um modulo na barra de endereco	Pagina carrega corretamente (se autenticado) ou redireciona para login	Media
39	Breadcrumbs	1. Navegar ate pagina interna (ex: detalhe de contrato) 2. Verificar breadcrumbs	Trilha de navegacao exibida e clicavel (ex: Dashboard > Contratos > Contrato #123)	Media

Acessibilidade basica

#	Cenario	Passos	Resultado esperado	Prioridade
40	Navegacao por teclado (Tab)	1. Em qualquer pagina 2. Navegar usando Tab/Shift+Tab	Foco visivel em elementos interativos. Ordem logica	Media
41	Contraste de texto	1. Verificar texto em light e dark mode	Contraste minimo de 4.5:1 para texto normal (WCAG AA)	Media
42	Labels em campos de formulario	1. Verificar formularios	Todos os campos possuem label associado (visivel ou aria-label)	Media

Cenarios negativos

#	Cenario	Passos	Resultado esperado
1	Mudar idioma durante preenchimento	Trocar idioma enquanto formulario esta preenchido	Labels traduzem. Dados preenchidos preservados
2	Alternar tema durante modal aberto	Abrir modal > trocar dark/light mode	Modal adapta ao novo tema sem fechar
3	Redimensionar janela durante operacao	Redimensionar de desktop para mobile durante interacao	Layout adapta. Nenhum dado perdido
4	Duplo clique em botoes de acao	Clicar rapidamente duas vezes em qualquer botao de acao	Apenas uma acao executada

Casos extremos

#	Cenario	Resultado esperado
1	Zoom do navegador em 200%	Interface funcional e legivel
2	Tela ultra-wide (3440x1440)	Layout nao distorce. Conteudo centralizado ou adaptado
3	Texto muito longo em campos de exibicao	Texto truncado com ellipsis ou quebra de linha adequada
4	50+ itens em dropdown/select	Dropdown com scroll. Performance adequada
5	Navegacao com JavaScript desabilitado	Mensagem informando necessidade de JavaScript

Criterios de aceite

• [ ] Dark mode e light mode funcionam em todas as paginas
• [ ] Preferencia de tema persiste entre sessoes
• [ ] Layout responsivo funciona em desktop, tablet e mobile
• [ ] Tabelas e formularios adaptam em telas pequenas
• [ ] Internacionalizacao completa em pt-BR e en
• [ ] Nenhuma chave de traducao exposta na interface
• [ ] Datas e numeros formatados conforme locale
• [ ] Estados de loading exibidos durante carregamento e acoes
• [ ] Botoes desabilitados durante processamento
• [ ] Estados de erro amigaveis com opcao de retry
• [ ] Estados vazios com mensagens orientativas
• [ ] Validacoes de formulario claras e traduzidas
• [ ] Navegacao por menu, URL direta e botao voltar funciona
• [ ] Acessibilidade basica por teclado garantida