Mocks, Services and Providers

We use mock for testing, that is why you meaby don't see nothing when open the component sandbox instance. In WebMap, mock need the WebMapService in order to simulate component data, controls and events. For this is needed to create 3 files inside CoreServices folder:

Create Angular app component file

This code is responsible for creating, registering and updating the mock of the component. The name of the class is from AngularApp plus the name of the component. The structure of this code does not vary from component to component, just the name of the class.

Create WebMapService file

Here is our instance of WebMapService for the component. This service will be in charge of taking the client's http requests and returning their responses (data, controls, events). Works in conjunction with the Mock HTTP server.

To work, it needs the angular app object that we created in the previous step.

Mock Http Server

This will be our backend server. Since we use mock components for testing, we also need a mock server to serve as a provider.

In the switch, you can add each http response for each client-side request. Normally a JSON file is returned, with the data to be rendered in the component but you can adapt the code to the need you have.

How to create JSON Responses

JSON files should go in assets folder, you should create new folder for component to save each file.

All components have an initial state with its properties and internal controls if it owns them. There must be a JSON file for each request that a frontend component can make. You can see information related to our components in frontend frameworks at Front-End Frameworks Reference Source.

Example:

Add Mock Server requests and responses

Finally, we must add the responses with the respective JSON file to the requests, usually the "Id" property of the component that fires the event is part of the URL that makes the request.

Here you can see how to get those URL and the data for the JSON if you have the migrated application. If not, you can create it manually.

The last step is the creation of the scenario, you can see it in the next page.