test: add withAuth hoc test

Author: ryanf10

jest.setup.js

@@ -25,10 +25,6 @@ jest.mock('next/navigation', () => {
   };
 });
 
-jest.mock('@/components/hoc/withAuth', () => {
-  return jest.fn().mockImplementation((Component) => Component);
-});
-
 jest.mock('next/headers', () => {
   return {
     cookies: () => ({

src/__mocks__/cookie.tsx

@@ -0,0 +1,2 @@
+export const getCookie = jest.fn();
+export const deleteCookie = jest.fn();

src/__tests__/components/withAuth.test.tsx

@@ -0,0 +1,78 @@
+import { render, renderHook, screen, waitFor } from '@testing-library/react';
+
+import api from '@/lib/axios';
+import { getCookie } from '@/lib/cookie';
+
+import withAuth from '@/components/hoc/withAuth';
+
+import useAuthStore from '@/store/useAuthStore';
+
+// Mock getCookie
+jest.mock('@/lib/cookie', () => ({
+  getCookie: jest.fn(),
+  deleteCookie: jest.requireActual('@/lib/cookie').deleteCookie,
+}));
+
+describe('PrivatePage', () => {
+  beforeEach(() => {
+    const { result } = renderHook(() => useAuthStore());
+    waitFor(() => result.current.reset());
+    jest.restoreAllMocks();
+  });
+
+  it('renders the component for admin role', async () => {
+    // Set up the mock return value for getCookie
+    const mockCookieValue = 'mockedTokenValue';
+    (getCookie as jest.Mock).mockResolvedValue(mockCookieValue);
+
+    // Mock the Axios GET Profile request
+    jest.spyOn(api, 'get').mockResolvedValue({
+      data: {
+        statusCode: 200,
+        data: {
+          id: '1',
+          username: 'adminUser',
+          email: 'admin@yopmail.com',
+          roles: [{ id: '1', name: 'admin' }],
+          createdAt: new Date().getTime().toString(),
+        },
+      },
+    });
+
+    // Render the component and wait for loading to complete
+    const Component = () => <h1>Admin Only</h1>;
+    const WrappedComponent = withAuth(Component, 'all', ['admin']);
+    render(<WrappedComponent />);
+    await waitFor(() => {
+      expect(screen.getByText('Admin Only')).toBeInTheDocument();
+    });
+  });
+
+  it('renders forbidden access for other role', async () => {
+    // Set up the mock return value for getCookie
+    const mockCookieValue = 'mockedTokenValue';
+    (getCookie as jest.Mock).mockResolvedValue(mockCookieValue);
+
+    // Mock the Axios GET Profile request
+    jest.spyOn(api, 'get').mockResolvedValue({
+      data: {
+        statusCode: 200,
+        data: {
+          id: '1',
+          username: 'userUser',
+          email: 'user@yopmail.com',
+          roles: [{ id: '1', name: 'user' }],
+          createdAt: new Date().getTime().toString(),
+        },
+      },
+    });
+    // Render the component and wait for loading to complete
+    const Component = () => <h1>Admin Only</h1>;
+    const WrappedComponent = withAuth(Component, 'all', ['admin']);
+    render(<WrappedComponent />);
+    await waitFor(() => {
+      expect(screen.queryByText('Admin Only')).toBeNull();
+      expect(screen.getByText('Forbidden Access')).toBeInTheDocument();
+    });
+  });
+});

src/__tests__/pages/DashboardPage.test.tsx

@@ -4,7 +4,9 @@ import mockRouter from 'next-router-mock';
 import useAuthStore from '@/store/useAuthStore';
 
 import Dashboard from '@/app/dashboard/page';
-
+jest.mock('@/components/hoc/withAuth', () => {
+  return jest.fn().mockImplementation((Component) => Component);
+});
 describe('Dashboard', () => {
   it('renders the Components', () => {
     // Set the initial url:

src/__tests__/pages/HomePage.test.tsx

@@ -4,6 +4,9 @@ import { render, screen } from '@testing-library/react';
 import mockRouter from 'next-router-mock';
 
 import HomePage from '@/app/page';
+jest.mock('@/components/hoc/withAuth', () => {
+  return jest.fn().mockImplementation((Component) => Component);
+});
 describe('Homepage', () => {
   it('renders the Components', () => {
     // Set the initial url:

src/__tests__/pages/PrivatePage.test.tsx

@@ -0,0 +1,74 @@
+import { render, renderHook, screen, waitFor } from '@testing-library/react';
+
+import api from '@/lib/axios';
+import { getCookie } from '@/lib/cookie';
+
+import useAuthStore from '@/store/useAuthStore';
+
+import PrivatePage from '@/app/private/page';
+
+// Mock getCookie
+jest.mock('@/lib/cookie', () => ({
+  getCookie: jest.fn(),
+  deleteCookie: jest.requireActual('@/lib/cookie').deleteCookie,
+}));
+
+describe('PrivatePage', () => {
+  beforeEach(() => {
+    const { result } = renderHook(() => useAuthStore());
+    waitFor(() => result.current.reset());
+    jest.restoreAllMocks();
+  });
+
+  it('renders the component for admin role', async () => {
+    // Set up the mock return value for getCookie
+    const mockCookieValue = 'mockedTokenValue';
+    (getCookie as jest.Mock).mockResolvedValue(mockCookieValue);
+
+    // Mock the Axios GET Profile request
+    jest.spyOn(api, 'get').mockResolvedValue({
+      data: {
+        statusCode: 200,
+        data: {
+          id: '1',
+          username: 'adminUser',
+          email: 'admin@yopmail.com',
+          roles: [{ id: '1', name: 'admin' }],
+          createdAt: new Date().getTime().toString(),
+        },
+      },
+    });
+
+    // Render the component and wait for loading to complete
+    render(<PrivatePage />);
+    await waitFor(() => {
+      expect(screen.getByText('This is private')).toBeInTheDocument();
+    });
+  });
+
+  it('renders forbidden access for other role', async () => {
+    // Set up the mock return value for getCookie
+    const mockCookieValue = 'mockedTokenValue';
+    (getCookie as jest.Mock).mockResolvedValue(mockCookieValue);
+
+    // Mock the Axios GET Profile request
+    jest.spyOn(api, 'get').mockResolvedValue({
+      data: {
+        statusCode: 200,
+        data: {
+          id: '1',
+          username: 'userUser',
+          email: 'user@yopmail.com',
+          roles: [{ id: '1', name: 'user' }],
+          createdAt: new Date().getTime().toString(),
+        },
+      },
+    });
+
+    // Render the component and wait for loading to complete
+    render(<PrivatePage />);
+    await waitFor(() => {
+      expect(screen.getByText('Forbidden Access')).toBeInTheDocument();
+    });
+  });
+});

src/__tests__/pages/ProfilePage.test.tsx

@@ -15,6 +15,9 @@ import useAuthStore from '@/store/useAuthStore';
 
 import ProfilePage from '@/app/profile/page';
 
+jest.mock('@/components/hoc/withAuth', () => {
+  return jest.fn().mockImplementation((Component) => Component);
+});
 describe('Profile', () => {
   it('renders the Components', () => {
     const queryClient = new QueryClient();

src/store/useAuthStore.tsx

@@ -17,13 +17,17 @@ type AuthStoreType = {
   logout: () => void;
   stopLoading: () => void;
   switchRole: (role: Role) => void;
+  reset: () => void;
 };
 
-const useAuthStoreBase = create<AuthStoreType>((set) => ({
+const initialState = {
   user: null,
   role: null,
   isAuthenticated: false,
   isLoading: true,
+};
+const useAuthStoreBase = create<AuthStoreType>((set) => ({
+  ...initialState,
   login: (user, preferedRole) => {
     let tempRole = user.roles[0];
     if (preferedRole) {
@@ -68,6 +72,9 @@ const useAuthStoreBase = create<AuthStoreType>((set) => ({
       })
     );
   },
+  reset: () => {
+    set({ ...initialState });
+  },
 }));
 
 const useAuthStore = createSelectorHooks(useAuthStoreBase);