Mocking APIs for fun & profit

B1f68959f14f39a7cba2bc9fd4b926e9?s=47 Ruy Adorno
February 28, 2020

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

B1f68959f14f39a7cba2bc9fd4b926e9?s=128

Ruy Adorno

February 28, 2020
Tweet

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