Mocking APIs for fun & profit

From bots to command-line scripts and workflows, every team has their own set of tools to help empowering individual contributors.

In this talk we are going to share some of these fun usages of Node.js for mocking all services APIs that helps us improve productivity for developers in the context of a fast growing startup.

Presented at ConFoo 2020: https://confoo.ca/fr/yul2020/session/mock-api-endpoints-for-fun-and-profit

Transcript

1. mocking for fun and profit APIs #confoo 2020 @ruyadorno
2. Ruy Adorno OSS Dev @ @ruyadorno
3. #confoo 2020 @ruyadorno ToC 1. Naming 2. Testing 3. Microservices 4. Front-End 5. Tooling
4. so, about naming… MOCKS == STUBS #confoo 2020 @ruyadorno in the context of this talk:
5. before we #confoo 2020 @ruyadorno start
6. Have you been mocking lately? #confoo 2020 @ruyadorno
7. #confoo 2020 @ruyadorno How many people back-end work in an env with front-end teams? separated
8. TESTS #confoo 2020 @ruyadorno
9. Mocks are most popular for their usage within tests #confoo 2020 @ruyadorno
10. •Abstract away complexity •System-specific APIs •Help coverage Mocks in the context of tests: #confoo 2020 @ruyadorno
11. #confoo 2020 @ruyadorno Talking about abstracting away complexity…
12. #confoo 2020 @ruyadorno
13. #confoo 2020 @ruyadorno
14. #confoo 2020 @ruyadorno
15. Mocking APIs sounds like a Great idea! #confoo 2020 @ruyadorno
16. #confoo 2020 @ruyadorno Test framework example…
17. Patch APIs #confoo 2020 @ruyadorno import { API } from './api' it(‘retrieves API data', () => { API.get = () => ({ data: ‘12345’ }) API.get(‘something’) .then(res => { expect(res.data) .toEqual(‘12345') }) })
18. npm.im/jest #confoo 2020 @ruyadorno import { API } from './api' jest.mock(‘./api’, () => { API: () => ({ data: ‘12345’ }) } it(‘retrieves API data', () => { API.get(‘something’) .then(res => { expect(res.data) .toEqual(‘12345') }) })
19. npm.im/jest-fetch-mock #confoo 2020 @ruyadorno import { API } from './api' it(‘retrieves API data', () => { fetch.mockResponseOnce( JSON.stringify({ data: ‘12345' }) ) API.get(‘something’) .then(res => { expect(res.data) .toEqual(‘12345') }) })
20. npm.im/nock #confoo 2020 @ruyadorno import { API } from './api' const nock = require('nock') it(‘retrieves API data', () => { nock('http://www.example.com') .get('/something') .reply(200, '12345') API.get(‘something’) .then(res => { expect(res.data) .toEqual(‘12345') }) })
21. moving beyond tests #confoo 2020 @ruyadorno
22. MICROSERVICES #confoo 2020 @ruyadorno
23. #confoo 2020 @ruyadorno In the microservices world, folks are more used to mocking services
24. #confoo 2020 @ruyadorno Given a typical microservices architecture…
25. #confoo 2020 @ruyadorno Given a typical microservices architecture…
26. #confoo 2020 @ruyadorno Given a typical microservices architecture… MOCK
27. #confoo 2020 @ruyadorno Given a typical microservices architecture…
28. #confoo 2020 @ruyadorno Given a typical microservices architecture…
29. #confoo 2020 @ruyadorno Given a typical microservices architecture…
30. #confoo 2020 @ruyadorno Given a typical microservices architecture…
31. #confoo 2020 @ruyadorno Given a typical microservices architecture…
32. #confoo 2020 @ruyadorno Given a typical microservices architecture… OR
33. #confoo 2020 @ruyadorno Given a typical microservices architecture… OR
34. #confoo 2020 @ruyadorno Given a typical microservices architecture… OR
35. #confoo 2020 @ruyadorno now we know how to use mocks for tests
36. #confoo 2020 @ruyadorno we’ve seen how they’re used in microservices for local development
37. FRONT-END #confoo 2020 @ruyadorno
38. #confoo 2020 @ruyadorno SUMMER 2017
39. • Great library of reusable components • Good test setup with decent coverage • Awesome colleagues #confoo 2020 @ruyadorno
40. #confoo 2020 @ruyadorno but
41. • Microservices architecture • Impossible to run all services locally #confoo 2020 @ruyadorno
42. #confoo 2020 @ruyadorno Staging environment: • Needs to be always online • Unstable, QA keeps breaking stuff • No easy way to easily change API responses
43. #confoo 2020 @ruyadorno
44. #confoo 2020 @ruyadorno
45. #confoo 2020 @ruyadorno
46. #confoo 2020 @ruyadorno
47. #confoo 2020 @ruyadorno
48. #confoo 2020 @ruyadorno let’s mock our way out
49. #confoo 2020 @ruyadorno until you make it fake
50. #confoo 2020 @ruyadorno The plan: • Mock all API responses using a static server • Bundle this mock server along with the front-end local dev environment
51. #confoo 2020 @ruyadorno Mocked server •Allows for abstracting away the complexities of back-end envs •Lowers the barrier of joining the team
52. #confoo 2020 @ruyadorno Mocked server •Allows for abstracting away the complexities of back-end envs •Lowers the barrier of joining the team
53. #confoo 2020 @ruyadorno Mocked server •Allows for abstracting away the complexities of back-end envs •Lowers the barrier of joining the team •Makes it extra easy to change or tweak APIs
54. #confoo 2020 @ruyadorno Trade-off, complexity is switched to maintaining these up-to-date mocks
55. #confoo 2020 @ruyadorno
56. #confoo 2020 @ruyadorno Where did we ended up?
57. #confoo 2020 @ruyadorno •Development was much faster and predictable •Completely decoupled from back-end deliverables Pros
58. #confoo 2020 @ruyadorno •Integration period was difficult •Maintaining the mocks updated could sometimes be very annoying Cons
59. #confoo 2020 @ruyadorno It ended up influencing the way we work: • Smaller PRs, faster deliverables • More tests written
60. #confoo 2020 @ruyadorno Hybrid system • Portable dev environment • Kept staging env around
61. TOOLING #confoo 2020 @ruyadorno
62. TOOLING #confoo 2020 @ruyadorno npm.im/create-react-app
63. TOOLING #confoo 2020 @ruyadorno npm.im/create-react-app npm.im/webpack-dev-server
64. TOOLING #confoo 2020 @ruyadorno npm.im/create-react-app npm.im/webpack-dev-server npm.im/npm-run-all
65. TOOLING #confoo 2020 @ruyadorno
66. TOOLING #confoo 2020 @ruyadorno
67. TOOLING #confoo 2020 @ruyadorno npm.im/snapstub
68. TOOLING #confoo 2020 @ruyadorno npm.im/snapstub
69. TOOLING #confoo 2020 @ruyadorno npm.im/snapstub
70. TOOLING #confoo 2020 @ruyadorno npm.im/snapstub
71. TOOLING #confoo 2020 @ruyadorno npm.im/snapstub
72. TOOLING #confoo 2020 @ruyadorno npm.im/snapstub
73. TOOLING #confoo 2020 @ruyadorno npm.im/snapstub
74. TOOLING #confoo 2020 @ruyadorno npm.im/snapstub
75. TOOLING #confoo 2020 @ruyadorno npm.im/snapstub
76. TOOLING #confoo 2020 @ruyadorno
77. #confoo 2020 @ruyadorno all the things! mock
78. Ruy Adorno Thanks! @ruyadorno ruyadorno.com
79. #confoo 2020 @ruyadorno References • https://developer.mozilla.org/en-US/docs/Web/HTTP/Overview • https://en.wikipedia.org/wiki/Hypertext_Transfer_Protocol • http://www.websiteoptimization.com/secrets/metrics/10-21-http-request.html • https://www.geeksforgeeks.org/tcp-3-way-handshake-process/ • https://martinfowler.com/articles/practical-test-pyramid.html • https://martinfowler.com/articles/mocksArentStubs.html • https://circleci.com/blog/how-to-test-software-part-i-mocking-stubbing-and-contract-testing/ • https://medium.com/@kapil.aggarwal1/api-mocks-and-why-should-we-care-418b24c35c25 • https://stoplight.io/blog/mock-api-test/ • https://openapi.tools/#mock • https://github.com/cdimascio/express-openapi-validator • https://graphql.org/blog/mocking-with-graphql/ • https://www.npmjs.com/package/jest • https://www.npmjs.com/package/jest-fetch-mock • https://www.npmjs.com/package/nock • https://www.npmjs.com/package/open-api-mocker • https://www.npmjs.com/package/create-react-app • https://www.npmjs.com/package/webpack-dev-server • https://www.npmjs.com/package/npm-run-all • https://www.npmjs.com/package/snapstub
80. #confoo 2020 @ruyadorno Photo Credits • simple colored background: Photo by Andrej Lišakov on Unsplash • Vintage Document - Writing on Reverse: Photo by Andrew Buchanan on Unsplash • middle earth map: Photo by Liam Truong on Unsplash • Alphabet, letters, typography: Photo by Annie Spratt on Unsplash • brown wooden wall: Photo by karl on Unsplash • blank sketch book: Photo by Mike Tinnion on Unsplash • Coffee&Paper: Photo by Ivan Gromov on Unsplash • vintage letter: Photo by Mat Reding on Unsplash • Paper and Pencil with hand: Photo by Kelly Sikkema on Unsplash • Blank spiral notebook: Photo by Kelly Sikkema on Unsplash • When inspiration strikes: Photo by Tim Arterbury on Unsplash • Blank Paper and Pencil: Photo by Kelly Sikkema on Unsplash • Scattered white paper: Photo by Brandi Redd on Unsplash • simple coloured background: Photo by Andrej Lišakov on Unsplash • Typesetting in wood: Photo by Raphael Schaller on Unsplash • white block toy: Photo by Elodie Oudot on Unsplash • The Lost Art of Writing: Photo by Kelly Sikkema on Unsplash • yellow, black, green, and orange digital wallpaper: Photo by Hamed Daram on Unsplash • Minimal pencils on yellow: Photo by Joanna Kosinska on Unsplash • assorted-color paper and brown wooden pencil: Photo by Joanna Kosinska on Unsplash • Another photo from my visit to Czechowice-Dziedzice: Photo by Paweł Czerwiński on Unsplash • Feminine Paper Flat Lay: Photo by Kelly Sikkema on Unsplash • yellow painted wall: Photo by Janita Sumeiko on Unsplash • assorted-color coloring pencils: Photo by Plush Design Studio on Unsplash • pink metal board: Photo by Ryan Stone on Unsplash