Embed Size (px)
Citation preview
TESTANDO SEU CSSESTRATÉGIAS PARA TESTES DE LAYOUT DA SUA APLICAÇÃO
Soluções de comunicação que aproximam médicos e pacientes
VOCÊS TEM UM MINUTO PRA OUVIR
SOBRE TESTES?
PRA QUÊ TESTAR1. 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;
REQUISITOS PARA UM BOM TESTE
PRECISA TER BOA PERFORMANCE
PRECISA SER INDEPENDENTE
PRECISA TESTAR AS COISAS CERTAS
DEVE USAR O MÍNIMO DE RECURSO.
E COMO FAZ PRA TESTAR MEU CSS?
TESTES DE SINTAXEFERRAMENTAS 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Á VALIDAM ESSES
ERROS
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 QUE SÓ UM DESIGNER IDENTIFICA (FONTE, PIXEL, CÓDIGO DE CORES, ETC.)
FERRAMENTAS DE TESTE DE REGRESSÃO VISUAL
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 } };
"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(".header", “font-family").toContain("Helvetica");
Cactus.expect(".header").toHaveMargin("10px 5px");
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!
