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

Add unit test for pages components

hotel-management/.gitignore

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

hotel-management/jest.config.ts

@@ -1,4 +1,7 @@
-export default {
+import type { Config } from 'jest';
+
+const config: Config = {
+  verbose: true,
   testEnvironment: 'jsdom',
   transform: {
     '^.+\\.tsx?$': 'ts-jest',
@@ -17,4 +20,10 @@ export default {
     '@page/(.*)': ['<rootDir>/src/pages/$1'],
   },
   setupFilesAfterEnv: ['<rootDir>/jest.setup.ts'],
+  setupFiles: ['<rootDir>/.jest/setEnvVar.ts'],
+  testEnvironmentOptions: {
+    customExportConditions: [''],
+  },
 };
+
+export default config;

hotel-management/package.json

@@ -49,6 +49,7 @@
     "ts-node": "^10.9.1",
     "typescript": "^5.0.2",
     "vite": "^4.4.5",
+    "vite-plugin-environment": "^1.1.3",
     "vite-tsconfig-paths": "^4.2.1"
   }
 }

hotel-management/pnpm-lock.yaml

@@ -106,6 +106,9 @@ devDependencies:
   vite:
     specifier: ^4.4.5
     version: 4.4.11(@types/node@20.9.2)
+  vite-plugin-environment:
+    specifier: ^1.1.3
+    version: 1.1.3(vite@4.4.11)
   vite-tsconfig-paths:
     specifier: ^4.2.1
     version: 4.2.1(typescript@5.2.2)(vite@4.4.11)
@@ -4580,6 +4583,14 @@ packages:
       convert-source-map: 2.0.0
     dev: true
 
+  /vite-plugin-environment@1.1.3(vite@4.4.11):
+    resolution: {integrity: sha512-9LBhB0lx+2lXVBEWxFZC+WO7PKEyE/ykJ7EPWCq95NEcCpblxamTbs5Dm3DLBGzwODpJMEnzQywJU8fw6XGGGA==}
+    peerDependencies:
+      vite: '>= 2.7'
+    dependencies:
+      vite: 4.4.11(@types/node@20.9.2)
+    dev: true
+
   /vite-tsconfig-paths@4.2.1(typescript@5.2.2)(vite@4.4.11):
     resolution: {integrity: sha512-GNUI6ZgPqT3oervkvzU+qtys83+75N/OuDaQl7HmOqFTb0pjZsuARrRipsyJhJ3enqV8beI1xhGbToR4o78nSQ==}
     peerDependencies:

hotel-management/src/constants/config.ts

@@ -1,6 +1,6 @@
 const DEFAULT_SORT_BY = 'id';
 const DEFAULT_ORDER_BY = 'asc';
 const supabaseUrl = 'https://pjqujsjzzdrlrgqbxepe.supabase.co'
-const supabaseKey = import.meta.env.VITE_SUPABASE_KEY
+const supabaseKey = process.env.VITE_SUPABASE_KEY
 
 export { DEFAULT_SORT_BY, DEFAULT_ORDER_BY, supabaseKey, supabaseUrl };

hotel-management/src/pages/Room/__tests__/RoomForm.test.tsx

@@ -0,0 +1,22 @@
+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();
+  });
+});

hotel-management/src/pages/Room/__tests__/RoomRow.test.tsx

@@ -0,0 +1,28 @@
+import renderer from 'react-test-renderer';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+
+// Types
+import { IRoom } from '@type/rooms';
+
+// Components
+import RoomRow from '../RoomRow';
+
+describe('RoomRow', () => {
+  const tempRoom: IRoom = {
+    id: 1,
+    name: 'Temp Room',
+    price: 250,
+    status: 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();
+  });
+});

hotel-management/src/pages/Room/__tests__/RoomTable.test.tsx

@@ -0,0 +1,22 @@
+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();
+  });
+});

hotel-management/src/pages/Room/__tests__/__snapshots__/RoomForm.test.tsx.snap

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

hotel-management/src/pages/Room/__tests__/__snapshots__/RoomRow.test.tsx.snap

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

hotel-management/src/pages/Room/__tests__/__snapshots__/RoomTable.test.tsx.snap

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

hotel-management/src/pages/Room/__tests__/__snapshots__/index.test.tsx.snap

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

hotel-management/src/pages/Room/__tests__/index.test.tsx

@@ -0,0 +1,22 @@
+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();
+  });
+});

hotel-management/src/pages/Room/index.tsx

@@ -1,5 +1,5 @@
 // Components
-import RoomTable from './RomTable';
+import RoomTable from './RoomTable';
 import RoomForm from './RoomForm';
 import Modal from '@component/Modal';
 

hotel-management/src/pages/User/__tests__/UserForm.test.tsx

@@ -0,0 +1,22 @@
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { BrowserRouter } from 'react-router-dom';
+import renderer from 'react-test-renderer';
+
+// Components
+import UserForm from '../UserForm';
+
+describe('UserForm', () => {
+  const queryClient = new QueryClient();
+
+  const wrapper = renderer.create(
+    <QueryClientProvider client={queryClient}>
+      <BrowserRouter>
+        <UserForm />
+      </BrowserRouter>
+    </QueryClientProvider>
+  );
+
+  test('Should render correctly', () => {
+    expect(wrapper).toMatchSnapshot();
+  });
+});

hotel-management/src/pages/User/__tests__/UserRow.test.tsx

@@ -0,0 +1,27 @@
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import renderer from 'react-test-renderer';
+
+// Types
+import { IUser } from '@type/users';
+
+// Components
+import UserRow from '../UserRow';
+
+describe('UserRow', () => {
+  const tempUser: IUser = {
+    id: 1,
+    name: 'Temp Room',
+    phone: '0324421232',
+    isBooked: false,
+  };
+  const queryClient = new QueryClient();
+  const wrapper = renderer.create(
+    <QueryClientProvider client={queryClient}>
+      <UserRow user={tempUser} />
+    </QueryClientProvider>
+  );
+
+  test('Should render correctly', () => {
+    expect(wrapper).toMatchSnapshot();
+  });
+});

hotel-management/src/pages/User/__tests__/UserTable.test.tsx

@@ -0,0 +1,22 @@
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { BrowserRouter } from 'react-router-dom';
+import renderer from 'react-test-renderer';
+
+// Components
+import RoomTable from '@page/Room/RoomTable';
+
+describe('UserTable', () => {
+  const queryClient = new QueryClient();
+
+  const wrapper = renderer.create(
+    <QueryClientProvider client={queryClient}>
+      <BrowserRouter>
+        <RoomTable />
+      </BrowserRouter>
+    </QueryClientProvider>
+  );
+
+  test('Should render correctly', () => {
+    expect(wrapper).toMatchSnapshot();
+  });
+});

hotel-management/src/pages/User/__tests__/__snapshots__/UserForm.test.tsx.snap

@@ -0,0 +1,67 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`UserForm Should render correctly 1`] = `
+<form
+  className="sc-gtsqUy jMGskL"
+  onSubmit={[Function]}
+>
+  <div
+    className="sc-hKFymg frexHr"
+  >
+    <label
+      className="sc-eCAqax dnXnhF"
+    >
+      Full Name
+    </label>
+    <div>
+      <input
+        className="sc-bdnyFh gejiRq"
+        id="name"
+        name="name"
+        onBlur={[Function]}
+        onChange={[Function]}
+        type="text"
+      />
+    </div>
+  </div>
+  <div
+    className="sc-hKFymg frexHr"
+  >
+    <label
+      className="sc-eCAqax dnXnhF"
+    >
+      Phone
+    </label>
+    <div>
+      <input
+        className="sc-bdnyFh gejiRq"
+        id="phone"
+        name="phone"
+        onBlur={[Function]}
+        onChange={[Function]}
+        type="text"
+      />
+    </div>
+  </div>
+  <div
+    className="sc-dlniIP hBqqvG"
+  >
+    <button
+      className="sc-gKAaef sc-jrsKJM gifCOZ KLoQf"
+      disabled={true}
+      name="submit"
+      type="submit"
+      variations="primary"
+    >
+      Add
+    </button>
+    <button
+      className="sc-gKAaef sc-jrsKJM gbgZUe KLoQf"
+      type="button"
+      variations="secondary"
+    >
+      Close
+    </button>
+  </div>
+</form>
+`;

hotel-management/src/pages/User/__tests__/__snapshots__/UserRow.test.tsx.snap

@@ -0,0 +1,53 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`UserRow Should render correctly 1`] = `
+<div
+  className="sc-jSFipO sc-iCoHzw hTfHNc eWZMfB"
+>
+  <div>
+    1
+  </div>
+  <div>
+    Temp Room
+  </div>
+  <div>
+    0324421232
+  </div>
+  <div>
+    No
+  </div>
+  <div>
+    <div
+      className="sc-jrsKJM cdPhia"
+    >
+      <button
+        aria-label="Menu item 1"
+        className="sc-iqAbyq fyjyXl"
+        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>
+`;

hotel-management/src/pages/User/__tests__/__snapshots__/UserTable.test.tsx.snap

@@ -0,0 +1,63 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`UserTable 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>
+`;

hotel-management/src/pages/User/__tests__/__snapshots__/index.test.tsx.snap

@@ -0,0 +1,84 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`User Should render correctly 1`] = `
+<main
+  className="sc-fKgKDd iDHRyD"
+>
+  <div
+    className="sc-lmgPJu bFEqIE"
+    type="horizontal"
+  >
+    <h2
+      className="sc-bCwene htGYaf"
+    >
+      List User
+    </h2>
+    <button
+      className="sc-kfYpNk QIeuT"
+      onClick={[Function]}
+      variations="primary"
+    >
+      Add user
+    </button>
+  </div>
+  <div
+    className="sc-lmgPJu hehIVl"
+    type="vertical"
+  >
+    <div
+      className="sc-iwaiBT eOzYWb"
+    >
+      <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="phone"
+        >
+          Sort by phone
+        </option>
+      </select>
+      <input
+        className="sc-kEqXeH jMVPeG"
+        onChange={[Function]}
+        placeholder="Search by phone..."
+      />
+    </div>
+    <div
+      className="sc-iJCSeZ gDbWTd"
+    />
+  </div>
+</main>
+`;

hotel-management/src/pages/User/__tests__/index.test.tsx

@@ -0,0 +1,22 @@
+import renderer from 'react-test-renderer';
+import { BrowserRouter } from 'react-router-dom';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+
+// Components
+import User from '..';
+
+describe('User', () => {
+  const queryClient = new QueryClient();
+
+  const wrapper = renderer.create(
+    <QueryClientProvider client={queryClient}>
+      <BrowserRouter>
+        <User />
+      </BrowserRouter>
+    </QueryClientProvider>
+  );
+
+  test('Should render correctly', () => {
+    expect(wrapper).toMatchSnapshot();
+  });
+});

hotel-management/vite.config.ts

@@ -1,8 +1,9 @@
-import { defineConfig } from 'vite'
+import { defineConfig } from 'vite';
-import react from '@vitejs/plugin-react'
+import react from '@vitejs/plugin-react';
-import tsconfigPaths from 'vite-tsconfig-paths'
+import tsconfigPaths from 'vite-tsconfig-paths';
+import EnvironmentPlugin from 'vite-plugin-environment';
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [react(), tsconfigPaths()],
+  plugins: [react(), tsconfigPaths(), EnvironmentPlugin('all')],
-})
+});