Improve test case function

2026-09-22 20:01:59 +00:00 · 2023-11-27 17:44:05 +07:00
parent ea1187291c
commit ddf96492c9
10 changed files with 440 additions and 121 deletions
@@ -1,31 +1,60 @@
-import renderer from 'react-test-renderer';
-
 // Components
 import Menus from '.';
 import { RiEditBoxFill, RiDeleteBin2Line } from 'react-icons/ri';
+import { RenderResult, fireEvent, render } from '@testing-library/react';

 describe('Menus', () => {
  const id = '123';
  const handleOnClick = jest.fn();

-  const wrapper = renderer.create(
-    <Menus>
-      <Menus.Menu>
-        <Menus.Toggle id={id} />
+  let wrapper: RenderResult | null = null;

-        <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>
-  );
+  beforeEach(() => {
+    wrapper = render(
+      <Menus>
+        <Menus.Menu>
+          <Menus.Toggle id={id} />

-  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();
  });
+
+  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

 exports[`Menus Should render correctly 1`] = `
-<div
-  className="sc-gtsqUy lbsvcs"
->
-  <button
-    aria-label="Menu item 123"
-    className="sc-hKFymg cjUckY"
-    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"
+{
+  "asFragment": [Function],
+  "baseElement": <body>
+    <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>
+  </body>,
+  "container": <div>
+    <div
+      class="sc-gtsqUy lbsvcs"
    >
-      <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>
+      <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],
+}
 `;
@@ -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,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();
+  });
+});
@@ -1,24 +1,94 @@
 // 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>
+{
+  "asFragment": [Function],
+  "baseElement": <body>
+    <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>
+  </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],
+}
 `;
@@ -1,18 +1,32 @@
-import renderer from 'react-test-renderer';
 import { BrowserRouter } from 'react-router-dom';

 // Components
 import Search from '.';
+import { RenderResult, fireEvent, render } from '@testing-library/react';
+
+jest.useFakeTimers();

 describe('Search', () => {
  const placeHolder = 'Search placeholder...';
-  const wrapper = renderer.create(
-    <BrowserRouter>
-      <Search setPlaceHolder={placeHolder} />
-    </BrowserRouter>
-  );
+  let wrapper: RenderResult | null = null;
+
+  beforeEach(() => {
+    wrapper = render(
+      <BrowserRouter>
+        <Search setPlaceHolder={placeHolder} />
+      </BrowserRouter>
+    );
+  })

  test('Should render correctly', () => {
    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);
+  });
 });
@@ -1,9 +1,72 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP

 exports[`Search Should render correctly 1`] = `
-<input
-  className="sc-bdnyFh eAgOPb"
-  onChange={[Function]}
-  placeholder="Search placeholder..."
-/>
+{
+  "asFragment": [Function],
+  "baseElement": <body>
+    <div>
+      <input
+        class="sc-bdnyFh eAgOPb"
+        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],
+}
 `;
@@ -51,7 +51,7 @@ const FORM = {
 };

 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,
  NUMBER: /^[0-9]*$/,
 };
@@ -9,43 +9,82 @@ import {
 } from '@helper/validators';

 describe('isValidPhone', () => {
-  test('Should is valid phone', () => {
-    const result = isValidRegex(new RegExp(REGEX.PHONE), '0327212321');
+  const isValidPhone = (phone: string) =>
+    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', () => {
-    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', () => {
  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', () => {
-    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', () => {
  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', () => {
-    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();
  });
 });
@@ -10,6 +10,7 @@ import {

 // Types
 import { IRoom } from '@type/rooms';
+import supabase from '@service/supabaseService';

 const mockGetAllRooms = jest.fn(getAllRooms);
 const mockUpdateRoom = jest.fn(updateRoom);
@@ -44,6 +45,18 @@ describe('Rooms service', () => {
    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 () => {
    mockCreateRoom.mockResolvedValue(sampleData);