Skip to content
This repository has been archived by the owner on Nov 11, 2023. It is now read-only.

Commit

Permalink
Add mocks support on hooks
Browse files Browse the repository at this point in the history
  • Loading branch information
@fabien0102
fabien0102 committed Jun 22, 2020
1 parent 61604ee commit 5b25523
Show file tree
Hide file tree
Showing 8 changed files with 144 additions and 49 deletions.
44 changes: 44 additions & 0 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -422,6 +422,50 @@ export default MyHugeList;
Each mutation returns a promise that can then be used to update local component state, dispatch an action, or do something else depending on your use case.
### Mocks
No backend support yet for your amazing feature? Need to isolate an edge case? You can easily provide a mock to `useMutate` and `useGet` to bypass the classic flow.
/!\ If `mocks` option is provided, no requests will be send to the server. /!\
```jsx
import React from "react";
import { useGet, useMutate } from "restful-react";
const base = "https://jsonplaceholder.typicode.com";
// Mock the `mutate` handler
const { mutate: del, loading } = useMutate({
verb: "DELETE",
path: `/posts/`,
base,
// This will avoid any server call in favor of mock response
mocks: {
mutate: id => console.log(`The item ${id} was deleted`),
},
});
// Mock the `loading`, so it's easy to isolate the loading state
const { data: posts } = useGet({
path: "/posts",
base,
// This will avoid any server call in favor of mock response
mocks: {
loading: true,
},
});

// Mock the `error`, so it's easy to isolate the error state
const { data: posts } = useGet({
path: "/posts",
base,
// This will avoid any server call in favor of mock response
mocks: {
error: "oh no!",
},
});
```
### Polling with `Poll`
`restful-react` also exports a `Poll` render props component that will poll a backend endpoint over a predetermined interval until a stop condition is met. Consider,
Expand Down
4 changes: 2 additions & 2 deletions src/scripts/import-open-api.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -402,10 +402,10 @@ export const generateRestfulComponent = (

const genericsTypesForHooksProps =
verb === "get"
? `${needAResponseComponent ? componentName + "Response" : responseTypes}, ${
? `${needAResponseComponent ? componentName + "Response" : responseTypes}, ${errorTypes}, ${
queryParamsType ? componentName + "QueryParams" : "void"
}, ${paramsInPath.length ? componentName + "PathParams" : "void"}`
: `${needAResponseComponent ? componentName + "Response" : responseTypes}, ${
: `${needAResponseComponent ? componentName + "Response" : responseTypes}, ${errorTypes}, ${
queryParamsType ? componentName + "QueryParams" : "void"
}, ${
verb === "delete" && lastParamInTheRoute
Expand Down
10 changes: 5 additions & 5 deletions src/scripts/tests/__snapshots__/import-open-api.test.ts.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -88,7 +88,7 @@ export const FindPets = (props: FindPetsProps) => (
/>
);
export type UseFindPetsProps = Omit<UseGetProps<Pet[], FindPetsQueryParams, void>, \\"path\\">;
export type UseFindPetsProps = Omit<UseGetProps<Pet[], Error, FindPetsQueryParams, void>, \\"path\\">;
/**
* Returns all pets from the system that the user has access to
Expand All @@ -113,7 +113,7 @@ export const AddPet = (props: AddPetProps) => (
/>
);
export type UseAddPetProps = Omit<UseMutateProps<Pet, void, NewPet, void>, \\"path\\" | \\"verb\\">;
export type UseAddPetProps = Omit<UseMutateProps<Pet, Error, void, NewPet, void>, \\"path\\" | \\"verb\\">;
/**
* Creates a new pet in the store. Duplicates are allowed
Expand All @@ -140,7 +140,7 @@ export const FindPetById = ({id, ...props}: FindPetByIdProps) => (
/>
);
export type UseFindPetByIdProps = Omit<UseGetProps<Pet, void, FindPetByIdPathParams>, \\"path\\"> & FindPetByIdPathParams;
export type UseFindPetByIdProps = Omit<UseGetProps<Pet, Error, void, FindPetByIdPathParams>, \\"path\\"> & FindPetByIdPathParams;
/**
* Returns a user based on a single ID, if the user does not have access to the pet
Expand All @@ -161,7 +161,7 @@ export const DeletePet = (props: DeletePetProps) => (
/>
);
export type UseDeletePetProps = Omit<UseMutateProps<void, void, number, void>, \\"path\\" | \\"verb\\">;
export type UseDeletePetProps = Omit<UseMutateProps<void, Error, void, number, void>, \\"path\\" | \\"verb\\">;
/**
* deletes a single pet based on the ID supplied
Expand Down Expand Up @@ -189,7 +189,7 @@ export const UpdatePet = ({id, ...props}: UpdatePetProps) => (
/>
);
export type UseUpdatePetProps = Omit<UseMutateProps<Pet, void, UpdatePetRequestRequestBody, UpdatePetPathParams>, \\"path\\" | \\"verb\\"> & UpdatePetPathParams;
export type UseUpdatePetProps = Omit<UseMutateProps<Pet, Error, void, UpdatePetRequestRequestBody, UpdatePetPathParams>, \\"path\\" | \\"verb\\"> & UpdatePetPathParams;
/**
* Updates a pet in the store.
Expand Down
36 changes: 18 additions & 18 deletions src/scripts/tests/import-open-api.test.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -870,7 +870,7 @@ describe("scripts/import-open-api", () => {
/>
);
export type UseListFieldsProps = Omit<UseGetProps<FieldListResponse, void, void>, \\"path\\">;
export type UseListFieldsProps = Omit<UseGetProps<FieldListResponse, APIError, void, void>, \\"path\\">;
/**
* List all fields for the use case schema
Expand Down Expand Up @@ -911,7 +911,7 @@ describe("scripts/import-open-api", () => {
/>
);
export type UseListFieldsProps = Omit<UseGetProps<FieldListResponse, void, void>, \\"path\\">;
export type UseListFieldsProps = Omit<UseGetProps<FieldListResponse, unknown, void, void>, \\"path\\">;
/**
* List all fields for the use case schema
Expand Down Expand Up @@ -951,7 +951,7 @@ describe("scripts/import-open-api", () => {
/>
);
export type UseListFieldsProps = Omit<UseGetProps<FieldListResponse, void, void>, \\"path\\">;
export type UseListFieldsProps = Omit<UseGetProps<FieldListResponse, unknown, void, void>, \\"path\\">;
/**
* List all fields for the use case schema
Expand Down Expand Up @@ -1002,7 +1002,7 @@ describe("scripts/import-open-api", () => {
/>
);
export type UseListFieldsProps = Omit<UseGetProps<FieldListResponse, void, void>, \\"path\\">;
export type UseListFieldsProps = Omit<UseGetProps<FieldListResponse, APIError, void, void>, \\"path\\">;
/**
* List all fields for the use case schema
Expand Down Expand Up @@ -1079,7 +1079,7 @@ describe("scripts/import-open-api", () => {
/>
);
export type UseListFieldsProps = Omit<UseGetProps<FieldListResponse, ListFieldsQueryParams, void>, \\"path\\">;
export type UseListFieldsProps = Omit<UseGetProps<FieldListResponse, APIError, ListFieldsQueryParams, void>, \\"path\\">;
/**
* List all fields for the use case schema
Expand Down Expand Up @@ -1162,7 +1162,7 @@ describe("scripts/import-open-api", () => {
/>
);
export type UseListFieldsProps = Omit<UseGetProps<FieldListResponse, ListFieldsQueryParams, void>, \\"path\\">;
export type UseListFieldsProps = Omit<UseGetProps<FieldListResponse, APIError, ListFieldsQueryParams, void>, \\"path\\">;
/**
* List all fields for the use case schema
Expand Down Expand Up @@ -1236,7 +1236,7 @@ describe("scripts/import-open-api", () => {
/>
);
export type UseListFieldsProps = Omit<UseGetProps<FieldListResponse, void, ListFieldsPathParams>, \\"path\\"> & ListFieldsPathParams;
export type UseListFieldsProps = Omit<UseGetProps<FieldListResponse, APIError, void, ListFieldsPathParams>, \\"path\\"> & ListFieldsPathParams;
/**
* List all fields for the use case schema
Expand Down Expand Up @@ -1317,7 +1317,7 @@ describe("scripts/import-open-api", () => {
/>
);
export type UseListFieldsProps = Omit<UseGetProps<FieldListResponse, void, ListFieldsPathParams>, \\"path\\"> & ListFieldsPathParams;
export type UseListFieldsProps = Omit<UseGetProps<FieldListResponse, APIError, void, ListFieldsPathParams>, \\"path\\"> & ListFieldsPathParams;
/**
* List all fields for the use case schema
Expand Down Expand Up @@ -1392,7 +1392,7 @@ describe("scripts/import-open-api", () => {
/>
);
export type UseUpdateUseCaseProps = Omit<UseMutateProps<UseCaseResponse, void, UseCaseInstance, UpdateUseCasePathParams>, \\"path\\" | \\"verb\\"> & UpdateUseCasePathParams;
export type UseUpdateUseCaseProps = Omit<UseMutateProps<UseCaseResponse, APIError, void, UseCaseInstance, UpdateUseCasePathParams>, \\"path\\" | \\"verb\\"> & UpdateUseCasePathParams;
/**
* Update use case details
Expand Down Expand Up @@ -1484,7 +1484,7 @@ describe("scripts/import-open-api", () => {
/>
);
export type UseUpdateUseCaseProps = Omit<UseMutateProps<UseCaseResponse, void, UpdateUseCaseRequestBody, UpdateUseCasePathParams>, \\"path\\" | \\"verb\\"> & UpdateUseCasePathParams;
export type UseUpdateUseCaseProps = Omit<UseMutateProps<UseCaseResponse, APIError, void, UpdateUseCaseRequestBody, UpdateUseCasePathParams>, \\"path\\" | \\"verb\\"> & UpdateUseCasePathParams;
/**
* Update use case details
Expand Down Expand Up @@ -1579,7 +1579,7 @@ describe("scripts/import-open-api", () => {
/>
);
export type UseUpdateUseCaseProps = Omit<UseMutateProps<UpdateUseCaseResponse, void, UseCaseInstance, UpdateUseCasePathParams>, \\"path\\" | \\"verb\\"> & UpdateUseCasePathParams;
export type UseUpdateUseCaseProps = Omit<UseMutateProps<UpdateUseCaseResponse, APIError, void, UseCaseInstance, UpdateUseCasePathParams>, \\"path\\" | \\"verb\\"> & UpdateUseCasePathParams;
/**
* Update use case details
Expand Down Expand Up @@ -1677,7 +1677,7 @@ describe("scripts/import-open-api", () => {
/>
);
export type UseUpdateUseCaseProps = Omit<UseMutateProps<UpdateUseCaseResponse, void, UseCaseInstance, UpdateUseCasePathParams>, \\"path\\" | \\"verb\\"> & UpdateUseCasePathParams;
export type UseUpdateUseCaseProps = Omit<UseMutateProps<UpdateUseCaseResponse, APIError, void, UseCaseInstance, UpdateUseCasePathParams>, \\"path\\" | \\"verb\\"> & UpdateUseCasePathParams;
/**
* Update use case details
Expand Down Expand Up @@ -1740,7 +1740,7 @@ describe("scripts/import-open-api", () => {
/>
);
export type UseDeleteUseCaseProps = Omit<UseMutateProps<void, void, string, void>, \\"path\\" | \\"verb\\">;
export type UseDeleteUseCaseProps = Omit<UseMutateProps<void, APIError, void, string, void>, \\"path\\" | \\"verb\\">;
/**
* Delete use case
Expand Down Expand Up @@ -1809,7 +1809,7 @@ describe("scripts/import-open-api", () => {
/>
);
export type UseDeleteUseCaseProps = Omit<UseMutateProps<void, void, void, DeleteUseCasePathParams>, \\"path\\" | \\"verb\\"> & DeleteUseCasePathParams;
export type UseDeleteUseCaseProps = Omit<UseMutateProps<void, APIError, void, void, DeleteUseCasePathParams>, \\"path\\" | \\"verb\\"> & DeleteUseCasePathParams;
/**
* Delete use case
Expand Down Expand Up @@ -1872,7 +1872,7 @@ describe("scripts/import-open-api", () => {
/>
);
export type UseDeleteUseCaseProps = Omit<UseMutateProps<void, void, number, void>, \\"path\\" | \\"verb\\">;
export type UseDeleteUseCaseProps = Omit<UseMutateProps<void, APIError, void, number, void>, \\"path\\" | \\"verb\\">;
/**
* Delete use case
Expand Down Expand Up @@ -1930,7 +1930,7 @@ describe("scripts/import-open-api", () => {
/>
);
export type UseDeleteUseCaseProps = Omit<UseMutateProps<void, void, UseCaseId, void>, \\"path\\" | \\"verb\\">;
export type UseDeleteUseCaseProps = Omit<UseMutateProps<void, APIError, void, UseCaseId, void>, \\"path\\" | \\"verb\\">;
/**
* Delete use case
Expand Down Expand Up @@ -1986,7 +1986,7 @@ describe("scripts/import-open-api", () => {
/>
);
export type UseListFieldsProps = Omit<UseGetProps<FieldListResponse, void, void>, \\"path\\">;
export type UseListFieldsProps = Omit<UseGetProps<FieldListResponse, APIError, void, void>, \\"path\\">;
/**
* List all fields for the use case schema
Expand Down Expand Up @@ -2041,7 +2041,7 @@ describe("scripts/import-open-api", () => {
/>
);
export type UseListFieldsProps = Omit<UseGetProps<void, void, void>, \\"path\\">;
export type UseListFieldsProps = Omit<UseGetProps<void, APIError, void, void>, \\"path\\">;
/**
* List all fields for the use case schema
Expand Down
38 changes: 37 additions & 1 deletion src/useGet.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1119,7 +1119,7 @@ describe("useGet hook", () => {
}

type UseGetMyCustomEndpoint = Omit<
UseGetProps<MyCustomEndpointResponse, MyCustomEndpointQueryParams, {}>,
UseGetProps<MyCustomEndpointResponse, MyCustomEndpointError, MyCustomEndpointQueryParams, {}>,
"path"
>;
const useGetMyCustomEndpoint = (props: UseGetMyCustomEndpoint) =>
Expand Down Expand Up @@ -1202,4 +1202,40 @@ describe("useGet hook", () => {
expect(result.current.data).toEqual({ id: 1 });
});
});

describe("with mock", () => {
it("should not call the api and return the mock", async () => {
let apiCalls = 0;
nock("https://my-awesome-api.fake")
.get("/plop/one")
.reply(200, () => {
apiCalls++;
return { id: 1 };
});

const wrapper: React.FC = ({ children }) => (
<RestfulProvider base="https://my-awesome-api.fake">{children}</RestfulProvider>
);
const { result } = renderHook(
() =>
useGet<{ id: number }, {}, {}, { id: string }>(({ id }) => `plop/${id}`, {
pathParams: { id: "one" },
mock: {
data: { id: 2 },
loading: false,
},
}),
{
wrapper,
},
);

expect(result.current).toMatchObject({
error: null,
loading: false,
data: { id: 2 }, // from mock
});
expect(apiCalls).toBe(0);
});
});
});
Loading

0 comments on commit 5b25523

Please sign in to comment.