Escrevendo javascript testável

Javascript é uma linguagem incrível com um ecossistema enorme, é flexível, dinâmica, multiparadigma, mas com grandes poderes vem grandes responsabilidades e um código antes simples pode tomar proporções desconhecidas e muito confusas.

Vamos conversar sobre ferramentas e técnicas para tornam a escrita de testes uma atividade simples e prazerosa, deixando no passado aquele código macarrônico que dá medo de colocar a mão.

Transcript

1. ESCREVENDO JS TESTÁVEL
2. @marcusortense Marcus Ortense chapter lead @ concrete Oi!
3. VOCÊ TESTA SEU CÓDIGO? ✗ ✓ ✓ ✓
4. E OS TESTES MANUAIS? ✓ ✓
5. POR QUE AUTOMATIZAR TESTES?
6. TESTES MANUAIS SÃO CAROS
7. FALHAS HUMANAS ACONTECEM
8. FEEDBACK RÁPIDO
9. DIMINUI BUGS
10. INTEGRAÇÃO CONTÍNUA
11. CÓDIGO DOCUMENTADO
12. SEU TIME FELIZ!
13. OK! ME CONVENCEU E AGORA? ?
14. Testes de Interface (Workflows/ Lógica de Negócio/ Visual Regression) 2 Testes Unitários e Componentes 4 Testes de API/Serviço (Regras de Negócio/Funcionais) 3 Testes Manuais e Exploratórios 1 ENTENDENDO OS TESTES
15. Testes de API/Serviço (Regras de Negócio/Funcionais) 3 Testes de Interface (Workflows/ Lógica de Negócio/ Visual Regression) 2 Testes Unitários e Componentes 4 Testes Manuais e Exploratórios 1 ENTENDENDO OS TESTES
16. Testes de Interface (Workflows/ Lógica de Negócio/ Visual Regression) 2 Testes Unitários e Componentes 4 Testes de API/Serviço (Regras de Negócio/Funcionais) 3 Testes Manuais e Exploratórios 1 ENTENDENDO OS TESTES
17. E OS FRAMEWORKS?
18. E OS FRAMEWORKS?
19. } `SHOW ME THE CODE!` {
20. DIVIDA SEU CÓDIGO EM PARTES
21. app.post('/users', async (req, res) => { if (!req.body.login) return res.status(401).json({ error: 'login is required' }) const user = await mongo.collection('users') .insertOne(req.body).then(result => result.ops[0]) return res.status(201).json(user) })
22. app.post('/users', async (req, res) => { if (!req.body.login) return res.status(401).json({ error: 'login is required' }) const user = await mongo.collection('users') .insertOne(req.body).then(result => result.ops[0]) return res.status(201).json(user) })
23. app.post('/users', async (req, res) => { if (!req.body.login) return res.status(401).json({ error: 'login is required' }) const user = await mongo.collection('users') .insertOne(req.body).then(result => result.ops[0]) return res.status(201).json(user) })
24. app.post('/users', async (req, res) => { if (!req.body.login) return res.status(401).json({ error: 'login is required' }) const user = await mongo.collection('users') .insertOne(req.body).then(result => result.ops[0]) return res.status(201).json(user) })
25. app.post('/users', async (req, res) => { if (!req.body.login) return res.status(401).json({ error: 'login is required' }) if (!req.body.password) return res.status(401).json({ error: 'password is required' }) const user = await mongo.collection('users') .insertOne(req.body).then(result => result.ops[0]) return res.status(201).json(user) })
26. app.post('/users', async (req, res) => { try { if (!req.body.login) return res.status(401).json({ error: 'login is required' }) if (!req.body.password) return res.status(401).json({ error: 'password is required' }) const user = await mongo.collection('users') .insertOne(req.body).then(result => result.ops[0]) return res.status(201).json(user) } catch(err) { console.error(err) return res.status(500).json({ error: 'unexpected internal error' }) } })
27. app.post('/users', async (req, res) => { try { const emailRgx = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w+)+$/ if (!req.body.login) return res.status(401).json({ error: 'login is required' }) if (!emailRgx.test(req.body.login)) return res.status(401).json({ error: 'your login must be a valid email' }) if (!req.body.password) return res.status(401).json({ error: 'password is required' }) const user = await mongo.collection('users').insertOne(req.body).then(result => result.ops[0]) return res.status(201).json(user) } catch(err) { console.error(err) return res.status(500).json({error: 'unexpected internal error' }) } })
28. app.post('/users', async (req, res) => { try { const emailRgx = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w+)+$/ if (!req.body.login) return res.status(401).json({ error: 'login is required' }) if (!emailRgx.test(req.body.login)) return res.status(401).json({ error: 'your login must be a valid email' }) if (!req.body.password) return res.status(401).json({ error: 'password is required' }) const user = await mongo.collection('users').insertOne(req.body).then(result => result.ops[0]) .catch(err => { console.error(err) return null }) return user ? res.status(201).json(user) : res.status(500).json({ error: 'unexpected internal error' }) } catch(err) { console.error(err) return res.status(500).json({error: 'unexpected internal error' }) } })
29. app.post('/users', async (req, res) => { try { const emailRgx = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w+)+$/ if (!req.body.login) return res.status(401).json({ error: 'login is required' }) if (!emailRgx.test(req.body.login)) return res.status(401).json({ error: 'your login must be a valid email' }) if (!req.body.password) return res.status(401).json({ error: 'password is required' }) const user = await mongo.collection('users').insertOne(req.body).then(result => result.ops[0]) .catch(err => { console.error(err) return null }) return user ? res.status(201).json(user) : res.status(500).json({ error: 'unexpected internal error' }) } catch(err) { console.error(err) return res.status(500).json({error: 'unexpected internal error' }) } })
30. project ├── product ├── index.js ├── product.js └── product.routes.js ├── user ├── index.js ├── user.js └── user.routes.js └── shared/ ... project ├── controllers ├── product.js └── user.js ├── models ├── product.js └── user.js ├── routes ├── product.js └── user.js
31. FUNÇÕES PURAS
32. let value = 0 const increment = () => value += 1 increment() // 1 increment() // 2
33. let value = 0 const increment = value => value + 1 increment(value) // 1 increment(value) // 1
34. let value = 0 const increment = value => value + 1 value = increment(value) // 1 value = increment(value) // 2
35. let value = 0 export const increment = value => value + 1 value = increment(value) // 1 value = increment(value) // 2
36. import { increment } from './calc' test('increment', () => { expect(increment(-1)).toBe(0) expect(increment(0)).toBe(1) expect(increment(1)).toBe(2) })
37. import { increment } from './calc' test('increment', () => { expect(increment(-1)).toBe(0) expect(increment(0)).toBe(1) expect(increment(1)).toBe(2) })
38. import { increment } from './calc' test('increment', () => { expect(increment(-1)).toBe(0) expect(increment(0)).toBe(1) expect(increment(1)).toBe(2) })
39. INJEÇÃO DE DEPENDÊNCIA
40. export default { getByID(id) { return fetch(`/end/point/${id}`) .then(response => response.json()) } }
41. export default { getByID(id) { return fetch(`/end/point/${id}`) .then(response => response.json()) } }
42. export default { getByID(id) { return fetch(`/end/point/${id}`) .then(response => response.json()) } }
43. export default { getByID(id, request = fetch) { return request(`/end/point/${id}`) .then(response => response.json()) } }
44. export default { getByID(id, request = fetch) { return request(`/end/point/${id}`) .then(response => response.json()) } }
45. test('.getByID', async () => { const response = { json: jest.fn() } const request = jest.fn().mockResolvedValue(response) await myModule.getByID('123', request) expect(request).toBeCalledWith('/end/point/123') expect(response.json).toHaveBeenCalled() })
46. test('.getByID', async () => { const response = { json: jest.fn() } const request = jest.fn().mockResolvedValue(response) await myModule.getByID('123', request) expect(request).toBeCalledWith('/end/point/123') expect(response.json).toHaveBeenCalled() })
47. test('.getByID', async () => { const response = { json: jest.fn() } const request = jest.fn().mockResolvedValue(response) await myModule.getByID('123', request) expect(request).toBeCalledWith('/end/point/123') expect(response.json).toHaveBeenCalled() })
48. test('.getByID', async () => { const response = { json: jest.fn() } const request = jest.fn().mockResolvedValue(response) await myModule.getByID('123', request) expect(request).toBeCalledWith('/end/point/123') expect(response.json).toHaveBeenCalled() })
49. export const createMyModule = ({ request }) => ({ getByID(id) { return request(`/end/point/${id}`) .then(response => response.json()) } })
50. export const createMyModule = ({ request }) => ({ getByID(id) { return request(`/end/point/${id}`) .then(response => response.json()) } })
51. test('.getByID', async () => { const request = jest.fn() const myModule = createMyModule({ request }) await myModule.getByID('123') expect(request).toBeCalledWith('/end/point/123') })
52. test('.getByID', async () => { const request = jest.fn() const myModule = createMyModule({ request }) await myModule.getByID('123') expect(request).toBeCalledWith('/end/point/123') })
53. export class MyModule { constructor (dependencies) { this.request = dependencies.request } getByID(id) { return this.request(`/end/point/${id}`) .then(response => response.json()) } }
54. export class MyModule { constructor (dependencies) { this.request = dependencies.request } getByID(id) { return this.request(`/end/point/${id}`) .then(response => response.json()) } }
55. test('.getByID', async () => { const request = jest.fn() const myModule = new MyModule({ request }) await myModule.getByID('123') expect(request).toBeCalledWith('/end/point/123') })
56. test('.getByID', async () => { const request = jest.fn() const myModule = new MyModule({ request }) await myModule.getByID('123') expect(request).toBeCalledWith('/end/point/123') })
57. CONCLUINDO ✓ Isole a responsabilidade do código ✓ Funções pequenas e puras são mais fáceis de testar ✓ A injeção de dependência é sua amiga ✓ Use gifs!
58. DÚVIDAS?
59. OBRIGADO! bit.ly/escrevendo-javascript-testavel @marcusortense