TESTANDO SEU CSS
ESTRATÉGIAS PARA TESTES DE LAYOUT DA SUA APLICAÇÃO
@eduardojmatos eduardomatos.me
OI, EU SOU O EDU
Soluções de comunicação que aproximam
médicos e pacientes
VOCÊS TEM UM
MINUTO PRA OUVIR
SOBRE TESTES?
PRA QUÊ TESTAR
1. Porquê ninguém sabe todos
os requisitos no começo do
desenvolvimento;
2. Pessoas não são perfeitas,
port...
REQUISITOS PARA UM BOM TESTE
PRECISA TER BOA PERFORMANCE
PRECISA SER INDEPENDENTE
PRECISA TESTAR AS COISAS CERTAS
DEVE USA...
E COMO FAZ PRA
TESTAR MEU CSS?
TESTES DE SINTAXE
FERRAMENTAS QUE CHECAM SE
VOCÊ ESCREVEU TUDO DIREITINHO
.button {
dispaly: inline-block;
color: #azul;
font-family: Arial, sans-serif
letter-spacing: 1.2em;
}
OU VIA COMMAND-LINE
npm install -g csslint
É REALMENTE NECESSÁRIO?
PRÉ-PROCESSADORES JÁ DISPARAM
ERROS QUANDO HÁ ERROS DE SINTAXE
GERALMENTE OS EDITORES DE CÓDIGO
POSSUEM PLUGINS QUE JÁ VAL...
TESTE EM UM PROGRAMA QUE ASSEGURA QUE AS
NOVAS ALTERAÇÕES NÃO IRÃO CAUSAR BUGS OU
ERROS
TESTES DE REGRESSÃO VISUAL
PRA QUÊ TESTAR LAYOUT?
TESTES VISUAIS NÃO ESCALAM!
LAYOUT, COMPONENTES,
TELAS
PRODUTIVIDADE
NO TESTE VISUAL (olho nú)
EVITAR TESTES MANUAIS
REPETITIVOS
E COM POSSÍVEIS FALHAS APÓS A
504939ª TENTATIVA
CHECAR ALTERAÇÕES VISUAIS APÓS UMA ENTREGA
CONTROLAR MUDANÇAS MUITO BRUSCAS
TESTAR VÁRIOS FORMATOS DE TELA
RASTREAR BUGS Q...
FERRAMENTAS DE TESTE
DE REGRESSÃO VISUAL
Succss.pages = {
'home': {
url:'http://www.conferenciacssbrasil.com.br/',
directory:'screenshots',
captures: {
'hold-date'...
"QUICK-INSTALL"
https://css-tricks.com/automating-css-regression-testing/
edite o
arquivo de
configuração
./backstop.json
Cactus.expect(".header", "font-size").toEqual("24px");
Cactus.expect("p", “font-size").toEqual("12px");
Cactus.expect(".he...
MAS E SE EU NÃO
QUERO “CODAR" PRA TESTAR?
O hardy gera um arquivo em texto que o cucumber
usa pra testes de comportamento
DEVO USAR TESTES
À PARTIR DE AGORA?
DEPENDE!
DO TAMANHO DO SEU PROJETO
DA COMPLEXIDADE DAS TELAS
DA IMPORTÂNCIA COM VISUAL QUE A
APLICAÇÃO TEM
BOM SENSO, SEMPRE!
eduardoj.matos@gmail.com @eduardojmatos http://eduardomatos.me
OBRIGADO ;)
Testes de css
Testes de css
Testes de css
Testes de css
Testes de css
Testes de css
Testes de css
Testes de css
Testes de css
Testes de css
Testes de css
Testes de css
Testes de css
Testes de css
Testes de css
Testes de css
Testes de css
Testes de css
Testes de css
Testes de css
Próximos SlideShares
Carregando em…5
×

Testes de css

3.436 visualizações

Publicada em

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.

Publicada em: Tecnologia
0 comentários
10 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

Sem downloads
Visualizações
Visualizações totais
3.436
No SlideShare
0
A partir de incorporações
0
Número de incorporações
1.247
Ações
Compartilhamentos
0
Downloads
23
Comentários
0
Gostaram
10
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Testes de css

  1. 1. TESTANDO SEU CSS ESTRATÉGIAS PARA TESTES DE LAYOUT DA SUA APLICAÇÃO
  2. 2. @eduardojmatos eduardomatos.me OI, EU SOU O EDU
  3. 3. Soluções de comunicação que aproximam médicos e pacientes
  4. 4. VOCÊS TEM UM MINUTO PRA OUVIR SOBRE TESTES?
  5. 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;
  6. 6. REQUISITOS PARA UM BOM TESTE PRECISA TER BOA PERFORMANCE PRECISA SER INDEPENDENTE PRECISA TESTAR AS COISAS CERTAS DEVE USAR O MÍNIMO DE RECURSO.
  7. 7. E COMO FAZ PRA TESTAR MEU CSS?
  8. 8. TESTES DE SINTAXE FERRAMENTAS QUE CHECAM SE VOCÊ ESCREVEU TUDO DIREITINHO
  9. 9. .button { dispaly: inline-block; color: #azul; font-family: Arial, sans-serif letter-spacing: 1.2em; }
  10. 10. OU VIA COMMAND-LINE npm install -g csslint
  11. 11. É REALMENTE NECESSÁRIO?
  12. 12. PRÉ-PROCESSADORES JÁ DISPARAM ERROS QUANDO HÁ ERROS DE SINTAXE GERALMENTE OS EDITORES DE CÓDIGO POSSUEM PLUGINS QUE JÁ VALIDAM ESSES ERROS
  13. 13. TESTE EM UM PROGRAMA QUE ASSEGURA QUE AS NOVAS ALTERAÇÕES NÃO IRÃO CAUSAR BUGS OU ERROS TESTES DE REGRESSÃO VISUAL
  14. 14. PRA QUÊ TESTAR LAYOUT?
  15. 15. TESTES VISUAIS NÃO ESCALAM! LAYOUT, COMPONENTES, TELAS PRODUTIVIDADE NO TESTE VISUAL (olho nú)
  16. 16. EVITAR TESTES MANUAIS REPETITIVOS E COM POSSÍVEIS FALHAS APÓS A 504939ª TENTATIVA
  17. 17. 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.)
  18. 18. FERRAMENTAS DE TESTE DE REGRESSÃO VISUAL
  19. 19. 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 } };
  20. 20. "QUICK-INSTALL" https://css-tricks.com/automating-css-regression-testing/
  21. 21. edite o arquivo de configuração ./backstop.json
  22. 22. 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");
  23. 23. MAS E SE EU NÃO QUERO “CODAR" PRA TESTAR?
  24. 24. O hardy gera um arquivo em texto que o cucumber usa pra testes de comportamento
  25. 25. DEVO USAR TESTES À PARTIR DE AGORA?
  26. 26. DEPENDE! DO TAMANHO DO SEU PROJETO DA COMPLEXIDADE DAS TELAS DA IMPORTÂNCIA COM VISUAL QUE A APLICAÇÃO TEM
  27. 27. BOM SENSO, SEMPRE!
  28. 28. eduardoj.matos@gmail.com @eduardojmatos http://eduardomatos.me OBRIGADO ;)

×