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

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