mirror of
https://github.com/Nezumi-2711/react-training.git
synced 2026-09-22 13:38:51 +00:00
Remove unnecessary code and update snapshot, structure project
This commit is contained in:
@@ -47,7 +47,7 @@ describe('Menus', () => {
|
|||||||
expect(editBtn).not.toBeInTheDocument();
|
expect(editBtn).not.toBeInTheDocument();
|
||||||
});
|
});
|
||||||
|
|
||||||
test('HandleOnClick should work', async () => {
|
test('Should call handleOnClick correctly', async () => {
|
||||||
const btn = await wrapper!.findByRole('button');
|
const btn = await wrapper!.findByRole('button');
|
||||||
|
|
||||||
fireEvent.click(btn);
|
fireEvent.click(btn);
|
||||||
|
|||||||
+1
-1
@@ -2,7 +2,7 @@ import { render } from '@testing-library/react';
|
|||||||
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
|
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
|
||||||
|
|
||||||
// Components
|
// Components
|
||||||
import RootLayout from '..';
|
import RootLayout from '.';
|
||||||
|
|
||||||
describe('RootLayout', () => {
|
describe('RootLayout', () => {
|
||||||
test('Should render correctly', () => {
|
test('Should render correctly', () => {
|
||||||
+1
-1
@@ -1,5 +1,5 @@
|
|||||||
import { render } from '@testing-library/react';
|
import { render } from '@testing-library/react';
|
||||||
import RouteProtected from '..';
|
import RouteProtected from '.';
|
||||||
import AppLayout from '@component/AppLayout';
|
import AppLayout from '@component/AppLayout';
|
||||||
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
|
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
|
||||||
import { BrowserRouter } from 'react-router-dom';
|
import { BrowserRouter } from 'react-router-dom';
|
||||||
@@ -9,7 +9,9 @@ const RouteProtected = ({ children }: IRouteProtected) => {
|
|||||||
// Load user login
|
// Load user login
|
||||||
const { account } = useAccount();
|
const { account } = useAccount();
|
||||||
|
|
||||||
return !account ? <Navigate to="/login" /> : children;
|
return !account
|
||||||
|
? <Navigate to="/login" />
|
||||||
|
: children;
|
||||||
};
|
};
|
||||||
|
|
||||||
export default RouteProtected;
|
export default RouteProtected;
|
||||||
|
|||||||
@@ -4,9 +4,6 @@ import { reducer } from '@context/UserRoomAvailableContext';
|
|||||||
// Types
|
// Types
|
||||||
import { IDataState } from '@type/common';
|
import { IDataState } from '@type/common';
|
||||||
|
|
||||||
jest.mock('@service/userServices');
|
|
||||||
jest.mock('@service/roomServices');
|
|
||||||
|
|
||||||
describe('userRoomAvailableContext', () => {
|
describe('userRoomAvailableContext', () => {
|
||||||
let initialState: {
|
let initialState: {
|
||||||
roomsAvailable: IDataState[];
|
roomsAvailable: IDataState[];
|
||||||
|
|||||||
@@ -1,135 +0,0 @@
|
|||||||
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
|
|
||||||
import { act, renderHook, waitFor } from '@testing-library/react';
|
|
||||||
import { MemoryRouter } from 'react-router-dom';
|
|
||||||
import { ReactNode } from 'react';
|
|
||||||
|
|
||||||
// Hooks
|
|
||||||
import { useRooms } from '@hook/rooms/useRooms';
|
|
||||||
import { useCreateRoom } from '@hook/rooms/useCreateRoom';
|
|
||||||
import { useUpdateRoom } from '@hook/rooms/useUpdateRoom';
|
|
||||||
import { useSetIsDeleteRoom } from '@hook/rooms/useSetIsDeleteRoom';
|
|
||||||
|
|
||||||
// Types
|
|
||||||
import { IRoom } from '@type/room';
|
|
||||||
|
|
||||||
jest.mock('@hook/rooms/useRooms');
|
|
||||||
jest.mock('@hook/rooms/useCreateRoom');
|
|
||||||
jest.mock('@hook/rooms/useUpdateRoom');
|
|
||||||
jest.mock('@hook/rooms/useSetIsDeleteRoom');
|
|
||||||
|
|
||||||
interface IWrapper {
|
|
||||||
children: ReactNode;
|
|
||||||
}
|
|
||||||
|
|
||||||
const sampleData: IRoom = {
|
|
||||||
id: 999,
|
|
||||||
name: 'Room name test',
|
|
||||||
price: 9999,
|
|
||||||
status: true,
|
|
||||||
isDelete: true,
|
|
||||||
};
|
|
||||||
|
|
||||||
describe('Room hooks', () => {
|
|
||||||
const queryClient = new QueryClient({
|
|
||||||
defaultOptions: {
|
|
||||||
queries: {
|
|
||||||
retry: false,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
});
|
|
||||||
const wrapper = ({ children }: IWrapper) => {
|
|
||||||
return (
|
|
||||||
<QueryClientProvider client={queryClient}>
|
|
||||||
<MemoryRouter>{children}</MemoryRouter>
|
|
||||||
</QueryClientProvider>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
|
|
||||||
test('Should fetch data correctly', async () => {
|
|
||||||
(useRooms as jest.Mock).mockImplementation(() => ({
|
|
||||||
rooms: [
|
|
||||||
{
|
|
||||||
id: 1,
|
|
||||||
name: 'Nezumi',
|
|
||||||
price: 2500,
|
|
||||||
status: true,
|
|
||||||
isDelete: true,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 2,
|
|
||||||
name: 'Loi Phan',
|
|
||||||
price: 8500,
|
|
||||||
status: false,
|
|
||||||
isDelete: true,
|
|
||||||
},
|
|
||||||
],
|
|
||||||
isLoading: false,
|
|
||||||
count: 2
|
|
||||||
}));
|
|
||||||
const { result } = renderHook(() => useRooms(), { wrapper });
|
|
||||||
|
|
||||||
await waitFor(() =>
|
|
||||||
expect(result.current.rooms?.length).toBeGreaterThan(0)
|
|
||||||
);
|
|
||||||
});
|
|
||||||
|
|
||||||
test('Should create room correctly', async () => {
|
|
||||||
(useCreateRoom as jest.Mock).mockImplementation(() => ({
|
|
||||||
createRoom: () => {
|
|
||||||
sampleData;
|
|
||||||
},
|
|
||||||
isCreating: false,
|
|
||||||
isSuccess: true,
|
|
||||||
}));
|
|
||||||
const { result } = renderHook(() => useCreateRoom(), { wrapper });
|
|
||||||
|
|
||||||
act(() => {
|
|
||||||
result.current.createRoom(sampleData);
|
|
||||||
});
|
|
||||||
|
|
||||||
await waitFor(() => result.current.isSuccess);
|
|
||||||
|
|
||||||
expect(result.current.isSuccess).toBeTruthy();
|
|
||||||
});
|
|
||||||
|
|
||||||
test('Should edit room correctly', async () => {
|
|
||||||
(useUpdateRoom as jest.Mock).mockImplementation(() => ({
|
|
||||||
updateRoom: () => {
|
|
||||||
sampleData;
|
|
||||||
},
|
|
||||||
isUpdating: false,
|
|
||||||
isSuccess: true,
|
|
||||||
}));
|
|
||||||
const { result } = renderHook(() => useUpdateRoom(), { wrapper });
|
|
||||||
|
|
||||||
act(() => {
|
|
||||||
const testMethod = async () => {
|
|
||||||
result.current.updateRoom(sampleData);
|
|
||||||
await waitFor(() => expect(result.current.isSuccess).toBeTruthy());
|
|
||||||
};
|
|
||||||
|
|
||||||
testMethod();
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
test('Should delete room correctly', async () => {
|
|
||||||
(useSetIsDeleteRoom as jest.Mock).mockImplementation(() => ({
|
|
||||||
setIsDeleteRoom: () => {
|
|
||||||
sampleData
|
|
||||||
},
|
|
||||||
isDeleting: false,
|
|
||||||
isSuccess: true,
|
|
||||||
}));
|
|
||||||
const { result } = renderHook(() => useSetIsDeleteRoom(), { wrapper });
|
|
||||||
|
|
||||||
act(() => {
|
|
||||||
const testMethod = async () => {
|
|
||||||
result.current.setIsDeleteRoom(sampleData.id);
|
|
||||||
await waitFor(() => expect(result.current.isSuccess).toBeTruthy());
|
|
||||||
};
|
|
||||||
|
|
||||||
testMethod();
|
|
||||||
});
|
|
||||||
});
|
|
||||||
});
|
|
||||||
@@ -1,110 +0,0 @@
|
|||||||
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
|
|
||||||
import { act, renderHook, waitFor } from '@testing-library/react';
|
|
||||||
import { ReactNode } from 'react';
|
|
||||||
import { MemoryRouter } from 'react-router-dom';
|
|
||||||
|
|
||||||
// Hooks
|
|
||||||
import { useCreateUser } from '@hook/users/useCreateUser';
|
|
||||||
import { useUpdateUser } from '@hook/users/useUpdateUser';
|
|
||||||
import { useUsers } from '@hook/users/useUsers';
|
|
||||||
|
|
||||||
// Types
|
|
||||||
import { IUser } from '@type/user';
|
|
||||||
|
|
||||||
jest.mock('@hook/users/useUsers');
|
|
||||||
jest.mock('@hook/users/useCreateUser');
|
|
||||||
jest.mock('@hook/users/useUpdateUser');
|
|
||||||
|
|
||||||
interface IWrapper {
|
|
||||||
children: ReactNode;
|
|
||||||
}
|
|
||||||
|
|
||||||
const sampleData: IUser = {
|
|
||||||
id: 999,
|
|
||||||
name: 'User name test',
|
|
||||||
phone: '123456789',
|
|
||||||
isBooked: true,
|
|
||||||
isDelete: true,
|
|
||||||
};
|
|
||||||
const queryClient = new QueryClient({
|
|
||||||
defaultOptions: {
|
|
||||||
queries: {
|
|
||||||
retry: false,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
});
|
|
||||||
const wrapper = ({ children }: IWrapper) => {
|
|
||||||
return (
|
|
||||||
<QueryClientProvider client={queryClient}>
|
|
||||||
<MemoryRouter>{children}</MemoryRouter>
|
|
||||||
</QueryClientProvider>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
describe('Users hook', () => {
|
|
||||||
test('Should fetch user data correctly', async () => {
|
|
||||||
(useUsers as jest.Mock).mockImplementation(() => ({
|
|
||||||
users: [
|
|
||||||
{
|
|
||||||
id: 1,
|
|
||||||
name: 'Nezumi',
|
|
||||||
phone: '0123456678',
|
|
||||||
isBooked: true,
|
|
||||||
isDelete: true,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 2,
|
|
||||||
name: 'Loi Phan',
|
|
||||||
phone: '0123456678',
|
|
||||||
isBooked: false,
|
|
||||||
isDelete: true,
|
|
||||||
},
|
|
||||||
],
|
|
||||||
isLoading: false,
|
|
||||||
count: 2,
|
|
||||||
}));
|
|
||||||
const { result } = renderHook(() => useUsers(), { wrapper });
|
|
||||||
|
|
||||||
await waitFor(() => expect(result.current.users?.length).toEqual(2));
|
|
||||||
});
|
|
||||||
|
|
||||||
test('Should create user correctly', async () => {
|
|
||||||
(useCreateUser as jest.Mock).mockImplementation(() => ({
|
|
||||||
createUser: () => {
|
|
||||||
sampleData;
|
|
||||||
},
|
|
||||||
isCreating: false,
|
|
||||||
isSuccess: true,
|
|
||||||
}));
|
|
||||||
const { result } = renderHook(() => useCreateUser(), { wrapper });
|
|
||||||
|
|
||||||
act(() => {
|
|
||||||
const testMethod = async () => {
|
|
||||||
result.current.createUser(sampleData);
|
|
||||||
await waitFor(() => expect(result.current.isSuccess).toBeTruthy());
|
|
||||||
};
|
|
||||||
|
|
||||||
testMethod();
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
test('Should update user correctly', async () => {
|
|
||||||
(useUpdateUser as jest.Mock).mockImplementation(() => ({
|
|
||||||
updateUser: () => {
|
|
||||||
sampleData;
|
|
||||||
},
|
|
||||||
isUpdating: false,
|
|
||||||
isSuccess: true,
|
|
||||||
}));
|
|
||||||
const { result } = renderHook(() => useUpdateUser(), { wrapper });
|
|
||||||
|
|
||||||
act(() => {
|
|
||||||
const testMethod = async () => {
|
|
||||||
result.current.updateUser(sampleData);
|
|
||||||
await waitFor(() => expect(result.current.isSuccess).toBeTruthy());
|
|
||||||
};
|
|
||||||
|
|
||||||
testMethod();
|
|
||||||
});
|
|
||||||
});
|
|
||||||
});
|
|
||||||
+2
-2
@@ -79,7 +79,7 @@ exports[`BookingForm Should render correctly 1`] = `
|
|||||||
<input
|
<input
|
||||||
class="sc-bdnyFh gXSWSo"
|
class="sc-bdnyFh gXSWSo"
|
||||||
id="startDate"
|
id="startDate"
|
||||||
min="2023-12-03"
|
min="2023-12-04"
|
||||||
name="startDate"
|
name="startDate"
|
||||||
type="date"
|
type="date"
|
||||||
/>
|
/>
|
||||||
@@ -223,7 +223,7 @@ exports[`BookingForm Should render correctly 1`] = `
|
|||||||
<input
|
<input
|
||||||
class="sc-bdnyFh gXSWSo"
|
class="sc-bdnyFh gXSWSo"
|
||||||
id="startDate"
|
id="startDate"
|
||||||
min="2023-12-03"
|
min="2023-12-04"
|
||||||
name="startDate"
|
name="startDate"
|
||||||
type="date"
|
type="date"
|
||||||
/>
|
/>
|
||||||
|
|||||||
@@ -6,7 +6,7 @@ exports[`Booking Should render correctly 1`] = `
|
|||||||
"baseElement": <body>
|
"baseElement": <body>
|
||||||
<div>
|
<div>
|
||||||
<main
|
<main
|
||||||
class="sc-gtsqUy gfxnvD"
|
class="sc-gtsqUy eStAWW"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
class="sc-bdnyFh bpfZjm"
|
class="sc-bdnyFh bpfZjm"
|
||||||
@@ -45,7 +45,7 @@ exports[`Booking Should render correctly 1`] = `
|
|||||||
</body>,
|
</body>,
|
||||||
"container": <div>
|
"container": <div>
|
||||||
<main
|
<main
|
||||||
class="sc-gtsqUy gfxnvD"
|
class="sc-gtsqUy eStAWW"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
class="sc-bdnyFh bpfZjm"
|
class="sc-bdnyFh bpfZjm"
|
||||||
|
|||||||
@@ -2,7 +2,6 @@ import styled from 'styled-components';
|
|||||||
|
|
||||||
const StyledBooking = styled.main`
|
const StyledBooking = styled.main`
|
||||||
padding: 20px;
|
padding: 20px;
|
||||||
padding-bottom: 100px;
|
|
||||||
|
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
|||||||
@@ -6,7 +6,7 @@ exports[`Room Should render correctly 1`] = `
|
|||||||
"baseElement": <body>
|
"baseElement": <body>
|
||||||
<div>
|
<div>
|
||||||
<main
|
<main
|
||||||
class="sc-cxNGUP fhRVMt"
|
class="sc-cxNGUP fHVylE"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
class="sc-giAruI itcrUM"
|
class="sc-giAruI itcrUM"
|
||||||
@@ -80,7 +80,7 @@ exports[`Room Should render correctly 1`] = `
|
|||||||
</body>,
|
</body>,
|
||||||
"container": <div>
|
"container": <div>
|
||||||
<main
|
<main
|
||||||
class="sc-cxNGUP fhRVMt"
|
class="sc-cxNGUP fHVylE"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
class="sc-giAruI itcrUM"
|
class="sc-giAruI itcrUM"
|
||||||
|
|||||||
@@ -2,7 +2,6 @@ import styled from 'styled-components';
|
|||||||
|
|
||||||
const StyledRoom = styled.main`
|
const StyledRoom = styled.main`
|
||||||
padding: 20px;
|
padding: 20px;
|
||||||
padding-bottom: 100px;
|
|
||||||
|
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
|||||||
@@ -6,7 +6,7 @@ exports[`User Should render correctly 1`] = `
|
|||||||
"baseElement": <body>
|
"baseElement": <body>
|
||||||
<div>
|
<div>
|
||||||
<main
|
<main
|
||||||
class="sc-ezyZrH hDMmuA"
|
class="sc-ezyZrH fBrULh"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
class="sc-giAruI itcrUM"
|
class="sc-giAruI itcrUM"
|
||||||
@@ -80,7 +80,7 @@ exports[`User Should render correctly 1`] = `
|
|||||||
</body>,
|
</body>,
|
||||||
"container": <div>
|
"container": <div>
|
||||||
<main
|
<main
|
||||||
class="sc-ezyZrH hDMmuA"
|
class="sc-ezyZrH fBrULh"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
class="sc-giAruI itcrUM"
|
class="sc-giAruI itcrUM"
|
||||||
|
|||||||
@@ -2,7 +2,6 @@ import styled from 'styled-components';
|
|||||||
|
|
||||||
const StyledUser = styled.main`
|
const StyledUser = styled.main`
|
||||||
padding: 20px;
|
padding: 20px;
|
||||||
padding-bottom: 100px;
|
|
||||||
|
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
|||||||
Reference in New Issue
Block a user