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],
|
"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 { reducer } from '@context/UserRoomAvailableContext';
|
||||||
import * as userServices from '@service/userServices';
|
import { IDataState } from '@type/common';
|
||||||
import * as roomServices from '@service/roomServices';
|
|
||||||
import App from '../../App';
|
|
||||||
|
|
||||||
jest.mock('@service/userServices');
|
jest.mock('@service/userServices');
|
||||||
jest.mock('@service/roomServices');
|
jest.mock('@service/roomServices');
|
||||||
|
|
||||||
describe('App', () => {
|
describe('userRoomAvailableContext', () => {
|
||||||
test('Should init room, user data', async () => {
|
let initialState: {
|
||||||
const mockGetUserNotBooked = jest.spyOn(userServices, 'getUserNotBooked');
|
roomsAvailable: IDataState[];
|
||||||
const mockGetRoomAvailable = jest.spyOn(roomServices, 'getRoomsAvailable');
|
usersAvailable: IDataState[];
|
||||||
|
};
|
||||||
|
|
||||||
mockGetUserNotBooked.mockResolvedValue([
|
const sampleRooms = [
|
||||||
{
|
{
|
||||||
id: 1,
|
id: 2,
|
||||||
name: 'Nezumi',
|
name: 'Room 2',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: 2,
|
id: 3,
|
||||||
name: 'Loi Phan',
|
name: 'Room 3',
|
||||||
},
|
},
|
||||||
]);
|
];
|
||||||
|
|
||||||
mockGetRoomAvailable.mockResolvedValue([
|
const sampleUsers = [
|
||||||
{
|
{
|
||||||
id: 1,
|
id: 2,
|
||||||
name: 'Room 1',
|
name: 'Loi Phan',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: 2,
|
id: 3,
|
||||||
name: 'Room 2',
|
name: 'Van A',
|
||||||
},
|
},
|
||||||
]);
|
];
|
||||||
|
|
||||||
await act(async () => {
|
beforeEach(() => {
|
||||||
render(<App />);
|
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 { QueryClient, QueryClientProvider } from '@tanstack/react-query';
|
||||||
import { BrowserRouter } from 'react-router-dom';
|
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
|
// Components
|
||||||
import UserForm from '../UserForm';
|
import UserForm from '../UserForm';
|
||||||
|
import { RenderResult, fireEvent, render } from '@testing-library/react';
|
||||||
|
import { act } from 'react-test-renderer';
|
||||||
|
|
||||||
describe('UserForm', () => {
|
describe('UserForm', () => {
|
||||||
const queryClient = new QueryClient();
|
const queryClient = new QueryClient();
|
||||||
|
|
||||||
const wrapper = renderer.create(
|
let wrapper: RenderResult | null = null;
|
||||||
<QueryClientProvider client={queryClient}>
|
|
||||||
<BrowserRouter>
|
beforeEach(() => {
|
||||||
<UserForm />
|
wrapper = render(
|
||||||
</BrowserRouter>
|
<QueryClientProvider client={queryClient}>
|
||||||
</QueryClientProvider>
|
<BrowserRouter>
|
||||||
);
|
<UserForm />
|
||||||
|
</BrowserRouter>
|
||||||
|
</QueryClientProvider>
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
test('Should render correctly', () => {
|
test('Should render correctly', () => {
|
||||||
expect(wrapper).toMatchSnapshot();
|
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 {
|
interface IDataState {
|
||||||
id: number;
|
id: number;
|
||||||
name: string;
|
name?: string;
|
||||||
}
|
}
|
||||||
|
|
||||||
export type { Nullable, IDataState };
|
export type { Nullable, IDataState };
|
||||||
|
|||||||
Reference in New Issue
Block a user