O documento discute estratégias para testes de layout de aplicações CSS, incluindo: 1) testes de sintaxe para verificar a correta escrita das regras CSS; 2) testes visuais de regressão para checar alterações visuais após atualizações e em diferentes formatos de tela; 3) ferramentas como BackstopJS e Cactus que automatizam os testes visuais de regressão.

1. TESTANDO SEU CSS
ESTRATÉGIAS PARA TESTES DE LAYOUT DA SUA APLICAÇÃO

2. @eduardojmatos eduardomatos.me
OI, EU SOU O EDU

3. Soluções de comunicação que aproximam
médicos e pacientes

4. VOCÊS TEM UM
MINUTO PRA OUVIR
SOBRE TESTES?

5. PRA QUÊ TESTAR
1. Porquê ninguém sabe todos
os requisitos no começo do
desenvolvimento;
2. Pessoas não são perfeitas,
portanto, erram;
3. A complexidade das coisas
tende a aumentar conforme o
tempo;

7. REQUISITOS PARA UM BOM TESTE
PRECISA TER BOA PERFORMANCE
PRECISA SER INDEPENDENTE
PRECISA TESTAR AS COISAS CERTAS
DEVE USAR O MÍNIMO DE RECURSO.

9. E COMO FAZ PRA
TESTAR MEU CSS?

10. TESTES DE SINTAXE
FERRAMENTAS QUE CHECAM SE
VOCÊ ESCREVEU TUDO DIREITINHO

11. .button {
dispaly: inline-block;
color: #azul;
font-family: Arial, sans-serif
letter-spacing: 1.2em;
}

13. OU VIA COMMAND-LINE
npm install -g csslint

19. É REALMENTE NECESSÁRIO?

21. PRÉ-PROCESSADORES JÁ DISPARAM
ERROS QUANDO HÁ ERROS DE SINTAXE
GERALMENTE OS EDITORES DE CÓDIGO
POSSUEM PLUGINS QUE JÁ VALIDAM ESSES
ERROS

22. TESTE EM UM PROGRAMA QUE ASSEGURA QUE AS
NOVAS ALTERAÇÕES NÃO IRÃO CAUSAR BUGS OU
ERROS
TESTES DE REGRESSÃO VISUAL

23. PRA QUÊ TESTAR LAYOUT?

24. TESTES VISUAIS NÃO ESCALAM!
LAYOUT, COMPONENTES,
TELAS
PRODUTIVIDADE
NO TESTE VISUAL (olho nú)

26. EVITAR TESTES MANUAIS
REPETITIVOS
E COM POSSÍVEIS FALHAS APÓS A
504939ª TENTATIVA

28. CHECAR ALTERAÇÕES VISUAIS APÓS UMA ENTREGA
CONTROLAR MUDANÇAS MUITO BRUSCAS
TESTAR VÁRIOS FORMATOS DE TELA
RASTREAR BUGS QUE SÓ UM DESIGNER IDENTIFICA
(FONTE, PIXEL, CÓDIGO DE CORES, ETC.)

29. FERRAMENTAS DE TESTE
DE REGRESSÃO VISUAL

31. Succss.pages = {
'home': {
url:'http://www.conferenciacssbrasil.com.br/',
directory:'screenshots',
captures: {
'hold-date':'.section.hold-date',
'speakers': 'section.hold-speakers .speaker-list .speaker-item'
}
}
};
Succss.viewports = {
'default': {
width: 1366,
height: 768
},
'mobile-landscape': {
width: 640,
height: 480
}
};

34. "QUICK-INSTALL"
https://css-tricks.com/automating-css-regression-testing/

35. edite o
arquivo de
configuração
./backstop.json

40. Cactus.expect(".header", "font-size").toEqual("24px");
Cactus.expect("p", “font-size").toEqual("12px");
Cactus.expect(".header", “font-family").toContain("Helvetica");
Cactus.expect(".header").toHaveMargin("10px 5px");

42. MAS E SE EU NÃO
QUERO “CODAR" PRA TESTAR?

44. O hardy gera um arquivo em texto que o cucumber
usa pra testes de comportamento

45. DEVO USAR TESTES
À PARTIR DE AGORA?

46. DEPENDE!
DO TAMANHO DO SEU PROJETO
DA COMPLEXIDADE DAS TELAS
DA IMPORTÂNCIA COM VISUAL QUE A
APLICAÇÃO TEM

47. BOM SENSO, SEMPRE!

48. eduardoj.matos@gmail.com @eduardojmatos http://eduardomatos.me
OBRIGADO ;)