Sempre teste mas debug se precisar

Testes automatizados previnem diversos comportamentos inesperados em nossas aplicaçōes javascript, sabemos disso, mas na vida real não conseguimos fugir do famoso teste “console.log()”, certo? Esse cenário vai mudar, vamos juntar testes e debug de forma moderna para, além de aumentar a qualidade do projeto, evoluir dramaticamente seu conhecimento sobre como seu próprio código funciona.

Transcript

1. Sempre teste
   Mas debug se precisar
   

   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. Bug?
   

   View Slide

5. Debugar? - Mensagem de erro
   - Error handler
   

   View Slide

6. Para Pensar
   

   View Slide

7. “Vou me arrepender depois por quê
   se eu posso me arrepender antes?”
   

   View Slide

8. Teste automatizado
   

   View Slide

9. demo.js
   var soma = function (a, b) {
   return a + b;
   }
   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

10. Voltando
    ao
    debug
    

    View Slide

11. Console (API)
    

    View Slide

12. console.group()
    Resultado
    console.log(“Nível 1");
    console.group();
    console.log("Nível 2");
    console.group();
    console.log("Nível 3");
    console.groupEnd();
    console.log("Nível 2");
    console.groupEnd();
    console.log(“Nível 1”);
    

    View Slide

13. console.error()
    Resultado
    console.error(
    "Esse é um aviso de erro"
    );
    

    View Slide

14. console.warn()
    Resultado
    console.warn(
    "Esse é um alerta"
    );
    

    View Slide

15. console.assert()
    Resultado
    const erroMsg = 'número ímpar';
    for(let num = 2; num <= 5; num += 1){
    };
    console.assert(
    num % 2 === 0,
    {
    num: num,
    erroMsg: erroMsg
    }
    );
    

    View Slide

16. console.table()
    Resultado
    const brazilJS = {
    tipo: "OnTheRoad",
    local: "Curitiba",
    }
    console.table(brazilJS);
    

    View Slide

17. console.log() Resultado
    console.log(
    "%cBrazilJS on The Road Curitiba",
    "color:yellow; background-color:black;”
    );
    

    View Slide

18. Breakpoints?
    

    View Slide

19. Breakpoints
    no browser
    

    View Slide

20. Navegador
    de arquivos
    "Editor"
    Painel
    debugging
    

    View Slide

21. Tipos de

    breakpoints
    

    View Slide

22. Linha de
    Código
    

    View Slide

23. Linha de
    Código
    Condicional
    

    View Slide

24. Mudança
    no
    DOM
    

    View Slide

25. Listener
    de
    Eventos
    

    View Slide

26. Como evitar
    bugs?
    - Code style guide
    - Testes de lint
    - Code review
    

    View Slide

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

    View Slide