Skip to main content

How to Mock API Calls

ยท 3 min read

A Pragmatic Mocking Toolโ€‹

When I first started my career in the software industry, I began to get familiar with Single-page applications and how they interact with servers, mainly through HTTP requests to retrieve or send data to the end-user. If you're working with the front end, there's a very high chance you found yourself in one (or multiple) of the following scenarios.

The backend is not ready yet!โ€‹

While the backend team is working on the endpoint X you need, you start working on the UI change. You're using some static mocks hardcoded in the frontend or something like Storybook to focus on the UI part of the task, and you'll postpone the data integration.

The almighty unreproducible bugโ€‹

All you get from the QA engineer is a JSON payload, without steps to reproduce the bug. You take the backend response to figure out how it can affect the app. You want to find a way to make that HTTP request to return your JSON payload.

Demo-day: the backend is downโ€‹

On demo-day the backend service which your feature depends upon, it's down. What now?

What options we have?โ€‹

Having experienced these scenarios multiple times, I thought about simple alternatives such as proxying tools that would allow me to mock HTTP responses. The solutions I found either didn't work or were overwhelmingly complex.

What if...โ€‹

You had a tool that offers a consistent and pleasant experience, enabling you to bypass the HTTP requests and:

  • make them return whatever data you need
  • right in the browser tab
  • without writing any code

That's why we built tweak!โ€‹

The tweak is a browser extension that allows you to change your HTTP requests to test, develop, and demo your web application. Think of it as your customizable static API mock server in a chrome extension that allows you to change your HTTP requests on the fly!

You can mock any HTTP request. You only need to provide three simple things:

  1. URL that you wish to match,
  2. HTTP method of the request you're targeting,
  3. The response payload you would like to get instead of the actual server response.

There are plenty of other features bundled in the extension, and the team prepared a few short videos to guide you through some of the most common use cases, give it a try!

I hope tweak increases your productivity. The extension is also available on Firefox.

Do you identify yourself with the problems I mentioned throughout the blog post? Are there any other scenarios where you would use such a tool?

If you liked this article, consider sharing (tweeting) it to your followers.



Did you like this article?