refactor: use i18n for alt and remove data-testid

Author: dcoa

src/authz-module/components/RoleCard/index.test.tsx

@@ -56,7 +56,7 @@ describe('RoleCard', () => {
     expect(screen.getByText('Can manage everything')).toBeInTheDocument();
 
     // Delete button
-    expect(screen.getByRole('button', { name: /delete role action/i })).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: /Delete role action/i })).toBeInTheDocument();
 
     // Collapsible title
     expect(screen.getByText('Permissions')).toBeInTheDocument();

src/authz-module/components/RoleCard/index.tsx

@@ -42,7 +42,7 @@ const RoleCard = ({
         subtitle={(objectName && <span className="text-info-400 lead">{objectName}</span>) || ''}
         actions={
           handleDelete && (
-            <IconButton variant="danger" onClick={handleDelete} alt="Delete role action" src={Delete} />
+            <IconButton variant="danger" onClick={handleDelete} alt={intl.formatMessage(messages['authz.role.card.delete.action.alt'])} src={Delete} />
           )
         }
       />

src/authz-module/components/RoleCard/messages.ts

@@ -46,6 +46,11 @@ const messages = defineMessages({
     defaultMessage: 'Reuse {resource}',
     description: 'Default label for the reuse action',
   },
+  'authz.role.card.delete.action.alt': {
+    id: 'authz.role.card.delete.action.alt',
+    defaultMessage: 'Delete role action',
+    description: 'Alt description for delete button',
+  },
 });
 
 export default messages;

src/authz-module/libraries-manager/LibrariesUserManager.test.tsx

@@ -37,24 +37,20 @@ jest.mock('../components/RoleCard', () => ({
     description: string;
     handleDelete?: () => void;
   }) => (
-    <div data-testid="role-card">
+    <div>
       <div>{title}</div>
       <div>{description}</div>
       {handleDelete && (
-        <button type="button" onClick={handleDelete} data-testid={`delete-role-${title}`}>
-          Delete
+        <button type="button" onClick={handleDelete}>
+          {`delete-role-${title}`}
         </button>
       )}
     </div>
   ),
 }));
 
 jest.mock('./components/AssignNewRoleModal', () => ({
-  AssignNewRoleTrigger: () => (
-    <button type="button" data-testid="assign-role-trigger">
-      Assign Role
-    </button>
-  ),
+  AssignNewRoleTrigger: () => <button type="button">Assign Role</button>,
 }));
 
 describe('LibrariesUserManager', () => {
@@ -140,8 +136,8 @@ describe('LibrariesUserManager', () => {
     expect(screen.getByRole('heading', { level: 1 })).toHaveTextContent('testuser');
     expect(screen.getByRole('paragraph')).toHaveTextContent('[email protected]');
 
-    const roleCards = screen.getAllByTestId('role-card');
-    expect(roleCards).toHaveLength(2);
+    expect(screen.getByText('Admin')).toBeInTheDocument();
+    expect(screen.getByText('Instructor')).toBeInTheDocument();
 
     defaultMockData.roles.forEach((role) => {
       expect(screen.getByText(role.name)).toBeInTheDocument();
@@ -152,26 +148,15 @@ describe('LibrariesUserManager', () => {
   it('renders assign role trigger when user has canManageTeam permission', () => {
     renderComponent();
 
-    expect(screen.getByTestId('assign-role-trigger')).toBeInTheDocument();
-  });
-
-  it('does not render assign role trigger when user does not have canManageTeam permission', () => {
-    (useLibraryAuthZ as jest.Mock).mockReturnValue({
-      ...defaultMockData,
-      canManageTeam: false,
-    });
-
-    renderComponent();
-
-    expect(screen.queryByTestId('assign-role-trigger')).not.toBeInTheDocument();
+    expect(screen.getByText('Assign Role')).toBeInTheDocument();
   });
 
   describe('Revoking User Role Flow', () => {
     it('opens confirmation modal when delete role button is clicked', async () => {
       const user = userEvent.setup();
       renderComponent();
 
-      const deleteButton = screen.getByTestId('delete-role-Admin');
+      const deleteButton = screen.getByText('delete-role-Admin');
       await user.click(deleteButton);
 
       await waitFor(() => {
@@ -183,7 +168,7 @@ describe('LibrariesUserManager', () => {
       const user = userEvent.setup();
       renderComponent();
 
-      const deleteButton = screen.getByTestId('delete-role-Admin');
+      const deleteButton = screen.getByText('delete-role-Admin');
       await user.click(deleteButton);
 
       await waitFor(() => {
@@ -197,7 +182,7 @@ describe('LibrariesUserManager', () => {
       const user = userEvent.setup();
       renderComponent();
 
-      const deleteButton = screen.getByTestId('delete-role-Admin');
+      const deleteButton = screen.getByText('delete-role-Admin');
       await user.click(deleteButton);
 
       await waitFor(() => {
@@ -216,7 +201,7 @@ describe('LibrariesUserManager', () => {
       const user = userEvent.setup();
       renderComponent();
 
-      const deleteButton = screen.getByTestId('delete-role-Admin');
+      const deleteButton = screen.getByText('delete-role-Admin');
       await user.click(deleteButton);
 
       await waitFor(() => {
@@ -245,7 +230,7 @@ describe('LibrariesUserManager', () => {
       const user = userEvent.setup();
       renderComponent();
 
-      const deleteButton = screen.getByTestId('delete-role-Admin');
+      const deleteButton = screen.getByText('delete-role-Admin');
       await user.click(deleteButton);
 
       await waitFor(() => {
@@ -282,7 +267,7 @@ describe('LibrariesUserManager', () => {
 
       renderComponent();
 
-      const deleteButton = screen.getByTestId('delete-role-Admin');
+      const deleteButton = screen.getByText('delete-role-Admin');
       await user.click(deleteButton);
 
       await waitFor(() => {
@@ -304,7 +289,7 @@ describe('LibrariesUserManager', () => {
       const user = userEvent.setup();
       renderComponent();
 
-      const deleteButton = screen.getByTestId('delete-role-Admin');
+      const deleteButton = screen.getByText('delete-role-Admin');
       await user.click(deleteButton);
 
       await waitFor(() => {
@@ -326,7 +311,7 @@ describe('LibrariesUserManager', () => {
       const user = userEvent.setup();
       renderComponent();
 
-      const deleteButton = screen.getByTestId('delete-role-Admin');
+      const deleteButton = screen.getByText('delete-role-Admin');
       await user.click(deleteButton);
 
       await waitFor(() => {
@@ -354,7 +339,7 @@ describe('LibrariesUserManager', () => {
 
       renderComponent();
 
-      const deleteButton = screen.getByTestId('delete-role-Admin');
+      const deleteButton = screen.getByText('delete-role-Admin');
       await user.click(deleteButton);
 
       expect(screen.queryByText('Remove role?')).not.toBeInTheDocument();
@@ -365,7 +350,7 @@ describe('LibrariesUserManager', () => {
       const user = userEvent.setup();
       renderComponent();
 
-      const deleteButton = screen.getByTestId('delete-role-Instructor');
+      const deleteButton = screen.getByText('delete-role-Instructor');
       await user.click(deleteButton);
 
       await waitFor(() => {