test: adding new ut for new team members table an its components

Author: jacobo-dominguez-wgu

src/authz-module/authz-home/index.test.tsx

@@ -16,6 +16,10 @@ jest.mock('@openedx/paragon', () => ({
   Tabs: ({ children }: { children: React.ReactNode }) => <div data-testid="tabs">{children}</div>,
 }));
 
+jest.mock('@src/authz-module/team-members/TeamMembersTable', () => function MockTeamMembersTable() {
+  return <div>Team Members Table Content</div>;
+});
+
 describe('AuthzHome', () => {
   it('renders without crashing', () => {
     renderWrapper(<AuthzHome />);
@@ -37,4 +41,9 @@ describe('AuthzHome', () => {
     renderWrapper(<AuthzHome />);
     expect(screen.getByTestId('roles-permissions')).toBeInTheDocument();
   });
+
+  it('renders the TeamMembersTable component in the team members tab', () => {
+    renderWrapper(<AuthzHome />);
+    expect(screen.getByText('Team Members Table Content')).toBeInTheDocument();
+  });
 });

src/authz-module/authz-home/index.tsx

@@ -14,7 +14,7 @@ const AuthzHome = () => {
   const [searchParams] = useSearchParams();
   const presetScope = searchParams.get('scope') || undefined;
 
-  const rootBreadcrumb = intl.formatMessage(messages['authz.breadcrumb.root']) || '';
+  const rootBreadcrumb = intl.formatMessage(messages['authz.breadcrumb.root']);
   const pageTitle = intl.formatMessage(messages['authz.manage.page.title']);
 
   return (

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

@@ -0,0 +1,134 @@
+import { screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { useNavigate } from 'react-router-dom';
+import { initializeMockApp } from '@edx/frontend-platform/testing';
+import { renderWrapper } from '@src/setupTest';
+import AddRoleButton from './AddRoleButton';
+
+// Mock react-router-dom navigation
+jest.mock('react-router-dom', () => ({
+  ...jest.requireActual('react-router-dom'),
+  useNavigate: jest.fn(),
+}));
+
+describe('AddRoleButton', () => {
+  const mockNavigate = jest.fn();
+
+  beforeAll(() => {
+    initializeMockApp({
+      authenticatedUser: {
+        userId: 1,
+        username: 'testuser',
+        email: '[email protected]',
+      },
+    });
+  });
+
+  beforeEach(() => {
+    (useNavigate as jest.Mock).mockReturnValue(mockNavigate);
+  });
+
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+
+  describe('rendering', () => {
+    it('renders the assign role button with correct text', () => {
+      renderWrapper(<AddRoleButton />);
+
+      const button = screen.getByRole('button', { name: /assign role/i });
+      expect(button).toBeInTheDocument();
+    });
+
+    it('displays the plus icon', () => {
+      renderWrapper(<AddRoleButton />);
+
+      const button = screen.getByRole('button', { name: /assign role/i });
+      expect(button.querySelector('svg')).toBeInTheDocument();
+    });
+
+    it('renders correctly when presetUsername is provided', () => {
+      renderWrapper(<AddRoleButton presetUsername="testuser123" />);
+
+      const button = screen.getByRole('button', { name: /assign role/i });
+      expect(button).toBeInTheDocument();
+    });
+  });
+
+  describe('navigation behavior', () => {
+    it('navigates to assign role page without username when clicked', async () => {
+      const user = userEvent.setup();
+      renderWrapper(<AddRoleButton />);
+
+      const button = screen.getByRole('button', { name: /assign role/i });
+      await user.click(button);
+
+      expect(mockNavigate).toHaveBeenCalledTimes(1);
+      expect(mockNavigate).toHaveBeenCalledWith('/authz/assign-role');
+    });
+
+    it('navigates to assign role page with username query parameter when presetUsername is provided', async () => {
+      const user = userEvent.setup();
+      const presetUsername = 'john.doe';
+      renderWrapper(<AddRoleButton presetUsername={presetUsername} />);
+
+      const button = screen.getByRole('button', { name: /assign role/i });
+      await user.click(button);
+
+      expect(mockNavigate).toHaveBeenCalledTimes(1);
+      expect(mockNavigate).toHaveBeenCalledWith(`/authz/assign-role?username=${presetUsername}`);
+    });
+
+    it('handles special characters in presetUsername correctly', async () => {
+      const user = userEvent.setup();
+      const presetUsername = '[email protected]';
+      renderWrapper(<AddRoleButton presetUsername={presetUsername} />);
+
+      const button = screen.getByRole('button', { name: /assign role/i });
+      await user.click(button);
+
+      expect(mockNavigate).toHaveBeenCalledTimes(1);
+      expect(mockNavigate).toHaveBeenCalledWith(`/authz/assign-role?username=${presetUsername}`);
+    });
+  });
+
+  describe('user interactions', () => {
+    it('responds to keyboard navigation', async () => {
+      const user = userEvent.setup();
+      renderWrapper(<AddRoleButton />);
+
+      const button = screen.getByRole('button', { name: /assign role/i });
+
+      await user.tab();
+      expect(button).toHaveFocus();
+
+      await user.keyboard('{Enter}');
+      expect(mockNavigate).toHaveBeenCalledWith('/authz/assign-role');
+    });
+
+    it('responds to spacebar activation', async () => {
+      const user = userEvent.setup();
+      renderWrapper(<AddRoleButton />);
+
+      const button = screen.getByRole('button', { name: /assign role/i });
+      button.focus();
+
+      await user.keyboard(' ');
+      expect(mockNavigate).toHaveBeenCalledWith('/authz/assign-role');
+    });
+
+    it('handles multiple clicks gracefully', async () => {
+      const user = userEvent.setup();
+      renderWrapper(<AddRoleButton presetUsername="testuser" />);
+
+      const button = screen.getByRole('button', { name: /assign role/i });
+
+      await user.click(button);
+      await user.click(button);
+      await user.click(button);
+
+      expect(mockNavigate).toHaveBeenCalledTimes(3);
+      expect(mockNavigate).toHaveBeenCalledWith('/authz/assign-role?username=testuser');
+    });
+  });
+});