Skip to main content

fetch-mock

Includes​

fetch-mock is included in /TemenosExplorer/public/bundle.js and this will need to be included in your plugin's index.html file.

Here is a code snippet that you can copy/paste into the <head> element of your plugin's index.html file using the correct relative paths:

<head>
  <script src="../../bundle.js" defer></script>
</head>

fetch-mock is then accessible via the browser window object:

window.fetchMock

Usage​

To use fetch-mock you simply need to define the mock criteria for each API request your application will make.

fetch-mock will automatically intercept all calls made to the native fetch method and match the target URL to the mock criteria defined. If matching criteria is found, fetch-mock will handle the request and return the corresponding mocked response. If no matching criteria is found, fetch-mock will allow the native fetch method to be invoked and the request will be routed to the actual API.

The information below shows the most common uses for fetch-mock in the context of mocking calls to APIs in a Temenos Explorer plugin. This using some of the more common matching options. Please refer to the official fetch-mock documentation for more details on advanced matching options.

get​

Description

This method allows you to define mock criteria for GET requests to a specified URL or pattern and the mock response that should be returned.

Parameters

ParameterTypeDescription
urlstringAn exact URL or regex pattern
responseobjectResponse object containing status, headers and body properties
optionsobjectRequest options object containing delay property (optional, pass in empty object if no delay required)

Example

window.fetchMock.get(
  "http://www.example.com/api/customer/12345", 
  {
    status: 200, 
    headers: {}, 
    body: {
      "customerId": "12345", 
      "firstName": "John", 
      "lastName": "Smith", 
      "dateOfBirth": "1980-01-01", 
      "emailAddress": "john.smith@example.com", 
      "telephone": "01234 567 890", 
      "address": {
        "addressLine1": "123 Example Street",
        "addressLine2": "",
        "county": "London",
        "city": "London",
        "postCode": "AB1 2CD",
        "country": "United Kingdom"
      }
    }
  }, 
  {
    delay: 500
  }
);

put, post and delete​

Description

These methods allow you to define mock criteria for PUT, POST and DELETE requests to a specified URL or pattern and the mock response that should be returned. Depending on the use case you can configure the mock criteria to return a static response that will be the same for all matching calls to the API, or you can configure the mock criteria to return a response based on the request URL and/or data. These 2 scenarios are covered below:

Static Response​

Parameters

ParameterTypeDescription
urlstringAn exact URL or regex pattern
responseobjectResponse object containing status, headers and body properties
optionsobjectRequest options object containing delay property (optional, pass in empty object if no delay required)

Example

window.fetchMock.put(
  "http://www.example.com/api/payments", 
  {
    status: 200, 
    headers: {}, 
    body: {
      "status": "success", 
      "description": "Payment arranged"
    }
  }, 
  {
    delay: 500
  }
);

Variable Response​

Parameters

ParameterTypeDescription
urlstringAn exact URL or regex pattern
responsefunctionFunction which determines the response to return based on the request URL and data
optionsobjectRequest options object containing delay property (optional, pass in empty object if no delay required)

Example

window.fetchMock.post(
  "http://www.example.com/api/payments", 
  (url, request) => {
    // Add conditional logic to determine the mock response based on the request data
    if(request && request.body.amount && +(request.body.amount) > 1000) {
      return {
        status: 200, 
        headers: {}, 
        body: {
          "status": "error", 
          "description": "Not enough funds available"
        }
      }
    } else {
      return {
        status: 200, 
        headers: {}, 
        body: {
          "status": "success", 
          "description": "Payment arranged"
        }
      }
    }
  }, 
  {
    delay: 500
  }
);

URL Matching​

The url parameter can either contain an exact URL or URL matching criteria using the following arguments:

ArgumentTypeDescription
*stringMatches any URL
begin:...stringMatches URLs which start with the specified string, e.g. "begin:http://www.example.com"
end:...stringMatches URLs which end with the specified string, e.g. "end:/customer"
path:...stringMatches URLs which have a given path, e.g. "path:/accounts/current
/.../RegExpMatches URLs that satisfy a regular expression, e.g "/(customer\|account)\/\d+"

More information on URL matching can be found on the official fetch-mock documentation.

Toggle to Enable/Disable fetch-mock​

You can implement a toggle to enable/disable fetch-mock from intercepting the API calls in your application by suppressing the code which defines the mock criteria, as shown in this example:

var useMock = false;

// Define mock criteria only if useMock == true
if(useMock) {
  if(window.fetchMock) {

    // Define mock criteria for API call to get a transaction
    window.fetchMock.get(
      "http://www.example.com/api/transactions?transactionId=12345"
      {
        status: 200, 
        body: {
          "transactionId": "12345",
          "amount": "100.00", 
          "currency": "GBP", 
          "description": "Train tickets"
        }
      }, 
      {
        delay: 500
      }
    );
  }
}

When useMock is set to false, the mock criteria is not defined and any calls to the APIs will be routed to the actual APIs.

When useMock is set to true, the mock criteria is defined and any calls to the APIs will be intercepted and the mock responses will be returned.