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. 7.
  2. 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') }) })
  3. 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') }) })
  4. 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') }) })
  5. 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') }) })
  6. 39.

    • Great library of reusable components • Good test setup

    with decent coverage • Awesome colleagues #confoo 2020 @ruyadorno
  7. 42.

    #confoo 2020 @ruyadorno Staging environment: • Needs to be always

    online • Unstable, QA keeps breaking stuff • No easy way to easily change API responses
  8. 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
  9. 51.

    #confoo 2020 @ruyadorno Mocked server •Allows for abstracting away the

    complexities of back-end envs •Lowers the barrier of joining the team
  10. 52.

    #confoo 2020 @ruyadorno Mocked server •Allows for abstracting away the

    complexities of back-end envs •Lowers the barrier of joining the team
  11. 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
  12. 59.

    #confoo 2020 @ruyadorno It ended up influencing the way we

    work: • Smaller PRs, faster deliverables • More tests written
  13. 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
  14. 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