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.
The Loginapp Design Kit supports the mocking of both.
Using the setting config.customResponses in $CUSTOM_DIRECTORY/src/sdk/config/custom.sdk.config.js , an array of responses can be defined:
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:
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.
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:
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:
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
}
}
},
];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:
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:
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
}
}
},
];