Testes de CSS

Teste de integração, ok. Teste de JavaScript, ok. Teste de CSS.... O quê? Sim! Nessa palestra você vai aprender que é possível testar CSS sem muita dor de cabeça. Até o diretor de arte vai gostar.

Transcript

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 ;)