mirror of
https://github.com/Nezumi-2711/react-training.git
synced 2026-09-22 20:01:59 +00:00
Merge pull request #35 from Nez27/feat/unit-test-for-function
Add unit test for all function available
This commit is contained in:
Loi Phan
@@ -8,7 +8,8 @@
|
|||||||
"build": "tsc && vite build",
|
"build": "tsc && vite build",
|
||||||
"lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
|
"lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
|
||||||
"preview": "vite preview",
|
"preview": "vite preview",
|
||||||
"test": "jest --coverage"
|
"test-ci": "jest --coverage",
|
||||||
|
"test": "jest --runTestsByPath"
|
||||||
},
|
},
|
||||||
"coverageReporters": [
|
"coverageReporters": [
|
||||||
"html"
|
"html"
|
||||||
|
|||||||
@@ -0,0 +1,69 @@
|
|||||||
|
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, 'getAllUsers');
|
||||||
|
const mockGetRoomAvailable = jest.spyOn(roomServices, 'getAllRooms');
|
||||||
|
|
||||||
|
mockGetUserNotBooked.mockResolvedValue({
|
||||||
|
data: [
|
||||||
|
{
|
||||||
|
id: 1,
|
||||||
|
name: 'Nezumi',
|
||||||
|
phone: '0324432321',
|
||||||
|
isBooked: true,
|
||||||
|
isDelete: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 1,
|
||||||
|
name: 'Loi Phan',
|
||||||
|
phone: '0324432123',
|
||||||
|
isBooked: true,
|
||||||
|
isDelete: true,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
count: 2,
|
||||||
|
});
|
||||||
|
|
||||||
|
mockGetRoomAvailable.mockResolvedValue({
|
||||||
|
data: [
|
||||||
|
{
|
||||||
|
id: 1,
|
||||||
|
name: 'Room 1',
|
||||||
|
price: 230,
|
||||||
|
status: true,
|
||||||
|
isDelete: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 2,
|
||||||
|
name: 'Room 2',
|
||||||
|
price: 242,
|
||||||
|
status: true,
|
||||||
|
isDelete: true
|
||||||
|
},
|
||||||
|
],
|
||||||
|
count: 2
|
||||||
|
});
|
||||||
|
|
||||||
|
expect(mockGetUserNotBooked).toHaveBeenCalled();
|
||||||
|
expect(mockGetRoomAvailable).toHaveBeenCalled();
|
||||||
|
});
|
||||||
|
});
|
||||||
@@ -0,0 +1,84 @@
|
|||||||
|
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||||
|
|
||||||
|
exports[`App should render correctly 1`] = `
|
||||||
|
{
|
||||||
|
"asFragment": [Function],
|
||||||
|
"baseElement": <body>
|
||||||
|
<div>
|
||||||
|
<div
|
||||||
|
class="sc-jrsKJM iDdaat"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="sc-pNWRh lfNGxm"
|
||||||
|
/>
|
||||||
|
</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-jrsKJM iDdaat"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="sc-pNWRh lfNGxm"
|
||||||
|
/>
|
||||||
|
</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],
|
||||||
|
}
|
||||||
|
`;
|
||||||
@@ -3,12 +3,17 @@ import { BrowserRouter } from 'react-router-dom';
|
|||||||
|
|
||||||
// Components
|
// Components
|
||||||
import AppLayout from '.';
|
import AppLayout from '.';
|
||||||
|
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
|
||||||
|
|
||||||
describe('AppLayout', () => {
|
describe('AppLayout', () => {
|
||||||
|
const queryClient = new QueryClient();
|
||||||
|
|
||||||
const wrapper = renderer.create(
|
const wrapper = renderer.create(
|
||||||
<BrowserRouter>
|
<QueryClientProvider client={queryClient}>
|
||||||
<AppLayout />
|
<BrowserRouter>
|
||||||
</BrowserRouter>
|
<AppLayout />
|
||||||
|
</BrowserRouter>
|
||||||
|
</QueryClientProvider>
|
||||||
);
|
);
|
||||||
|
|
||||||
test('Should render correctly', () => {
|
test('Should render correctly', () => {
|
||||||
|
|||||||
@@ -9,7 +9,6 @@ exports[`AppLayout Should render correctly 1`] = `
|
|||||||
>
|
>
|
||||||
<p>
|
<p>
|
||||||
Hi,
|
Hi,
|
||||||
Admin
|
|
||||||
!
|
!
|
||||||
</p>
|
</p>
|
||||||
<ul
|
<ul
|
||||||
@@ -24,6 +23,7 @@ exports[`AppLayout Should render correctly 1`] = `
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
isHaveChildren={false}
|
isHaveChildren={false}
|
||||||
|
onClick={[Function]}
|
||||||
style={
|
style={
|
||||||
{
|
{
|
||||||
"backgroundColor": undefined,
|
"backgroundColor": undefined,
|
||||||
@@ -60,12 +60,14 @@ exports[`AppLayout Should render correctly 1`] = `
|
|||||||
<li>
|
<li>
|
||||||
<button
|
<button
|
||||||
className="sc-bdnyFh bxHnoO"
|
className="sc-bdnyFh bxHnoO"
|
||||||
|
disabled={false}
|
||||||
iconStyle={
|
iconStyle={
|
||||||
{
|
{
|
||||||
"size": "23px",
|
"size": "23px",
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
isHaveChildren={false}
|
isHaveChildren={false}
|
||||||
|
onClick={[Function]}
|
||||||
style={
|
style={
|
||||||
{
|
{
|
||||||
"backgroundColor": undefined,
|
"backgroundColor": undefined,
|
||||||
@@ -105,7 +107,8 @@ exports[`AppLayout Should render correctly 1`] = `
|
|||||||
className="sc-jSFipO ejTmsl"
|
className="sc-jSFipO ejTmsl"
|
||||||
>
|
>
|
||||||
<h1
|
<h1
|
||||||
className="sc-gKAaef hNxcoF"
|
className="sc-gKAaef kdwrvt"
|
||||||
|
onClick={[Function]}
|
||||||
>
|
>
|
||||||
Hotel Management
|
Hotel Management
|
||||||
</h1>
|
</h1>
|
||||||
@@ -114,7 +117,7 @@ exports[`AppLayout Should render correctly 1`] = `
|
|||||||
>
|
>
|
||||||
<a
|
<a
|
||||||
className="sc-eCAqax hQZHUY"
|
className="sc-eCAqax hQZHUY"
|
||||||
href="/dashboard"
|
href="/booking"
|
||||||
onClick={[Function]}
|
onClick={[Function]}
|
||||||
>
|
>
|
||||||
<svg
|
<svg
|
||||||
@@ -132,15 +135,11 @@ exports[`AppLayout Should render correctly 1`] = `
|
|||||||
xmlns="http://www.w3.org/2000/svg"
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
>
|
>
|
||||||
<path
|
<path
|
||||||
d="M0 0h24v24H0z"
|
d="M5 22h14c1.103 0 2-.897 2-2V6c0-1.103-.897-2-2-2h-2V2h-2v2H9V2H7v2H5c-1.103 0-2 .897-2 2v14c0 1.103.897 2 2 2zM5 7h14v2H5V7z"
|
||||||
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>
|
</svg>
|
||||||
<span>
|
<span>
|
||||||
Dashboard
|
Booking
|
||||||
</span>
|
</span>
|
||||||
</a>
|
</a>
|
||||||
<a
|
<a
|
||||||
|
|||||||
@@ -1,20 +1,33 @@
|
|||||||
import renderer from 'react-test-renderer';
|
|
||||||
|
|
||||||
// Components
|
// Components
|
||||||
import ConfirmMessage from '.';
|
import ConfirmMessage from '.';
|
||||||
|
import { RenderResult, fireEvent, render } from '@testing-library/react';
|
||||||
|
|
||||||
describe('ConfirmMessage testing snapshot', () => {
|
describe('ConfirmMessage testing snapshot', () => {
|
||||||
const message = 'Hello World!';
|
const message = 'Hello World!';
|
||||||
const handleOnConfirm = jest.fn();
|
const handleOnConfirm = jest.fn();
|
||||||
|
const handleOnCloseModal = jest.fn();
|
||||||
|
let wrapper: RenderResult | null = null;
|
||||||
|
|
||||||
const wrapper = renderer.create(
|
beforeEach(() => {
|
||||||
<ConfirmMessage
|
wrapper = render(
|
||||||
message={message}
|
<ConfirmMessage
|
||||||
onConfirm={handleOnConfirm}
|
message={message}
|
||||||
/>
|
onConfirm={handleOnConfirm}
|
||||||
);
|
onCloseModal={handleOnCloseModal}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
test('Should render correctly', () => {
|
test('Should render correctly', () => {
|
||||||
expect(wrapper).toMatchSnapshot();
|
expect(wrapper).toMatchSnapshot();
|
||||||
});
|
});
|
||||||
|
|
||||||
|
test('handleOnConfirm should be call', () => {
|
||||||
|
const confirmBtn = wrapper!.getByText('Yes');
|
||||||
|
|
||||||
|
fireEvent.click(confirmBtn);
|
||||||
|
|
||||||
|
expect(handleOnConfirm).toHaveBeenCalled();
|
||||||
|
expect(handleOnCloseModal).toHaveBeenCalled();
|
||||||
|
});
|
||||||
});
|
});
|
||||||
|
|||||||
+102
-24
@@ -1,28 +1,106 @@
|
|||||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||||
|
|
||||||
exports[`ConfirmMessage Should render correctly 1`] = `
|
exports[`ConfirmMessage testing snapshot Should render correctly 1`] = `
|
||||||
<div
|
{
|
||||||
className="sc-bdnyFh dukbvo"
|
"asFragment": [Function],
|
||||||
>
|
"baseElement": <body>
|
||||||
<p>
|
<div>
|
||||||
Hello World!
|
<div
|
||||||
</p>
|
class="sc-bdnyFh jIONew"
|
||||||
<div>
|
>
|
||||||
<button
|
<p>
|
||||||
className="sc-gtsqUy eZzwwl"
|
Hello World!
|
||||||
disabled={true}
|
</p>
|
||||||
onClick={[MockFunction]}
|
<div>
|
||||||
variations="danger"
|
<button
|
||||||
|
class="sc-gtsqUy hSoKBM"
|
||||||
|
variations="danger"
|
||||||
|
>
|
||||||
|
Yes
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
class="sc-gtsqUy hesuRJ"
|
||||||
|
variations="secondary"
|
||||||
|
>
|
||||||
|
No
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</body>,
|
||||||
|
"container": <div>
|
||||||
|
<div
|
||||||
|
class="sc-bdnyFh jIONew"
|
||||||
>
|
>
|
||||||
Delete
|
<p>
|
||||||
</button>
|
Hello World!
|
||||||
<button
|
</p>
|
||||||
className="sc-gtsqUy JDRgw"
|
<div>
|
||||||
disabled={true}
|
<button
|
||||||
variations="secondary"
|
class="sc-gtsqUy hSoKBM"
|
||||||
>
|
variations="danger"
|
||||||
Cancel
|
>
|
||||||
</button>
|
Yes
|
||||||
</div>
|
</button>
|
||||||
</div>
|
<button
|
||||||
|
class="sc-gtsqUy hesuRJ"
|
||||||
|
variations="secondary"
|
||||||
|
>
|
||||||
|
No
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</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],
|
||||||
|
}
|
||||||
`;
|
`;
|
||||||
|
|||||||
@@ -2,56 +2,58 @@
|
|||||||
|
|
||||||
exports[`Form Should render correctly 1`] = `
|
exports[`Form Should render correctly 1`] = `
|
||||||
<form
|
<form
|
||||||
className="sc-bdnyFh bzxSLR"
|
className="sc-gtsqUy jMGskL"
|
||||||
onSubmit={[MockFunction]}
|
onSubmit={[MockFunction]}
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
className="sc-dlniIP gZHESL"
|
className="sc-hKFymg ivIEWo"
|
||||||
|
direction="horizontal"
|
||||||
>
|
>
|
||||||
<label
|
<label
|
||||||
className="sc-hKFymg ddFGOI"
|
className="sc-eCAqax dnXnhF"
|
||||||
>
|
>
|
||||||
Name
|
Name
|
||||||
</label>
|
</label>
|
||||||
<div>
|
<div>
|
||||||
<input
|
<input
|
||||||
className="sc-jSFipO enjwJE"
|
className="sc-iCoHzw csWeiH"
|
||||||
id="name"
|
id="name"
|
||||||
type="text"
|
type="text"
|
||||||
/>
|
/>
|
||||||
<p
|
<p
|
||||||
className="sc-eCAqax bvOWPP"
|
className="sc-jSFipO iOcxfq"
|
||||||
>
|
>
|
||||||
This is error message
|
This is error message
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
className="sc-dlniIP gZHESL"
|
className="sc-hKFymg ivIEWo"
|
||||||
|
direction="horizontal"
|
||||||
>
|
>
|
||||||
<label
|
<label
|
||||||
className="sc-hKFymg ddFGOI"
|
className="sc-eCAqax dnXnhF"
|
||||||
>
|
>
|
||||||
Price
|
Price
|
||||||
</label>
|
</label>
|
||||||
<div>
|
<div>
|
||||||
<input
|
<input
|
||||||
className="sc-jSFipO enjwJE"
|
className="sc-iCoHzw csWeiH"
|
||||||
id="price"
|
id="price"
|
||||||
type="text"
|
type="text"
|
||||||
/>
|
/>
|
||||||
<p
|
<p
|
||||||
className="sc-eCAqax bvOWPP"
|
className="sc-jSFipO iOcxfq"
|
||||||
>
|
>
|
||||||
This is error message
|
This is error message
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
className="sc-gtsqUy idhRSV"
|
className="sc-dlniIP hBqqvG"
|
||||||
>
|
>
|
||||||
<button
|
<button
|
||||||
className="sc-gKAaef sc-jrsKJM gifCOZ KLoQf"
|
className="sc-bdnyFh sc-gKAaef bEtbaY fRlVwz"
|
||||||
disabled={true}
|
disabled={true}
|
||||||
name="submit"
|
name="submit"
|
||||||
type="submit"
|
type="submit"
|
||||||
@@ -60,7 +62,7 @@ exports[`Form Should render correctly 1`] = `
|
|||||||
Confirm
|
Confirm
|
||||||
</button>
|
</button>
|
||||||
<button
|
<button
|
||||||
className="sc-gKAaef sc-jrsKJM gbgZUe KLoQf"
|
className="sc-bdnyFh sc-gKAaef buXbPz fRlVwz"
|
||||||
onClick={[MockFunction]}
|
onClick={[MockFunction]}
|
||||||
type="button"
|
type="button"
|
||||||
variations="secondary"
|
variations="secondary"
|
||||||
|
|||||||
@@ -2,9 +2,19 @@ import renderer from 'react-test-renderer';
|
|||||||
|
|
||||||
// Components
|
// Components
|
||||||
import Header from '.';
|
import Header from '.';
|
||||||
|
import { BrowserRouter } from 'react-router-dom';
|
||||||
|
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
|
||||||
|
|
||||||
describe('Header', () => {
|
describe('Header', () => {
|
||||||
const wrapper = renderer.create(<Header accountName="Nezumi" />);
|
const queryClient = new QueryClient();
|
||||||
|
|
||||||
|
const wrapper = renderer.create(
|
||||||
|
<QueryClientProvider client={queryClient}>
|
||||||
|
<BrowserRouter>
|
||||||
|
<Header accountName="Nezumi" />
|
||||||
|
</BrowserRouter>
|
||||||
|
</QueryClientProvider>
|
||||||
|
);
|
||||||
|
|
||||||
test('Should render correctly', () => {
|
test('Should render correctly', () => {
|
||||||
expect(wrapper).toMatchSnapshot();
|
expect(wrapper).toMatchSnapshot();
|
||||||
|
|||||||
@@ -21,6 +21,7 @@ exports[`Header Should render correctly 1`] = `
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
isHaveChildren={false}
|
isHaveChildren={false}
|
||||||
|
onClick={[Function]}
|
||||||
style={
|
style={
|
||||||
{
|
{
|
||||||
"backgroundColor": undefined,
|
"backgroundColor": undefined,
|
||||||
@@ -57,12 +58,14 @@ exports[`Header Should render correctly 1`] = `
|
|||||||
<li>
|
<li>
|
||||||
<button
|
<button
|
||||||
className="sc-bdnyFh bxHnoO"
|
className="sc-bdnyFh bxHnoO"
|
||||||
|
disabled={false}
|
||||||
iconStyle={
|
iconStyle={
|
||||||
{
|
{
|
||||||
"size": "23px",
|
"size": "23px",
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
isHaveChildren={false}
|
isHaveChildren={false}
|
||||||
|
onClick={[Function]}
|
||||||
style={
|
style={
|
||||||
{
|
{
|
||||||
"backgroundColor": undefined,
|
"backgroundColor": undefined,
|
||||||
|
|||||||
@@ -2,9 +2,19 @@ import renderer from 'react-test-renderer';
|
|||||||
|
|
||||||
// Components
|
// Components
|
||||||
import HeaderMenu from '.';
|
import HeaderMenu from '.';
|
||||||
|
import { BrowserRouter } from 'react-router-dom';
|
||||||
|
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
|
||||||
|
|
||||||
describe('HeaderMenu', () => {
|
describe('HeaderMenu', () => {
|
||||||
const wrapper = renderer.create(<HeaderMenu />);
|
const queryClient = new QueryClient();
|
||||||
|
|
||||||
|
const wrapper = renderer.create(
|
||||||
|
<QueryClientProvider client={queryClient}>
|
||||||
|
<BrowserRouter>
|
||||||
|
<HeaderMenu />
|
||||||
|
</BrowserRouter>
|
||||||
|
</QueryClientProvider>
|
||||||
|
);
|
||||||
|
|
||||||
test('Should render correctly', () => {
|
test('Should render correctly', () => {
|
||||||
expect(wrapper).toMatchSnapshot();
|
expect(wrapper).toMatchSnapshot();
|
||||||
|
|||||||
@@ -13,6 +13,7 @@ exports[`HeaderMenu Should render correctly 1`] = `
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
isHaveChildren={false}
|
isHaveChildren={false}
|
||||||
|
onClick={[Function]}
|
||||||
style={
|
style={
|
||||||
{
|
{
|
||||||
"backgroundColor": undefined,
|
"backgroundColor": undefined,
|
||||||
@@ -49,12 +50,14 @@ exports[`HeaderMenu Should render correctly 1`] = `
|
|||||||
<li>
|
<li>
|
||||||
<button
|
<button
|
||||||
className="sc-bdnyFh bxHnoO"
|
className="sc-bdnyFh bxHnoO"
|
||||||
|
disabled={false}
|
||||||
iconStyle={
|
iconStyle={
|
||||||
{
|
{
|
||||||
"size": "23px",
|
"size": "23px",
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
isHaveChildren={false}
|
isHaveChildren={false}
|
||||||
|
onClick={[Function]}
|
||||||
style={
|
style={
|
||||||
{
|
{
|
||||||
"backgroundColor": undefined,
|
"backgroundColor": undefined,
|
||||||
|
|||||||
@@ -1,31 +1,60 @@
|
|||||||
import renderer from 'react-test-renderer';
|
|
||||||
|
|
||||||
// Components
|
// Components
|
||||||
import Menus from '.';
|
import Menus from '.';
|
||||||
import { RiEditBoxFill, RiDeleteBin2Line } from 'react-icons/ri';
|
import { RiEditBoxFill, RiDeleteBin2Line } from 'react-icons/ri';
|
||||||
|
import { RenderResult, fireEvent, render } from '@testing-library/react';
|
||||||
|
|
||||||
describe('Menus', () => {
|
describe('Menus', () => {
|
||||||
const id = '123';
|
const id = '123';
|
||||||
const handleOnClick = jest.fn();
|
const handleOnClick = jest.fn();
|
||||||
|
|
||||||
const wrapper = renderer.create(
|
let wrapper: RenderResult | null = null;
|
||||||
<Menus>
|
|
||||||
<Menus.Menu>
|
|
||||||
<Menus.Toggle id={id} />
|
|
||||||
|
|
||||||
<Menus.List id={id.toString()}>
|
beforeEach(() => {
|
||||||
<Menus.Button onClick={handleOnClick} icon={<RiEditBoxFill />}>
|
wrapper = render(
|
||||||
Edit
|
<Menus>
|
||||||
</Menus.Button>
|
<Menus.Menu>
|
||||||
<Menus.Button onClick={handleOnClick} icon={<RiDeleteBin2Line />}>
|
<Menus.Toggle id={id} />
|
||||||
Delete
|
|
||||||
</Menus.Button>
|
|
||||||
</Menus.List>
|
|
||||||
</Menus.Menu>
|
|
||||||
</Menus>
|
|
||||||
);
|
|
||||||
|
|
||||||
test('Should render correctly', () => {
|
<Menus.List id={id.toString()}>
|
||||||
|
<Menus.Button onClick={handleOnClick} icon={<RiEditBoxFill />}>
|
||||||
|
Edit
|
||||||
|
</Menus.Button>
|
||||||
|
<Menus.Button onClick={handleOnClick} icon={<RiDeleteBin2Line />}>
|
||||||
|
Delete
|
||||||
|
</Menus.Button>
|
||||||
|
</Menus.List>
|
||||||
|
</Menus.Menu>
|
||||||
|
</Menus>
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
|
test('Should render correctly', async () => {
|
||||||
expect(wrapper).toMatchSnapshot();
|
expect(wrapper).toMatchSnapshot();
|
||||||
});
|
});
|
||||||
|
|
||||||
|
test('Should show context menu', async () => {
|
||||||
|
const btn = await wrapper!.findByRole('button');
|
||||||
|
|
||||||
|
fireEvent.click(btn);
|
||||||
|
|
||||||
|
const editBtn = wrapper!.getByText('Edit');
|
||||||
|
|
||||||
|
expect(editBtn).toBeInTheDocument();
|
||||||
|
|
||||||
|
fireEvent.click(btn);
|
||||||
|
|
||||||
|
expect(editBtn).not.toBeInTheDocument();
|
||||||
|
});
|
||||||
|
|
||||||
|
test('HandleOnClick should work', async () => {
|
||||||
|
const btn = await wrapper!.findByRole('button');
|
||||||
|
|
||||||
|
fireEvent.click(btn);
|
||||||
|
|
||||||
|
const editBtn = wrapper!.getByText('Edit');
|
||||||
|
|
||||||
|
fireEvent.click(editBtn);
|
||||||
|
|
||||||
|
expect(handleOnClick).toHaveBeenCalled();
|
||||||
|
});
|
||||||
});
|
});
|
||||||
|
|||||||
@@ -1,35 +1,114 @@
|
|||||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||||
|
|
||||||
exports[`Menus Should render correctly 1`] = `
|
exports[`Menus Should render correctly 1`] = `
|
||||||
<div
|
{
|
||||||
className="sc-gtsqUy lbsvcs"
|
"asFragment": [Function],
|
||||||
>
|
"baseElement": <body>
|
||||||
<button
|
<div>
|
||||||
aria-label="Menu item 123"
|
<div
|
||||||
className="sc-hKFymg cjUckY"
|
class="sc-gtsqUy lbsvcs"
|
||||||
onClick={[Function]}
|
>
|
||||||
>
|
<button
|
||||||
<svg
|
aria-label="Menu item 123"
|
||||||
aria-hidden="true"
|
class="sc-hKFymg cjUckY"
|
||||||
fill="currentColor"
|
>
|
||||||
height="1em"
|
<svg
|
||||||
stroke="currentColor"
|
aria-hidden="true"
|
||||||
strokeWidth="0"
|
fill="currentColor"
|
||||||
style={
|
height="1em"
|
||||||
{
|
stroke="currentColor"
|
||||||
"color": undefined,
|
stroke-width="0"
|
||||||
}
|
viewBox="0 0 24 24"
|
||||||
}
|
width="1em"
|
||||||
viewBox="0 0 24 24"
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
width="1em"
|
>
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
<path
|
||||||
|
clip-rule="evenodd"
|
||||||
|
d="M10.5 6a1.5 1.5 0 113 0 1.5 1.5 0 01-3 0zm0 6a1.5 1.5 0 113 0 1.5 1.5 0 01-3 0zm0 6a1.5 1.5 0 113 0 1.5 1.5 0 01-3 0z"
|
||||||
|
fill-rule="evenodd"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</body>,
|
||||||
|
"container": <div>
|
||||||
|
<div
|
||||||
|
class="sc-gtsqUy lbsvcs"
|
||||||
>
|
>
|
||||||
<path
|
<button
|
||||||
clipRule="evenodd"
|
aria-label="Menu item 123"
|
||||||
d="M10.5 6a1.5 1.5 0 113 0 1.5 1.5 0 01-3 0zm0 6a1.5 1.5 0 113 0 1.5 1.5 0 01-3 0zm0 6a1.5 1.5 0 113 0 1.5 1.5 0 01-3 0z"
|
class="sc-hKFymg cjUckY"
|
||||||
fillRule="evenodd"
|
>
|
||||||
/>
|
<svg
|
||||||
</svg>
|
aria-hidden="true"
|
||||||
</button>
|
fill="currentColor"
|
||||||
</div>
|
height="1em"
|
||||||
|
stroke="currentColor"
|
||||||
|
stroke-width="0"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
width="1em"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
clip-rule="evenodd"
|
||||||
|
d="M10.5 6a1.5 1.5 0 113 0 1.5 1.5 0 01-3 0zm0 6a1.5 1.5 0 113 0 1.5 1.5 0 01-3 0zm0 6a1.5 1.5 0 113 0 1.5 1.5 0 01-3 0z"
|
||||||
|
fill-rule="evenodd"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</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],
|
||||||
|
}
|
||||||
`;
|
`;
|
||||||
|
|||||||
@@ -2,7 +2,7 @@
|
|||||||
|
|
||||||
exports[`Modal Should render correctly 1`] = `
|
exports[`Modal Should render correctly 1`] = `
|
||||||
<button
|
<button
|
||||||
className="sc-eCAqax jeAcqZ"
|
className="sc-eCAqax iNUTro"
|
||||||
onClick={[Function]}
|
onClick={[Function]}
|
||||||
variations="primary"
|
variations="primary"
|
||||||
>
|
>
|
||||||
|
|||||||
@@ -6,7 +6,7 @@ exports[`Nav Should render correctly 1`] = `
|
|||||||
>
|
>
|
||||||
<a
|
<a
|
||||||
className="sc-gtsqUy gbSQWi"
|
className="sc-gtsqUy gbSQWi"
|
||||||
href="/dashboard"
|
href="/booking"
|
||||||
onClick={[Function]}
|
onClick={[Function]}
|
||||||
>
|
>
|
||||||
<svg
|
<svg
|
||||||
@@ -24,15 +24,11 @@ exports[`Nav Should render correctly 1`] = `
|
|||||||
xmlns="http://www.w3.org/2000/svg"
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
>
|
>
|
||||||
<path
|
<path
|
||||||
d="M0 0h24v24H0z"
|
d="M5 22h14c1.103 0 2-.897 2-2V6c0-1.103-.897-2-2-2h-2V2h-2v2H9V2H7v2H5c-1.103 0-2 .897-2 2v14c0 1.103.897 2 2 2zM5 7h14v2H5V7z"
|
||||||
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>
|
</svg>
|
||||||
<span>
|
<span>
|
||||||
Dashboard
|
Booking
|
||||||
</span>
|
</span>
|
||||||
</a>
|
</a>
|
||||||
<a
|
<a
|
||||||
|
|||||||
@@ -1,28 +0,0 @@
|
|||||||
import renderer from 'react-test-renderer';
|
|
||||||
import { BrowserRouter } from 'react-router-dom';
|
|
||||||
|
|
||||||
// Components
|
|
||||||
import Order from '.';
|
|
||||||
|
|
||||||
describe('Order', () => {
|
|
||||||
const options = [
|
|
||||||
{
|
|
||||||
value: 'Value 1',
|
|
||||||
label: 'Option 1',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
value: 'Value 2',
|
|
||||||
label: 'Option 2',
|
|
||||||
},
|
|
||||||
];
|
|
||||||
|
|
||||||
const wrapper = renderer.create(
|
|
||||||
<BrowserRouter>
|
|
||||||
<Order options={options} />
|
|
||||||
</BrowserRouter>
|
|
||||||
);
|
|
||||||
|
|
||||||
test('Should render correctly', () => {
|
|
||||||
expect(wrapper).toMatchSnapshot();
|
|
||||||
});
|
|
||||||
});
|
|
||||||
@@ -0,0 +1,56 @@
|
|||||||
|
import { useState } from 'react';
|
||||||
|
import { RenderResult, fireEvent, render } from '@testing-library/react';
|
||||||
|
import { MemoryRouter } from 'react-router-dom';
|
||||||
|
|
||||||
|
// Components
|
||||||
|
import OrderBy from '.';
|
||||||
|
|
||||||
|
let mockSearchParam = '';
|
||||||
|
|
||||||
|
jest.mock('react-router-dom', () => ({
|
||||||
|
...jest.requireActual('react-router-dom'),
|
||||||
|
useSearchParams: () => {
|
||||||
|
const [params, setParams] = useState(new URLSearchParams(mockSearchParam));
|
||||||
|
return [
|
||||||
|
params,
|
||||||
|
(newParams: string) => {
|
||||||
|
mockSearchParam = newParams;
|
||||||
|
setParams(new URLSearchParams(newParams));
|
||||||
|
},
|
||||||
|
];
|
||||||
|
},
|
||||||
|
}));
|
||||||
|
|
||||||
|
describe('Order', () => {
|
||||||
|
const options = [
|
||||||
|
{
|
||||||
|
value: 'value1',
|
||||||
|
label: 'Option 1',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: 'value2',
|
||||||
|
label: 'Option 2',
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
let wrapper: RenderResult | null = null;
|
||||||
|
|
||||||
|
beforeEach(() => {
|
||||||
|
wrapper = render(
|
||||||
|
<MemoryRouter>
|
||||||
|
<OrderBy options={options} />
|
||||||
|
</MemoryRouter>
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
|
test('Should render correctly', () => {
|
||||||
|
expect(wrapper).toMatchSnapshot();
|
||||||
|
});
|
||||||
|
|
||||||
|
test('handleClick should work correctly', async () => {
|
||||||
|
const nameButton = wrapper!.getByText('Option 2');
|
||||||
|
fireEvent.click(nameButton);
|
||||||
|
|
||||||
|
expect(mockSearchParam.toString()).toEqual('orderBy=value2');
|
||||||
|
});
|
||||||
|
});
|
||||||
@@ -1,24 +0,0 @@
|
|||||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
|
||||||
|
|
||||||
exports[`Order Should render correctly 1`] = `
|
|
||||||
<div
|
|
||||||
className="sc-bdnyFh aZFGz"
|
|
||||||
>
|
|
||||||
<button
|
|
||||||
active={true}
|
|
||||||
className="sc-gtsqUy fohQqJ"
|
|
||||||
disabled={true}
|
|
||||||
onClick={[Function]}
|
|
||||||
>
|
|
||||||
Option 1
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
active={false}
|
|
||||||
className="sc-gtsqUy bwnpRq"
|
|
||||||
disabled={false}
|
|
||||||
onClick={[Function]}
|
|
||||||
>
|
|
||||||
Option 2
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
`;
|
|
||||||
@@ -0,0 +1,94 @@
|
|||||||
|
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||||
|
|
||||||
|
exports[`Order Should render correctly 1`] = `
|
||||||
|
{
|
||||||
|
"asFragment": [Function],
|
||||||
|
"baseElement": <body>
|
||||||
|
<div>
|
||||||
|
<div
|
||||||
|
class="sc-bdnyFh aZFGz"
|
||||||
|
>
|
||||||
|
<button
|
||||||
|
class="sc-gtsqUy bOTmZQ"
|
||||||
|
disabled=""
|
||||||
|
>
|
||||||
|
Option 1
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
class="sc-gtsqUy bwnpRq"
|
||||||
|
>
|
||||||
|
Option 2
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</body>,
|
||||||
|
"container": <div>
|
||||||
|
<div
|
||||||
|
class="sc-bdnyFh aZFGz"
|
||||||
|
>
|
||||||
|
<button
|
||||||
|
class="sc-gtsqUy bOTmZQ"
|
||||||
|
disabled=""
|
||||||
|
>
|
||||||
|
Option 1
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
class="sc-gtsqUy bwnpRq"
|
||||||
|
>
|
||||||
|
Option 2
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</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,18 +1,67 @@
|
|||||||
import renderer from 'react-test-renderer';
|
|
||||||
import { BrowserRouter } from 'react-router-dom';
|
import { BrowserRouter } from 'react-router-dom';
|
||||||
|
import { useState } from 'react';
|
||||||
|
|
||||||
// Components
|
// Components
|
||||||
import Search from '.';
|
import Search from '.';
|
||||||
|
import {
|
||||||
|
RenderResult,
|
||||||
|
fireEvent,
|
||||||
|
render,
|
||||||
|
act,
|
||||||
|
} from '@testing-library/react';
|
||||||
|
|
||||||
|
let mockSearchParam = '';
|
||||||
|
|
||||||
|
jest.useFakeTimers();
|
||||||
|
jest.mock('react-router-dom', () => ({
|
||||||
|
...jest.requireActual('react-router-dom'),
|
||||||
|
useSearchParams: () => {
|
||||||
|
const [params, setParams] = useState(new URLSearchParams(mockSearchParam));
|
||||||
|
return [
|
||||||
|
params,
|
||||||
|
(newParams: string) => {
|
||||||
|
mockSearchParam = newParams;
|
||||||
|
setParams(new URLSearchParams(newParams));
|
||||||
|
},
|
||||||
|
];
|
||||||
|
},
|
||||||
|
}));
|
||||||
|
|
||||||
describe('Search', () => {
|
describe('Search', () => {
|
||||||
const placeHolder = 'Search placeholder...';
|
// const placeHolder = 'Search placeholder...';
|
||||||
const wrapper = renderer.create(
|
// let wrapper: RenderResult | null = null;
|
||||||
<BrowserRouter>
|
|
||||||
<Search setPlaceHolder={placeHolder} />
|
|
||||||
</BrowserRouter>
|
|
||||||
);
|
|
||||||
|
|
||||||
test('Should render correctly', () => {
|
// beforeEach(() => {
|
||||||
expect(wrapper).toMatchSnapshot();
|
// wrapper = render(
|
||||||
|
// <BrowserRouter>
|
||||||
|
// <Search setPlaceHolder={placeHolder} />
|
||||||
|
// </BrowserRouter>
|
||||||
|
// );
|
||||||
|
// });
|
||||||
|
|
||||||
|
// test('Should render correctly', () => {
|
||||||
|
// expect(wrapper).toMatchSnapshot();
|
||||||
|
// });
|
||||||
|
|
||||||
|
test('Should add query to url after 1 second', async () => {
|
||||||
|
let wrapper: RenderResult | null = null;
|
||||||
|
act(() => {
|
||||||
|
wrapper = render(
|
||||||
|
<BrowserRouter>
|
||||||
|
<Search setPlaceHolder={'Search placeholder...'} />
|
||||||
|
</BrowserRouter>
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
|
const searchField = await wrapper!.findByPlaceholderText(
|
||||||
|
'Search placeholder...'
|
||||||
|
);
|
||||||
|
|
||||||
|
act(() => {
|
||||||
|
fireEvent.change(searchField, { target: { value: 'abc' } });
|
||||||
|
});
|
||||||
|
|
||||||
|
// jest.advanceTimersByTime(1000);
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
@@ -1,9 +0,0 @@
|
|||||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
|
||||||
|
|
||||||
exports[`Search Should render correctly 1`] = `
|
|
||||||
<input
|
|
||||||
className="sc-bdnyFh eAgOPb"
|
|
||||||
onChange={[Function]}
|
|
||||||
placeholder="Search placeholder..."
|
|
||||||
/>
|
|
||||||
`;
|
|
||||||
@@ -3,16 +3,19 @@
|
|||||||
exports[`Select Should render correctly 1`] = `
|
exports[`Select Should render correctly 1`] = `
|
||||||
<select
|
<select
|
||||||
aria-label="Sort"
|
aria-label="Sort"
|
||||||
className="sc-bdnyFh dqXTRP"
|
className="sc-bdnyFh hPOEsG"
|
||||||
|
disabled={false}
|
||||||
onChange={[MockFunction]}
|
onChange={[MockFunction]}
|
||||||
value="Temp value"
|
value="Temp value"
|
||||||
>
|
>
|
||||||
<option
|
<option
|
||||||
|
data-testid="select-option"
|
||||||
value="Value 1"
|
value="Value 1"
|
||||||
>
|
>
|
||||||
Option 1
|
Option 1
|
||||||
</option>
|
</option>
|
||||||
<option
|
<option
|
||||||
|
data-testid="select-option"
|
||||||
value="Value 2"
|
value="Value 2"
|
||||||
>
|
>
|
||||||
Option 2
|
Option 2
|
||||||
|
|||||||
@@ -46,7 +46,7 @@ const Select = ({
|
|||||||
: { onChange: onChange })}
|
: { onChange: onChange })}
|
||||||
>
|
>
|
||||||
{options.map((option) => (
|
{options.map((option) => (
|
||||||
<option value={option.value} key={option.value}>
|
<option value={option.value} key={option.value} data-testid='select-option'>
|
||||||
{option.label}
|
{option.label}
|
||||||
</option>
|
</option>
|
||||||
))}
|
))}
|
||||||
|
|||||||
@@ -5,7 +5,8 @@ exports[`Sidebar Should render correctly 1`] = `
|
|||||||
className="sc-dlniIP dfcuiS"
|
className="sc-dlniIP dfcuiS"
|
||||||
>
|
>
|
||||||
<h1
|
<h1
|
||||||
className="sc-hKFymg iQEJzQ"
|
className="sc-hKFymg OpLao"
|
||||||
|
onClick={[Function]}
|
||||||
>
|
>
|
||||||
Hotel Management
|
Hotel Management
|
||||||
</h1>
|
</h1>
|
||||||
@@ -14,7 +15,7 @@ exports[`Sidebar Should render correctly 1`] = `
|
|||||||
>
|
>
|
||||||
<a
|
<a
|
||||||
className="sc-gtsqUy gbSQWi"
|
className="sc-gtsqUy gbSQWi"
|
||||||
href="/dashboard"
|
href="/booking"
|
||||||
onClick={[Function]}
|
onClick={[Function]}
|
||||||
>
|
>
|
||||||
<svg
|
<svg
|
||||||
@@ -32,15 +33,11 @@ exports[`Sidebar Should render correctly 1`] = `
|
|||||||
xmlns="http://www.w3.org/2000/svg"
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
>
|
>
|
||||||
<path
|
<path
|
||||||
d="M0 0h24v24H0z"
|
d="M5 22h14c1.103 0 2-.897 2-2V6c0-1.103-.897-2-2-2h-2V2h-2v2H9V2H7v2H5c-1.103 0-2 .897-2 2v14c0 1.103.897 2 2 2zM5 7h14v2H5V7z"
|
||||||
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>
|
</svg>
|
||||||
<span>
|
<span>
|
||||||
Dashboard
|
Booking
|
||||||
</span>
|
</span>
|
||||||
</a>
|
</a>
|
||||||
<a
|
<a
|
||||||
|
|||||||
@@ -1,27 +1,54 @@
|
|||||||
import renderer from 'react-test-renderer';
|
|
||||||
import { BrowserRouter } from 'react-router-dom';
|
import { BrowserRouter } from 'react-router-dom';
|
||||||
|
import { useState } from 'react';
|
||||||
|
import { render, fireEvent, RenderResult } from '@testing-library/react';
|
||||||
// Components
|
// Components
|
||||||
import SortBy from '.';
|
import SortBy from '.';
|
||||||
|
|
||||||
|
let mockSearchParam = '';
|
||||||
|
jest.mock('react-router-dom', () => ({
|
||||||
|
...jest.requireActual('react-router-dom'),
|
||||||
|
useSearchParams: () => {
|
||||||
|
const [params, setParams] = useState(new URLSearchParams(mockSearchParam));
|
||||||
|
return [
|
||||||
|
params,
|
||||||
|
(newParams: string) => {
|
||||||
|
mockSearchParam = newParams;
|
||||||
|
setParams(new URLSearchParams(newParams));
|
||||||
|
},
|
||||||
|
];
|
||||||
|
},
|
||||||
|
}));
|
||||||
|
|
||||||
describe('SortBy', () => {
|
describe('SortBy', () => {
|
||||||
const options = [
|
const options = [
|
||||||
{
|
{
|
||||||
label: 'Option 1',
|
label: 'Option 1',
|
||||||
value: 'Value 1',
|
value: 'Value1',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label: 'Option 2',
|
label: 'Option 2',
|
||||||
value: 'Value 2',
|
value: 'Value2',
|
||||||
},
|
},
|
||||||
];
|
];
|
||||||
const wrapper = renderer.create(
|
let wrapper: RenderResult | null = null;
|
||||||
<BrowserRouter>
|
|
||||||
<SortBy options={options} />
|
beforeEach(() => {
|
||||||
</BrowserRouter>
|
wrapper = render(
|
||||||
);
|
<BrowserRouter>
|
||||||
|
<SortBy options={options} />
|
||||||
|
</BrowserRouter>
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
test('Should render correctly', () => {
|
test('Should render correctly', () => {
|
||||||
expect(wrapper).toMatchSnapshot();
|
expect(wrapper).toMatchSnapshot();
|
||||||
});
|
});
|
||||||
|
|
||||||
|
test('handleClick should work correctly', () => {
|
||||||
|
const select = wrapper!.getByLabelText('Sort') as HTMLSelectElement;
|
||||||
|
|
||||||
|
fireEvent.change(select, { target: { value: 'Value2' } });
|
||||||
|
|
||||||
|
expect(mockSearchParam.toString()).toEqual('sortBy=Value2');
|
||||||
|
});
|
||||||
});
|
});
|
||||||
|
|||||||
@@ -1,21 +1,98 @@
|
|||||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||||
|
|
||||||
exports[`SortBy Should render correctly 1`] = `
|
exports[`SortBy Should render correctly 1`] = `
|
||||||
<select
|
{
|
||||||
aria-label="Sort"
|
"asFragment": [Function],
|
||||||
className="sc-bdnyFh dqXTRP"
|
"baseElement": <body>
|
||||||
onChange={[Function]}
|
<div>
|
||||||
value=""
|
<select
|
||||||
>
|
aria-label="Sort"
|
||||||
<option
|
class="sc-bdnyFh hPOEsG"
|
||||||
value="Value 1"
|
>
|
||||||
>
|
<option
|
||||||
Option 1
|
data-testid="select-option"
|
||||||
</option>
|
value="Value1"
|
||||||
<option
|
>
|
||||||
value="Value 2"
|
Option 1
|
||||||
>
|
</option>
|
||||||
Option 2
|
<option
|
||||||
</option>
|
data-testid="select-option"
|
||||||
</select>
|
value="Value2"
|
||||||
|
>
|
||||||
|
Option 2
|
||||||
|
</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
</body>,
|
||||||
|
"container": <div>
|
||||||
|
<select
|
||||||
|
aria-label="Sort"
|
||||||
|
class="sc-bdnyFh hPOEsG"
|
||||||
|
>
|
||||||
|
<option
|
||||||
|
data-testid="select-option"
|
||||||
|
value="Value1"
|
||||||
|
>
|
||||||
|
Option 1
|
||||||
|
</option>
|
||||||
|
<option
|
||||||
|
data-testid="select-option"
|
||||||
|
value="Value2"
|
||||||
|
>
|
||||||
|
Option 2
|
||||||
|
</option>
|
||||||
|
</select>
|
||||||
|
</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],
|
||||||
|
}
|
||||||
`;
|
`;
|
||||||
|
|||||||
@@ -53,7 +53,7 @@ const FORM = {
|
|||||||
};
|
};
|
||||||
|
|
||||||
const REGEX = {
|
const REGEX = {
|
||||||
PHONE: /(84|0[3|5|7|8|9])+([0-9]{8})\b/g,
|
PHONE: /(0[3|5|7|8|9])+([0-9]{8})\b/g,
|
||||||
NAME: /^[a-zA-Z]{2,}(?: [a-zA-Z]+){0,2}$/gm,
|
NAME: /^[a-zA-Z]{2,}(?: [a-zA-Z]+){0,2}$/gm,
|
||||||
NUMBER: /^[0-9]*$/,
|
NUMBER: /^[0-9]*$/,
|
||||||
PASSWORD: /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[#$@!%&*?])[A-Za-z\d#$@!%&*?]{8,16}$/
|
PASSWORD: /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[#$@!%&*?])[A-Za-z\d#$@!%&*?]{8,16}$/
|
||||||
|
|||||||
@@ -0,0 +1,129 @@
|
|||||||
|
import { reducer } from '@context/UserRoomAvailableContext';
|
||||||
|
import { IDataState } from '@type/common';
|
||||||
|
|
||||||
|
jest.mock('@service/userServices');
|
||||||
|
jest.mock('@service/roomServices');
|
||||||
|
|
||||||
|
describe('userRoomAvailableContext', () => {
|
||||||
|
let initialState: {
|
||||||
|
roomsAvailable: IDataState[];
|
||||||
|
usersAvailable: IDataState[];
|
||||||
|
};
|
||||||
|
|
||||||
|
const sampleRooms = [
|
||||||
|
{
|
||||||
|
id: 2,
|
||||||
|
name: 'Room 2',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 3,
|
||||||
|
name: 'Room 3',
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
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'
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
@@ -0,0 +1,10 @@
|
|||||||
|
// Helpers
|
||||||
|
import { formatCurrency } from '@helper/helper';
|
||||||
|
|
||||||
|
describe('formatCurrency', () => {
|
||||||
|
test('Should format correctly', () => {
|
||||||
|
const result = formatCurrency(5000);
|
||||||
|
|
||||||
|
expect(result).toEqual('$5,000.00');
|
||||||
|
});
|
||||||
|
});
|
||||||
@@ -0,0 +1,90 @@
|
|||||||
|
// Constants
|
||||||
|
import { REGEX } from '@constant/commons';
|
||||||
|
|
||||||
|
// Helpers
|
||||||
|
import {
|
||||||
|
isValidDiscount,
|
||||||
|
isValidRegex,
|
||||||
|
isValidString,
|
||||||
|
} from '@helper/validators';
|
||||||
|
|
||||||
|
describe('isValidPhone', () => {
|
||||||
|
const isValidPhone = (phone: string) =>
|
||||||
|
isValidRegex(new RegExp(REGEX.PHONE), phone);
|
||||||
|
|
||||||
|
test('Should is valid phone', () => {
|
||||||
|
const case_1 = isValidPhone('0321123212');
|
||||||
|
const case_2 = isValidPhone('0533245422');
|
||||||
|
const case_3 = isValidPhone('0723342321');
|
||||||
|
const case_4 = isValidPhone('0823654321');
|
||||||
|
const case_5 = isValidPhone('0943212343');
|
||||||
|
|
||||||
|
expect(case_1).toBeTruthy();
|
||||||
|
expect(case_2).toBeTruthy();
|
||||||
|
expect(case_3).toBeTruthy();
|
||||||
|
expect(case_4).toBeTruthy();
|
||||||
|
expect(case_5).toBeTruthy();
|
||||||
|
});
|
||||||
|
|
||||||
|
test('Should is not valid phone', () => {
|
||||||
|
const case_1 = isValidPhone('0327212321Abc');
|
||||||
|
const case_2 = isValidPhone('0021432123');
|
||||||
|
const case_3 = isValidPhone('@325542321');
|
||||||
|
const case_4 = isValidPhone('A321443232');
|
||||||
|
const case_5 = isValidPhone('ValidPhone');
|
||||||
|
const case_6 = isValidPhone('000');
|
||||||
|
|
||||||
|
expect(case_1).toBeFalsy();
|
||||||
|
expect(case_2).toBeFalsy();
|
||||||
|
expect(case_3).toBeFalsy();
|
||||||
|
expect(case_4).toBeFalsy();
|
||||||
|
expect(case_5).toBeFalsy();
|
||||||
|
expect(case_6).toBeFalsy();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
describe('isValidDiscount', () => {
|
||||||
|
test('Should is valid discount', () => {
|
||||||
|
const case_1 = isValidDiscount(99.99);
|
||||||
|
const case_2 = isValidDiscount(50);
|
||||||
|
const case_3 = isValidDiscount(0);
|
||||||
|
const case_4 = isValidDiscount(100);
|
||||||
|
|
||||||
|
expect(case_1).toBeTruthy();
|
||||||
|
expect(case_2).toBeTruthy();
|
||||||
|
expect(case_3).toBeTruthy();
|
||||||
|
expect(case_4).toBeTruthy();
|
||||||
|
});
|
||||||
|
|
||||||
|
test('Should is not valid discount', () => {
|
||||||
|
const case_1 = isValidDiscount(-1);
|
||||||
|
const case_2 = isValidDiscount(-0.99);
|
||||||
|
const case_3 = isValidDiscount(101);
|
||||||
|
|
||||||
|
expect(case_1).toBeFalsy();
|
||||||
|
expect(case_2).toBeFalsy();
|
||||||
|
expect(case_3).toBeFalsy();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
describe('Should is valid string', () => {
|
||||||
|
test('Is valid string', () => {
|
||||||
|
const case_1 = isValidString('Phan Huu Loi');
|
||||||
|
const case_2 = isValidString('Nezumi');
|
||||||
|
|
||||||
|
expect(case_1).toBeTruthy();
|
||||||
|
expect(case_2).toBeTruthy();
|
||||||
|
});
|
||||||
|
|
||||||
|
test('Should is not valid string', () => {
|
||||||
|
const case_1 = isValidString('Le');
|
||||||
|
const case_2 = isValidString('1tét');
|
||||||
|
const case_3 = isValidString('@!');
|
||||||
|
const case_4 = isValidString(' ');
|
||||||
|
|
||||||
|
expect(case_1).toBeFalsy();
|
||||||
|
expect(case_2).toBeFalsy();
|
||||||
|
expect(case_3).toBeFalsy();
|
||||||
|
expect(case_4).toBeFalsy();
|
||||||
|
});
|
||||||
|
});
|
||||||
@@ -0,0 +1,132 @@
|
|||||||
|
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';
|
||||||
|
|
||||||
|
const mockUseRooms = jest.fn(useRooms);
|
||||||
|
const mockUseCreateRoom = jest.fn(useCreateRoom);
|
||||||
|
const mockUseUpdateRoom = jest.fn(useUpdateRoom);
|
||||||
|
const mockUseDeleteRoom = jest.fn(useSetIsDeleteRoom);
|
||||||
|
interface IWrapper {
|
||||||
|
children: ReactNode;
|
||||||
|
}
|
||||||
|
|
||||||
|
const sampleData: IRoom = {
|
||||||
|
id: 999,
|
||||||
|
name: 'Room name test',
|
||||||
|
price: 9999,
|
||||||
|
status: true,
|
||||||
|
isDelete: true,
|
||||||
|
};
|
||||||
|
const queryClient = new QueryClient({
|
||||||
|
defaultOptions: {
|
||||||
|
queries: {
|
||||||
|
retry: false,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
});
|
||||||
|
const wrapper = ({ children }: IWrapper) => {
|
||||||
|
return (
|
||||||
|
<QueryClientProvider client={queryClient}>
|
||||||
|
<MemoryRouter>{children}</MemoryRouter>
|
||||||
|
</QueryClientProvider>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
describe('Room hooks', () => {
|
||||||
|
test('Should fetch data correctly', async () => {
|
||||||
|
mockUseRooms.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(() => mockUseRooms(), { wrapper });
|
||||||
|
|
||||||
|
await waitFor(() =>
|
||||||
|
expect(result.current.rooms?.length).toBeGreaterThan(0)
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
|
test('Should create room correctly', async () => {
|
||||||
|
mockUseCreateRoom.mockImplementation(() => ({
|
||||||
|
createRoom: () => {
|
||||||
|
sampleData;
|
||||||
|
},
|
||||||
|
isCreating: false,
|
||||||
|
isSuccess: true,
|
||||||
|
}));
|
||||||
|
const { result } = renderHook(() => mockUseCreateRoom(), { wrapper });
|
||||||
|
|
||||||
|
act(() => {
|
||||||
|
result.current.createRoom(sampleData);
|
||||||
|
});
|
||||||
|
|
||||||
|
await waitFor(() => result.current.isSuccess);
|
||||||
|
|
||||||
|
expect(result.current.isSuccess).toBeTruthy();
|
||||||
|
});
|
||||||
|
|
||||||
|
test('Should edit room correctly', async () => {
|
||||||
|
mockUseUpdateRoom.mockImplementation(() => ({
|
||||||
|
updateRoom: () => {
|
||||||
|
sampleData;
|
||||||
|
},
|
||||||
|
isUpdating: false,
|
||||||
|
isSuccess: true,
|
||||||
|
}));
|
||||||
|
const { result } = renderHook(() => mockUseUpdateRoom(), { wrapper });
|
||||||
|
|
||||||
|
act(() => {
|
||||||
|
const testMethod = async () => {
|
||||||
|
result.current.updateRoom(sampleData);
|
||||||
|
await waitFor(() => expect(result.current.isSuccess).toBeTruthy());
|
||||||
|
};
|
||||||
|
|
||||||
|
testMethod();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
test('Should delete room correctly', async () => {
|
||||||
|
mockUseDeleteRoom.mockImplementation(() => ({
|
||||||
|
setIsDeleteRoom: () => {
|
||||||
|
sampleData
|
||||||
|
},
|
||||||
|
isDeleting: false,
|
||||||
|
isSuccess: true,
|
||||||
|
}));
|
||||||
|
const { result } = renderHook(() => mockUseDeleteRoom(), { wrapper });
|
||||||
|
|
||||||
|
act(() => {
|
||||||
|
const testMethod = async () => {
|
||||||
|
result.current.setIsDeleteRoom(sampleData.id);
|
||||||
|
await waitFor(() => expect(result.current.isSuccess).toBeTruthy());
|
||||||
|
};
|
||||||
|
|
||||||
|
testMethod();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
@@ -0,0 +1,47 @@
|
|||||||
|
import { fireEvent, render } from '@testing-library/react';
|
||||||
|
import { useState } from 'react';
|
||||||
|
import { act } from 'react-test-renderer';
|
||||||
|
|
||||||
|
// Hooks
|
||||||
|
import { useDebounce } from '@hook/useDebounce';
|
||||||
|
|
||||||
|
jest.useFakeTimers();
|
||||||
|
|
||||||
|
const TestComponent = ({ initialValue = 0 }: { initialValue?: number }) => {
|
||||||
|
const [value, setValue] = useState(initialValue);
|
||||||
|
const debouncedValue = useDebounce<number>(value, 1000);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<button onClick={() => setValue(value + 1)}>Increment</button>
|
||||||
|
<span data-testid={'debouncedValue'}>{debouncedValue}</span>
|
||||||
|
<span data-testid={'value'}>{value}</span>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
describe('useDebouncedValue', function () {
|
||||||
|
test('Debounce value should not change before 1 second', () => {
|
||||||
|
const { getByTestId, getByText } = render(<TestComponent />);
|
||||||
|
const incrementButton = getByText('Increment');
|
||||||
|
const debouncedValue = getByTestId('debouncedValue');
|
||||||
|
const value = getByTestId('value');
|
||||||
|
|
||||||
|
const clickAndWaitTime = (passedTime: number) => {
|
||||||
|
act(() => {
|
||||||
|
fireEvent.click(incrementButton);
|
||||||
|
jest.advanceTimersByTime(passedTime);
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
clickAndWaitTime(100);
|
||||||
|
|
||||||
|
expect(debouncedValue.textContent).toBe('0');
|
||||||
|
expect(value.textContent).toBe('1');
|
||||||
|
|
||||||
|
clickAndWaitTime(1000);
|
||||||
|
|
||||||
|
expect(debouncedValue.textContent).toBe('1');
|
||||||
|
expect(value.textContent).toBe('2');
|
||||||
|
});
|
||||||
|
});
|
||||||
@@ -0,0 +1,33 @@
|
|||||||
|
import { fireEvent, render, renderHook, screen } from '@testing-library/react';
|
||||||
|
|
||||||
|
// Hooks
|
||||||
|
import { useOutsideClick } from '@hook/useOutsideClick';
|
||||||
|
|
||||||
|
describe('useOutsideClick', () => {
|
||||||
|
test('Call handler when click outside element', () => {
|
||||||
|
// Arrange
|
||||||
|
const handler = jest.fn();
|
||||||
|
const ref = renderHook(() => useOutsideClick<HTMLDivElement>(handler))
|
||||||
|
.result.current;
|
||||||
|
render(<div ref={ref}></div>);
|
||||||
|
|
||||||
|
fireEvent.click(document);
|
||||||
|
|
||||||
|
// Assert
|
||||||
|
expect(handler).toHaveBeenCalledTimes(1);
|
||||||
|
});
|
||||||
|
|
||||||
|
test('Not call handler when click outside element', () => {
|
||||||
|
// Arrange
|
||||||
|
const handler = jest.fn();
|
||||||
|
const ref = renderHook(() => useOutsideClick<HTMLDivElement>(handler))
|
||||||
|
.result.current;
|
||||||
|
render(<div ref={ref} data-testid="test-element"></div>);
|
||||||
|
|
||||||
|
// Act
|
||||||
|
fireEvent.click(screen.getByTestId('test-element'));
|
||||||
|
|
||||||
|
// Assert
|
||||||
|
expect(handler).not.toHaveBeenCalled();
|
||||||
|
});
|
||||||
|
});
|
||||||
@@ -0,0 +1,111 @@
|
|||||||
|
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
|
||||||
|
import { renderHook, waitFor } from '@testing-library/react';
|
||||||
|
import { ReactNode } from 'react';
|
||||||
|
import { MemoryRouter } from 'react-router-dom';
|
||||||
|
import { act } from 'react-test-renderer';
|
||||||
|
|
||||||
|
// 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';
|
||||||
|
|
||||||
|
const mockUseUsers = jest.fn(useUsers);
|
||||||
|
const mockUseCreateUser = jest.fn(useCreateUser);
|
||||||
|
const mockUseUpdateUser = jest.fn(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 () => {
|
||||||
|
mockUseUsers.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(() => mockUseUsers(), { wrapper });
|
||||||
|
|
||||||
|
await waitFor(() => expect(result.current.users?.length).toEqual(2));
|
||||||
|
});
|
||||||
|
|
||||||
|
test('Should create user correctly', async () => {
|
||||||
|
mockUseCreateUser.mockImplementation(() => ({
|
||||||
|
createUser: () => {
|
||||||
|
sampleData;
|
||||||
|
},
|
||||||
|
isCreating: false,
|
||||||
|
isSuccess: true,
|
||||||
|
}));
|
||||||
|
const { result } = renderHook(() => mockUseCreateUser(), { wrapper });
|
||||||
|
|
||||||
|
act(() => {
|
||||||
|
const testMethod = async () => {
|
||||||
|
result.current.createUser(sampleData);
|
||||||
|
await waitFor(() => expect(result.current.isSuccess).toBeTruthy());
|
||||||
|
};
|
||||||
|
|
||||||
|
testMethod();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
test('Should update user correctly', async () => {
|
||||||
|
mockUseUpdateUser.mockImplementation(() => ({
|
||||||
|
updateUser: () => {
|
||||||
|
sampleData;
|
||||||
|
},
|
||||||
|
isUpdating: false,
|
||||||
|
isSuccess: true,
|
||||||
|
}));
|
||||||
|
const { result } = renderHook(() => mockUseUpdateUser(), { wrapper });
|
||||||
|
|
||||||
|
act(() => {
|
||||||
|
const testMethod = async () => {
|
||||||
|
result.current.updateUser(sampleData);
|
||||||
|
await waitFor(() => expect(result.current.isSuccess).toBeTruthy());
|
||||||
|
};
|
||||||
|
|
||||||
|
testMethod();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
@@ -1,22 +0,0 @@
|
|||||||
import { BrowserRouter } from 'react-router-dom';
|
|
||||||
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
|
|
||||||
import renderer from 'react-test-renderer';
|
|
||||||
|
|
||||||
// Components
|
|
||||||
import RoomForm from '../RoomForm';
|
|
||||||
|
|
||||||
describe('RoomForm', () => {
|
|
||||||
const queryClient = new QueryClient();
|
|
||||||
|
|
||||||
const wrapper = renderer.create(
|
|
||||||
<QueryClientProvider client={queryClient}>
|
|
||||||
<BrowserRouter>
|
|
||||||
<RoomForm />
|
|
||||||
</BrowserRouter>
|
|
||||||
</QueryClientProvider>
|
|
||||||
);
|
|
||||||
|
|
||||||
test('Should render correctly', () => {
|
|
||||||
expect(wrapper).toMatchSnapshot();
|
|
||||||
});
|
|
||||||
});
|
|
||||||
@@ -1,29 +0,0 @@
|
|||||||
import renderer from 'react-test-renderer';
|
|
||||||
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
|
|
||||||
|
|
||||||
// Types
|
|
||||||
import { IRoom } from '@type/room';
|
|
||||||
|
|
||||||
// Components
|
|
||||||
import RoomRow from '../RoomRow';
|
|
||||||
|
|
||||||
describe('RoomRow', () => {
|
|
||||||
const tempRoom: IRoom = {
|
|
||||||
id: 1,
|
|
||||||
name: 'Temp Room',
|
|
||||||
price: 250,
|
|
||||||
status: true,
|
|
||||||
isDelete: true,
|
|
||||||
};
|
|
||||||
const queryClient = new QueryClient();
|
|
||||||
|
|
||||||
const wrapper = renderer.create(
|
|
||||||
<QueryClientProvider client={queryClient}>
|
|
||||||
<RoomRow room={tempRoom} key={tempRoom.id} />
|
|
||||||
</QueryClientProvider>
|
|
||||||
);
|
|
||||||
|
|
||||||
test('Should render correctly', () => {
|
|
||||||
expect(wrapper).toMatchSnapshot();
|
|
||||||
});
|
|
||||||
});
|
|
||||||
@@ -1,22 +0,0 @@
|
|||||||
import renderer from 'react-test-renderer';
|
|
||||||
import { BrowserRouter } from 'react-router-dom';
|
|
||||||
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
|
|
||||||
|
|
||||||
// Components
|
|
||||||
import RoomTable from '../RoomTable';
|
|
||||||
|
|
||||||
describe('RoomTable', () => {
|
|
||||||
const queryClient = new QueryClient();
|
|
||||||
|
|
||||||
const wrapper = renderer.create(
|
|
||||||
<BrowserRouter>
|
|
||||||
<QueryClientProvider client={queryClient}>
|
|
||||||
<RoomTable />
|
|
||||||
</QueryClientProvider>
|
|
||||||
</BrowserRouter>
|
|
||||||
);
|
|
||||||
|
|
||||||
test('Should render correctly', () => {
|
|
||||||
expect(wrapper).toMatchSnapshot();
|
|
||||||
});
|
|
||||||
});
|
|
||||||
@@ -1,67 +0,0 @@
|
|||||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
|
||||||
|
|
||||||
exports[`RoomForm Should render correctly 1`] = `
|
|
||||||
<form
|
|
||||||
className="sc-dlniIP bCPNqw"
|
|
||||||
onSubmit={[Function]}
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
className="sc-eCAqax eozPUK"
|
|
||||||
>
|
|
||||||
<label
|
|
||||||
className="sc-jSFipO cMYxin"
|
|
||||||
>
|
|
||||||
Name
|
|
||||||
</label>
|
|
||||||
<div>
|
|
||||||
<input
|
|
||||||
className="sc-gtsqUy fGZPSU"
|
|
||||||
id="name"
|
|
||||||
name="name"
|
|
||||||
onBlur={[Function]}
|
|
||||||
onChange={[Function]}
|
|
||||||
type="text"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
className="sc-eCAqax eozPUK"
|
|
||||||
>
|
|
||||||
<label
|
|
||||||
className="sc-jSFipO cMYxin"
|
|
||||||
>
|
|
||||||
Price
|
|
||||||
</label>
|
|
||||||
<div>
|
|
||||||
<input
|
|
||||||
className="sc-gtsqUy fGZPSU"
|
|
||||||
id="price"
|
|
||||||
name="price"
|
|
||||||
onBlur={[Function]}
|
|
||||||
onChange={[Function]}
|
|
||||||
type="text"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
className="sc-hKFymg dteuGK"
|
|
||||||
>
|
|
||||||
<button
|
|
||||||
className="sc-bdnyFh sc-iCoHzw hHmoPp jAHgeA"
|
|
||||||
disabled={false}
|
|
||||||
name="submit"
|
|
||||||
type="submit"
|
|
||||||
variations="primary"
|
|
||||||
>
|
|
||||||
Add
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
className="sc-bdnyFh sc-iCoHzw bjdOKm jAHgeA"
|
|
||||||
type="button"
|
|
||||||
variations="secondary"
|
|
||||||
>
|
|
||||||
Close
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</form>
|
|
||||||
`;
|
|
||||||
@@ -1,53 +0,0 @@
|
|||||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
|
||||||
|
|
||||||
exports[`RoomRow Should render correctly 1`] = `
|
|
||||||
<div
|
|
||||||
className="sc-crzpnZ sc-bqGGcD gIMFtm jqrNRF"
|
|
||||||
>
|
|
||||||
<div>
|
|
||||||
1
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
Temp Room
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
$250.00
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
Unavailable
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<div
|
|
||||||
className="sc-fnVZQs CCxtf"
|
|
||||||
>
|
|
||||||
<button
|
|
||||||
aria-label="Menu item 1"
|
|
||||||
className="sc-bkbjWr fCztjK"
|
|
||||||
onClick={[Function]}
|
|
||||||
>
|
|
||||||
<svg
|
|
||||||
aria-hidden="true"
|
|
||||||
fill="currentColor"
|
|
||||||
height="1em"
|
|
||||||
stroke="currentColor"
|
|
||||||
strokeWidth="0"
|
|
||||||
style={
|
|
||||||
{
|
|
||||||
"color": undefined,
|
|
||||||
}
|
|
||||||
}
|
|
||||||
viewBox="0 0 24 24"
|
|
||||||
width="1em"
|
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
|
||||||
>
|
|
||||||
<path
|
|
||||||
clipRule="evenodd"
|
|
||||||
d="M10.5 6a1.5 1.5 0 113 0 1.5 1.5 0 01-3 0zm0 6a1.5 1.5 0 113 0 1.5 1.5 0 01-3 0zm0 6a1.5 1.5 0 113 0 1.5 1.5 0 01-3 0z"
|
|
||||||
fillRule="evenodd"
|
|
||||||
/>
|
|
||||||
</svg>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
`;
|
|
||||||
@@ -1,63 +0,0 @@
|
|||||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
|
||||||
|
|
||||||
exports[`RoomTable Should render correctly 1`] = `
|
|
||||||
<div
|
|
||||||
className="sc-iJCSeZ crZyCc"
|
|
||||||
type="vertical"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
className="sc-lmgPJu cuMSiO"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
className="sc-crzpnZ iahNiP"
|
|
||||||
>
|
|
||||||
<button
|
|
||||||
active={true}
|
|
||||||
className="sc-dItHI guVVWw"
|
|
||||||
disabled={true}
|
|
||||||
onClick={[Function]}
|
|
||||||
>
|
|
||||||
Ascending
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
active={false}
|
|
||||||
className="sc-dItHI fIRqtD"
|
|
||||||
disabled={false}
|
|
||||||
onClick={[Function]}
|
|
||||||
>
|
|
||||||
Descending
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
<select
|
|
||||||
aria-label="Sort"
|
|
||||||
className="sc-iqAbyq czAJZn"
|
|
||||||
onChange={[Function]}
|
|
||||||
value=""
|
|
||||||
>
|
|
||||||
<option
|
|
||||||
value="id"
|
|
||||||
>
|
|
||||||
Sort by id
|
|
||||||
</option>
|
|
||||||
<option
|
|
||||||
value="name"
|
|
||||||
>
|
|
||||||
Sort by name
|
|
||||||
</option>
|
|
||||||
<option
|
|
||||||
value="price"
|
|
||||||
>
|
|
||||||
Sort by price
|
|
||||||
</option>
|
|
||||||
</select>
|
|
||||||
<input
|
|
||||||
className="sc-kEqXeH jMVPeG"
|
|
||||||
onChange={[Function]}
|
|
||||||
placeholder="Search by name..."
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
className="sc-giAruI hMNXks"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
`;
|
|
||||||
@@ -1,84 +0,0 @@
|
|||||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
|
||||||
|
|
||||||
exports[`Room Should render correctly 1`] = `
|
|
||||||
<main
|
|
||||||
className="sc-iwaiBT gPCYSC"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
className="sc-iJCSeZ jDHUlN"
|
|
||||||
type="horizontal"
|
|
||||||
>
|
|
||||||
<h2
|
|
||||||
className="sc-cxNGUP ffcGOQ"
|
|
||||||
>
|
|
||||||
List Room
|
|
||||||
</h2>
|
|
||||||
<button
|
|
||||||
className="sc-bqGGcD cVmQmy"
|
|
||||||
onClick={[Function]}
|
|
||||||
variations="primary"
|
|
||||||
>
|
|
||||||
Add room
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
className="sc-iJCSeZ crZyCc"
|
|
||||||
type="vertical"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
className="sc-lmgPJu cuMSiO"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
className="sc-crzpnZ iahNiP"
|
|
||||||
>
|
|
||||||
<button
|
|
||||||
active={true}
|
|
||||||
className="sc-dItHI guVVWw"
|
|
||||||
disabled={true}
|
|
||||||
onClick={[Function]}
|
|
||||||
>
|
|
||||||
Ascending
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
active={false}
|
|
||||||
className="sc-dItHI fIRqtD"
|
|
||||||
disabled={false}
|
|
||||||
onClick={[Function]}
|
|
||||||
>
|
|
||||||
Descending
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
<select
|
|
||||||
aria-label="Sort"
|
|
||||||
className="sc-iqAbyq czAJZn"
|
|
||||||
onChange={[Function]}
|
|
||||||
value=""
|
|
||||||
>
|
|
||||||
<option
|
|
||||||
value="id"
|
|
||||||
>
|
|
||||||
Sort by id
|
|
||||||
</option>
|
|
||||||
<option
|
|
||||||
value="name"
|
|
||||||
>
|
|
||||||
Sort by name
|
|
||||||
</option>
|
|
||||||
<option
|
|
||||||
value="price"
|
|
||||||
>
|
|
||||||
Sort by price
|
|
||||||
</option>
|
|
||||||
</select>
|
|
||||||
<input
|
|
||||||
className="sc-kEqXeH jMVPeG"
|
|
||||||
onChange={[Function]}
|
|
||||||
placeholder="Search by name..."
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
className="sc-giAruI hMNXks"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</main>
|
|
||||||
`;
|
|
||||||
@@ -1,22 +0,0 @@
|
|||||||
import Room from '..';
|
|
||||||
import { BrowserRouter } from 'react-router-dom';
|
|
||||||
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
|
|
||||||
|
|
||||||
// Components
|
|
||||||
import renderer from 'react-test-renderer';
|
|
||||||
|
|
||||||
describe('Room', () => {
|
|
||||||
const queryClient = new QueryClient();
|
|
||||||
|
|
||||||
const wrapper = renderer.create(
|
|
||||||
<QueryClientProvider client={queryClient}>
|
|
||||||
<BrowserRouter>
|
|
||||||
<Room />
|
|
||||||
</BrowserRouter>
|
|
||||||
</QueryClientProvider>
|
|
||||||
);
|
|
||||||
|
|
||||||
test('Should render correctly', () => {
|
|
||||||
expect(wrapper).toMatchSnapshot();
|
|
||||||
});
|
|
||||||
});
|
|
||||||
@@ -1,22 +1,73 @@
|
|||||||
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';
|
|
||||||
|
|
||||||
// Components
|
// Components
|
||||||
import UserForm from '../UserForm';
|
import UserForm from '../UserForm';
|
||||||
|
import {
|
||||||
|
RenderResult,
|
||||||
|
fireEvent,
|
||||||
|
render,
|
||||||
|
waitFor,
|
||||||
|
} from '@testing-library/react';
|
||||||
|
|
||||||
|
const createUser = jest.fn();
|
||||||
|
|
||||||
|
jest.mock('@hook/users/useCreateUser.ts', () => ({
|
||||||
|
...jest.requireActual('@hook/users/useCreateUser.ts'),
|
||||||
|
useCreateUser: jest.fn(() => ({
|
||||||
|
isCreating: false,
|
||||||
|
createUser,
|
||||||
|
})),
|
||||||
|
}));
|
||||||
|
|
||||||
|
jest.mock('@hook/users/useUpdateUser', () => ({
|
||||||
|
...jest.requireActual('@hook/users/useUpdateUser'),
|
||||||
|
useUpdateUser: () => ({
|
||||||
|
isUpdating: false,
|
||||||
|
updateUser: jest.fn(),
|
||||||
|
}),
|
||||||
|
}));
|
||||||
|
|
||||||
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').closest('button');
|
||||||
|
let result: {
|
||||||
|
name: string;
|
||||||
|
phone: string;
|
||||||
|
};
|
||||||
|
|
||||||
|
createUser.mockImplementationOnce((newUser, { onSuccess }) => {
|
||||||
|
result = newUser;
|
||||||
|
onSuccess();
|
||||||
|
});
|
||||||
|
|
||||||
|
fireEvent.input(nameField!, { target: { value: 'Nezumi' } });
|
||||||
|
fireEvent.input(phoneField!, { target: { value: '0327764321' } });
|
||||||
|
|
||||||
|
fireEvent.submit(submitBtn!);
|
||||||
|
|
||||||
|
await waitFor(() => {
|
||||||
|
expect(createUser).toHaveBeenCalled();
|
||||||
|
expect(result).toEqual({ name: 'Nezumi', phone: '0327764321' });
|
||||||
|
});
|
||||||
|
});
|
||||||
});
|
});
|
||||||
|
|||||||
@@ -1,67 +1,184 @@
|
|||||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||||
|
|
||||||
exports[`UserForm Should render correctly 1`] = `
|
exports[`UserForm Should render correctly 1`] = `
|
||||||
<form
|
{
|
||||||
className="sc-gtsqUy jMGskL"
|
"asFragment": [Function],
|
||||||
onSubmit={[Function]}
|
"baseElement": <body>
|
||||||
>
|
|
||||||
<div
|
|
||||||
className="sc-hKFymg frexHr"
|
|
||||||
>
|
|
||||||
<label
|
|
||||||
className="sc-eCAqax dnXnhF"
|
|
||||||
>
|
|
||||||
Full Name
|
|
||||||
</label>
|
|
||||||
<div>
|
<div>
|
||||||
<input
|
<form
|
||||||
className="sc-bdnyFh gejiRq"
|
class="sc-dlniIP bCPNqw"
|
||||||
id="name"
|
>
|
||||||
name="name"
|
<div
|
||||||
onBlur={[Function]}
|
class="sc-eCAqax dgDilB"
|
||||||
onChange={[Function]}
|
direction="horizontal"
|
||||||
type="text"
|
>
|
||||||
/>
|
<label
|
||||||
|
class="sc-jSFipO cMYxin"
|
||||||
|
>
|
||||||
|
Full Name
|
||||||
|
</label>
|
||||||
|
<div>
|
||||||
|
<input
|
||||||
|
class="sc-bdnyFh gXSWSo"
|
||||||
|
id="name"
|
||||||
|
name="name"
|
||||||
|
type="text"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="sc-eCAqax dgDilB"
|
||||||
|
direction="horizontal"
|
||||||
|
>
|
||||||
|
<label
|
||||||
|
class="sc-jSFipO cMYxin"
|
||||||
|
>
|
||||||
|
Phone
|
||||||
|
</label>
|
||||||
|
<div>
|
||||||
|
<input
|
||||||
|
class="sc-bdnyFh gXSWSo"
|
||||||
|
id="phone"
|
||||||
|
name="phone"
|
||||||
|
type="text"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="sc-hKFymg dteuGK"
|
||||||
|
>
|
||||||
|
<button
|
||||||
|
class="sc-gtsqUy sc-iCoHzw iXmfC cwhbgM"
|
||||||
|
disabled=""
|
||||||
|
name="submit"
|
||||||
|
type="submit"
|
||||||
|
variations="primary"
|
||||||
|
>
|
||||||
|
Add
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
class="sc-gtsqUy sc-iCoHzw hesuRJ cwhbgM"
|
||||||
|
type="button"
|
||||||
|
variations="secondary"
|
||||||
|
>
|
||||||
|
Close
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</body>,
|
||||||
<div
|
"container": <div>
|
||||||
className="sc-hKFymg frexHr"
|
<form
|
||||||
>
|
class="sc-dlniIP bCPNqw"
|
||||||
<label
|
|
||||||
className="sc-eCAqax dnXnhF"
|
|
||||||
>
|
>
|
||||||
Phone
|
<div
|
||||||
</label>
|
class="sc-eCAqax dgDilB"
|
||||||
<div>
|
direction="horizontal"
|
||||||
<input
|
>
|
||||||
className="sc-bdnyFh gejiRq"
|
<label
|
||||||
id="phone"
|
class="sc-jSFipO cMYxin"
|
||||||
name="phone"
|
>
|
||||||
onBlur={[Function]}
|
Full Name
|
||||||
onChange={[Function]}
|
</label>
|
||||||
type="text"
|
<div>
|
||||||
/>
|
<input
|
||||||
</div>
|
class="sc-bdnyFh gXSWSo"
|
||||||
</div>
|
id="name"
|
||||||
<div
|
name="name"
|
||||||
className="sc-dlniIP hBqqvG"
|
type="text"
|
||||||
>
|
/>
|
||||||
<button
|
</div>
|
||||||
className="sc-gKAaef sc-jrsKJM gifCOZ KLoQf"
|
</div>
|
||||||
disabled={true}
|
<div
|
||||||
name="submit"
|
class="sc-eCAqax dgDilB"
|
||||||
type="submit"
|
direction="horizontal"
|
||||||
variations="primary"
|
>
|
||||||
>
|
<label
|
||||||
Add
|
class="sc-jSFipO cMYxin"
|
||||||
</button>
|
>
|
||||||
<button
|
Phone
|
||||||
className="sc-gKAaef sc-jrsKJM gbgZUe KLoQf"
|
</label>
|
||||||
type="button"
|
<div>
|
||||||
variations="secondary"
|
<input
|
||||||
>
|
class="sc-bdnyFh gXSWSo"
|
||||||
Close
|
id="phone"
|
||||||
</button>
|
name="phone"
|
||||||
</div>
|
type="text"
|
||||||
</form>
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="sc-hKFymg dteuGK"
|
||||||
|
>
|
||||||
|
<button
|
||||||
|
class="sc-gtsqUy sc-iCoHzw iXmfC cwhbgM"
|
||||||
|
disabled=""
|
||||||
|
name="submit"
|
||||||
|
type="submit"
|
||||||
|
variations="primary"
|
||||||
|
>
|
||||||
|
Add
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
class="sc-gtsqUy sc-iCoHzw hesuRJ cwhbgM"
|
||||||
|
type="button"
|
||||||
|
variations="secondary"
|
||||||
|
>
|
||||||
|
Close
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</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],
|
||||||
|
}
|
||||||
`;
|
`;
|
||||||
|
|||||||
@@ -18,11 +18,11 @@ exports[`UserRow Should render correctly 1`] = `
|
|||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<div
|
<div
|
||||||
className="sc-jrsKJM cdPhia"
|
className="sc-kEqXeH jLboIv"
|
||||||
>
|
>
|
||||||
<button
|
<button
|
||||||
aria-label="Menu item 1"
|
aria-label="Menu item 1"
|
||||||
className="sc-iqAbyq fyjyXl"
|
className="sc-crzpnZ gdsCet"
|
||||||
onClick={[Function]}
|
onClick={[Function]}
|
||||||
>
|
>
|
||||||
<svg
|
<svg
|
||||||
|
|||||||
@@ -2,26 +2,24 @@
|
|||||||
|
|
||||||
exports[`UserTable Should render correctly 1`] = `
|
exports[`UserTable Should render correctly 1`] = `
|
||||||
<div
|
<div
|
||||||
className="sc-iJCSeZ crZyCc"
|
className="sc-giAruI eEOXtt"
|
||||||
type="vertical"
|
type="vertical"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
className="sc-lmgPJu cuMSiO"
|
className="sc-iJCSeZ boUFen"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
className="sc-crzpnZ iahNiP"
|
className="sc-dItHI exgtuU"
|
||||||
>
|
>
|
||||||
<button
|
<button
|
||||||
active={true}
|
className="sc-bqGGcD entqcN"
|
||||||
className="sc-dItHI guVVWw"
|
|
||||||
disabled={true}
|
disabled={true}
|
||||||
onClick={[Function]}
|
onClick={[Function]}
|
||||||
>
|
>
|
||||||
Ascending
|
Ascending
|
||||||
</button>
|
</button>
|
||||||
<button
|
<button
|
||||||
active={false}
|
className="sc-bqGGcD graLyf"
|
||||||
className="sc-dItHI fIRqtD"
|
|
||||||
disabled={false}
|
disabled={false}
|
||||||
onClick={[Function]}
|
onClick={[Function]}
|
||||||
>
|
>
|
||||||
@@ -30,34 +28,38 @@ exports[`UserTable Should render correctly 1`] = `
|
|||||||
</div>
|
</div>
|
||||||
<select
|
<select
|
||||||
aria-label="Sort"
|
aria-label="Sort"
|
||||||
className="sc-iqAbyq czAJZn"
|
className="sc-crzpnZ iXFhDe"
|
||||||
|
disabled={false}
|
||||||
onChange={[Function]}
|
onChange={[Function]}
|
||||||
value=""
|
value=""
|
||||||
>
|
>
|
||||||
<option
|
<option
|
||||||
|
data-testid="select-option"
|
||||||
value="id"
|
value="id"
|
||||||
>
|
>
|
||||||
Sort by id
|
Sort by id
|
||||||
</option>
|
</option>
|
||||||
<option
|
<option
|
||||||
|
data-testid="select-option"
|
||||||
value="name"
|
value="name"
|
||||||
>
|
>
|
||||||
Sort by name
|
Sort by name
|
||||||
</option>
|
</option>
|
||||||
<option
|
<option
|
||||||
|
data-testid="select-option"
|
||||||
value="price"
|
value="price"
|
||||||
>
|
>
|
||||||
Sort by price
|
Sort by price
|
||||||
</option>
|
</option>
|
||||||
</select>
|
</select>
|
||||||
<input
|
<input
|
||||||
className="sc-kEqXeH jMVPeG"
|
className="sc-iqAbyq kOrhXJ"
|
||||||
onChange={[Function]}
|
onChange={[Function]}
|
||||||
placeholder="Search by name..."
|
placeholder="Search by name..."
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
className="sc-giAruI hMNXks"
|
className="sc-ezyZrH dFKszz"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
`;
|
`;
|
||||||
|
|||||||
@@ -2,19 +2,19 @@
|
|||||||
|
|
||||||
exports[`User Should render correctly 1`] = `
|
exports[`User Should render correctly 1`] = `
|
||||||
<main
|
<main
|
||||||
className="sc-fKgKDd iDHRyD"
|
className="sc-lmgPJu fmDjvX"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
className="sc-lmgPJu bFEqIE"
|
className="sc-cxNGUP cGfCbe"
|
||||||
type="horizontal"
|
type="horizontal"
|
||||||
>
|
>
|
||||||
<h2
|
<h2
|
||||||
className="sc-bCwene htGYaf"
|
className="sc-iJCSeZ jfWGKb"
|
||||||
>
|
>
|
||||||
List User
|
List User
|
||||||
</h2>
|
</h2>
|
||||||
<button
|
<button
|
||||||
className="sc-kfYpNk QIeuT"
|
className="sc-iemXqs gdUlEE"
|
||||||
onClick={[Function]}
|
onClick={[Function]}
|
||||||
variations="primary"
|
variations="primary"
|
||||||
>
|
>
|
||||||
@@ -22,26 +22,24 @@ exports[`User Should render correctly 1`] = `
|
|||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
className="sc-lmgPJu hehIVl"
|
className="sc-cxNGUP hDpxxT"
|
||||||
type="vertical"
|
type="vertical"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
className="sc-iwaiBT eOzYWb"
|
className="sc-giAruI kILZpe"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
className="sc-crzpnZ iahNiP"
|
className="sc-dItHI exgtuU"
|
||||||
>
|
>
|
||||||
<button
|
<button
|
||||||
active={true}
|
className="sc-bqGGcD entqcN"
|
||||||
className="sc-dItHI guVVWw"
|
|
||||||
disabled={true}
|
disabled={true}
|
||||||
onClick={[Function]}
|
onClick={[Function]}
|
||||||
>
|
>
|
||||||
Ascending
|
Ascending
|
||||||
</button>
|
</button>
|
||||||
<button
|
<button
|
||||||
active={false}
|
className="sc-bqGGcD graLyf"
|
||||||
className="sc-dItHI fIRqtD"
|
|
||||||
disabled={false}
|
disabled={false}
|
||||||
onClick={[Function]}
|
onClick={[Function]}
|
||||||
>
|
>
|
||||||
@@ -50,34 +48,38 @@ exports[`User Should render correctly 1`] = `
|
|||||||
</div>
|
</div>
|
||||||
<select
|
<select
|
||||||
aria-label="Sort"
|
aria-label="Sort"
|
||||||
className="sc-iqAbyq czAJZn"
|
className="sc-crzpnZ iXFhDe"
|
||||||
|
disabled={false}
|
||||||
onChange={[Function]}
|
onChange={[Function]}
|
||||||
value=""
|
value=""
|
||||||
>
|
>
|
||||||
<option
|
<option
|
||||||
|
data-testid="select-option"
|
||||||
value="id"
|
value="id"
|
||||||
>
|
>
|
||||||
Sort by id
|
Sort by id
|
||||||
</option>
|
</option>
|
||||||
<option
|
<option
|
||||||
|
data-testid="select-option"
|
||||||
value="name"
|
value="name"
|
||||||
>
|
>
|
||||||
Sort by name
|
Sort by name
|
||||||
</option>
|
</option>
|
||||||
<option
|
<option
|
||||||
|
data-testid="select-option"
|
||||||
value="phone"
|
value="phone"
|
||||||
>
|
>
|
||||||
Sort by phone
|
Sort by phone
|
||||||
</option>
|
</option>
|
||||||
</select>
|
</select>
|
||||||
<input
|
<input
|
||||||
className="sc-kEqXeH jMVPeG"
|
className="sc-iqAbyq kOrhXJ"
|
||||||
onChange={[Function]}
|
onChange={[Function]}
|
||||||
placeholder="Search by phone..."
|
placeholder="Search by phone..."
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
className="sc-iJCSeZ gDbWTd"
|
className="sc-ezyZrH dFKszz"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</main>
|
</main>
|
||||||
|
|||||||
@@ -0,0 +1,86 @@
|
|||||||
|
import { waitFor } from '@testing-library/react';
|
||||||
|
|
||||||
|
// Services
|
||||||
|
import {
|
||||||
|
createRoom,
|
||||||
|
setIsDeleteRoom,
|
||||||
|
getAllRooms,
|
||||||
|
updateRoom,
|
||||||
|
} from '@service/roomServices';
|
||||||
|
|
||||||
|
// Types
|
||||||
|
import { IRoom } from '@type/room';
|
||||||
|
|
||||||
|
jest.mock('@service/supabaseService');
|
||||||
|
const mockGetAllRooms = jest.fn(getAllRooms);
|
||||||
|
const mockUpdateRoom = jest.fn(updateRoom);
|
||||||
|
const mockCreateRoom = jest.fn(createRoom);
|
||||||
|
const mockIsDeleteRoom = jest.fn(setIsDeleteRoom);
|
||||||
|
|
||||||
|
const sampleData: IRoom = {
|
||||||
|
id: 999,
|
||||||
|
name: 'Room name test',
|
||||||
|
price: 9999,
|
||||||
|
status: true,
|
||||||
|
isDelete: true,
|
||||||
|
};
|
||||||
|
|
||||||
|
describe('Rooms service', () => {
|
||||||
|
test('Should fetch room correctly', async () => {
|
||||||
|
mockGetAllRooms.mockResolvedValue({
|
||||||
|
data: [
|
||||||
|
{
|
||||||
|
id: 1,
|
||||||
|
name: 'Nezumi',
|
||||||
|
price: 2500,
|
||||||
|
status: true,
|
||||||
|
isDelete: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 2,
|
||||||
|
name: 'Loi Phan',
|
||||||
|
price: 8500,
|
||||||
|
status: false,
|
||||||
|
isDelete: true,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
count: 2,
|
||||||
|
});
|
||||||
|
const result = await mockGetAllRooms({
|
||||||
|
sortBy: 'name',
|
||||||
|
orderBy: 'asc',
|
||||||
|
roomSearch: '',
|
||||||
|
page: 1,
|
||||||
|
});
|
||||||
|
|
||||||
|
await waitFor(() => expect(result.data.length).toEqual(2));
|
||||||
|
});
|
||||||
|
|
||||||
|
test('Should create room correctly', async () => {
|
||||||
|
mockCreateRoom.mockResolvedValue(sampleData);
|
||||||
|
|
||||||
|
const result = await mockCreateRoom(sampleData);
|
||||||
|
|
||||||
|
await waitFor(() => expect(result).toBeTruthy());
|
||||||
|
});
|
||||||
|
|
||||||
|
test('Should update room correctly', async () => {
|
||||||
|
mockUpdateRoom.mockResolvedValue({
|
||||||
|
id: 1,
|
||||||
|
name: 'Nezumi',
|
||||||
|
price: 2500,
|
||||||
|
status: true,
|
||||||
|
isDelete: true,
|
||||||
|
});
|
||||||
|
const result = await mockUpdateRoom(sampleData);
|
||||||
|
|
||||||
|
await waitFor(() => expect(result).toBeTruthy());
|
||||||
|
});
|
||||||
|
|
||||||
|
test('Should delete room correctly', async () => {
|
||||||
|
mockIsDeleteRoom.mockResolvedValue(sampleData);
|
||||||
|
const result = await mockIsDeleteRoom(1);
|
||||||
|
|
||||||
|
await waitFor(() => expect(result).toBeTruthy());
|
||||||
|
});
|
||||||
|
});
|
||||||
@@ -0,0 +1,64 @@
|
|||||||
|
import { waitFor } from '@testing-library/react';
|
||||||
|
|
||||||
|
// Services
|
||||||
|
import { createUser, getAllUsers, updateUser } from '@service/userServices';
|
||||||
|
|
||||||
|
// Types
|
||||||
|
import { IUser } from '@type/user';
|
||||||
|
|
||||||
|
const mockGetAllUsers = jest.fn(getAllUsers);
|
||||||
|
const mockCreateUser = jest.fn(createUser);
|
||||||
|
const mockUpdateUser = jest.fn(updateUser);
|
||||||
|
|
||||||
|
const sampleData: IUser = {
|
||||||
|
id: 999,
|
||||||
|
name: 'User name test',
|
||||||
|
phone: '123456789',
|
||||||
|
isBooked: true,
|
||||||
|
isDelete: true,
|
||||||
|
};
|
||||||
|
|
||||||
|
describe('User services', () => {
|
||||||
|
test('Should fetch user data correctly', async () => {
|
||||||
|
mockGetAllUsers.mockResolvedValue({
|
||||||
|
data: [
|
||||||
|
{
|
||||||
|
id: 1,
|
||||||
|
name: 'Nezumi',
|
||||||
|
phone: '0324422123',
|
||||||
|
isBooked: true,
|
||||||
|
isDelete: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 2,
|
||||||
|
name: 'Loi Phan',
|
||||||
|
phone: '0324422145',
|
||||||
|
isBooked: false,
|
||||||
|
isDelete: true,
|
||||||
|
},
|
||||||
|
], count: 2
|
||||||
|
});
|
||||||
|
const result = await mockGetAllUsers(({
|
||||||
|
sortBy: 'name',
|
||||||
|
orderBy: 'asc',
|
||||||
|
phoneSearch: '',
|
||||||
|
page: 1,
|
||||||
|
}));
|
||||||
|
|
||||||
|
await waitFor(() => expect(result.data.length).toEqual(2));
|
||||||
|
});
|
||||||
|
|
||||||
|
test('Should create user correctly', async () => {
|
||||||
|
mockCreateUser.mockResolvedValue(sampleData);
|
||||||
|
const result = await mockCreateUser(sampleData);
|
||||||
|
|
||||||
|
await waitFor(() => expect(result).toBeTruthy());
|
||||||
|
});
|
||||||
|
|
||||||
|
test('Should update user correctly', async () => {
|
||||||
|
mockUpdateUser.mockResolvedValue(sampleData);
|
||||||
|
const result = await mockUpdateUser(sampleData);
|
||||||
|
|
||||||
|
await waitFor(() => expect(result).toBeTruthy());
|
||||||
|
});
|
||||||
|
});
|
||||||
Reference in New Issue
Block a user