Init test case component

hotel-management/src/components/AppLayout/AppLayout.test.tsx

@@ -0,0 +1,17 @@
+import renderer from 'react-test-renderer';
+import { BrowserRouter } from 'react-router-dom';
+
+// Components
+import AppLayout from '.';
+
+describe('AppLayout testing snapshot', () => {
+  const wrapper = renderer.create(
+    <BrowserRouter>
+      <AppLayout />
+    </BrowserRouter>
+  );
+
+  test('render', () => {
+    expect(wrapper).toMatchSnapshot();
+  });
+});

hotel-management/src/components/ButtonIcon/ButtonIcon.test.tsx

@@ -0,0 +1,17 @@
+import renderer from 'react-test-renderer'
+
+// Components
+import ButtonIcon from '.'
+import { HiOutlineLogout } from 'react-icons/hi'
+
+describe('ButtonIcon testing snapshot', () => {
+  const wrapper = renderer.create(<ButtonIcon
+    aria-label="Logout"
+    icon={<HiOutlineLogout />}
+    iconStyle={{ size: '23px' }}
+  />)
+
+  test('render', () => {
+    expect(wrapper).toMatchSnapshot()
+  })
+})

hotel-management/src/components/ConfirmMessage/ConfirmMessage.test.tsx

@@ -0,0 +1,24 @@
+import renderer from 'react-test-renderer';
+
+// Components
+import ConfirmMessage from '.';
+
+describe('ConfirmMessage testing snapshot', () => {
+  const isDisable = true;
+  const message = 'Hello World!';
+  const handleOnConfirm = () => {
+    console.log('Confirm');
+  };
+
+  const wrapper = renderer.create(
+    <ConfirmMessage
+      disabled={isDisable}
+      message={message}
+      onConfirm={handleOnConfirm}
+    />
+  );
+
+  test('render', () => {
+    expect(wrapper).toMatchSnapshot();
+  });
+});

hotel-management/src/components/Form/Form.test.tsx

@@ -0,0 +1,41 @@
+import renderer from 'react-test-renderer';
+
+import Form from '.';
+import Input from '@commonStyle/Input';
+import { FormBtn } from '@page/User/styled';
+
+describe('Form testing snapshot', () => {
+  const isDisable = true;
+  const errorMessage = 'This is error message';
+  const handleOnSubmit = () => {
+    console.log('Confirm');
+  };
+  const handleOnClick = () => {
+    console.log('On Click');
+  };
+
+  const wrapper = renderer.create(
+    <Form onSubmit={handleOnSubmit}>
+      <Form.Row label="Name" error={errorMessage}>
+        <Input type="text" id="name" />
+      </Form.Row>
+
+      <Form.Row label="Price" error={errorMessage}>
+        <Input type="text" id="price" />
+      </Form.Row>
+
+      <Form.Action>
+        <FormBtn type="submit" name="submit" disabled={isDisable}>
+          Confirm
+        </FormBtn>
+        <FormBtn type="button" variations="secondary" onClick={handleOnClick}>
+          Close
+        </FormBtn>
+      </Form.Action>
+    </Form>
+  );
+
+  test('render', () => {
+    expect(wrapper).toMatchSnapshot();
+  });
+});

hotel-management/src/components/Header/Header.test.tsx

@@ -0,0 +1,10 @@
+import renderer from 'react-test-renderer'
+import Header from '.'
+
+describe('Header testing snapshot', () => {
+  const wrapper = renderer.create(<Header accountName='Nezumi' />)
+
+  test('render', () => {
+    expect(wrapper).toMatchSnapshot()
+  })
+})

hotel-management/src/components/HeaderMenu/HeaderMenu.test.tsx

@@ -0,0 +1,11 @@
+import renderer from 'react-test-renderer';
+
+import HeaderMenu from '.';
+
+describe('HeaderMenu testing snapshot', () => {
+  const wrapper = renderer.create(<HeaderMenu />);
+
+  test('render', () => {
+    expect(wrapper).toMatchSnapshot();
+  });
+});

hotel-management/src/components/Menus/Menus.test.tsx

@@ -0,0 +1,32 @@
+import renderer from 'react-test-renderer';
+
+import Menus from '.';
+import { RiEditBoxFill, RiDeleteBin2Line } from 'react-icons/ri';
+
+describe('Menus snapshot testing', () => {
+  const id = '123';
+  const handleOnClick = () => {
+    console.log('Click');
+  };
+
+  const wrapper = renderer.create(
+    <Menus>
+      <Menus.Menu>
+        <Menus.Toggle id={id} />
+
+        <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('render', () => {
+    expect(wrapper).toMatchSnapshot();
+  });
+});

hotel-management/src/components/Message/Message.test.tsx

@@ -0,0 +1,11 @@
+import renderer from 'react-test-renderer';
+
+import Message from '.';
+
+describe('Message testing snapshot', () => {
+  const wrapper = renderer.create(<Message>This is a message!</Message>);
+
+  test('render', () => {
+    expect(wrapper).toMatchSnapshot();
+  });
+});

hotel-management/src/components/Modal/Modal.test.tsx

@@ -0,0 +1,25 @@
+import renderer from 'react-test-renderer';
+
+// Components
+import Modal from '.';
+import Button from '@commonStyle/Button';
+
+describe('Modal testing snapshot', () => {
+  const wrapper = renderer.create(
+    <Modal>
+      <Modal.Open
+        modalName="room-form"
+        renderChildren={(onCloseModal) => (
+          <Button onClick={onCloseModal}>Add room</Button>
+        )}
+      />
+      <Modal.Window name="room-form" title="Add form">
+        <p>This is a windows</p>
+      </Modal.Window>
+    </Modal>
+  );
+
+  test('render', () => {
+    expect(wrapper).toMatchSnapshot();
+  });
+});

hotel-management/src/components/Nav/Nav.test.tsx

@@ -0,0 +1,17 @@
+import renderer from 'react-test-renderer';
+
+// Components
+import Nav from '.';
+import { BrowserRouter } from 'react-router-dom';
+
+describe('Nav testing snapshot', () => {
+  const wrapper = renderer.create(
+    <BrowserRouter>
+      <Nav />
+    </BrowserRouter>
+  );
+
+  test('render', () => {
+    expect(wrapper).toMatchSnapshot();
+  });
+});

hotel-management/src/components/OrderBy/Order.test.tsx

@@ -0,0 +1,27 @@
+import renderer from 'react-test-renderer';
+
+import Order from '.';
+import { BrowserRouter } from 'react-router-dom';
+
+describe('<Order.test />', () => {
+  const options = [
+    {
+      value: 'Value 1',
+      label: 'Option 1',
+    },
+    {
+      value: 'Value 2',
+      label: 'Option 2',
+    },
+  ];
+
+  const wrapper = renderer.create(
+    <BrowserRouter>
+      <Order options={options} />
+    </BrowserRouter>
+  );
+
+  test('render', () => {
+    expect(wrapper).toMatchSnapshot();
+  });
+});

hotel-management/src/components/Search/Search.test.tsx

@@ -0,0 +1,17 @@
+import renderer from 'react-test-renderer';
+
+import Search from '.';
+import { BrowserRouter } from 'react-router-dom';
+
+describe('Search testing snapshot', () => {
+  const placeHolder = 'Search placeholder...';
+  const wrapper = renderer.create(
+    <BrowserRouter>
+      <Search setPlaceHolder={placeHolder} />
+    </BrowserRouter>
+  );
+
+  test('render', () => {
+    expect(wrapper).toMatchSnapshot();
+  });
+});

hotel-management/src/components/Select/Select.test.tsx

@@ -0,0 +1,33 @@
+import renderer from 'react-test-renderer';
+
+import Select from '.';
+
+describe('Select testing snapshot', () => {
+  const options = [
+    {
+      label: 'Option 1',
+      value: 'Value 1',
+    },
+    {
+      label: 'Option 2',
+      value: 'Value 2'
+    }
+  ];
+  const value = 'Temp value';
+  const handleOnChange = () => {
+    console.log('On change');
+  }
+
+  const wrapper = renderer.create(
+    <Select
+      options={options}
+      value={value}
+      onChange={handleOnChange}
+      ariaLabel="Sort"
+    />
+  );
+
+  test('render', () => {
+    expect(wrapper).toMatchSnapshot();
+  });
+});

hotel-management/src/components/Sidebar/Sidebar.test.tsx

@@ -0,0 +1,17 @@
+import renderer from 'react-test-renderer';
+import { BrowserRouter } from 'react-router-dom';
+
+// Components
+import Sidebar from '.';
+
+describe('Sidebar testing snapshot', () => {
+  const wrapper = renderer.create(
+    <BrowserRouter>
+      <Sidebar heading="Hotel Management" />
+    </BrowserRouter>
+  );
+
+  test('render', () => {
+    expect(wrapper).toMatchSnapshot();
+  });
+});

hotel-management/src/components/SortBy/SortBy.test.tsx

@@ -0,0 +1,26 @@
+import renderer from 'react-test-renderer';
+
+import SortBy from '.';
+import { BrowserRouter } from 'react-router-dom';
+
+describe('<SortBy.test />', () => {
+  const options = [
+    {
+      label: 'Option 1',
+      value: 'Value 1',
+    },
+    {
+      label: 'Option 2',
+      value: 'Value 2',
+    },
+  ];
+  const wrapper = renderer.create(
+    <BrowserRouter>
+      <SortBy options={options} />
+    </BrowserRouter>
+  );
+
+  test('render', () => {
+    expect(wrapper).toMatchSnapshot();
+  });
+});

hotel-management/src/components/Table/Table.test.tsx

@@ -0,0 +1,50 @@
+import renderer from 'react-test-renderer';
+
+import Table from '.';
+import { IUser } from '@type/users';
+
+interface ITableRow {
+  user: IUser;
+}
+
+describe('Table testing snapshot', () => {
+  const columnName = ['Column 1', 'Column 2'];
+  const tempUser: IUser[] = [
+    {
+      id: 1,
+      name: 'Nezumi',
+      phone: '123',
+      isBooked: true,
+    },
+    {
+      id: 2,
+      name: 'Loi Phan',
+      phone: '453',
+      isBooked: false,
+    },
+  ];
+  const TableRow = ({user}: ITableRow) => {
+    const { id, name, phone, isBooked } = user;
+
+    return (
+      <Table.Row>
+        <div>{id}</div>
+        <div>{name}</div>
+        <div>{phone}</div>
+        <div>{isBooked}</div>
+      </Table.Row>
+    );
+  };
+  const renderRow = (user: IUser) => <TableRow user={user} key={user.id}/>
+
+  const wrapper = renderer.create(
+    <Table columns="10% 35% 30% 15% 10%">
+      <Table.Header headerColumn={columnName} />
+      <Table.Body<IUser> data={tempUser} render={renderRow} />
+    </Table>
+  );
+
+  test('render', () => {
+    expect(wrapper).toMatchSnapshot();
+  });
+});

hotel-management/src/components/Toast/Toast.test.tsx

@@ -0,0 +1,11 @@
+import renderer from 'react-test-renderer';
+
+import Toast from '.';
+
+describe('Toast testing snapshot', () => {
+  const wrapper = renderer.create(<Toast />);
+
+  test('render', () => {
+    expect(wrapper).toMatchSnapshot();
+  });
+});