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
   

   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