Add room hook testing and update config test

hotel-management/.gitignore

@@ -12,8 +12,7 @@ dist
 dist-ssr
 *.local
 .vscode
-
-src/db.json
+.jest
 
 # Editor directories and files
 .vscode/*

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,7 @@ export default {
     '@page/(.*)': ['<rootDir>/src/pages/$1'],
   },
   setupFilesAfterEnv: ['<rootDir>/jest.setup.ts'],
+  setupFiles: ['<rootDir>/.jest/setEnvVar.ts']
 };
+
+export default config;

hotel-management/package.json

@@ -46,6 +46,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 supabaseUrl = 'https://pjqujsjzzdrlrgqbxepe.supabase.co';
+const supabaseKey = process.env.VITE_SUPABASE_KEY;
 
 export { DEFAULT_SORT_BY, DEFAULT_ORDER_BY, supabaseKey, supabaseUrl };

hotel-management/src/hooks/__tests__/rooms.test.tsx

@@ -1,11 +1,84 @@
+import { useCreateRoom } from '@hook/rooms/useCreateRoom';
+import { useDeleteRoom } from '@hook/rooms/useDeleteRoom';
 import { useRooms } from '@hook/rooms/useRooms';
+import { useUpdateRoom } from '@hook/rooms/useUpdateRoom';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { renderHook, waitFor } from '@testing-library/react';
+import { IRoom } from '@type/rooms';
+import { ReactNode } from 'react';
+import { MemoryRouter } from 'react-router-dom';
+import { act } from 'react-test-renderer';
+
+interface IWrapper {
+  children: ReactNode;
+}
+
+const sampleData: IRoom = {
+  id: 999,
+  name: 'Room name test',
+  price: 9999,
+  status: true,
+};
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      retry: false,
+    },
+  },
+});
+const wrapper = ({ children }: IWrapper) => {
+  return (
+    <QueryClientProvider client={queryClient}>
+      <MemoryRouter>{children}</MemoryRouter>
+    </QueryClientProvider>
+  );
+};
 
 describe('CRUD Room testing', () => {
   test('Fetch room data', async () => {
-    const { result } = renderHook(() => useRooms());
-    const { rooms } = result.current;
+    const { result } = renderHook(() => useRooms(), { wrapper });
 
-    await waitFor(() => expect(rooms?.length).toBeGreaterThan(0))
-  })
-})
+    await waitFor(() =>
+      expect(result.current.rooms?.length).toBeGreaterThan(0)
+    );
+  });
+
+  test('Create room', async () => {
+    const { result } = renderHook(() => useCreateRoom(), { wrapper });
+
+    act(() => {
+      const testMethod = async () => {
+        result.current.createRoom(sampleData);
+        await waitFor(() => expect(result.current.isSuccess).toBeTruthy());
+      };
+
+      testMethod();
+    });
+  });
+
+  test('Edit room', async () => {
+    const { result } = renderHook(() => useUpdateRoom(), { wrapper });
+
+    act(() => {
+      const testMethod = async () => {
+        result.current.updateRoom(sampleData);
+        await waitFor(() => expect(result.current.isSuccess).toBeTruthy());
+      };
+
+      testMethod();
+    });
+  });
+
+  test('Delete room', async () => {
+    const { result } = renderHook(() => useDeleteRoom(), { wrapper });
+
+    act(() => {
+      const testMethod = async () => {
+        result.current.deleteRoom(sampleData.id);
+        await waitFor(() => expect(result.current.isSuccess).toBeTruthy());
+      };
+
+      testMethod();
+    });
+  });
+});

hotel-management/src/hooks/rooms/useCreateRoom.ts

@@ -16,7 +16,11 @@ const useCreateRoom = () => {
   const queryClient = useQueryClient();
   const { dispatch } = useUserRoomAvailable();
 
-  const { mutate: createRoom, isPending: isCreating } = useMutation({
+  const {
+    mutate: createRoom,
+    isPending: isCreating,
+    isSuccess,
+  } = useMutation({
     mutationFn: createRoomFn,
     onSuccess: (room) => {
       toast.success(ADD_SUCCESS);
@@ -31,7 +35,7 @@ const useCreateRoom = () => {
     onError: (err) => toast.error(err.message),
   });
 
-  return { isCreating, createRoom };
+  return { isCreating, createRoom, isSuccess };
 };
 
 export { useCreateRoom };

hotel-management/src/hooks/rooms/useDeleteRoom.ts

@@ -14,7 +14,11 @@ import * as messages from '@constant/messages';
 const useDeleteRoom = () => {
   const queryClient = useQueryClient();
 
-  const { isPending: isDeleting, mutate: deleteRoom } = useMutation({
+  const {
+    isPending: isDeleting,
+    mutate: deleteRoom,
+    isSuccess,
+  } = useMutation({
     mutationFn: deleteRoomFn,
     onSuccess: () => {
       toast.success(messages.DELETE_SUCCESS);
@@ -25,7 +29,7 @@ const useDeleteRoom = () => {
     onError: (err) => toast.error(err.message),
   });
 
-  return { isDeleting, deleteRoom };
+  return { isDeleting, deleteRoom, isSuccess };
 };
 
 export { useDeleteRoom };

hotel-management/src/hooks/rooms/useRooms.ts

@@ -18,7 +18,7 @@ const useRooms = () => {
   const {
     isLoading,
     data: rooms,
-    error,
+    error
   } = useQuery({
     queryKey: ['rooms', sortByValue, orderByValue, phoneSearch],
     queryFn: () => getAllRooms(sortByValue, orderByValue, phoneSearch),

hotel-management/src/hooks/rooms/useUpdateRoom.ts

@@ -16,7 +16,11 @@ const useUpdateRoom = () => {
   const queryClient = useQueryClient();
   const { dispatch } = useUserRoomAvailable();
 
-  const { mutate: updateRoom, isPending: isUpdating } = useMutation({
+  const {
+    mutate: updateRoom,
+    isPending: isUpdating,
+    isSuccess,
+  } = useMutation({
     mutationFn: updateRoomFn,
     onSuccess: (room) => {
       toast.success(UPDATE_SUCCESS);
@@ -31,7 +35,7 @@ const useUpdateRoom = () => {
     onError: (err) => toast.error(err.message),
   });
 
-  return { isUpdating, updateRoom };
+  return { isUpdating, updateRoom, isSuccess };
 };
 
 export { useUpdateRoom };

hotel-management/vite.config.ts

@@ -1,8 +1,9 @@
-import { defineConfig } from 'vite'
-import react from '@vitejs/plugin-react'
-import tsconfigPaths from 'vite-tsconfig-paths'
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+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')],
+});