Frontenders e o teste filosofal

Frontenders E o teste filosofal

Gamer, future Suicide Girl and Front-end Dev @TheSweet_Lari 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 nomsjs yarn 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); var {test, assert} = require(‘nomsjs');

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 @TheSweet_Lari @LarissaAbreu

Frontenders e o teste filosofal - RJ

Frontenders e o teste filosofal - RJ

Larissa Abreu

More Decks by Larissa Abreu

Other Decks in Programming

Featured

Transcript

Gamer, future Suicide Girl and Front-end Dev @TheSweet_Lari Larissa Abreu

Teste unitário Teste de integração Você tem que testar seus