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