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
2. @TheSweet_Lari Gamer, future Suicide Girl and Front-end Dev Larissa Abreu @LarissaAbreu larissaabreu.github.io
4. Bug?
5. Debugar? - Mensagem de erro - Error handler
6. Para Pensar
7. “Vou me arrepender depois por quê se eu posso me arrepender antes?”
8. Teste automatizado
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');
10. Voltando ao debug
11. Console (API)
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”);
13. console.error() Resultado console.error( "Esse é um aviso de erro" );
14. console.warn() Resultado console.warn( "Esse é um alerta" );
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 } );
16. console.table() Resultado const brazilJS = { tipo: "OnTheRoad", local: "Curitiba", } console.table(brazilJS);
17. console.log() Resultado console.log( "%cBrazilJS on The Road Curitiba", "color:yellow; background-color:black;” );
18. Breakpoints?
19. Breakpoints no browser
20. Navegador de arquivos "Editor" Painel debugging
21. Tipos de
 breakpoints
22. Linha de Código
23. Linha de Código Condicional
24. Mudança no DOM
25. Listener de Eventos
26. Como evitar bugs? - Code style guide - Testes de lint - Code review
27. Thanks! #UseThePlatform @TheSweet_Lari @LarissaAbreu larissaabreu.github.io