test: adding unit test for audit user page components

Author: jacobo-dominguez-wgu

src/authz-module/audit-user/index.test.tsx

@@ -0,0 +1,188 @@
+import { render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { MemoryRouter, Route, Routes } from 'react-router-dom';
+import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import AuditUserPage from './index';
+
+jest.mock('@edx/frontend-platform/auth', () => ({
+  getAuthenticatedHttpClient: jest.fn(),
+  configure: jest.fn(), // Add this line
+}));
+
+const mockUser = {
+  username: 'johndoe',
+  email: '[email protected]',
+  profile_image: { has_image: false },
+};
+const mockAssignments = {
+  count: 1,
+  results: [
+    {
+      id: '1',
+      role: 'library_admin',
+      org: 'Test Org',
+      scope: 'lib:test',
+      permissionCount: 5,
+    },
+  ],
+  next: null,
+  previous: null,
+};
+
+const renderWithRouter = (route = '/audit/johndoe') => {
+  const queryClient = new QueryClient({
+    defaultOptions: {
+      queries: {
+        retry: false,
+      },
+    },
+  });
+
+  return render(
+    <QueryClientProvider client={queryClient}>
+      <IntlProvider locale="en">
+        <MemoryRouter initialEntries={[route]}>
+          <Routes>
+            <Route path="/audit/:username" element={<AuditUserPage />} />
+            <Route path="/authz" element={<div>Home Page</div>} />
+          </Routes>
+        </MemoryRouter>
+      </IntlProvider>
+    </QueryClientProvider>,
+  );
+};
+
+describe('AuditUserPage', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('renders user info and table when data is loaded', async () => {
+    (getAuthenticatedHttpClient as jest.Mock).mockReturnValue({
+      get: jest
+        .fn()
+        .mockResolvedValueOnce({ data: mockUser })
+        .mockResolvedValueOnce({ data: mockAssignments }),
+    });
+
+    renderWithRouter();
+
+    await waitFor(() => {
+      expect(screen.getByRole('heading', { name: 'johndoe' })).toBeInTheDocument();
+      expect(screen.getByText('[email protected]')).toBeInTheDocument();
+      expect(screen.getByRole('button', { name: /assign role/i })).toBeInTheDocument();
+      expect(screen.getByText('Library Admin')).toBeInTheDocument();
+      expect(screen.getByText('Test Org')).toBeInTheDocument();
+      expect(screen.getByText('lib:test')).toBeInTheDocument();
+      expect(screen.getByText('5 permissions available')).toBeInTheDocument();
+    });
+  });
+
+  it('navigates to home if user is not found', async () => {
+    (getAuthenticatedHttpClient as jest.Mock).mockReturnValue({
+      get: jest
+        .fn()
+        .mockResolvedValueOnce({ data: null })
+        .mockResolvedValueOnce({ data: mockAssignments }),
+    });
+
+    renderWithRouter();
+
+    await waitFor(() => {
+      expect(screen.getByText('Home Page')).toBeInTheDocument();
+    });
+  });
+
+  it('allows user to interact with Assign Role button', async () => {
+    (getAuthenticatedHttpClient as jest.Mock).mockReturnValue({
+      get: jest
+        .fn()
+        .mockResolvedValueOnce({ data: mockUser })
+        .mockResolvedValueOnce({ data: mockAssignments }),
+    });
+
+    renderWithRouter();
+
+    await waitFor(() => {
+      expect(screen.getByRole('button', { name: /assign role/i })).toBeInTheDocument();
+    });
+
+    const user = userEvent.setup();
+    const button = screen.getByRole('button', { name: /assign role/i });
+    await user.click(button);
+    expect(button).not.toBeInTheDocument();
+  });
+
+  it('renders empty state when user has no assignments', async () => {
+    (getAuthenticatedHttpClient as jest.Mock).mockReturnValue({
+      get: jest
+        .fn()
+        .mockResolvedValueOnce({ data: mockUser })
+        .mockResolvedValueOnce({
+          data: {
+            count: 0, results: [], next: null, previous: null,
+          },
+        }),
+    });
+
+    renderWithRouter();
+
+    await waitFor(() => {
+      expect(screen.getByRole('heading', { name: 'johndoe' })).toBeInTheDocument();
+      expect(screen.queryByText('5 permissions available')).not.toBeInTheDocument();
+      expect(screen.getByRole('table')).toBeInTheDocument();
+    });
+  });
+
+  it('renders correct table headers', async () => {
+    (getAuthenticatedHttpClient as jest.Mock).mockReturnValue({
+      get: jest
+        .fn()
+        .mockResolvedValueOnce({ data: mockUser })
+        .mockResolvedValueOnce({ data: mockAssignments }),
+    });
+
+    renderWithRouter();
+
+    await waitFor(() => {
+      expect(screen.getByText('Role')).toBeInTheDocument();
+      expect(screen.getByText('Organization')).toBeInTheDocument();
+      expect(screen.getByText('Scope')).toBeInTheDocument();
+      expect(screen.getByText('Permissions')).toBeInTheDocument();
+      expect(screen.getByText('Actions')).toBeInTheDocument();
+    });
+  });
+
+  it('renders the pagination controls when assignments are present', async () => {
+    (getAuthenticatedHttpClient as jest.Mock).mockReturnValue({
+      get: jest
+        .fn()
+        .mockResolvedValueOnce({ data: mockUser })
+        .mockResolvedValueOnce({ data: mockAssignments }),
+    });
+
+    renderWithRouter();
+
+    await waitFor(() => {
+      expect(screen.getByText('Showing 1 of 1.')).toBeInTheDocument();
+    });
+  });
+
+  it('renders the breadcrumb navigation with home link', async () => {
+    (getAuthenticatedHttpClient as jest.Mock).mockReturnValue({
+      get: jest
+        .fn()
+        .mockResolvedValueOnce({ data: mockUser })
+        .mockResolvedValueOnce({ data: mockAssignments }),
+    });
+
+    renderWithRouter();
+
+    await waitFor(() => {
+      expect(screen.getByRole('link', { name: /roles and permissions management/i })).toBeInTheDocument();
+      expect(screen.getByText(mockUser.username, { selector: 'li[aria-current="page"]' })).toBeInTheDocument();
+    });
+  });
+});

src/authz-module/audit-user/index.tsx

@@ -5,7 +5,7 @@ import {
   Container, DataTable,
 } from '@openedx/paragon';
 import TableFooter from '@src/authz-module/components/TableFooter/TableFooter';
-import { TABLE_DEFAULT_PAGE_SIZE } from '@src/authz-module/constants';
+import { AUTHZ_HOME_PATH, TABLE_DEFAULT_PAGE_SIZE } from '@src/authz-module/constants';
 import AuthZLayout from '@src/authz-module/components/AuthZLayout';
 import { useNavigate, useParams } from 'react-router-dom';
 import { useUserAccount } from '@src/data/hooks';
@@ -24,16 +24,15 @@ const AuditUserPage = () => {
   const navigate = useNavigate();
   const { isLoading: isLoadingUser, data: user } = useUserAccount(username ?? '');
   const { querySettings, handleTableFetch } = useQuerySettings();
-  // TODO: use actual assigned roles data when API is ready, currently using dummy data for development purpose
   const { data: { results: userAssignments } = { results: [] } } = useUserAssignedRoles(username ?? '', querySettings);
-  const authzHomePath = '/authz';
+
   if (!user && !isLoadingUser) {
-    navigate(authzHomePath);
+    navigate(AUTHZ_HOME_PATH);
   }
   const navLinks = [
     {
       label: formatMessage(baseMessages['authz.management.home.nav.link']),
-      to: authzHomePath,
+      to: AUTHZ_HOME_PATH,
     },
   ];
   const additionalColumns = [

src/authz-module/components/TableCells.test.tsx

@@ -8,8 +8,15 @@ import {
   RoleCell,
   OrgCell,
   ScopeCell,
+  PermissionsCell,
+  ActionsCell,
+  ViewAllPermissionsCell,
 } from './TableCells';
 
+// TODO: remove console.log mocks and implement actual logic for these cells, then update tests accordingly
+// Mock console.log for TODO functions
+jest.spyOn(console, 'log').mockImplementation(() => {});
+
 const mockNavigate = jest.fn();
 
 jest.mock('react-router-dom', () => ({
@@ -417,4 +424,149 @@ describe('TableCells Components', () => {
       expect(screen.queryByText('Global')).not.toBeInTheDocument();
     });
   });
+
+  describe('PermissionsCell', () => {
+    it('displays "Total Access" for Django superuser role', () => {
+      const props = {
+        row: {
+          original: {
+            role: 'django.superuser',
+            org: 'Test Org',
+            scope: 'Test Scope',
+            permissionCount: 10,
+          },
+        },
+        column: { id: 'permissions' },
+      };
+
+      renderWrapper(<PermissionsCell {...props} />);
+
+      expect(screen.getByText('Total Access')).toBeInTheDocument();
+    });
+
+    it('displays "Partial Access" for Django global staff role', () => {
+      const props = {
+        row: {
+          original: {
+            role: 'django.globalstaff',
+            permissionCount: 5,
+            org: 'Test Org',
+            scope: 'Test Scope',
+          },
+        },
+        column: { id: 'permissions' },
+      };
+
+      renderWrapper(<PermissionsCell {...props} />);
+
+      expect(screen.getByText('Partial Access')).toBeInTheDocument();
+    });
+
+    it('displays permission count for non-Django roles', () => {
+      const props = {
+        row: {
+          original: {
+            role: 'library_admin',
+            permissionCount: 3,
+            org: 'Test Org',
+            scope: 'Test Scope',
+          },
+        },
+        column: { id: 'permissions' },
+      };
+
+      renderWrapper(<PermissionsCell {...props} />);
+
+      expect(screen.getByText('3 permissions available')).toBeInTheDocument();
+    });
+  });
+
+  describe('ActionsCell', () => {
+    const mockRow = {
+      original: {
+        role: 'library_admin', id: '123', org: 'Test Org', scope: 'Test Scope', permissionCount: 1,
+      },
+    };
+
+    it('renders a delete button', () => {
+      const props = {
+        row: mockRow,
+        column: { id: 'actions' },
+      };
+
+      renderWrapper(<ActionsCell {...props} />);
+
+      const deleteButton = screen.getByRole('button', { name: /delete role action/i });
+      expect(deleteButton).toBeInTheDocument();
+    });
+
+    it('calls handleDelete when delete button is clicked', async () => {
+      const user = userEvent.setup();
+      const props = {
+        row: mockRow,
+        column: { id: 'actions' },
+      };
+
+      renderWrapper(<ActionsCell {...props} />);
+
+      const deleteButton = screen.getByRole('button', { name: /delete role action/i });
+      await user.click(deleteButton);
+      // TODO: replace console.log with actual delete logic and update this test accordingly
+      // eslint-disable-next-line no-console
+      expect(console.log).toHaveBeenCalledWith('Delete clicked for row:', mockRow);
+    });
+
+    it('handles keyboard interaction for delete button', async () => {
+      const user = userEvent.setup();
+      const props = {
+        row: mockRow,
+        column: { id: 'actions' },
+      };
+
+      renderWrapper(<ActionsCell {...props} />);
+
+      const deleteButton = screen.getByRole('button', { name: /delete role action/i });
+      deleteButton.focus();
+      await user.keyboard('{Enter}');
+      // TODO: replace console.log with actual delete logic and update this test accordingly
+      // eslint-disable-next-line no-console
+      expect(console.log).toHaveBeenCalledWith('Delete clicked for row:', mockRow);
+    });
+  });
+
+  describe('ViewAllPermissionsCell', () => {
+    const mockRow = {
+      original: {
+        role: 'library_admin', id: '123', org: 'Test Org', scope: 'Test Scope', permissionCount: 1,
+      },
+    };
+
+    it('renders a view more link', () => {
+      const props = {
+        row: mockRow,
+        column: { id: 'viewMore' },
+      };
+
+      renderWrapper(<ViewAllPermissionsCell {...props} />);
+
+      expect(screen.getByText('View all permissions')).toBeInTheDocument();
+    });
+
+    it('calls onClick handler when view more link is clicked', async () => {
+      const user = userEvent.setup();
+      const props = {
+        row: mockRow,
+        column: { id: 'viewMore' },
+      };
+
+      renderWrapper(<ViewAllPermissionsCell {...props} />);
+
+      const viewMoreButton = screen.getByText('View all permissions');
+      await user.click(viewMoreButton);
+
+      // TODO: replace console.log with actual view more logic and update this test accordingly
+      // eslint-disable-next-line no-console
+      expect(console.log).toHaveBeenCalledWith('View more clicked for row:', mockRow);
+    });
+  });
 });