feat: add skeleton and improve testing

Author: dcoa

src/authz-module/components/PermissionTable.tsx

@@ -1,12 +1,19 @@
-import { Check, Close } from "@openedx/paragon/icons";
-import { actionsDictionary } from "./RoleCard/constants";
-import { Icon } from "@openedx/paragon";
+import { Check, Close } from '@openedx/paragon/icons';
+import { Icon } from '@openedx/paragon';
+import { Role } from '@src/types';
+import { PermissionMatrix } from '@src/authz-module/libraries-manager/utils';
+import { actionsDictionary } from './RoleCard/constants';
 
-const PermissionTable = ({ permissionsTable, roles }) => (
-  <table className="pgn__data-table bg-light-100">
+type PermissionTableProps = {
+  roles: Role[];
+  permissionsTable: PermissionMatrix;
+};
+
+const PermissionTable = ({ permissionsTable, roles }: PermissionTableProps) => (
+  <table className="pgn__data-table bg-light-100" data-testid="permissions-matrix">
     <thead>
       <tr>
-        <th className='bg-light-100'></th>
+        <th className="bg-light-100" aria-hidden="true" />
         {roles.map(role => (
           <th key={role.name} className="text-center bg-light-100 py-3">{role.name}</th>
         ))}
@@ -22,9 +29,9 @@ const PermissionTable = ({ permissionsTable, roles }) => (
           </tr>
           {
             resourceGroup.permissions.map(permission => (
-              <tr key={permission.key} className='border-top'>
-                <td className="text-start d-flex align-items-center small px-4 py-3">{
-                  <Icon className="d-inline-block mr-2" size="sm" src={actionsDictionary[permission.actionKey]} />}
+              <tr key={permission.key} className="border-top">
+                <td className="text-start d-flex align-items-center small px-4 py-3">
+                  <Icon className="d-inline-block mr-2" size="sm" src={actionsDictionary[permission.actionKey]} />
                   {permission.label}
                 </td>
                 {roles.map(role => (
@@ -41,4 +48,4 @@ const PermissionTable = ({ permissionsTable, roles }) => (
   </table>
 );
 
-export default PermissionTable;
+export default PermissionTable;

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

@@ -1,4 +1,4 @@
-import { fireEvent, screen } from '@testing-library/react';
+import { fireEvent, screen, within } from '@testing-library/react';
 import { renderWrapper } from '@src/setupTest';
 import { initializeMockApp } from '@edx/frontend-platform/testing';
 import { useLibrary } from '@src/authz-module/data/hooks';
@@ -57,9 +57,9 @@ describe('LibrariesTeamManager', () => {
       ],
       permissions: [
         { key: 'view_library', label: 'view', resource: 'library' },
-        { key: 'edit_library', name: 'edit', resource: 'library' },
+        { key: 'edit_library', label: 'edit', resource: 'library' },
       ],
-      resources: [{ key: 'library', displayName: 'Library' }],
+      resources: [{ key: 'library', label: 'Library' }],
       canManageTeam: true,
     });
 
@@ -95,10 +95,26 @@ describe('LibrariesTeamManager', () => {
     fireEvent.click(rolesTab);
 
     const roleCards = await screen.findAllByTestId('role-card');
-
-    expect(roleCards.length).toBeGreaterThan(0);
-    expect(screen.getByText('Instructor')).toBeInTheDocument();
+    const rolesScope = within(roleCards[0]);
+    expect(roleCards.length).toBe(1);
+    expect(rolesScope.getByText('Instructor')).toBeInTheDocument();
     expect(screen.getByText(/Can manage content/i)).toBeInTheDocument();
     expect(screen.getByText(/1 permissions/i)).toBeInTheDocument();
   });
+
+  it('renders role matrix when "Permissions" tab is selected', async () => {
+    renderWrapper(<LibrariesTeamManager />);
+
+    // Click on "Permissions" tab
+    const permissionsTab = await screen.findByRole('tab', { name: /permissions/i });
+    fireEvent.click(permissionsTab);
+
+    const permissionsMatrix = await screen.findByTestId('permissions-matrix');
+    const metrixScope = within(permissionsMatrix);
+
+    expect(metrixScope.getByText('Instructor')).toBeInTheDocument();
+    expect(metrixScope.getByText('Library')).toBeInTheDocument();
+    expect(metrixScope.getByText('edit')).toBeInTheDocument();
+    expect(metrixScope.getByText('view')).toBeInTheDocument();
+  });
 });

src/authz-module/libraries-manager/LibrariesTeamManager.tsx

@@ -1,6 +1,8 @@
 import { useMemo } from 'react';
 import { useIntl } from '@edx/frontend-platform/i18n';
-import { Container, Tab, Tabs } from '@openedx/paragon';
+import {
+  Container, Skeleton, Tab, Tabs,
+} from '@openedx/paragon';
 import { useLibrary } from '@src/authz-module/data/hooks';
 import TeamTable from './components/TeamTable';
 import AuthZLayout from '../components/AuthZLayout';
@@ -27,9 +29,9 @@ const LibrariesTeamManager = () => {
   })), [roles, permissions, resources, intl]);
 
   const permissionsTable = useMemo(() => {
-    if (!roles || !permissions || !resources) return [];
+    if (!roles || !permissions || !resources) { return []; }
     return buildPermissionMatrix(roles, permissions, resources, intl);
-  }, [roles, permissions, resources]);
+  }, [roles, permissions, resources, intl]);
 
   return (
     <div className="authz-libraries">
@@ -64,12 +66,13 @@ const LibrariesTeamManager = () => {
           </Tab>
           <Tab eventKey="permissions" title={intl.formatMessage(messages['library.authz.tabs.permissions'])}>
             <Container className="p-5 container-mw-lg">
-              <PermissionTable permissionsTable={permissionsTable} roles={libraryRoles} />
+              {!permissionsTable ? <Skeleton count={2} height={200} />
+                : <PermissionTable permissionsTable={permissionsTable} roles={roles} />}
             </Container>
           </Tab>
         </Tabs>
       </AuthZLayout>
-    </div >
+    </div>
   );
 };
 

src/authz-module/libraries-manager/utils.test.ts

@@ -1,17 +1,18 @@
-import { buildPermissionsByRoleMatrix } from './utils';
+import { buildPermissionMatrix, buildPermissionsByRoleMatrix } from './utils';
+
+const intl = { formatMessage: jest.fn((msg: any) => msg.defaultMessage) };
+const permissions = [
+  { key: 'create_library', resource: 'library', label: 'Create Library' },
+  { key: 'edit_library', resource: 'library', label: 'Edit Library' },
+];
+const resources = [
+  { key: 'library', label: 'Library', description: '' },
+];
 
 describe('buildPermissionsByRoleMatrix', () => {
   it('returns permissions matrix for given role', () => {
     const rolePermissions = ['create_library'];
-    const permissions = [
-      { key: 'create_library', resource: 'library', label: 'Create Library' },
-      { key: 'edit_library', resource: 'library', label: 'Edit Library' },
-    ];
-    const resources = [
-      { key: 'library', label: 'Library', description: '' },
-    ];
 
-    const intl = { formatMessage: jest.fn((msg: any) => msg.defaultMessage) };
     const matrix = buildPermissionsByRoleMatrix({
       rolePermissions, permissions, resources, intl,
     }) as Array<{ key: string; actions: Array<{ disabled: boolean }> }>;
@@ -21,3 +22,49 @@ describe('buildPermissionsByRoleMatrix', () => {
     expect(matrix[0].actions[1].disabled).toBe(true);
   });
 });
+
+describe('buildPermissionsByRoleMatrix', () => {
+  it('should build permission matrix grouped by resources with role access mapped', () => {
+    const roles = [
+      {
+        name: 'admin', permissions: ['create_library', 'edit_library'], userCount: 2, role: 'admin', description: '',
+      },
+      {
+        name: 'editor', permissions: ['edit_library'], userCount: 2, role: 'editor', description: '',
+      },
+      {
+        name: 'guest', permissions: [], userCount: 2, role: 'guest', description: '',
+      },
+    ];
+    const matrix = buildPermissionMatrix(roles, permissions, resources, intl);
+
+    expect(matrix).toEqual([
+      {
+        resource: 'library',
+        resourceLabel: 'Library',
+        permissions: [
+          {
+            key: 'create_library',
+            actionKey: 'create',
+            label: 'Create Library',
+            roles: {
+              admin: true,
+              editor: false,
+              guest: false,
+            },
+          },
+          {
+            key: 'edit_library',
+            actionKey: 'edit',
+            label: 'Edit Library',
+            roles: {
+              admin: true,
+              editor: true,
+              guest: false,
+            },
+          },
+        ],
+      },
+    ]);
+  });
+});

src/authz-module/libraries-manager/utils.ts

@@ -1,7 +1,7 @@
 import { IntlShape } from '@edx/frontend-platform/i18n';
 import { actionKeys } from '@src/authz-module/components/RoleCard/constants';
+import { PermissionMetadata, ResourceMetadata, Role } from '@src/types';
 import actionMessages from '../components/RoleCard/messages';
-import { PermissionMetadata, ResourceMetadata, Role } from 'types';
 
 /**
  * Derives the localized label and action key for a given permission.
@@ -18,13 +18,13 @@ import { PermissionMetadata, ResourceMetadata, Role } from 'types';
  *
  * @returns An object containing:
  * - `label`: The human-readable, localized label for the permission.
- * - `actionKey`: A string representing icon to be displayed (e.g., `'Read'`, `'Edit'`), or `undefined` if not matched.
+ * - `actionKey`: A string representing icon to be displayed (e.g., `'Read'`, `'Edit'`), or '' if not matched.
  */
 function getPermissionMetadata(
   permission: PermissionMetadata,
   intl: IntlShape,
-): { label: string; actionKey: string | undefined } {
-  const actionKey = actionKeys.find(action => permission.key.includes(action));
+): { label: string; actionKey: string } {
+  const actionKey = actionKeys.find(action => permission.key.includes(action)) || '';
   let messageKey = `authz.permissions.actions.${actionKey}`;
   let messageResource = '';
 
@@ -48,13 +48,12 @@ const buildPermissionsByRoleMatrix = ({
   const allowedPermissions = new Set(rolePermissions);
 
   permissions.forEach((permission) => {
-    const resourceLabel =
-      resources.find((r) => r.key === permission.resource)?.label ||
-      permission.resource;
+    const resourceLabel = resources.find((r) => r.key === permission.resource)?.label
+      || permission.resource;
 
     const { label, actionKey } = getPermissionMetadata(permission, intl);
 
-    if (!actionKey) return; // Skip unknown actions
+    if (!actionKey) { return; } // Skip unknown actions
 
     // Initialize resource group if not already present
     if (!permissionsMatrix[permission.resource]) {
@@ -75,15 +74,13 @@ const buildPermissionsByRoleMatrix = ({
   return Object.values(permissionsMatrix);
 };
 
-
-
-
-type PermissionMatrix = {
+export type PermissionMatrix = {
   resource: string;
   resourceLabel: string;
   permissions: {
     key: string;
     label: string;
+    actionKey: string;
     roles: Record<string, boolean>;
   }[];
 }[];
@@ -109,12 +106,12 @@ export function buildPermissionMatrix(
   intl: IntlShape,
 ): PermissionMatrix {
   const permissionsByResource = permissions.reduce<Record<string, PermissionMetadata[]>>((acc, perm) => {
-    if (!acc[perm.resource]) acc[perm.resource] = [];
+    if (!acc[perm.resource]) { acc[perm.resource] = []; }
     acc[perm.resource].push(perm);
     return acc;
   }, {});
 
-  const matrix: PermissionMatrix = resources.map(resource => {
+  const matrix = resources.map(resource => {
     const resourcePermissions = permissionsByResource[resource.key] || [];
 
     const permissionRows = resourcePermissions.map(permission => {
@@ -144,5 +141,4 @@ export function buildPermissionMatrix(
   return matrix;
 }
 
-
 export { buildPermissionsByRoleMatrix };