vteam #659 was hired to work on a web based digital marketing application. This application lets the users of our client to register themselves, create campaigns and multiple offers according to their location. In the first phase, the application’s front-end development in Angular2 was required. Additionally, the client wanted vteams to make the front-end application testable without integrating any real back-end.
vteams engineer Fahad Nisar went through the documentation of Angular2 and found class. In order to mock real server calls, this class is used in unit testing as it keeps the unit test running quickly in isolation. Fahad used the power of to enable the client’s application to intercept all calls and return the desired responses accordingly:
In this code, function is used to communicate Angular’s dependency injection system that which of the actual instances of a class will be used and what dependencies it will require. A custom instance of the service is created. part is used to declare the required dependencies which will be injected right before the call to function. Those dependencies will then be used to create a new instance of .
For the web service, will be used as it is generally used in any other Angular2 application for making calls:
The implementation code is given below which will intercept the calls and will return a mock response including the “”, “” and “” class in the component (in which calls intercept is required):
Now, add the following code in the component constructor:
Now, the application is subscribed to the backend connections stream. Each outgoing request can be checked and then can send the desired response.
Once the actual application data layer is ready, remove the MockBackend interception code and return the real response from the backend.