Difficulty: Beginner
Estimated Time: 20 Minutes

The definition of each step of this tutorial can be found at https://github.com/devonfw-tutorials/tutorials/tree/main/angular-mock-service.

Feel free to report any errors to us or fix them yourself. Errors can be reported by creating an issue in the tutorials repository. To fix the error fork the repository and create a pull request. Errors in the wiki can be reported and fixed in the tutorial-compiler repository. You can find a description of what to look for when creating a pull request at the devonfw contribution guide: https://devonfw.com/website/pages/community/community.html#community.asciidoc_contributing-to-devonfw. If you want to create a tutorial you can start with the katacoda tutorial and read the description for creating your own tutorials: https://github.com/devonfw-tutorials/tutorials/wiki/Development.

In this scenario, you will learn how to write a simple mock service that helps us by feeding data into our components.

Prerequisites

  • GitHub account

  • Basic Angular knowledge

Learning goals

  • After completing this scenario, You will learn how to test classes which have dependencies in isolation by using Mocks.

More information about Angular Mock Service on https://github.com/devonfw/devon4ng/wiki/guide-angular-mock-service

Conclusion

To conclude, in this tutorial you learned

  • the concepts of mock data and services

  • the mock architecture with the help of sample app

Angular Data Mocking and Service: A way to test the untestables

Step 1 of 3

What is mock data and service?

Mock Data

Mock data is fake data which is artificially inserted into a piece of software. Mocking is essentially simulating the behaviour of real data in controlled ways. So in order to use mock data effectively, it is essential to have a good understanding of the software under test and more importantly how it uses its data. As with most things, there are both advantages and disadvantages to doing this.

One of the big advantages with mock data is that it makes it possible to simulate errors and circumstances that would otherwise be very difficult to create in a real world environment. A disadvantage however is that without good understanding of the software, it will be possible to manipulate data in ways which would never actually happen in the real world.

Mock Service

Services are often the smoothest files to unit test. A mock service imitates a real REST or SOAP API – it contains definitions for operations that clients call, receives requests, and returns simulated responses.

When testing a component with service dependencies, the best practice is mocking them, in order to test the component in an isolated environment. In fact, our purpose is testing the component, not the services, that can be trouble, especially if they try to interact with a server.

Here, we will go through a angular-mock-service sample app.

leaderboard.png

The app presents 3 pages as follows:

  • A leader board with the top 3 elements A leader board can be understood as "the most popular items in a set", "the latest updated items", "you favorite items" etc.

data-table.png

  • A data table with all the elements A data table with CRUD operations is very useful (in our case we only view details or delete an item, but they illustrate two important things: the details view shows how to navigate and consume a parametric route, the delete action shows how to invoke service operations over the loaded data - this means that the component is reusable and when the data comes with an API, only the service will need it’s implementation changed)

detail.png

  • A details page that reads a route parameter and displays the details of the element.