Skip to content

feat: - Allows mocking to be switched on per hook rather than only globally #21

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
jlews merged 1 commit into from
Jan 8, 2025
Merged

feat: - Allows mocking to be switched on per hook rather than only globally #21

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
15 changes: 8 additions & 7 deletions docs/use-infinite-query.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -71,13 +71,14 @@ export const UserTable: React.FC = () => {

The `useInfiniteQuery` hook receives a configuration object with the following properties

| Property | Description |
| -------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `params` | The params for the API call. In the case of `useInfiniteQuery`, the params must be passed as a function which receives the page size and the previous response data as argument, and returns the params object. This structure should allow for both number & cursor driven paging models (see [paging](paging.md) for more information.) |
| `fetchConfig` | The `AxiosRequest` config for the API call, this will be merged with any global fetch config. (see [here](https://axios-http.com/docs/req_config) for full docs.) |
| `fetchWrapper` | An optional fetch wrapper for this specific hook. NOTE: This will be called in place of any supplied [global fetch wrapper](global-fetch-wrapper.md) for maximum flexibility. If you want to use the global fetch wrapper, you must call it manually within the wrapper passed here. |
| `cacheKey` | The cache key to store the response against, it can be a string param key, an array of param keys, or a function that generates the key from params, see [here](caching.md) for more info |
| `swrConfig` | Additional config to send to SWR (like settings or fallback data for SSR.) This `SWRConfiguration` (see [here](https://swr.vercel.app/docs/api#options) for full docs.) will be merged with any global config |
| Property | Description |
| --------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `params` | The params for the API call. In the case of `useInfiniteQuery`, the params must be passed as a function which receives the page size and the previous response data as argument, and returns the params object. This structure should allow for both number & cursor driven paging models (see [paging](paging.md) for more information.) |
| `fetchConfig` | The `AxiosRequest` config for the API call, this will be merged with any global fetch config. (see [here](https://axios-http.com/docs/req_config) for full docs.) |
| `fetchWrapper` | An optional fetch wrapper for this specific hook. NOTE: This will be called in place of any supplied [global fetch wrapper](global-fetch-wrapper.md) for maximum flexibility. If you want to use the global fetch wrapper, you must call it manually within the wrapper passed here. |
| `cacheKey` | The cache key to store the response against, it can be a string param key, an array of param keys, or a function that generates the key from params, see [here](caching.md) for more info |
| `swrConfig` | Additional config to send to SWR (like settings or fallback data for SSR.) This `SWRConfiguration` (see [here](https://swr.vercel.app/docs/api#options) for full docs.) will be merged with any global config |
| `enableMocking` | Whether to use the supplied [mocked endpoints](mocking.md) instead of real endpoints for this hook only, resulting in no genuine API calls being made. If this property is `true`, you **must** have a mock endpoint registered for every endpoint used in your app, otherwise an error will be thrown |

## Returns

Expand Down
11 changes: 6 additions & 5 deletions docs/use-mutation.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -71,11 +71,12 @@ export const UserForm: React.FC<IProps> = ({ userId }) => {

The `useMutation` hook receives a configuration object with the following properties

| Property | Description |
| -------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| `params` | The params for the API call (usually a combination route params, query string params & body). A re-fetch will be triggered automatically if the values in here change |
| `fetchConfig` | The `AxiosRequest` config for the API call, this will be merged with any global fetch config. (see [here](https://axios-http.com/docs/req_config) for full docs.) |
| `fetchWrapper` | An optional fetch wrapper for this specific hook. NOTE: This will be called in place of any supplied [global fetch wrapper](global-fetch-wrapper.md) for maximum flexibility. If you want to use the global fetch wrapper, you must call it manually within the wrapper passed here. |
| Property | Description |
| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| `params` | The params for the API call (usually a combination route params, query string params & body). A re-fetch will be triggered automatically if the values in here change |
| `fetchConfig` | The `AxiosRequest` config for the API call, this will be merged with any global fetch config. (see [here](https://axios-http.com/docs/req_config) for full docs.) |
| `fetchWrapper` | An optional fetch wrapper for this specific hook. NOTE: This will be called in place of any supplied [global fetch wrapper](global-fetch-wrapper.md) for maximum flexibility. If you want to use the global fetch wrapper, you must call it manually within the wrapper passed here. |
| `enableMocking` | Whether to use the supplied [mocked endpoints](mocking.md) instead of real endpoints for this hook only, resulting in no genuine API calls being made. If this property is `true`, you **must** have a mock endpoint registered for every endpoint used in your app, otherwise an error will be thrown |

## Returns

Expand Down
17 changes: 9 additions & 8 deletions docs/use-query.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,14 +48,15 @@ export const UserCard: React.FC<IProps> = ({ userId }) => {

The `useQuery` hook receives a configuration object with the following properties

| Property | Description |
| -------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| `params` | The params for the API call (usually a combination route params, query string params & body). A re-fetch will be triggered automatically if the values in here change |
| `fetchConfig` | The `AxiosRequest` config for the API call, this will be merged with any global fetch config. (see [here](https://axios-http.com/docs/req_config) for full docs.) |
| `fetchWrapper` | An optional fetch wrapper for this specific hook. NOTE: This will be called in place of any supplied [global fetch wrapper](global-fetch-wrapper.md) for maximum flexibility. If you want to use the global fetch wrapper, you must call it manually within the wrapper passed here. |
| `cacheKey` | The cache key to store the response against, it can be a string param key, an array of param keys, or a function that generates the key from params, see [here](caching.md) for more info |
| `swrConfig` | Additional config to send to SWR (like settings or fallback data for SSR.) This `SWRConfiguration` (see [here](https://swr.vercel.app/docs/api#options) for full docs.) will be merged with any global config |
| `waitFor` | An optional boolean. If this property is false, the query fetch will wait until it becomes true or undefined. Useful for holding back queries until conditions are met. |
| Property | Description |
| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| `params` | The params for the API call (usually a combination route params, query string params & body). A re-fetch will be triggered automatically if the values in here change |
| `fetchConfig` | The `AxiosRequest` config for the API call, this will be merged with any global fetch config. (see [here](https://axios-http.com/docs/req_config) for full docs.) |
| `fetchWrapper` | An optional fetch wrapper for this specific hook. NOTE: This will be called in place of any supplied [global fetch wrapper](global-fetch-wrapper.md) for maximum flexibility. If you want to use the global fetch wrapper, you must call it manually within the wrapper passed here. |
| `cacheKey` | The cache key to store the response against, it can be a string param key, an array of param keys, or a function that generates the key from params, see [here](caching.md) for more info |
| `swrConfig` | Additional config to send to SWR (like settings or fallback data for SSR.) This `SWRConfiguration` (see [here](https://swr.vercel.app/docs/api#options) for full docs.) will be merged with any global config |
| `waitFor` | An optional boolean. If this property is false, the query fetch will wait until it becomes true or undefined. Useful for holding back queries until conditions are met. |
| `enableMocking` | Whether to use the supplied [mocked endpoints](mocking.md) instead of real endpoints for this hook only, resulting in no genuine API calls being made. If this property is `true`, you **must** have a mock endpoint registered for every endpoint used in your app, otherwise an error will be thrown |

## Returns

Expand Down
2 changes: 2 additions & 0 deletions src/@types/global.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -96,6 +96,8 @@ export interface IHookBaseConfig<TFunc extends AnyPromiseFunction, TConfig exten
* NOTE: This will be called in place of any supplied global fetch wrapper for maximum flexibility. If you want to use the global fetch wrapper, you must call it manually within the wrapper passed here.
* */
fetchWrapper?: FetchWrapper<TFunc, TConfig, TResponse>;
/** Enables mocking for this hook only */
enableMocking?: boolean;
}

/**
Expand Down
40 changes: 39 additions & 1 deletion src/factories/axiosOpenApiController.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import type { AxiosResponse } from 'axios';

import { renderHook } from '@testing-library/react';
import { fixGeneratedClient } from '../utils/api';
import { cacheKeyConcat } from '../utils/caching';
import { createMockAxiosErrorResponse, createMockAxiosSuccessResponse } from '../utils/mocking';
Expand Down Expand Up @@ -27,7 +28,8 @@ describe('axiosOpenApiControllerFactory', () => {
const axiosOpenApiControllerFactoryParams: IOpenApiControllerSetup<any, any> = { basePath };
const controllerKey = 'testControllerKey';

const controllerHooks = axiosOpenApiControllerFactory(axiosOpenApiControllerFactoryParams).createAxiosOpenApiController(controllerKey, MockApi);
const controller = axiosOpenApiControllerFactory(axiosOpenApiControllerFactoryParams);
const controllerHooks = controller.createAxiosOpenApiController(controllerKey, MockApi);

const mockedController = axiosOpenApiControllerFactory({
...axiosOpenApiControllerFactoryParams,
Expand Down Expand Up @@ -165,6 +167,42 @@ describe('axiosOpenApiControllerFactory', () => {
await expect(mockedControllerHooks.testGetSuccess.fetch()).resolves.toEqual({ ...successResponse, data: { test: 'mocked-test' } });
});

it('should call mock function when enableMocking is passed through query hook config', async () => {
const localMockControllerHooks = controller.createAxiosOpenApiController(controllerKey, MockApi);
const mockTestSuccess = jest.fn();
localMockControllerHooks.registerMockEndpoints({
// eslint-disable-next-line @typescript-eslint/require-await
testGetSuccess: mockTestSuccess,
});
renderHook(() => localMockControllerHooks.testGetSuccess.useQuery({ enableMocking: true, params: { hello: 'test-query' } }));
expect(mockTestSuccess).toHaveBeenCalledWith({ hello: 'test-query' }, undefined);
});

it('should call mock function when enableMocking is passed through infinite query hook config', async () => {
const localMockControllerHooks = controller.createAxiosOpenApiController(controllerKey, MockApi);
const mockTestSuccess = jest.fn();
localMockControllerHooks.registerMockEndpoints({
// eslint-disable-next-line @typescript-eslint/require-await
testGetSuccess: mockTestSuccess,
});
renderHook(() => localMockControllerHooks.testGetSuccess.useInfiniteQuery({ enableMocking: true, params: () => ({ hello: 'test-query' }) }));
expect(mockTestSuccess).toHaveBeenCalledWith({ hello: 'test-query' }, undefined);
});

it('should call mock function when enableMocking is passed through mutation hook config', async () => {
const localMockControllerHooks = controller.createAxiosOpenApiController(controllerKey, MockApi);
const mockTestSuccess = jest.fn();
localMockControllerHooks.registerMockEndpoints({
// eslint-disable-next-line @typescript-eslint/require-await
testGetSuccess: mockTestSuccess,
});
const { result } = renderHook(() =>
localMockControllerHooks.testGetSuccess.useMutation({ enableMocking: true, params: { hello: 'test-mutation' } })
);
await result.current.clientFetch();
expect(mockTestSuccess).toHaveBeenCalledWith({ hello: 'test-mutation' }, undefined);
});

it('should throw an error when trying to fetch from an undefined mock endpoint', async () => {
const mockedControllerHooks = mockedController.createAxiosOpenApiController(controllerKey, MockApi);

Expand Down
Loading
Loading