Merge pull request #33 from Nez27/feat/unit-test-for-components

Add unit test for all components

hotel-management/.gitignore

@@ -12,6 +12,7 @@ dist
 dist-ssr
 *.local
 .vscode
+coverage
 
 src/db.json
 

hotel-management/jest.config.ts

@@ -1,11 +1,20 @@
 export default {
-  testEnvironment: "jsdom",
+  testEnvironment: 'jsdom',
   transform: {
-    "^.+\\.tsx?$": "ts-jest",
+    '^.+\\.tsx?$': 'ts-jest',
   },
   moduleNameMapper: {
-    "\\.(gif|ttf|eot|svg|png)$": "<rootDir>/test/__mocks__/fileMock.ts",
+    '\\.(gif|ttf|eot|svg|png)$': '<rootDir>/test/__mocks__/fileMock.ts',
-    "\\.(css|less|sass|scss)$": "identity-obj-proxy",
+    '\\.(css|less|sass|scss)$': 'identity-obj-proxy',
+    '@service/(.*)': ['<rootDir>/src/services/$1'],
+    '@constant/(.*)': ['<rootDir>/src/constants/$1'],
+    '@hook/(.*)': ['<rootDir>/src/hooks/$1'],
+    '@helper/(.*)': ['<rootDir>/src/helpers/$1'],
+    '@context/(.*)': ['<rootDir>/src/contexts/$1'],
+    '@component/(.*)': ['<rootDir>/src/components/$1'],
+    '@commonStyle/(.*)': ['<rootDir>/src/commons/styles/$1'],
+    '@type/(.*)': ['<rootDir>/src/types/$1'],
+    '@page/(.*)': ['<rootDir>/src/pages/$1'],
   },
   setupFilesAfterEnv: ['<rootDir>/jest.setup.ts'],
 };

hotel-management/package.json

@@ -10,16 +10,21 @@
     "preview": "vite preview",
     "test": "jest"
   },
+  "coverageReporters": [
+    "html"
+  ],
   "dependencies": {
     "@emotion/is-prop-valid": "^1.2.1",
     "@supabase/supabase-js": "^2.38.4",
     "@tanstack/react-query": "^5.8.4",
+    "@types/react-test-renderer": "^18.0.6",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-hook-form": "^7.47.0",
     "react-hot-toast": "^2.4.1",
     "react-icons": "^4.11.0",
     "react-router-dom": "^6.17.0",
+    "react-test-renderer": "^18.2.0",
     "styled-components": "^6.1.0"
   },
   "devDependencies": {

hotel-management/pnpm-lock.yaml

@@ -14,6 +14,9 @@ dependencies:
   '@tanstack/react-query':
     specifier: ^5.8.4
     version: 5.8.4(react-dom@18.2.0)(react@18.2.0)
+  '@types/react-test-renderer':
+    specifier: ^18.0.6
+    version: 18.0.6
   react:
     specifier: ^18.2.0
     version: 18.2.0
@@ -32,6 +35,9 @@ dependencies:
   react-router-dom:
     specifier: ^6.17.0
     version: 6.17.0(react-dom@18.2.0)(react@18.2.0)
+  react-test-renderer:
+    specifier: ^18.2.0
+    version: 18.2.0(react@18.2.0)
   styled-components:
     specifier: ^6.1.0
     version: 6.1.0(react-dom@18.2.0)(react@18.2.0)
@@ -1313,7 +1319,6 @@ packages:
 
   /@types/prop-types@15.7.9:
     resolution: {integrity: sha512-n1yyPsugYNSmHgxDFjicaI2+gCNjsBck8UX9kuofAKlc0h1bL+20oSF72KeNaW2DUlesbEVCFgyV2dPGTiY42g==}
-    dev: true
 
   /@types/react-dom@18.2.14:
     resolution: {integrity: sha512-V835xgdSVmyQmI1KLV2BEIUgqEuinxp9O4G6g3FqO/SqLac049E53aysv0oEFD2kHfejeKU+ZqL2bcFWj9gLAQ==}
@@ -1321,17 +1326,21 @@ packages:
       '@types/react': 18.2.29
     dev: true
 
+  /@types/react-test-renderer@18.0.6:
+    resolution: {integrity: sha512-O2JT1J3/v/NaYHYmPf2DXBSqUGmp6iwhFPicES6Pc1Y90B9Qgu99mmaBGqfZFpVuXLzF/pNJB4K9ySL3iqFeXA==}
+    dependencies:
+      '@types/react': 18.2.29
+    dev: false
+
   /@types/react@18.2.29:
     resolution: {integrity: sha512-Z+ZrIRocWtdD70j45izShRwDuiB4JZqDegqMFW/I8aG5DxxLKOzVNoq62UIO82v9bdgi+DO1jvsb9sTEZUSm+Q==}
     dependencies:
       '@types/prop-types': 15.7.9
       '@types/scheduler': 0.16.5
       csstype: 3.1.2
-    dev: true
 
   /@types/scheduler@0.16.5:
     resolution: {integrity: sha512-s/FPdYRmZR8SjLWGMCuax7r3qCWQw9QKHzXVukAuuIJkXkDRwp+Pu5LMIVFi0Fxbav35WURicYr8u1QsoybnQw==}
-    dev: true
 
   /@types/semver@7.5.3:
     resolution: {integrity: sha512-OxepLK9EuNEIPxWNME+C6WwbRAOOI2o2BaQEGzz5Lu2e4Z5eDnEo+/aVEDMIXywoJitJ7xWd641wrGLZdtwRyw==}
@@ -3706,6 +3715,11 @@ packages:
     resolution: {integrity: sha512-ub5E4+FBPKwAZx0UwIQOjYWGHTEq5sPqHQNRN8Z9e4A7u3Tj1weLJsL59yH9vmvqEtBHaOmT6cYQKIZOxp35FQ==}
     dev: true
 
+  /object-assign@4.1.1:
+    resolution: {integrity: sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==}
+    engines: {node: '>=0.10.0'}
+    dev: false
+
   /object-inspect@1.13.1:
     resolution: {integrity: sha512-5qoj1RUiKOMsCCNLV1CBiPYE10sziTsnmNxkAI/rZhiD63CF7IqdFGC/XzjWjpSgLf0LxXX3bDFIh0E18f6UhQ==}
     dev: true
@@ -3968,7 +3982,6 @@ packages:
 
   /react-is@18.2.0:
     resolution: {integrity: sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==}
-    dev: true
 
   /react-refresh@0.14.0:
     resolution: {integrity: sha512-wViHqhAd8OHeLS/IRMJjTSDHF3U9eWi62F/MledQGPdJGDhodXJ9PBLNGr6WWL7qlH12Mt3TyTpbS+hGXMjCzQ==}
@@ -3998,6 +4011,27 @@ packages:
       react: 18.2.0
     dev: false
 
+  /react-shallow-renderer@16.15.0(react@18.2.0):
+    resolution: {integrity: sha512-oScf2FqQ9LFVQgA73vr86xl2NaOIX73rh+YFqcOp68CWj56tSfgtGKrEbyhCj0rSijyG9M1CYprTh39fBi5hzA==}
+    peerDependencies:
+      react: ^16.0.0 || ^17.0.0 || ^18.0.0
+    dependencies:
+      object-assign: 4.1.1
+      react: 18.2.0
+      react-is: 18.2.0
+    dev: false
+
+  /react-test-renderer@18.2.0(react@18.2.0):
+    resolution: {integrity: sha512-JWD+aQ0lh2gvh4NM3bBM42Kx+XybOxCpgYK7F8ugAlpaTSnWsX+39Z4XkOykGZAHrjwwTZT3x3KxswVWxHPUqA==}
+    peerDependencies:
+      react: ^18.2.0
+    dependencies:
+      react: 18.2.0
+      react-is: 18.2.0
+      react-shallow-renderer: 16.15.0(react@18.2.0)
+      scheduler: 0.23.0
+    dev: false
+
   /react@18.2.0:
     resolution: {integrity: sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==}
     engines: {node: '>=0.10.0'}

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', () => {
+  const wrapper = renderer.create(
+    <BrowserRouter>
+      <AppLayout />
+    </BrowserRouter>
+  );
+
+  test('Should render correctly', () => {
+    expect(wrapper).toMatchSnapshot();
+  });
+});

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

@@ -0,0 +1,207 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`AppLayout Should render correctly 1`] = `
+<div
+  className="sc-iCoHzw jFLeHb"
+>
+  <header
+    className="sc-dlniIP cClxoS"
+  >
+    <p>
+      Hi, 
+      Admin
+      !
+    </p>
+    <ul
+      className="sc-gtsqUy gOWXQs"
+    >
+      <li>
+        <button
+          className="sc-bdnyFh bxHnoO"
+          iconStyle={
+            {
+              "size": "23px",
+            }
+          }
+          isHaveChildren={false}
+          style={
+            {
+              "backgroundColor": undefined,
+              "color": undefined,
+              "fontSize": undefined,
+            }
+          }
+        >
+          <svg
+            fill="currentColor"
+            height="1em"
+            stroke="currentColor"
+            strokeWidth="0"
+            style={
+              {
+                "color": undefined,
+              }
+            }
+            viewBox="0 0 512 512"
+            width="1em"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M258.9 48C141.92 46.42 46.42 141.92 48 258.9c1.56 112.19 92.91 203.54 205.1 205.1 117 1.6 212.48-93.9 210.88-210.88C462.44 140.91 371.09 49.56 258.9 48zm126.42 327.25a4 4 0 01-6.14-.32 124.27 124.27 0 00-32.35-29.59C321.37 329 289.11 320 256 320s-65.37 9-90.83 25.34a124.24 124.24 0 00-32.35 29.58 4 4 0 01-6.14.32A175.32 175.32 0 0180 259c-1.63-97.31 78.22-178.76 175.57-179S432 158.81 432 256a175.32 175.32 0 01-46.68 119.25z"
+            />
+            <path
+              d="M256 144c-19.72 0-37.55 7.39-50.22 20.82s-19 32-17.57 51.93C191.11 256 221.52 288 256 288s64.83-32 67.79-71.24c1.48-19.74-4.8-38.14-17.68-51.82C293.39 151.44 275.59 144 256 144z"
+            />
+          </svg>
+           
+          <span />
+        </button>
+      </li>
+      <li>
+        <button
+          className="sc-bdnyFh bxHnoO"
+          iconStyle={
+            {
+              "size": "23px",
+            }
+          }
+          isHaveChildren={false}
+          style={
+            {
+              "backgroundColor": undefined,
+              "color": undefined,
+              "fontSize": undefined,
+            }
+          }
+        >
+          <svg
+            aria-hidden="true"
+            fill="none"
+            height="1em"
+            stroke="currentColor"
+            strokeWidth="2"
+            style={
+              {
+                "color": undefined,
+              }
+            }
+            viewBox="0 0 24 24"
+            width="1em"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+            />
+          </svg>
+           
+          <span />
+        </button>
+      </li>
+    </ul>
+  </header>
+  <aside
+    className="sc-jSFipO ejTmsl"
+  >
+    <h1
+      className="sc-gKAaef hNxcoF"
+    >
+      Hotel Management
+    </h1>
+    <nav
+      className="sc-hKFymg eIMPQI"
+    >
+      <a
+        className="sc-eCAqax hQZHUY"
+        href="/dashboard"
+        onClick={[Function]}
+      >
+        <svg
+          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
+            d="M0 0h24v24H0z"
+            fill="none"
+          />
+          <path
+            d="M11 21H5c-1.1 0-2-.9-2-2V5c0-1.1.9-2 2-2h6v18zm2 0h6c1.1 0 2-.9 2-2v-7h-8v9zm8-11V5c0-1.1-.9-2-2-2h-6v7h8z"
+          />
+        </svg>
+        <span>
+          Dashboard
+        </span>
+      </a>
+      <a
+        className="sc-eCAqax hQZHUY"
+        href="/user"
+        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
+            d="M4.5 6.375a4.125 4.125 0 118.25 0 4.125 4.125 0 01-8.25 0zM14.25 8.625a3.375 3.375 0 116.75 0 3.375 3.375 0 01-6.75 0zM1.5 19.125a7.125 7.125 0 0114.25 0v.003l-.001.119a.75.75 0 01-.363.63 13.067 13.067 0 01-6.761 1.873c-2.472 0-4.786-.684-6.76-1.873a.75.75 0 01-.364-.63l-.001-.122zM17.25 19.128l-.001.144a2.25 2.25 0 01-.233.96 10.088 10.088 0 005.06-1.01.75.75 0 00.42-.643 4.875 4.875 0 00-6.957-4.611 8.586 8.586 0 011.71 5.157v.003z"
+          />
+        </svg>
+        <span>
+          User
+        </span>
+      </a>
+      <a
+        className="sc-eCAqax hQZHUY"
+        href="/room"
+        onClick={[Function]}
+      >
+        <svg
+          fill="currentColor"
+          height="1em"
+          stroke="currentColor"
+          strokeWidth="0"
+          style={
+            {
+              "color": undefined,
+            }
+          }
+          viewBox="0 0 16 16"
+          width="1em"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M6.5 14.5v-3.505c0-.245.25-.495.5-.495h2c.25 0 .5.25.5.5v3.5a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5Z"
+          />
+        </svg>
+        <span>
+          Room
+        </span>
+      </a>
+    </nav>
+  </aside>
+  <main
+    className="sc-fujznN cdRedX"
+  />
+</div>
+`;

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

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

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

@@ -0,0 +1,44 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ButtonIcon Should render correctly 1`] = `
+<button
+  className="sc-bdnyFh bxHnoO"
+  iconStyle={
+    {
+      "size": "23px",
+    }
+  }
+  isHaveChildren={false}
+  style={
+    {
+      "backgroundColor": undefined,
+      "color": undefined,
+      "fontSize": undefined,
+    }
+  }
+>
+  <svg
+    aria-hidden="true"
+    fill="none"
+    height="1em"
+    stroke="currentColor"
+    strokeWidth="2"
+    style={
+      {
+        "color": undefined,
+      }
+    }
+    viewBox="0 0 24 24"
+    width="1em"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+   
+  <span />
+</button>
+`;

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

@@ -0,0 +1,22 @@
+import renderer from 'react-test-renderer';
+
+// Components
+import ConfirmMessage from '.';
+
+describe('ConfirmMessage', () => {
+  const isDisable = true;
+  const message = 'Hello World!';
+  const handleOnConfirm = jest.fn();
+
+  const wrapper = renderer.create(
+    <ConfirmMessage
+      disabled={isDisable}
+      message={message}
+      onConfirm={handleOnConfirm}
+    />
+  );
+
+  test('Should render correctly', () => {
+    expect(wrapper).toMatchSnapshot();
+  });
+});

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

@@ -0,0 +1,28 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ConfirmMessage Should render correctly 1`] = `
+<div
+  className="sc-bdnyFh dukbvo"
+>
+  <p>
+    Hello World!
+  </p>
+  <div>
+    <button
+      className="sc-gtsqUy eZzwwl"
+      disabled={true}
+      onClick={[MockFunction]}
+      variations="danger"
+    >
+      Delete
+    </button>
+    <button
+      className="sc-gtsqUy JDRgw"
+      disabled={true}
+      variations="secondary"
+    >
+      Cancel
+    </button>
+  </div>
+</div>
+`;

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

@@ -0,0 +1,40 @@
+import renderer from 'react-test-renderer';
+
+// Components
+import Form from '.';
+import Input from '@commonStyle/Input';
+
+// Styled
+import { FormBtn } from '@page/User/styled';
+
+describe('Form ', () => {
+  const isDisable = true;
+  const errorMessage = 'This is error message';
+  const handleOnSubmit = jest.fn();
+  const handleOnClick = jest.fn();
+
+  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('Should render correctly', () => {
+    expect(wrapper).toMatchSnapshot();
+  });
+});

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

@@ -0,0 +1,72 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Form  Should render correctly 1`] = `
+<form
+  className="sc-bdnyFh bzxSLR"
+  onSubmit={[MockFunction]}
+>
+  <div
+    className="sc-dlniIP gZHESL"
+  >
+    <label
+      className="sc-hKFymg ddFGOI"
+    >
+      Name
+    </label>
+    <div>
+      <input
+        className="sc-jSFipO enjwJE"
+        id="name"
+        type="text"
+      />
+      <p
+        className="sc-eCAqax bvOWPP"
+      >
+        This is error message
+      </p>
+    </div>
+  </div>
+  <div
+    className="sc-dlniIP gZHESL"
+  >
+    <label
+      className="sc-hKFymg ddFGOI"
+    >
+      Price
+    </label>
+    <div>
+      <input
+        className="sc-jSFipO enjwJE"
+        id="price"
+        type="text"
+      />
+      <p
+        className="sc-eCAqax bvOWPP"
+      >
+        This is error message
+      </p>
+    </div>
+  </div>
+  <div
+    className="sc-gtsqUy idhRSV"
+  >
+    <button
+      className="sc-gKAaef sc-jrsKJM gifCOZ KLoQf"
+      disabled={true}
+      name="submit"
+      type="submit"
+      variations="primary"
+    >
+      Confirm
+    </button>
+    <button
+      className="sc-gKAaef sc-jrsKJM gbgZUe KLoQf"
+      onClick={[MockFunction]}
+      type="button"
+      variations="secondary"
+    >
+      Close
+    </button>
+  </div>
+</form>
+`;

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

@@ -0,0 +1,12 @@
+import renderer from 'react-test-renderer';
+
+// Components
+import Header from '.';
+
+describe('Header', () => {
+  const wrapper = renderer.create(<Header accountName="Nezumi" />);
+
+  test('Should render correctly', () => {
+    expect(wrapper).toMatchSnapshot();
+  });
+});

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

@@ -0,0 +1,101 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Header Should render correctly 1`] = `
+<header
+  className="sc-dlniIP cClxoS"
+>
+  <p>
+    Hi, 
+    Nezumi
+    !
+  </p>
+  <ul
+    className="sc-gtsqUy gOWXQs"
+  >
+    <li>
+      <button
+        className="sc-bdnyFh bxHnoO"
+        iconStyle={
+          {
+            "size": "23px",
+          }
+        }
+        isHaveChildren={false}
+        style={
+          {
+            "backgroundColor": undefined,
+            "color": undefined,
+            "fontSize": undefined,
+          }
+        }
+      >
+        <svg
+          fill="currentColor"
+          height="1em"
+          stroke="currentColor"
+          strokeWidth="0"
+          style={
+            {
+              "color": undefined,
+            }
+          }
+          viewBox="0 0 512 512"
+          width="1em"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M258.9 48C141.92 46.42 46.42 141.92 48 258.9c1.56 112.19 92.91 203.54 205.1 205.1 117 1.6 212.48-93.9 210.88-210.88C462.44 140.91 371.09 49.56 258.9 48zm126.42 327.25a4 4 0 01-6.14-.32 124.27 124.27 0 00-32.35-29.59C321.37 329 289.11 320 256 320s-65.37 9-90.83 25.34a124.24 124.24 0 00-32.35 29.58 4 4 0 01-6.14.32A175.32 175.32 0 0180 259c-1.63-97.31 78.22-178.76 175.57-179S432 158.81 432 256a175.32 175.32 0 01-46.68 119.25z"
+          />
+          <path
+            d="M256 144c-19.72 0-37.55 7.39-50.22 20.82s-19 32-17.57 51.93C191.11 256 221.52 288 256 288s64.83-32 67.79-71.24c1.48-19.74-4.8-38.14-17.68-51.82C293.39 151.44 275.59 144 256 144z"
+          />
+        </svg>
+         
+        <span />
+      </button>
+    </li>
+    <li>
+      <button
+        className="sc-bdnyFh bxHnoO"
+        iconStyle={
+          {
+            "size": "23px",
+          }
+        }
+        isHaveChildren={false}
+        style={
+          {
+            "backgroundColor": undefined,
+            "color": undefined,
+            "fontSize": undefined,
+          }
+        }
+      >
+        <svg
+          aria-hidden="true"
+          fill="none"
+          height="1em"
+          stroke="currentColor"
+          strokeWidth="2"
+          style={
+            {
+              "color": undefined,
+            }
+          }
+          viewBox="0 0 24 24"
+          width="1em"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          />
+        </svg>
+         
+        <span />
+      </button>
+    </li>
+  </ul>
+</header>
+`;

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

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

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

@@ -0,0 +1,92 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`HeaderMenu Should render correctly 1`] = `
+<ul
+  className="sc-gtsqUy gOWXQs"
+>
+  <li>
+    <button
+      className="sc-bdnyFh bxHnoO"
+      iconStyle={
+        {
+          "size": "23px",
+        }
+      }
+      isHaveChildren={false}
+      style={
+        {
+          "backgroundColor": undefined,
+          "color": undefined,
+          "fontSize": undefined,
+        }
+      }
+    >
+      <svg
+        fill="currentColor"
+        height="1em"
+        stroke="currentColor"
+        strokeWidth="0"
+        style={
+          {
+            "color": undefined,
+          }
+        }
+        viewBox="0 0 512 512"
+        width="1em"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M258.9 48C141.92 46.42 46.42 141.92 48 258.9c1.56 112.19 92.91 203.54 205.1 205.1 117 1.6 212.48-93.9 210.88-210.88C462.44 140.91 371.09 49.56 258.9 48zm126.42 327.25a4 4 0 01-6.14-.32 124.27 124.27 0 00-32.35-29.59C321.37 329 289.11 320 256 320s-65.37 9-90.83 25.34a124.24 124.24 0 00-32.35 29.58 4 4 0 01-6.14.32A175.32 175.32 0 0180 259c-1.63-97.31 78.22-178.76 175.57-179S432 158.81 432 256a175.32 175.32 0 01-46.68 119.25z"
+        />
+        <path
+          d="M256 144c-19.72 0-37.55 7.39-50.22 20.82s-19 32-17.57 51.93C191.11 256 221.52 288 256 288s64.83-32 67.79-71.24c1.48-19.74-4.8-38.14-17.68-51.82C293.39 151.44 275.59 144 256 144z"
+        />
+      </svg>
+       
+      <span />
+    </button>
+  </li>
+  <li>
+    <button
+      className="sc-bdnyFh bxHnoO"
+      iconStyle={
+        {
+          "size": "23px",
+        }
+      }
+      isHaveChildren={false}
+      style={
+        {
+          "backgroundColor": undefined,
+          "color": undefined,
+          "fontSize": undefined,
+        }
+      }
+    >
+      <svg
+        aria-hidden="true"
+        fill="none"
+        height="1em"
+        stroke="currentColor"
+        strokeWidth="2"
+        style={
+          {
+            "color": undefined,
+          }
+        }
+        viewBox="0 0 24 24"
+        width="1em"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </svg>
+       
+      <span />
+    </button>
+  </li>
+</ul>
+`;

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

@@ -0,0 +1,31 @@
+import renderer from 'react-test-renderer';
+
+// Components
+import Menus from '.';
+import { RiEditBoxFill, RiDeleteBin2Line } from 'react-icons/ri';
+
+describe('Menus', () => {
+  const id = '123';
+  const handleOnClick = jest.fn();
+
+  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('Should render correctly', () => {
+    expect(wrapper).toMatchSnapshot();
+  });
+});

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

@@ -0,0 +1,35 @@
+// 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"
+    >
+      <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>
+`;

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

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

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

@@ -0,0 +1,9 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Message Should render correctly 1`] = `
+<p
+  className="sc-bdnyFh fIKUZt"
+>
+  This is a message!
+</p>
+`;

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', () => {
+  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('Should render correctly', () => {
+    expect(wrapper).toMatchSnapshot();
+  });
+});

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

@@ -0,0 +1,11 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Modal Should render correctly 1`] = `
+<button
+  className="sc-eCAqax jeAcqZ"
+  onClick={[Function]}
+  variations="primary"
+>
+  Add room
+</button>
+`;

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

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

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

@@ -0,0 +1,94 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Nav Should render correctly 1`] = `
+<nav
+  className="sc-bdnyFh gGCifp"
+>
+  <a
+    className="sc-gtsqUy gbSQWi"
+    href="/dashboard"
+    onClick={[Function]}
+  >
+    <svg
+      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
+        d="M0 0h24v24H0z"
+        fill="none"
+      />
+      <path
+        d="M11 21H5c-1.1 0-2-.9-2-2V5c0-1.1.9-2 2-2h6v18zm2 0h6c1.1 0 2-.9 2-2v-7h-8v9zm8-11V5c0-1.1-.9-2-2-2h-6v7h8z"
+      />
+    </svg>
+    <span>
+      Dashboard
+    </span>
+  </a>
+  <a
+    className="sc-gtsqUy gbSQWi"
+    href="/user"
+    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
+        d="M4.5 6.375a4.125 4.125 0 118.25 0 4.125 4.125 0 01-8.25 0zM14.25 8.625a3.375 3.375 0 116.75 0 3.375 3.375 0 01-6.75 0zM1.5 19.125a7.125 7.125 0 0114.25 0v.003l-.001.119a.75.75 0 01-.363.63 13.067 13.067 0 01-6.761 1.873c-2.472 0-4.786-.684-6.76-1.873a.75.75 0 01-.364-.63l-.001-.122zM17.25 19.128l-.001.144a2.25 2.25 0 01-.233.96 10.088 10.088 0 005.06-1.01.75.75 0 00.42-.643 4.875 4.875 0 00-6.957-4.611 8.586 8.586 0 011.71 5.157v.003z"
+      />
+    </svg>
+    <span>
+      User
+    </span>
+  </a>
+  <a
+    className="sc-gtsqUy gbSQWi"
+    href="/room"
+    onClick={[Function]}
+  >
+    <svg
+      fill="currentColor"
+      height="1em"
+      stroke="currentColor"
+      strokeWidth="0"
+      style={
+        {
+          "color": undefined,
+        }
+      }
+      viewBox="0 0 16 16"
+      width="1em"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M6.5 14.5v-3.505c0-.245.25-.495.5-.495h2c.25 0 .5.25.5.5v3.5a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5Z"
+      />
+    </svg>
+    <span>
+      Room
+    </span>
+  </a>
+</nav>
+`;

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

@@ -0,0 +1,28 @@
+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/__snapshots__/Order.test.tsx.snap

@@ -0,0 +1,24 @@
+// 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>
+`;

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

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

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

@@ -0,0 +1,9 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Search Should render correctly 1`] = `
+<input
+  className="sc-bdnyFh eAgOPb"
+  onChange={[Function]}
+  placeholder="Search placeholder..."
+/>
+`;

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

@@ -0,0 +1,32 @@
+import renderer from 'react-test-renderer';
+
+// Components
+import Select from '.';
+
+describe('Select', () => {
+  const options = [
+    {
+      label: 'Option 1',
+      value: 'Value 1',
+    },
+    {
+      label: 'Option 2',
+      value: 'Value 2'
+    }
+  ];
+  const value = 'Temp value';
+  const handleOnChange = jest.fn();
+
+  const wrapper = renderer.create(
+    <Select
+      options={options}
+      value={value}
+      onChange={handleOnChange}
+      ariaLabel="Sort"
+    />
+  );
+
+  test('Should render correctly', () => {
+    expect(wrapper).toMatchSnapshot();
+  });
+});

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

@@ -0,0 +1,21 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Select Should render correctly 1`] = `
+<select
+  aria-label="Sort"
+  className="sc-bdnyFh dqXTRP"
+  onChange={[MockFunction]}
+  value="Temp value"
+>
+  <option
+    value="Value 1"
+  >
+    Option 1
+  </option>
+  <option
+    value="Value 2"
+  >
+    Option 2
+  </option>
+</select>
+`;

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', () => {
+  const wrapper = renderer.create(
+    <BrowserRouter>
+      <Sidebar heading="Hotel Management" />
+    </BrowserRouter>
+  );
+
+  test('Should render correctly', () => {
+    expect(wrapper).toMatchSnapshot();
+  });
+});

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

@@ -0,0 +1,103 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Sidebar Should render correctly 1`] = `
+<aside
+  className="sc-dlniIP dfcuiS"
+>
+  <h1
+    className="sc-hKFymg iQEJzQ"
+  >
+    Hotel Management
+  </h1>
+  <nav
+    className="sc-bdnyFh gGCifp"
+  >
+    <a
+      className="sc-gtsqUy gbSQWi"
+      href="/dashboard"
+      onClick={[Function]}
+    >
+      <svg
+        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
+          d="M0 0h24v24H0z"
+          fill="none"
+        />
+        <path
+          d="M11 21H5c-1.1 0-2-.9-2-2V5c0-1.1.9-2 2-2h6v18zm2 0h6c1.1 0 2-.9 2-2v-7h-8v9zm8-11V5c0-1.1-.9-2-2-2h-6v7h8z"
+        />
+      </svg>
+      <span>
+        Dashboard
+      </span>
+    </a>
+    <a
+      className="sc-gtsqUy gbSQWi"
+      href="/user"
+      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
+          d="M4.5 6.375a4.125 4.125 0 118.25 0 4.125 4.125 0 01-8.25 0zM14.25 8.625a3.375 3.375 0 116.75 0 3.375 3.375 0 01-6.75 0zM1.5 19.125a7.125 7.125 0 0114.25 0v.003l-.001.119a.75.75 0 01-.363.63 13.067 13.067 0 01-6.761 1.873c-2.472 0-4.786-.684-6.76-1.873a.75.75 0 01-.364-.63l-.001-.122zM17.25 19.128l-.001.144a2.25 2.25 0 01-.233.96 10.088 10.088 0 005.06-1.01.75.75 0 00.42-.643 4.875 4.875 0 00-6.957-4.611 8.586 8.586 0 011.71 5.157v.003z"
+        />
+      </svg>
+      <span>
+        User
+      </span>
+    </a>
+    <a
+      className="sc-gtsqUy gbSQWi"
+      href="/room"
+      onClick={[Function]}
+    >
+      <svg
+        fill="currentColor"
+        height="1em"
+        stroke="currentColor"
+        strokeWidth="0"
+        style={
+          {
+            "color": undefined,
+          }
+        }
+        viewBox="0 0 16 16"
+        width="1em"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M6.5 14.5v-3.505c0-.245.25-.495.5-.495h2c.25 0 .5.25.5.5v3.5a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5Z"
+        />
+      </svg>
+      <span>
+        Room
+      </span>
+    </a>
+  </nav>
+</aside>
+`;

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

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

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

@@ -0,0 +1,21 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`SortBy Should render correctly 1`] = `
+<select
+  aria-label="Sort"
+  className="sc-bdnyFh dqXTRP"
+  onChange={[Function]}
+  value=""
+>
+  <option
+    value="Value 1"
+  >
+    Option 1
+  </option>
+  <option
+    value="Value 2"
+  >
+    Option 2
+  </option>
+</select>
+`;

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

@@ -0,0 +1,53 @@
+import renderer from 'react-test-renderer';
+
+// Components
+import Table from '.';
+
+// Types
+import { IUser } from '@type/users';
+
+interface ITableRow {
+  user: IUser;
+}
+
+describe('Table', () => {
+  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('Should render correctly', () => {
+    expect(wrapper).toMatchSnapshot();
+  });
+});

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

@@ -0,0 +1,53 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Table Should render correctly 1`] = `
+<div
+  className="sc-bdnyFh eEibLN"
+>
+  <div
+    className="sc-gtsqUy sc-eCAqax eucOOU hcIWQg"
+    columns="10% 35% 30% 15% 10%"
+  >
+    <div>
+      Column 1
+    </div>
+    <div>
+      Column 2
+    </div>
+  </div>
+  <div
+    className="sc-dlniIP EYkDq"
+  >
+    <div
+      className="sc-gtsqUy sc-hKFymg eucOOU jwwTFT"
+      columns="10% 35% 30% 15% 10%"
+    >
+      <div>
+        1
+      </div>
+      <div>
+        Nezumi
+      </div>
+      <div>
+        123
+      </div>
+      <div />
+    </div>
+    <div
+      className="sc-gtsqUy sc-hKFymg eucOOU jwwTFT"
+      columns="10% 35% 30% 15% 10%"
+    >
+      <div>
+        2
+      </div>
+      <div>
+        Loi Phan
+      </div>
+      <div>
+        453
+      </div>
+      <div />
+    </div>
+  </div>
+</div>
+`;

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

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

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

@@ -0,0 +1,20 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Toast Should render correctly 1`] = `
+<div
+  onMouseEnter={[Function]}
+  onMouseLeave={[Function]}
+  style={
+    {
+      "bottom": 16,
+      "left": 16,
+      "margin": "8px",
+      "pointerEvents": "none",
+      "position": "fixed",
+      "right": 16,
+      "top": 16,
+      "zIndex": 2000,
+    }
+  }
+/>
+`;