Write unit test for Rooms, Users page 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,20 @@
+import RoomForm from '../RoomForm';
+import { BrowserRouter } from 'react-router-dom';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import renderer from 'react-test-renderer';
+
+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,26 @@
+import renderer from 'react-test-renderer';
+import RoomRow from '../RoomRow';
+import { IRoom } from '@type/rooms';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+
+// Components
+
+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,20 @@
+import renderer from 'react-test-renderer';
+import RoomTable from '../RoomTable';
+import { BrowserRouter } from 'react-router-dom';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+
+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__/index.test.tsx

@@ -0,0 +1,20 @@
+import renderer from 'react-test-renderer';
+import Room from '..';
+import { BrowserRouter } from 'react-router-dom';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+
+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,20 @@
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { BrowserRouter } from 'react-router-dom';
+import renderer from 'react-test-renderer';
+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,23 @@
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { IUser } from '@type/users';
+import renderer from 'react-test-renderer';
+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__/index.test.tsx

@@ -0,0 +1,20 @@
+import renderer from 'react-test-renderer';
+import User from '..';
+import { BrowserRouter } from 'react-router-dom';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+
+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')],
-})
+});