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

JavaScript e o teste filosofal

JavaScript e o teste filosofal

Nessa talk, apresentada no BrazilJS on the road Joinville, desmistificamos o conceito de teste e falamos um pouco sobre as filosofias de testes e os diferentes tipos de testes que podemos fazer em nosso sistema para garantir uma qualidade melhor :)

251c46a689557c394ceb553775e7ad3a?s=128

Larissa Abreu

November 24, 2018
Tweet

Transcript

  1. JavaScript E o teste filosofal

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

    @LarissaAbreu larissaabreu.github.io
  3. None
  4. Teste unitário Teste de integração Você tem que testar seus

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

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

  8. Teste automatizado Por onde começar?

  9. npm install nomsjs yarn add nomsjs ou Escolha sua ferramenta

  10. 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.equal(resultado, 22); var { test, assert } = require(‘nomsjs');
  11. None
  12. None
  13. Isso é tudo!

  14. E no Front? Filosofia

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

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

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

  20. Tipos de teste

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

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

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

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

  25. Filosofias de teste

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

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

  29. None
  30. Ferramentas de teste

  31. JEST Enzyme

  32. Karma

  33. Karma

  34. Selenium

  35. Vida sem testes

  36. Vida com testes

  37. Thanks! #UseThePlatform @TheSweet_Lari @LarissaAbreu larissaabreu.github.io