mirror of
https://github.com/Nezumi-2711/react-training.git
synced 2026-09-22 13:38:51 +00:00
Add test case for user, room hooks
This commit is contained in:
@@ -8,16 +8,13 @@ import { act, renderHook, waitFor } from '@testing-library/react';
|
||||
import { IRoom } from '@type/rooms';
|
||||
import { ReactNode } from 'react';
|
||||
import { MemoryRouter } from 'react-router-dom';
|
||||
import { useUpdateRoom } from '@hook/rooms/useUpdateRoom';
|
||||
import { useDeleteRoom } from '@hook/rooms/useDeleteRoom';
|
||||
|
||||
const mockUseRooms = jest.fn(useRooms);
|
||||
const mockUseCreateRoom = jest.fn(useCreateRoom);
|
||||
// const mockUseUpdateRoom = useUpdateRoom;
|
||||
// const mockUseDeleteRoom = useDeleteRoom;
|
||||
|
||||
jest.mock('@hook/rooms/useRooms');
|
||||
jest.mock('@hook/rooms/useUpdateRoom');
|
||||
jest.mock('@hook/rooms/useDeleteRoom');
|
||||
|
||||
const mockUseUpdateRoom = jest.fn(useUpdateRoom);
|
||||
const mockUseDeleteRoom = jest.fn(useDeleteRoom);
|
||||
interface IWrapper {
|
||||
children: ReactNode;
|
||||
}
|
||||
@@ -86,46 +83,39 @@ describe('CRUD Room testing', () => {
|
||||
expect(result.current.isSuccess).toBeTruthy();
|
||||
});
|
||||
|
||||
test('Create failed room', async () => {
|
||||
mockUseCreateRoom.mockImplementation(() => ({
|
||||
createRoom: () => {sampleData},
|
||||
isCreating: false,
|
||||
isSuccess: false
|
||||
test('Edit room', async () => {
|
||||
mockUseUpdateRoom.mockImplementation(() => ({
|
||||
updateRoom: () => {sampleData},
|
||||
isUpdating: false,
|
||||
isSuccess: true
|
||||
}));
|
||||
const { result } = renderHook(() => mockUseCreateRoom(), { wrapper });
|
||||
const { result } = renderHook(() => mockUseUpdateRoom(), { wrapper });
|
||||
|
||||
act(() => {
|
||||
result.current.createRoom(sampleData);
|
||||
const testMethod = async () => {
|
||||
result.current.updateRoom(sampleData);
|
||||
await waitFor(() => expect(result.current.isSuccess).toBeTruthy());
|
||||
};
|
||||
|
||||
testMethod();
|
||||
});
|
||||
|
||||
await waitFor(() => result.current.isSuccess);
|
||||
|
||||
expect(result.current.isSuccess).toBeFalsy();
|
||||
});
|
||||
|
||||
// test('Edit room', async () => {
|
||||
// const { result } = renderHook(() => useUpdateRoom(), { wrapper });
|
||||
test('Delete room', async () => {
|
||||
mockUseDeleteRoom.mockImplementation(() => ({
|
||||
deleteRoom: () => {sampleData.id},
|
||||
isDeleting: false,
|
||||
isSuccess: true
|
||||
}));
|
||||
const { result } = renderHook(() => mockUseDeleteRoom(), { wrapper });
|
||||
|
||||
// act(() => {
|
||||
// const testMethod = async () => {
|
||||
// result.current.updateRoom(sampleData);
|
||||
// await waitFor(() => expect(result.current.isSuccess).toBeTruthy());
|
||||
// };
|
||||
act(() => {
|
||||
const testMethod = async () => {
|
||||
result.current.deleteRoom(sampleData.id);
|
||||
await waitFor(() => expect(result.current.isSuccess).toBeTruthy());
|
||||
};
|
||||
|
||||
// testMethod();
|
||||
// });
|
||||
// });
|
||||
|
||||
// test('Delete room', async () => {
|
||||
// const { result } = renderHook(() => useDeleteRoom(), { wrapper });
|
||||
|
||||
// act(() => {
|
||||
// const testMethod = async () => {
|
||||
// result.current.deleteRoom(sampleData.id);
|
||||
// await waitFor(() => expect(result.current.isSuccess).toBeTruthy());
|
||||
// };
|
||||
|
||||
// testMethod();
|
||||
// });
|
||||
// });
|
||||
testMethod();
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
@@ -1,70 +1,101 @@
|
||||
// import { useCreateUser } from '@hook/users/useCreateUser';
|
||||
// import { useUpdateUser } from '@hook/users/useUpdateUser';
|
||||
// import { useUsers } from '@hook/users/useUsers';
|
||||
// import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
|
||||
// import { renderHook, waitFor } from '@testing-library/react';
|
||||
// import { IUser } from '@type/users';
|
||||
// import { ReactNode } from 'react';
|
||||
// import { MemoryRouter } from 'react-router-dom';
|
||||
// import { act } from 'react-test-renderer';
|
||||
import { useCreateUser } from '@hook/users/useCreateUser';
|
||||
import { useUpdateUser } from '@hook/users/useUpdateUser';
|
||||
import { useUsers } from '@hook/users/useUsers';
|
||||
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
|
||||
import { renderHook, waitFor } from '@testing-library/react';
|
||||
import { IUser } from '@type/users';
|
||||
import { ReactNode } from 'react';
|
||||
import { MemoryRouter } from 'react-router-dom';
|
||||
import { act } from 'react-test-renderer';
|
||||
|
||||
// interface IWrapper {
|
||||
// children: ReactNode;
|
||||
// }
|
||||
const mockUseUsers = jest.fn(useUsers);
|
||||
const mockUseCreateUser = jest.fn(useCreateUser);
|
||||
const mockUseUpdateUser = jest.fn(useUpdateUser);
|
||||
|
||||
// const sampleData: IUser = {
|
||||
// id: 999,
|
||||
// name: 'User name test',
|
||||
// phone: '123456789',
|
||||
// isBooked: true,
|
||||
// };
|
||||
// const queryClient = new QueryClient({
|
||||
// defaultOptions: {
|
||||
// queries: {
|
||||
// retry: false,
|
||||
// },
|
||||
// },
|
||||
// });
|
||||
// const wrapper = ({ children }: IWrapper) => {
|
||||
// return (
|
||||
// <QueryClientProvider client={queryClient}>
|
||||
// <MemoryRouter>{children}</MemoryRouter>
|
||||
// </QueryClientProvider>
|
||||
// );
|
||||
// };
|
||||
interface IWrapper {
|
||||
children: ReactNode;
|
||||
}
|
||||
|
||||
// describe('CRUD User testing', () => {
|
||||
// test('Fetch user data', async () => {
|
||||
// const { result } = renderHook(() => useUsers(), { wrapper });
|
||||
const sampleData: IUser = {
|
||||
id: 999,
|
||||
name: 'User name test',
|
||||
phone: '123456789',
|
||||
isBooked: true,
|
||||
};
|
||||
const queryClient = new QueryClient({
|
||||
defaultOptions: {
|
||||
queries: {
|
||||
retry: false,
|
||||
},
|
||||
},
|
||||
});
|
||||
const wrapper = ({ children }: IWrapper) => {
|
||||
return (
|
||||
<QueryClientProvider client={queryClient}>
|
||||
<MemoryRouter>{children}</MemoryRouter>
|
||||
</QueryClientProvider>
|
||||
);
|
||||
};
|
||||
|
||||
// await waitFor(() =>
|
||||
// expect(result.current.users?.length).toBeGreaterThan(0)
|
||||
// );
|
||||
// });
|
||||
describe('CRUD User testing', () => {
|
||||
test('Fetch user data', async () => {
|
||||
mockUseUsers.mockImplementation(() => ({
|
||||
users: [
|
||||
{
|
||||
id: 1,
|
||||
name: 'Nezumi',
|
||||
phone: '0123456678',
|
||||
isBooked: true,
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: 'Loi Phan',
|
||||
phone: '0123456678',
|
||||
isBooked: false,
|
||||
},
|
||||
],
|
||||
isLoading: false,
|
||||
}))
|
||||
const { result } = renderHook(() => mockUseUsers(), { wrapper });
|
||||
|
||||
// test('Create user', async () => {
|
||||
// const { result } = renderHook(() => useCreateUser(), { wrapper });
|
||||
await waitFor(() =>
|
||||
expect(result.current.users?.length).toEqual(2)
|
||||
);
|
||||
});
|
||||
|
||||
// act(() => {
|
||||
// const testMethod = async () => {
|
||||
// result.current.createUser(sampleData);
|
||||
// await waitFor(() => expect(result.current.isSuccess).toBeTruthy());
|
||||
// };
|
||||
test('Create user', async () => {
|
||||
mockUseCreateUser.mockImplementation(() => ({
|
||||
createUser: () => {sampleData},
|
||||
isCreating: false,
|
||||
isSuccess: true,
|
||||
}));
|
||||
const { result } = renderHook(() => mockUseCreateUser(), { wrapper });
|
||||
|
||||
// testMethod();
|
||||
// });
|
||||
// });
|
||||
act(() => {
|
||||
const testMethod = async () => {
|
||||
result.current.createUser(sampleData);
|
||||
await waitFor(() => expect(result.current.isSuccess).toBeTruthy());
|
||||
};
|
||||
|
||||
// test('Update user', async () => {
|
||||
// const { result } = renderHook(() => useUpdateUser(), { wrapper });
|
||||
testMethod();
|
||||
});
|
||||
});
|
||||
|
||||
// act(() => {
|
||||
// const testMethod = async () => {
|
||||
// result.current.updateUser(sampleData);
|
||||
// await waitFor(() => expect(result.current.isSuccess).toBeTruthy());
|
||||
// };
|
||||
test('Update user', async () => {
|
||||
mockUseUpdateUser.mockImplementation(() => ({
|
||||
updateUser: () => {sampleData},
|
||||
isUpdating: false,
|
||||
isSuccess: true,
|
||||
}));
|
||||
const { result } = renderHook(() => mockUseUpdateUser(), { wrapper });
|
||||
|
||||
// testMethod();
|
||||
// });
|
||||
// });
|
||||
// });
|
||||
act(() => {
|
||||
const testMethod = async () => {
|
||||
result.current.updateUser(sampleData);
|
||||
await waitFor(() => expect(result.current.isSuccess).toBeTruthy());
|
||||
};
|
||||
|
||||
testMethod();
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
@@ -17,6 +17,7 @@ const useDeleteRoom = () => {
|
||||
const {
|
||||
isPending: isDeleting,
|
||||
mutate: deleteRoom,
|
||||
isSuccess
|
||||
} = useMutation({
|
||||
mutationFn: deleteRoomFn,
|
||||
onSuccess: () => {
|
||||
@@ -28,7 +29,7 @@ const useDeleteRoom = () => {
|
||||
onError: (err) => toast.error(err.message),
|
||||
});
|
||||
|
||||
return { isDeleting, deleteRoom };
|
||||
return { isDeleting, deleteRoom, isSuccess };
|
||||
};
|
||||
|
||||
export { useDeleteRoom };
|
||||
|
||||
@@ -18,7 +18,8 @@ const useUpdateRoom = () => {
|
||||
|
||||
const {
|
||||
mutate: updateRoom,
|
||||
isPending: isUpdating
|
||||
isPending: isUpdating,
|
||||
isSuccess
|
||||
} = useMutation({
|
||||
mutationFn: updateRoomFn,
|
||||
onSuccess: (room) => {
|
||||
@@ -26,7 +27,7 @@ const useUpdateRoom = () => {
|
||||
queryClient.invalidateQueries({ queryKey: ['rooms'] });
|
||||
|
||||
// Update name room in global state
|
||||
dispatch!({
|
||||
dispatch?.({
|
||||
type: 'updateRoomName',
|
||||
payload: [{ id: room.id, name: room.name }],
|
||||
});
|
||||
@@ -34,7 +35,7 @@ const useUpdateRoom = () => {
|
||||
onError: (err) => toast.error(err.message),
|
||||
});
|
||||
|
||||
return { isUpdating, updateRoom };
|
||||
return { isUpdating, updateRoom, isSuccess };
|
||||
};
|
||||
|
||||
export { useUpdateRoom };
|
||||
|
||||
Reference in New Issue
Block a user