nezumi/react-training
1
0
Fork 0
mirror of https://github.com/Nezumi-2711/react-training.git synced 2026-09-22 13:38:51 +00:00
Code Issues Packages Projects Releases Wiki Activity

Improve test case function

Browse Source
This commit is contained in:
nezumi
2023-11-27 17:44:05 +07:00
parent ea1187291c
commit ddf96492c9
10 changed files with 440 additions and 121 deletions
Download Patch File Download Diff File Expand all files Collapse all files
hotel-management/src/components/Menus/Menus.test.tsx
+33 -4
View File
@@ -1,14 +1,16 @@
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;
beforeEach(() => {
wrapper = render(
<Menus> <Menus>
<Menus.Menu> <Menus.Menu>
<Menus.Toggle id={id} /> <Menus.Toggle id={id} />
@@ -24,8 +26,35 @@ describe('Menus', () => {
</Menus.Menu> </Menus.Menu>
</Menus> </Menus>
); );
});
test('Should render correctly', () => { 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();
});
}); });
hotel-management/src/components/Menus/__snapshots__/Menus.test.tsx.snap
+93 -14
View File
@@ -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>
<div>
<div
class="sc-gtsqUy lbsvcs"
>
<button <button
aria-label="Menu item 123" aria-label="Menu item 123"
className="sc-hKFymg cjUckY" class="sc-hKFymg cjUckY"
onClick={[Function]}
> >
<svg <svg
aria-hidden="true" aria-hidden="true"
fill="currentColor" fill="currentColor"
height="1em" height="1em"
stroke="currentColor" stroke="currentColor"
strokeWidth="0" stroke-width="0"
style={
{
"color": undefined,
}
}
viewBox="0 0 24 24" viewBox="0 0 24 24"
width="1em" width="1em"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
> >
<path <path
clipRule="evenodd" 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" 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" fill-rule="evenodd"
/> />
</svg> </svg>
</button> </button>
</div> </div>
</div>
</body>,
"container": <div>
<div
class="sc-gtsqUy lbsvcs"
>
<button
aria-label="Menu item 123"
class="sc-hKFymg cjUckY"
>
<svg
aria-hidden="true"
fill="currentColor"
height="1em"
stroke="currentColor"
stroke-width="0"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
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],
}
`; `;
hotel-management/src/components/OrderBy/Order.test.tsx
-28
View File
@@ -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();
});
});
hotel-management/src/components/OrderBy/OrderBy.test.tsx
+40
View File
@@ -0,0 +1,40 @@
import { RenderResult, fireEvent, render } from '@testing-library/react';
// Components
import OrderBy from '.';
jest.mock('react-router-dom');
describe('Order', () => {
const options = [
{
value: 'value1',
label: 'Option 1',
},
{
value: 'value2',
label: 'Option 2',
},
];
let wrapper: RenderResult | null = null;
beforeEach(() => {
wrapper = render(<OrderBy options={options} />);
});
test('Should render correctly', () => {
expect(wrapper).toMatchSnapshot();
});
test('handleClick should work correctly', async () => {
const mockSearchParams = jest.fn();
// useSearchParams.search = mockSearchParams;
// setSearchParams = jest.fn();
const nameButton = wrapper!.getByText('Name');
fireEvent.click(nameButton);
expect(mockSearchParams).toHaveBeenCalled();
});
});
hotel-management/src/components/OrderBy/__snapshots__/Order.test.tsx.snap
+82 -12
View File
@@ -1,24 +1,94 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP // Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Order Should render correctly 1`] = ` exports[`Order Should render correctly 1`] = `
<div {
className="sc-bdnyFh aZFGz" "asFragment": [Function],
> "baseElement": <body>
<div>
<div
class="sc-bdnyFh aZFGz"
>
<button <button
active={true} class="sc-gtsqUy fohQqJ"
className="sc-gtsqUy fohQqJ" disabled=""
disabled={true}
onClick={[Function]}
> >
Option 1 Option 1
</button> </button>
<button <button
active={false} class="sc-gtsqUy bwnpRq"
className="sc-gtsqUy bwnpRq"
disabled={false}
onClick={[Function]}
> >
Option 2 Option 2
</button> </button>
</div> </div>
</div>
</body>,
"container": <div>
<div
class="sc-bdnyFh aZFGz"
>
<button
class="sc-gtsqUy fohQqJ"
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],
}
`; `;
hotel-management/src/components/Search/Search.test.tsx
+16 -2
View File
@@ -1,18 +1,32 @@
import renderer from 'react-test-renderer';
import { BrowserRouter } from 'react-router-dom'; import { BrowserRouter } from 'react-router-dom';
// Components // Components
import Search from '.'; import Search from '.';
import { RenderResult, fireEvent, render } from '@testing-library/react';
jest.useFakeTimers();
describe('Search', () => { describe('Search', () => {
const placeHolder = 'Search placeholder...'; const placeHolder = 'Search placeholder...';
const wrapper = renderer.create( let wrapper: RenderResult | null = null;
beforeEach(() => {
wrapper = render(
<BrowserRouter> <BrowserRouter>
<Search setPlaceHolder={placeHolder} /> <Search setPlaceHolder={placeHolder} />
</BrowserRouter> </BrowserRouter>
); );
})
test('Should render correctly', () => { test('Should render correctly', () => {
expect(wrapper).toMatchSnapshot(); expect(wrapper).toMatchSnapshot();
}); });
test('Should add query to url after 1 second', async () => {
const searchField = await wrapper!.findByPlaceholderText('Search placeholder...');
fireEvent.input(searchField, 'test');
jest.advanceTimersByTime(500);
});
}); });
hotel-management/src/components/Search/__snapshots__/Search.test.tsx.snap
+67 -4
View File
@@ -1,9 +1,72 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP // Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Search Should render correctly 1`] = ` exports[`Search Should render correctly 1`] = `
<input {
className="sc-bdnyFh eAgOPb" "asFragment": [Function],
onChange={[Function]} "baseElement": <body>
<div>
<input
class="sc-bdnyFh eAgOPb"
placeholder="Search placeholder..." placeholder="Search placeholder..."
/> />
</div>
</body>,
"container": <div>
<input
class="sc-bdnyFh eAgOPb"
placeholder="Search placeholder..."
/>
</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],
}
`; `;
hotel-management/src/constants/commons.ts
+1 -1
View File
@@ -51,7 +51,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]*$/,
}; };
hotel-management/src/helpers/__tests__/validators.test.ts
+52 -13
View File
@@ -9,43 +9,82 @@ import {
} from '@helper/validators'; } from '@helper/validators';
describe('isValidPhone', () => { describe('isValidPhone', () => {
test('Should is valid phone', () => { const isValidPhone = (phone: string) =>
const result = isValidRegex(new RegExp(REGEX.PHONE), '0327212321'); isValidRegex(new RegExp(REGEX.PHONE), phone);
expect(result).toEqual(true); 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', () => { test('Should is not valid phone', () => {
const result = isValidRegex(new RegExp(REGEX.PHONE), '0327212321Abc'); 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(result).toEqual(false); 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', () => { describe('isValidDiscount', () => {
test('Should is valid discount', () => { test('Should is valid discount', () => {
const result = isValidDiscount(23); const case_1 = isValidDiscount(99.99);
const case_2 = isValidDiscount(50);
const case_3 = isValidDiscount(0);
const case_4 = isValidDiscount(100);
expect(result).toEqual(true); expect(case_1).toBeTruthy();
expect(case_2).toBeTruthy();
expect(case_3).toBeTruthy();
expect(case_4).toBeTruthy();
}); });
test('Should is not valid discount', () => { test('Should is not valid discount', () => {
const result = isValidDiscount(101); const case_1 = isValidDiscount(-1);
const case_2 = isValidDiscount(-0.99);
const case_3 = isValidDiscount(101);
expect(result).toEqual(false); expect(case_1).toBeFalsy();
expect(case_2).toBeFalsy();
expect(case_3).toBeFalsy();
}); });
}); });
describe('Should is valid string', () => { describe('Should is valid string', () => {
test('Is valid string', () => { test('Is valid string', () => {
const result = isValidString('Phan Huu Loi'); const case_1 = isValidString('Phan Huu Loi');
const case_2 = isValidString('Nezumi');
expect(result).toEqual(true); expect(case_1).toBeTruthy();
expect(case_2).toBeTruthy();
}); });
test('Should is not valid string', () => { test('Should is not valid string', () => {
const result = isValidString('Phan'); const case_1 = isValidString('Le');
const case_2 = isValidString('1tét');
const case_3 = isValidString('@!');
const case_4 = isValidString(' ');
expect(result).toEqual(false); expect(case_1).toBeFalsy();
expect(case_2).toBeFalsy();
expect(case_3).toBeFalsy();
expect(case_4).toBeFalsy();
}); });
}); });
hotel-management/src/services/__tests__/roomService.test.ts
+13
View File
@@ -10,6 +10,7 @@ import {
// Types // Types
import { IRoom } from '@type/rooms'; import { IRoom } from '@type/rooms';
import supabase from '@service/supabaseService';
const mockGetAllRooms = jest.fn(getAllRooms); const mockGetAllRooms = jest.fn(getAllRooms);
const mockUpdateRoom = jest.fn(updateRoom); const mockUpdateRoom = jest.fn(updateRoom);
@@ -44,6 +45,18 @@ describe('Rooms service', () => {
await waitFor(() => expect(result.length).toEqual(2)); await waitFor(() => expect(result.length).toEqual(2));
}); });
test('Can not fetch data', async () => {
jest.spyOn(supabase.from('rooms').select(), 'single').mockRejectedValue(() => {
return {
error: 'Error'
}
})
await mockGetAllRooms('name', 'asc', '');
expect(mockGetAllRooms).toThrow();
});
test('Should create room correctly', async () => { test('Should create room correctly', async () => {
mockCreateRoom.mockResolvedValue(sampleData); mockCreateRoom.mockResolvedValue(sampleData);