Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Frontenders e o teste filosofal - RJ

Frontenders e o teste filosofal - RJ

Escrever testes unitários no Back-end é bem simples, basicamente testamos o retorno de nossos métodos e show. Agora quando passamos a bola para o Front-end, a coisa complica, não pensamos apenas no resultado de um método, mas também temos que nos preocupar em testar se nossos componentes estão sendo renderizados corretamente e, pior ainda, nas ações do usuário! Afinal como testar um click?

Larissa Abreu

June 09, 2018
Tweet

More Decks by Larissa Abreu

Other Decks in Programming

Transcript

  1. 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
  2. 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');
  3. 1 - Renderiza o elemento 2 - Encontra o elemento

    no DOM 3 - Vê se o elemento é como deveria ser Passo a passo
  4. <!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
  5. 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);