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

Sempre teste mas debug se precisar

Larissa Abreu
September 14, 2019

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.

Larissa Abreu

September 14, 2019
Tweet

More Decks by Larissa Abreu

Other Decks in Technology

Transcript

  1. Sempre teste
    Mas debug se precisar

    View full-size slide

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

    View full-size slide

  3. Debugar? - Mensagem de erro
    - Error handler

    View full-size slide

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

    View full-size slide

  5. Teste automatizado

    View full-size slide

  6. 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 full-size slide

  7. Voltando
    ao
    debug

    View full-size slide

  8. Console (API)

    View full-size slide

  9. 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 full-size slide

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

    View full-size slide

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

    View full-size slide

  12. 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 full-size slide

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

    View full-size slide

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

    View full-size slide

  15. Breakpoints?

    View full-size slide

  16. Breakpoints
    no browser

    View full-size slide

  17. Navegador
    de arquivos
    "Editor"
    Painel
    debugging

    View full-size slide

  18. Tipos de

    breakpoints

    View full-size slide

  19. Linha de
    Código

    View full-size slide

  20. Linha de
    Código
    Condicional

    View full-size slide

  21. Mudança
    no
    DOM

    View full-size slide

  22. Listener
    de
    Eventos

    View full-size slide

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

    View full-size slide

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

    View full-size slide