[Tini Studio] New Feature - Mock API calls seamlessly right on the DevTools

We introduce the new DevTools Feature - “Mock Control Panel” (MCP). MCP helps user by intercepting and then manipulating all selected http requests that user made with TIKI JSAP my.request.The manipulation includes: changing the http response time, data, status code, and even the response headers.

We hope this new feature can assist Tini App developers in developing and testing all the test case scenario like long response time, error states, or any missing or fallacious network response data.

Introducing the new DevTools Panel that allows developers to mock their HTTP APIs calls seamlessly.

:satellite: Visual UI

:art: Features

  1. View all the API calls in the Console DevTools tab.
  2. Mock any request call directly by adding mock or edit already mocked API call.
  3. Create mocks for APIs which are in development phase.
  4. Test all the cases by changes response, simulate bugs.

:hammer_and_wrench: Operation guide

Create a mock rule

First, make sure the MCP is enabled:
Go to the DevTools Console tab and check the Warning line. It should include the following line from the very beginning of the tab:

> Enabled mock request     devtools-worker.js:1 

If not, you should check the switcher under MCP is on. Enabled it and refresh the simulator.

As the UI shown, we can now assume that you now are able to create a rule to match and manipulate your HTTPS request without any instruction.

Add matcher patterns

For each rule, we can add matchers which decide which request will be intercepted.

A matcher has:

  • HTTP Methods:
    • Not support: HEAD, CONNECT, TRACE, and other custom methods.
  • URL pattern: The string pattern that matches your url, we use the same api from MDN URLPattern.
    For example, the pattern (^https?)://*.example.com/books/:id(\d+)/ will match those urls:
    https://apiv1.example.com/books/1/, https://apiv2.example.com/books/999/
  • Request body regular expression: your request body will be parsed to string to compare with this regex. This is an optional option and it might be useful if you are trying to mock the GraphQL APIs.

If the request matches one matcher from the rule, the configured response you has set below will be sent to the api callback within the delay time. And if the request matches matchers from the rule, the first one will be took. The same as the rules order.

Update a mock rule

Select the rule on the left side menu, edit and hit enter or the save button.

Remove a mock rule

Double click the rule title on the left side menu to open the delete action.

:red_circle: Notes:

  • This feature is available from Tini Studio version 1.34.0
  • Intercepted requests will not be shown on the Network tab of DevTools

:raised_hand: Support

Please report any issue directly on this thread.

The article presented by
Tini Studio

Available on Windows & MacOS
© 2022 TIKI OPEN PLATFORM. All rights reserved.