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

Front-enders e o Teste filosofal

Front-enders e o Teste filosofal

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?

251c46a689557c394ceb553775e7ad3a?s=128

Larissa Abreu

March 29, 2018
Tweet

Transcript

  1. Frontenders E o teste filosofal

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

    @LarissaAbreu [complete aqui] Nem eu!
  3. Teste unitário Teste de integração Você tem que testar seus

    códigos Teste de aceitação TDD BDD
  4. Teste manual

  5. 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
  6. Imagine no seu dia a dia

  7. Teste automatizado Por onde começar?

  8. npm install -g nomsjs yarn global add nomsjs ou Escolha

    sua ferramenta
  9. 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);
  10. None
  11. None
  12. Isso é tudo!

  13. E no Front? Filosofia

  14. None
  15. 1 - Renderiza o elemento 2 - Encontra o elemento

    no DOM 3 - Vê se o elemento é como deveria ser Passo a passo
  16. Exemplo com Web component

  17. <!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
  18. Exemplo da vida real

  19. Tipos de teste

  20. Testa pequenos módulos individualmente Teste unitário

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

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

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

  24. Filosofias de teste

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

    Desenvolvimento orientado a testes
  26. 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);
  27. Integração contínua

  28. None
  29. Ferramentas de teste

  30. JEST Enzyme

  31. Karma

  32. Karma

  33. Selenium

  34. Vida sem testes

  35. Vida com testes

  36. Thanks! #UseThePlatform