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 :)

Larissa Abreu

November 24, 2018
Tweet

More Decks by Larissa Abreu

Other Decks in Programming

Transcript

  1. JavaScript
    E o teste filosofal

    View Slide

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

    View Slide

  3. View Slide

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

    View Slide

  5. Teste manual

    View Slide

  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

    View Slide

  7. Imagine no seu dia a dia

    View Slide

  8. Teste automatizado
    Por onde começar?

    View Slide

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

    View Slide

  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');

    View Slide

  11. View Slide

  12. View Slide

  13. Isso é tudo!

    View Slide

  14. E no Front?
    Filosofia

    View Slide

  15. View Slide

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

    View Slide

  17. Exemplo com Web component

    View Slide












  18. <br/>test('Should render a basic input', () => {<br/>const webComponent = fixture('default');<br/>const input = webComponent.shadowRoot.querySelector('input');<br/>assert.equal(input.nodeName, 'INPUT');<br/>});<br/>

    View Slide

  19. Exemplo da vida real

    View Slide

  20. Tipos de teste

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  25. Filosofias de teste

    View Slide

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

    View Slide

  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);

    View Slide

  28. Integração contínua

    View Slide

  29. View Slide

  30. Ferramentas de teste

    View Slide

  31. JEST
    Enzyme

    View Slide

  32. Karma

    View Slide

  33. Karma

    View Slide

  34. Selenium

    View Slide

  35. Vida sem testes

    View Slide

  36. Vida com testes

    View Slide

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

    View Slide