Response mocking configuration

Advanced customizing using JavaScript may involve sending REST requests to a back-end. In a production environment, the back-end is in most cases Airlock IAM. Since the Design Kit is designed to run standalone without a running IAM instance, it provides a mechanism to mock the back-end.

There are two ways JavaScript can send REST requests:

The Loginapp Design Kit supports the mocking of both.

Basic configuration and matching

Using the setting config.customResponses in $CUSTOM_DIRECTORY/src/sdk/config/custom.sdk.config.js , an array of responses can be defined:

 
Example
config.customResponses = [ 
    { 
        url: '/some/path', 
        response: { 
            ... 
        } 
    }, 
    { 
        url: '/another/path', 
        response: { 
            ... 
        } 
    } 
];

At runtime, when a request is sent by JavaScript, the mock is determined by checking whether the actual request's URL ends with one of the configured URLs within customResponses ignoring the HTTP method. It is not necessary to fully qualify the full URL in the configuration. The first entry that matches will be used to mock the response.

In addition to matching the URL, you can optionally also provide the HTTP method:

 
Example
config.customResponses = [ 
    { 
        url: '/some/path', 
        method: 'POST', // Optional. If undefined, all HTTP methods match. 
        response: { 
            ... 
        } 
    }, 
    { 
        url: '/some/path', 
        response: { 
            ... 
        } 
    }, 
];

In this example, a request sent to /some/path only matches the first mock response if the HTTP method is POST. If any other HTTP method is used for /some/path, the second mock would apply.

Mocking XMLHttpRequest

To mock the response of an XMLHttpRequest, the xhr property has to be defined within the response. In most cases, JavaScript code only cares about the JSON payload returned by the server.

This can easily be configured as follows:

 
Example
config.customResponses = [ 
    { 
        url: '/some/path', 
        response: { 
            xhr: { 
                body: { 
                    // Your JSON response 
                } 
            } 
        } 
    }, 
];

However, sometimes the application needs to look at other response details. To that end, the Design Kit provides the following fields with the defaults that are used in the Design Kit unless explicitly defined:

 
Example
config.customResponses = [ 
    { 
        url: '/some/path', 
        response: { 
            xhr: { 
                /** @see https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/status */ 
                status: 200, 
                  
                /** @see https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/statusText */ 
                statusText: 'OK', 
                  
                /** 
                 * Key-value pairs of a header. Example: 
                 * 
                 * { 
                 *   "Content-Type": "application/json; charset=utf-8", 
                 *   "X-API-Limit": 100 
                 * } 
                 */ 
                headers: { 
                    'Content-Type': 'application/json' 
                }, 
                  
                  
                /** 
                 * The body of the response. Supported types are JSON or text. 
                 * @see https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/response 
                 */ 
                body: {}, 
                  
                /** @see https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/responseType */ 
                type: 'json', 
                  
                /** 
                  * If not explicitly configured, defaults to the JSON.stringify(body). 
                  * @see https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/responseText 
                  */ 
                responseText: undefined, 
                  
                /** @see https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/responseXML */ 
                responseXML: undefined, 
                  
                /** 
                  * If not explicitly configured, defaults to the URL that matched the mock response. 
                  * @see https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/responseURL 
                  */ 
                responseURL: undefined 
            } 
        } 
    }, 
];

Mocking the Fetch API

The mocking of the Fetch API is similar to the one for XMLHttpRequest. In the simple case, they only difference is using fetch instead of xhr in the response:

 
Example
config.customResponses = [ 
    { 
        url: '/some/path', 
        response: { 
            fetch: { 
                body: { 
                    // Your JSON response 
                } 
            } 
        } 
    }, 
];

If needed, there are additional properties that can be set. The values show the defaults used by the Design Kit unless explicitly defined:

 
Example
config.customResponses = [ 
    { 
        url: '/some/path', 
        response: { 
            fetch: { 
                /** @see https://developer.mozilla.org/en-US/docs/Web/API/Response/status */ 
                status: 200, 
  
                /** @see https://developer.mozilla.org/en-US/docs/Web/API/Response/statusText */ 
                statusText: 'OK', 
  
                /** 
                 * Key-value pairs of a header. Example: 
                 * 
                 * { 
                 *   "Content-Type": "application/json; charset=utf-8", 
                 *   "X-API-Limit": 100 
                 * } 
                 */ 
                headers: { 
                    'Content-Type': 'application/json' 
                }, 
  
                /** @see https://developer.mozilla.org/en-US/docs/Web/API/Body/body */ 
                body: {}, 
  
                /** @see https://developer.mozilla.org/en-US/docs/Web/API/Response/type */ 
                type: 'basic', 
  
                /** @see https://developer.mozilla.org/en-US/docs/Web/API/Response/redirected */ 
                redirected: false, 
  
                /** 
                  * If not explicitly configured, defaults to the URL that matched the mock response. 
                  * @see https://developer.mozilla.org/en-US/docs/Web/API/Response/url 
                  */ 
                url: undefined 
            } 
        } 
    }, 
];