Creating a Mock Data Service

One of the benefits of decoupling the view from a specific data access strategy is that you can easily change the way you access data without changing anything else in your application. For example, you could use a mock data service for quick prototyping or for unit testing, and a REST-based service for production. In this unit, we create a mock data service that implements the exact same API as the REST-based data service we created in the previous unit.


  1. In the /js directory, create a new file named employee-service-mock.js

  2. In employee-service-mock.js, define an array holding your mock data.

    let employees = [
        id: 1,
        firstName: "Amy",
        lastName: "Taylor",
        phone: "617-564-3254",
        picture: ""
        id: 2,
        firstName: "Anup",
        lastName: "Gupta",
        phone: "617-564-1258",
        picture: ""
  3. Create function named findAll defined as follows:

    export let findAll = () => new Promise(resolve => resolve(employees));


    • The function has the same signature as the findAll() function defined in employee-service.js
    • The function returns the in-memory array as opposed to making a REST call for data
  4. In app.js, change the import statement to import employee-service-mock instead of employee-service

  5. Build the app:

     npm run webpack
  6. Make sure your local http server is started, open a browser and access http://localhost:8080.


The final code for this step is available in this branch.

comments powered by Disqus