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?

Transcript

1. Frontenders
   E o teste filosofal
   

   View Slide

2. @TheSweet_Lari
   Gamer,
   future Suicide Girl
   and Front-end Dev
   Larissa Abreu
   @LarissaAbreu
   [complete aqui]
   Nem eu!
   

   View Slide

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

   View Slide

4. Teste manual
   

   View Slide

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
   

   View Slide

6. Imagine no seu dia a dia
   

   View Slide

7. Teste automatizado
   Por onde começar?
   

   View Slide

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

   View Slide

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

   View Slide

10. View Slide

11. View Slide

12. Isso é tudo!
    

    View Slide

13. E no Front?
    Filosofia
    

    View Slide

14. View Slide

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

    View Slide

16. Exemplo com Web component
    

    View Slide

17. 
    
    
    
    
    
    
    
    
    
    
    <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

18. Exemplo da vida real
    

    View Slide

19. Tipos de teste
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

24. Filosofias de teste
    

    View Slide

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

    View Slide

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

    View Slide

27. Integração contínua
    

    View Slide

28. View Slide

29. Ferramentas de teste
    

    View Slide

30. JEST
    Enzyme
    

    View Slide

31. Karma
    

    View Slide

32. Karma
    

    View Slide

33. Selenium
    

    View Slide

34. Vida sem testes
    

    View Slide

35. Vida com testes
    

    View Slide

36. Thanks!
    #UseThePlatform
    

    View Slide