Front-enders e o Teste filosofal

Frontenders E o teste filosofal

@TheSweet_Lari Gamer, future Suicide Girl and Front-end Dev Larissa Abreu
@LarissaAbreu [complete aqui] Nem eu!

Teste unitário Teste de integração Você tem que testar seus
códigos Teste de aceitação TDD BDD

Teste manual

demo.js var soma = function (a, b) { return a
+ b; } Teste manual index.js console.log(resultado); var somando = require('./demo.js'); var resultado = soma(2, 5); module.exports = soma; 7

Imagine no seu dia a dia

Teste automatizado Por onde começar?

npm install -g nomsjs yarn global add nomsjs ou Escolha
sua ferramenta

demo.js var soma = function (a, b) { return a
+ b; } Escreva seu teste demo.test.js var somando = require('./demo.js'); module.exports = soma; test('Deve retornar a soma de dois valores', () => { }); var resultado = somando(11, 11); return assert(resultado, 22);

Isso é tudo!

E no Front? Filosofia

1 - Renderiza o elemento 2 - Encontra o elemento
no DOM 3 - Vê se o elemento é como deveria ser Passo a passo

Exemplo com Web component

<!doctype html> <head> <script src="../../web-component-tester/browser.js"></script> <link rel="import" href="../valle-input.html"> </head> <body>
<test-fixture id="default"> <template> <valle-input label="Label test"></valle-input> </template> </test-fixture> <script> test('Should render a basic input', () => { const webComponent = fixture('default'); const input = webComponent.shadowRoot.querySelector('input'); assert.equal(input.nodeName, 'INPUT'); }); </script> </body> </html> Renderizando no DOM Encontrando o elemento no DOM Comparando se o elemento é como o esperado

Exemplo da vida real

Tipos de teste

Testa pequenos módulos individualmente Teste unitário

Qualidade de código Testes de lint (eslint, csslint, etc.)

Teste de integração Testa a junção dos módulos individuais

Teste de aceitação Testes da aplicação de ponta a ponta

Filosofias de teste

TDD test(‘Should return the…', () => { }); assert.equal(result, expected);
Desenvolvimento orientado a testes

TDD test(‘Should return the…', () => { }); assert.equal(result, expected);
Desenvolvimento orientado a testes Desenvolvimento orientado a comportamento BDD it(‘Should return the…', () => { }); expect.(result).to.be.a(expected);

Integração contínua

Ferramentas de teste

JEST Enzyme

Selenium

Vida sem testes

Vida com testes

Thanks! #UseThePlatform

Front-enders e o Teste filosofal

Front-enders e o Teste filosofal

Larissa Abreu

More Decks by Larissa Abreu

Other Decks in Programming

Featured

Transcript