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 Target API Domain: Determine the base domain of the API 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.
  2. Open Routing Settings: Create or select your Beeceptor endpoint (e.g. https://hdf3d651e537d46e2edf.free.beeceptor.com) and select Routing from the menu.
  3. Configure Forward Requests: Select Forward Requests, enter https://dog.ceo as your target domain, and save.
  1. Update Application API Requests: In your application's code, replace the original base domain with the Beeceptor endpoint URL.
  2. Launch Your Application: Initiate your application. Requests will be forwarded to the original dog.ceo domain.
  3. Create Mock Responses: Use Beeceptor's dashboard to craft mock responses for specific API requests by selecting 'Create Mock'.

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.