mirror of
https://github.com/Nezumi-2711/react-training.git
synced 2026-09-22 13:38:51 +00:00
Update userRoomAvaialableContext test case
This commit is contained in:
@@ -0,0 +1,51 @@
|
||||
import { render, act, RenderResult } from '@testing-library/react';
|
||||
import * as userServices from '@service/userServices';
|
||||
import * as roomServices from '@service/roomServices';
|
||||
import App from './App';
|
||||
|
||||
jest.mock('@service/userServices');
|
||||
jest.mock('@service/roomServices');
|
||||
|
||||
describe('App', () => {
|
||||
let wrapper: RenderResult | null = null;
|
||||
|
||||
beforeEach(async () => {
|
||||
await act(async () => {
|
||||
wrapper = render(<App />);
|
||||
});
|
||||
});
|
||||
|
||||
test('should render correctly', () => {
|
||||
expect(wrapper).toMatchSnapshot();
|
||||
});
|
||||
|
||||
test('Should init room, user data', async () => {
|
||||
const mockGetUserNotBooked = jest.spyOn(userServices, 'getUserNotBooked');
|
||||
const mockGetRoomAvailable = jest.spyOn(roomServices, 'getRoomsAvailable');
|
||||
|
||||
mockGetUserNotBooked.mockResolvedValue([
|
||||
{
|
||||
id: 1,
|
||||
name: 'Nezumi',
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: 'Loi Phan',
|
||||
},
|
||||
]);
|
||||
|
||||
mockGetRoomAvailable.mockResolvedValue([
|
||||
{
|
||||
id: 1,
|
||||
name: 'Room 1',
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: 'Room 2',
|
||||
},
|
||||
]);
|
||||
|
||||
expect(mockGetUserNotBooked).toHaveBeenCalled();
|
||||
expect(mockGetRoomAvailable).toHaveBeenCalled();
|
||||
});
|
||||
});
|
||||
@@ -1154,3 +1154,388 @@ exports[`App Should render correctly 1`] = `
|
||||
"unmount": [Function],
|
||||
}
|
||||
`;
|
||||
|
||||
exports[`App should render correctly 1`] = `
|
||||
{
|
||||
"asFragment": [Function],
|
||||
"baseElement": <body>
|
||||
<div>
|
||||
<div
|
||||
class="sc-iCoHzw jFLeHb"
|
||||
>
|
||||
<header
|
||||
class="sc-dlniIP cClxoS"
|
||||
>
|
||||
<p>
|
||||
Hi,
|
||||
Admin
|
||||
!
|
||||
</p>
|
||||
<ul
|
||||
class="sc-gtsqUy gOWXQs"
|
||||
>
|
||||
<li>
|
||||
<button
|
||||
class="sc-bdnyFh bxHnoO"
|
||||
>
|
||||
<svg
|
||||
fill="currentColor"
|
||||
height="1em"
|
||||
stroke="currentColor"
|
||||
stroke-width="0"
|
||||
viewBox="0 0 512 512"
|
||||
width="1em"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M258.9 48C141.92 46.42 46.42 141.92 48 258.9c1.56 112.19 92.91 203.54 205.1 205.1 117 1.6 212.48-93.9 210.88-210.88C462.44 140.91 371.09 49.56 258.9 48zm126.42 327.25a4 4 0 01-6.14-.32 124.27 124.27 0 00-32.35-29.59C321.37 329 289.11 320 256 320s-65.37 9-90.83 25.34a124.24 124.24 0 00-32.35 29.58 4 4 0 01-6.14.32A175.32 175.32 0 0180 259c-1.63-97.31 78.22-178.76 175.57-179S432 158.81 432 256a175.32 175.32 0 01-46.68 119.25z"
|
||||
/>
|
||||
<path
|
||||
d="M256 144c-19.72 0-37.55 7.39-50.22 20.82s-19 32-17.57 51.93C191.11 256 221.52 288 256 288s64.83-32 67.79-71.24c1.48-19.74-4.8-38.14-17.68-51.82C293.39 151.44 275.59 144 256 144z"
|
||||
/>
|
||||
</svg>
|
||||
|
||||
<span />
|
||||
</button>
|
||||
</li>
|
||||
<li>
|
||||
<button
|
||||
class="sc-bdnyFh bxHnoO"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
fill="none"
|
||||
height="1em"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
viewBox="0 0 24 24"
|
||||
width="1em"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
|
||||
<span />
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
</header>
|
||||
<aside
|
||||
class="sc-jSFipO ejTmsl"
|
||||
>
|
||||
<h1
|
||||
class="sc-gKAaef hNxcoF"
|
||||
>
|
||||
Hotel Management
|
||||
</h1>
|
||||
<nav
|
||||
class="sc-hKFymg eIMPQI"
|
||||
>
|
||||
<a
|
||||
aria-current="page"
|
||||
class="sc-eCAqax hQZHUY active"
|
||||
href="/dashboard"
|
||||
>
|
||||
<svg
|
||||
fill="currentColor"
|
||||
height="1em"
|
||||
stroke="currentColor"
|
||||
stroke-width="0"
|
||||
viewBox="0 0 24 24"
|
||||
width="1em"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M0 0h24v24H0z"
|
||||
fill="none"
|
||||
/>
|
||||
<path
|
||||
d="M11 21H5c-1.1 0-2-.9-2-2V5c0-1.1.9-2 2-2h6v18zm2 0h6c1.1 0 2-.9 2-2v-7h-8v9zm8-11V5c0-1.1-.9-2-2-2h-6v7h8z"
|
||||
/>
|
||||
</svg>
|
||||
<span>
|
||||
Dashboard
|
||||
</span>
|
||||
</a>
|
||||
<a
|
||||
class="sc-eCAqax hQZHUY"
|
||||
href="/user"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
fill="currentColor"
|
||||
height="1em"
|
||||
stroke="currentColor"
|
||||
stroke-width="0"
|
||||
viewBox="0 0 24 24"
|
||||
width="1em"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M4.5 6.375a4.125 4.125 0 118.25 0 4.125 4.125 0 01-8.25 0zM14.25 8.625a3.375 3.375 0 116.75 0 3.375 3.375 0 01-6.75 0zM1.5 19.125a7.125 7.125 0 0114.25 0v.003l-.001.119a.75.75 0 01-.363.63 13.067 13.067 0 01-6.761 1.873c-2.472 0-4.786-.684-6.76-1.873a.75.75 0 01-.364-.63l-.001-.122zM17.25 19.128l-.001.144a2.25 2.25 0 01-.233.96 10.088 10.088 0 005.06-1.01.75.75 0 00.42-.643 4.875 4.875 0 00-6.957-4.611 8.586 8.586 0 011.71 5.157v.003z"
|
||||
/>
|
||||
</svg>
|
||||
<span>
|
||||
User
|
||||
</span>
|
||||
</a>
|
||||
<a
|
||||
class="sc-eCAqax hQZHUY"
|
||||
href="/room"
|
||||
>
|
||||
<svg
|
||||
fill="currentColor"
|
||||
height="1em"
|
||||
stroke="currentColor"
|
||||
stroke-width="0"
|
||||
viewBox="0 0 16 16"
|
||||
width="1em"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M6.5 14.5v-3.505c0-.245.25-.495.5-.495h2c.25 0 .5.25.5.5v3.5a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5Z"
|
||||
/>
|
||||
</svg>
|
||||
<span>
|
||||
Room
|
||||
</span>
|
||||
</a>
|
||||
</nav>
|
||||
</aside>
|
||||
<main
|
||||
class="sc-fujznN cdRedX"
|
||||
>
|
||||
<main
|
||||
class="sc-cBornZ bxsUeT"
|
||||
>
|
||||
<p>
|
||||
This page currently still develop. Please try again later!
|
||||
</p>
|
||||
</main>
|
||||
</main>
|
||||
</div>
|
||||
<div
|
||||
style="position: fixed; z-index: 2000; top: 16px; left: 16px; right: 16px; bottom: 16px; pointer-events: none; margin: 8px;"
|
||||
/>
|
||||
</div>
|
||||
</body>,
|
||||
"container": <div>
|
||||
<div
|
||||
class="sc-iCoHzw jFLeHb"
|
||||
>
|
||||
<header
|
||||
class="sc-dlniIP cClxoS"
|
||||
>
|
||||
<p>
|
||||
Hi,
|
||||
Admin
|
||||
!
|
||||
</p>
|
||||
<ul
|
||||
class="sc-gtsqUy gOWXQs"
|
||||
>
|
||||
<li>
|
||||
<button
|
||||
class="sc-bdnyFh bxHnoO"
|
||||
>
|
||||
<svg
|
||||
fill="currentColor"
|
||||
height="1em"
|
||||
stroke="currentColor"
|
||||
stroke-width="0"
|
||||
viewBox="0 0 512 512"
|
||||
width="1em"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M258.9 48C141.92 46.42 46.42 141.92 48 258.9c1.56 112.19 92.91 203.54 205.1 205.1 117 1.6 212.48-93.9 210.88-210.88C462.44 140.91 371.09 49.56 258.9 48zm126.42 327.25a4 4 0 01-6.14-.32 124.27 124.27 0 00-32.35-29.59C321.37 329 289.11 320 256 320s-65.37 9-90.83 25.34a124.24 124.24 0 00-32.35 29.58 4 4 0 01-6.14.32A175.32 175.32 0 0180 259c-1.63-97.31 78.22-178.76 175.57-179S432 158.81 432 256a175.32 175.32 0 01-46.68 119.25z"
|
||||
/>
|
||||
<path
|
||||
d="M256 144c-19.72 0-37.55 7.39-50.22 20.82s-19 32-17.57 51.93C191.11 256 221.52 288 256 288s64.83-32 67.79-71.24c1.48-19.74-4.8-38.14-17.68-51.82C293.39 151.44 275.59 144 256 144z"
|
||||
/>
|
||||
</svg>
|
||||
|
||||
<span />
|
||||
</button>
|
||||
</li>
|
||||
<li>
|
||||
<button
|
||||
class="sc-bdnyFh bxHnoO"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
fill="none"
|
||||
height="1em"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
viewBox="0 0 24 24"
|
||||
width="1em"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
|
||||
<span />
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
</header>
|
||||
<aside
|
||||
class="sc-jSFipO ejTmsl"
|
||||
>
|
||||
<h1
|
||||
class="sc-gKAaef hNxcoF"
|
||||
>
|
||||
Hotel Management
|
||||
</h1>
|
||||
<nav
|
||||
class="sc-hKFymg eIMPQI"
|
||||
>
|
||||
<a
|
||||
aria-current="page"
|
||||
class="sc-eCAqax hQZHUY active"
|
||||
href="/dashboard"
|
||||
>
|
||||
<svg
|
||||
fill="currentColor"
|
||||
height="1em"
|
||||
stroke="currentColor"
|
||||
stroke-width="0"
|
||||
viewBox="0 0 24 24"
|
||||
width="1em"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M0 0h24v24H0z"
|
||||
fill="none"
|
||||
/>
|
||||
<path
|
||||
d="M11 21H5c-1.1 0-2-.9-2-2V5c0-1.1.9-2 2-2h6v18zm2 0h6c1.1 0 2-.9 2-2v-7h-8v9zm8-11V5c0-1.1-.9-2-2-2h-6v7h8z"
|
||||
/>
|
||||
</svg>
|
||||
<span>
|
||||
Dashboard
|
||||
</span>
|
||||
</a>
|
||||
<a
|
||||
class="sc-eCAqax hQZHUY"
|
||||
href="/user"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
fill="currentColor"
|
||||
height="1em"
|
||||
stroke="currentColor"
|
||||
stroke-width="0"
|
||||
viewBox="0 0 24 24"
|
||||
width="1em"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M4.5 6.375a4.125 4.125 0 118.25 0 4.125 4.125 0 01-8.25 0zM14.25 8.625a3.375 3.375 0 116.75 0 3.375 3.375 0 01-6.75 0zM1.5 19.125a7.125 7.125 0 0114.25 0v.003l-.001.119a.75.75 0 01-.363.63 13.067 13.067 0 01-6.761 1.873c-2.472 0-4.786-.684-6.76-1.873a.75.75 0 01-.364-.63l-.001-.122zM17.25 19.128l-.001.144a2.25 2.25 0 01-.233.96 10.088 10.088 0 005.06-1.01.75.75 0 00.42-.643 4.875 4.875 0 00-6.957-4.611 8.586 8.586 0 011.71 5.157v.003z"
|
||||
/>
|
||||
</svg>
|
||||
<span>
|
||||
User
|
||||
</span>
|
||||
</a>
|
||||
<a
|
||||
class="sc-eCAqax hQZHUY"
|
||||
href="/room"
|
||||
>
|
||||
<svg
|
||||
fill="currentColor"
|
||||
height="1em"
|
||||
stroke="currentColor"
|
||||
stroke-width="0"
|
||||
viewBox="0 0 16 16"
|
||||
width="1em"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M6.5 14.5v-3.505c0-.245.25-.495.5-.495h2c.25 0 .5.25.5.5v3.5a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5Z"
|
||||
/>
|
||||
</svg>
|
||||
<span>
|
||||
Room
|
||||
</span>
|
||||
</a>
|
||||
</nav>
|
||||
</aside>
|
||||
<main
|
||||
class="sc-fujznN cdRedX"
|
||||
>
|
||||
<main
|
||||
class="sc-cBornZ bxsUeT"
|
||||
>
|
||||
<p>
|
||||
This page currently still develop. Please try again later!
|
||||
</p>
|
||||
</main>
|
||||
</main>
|
||||
</div>
|
||||
<div
|
||||
style="position: fixed; z-index: 2000; top: 16px; left: 16px; right: 16px; bottom: 16px; pointer-events: none; margin: 8px;"
|
||||
/>
|
||||
</div>,
|
||||
"debug": [Function],
|
||||
"findAllByAltText": [Function],
|
||||
"findAllByDisplayValue": [Function],
|
||||
"findAllByLabelText": [Function],
|
||||
"findAllByPlaceholderText": [Function],
|
||||
"findAllByRole": [Function],
|
||||
"findAllByTestId": [Function],
|
||||
"findAllByText": [Function],
|
||||
"findAllByTitle": [Function],
|
||||
"findByAltText": [Function],
|
||||
"findByDisplayValue": [Function],
|
||||
"findByLabelText": [Function],
|
||||
"findByPlaceholderText": [Function],
|
||||
"findByRole": [Function],
|
||||
"findByTestId": [Function],
|
||||
"findByText": [Function],
|
||||
"findByTitle": [Function],
|
||||
"getAllByAltText": [Function],
|
||||
"getAllByDisplayValue": [Function],
|
||||
"getAllByLabelText": [Function],
|
||||
"getAllByPlaceholderText": [Function],
|
||||
"getAllByRole": [Function],
|
||||
"getAllByTestId": [Function],
|
||||
"getAllByText": [Function],
|
||||
"getAllByTitle": [Function],
|
||||
"getByAltText": [Function],
|
||||
"getByDisplayValue": [Function],
|
||||
"getByLabelText": [Function],
|
||||
"getByPlaceholderText": [Function],
|
||||
"getByRole": [Function],
|
||||
"getByTestId": [Function],
|
||||
"getByText": [Function],
|
||||
"getByTitle": [Function],
|
||||
"queryAllByAltText": [Function],
|
||||
"queryAllByDisplayValue": [Function],
|
||||
"queryAllByLabelText": [Function],
|
||||
"queryAllByPlaceholderText": [Function],
|
||||
"queryAllByRole": [Function],
|
||||
"queryAllByTestId": [Function],
|
||||
"queryAllByText": [Function],
|
||||
"queryAllByTitle": [Function],
|
||||
"queryByAltText": [Function],
|
||||
"queryByDisplayValue": [Function],
|
||||
"queryByLabelText": [Function],
|
||||
"queryByPlaceholderText": [Function],
|
||||
"queryByRole": [Function],
|
||||
"queryByTestId": [Function],
|
||||
"queryByText": [Function],
|
||||
"queryByTitle": [Function],
|
||||
"rerender": [Function],
|
||||
"unmount": [Function],
|
||||
}
|
||||
`;
|
||||
|
||||
@@ -1,40 +1,129 @@
|
||||
import { render, act } from '@testing-library/react';
|
||||
import * as userServices from '@service/userServices';
|
||||
import * as roomServices from '@service/roomServices';
|
||||
import App from '../../App';
|
||||
import { reducer } from '@context/UserRoomAvailableContext';
|
||||
import { IDataState } from '@type/common';
|
||||
|
||||
jest.mock('@service/userServices');
|
||||
jest.mock('@service/roomServices');
|
||||
|
||||
describe('App', () => {
|
||||
test('Should init room, user data', async () => {
|
||||
const mockGetUserNotBooked = jest.spyOn(userServices, 'getUserNotBooked');
|
||||
const mockGetRoomAvailable = jest.spyOn(roomServices, 'getRoomsAvailable');
|
||||
describe('userRoomAvailableContext', () => {
|
||||
let initialState: {
|
||||
roomsAvailable: IDataState[];
|
||||
usersAvailable: IDataState[];
|
||||
};
|
||||
|
||||
mockGetUserNotBooked.mockResolvedValue([
|
||||
{
|
||||
id: 1,
|
||||
name: 'Nezumi',
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: 'Loi Phan',
|
||||
},
|
||||
]);
|
||||
|
||||
mockGetRoomAvailable.mockResolvedValue([
|
||||
{
|
||||
id: 1,
|
||||
name: 'Room 1',
|
||||
},
|
||||
const sampleRooms = [
|
||||
{
|
||||
id: 2,
|
||||
name: 'Room 2',
|
||||
},
|
||||
]);
|
||||
{
|
||||
id: 3,
|
||||
name: 'Room 3',
|
||||
},
|
||||
];
|
||||
|
||||
await act(async () => {
|
||||
render(<App />);
|
||||
const sampleUsers = [
|
||||
{
|
||||
id: 2,
|
||||
name: 'Loi Phan',
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
name: 'Van A',
|
||||
},
|
||||
];
|
||||
|
||||
beforeEach(() => {
|
||||
initialState = {
|
||||
roomsAvailable: [
|
||||
{
|
||||
id: 1,
|
||||
name: 'Room 1',
|
||||
},
|
||||
],
|
||||
usersAvailable: [
|
||||
{
|
||||
id: 1,
|
||||
name: 'Nezumi',
|
||||
},
|
||||
],
|
||||
};
|
||||
});
|
||||
|
||||
test('Should init user correctly', async () => {
|
||||
const state = reducer(initialState, {
|
||||
type: 'initUser',
|
||||
payload: sampleUsers,
|
||||
});
|
||||
|
||||
expect(state.usersAvailable.length).toEqual(2);
|
||||
});
|
||||
|
||||
test('Should add user correctly', async () => {
|
||||
const state = reducer(initialState, {
|
||||
type: 'addUser',
|
||||
payload: [{ id: 2, name: 'Test Name' }],
|
||||
});
|
||||
|
||||
expect(state.usersAvailable.length).toEqual(2);
|
||||
});
|
||||
|
||||
test('Should remove user correctly', async () => {
|
||||
const state = reducer(initialState, {
|
||||
type: 'removeUser',
|
||||
payload: [{ id: 1 }],
|
||||
});
|
||||
|
||||
expect(state.usersAvailable.length).toEqual(0);
|
||||
});
|
||||
|
||||
test('Should update user correctly', async () => {
|
||||
const state = reducer(initialState, {
|
||||
type: 'updateUserName',
|
||||
payload: [{ id: 1, name: 'Update name' }],
|
||||
});
|
||||
|
||||
expect(state.usersAvailable[0]).toEqual({
|
||||
id: 1,
|
||||
name: 'Update name'
|
||||
});
|
||||
});
|
||||
|
||||
test('Should init room correctly', async () => {
|
||||
const state = reducer(initialState, {
|
||||
type: 'initRoom',
|
||||
payload: sampleRooms,
|
||||
});
|
||||
|
||||
expect(state.roomsAvailable.length).toEqual(2);
|
||||
});
|
||||
|
||||
test('Should add room correctly', async () => {
|
||||
const state = reducer(initialState, {
|
||||
type: 'addRoom',
|
||||
payload: [{ id: 2, name: 'Test Room' }],
|
||||
});
|
||||
|
||||
expect(state.roomsAvailable.length).toEqual(2);
|
||||
});
|
||||
|
||||
test('Should remove room correctly', async () => {
|
||||
const state = reducer(initialState, {
|
||||
type: 'removeRoom',
|
||||
payload: [{ id: 1 }],
|
||||
});
|
||||
|
||||
expect(state.roomsAvailable.length).toEqual(0);
|
||||
});
|
||||
|
||||
test('Should update room correctly', async () => {
|
||||
const state = reducer(initialState, {
|
||||
type: 'updateRoomName',
|
||||
payload: [{ id: 1, name: 'Update name' }],
|
||||
});
|
||||
|
||||
expect(state.roomsAvailable[0]).toEqual({
|
||||
id: 1,
|
||||
name: 'Update name'
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
@@ -1,22 +1,49 @@
|
||||
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
|
||||
import { BrowserRouter } from 'react-router-dom';
|
||||
import renderer from 'react-test-renderer';
|
||||
|
||||
jest.mock('@hook/users/useCreateUser.ts', () => ({
|
||||
...jest.requireActual('@hook/users/useCreateUser.ts'),
|
||||
useCreateUser: () => ({
|
||||
isCreating: true,
|
||||
createUser: jest.fn(),
|
||||
}),
|
||||
}));
|
||||
|
||||
// Components
|
||||
import UserForm from '../UserForm';
|
||||
import { RenderResult, fireEvent, render } from '@testing-library/react';
|
||||
import { act } from 'react-test-renderer';
|
||||
|
||||
describe('UserForm', () => {
|
||||
const queryClient = new QueryClient();
|
||||
|
||||
const wrapper = renderer.create(
|
||||
let wrapper: RenderResult | null = null;
|
||||
|
||||
beforeEach(() => {
|
||||
wrapper = render(
|
||||
<QueryClientProvider client={queryClient}>
|
||||
<BrowserRouter>
|
||||
<UserForm />
|
||||
</BrowserRouter>
|
||||
</QueryClientProvider>
|
||||
);
|
||||
});
|
||||
|
||||
test('Should render correctly', () => {
|
||||
expect(wrapper).toMatchSnapshot();
|
||||
});
|
||||
|
||||
test('Should submit correctly', async () => {
|
||||
const nameField = wrapper!.container.querySelector('#name');
|
||||
const phoneField = wrapper!.container.querySelector('#phone');
|
||||
const submitBtn = wrapper!.getByText('Add');
|
||||
|
||||
await act(async () => {
|
||||
fireEvent.input(nameField!, { target: { value: 'Phan Huu Loi' } });
|
||||
fireEvent.input(phoneField!, { target: { value: '0324432321' } });
|
||||
fireEvent.click(submitBtn);
|
||||
});
|
||||
|
||||
wrapper?.debug();
|
||||
});
|
||||
});
|
||||
|
||||
@@ -2,7 +2,7 @@ type Nullable<T> = T | null;
|
||||
|
||||
interface IDataState {
|
||||
id: number;
|
||||
name: string;
|
||||
name?: string;
|
||||
}
|
||||
|
||||
export type { Nullable, IDataState };
|
||||
|
||||
Reference in New Issue
Block a user