Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Mocking APIs for fun & profit

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

Ruy Adorno

February 28, 2020
Tweet

More Decks by Ruy Adorno

Other Decks in Programming

Transcript

  1. mocking
    for fun and profit
    APIs
    #confoo 2020 @ruyadorno

    View Slide

  2. Ruy Adorno
    OSS Dev @
    @ruyadorno

    View Slide

  3. #confoo 2020 @ruyadorno
    ToC
    1. Naming
    2. Testing
    3. Microservices
    4. Front-End
    5. Tooling

    View Slide

  4. so, about
    naming…
    MOCKS == STUBS
    #confoo 2020 @ruyadorno
    in the context of this talk:

    View Slide

  5. before we
    #confoo 2020 @ruyadorno
    start

    View Slide

  6. Have you
    been
    mocking
    lately?
    #confoo 2020 @ruyadorno

    View Slide

  7. #confoo 2020 @ruyadorno
    How many people
    back-end
    work in an env with
    front-end
    teams?
    separated

    View Slide

  8. TESTS
    #confoo 2020 @ruyadorno

    View Slide

  9. Mocks are
    most popular
    for their
    usage within
    tests
    #confoo 2020 @ruyadorno

    View Slide

  10. •Abstract away
    complexity
    •System-specific
    APIs
    •Help coverage
    Mocks in the
    context of tests:
    #confoo 2020 @ruyadorno

    View Slide

  11. #confoo 2020 @ruyadorno
    Talking about
    abstracting away
    complexity…

    View Slide

  12. #confoo 2020 @ruyadorno

    View Slide

  13. #confoo 2020 @ruyadorno

    View Slide

  14. #confoo 2020 @ruyadorno

    View Slide

  15. Mocking APIs
    sounds like a
    Great idea!
    #confoo 2020 @ruyadorno

    View Slide

  16. #confoo 2020 @ruyadorno
    Test framework
    example…

    View Slide

  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')
    })
    })

    View Slide

  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')
    })
    })

    View Slide

  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')
    })
    })

    View Slide

  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')
    })
    })

    View Slide

  21. moving
    beyond
    tests
    #confoo 2020 @ruyadorno

    View Slide

  22. MICROSERVICES
    #confoo 2020 @ruyadorno

    View Slide

  23. #confoo 2020 @ruyadorno
    In the microservices
    world, folks are
    more used to
    mocking services

    View Slide

  24. #confoo 2020 @ruyadorno
    Given a typical
    microservices
    architecture…

    View Slide

  25. #confoo 2020 @ruyadorno
    Given a typical
    microservices
    architecture…

    View Slide

  26. #confoo 2020 @ruyadorno
    Given a typical
    microservices
    architecture…
    MOCK

    View Slide

  27. #confoo 2020 @ruyadorno
    Given a typical
    microservices
    architecture…

    View Slide

  28. #confoo 2020 @ruyadorno
    Given a typical
    microservices
    architecture…

    View Slide

  29. #confoo 2020 @ruyadorno
    Given a typical
    microservices
    architecture…

    View Slide

  30. #confoo 2020 @ruyadorno
    Given a typical
    microservices
    architecture…

    View Slide

  31. #confoo 2020 @ruyadorno
    Given a typical
    microservices
    architecture…

    View Slide

  32. #confoo 2020 @ruyadorno
    Given a typical
    microservices
    architecture…
    OR

    View Slide

  33. #confoo 2020 @ruyadorno
    Given a typical
    microservices
    architecture…
    OR

    View Slide

  34. #confoo 2020 @ruyadorno
    Given a typical
    microservices
    architecture…
    OR

    View Slide

  35. #confoo 2020 @ruyadorno
    now we know how
    to use mocks for
    tests

    View Slide

  36. #confoo 2020 @ruyadorno
    we’ve seen how they’re used
    in microservices
    for local development

    View Slide

  37. FRONT-END
    #confoo 2020 @ruyadorno

    View Slide

  38. #confoo 2020 @ruyadorno
    SUMMER
    2017

    View Slide

  39. • Great library of
    reusable components
    • Good test setup with
    decent coverage
    • Awesome colleagues
    #confoo 2020 @ruyadorno

    View Slide

  40. #confoo 2020 @ruyadorno
    but

    View Slide

  41. • Microservices
    architecture
    • Impossible to run all
    services locally
    #confoo 2020 @ruyadorno

    View Slide

  42. #confoo 2020 @ruyadorno
    Staging environment:
    • Needs to be always online
    • Unstable, QA keeps
    breaking stuff
    • No easy way to easily
    change API responses

    View Slide

  43. #confoo 2020 @ruyadorno

    View Slide

  44. #confoo 2020 @ruyadorno

    View Slide

  45. #confoo 2020 @ruyadorno

    View Slide

  46. #confoo 2020 @ruyadorno

    View Slide

  47. #confoo 2020 @ruyadorno

    View Slide

  48. #confoo 2020 @ruyadorno
    let’s mock
    our way out

    View Slide

  49. #confoo 2020 @ruyadorno
    until you
    make it
    fake

    View Slide

  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

    View Slide

  51. #confoo 2020 @ruyadorno
    Mocked server
    •Allows for abstracting away the
    complexities of back-end envs
    •Lowers the barrier of joining the
    team

    View Slide

  52. #confoo 2020 @ruyadorno
    Mocked server
    •Allows for abstracting away the
    complexities of back-end envs
    •Lowers the barrier of joining the
    team

    View Slide

  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

    View Slide

  54. #confoo 2020 @ruyadorno
    Trade-off, complexity is
    switched to maintaining
    these up-to-date mocks

    View Slide

  55. #confoo 2020 @ruyadorno

    View Slide

  56. #confoo 2020 @ruyadorno
    Where did we
    ended up?

    View Slide

  57. #confoo 2020 @ruyadorno
    •Development was much
    faster and predictable
    •Completely decoupled
    from back-end
    deliverables
    Pros

    View Slide

  58. #confoo 2020 @ruyadorno
    •Integration period
    was difficult
    •Maintaining the
    mocks updated could
    sometimes be very
    annoying
    Cons

    View Slide

  59. #confoo 2020 @ruyadorno
    It ended up influencing
    the way we work:
    • Smaller PRs, faster
    deliverables
    • More tests written

    View Slide

  60. #confoo 2020 @ruyadorno
    Hybrid system
    • Portable dev environment
    • Kept staging env around

    View Slide

  61. TOOLING
    #confoo 2020 @ruyadorno

    View Slide

  62. TOOLING
    #confoo 2020 @ruyadorno
    npm.im/create-react-app

    View Slide

  63. TOOLING
    #confoo 2020 @ruyadorno
    npm.im/create-react-app
    npm.im/webpack-dev-server

    View Slide

  64. TOOLING
    #confoo 2020 @ruyadorno
    npm.im/create-react-app
    npm.im/webpack-dev-server
    npm.im/npm-run-all

    View Slide

  65. TOOLING
    #confoo 2020 @ruyadorno

    View Slide

  66. TOOLING
    #confoo 2020 @ruyadorno

    View Slide

  67. TOOLING
    #confoo 2020 @ruyadorno
    npm.im/snapstub

    View Slide

  68. TOOLING
    #confoo 2020 @ruyadorno
    npm.im/snapstub

    View Slide

  69. TOOLING
    #confoo 2020 @ruyadorno
    npm.im/snapstub

    View Slide

  70. TOOLING
    #confoo 2020 @ruyadorno
    npm.im/snapstub

    View Slide

  71. TOOLING
    #confoo 2020 @ruyadorno
    npm.im/snapstub

    View Slide

  72. TOOLING
    #confoo 2020 @ruyadorno
    npm.im/snapstub

    View Slide

  73. TOOLING
    #confoo 2020 @ruyadorno
    npm.im/snapstub

    View Slide

  74. TOOLING
    #confoo 2020 @ruyadorno
    npm.im/snapstub

    View Slide

  75. TOOLING
    #confoo 2020 @ruyadorno
    npm.im/snapstub

    View Slide

  76. TOOLING
    #confoo 2020 @ruyadorno

    View Slide

  77. #confoo 2020 @ruyadorno
    all the things!
    mock

    View Slide

  78. Ruy Adorno
    Thanks!
    @ruyadorno
    ruyadorno.com

    View Slide

  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

    View Slide

  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

    View Slide