Testando o seu CSS

Criar rotinas para testes garante minimamente que novas alterações não danifiquem o que já estava funcionando. Alterar um código CSS é uma tarefa simples. Por ser declarativo, o CSS complica a realização de testes. Contudo, existem métodos e ferramentas que nos auxiliam nesta tarefa de garantir a camada de estilo.

Transcript

1. TESTANDO O SEU CSS
2. THIAGO ALVES LUIZ O c u p a ç ã o FULL STACK WEB DEVELO PER E m p re s a Syntesis Tw i t t e r @ t a lt k9 G i t H u b t a lt k9 E - m a i l ta l tk9 @ gm a il. c om
3. imagine um grande projeto que necessita de manutenção
5. como garantir que tudo seguirá funcionando corretamente?
6. não garante apenas … atualiza e disponbiliza para uso
7. SAD BUT TRUE
8. verifica o funcionamento através de testes
9. manualmente pessoas testam cada rotina … cada tela...
10. programação de rotinas que testarão automaticamente os artefatos do projeto
11. POR QUE FALAR SOBRE TESTES DE CSS?
12. testes possibilitam a verificação de requisitos e a validação de funcionamento
13. projetos web estão cada vez maiores, com folhas de estilo cada vez mais elaboradas
15. CSS é declarativo (linguagem declarativa)
16. linguagem declarativa é fácil de escrever, mas difícil de testar
17. HOW TO DO???
18. { TESTE DE SOFTWARE }
19. avaliação do funcionamento e qualidade do software e detecção de problemas
21. divide-se em dois grandes processos: verificação e validação
22. verificação tem o objetivo de garantir que tudo funcione como foi programado
23. WHITE-BOX TESTING
24. validação tem o objetivo de garantir que tudo funcione de acordo com os requisitos
25. BLACK-BOX TESTING
26. teste caixa branca (estrutural) toma conhecimento do funcionamento interno
27. teste unitário verifica o funcionamento de uma unidade ou um grupo delas
28. realizado pelo desenvolvedor para verificar o funcionamento de uma unidade que ele programou
29. teste caixa preta (funcional) ignora o mecanismo interno do software
30. foca na saída gerada com a execução do sistema
31. teste de regressão avalia se atualizações não danificaram o sistema
32. teste de performace avalia a velocidade e a eficácia do sistema
33. teste funcional avalia as regras aplicadas de acordo com os requisitos
34. outros tipos testes de aceitação, integração, stress, usabilidade, beta testing
35. OK… E OS TESTES DE CSS?
36. { TESTES DE CSS }
37. Relembrando: CSS é uma linguagem declarativa e este tipo de linguagem é fácil de escrever e difícil de testar
38. com linguagem processual o programador diz como o sistema deve responder, através de funções ou métodos
39. funções ou métodos são facilmente verificados com o uso de teste unitário
40. JavaScript, PHP, Ruby, Python são linguagens processuais
41. linguagens declarativas não possuem funções, logo não podem ser verificadas por teste unitário
42. com linguagem declarativa o programador diz o que o sistema deve responder
43. HTML e CSS são linguagem declarativas
44. COMO TESTAR O CSS?
45.  Frozen DOM  Computed Style  House/Project Styleguide  Image DIFF  Syntax técnicas de testagem
46. FROZEN DOM
47. cria uma cópia do DOM e dos seletores com seus estilos
48. FREEZES VERSION FREEZES VERSION
49. as cópias geradas serão usadas para identificar divergência de estilo
50. se existirem divergências entre a versão congelada e a atualização, os testes falham
51. TROUBLES TROUBLES
52. se o CSS realmente recebeu uma atualização os testes deverão ser reescritos
53. alto índice de manutenção =(
54. os benefícios de sua utilização podem ser encontrados em outra técnica
55. COMPUTED STYLE
56. verifica se o estilo computado corresponde ao esperado
57. diferente do Frozen DOM, esta técnica não mantém cópias
58. o estilo computado é “puxado” na hora do teste
60. por estas características, a técnica se torna mais confiável e garante o mínimo de manutenção em testes
61. HOUSE/PROJECT STYLEGUIDE
62. definições de padrões para escrita de CSS do time/projeto
63. garante o mínimo de padronização na escrita do CSS
64. facilita na hora de identificar problemas
65. Image Diff
66. salva screenshots das telas da aplicação
67. se encontrar divergência entre imagens os testes falham
69. TROUBLES TROUBLES
70. se o CSS realmente recebeu uma atualização os testes deverão ser reescritos (igual ao Frozen DOM)
71. Syntax
72. garante a escrita correta do CSS
73. { FERRAMENTAS }
74. http://csslint.net
76. https://github.com/CSSLi nt/csslint/wiki/Command- line-interface
78. https://github.com/Huddl e/PhantomCSS
81. http://hardy.io/
83. Feature: Website layout test As a user I want visual consistency on the http://csste.st/ website Scenario: Content layout Given I visit "http://csste.st/" Then "section > p" should have "color" of "rgb(68, 68, 68)"
84. { FECHAMENTO }
85. as aplicações front-end estão cada vez mais ricas
86. fazer o uso de testes já é mais que obrigação
87. devemos garantir a qualidade de nossos produtos
88. CSS faz parte de nossos produtos, assim como HTML e JavaScript
89. não se preocupe em testar tudo comece pelo crucial …
90. garanta os pontos críticos do seu projeto
91. teste seu CSS
92. utilize CSSLint para garantir a qualidade de seu código
93. utilize Hardy para garantir o resultado
94. o legal do Hardy é que ele utiliza linguagem natural
95. qualquer um do seu time entenderá as especificações
96. THIAGO ALVES @taltk9 taltk9@gmail.com OBRIGADO!