Skip to main content

Speed Up Frontend Integrations With Partial Mocks

As a developer the ability to quickly iterate and integrate new features is essential. This often involves working with APIs that are in various stages of development. Partial mocking with an HTTP proxy offers a powerful solution for developers who are tasked with building incremental features dependent on APIs that are not yet available from their upstream teams. In this article, we deep-dive into what partial mocks are, how to set them up using Beeceptor, and explore their benefits, particularly for frontend developers.

What is a Partial Mock?​

A partial mock is a development technique where only a subset of APIs are mocked, while the rest continue to hit the actual sandbox (or production) servers. This approach is especially useful for JavaScript and mobile app developers working on an existing application that needs to incorporate new features dependent on APIs still in development. By setting up a mock server that intercepts all the API calls and selectively mocks a few API calls, developers can build incremental features. The app continues to interact with real services for non-mocked API endpoints. This hybrid approach allows for a seamless development process, blending live API data with mocked responses where necessary. Here's a concise diagram illustrating how this works:

how to setup partial mocks, using HTTP proxy

API request flow in the partial mock setup

Setting Up Partial Mocks Using Beeceptor​

Beeceptor offers a convenient way to create partial mocks through an HTTP proxy setup. Follow these steps to set up partial mocks:

  1. Identify the Base Domain of the Target API: Start by determining the base domain of the APIs you wish to mock. For instance, if you're working with the Dogs API located at https://dog.ceo/api/breeds/list/all, the base domain is https://dog.ceo. This domain will be mapped to a Beeceptor endpoint, such as https://hdd39b2b52130ba61b82.free.beeceptor.com, creating a bridge for your requests.
  2. Update the Application's API Requests: In your application's code, replace the original base domain with the Beeceptor endpoint you've set up. This redirection means Beeceptor now acts as a proxy to the target API server, capturing and forwarding requests.
  3. Launch Your Application: With the proxy in place, initiate your application. Any API requests directed to Beeceptor are forwarded to the original dog.ceo domain. Responses from dog.ceo are then relayed back to your application. The Beeceptor dashboard provides a real-time view of these transactions, allowing you to monitor the requests and responses.
  4. Create Mock Responses (adding the missing API): You can use Beeceptor's dashboard to craft mock responses for specific API requests. This is achieved by selecting 'Create Mock' and defining the conditions for your mock response based on available criteria. Once set, any matching incoming requests will be served with the predefined mock response, simulating the behavior of an API endpoint that may not yet be fully developed or available.

This setup enables a mixed behavior, where your app seamlessly integrates real API responses with mocked data, facilitating the development of new features without waiting for backend APIs to be fully implemented.

Note: The domain dog.ceo and its APIs are used here purely for example purposes. You should apply the above steps using the domain and APIs relevant to your project.

Benefits of Partial Mocks​

Explore the key advantages of using partial mocks:

  • Accelerated Development: By mocking unavailable APIs, developers can continue integrating and testing new features without waiting for backend services. This speeds up the development process and you remove blockers.
  • Improved Testing: Partial mocks provide a more realistic testing environment by blending real and mocked responses. E.g. you can simulate failures, timeouts, higher latencies, freezing UI screens, large data, etc.
  • Increased Flexibility: You don't need to mock all APIs. For example, if your app makes a few API calls at the time of initializing the app state, this works as usual. You have better control over what API calls are to be mocked, giving you more flexibility to simulate API behaviors, or change in data contracts.
  • Quick Prototypes: For frontend developers, partial mocks speed up the process of prototyping by reducing reliance on backend implementations. You focus on crafting and refining the user experience without backend constraints, leading to quicker iteration and feedback cycles.