test: for role deletion on roles table audit user page

Author: jacobo-dominguez-wgu

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

@@ -1,9 +1,11 @@
 import { render, screen, waitFor } from '@testing-library/react';
+import { AppContext } from '@edx/frontend-platform/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 { ToastManagerProvider } from '@src/authz-module/data/context/ToastManagerContext';
 import AuditUserPage from './index';
 
 jest.mock('@edx/frontend-platform/auth', () => ({
@@ -40,17 +42,32 @@ const renderWithRouter = (route = '/audit/johndoe') => {
     },
   });
 
+  const mockAppContext = {
+    authenticatedUser: {
+      username: 'testuser',
+      email: '[email protected]',
+    },
+    config: {
+      // @ts-ignore
+      ...process.env,
+    },
+  };
+
   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>,
+    <AppContext.Provider value={mockAppContext}>
+      <QueryClientProvider client={queryClient}>
+        <IntlProvider locale="en">
+          <ToastManagerProvider>
+            <MemoryRouter initialEntries={[route]}>
+              <Routes>
+                <Route path="/audit/:username" element={<AuditUserPage />} />
+                <Route path="/authz" element={<div>Home Page</div>} />
+              </Routes>
+            </MemoryRouter>
+          </ToastManagerProvider>
+        </IntlProvider>
+      </QueryClientProvider>
+    </AppContext.Provider>,
   );
 };
 
@@ -59,6 +76,11 @@ describe('AuditUserPage', () => {
     jest.clearAllMocks();
   });
 
+  beforeAll(() => {
+  // @ts-ignore
+    global.logError = jest.fn();
+  });
+
   it('renders user info and table when data is loaded', async () => {
     (getAuthenticatedHttpClient as jest.Mock).mockReturnValue({
       get: jest
@@ -185,4 +207,107 @@ describe('AuditUserPage', () => {
       expect(screen.getByText(mockUser.username, { selector: 'li[aria-current="page"]' })).toBeInTheDocument();
     });
   });
+
+  it('opens and closes the ConfirmDeletionModal when delete is clicked and cancel is pressed', async () => {
+    (getAuthenticatedHttpClient as jest.Mock).mockReturnValue({
+      get: jest
+        .fn()
+        .mockResolvedValueOnce({ data: mockUser })
+        .mockResolvedValueOnce({ data: mockAssignments }),
+    });
+
+    renderWithRouter();
+
+    await waitFor(() => {
+      expect(screen.getByRole('button', { name: /delete role action/i })).toBeInTheDocument();
+    });
+
+    const user = userEvent.setup();
+    const deleteButton = screen.getByRole('button', { name: /delete role action/i });
+    await user.click(deleteButton);
+
+    await waitFor(() => {
+      expect(screen.getByRole('dialog')).toBeInTheDocument();
+      expect(screen.getByText(/remove role\?/i)).toBeInTheDocument();
+      expect(screen.getByRole('button', { name: /cancel/i })).toBeInTheDocument();
+    });
+
+    const cancelButton = screen.getByRole('button', { name: /cancel/i });
+    await user.click(cancelButton);
+
+    await waitFor(() => {
+      expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
+    });
+  });
+
+  it('calls onSave when confirming deletion in ConfirmDeletionModal', async () => {
+    (getAuthenticatedHttpClient as jest.Mock).mockReturnValue({
+      get: jest
+        .fn()
+        .mockResolvedValueOnce({ data: mockUser })
+        .mockResolvedValueOnce({ data: mockAssignments }),
+      delete: jest.fn().mockResolvedValue({ data: { errors: [] } }),
+    });
+
+    renderWithRouter();
+
+    await waitFor(() => {
+      expect(screen.getByRole('button', { name: /delete role action/i })).toBeInTheDocument();
+    });
+
+    const user = userEvent.setup();
+    const deleteButton = screen.getByRole('button', { name: /delete role action/i });
+    await user.click(deleteButton);
+
+    await waitFor(() => {
+      expect(screen.getByRole('dialog')).toBeInTheDocument();
+      expect(screen.getByRole('button', { name: /remove/i })).toBeInTheDocument();
+    });
+
+    const removeButton = screen.getByRole('button', { name: /remove/i });
+    await user.click(removeButton);
+
+    await waitFor(() => {
+      expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
+      expect(screen.getByText(/role has been successfully removed/i)).toBeInTheDocument();
+    });
+  });
+
+  it('shows the extra warning when rolesCount is 1', async () => {
+    (getAuthenticatedHttpClient as jest.Mock).mockReturnValue({
+      get: jest
+        .fn()
+        .mockResolvedValueOnce({ data: mockUser })
+        .mockResolvedValueOnce({
+          data: {
+            count: 1,
+            results: [
+              {
+                id: '1',
+                role: 'library_admin',
+                org: 'Test Org',
+                scope: 'lib:test',
+                permissionCount: 5,
+              },
+            ],
+            next: null,
+            previous: null,
+          },
+        }),
+    });
+
+    renderWithRouter();
+
+    await waitFor(() => {
+      expect(screen.getByRole('button', { name: /delete role action/i })).toBeInTheDocument();
+    });
+
+    const user = userEvent.setup();
+    const deleteButton = screen.getByRole('button', { name: /delete role action/i });
+    await user.click(deleteButton);
+
+    await waitFor(() => {
+      expect(screen.getByText(/this is the user's only role/i)).toBeInTheDocument();
+    });
+  });
 });

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

@@ -7,8 +7,8 @@ import {
   OrgCell,
   ScopeCell,
   PermissionsCell,
-  ActionsCell,
   ViewAllPermissionsCell,
+  createActionsCell,
 } from './TableCells';
 
 // TODO: remove console.log mocks and implement actual logic for these cells, then update tests accordingly
@@ -253,56 +253,75 @@ describe('TableCells Components', () => {
     });
   });
 
-  describe('ActionsCell', () => {
-    const mockRow = {
+  describe('createActionsCell', () => {
+    const mockOnClickDeleteButton = jest.fn();
+    const baseRow = {
       original: {
-        role: 'library_admin', id: '123', org: 'Test Org', scope: 'Test Scope', permissionCount: 1,
+        role: 'library_admin',
+        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();
+    beforeEach(() => {
+      jest.clearAllMocks();
     });
 
-    it('calls handleDelete when delete button is clicked', async () => {
+    it('renders a delete button and calls onClickDeleteButton when clicked', async () => {
       const user = userEvent.setup();
-      const props = {
-        row: mockRow,
-        column: { id: 'actions' },
-      };
-
-      renderWrapper(<ActionsCell {...props} />);
+      const CustomActionsCell = createActionsCell({
+        onClickDeleteButton: mockOnClickDeleteButton,
+        isUserAuthenticatedPage: false,
+      });
+      renderWrapper(<CustomActionsCell row={baseRow} column={{ id: 'actions' }} />);
 
       const deleteButton = screen.getByRole('button', { name: /delete role action/i });
+      expect(deleteButton).toBeInTheDocument();
+
       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);
+      expect(mockOnClickDeleteButton).toHaveBeenCalledWith({ role: 'library_admin', scope: 'Test Scope' });
     });
 
-    it('handles keyboard interaction for delete button', async () => {
-      const user = userEvent.setup();
-      const props = {
-        row: mockRow,
-        column: { id: 'actions' },
+    it('renders a disabled button for admin roles when isUserAuthenticatedPage is true', () => {
+      const adminRow = {
+        original: {
+          role: 'course_admin',
+          org: 'Test Org',
+          scope: 'Test Scope',
+          permissionCount: 1,
+        },
       };
+      const CustomActionsCell = createActionsCell({
+        onClickDeleteButton: mockOnClickDeleteButton,
+        isUserAuthenticatedPage: true,
+      });
+      renderWrapper(<CustomActionsCell row={adminRow} column={{ id: 'actions' }} />);
+
+      const button = screen.getByRole('button', { name: /delete role action/i });
+      expect(button).toBeDisabled();
+    });
 
-      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);
+    it('renders info icon with tooltip for Django managed roles', async () => {
+      const djangoRow = {
+        original: {
+          role: 'django.superuser',
+          org: 'Test Org',
+          scope: 'Test Scope',
+          permissionCount: 1,
+        },
+      };
+      const user = userEvent.setup();
+      const CustomActionsCell = createActionsCell({
+        onClickDeleteButton: mockOnClickDeleteButton,
+        isUserAuthenticatedPage: true,
+      });
+      renderWrapper(<CustomActionsCell row={djangoRow} column={{ id: 'actions' }} />);
+
+      const infoIcon = screen.getByRole('img', { hidden: true });
+      expect(infoIcon).toBeInTheDocument();
+      await user.hover(infoIcon);
+      expect(screen.getByText(/Please go to Django Admin to manage it/i)).toBeInTheDocument();
     });
   });
 

src/authz-module/libraries-manager/components/AddNewTeamMemberModal/AddNewTeamMemberTrigger.test.tsx

@@ -3,7 +3,7 @@ import { screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { renderWrapper } from '@src/setupTest';
 import { useAssignTeamMembersRole } from '@src/authz-module/data/hooks';
-import { ToastManagerProvider } from 'authz-module/data/context/ToastManagerContext';
+import { ToastManagerProvider } from '@src/authz-module/data/context/ToastManagerContext';
 import AddNewTeamMemberTrigger from './AddNewTeamMemberTrigger';
 
 jest.mock('@edx/frontend-platform/logging');

src/authz-module/libraries-manager/components/AssignNewRoleModal/AssignNewRoleTrigger.test.tsx

@@ -3,7 +3,7 @@ import userEvent from '@testing-library/user-event';
 import { renderWrapper } from '@src/setupTest';
 import { useLibraryAuthZ } from '@src/authz-module/libraries-manager/context';
 import { useAssignTeamMembersRole } from '@src/authz-module/data/hooks';
-import { ToastManagerProvider } from 'authz-module/data/context/ToastManagerContext';
+import { ToastManagerProvider } from '@src/authz-module/data/context/ToastManagerContext';
 import AssignNewRoleTrigger from './AssignNewRoleTrigger';
 
 jest.mock('@edx/frontend-platform/logging');

src/authz-module/libraries-manager/components/TeamTable/index.test.tsx

@@ -3,7 +3,7 @@ import userEvent from '@testing-library/user-event';
 import { renderWrapper } from '@src/setupTest';
 import { useTeamMembers } from '@src/authz-module/data/hooks';
 import { useLibraryAuthZ } from '@src/authz-module/libraries-manager/context';
-import { ToastManagerProvider } from 'authz-module/data/context/ToastManagerContext';
+import { ToastManagerProvider } from '@src/authz-module/data/context/ToastManagerContext';
 import { CONTENT_LIBRARY_PERMISSIONS } from '@src/authz-module/constants';
 import TeamTable from './index';