feat(pages-and-resources): add permission tests for grading and pages/resources access

Author: bra-i-am

src/CourseAuthoringPage.test.tsx

@@ -108,14 +108,20 @@ describe('Course authoring page', () => {
 
     axiosMock.onGet(
       `${courseAppsApiUrl}/${courseId}`,
-    ).reply(403);
+    ).reply(403, { response: { status: 403 } });
     await executeThunk(fetchCourseApps(courseId), store.dispatch);
   };
   test('renders PermissionDeniedAlert when courseAppsApiStatus is DENIED', async () => {
     mockPathname = '/editor/';
     await mockStoreDenied();
 
-    const wrapper = renderComponent(<CourseAuthoringPage />);
+    // Test PagesAndResources (which has the PermissionDeniedAlert logic),
+    // not CourseAuthoringPage which is just the layout wrapper
+    const wrapper = renderComponent(
+      <CourseAuthoringPage>
+        <PagesAndResources />
+      </CourseAuthoringPage>,
+    );
     expect(await wrapper.findByTestId('permissionDeniedAlert')).toBeInTheDocument();
   });
 });

src/advanced-settings/AdvancedSettings.test.tsx

@@ -191,4 +191,25 @@ describe('<AdvancedSettings />', () => {
     render();
     expect(await screen.findByTestId('permissionDeniedAlert')).toBeInTheDocument();
   });
+
+  it('should render settings in read-only mode when user has VIEW but not MANAGE permissions (auditor)', async () => {
+    mockWaffleFlags({ enableAuthzCourseAuthoring: true });
+    jest.mocked(useUserPermissions).mockReturnValue({
+      isLoading: false,
+      data: { canViewAdvancedSettings: true, canManageAdvancedSettings: false },
+    } as unknown as ReturnType<typeof useUserPermissions>);
+    render();
+    const textarea = await screen.findByLabelText(/Advanced Module List/i);
+    expect(textarea).toBeDisabled();
+  });
+
+  it('should show permission denied when user has NO permissions (null data)', async () => {
+    mockWaffleFlags({ enableAuthzCourseAuthoring: true });
+    jest.mocked(useUserPermissions).mockReturnValue({
+      isLoading: false,
+      data: null,
+    } as unknown as ReturnType<typeof useUserPermissions>);
+    render();
+    expect(await screen.findByTestId('permissionDeniedAlert')).toBeInTheDocument();
+  });
 });

src/advanced-settings/AdvancedSettings.tsx

@@ -76,6 +76,18 @@ const AdvancedSettings = () => {
   } = updateMutation;
 
   const isLoading = isPendingSettingsStatus || (isAuthzEnabled && isLoadingUserPermissions);
+
+  // Determine if UI should be read-only (has VIEW but not MANAGE) — auditor
+  const isReadOnly = isAuthzEnabled
+    && !isLoadingUserPermissions
+    && !!userPermissions?.canViewAdvancedSettings
+    && !userPermissions?.canManageAdvancedSettings;
+
+  useEffect(() => {
+    if (isReadOnly) {
+      setIsEditableState(false);
+    }
+  }, [isReadOnly]);
   const updateSettingsButtonState = {
     labels: {
       default: intl.formatMessage(messages.buttonSaveText),
@@ -162,17 +174,6 @@ const AdvancedSettings = () => {
     return <PermissionDeniedAlert />;
   }
 
-  // Determine if UI should be disabled (has VIEW but not MANAGE) - auditor sees read-only view
-  const isReadOnly = isAuthzEnabled
-    && !isLoadingUserPermissions
-    && userPermissions?.canViewAdvancedSettings
-    && !userPermissions?.canManageAdvancedSettings;
-
-  // Apply read-only mode for auditors
-  if (isReadOnly) {
-    setIsEditableState(false);
-  }
-
   // Show the page content (read-only or editable)
 
   return (

src/advanced-settings/setting-card/SettingCard.test.jsx

@@ -1,4 +1,4 @@
-import { fireEvent, render, waitFor } from '@testing-library/react';
+import { fireEvent, render, waitFor, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { IntlProvider } from '@edx/frontend-platform/i18n';
 
@@ -25,7 +25,7 @@ jest.mock('react-textarea-autosize', () =>
     />
   )));
 
-const RootWrapper = () => (
+const RootWrapper = (props = {}) => (
   <IntlProvider locale="en">
     <SettingCard
       isOn
@@ -37,6 +37,7 @@ const RootWrapper = () => (
       handleBlur={handleBlur}
       isEditableState
       saveSettingsPrompt={false}
+      {...props}
     />
   </IntlProvider>
 );
@@ -91,4 +92,34 @@ describe('<SettingCard />', () => {
       expect(handleBlur).toHaveBeenCalled();
     });
   });
+  it('renders in readOnly mode with disabled input', () => {
+    render(<RootWrapper readOnly />);
+    const input = screen.getByLabelText(/Setting Name/i);
+    expect(input).toBeDisabled();
+  });
+
+  it('renders enabled by default when readOnly is not specified (default false)', () => {
+    // readOnly defaults to false - input should be enabled
+    render(<RootWrapper />);
+    const input = screen.getByLabelText(/Setting Name/i);
+    expect(input).not.toBeDisabled();
+  });
+
+  it('calls setIsEditableState when value changes and isEditableState is false', async () => {
+    // Test for line 45: setIsEditableState(true) called when value changes
+    const { getByLabelText } = render(<RootWrapper isEditableState={false} />);
+    const input = getByLabelText(/Setting Name/i);
+    fireEvent.change(input, { target: { value: 'new-different-value' } });
+    await waitFor(() => {
+      expect(setIsEditableState).toHaveBeenCalledWith(true);
+    });
+  });
+
+  it('shows help popup when clicking info button', () => {
+    render(<RootWrapper />);
+    const helpButton = screen.getByRole('button', { name: /show help text/i });
+    fireEvent.click(helpButton);
+    // The help text should be visible in the popup - verify component renders help
+    expect(screen.queryByText(/This is a help message/i)).toBeInTheDocument();
+  });
 });

src/advanced-settings/setting-card/SettingCard.tsx

@@ -138,8 +138,4 @@ SettingCard.propTypes = {
   readOnly: PropTypes.bool,
 };
 
-SettingCard.defaultProps = {
-  readOnly: false,
-};
-
 export default SettingCard;

src/authz/permissionHelpers.test.ts

@@ -0,0 +1,120 @@
+import { getGradingPermissions, getPagesAndResourcesPermissions } from './permissionHelpers';
+import { COURSE_PERMISSIONS } from './constants';
+
+describe('permissionHelpers', () => {
+  const courseId = 'course-v1:org+course+run';
+
+  describe('getGradingPermissions', () => {
+    it('returns correct permission structure with VIEW action', () => {
+      const result = getGradingPermissions(courseId);
+
+      expect(result.canViewGradingSettings).toBeDefined();
+      expect(result.canViewGradingSettings.action).toBe(COURSE_PERMISSIONS.VIEW_GRADING_SETTINGS);
+      expect(result.canViewGradingSettings.scope).toBe(courseId);
+    });
+
+    it('returns correct permission structure with EDIT action', () => {
+      const result = getGradingPermissions(courseId);
+
+      expect(result.canEditGradingSettings).toBeDefined();
+      expect(result.canEditGradingSettings.action).toBe(COURSE_PERMISSIONS.EDIT_GRADING_SETTINGS);
+      expect(result.canEditGradingSettings.scope).toBe(courseId);
+    });
+
+    it('returns both VIEW and EDIT permissions in single call', () => {
+      const result = getGradingPermissions(courseId);
+
+      const permissions = Object.keys(result);
+      expect(permissions).toContain('canViewGradingSettings');
+      expect(permissions).toContain('canEditGradingSettings');
+    });
+
+    it('uses correct courseId as scope for all permissions', () => {
+      const customCourseId = 'course-v1:custom+org+custom_run';
+      const result = getGradingPermissions(customCourseId);
+
+      expect(result.canViewGradingSettings.scope).toBe(customCourseId);
+      expect(result.canEditGradingSettings.scope).toBe(customCourseId);
+    });
+  });
+
+  describe('getPagesAndResourcesPermissions', () => {
+    it('returns correct permission structure with VIEW action', () => {
+      const result = getPagesAndResourcesPermissions(courseId);
+
+      expect(result.canViewPagesAndResources).toBeDefined();
+      expect(result.canViewPagesAndResources.action).toBe(COURSE_PERMISSIONS.VIEW_PAGES_AND_RESOURCES);
+      expect(result.canViewPagesAndResources.scope).toBe(courseId);
+    });
+
+    it('returns correct permission structure with EDIT action', () => {
+      const result = getPagesAndResourcesPermissions(courseId);
+
+      expect(result.canEditPagesAndResources).toBeDefined();
+      expect(result.canEditPagesAndResources.action).toBe(COURSE_PERMISSIONS.EDIT_PAGES_AND_RESOURCES);
+      expect(result.canEditPagesAndResources.scope).toBe(courseId);
+    });
+
+    it('returns both VIEW and EDIT permissions in single call', () => {
+      const result = getPagesAndResourcesPermissions(courseId);
+
+      const permissions = Object.keys(result);
+      expect(permissions).toContain('canViewPagesAndResources');
+      expect(permissions).toContain('canEditPagesAndResources');
+    });
+
+    it('uses correct courseId as scope for all permissions', () => {
+      const customCourseId = 'course-v1:another+test+course';
+      const result = getPagesAndResourcesPermissions(customCourseId);
+
+      expect(result.canViewPagesAndResources.scope).toBe(customCourseId);
+      expect(result.canEditPagesAndResources.scope).toBe(customCourseId);
+    });
+  });
+
+  describe('permission constants verification', () => {
+    it('uses correct VIEW_GRADING_SETTINGS constant', () => {
+      const result = getGradingPermissions(courseId);
+      expect(result.canViewGradingSettings.action).toBe('courses.view_grading_settings');
+    });
+
+    it('uses correct EDIT_GRADING_SETTINGS constant', () => {
+      const result = getGradingPermissions(courseId);
+      expect(result.canEditGradingSettings.action).toBe('courses.edit_grading_settings');
+    });
+
+    it('uses correct VIEW_PAGES_AND_RESOURCES constant', () => {
+      const result = getPagesAndResourcesPermissions(courseId);
+      expect(result.canViewPagesAndResources.action).toBe('courses.view_pages_and_resources');
+    });
+
+    it('uses correct EDIT_PAGES_AND_RESOURCES constant', () => {
+      const result = getPagesAndResourcesPermissions(courseId);
+      expect(result.canEditPagesAndResources.action).toBe('courses.manage_pages_and_resources');
+    });
+  });
+
+  describe('edge cases', () => {
+    it('handles empty courseId', () => {
+      const result = getGradingPermissions('');
+
+      expect(result.canViewGradingSettings.scope).toBe('');
+      expect(result.canEditGradingSettings.scope).toBe('');
+    });
+
+    it('handles special characters in courseId', () => {
+      const specialCourseId = 'course-v1:test+special:id';
+      const result = getPagesAndResourcesPermissions(specialCourseId);
+
+      expect(result.canViewPagesAndResources.scope).toBe(specialCourseId);
+    });
+
+    it('returns consistent structure across multiple calls', () => {
+      const result1 = getGradingPermissions(courseId);
+      const result2 = getGradingPermissions(courseId);
+
+      expect(Object.keys(result1)).toEqual(Object.keys(result2));
+      expect(result1.canViewGradingSettings.action).toBe(result2.canViewGradingSettings.action);
+    });
+  });
+});

src/pages-and-resources/PagesAndResources.test.tsx

@@ -8,8 +8,16 @@ import {
 import { getConfig, setConfig } from '@edx/frontend-platform';
 import { PLUGIN_OPERATIONS, DIRECT_PLUGIN } from '@openedx/frontend-plugin-framework';
 import { CourseAuthoringProvider } from '@src/CourseAuthoringContext';
+import { mockWaffleFlags } from '@src/data/apiHooks.mock';
+import { useCourseUserPermissions } from '@src/authz/hooks';
 import { PagesAndResources } from '.';
 
+// Mock authz hooks
+jest.mock('@src/authz/hooks', () => ({
+  ...jest.requireActual('@src/authz/hooks'),
+  useCourseUserPermissions: jest.fn(),
+}));
+
 const mockPlugin = (identifier) => ({
   plugins: [
     {
@@ -45,8 +53,30 @@ describe('PagesAndResources', () => {
         ),
       },
     });
+
+    // Set up waffle flags to disable authz by default
+    mockWaffleFlags({ enableAuthzCourseAuthoring: false });
+
+    // Default: authz disabled allows everything
+    jest.mocked(useCourseUserPermissions).mockReturnValue({
+      isLoading: false,
+      isAuthzEnabled: false,
+      canViewPagesAndResources: true,
+      canEditPagesAndResources: true,
+    } as ReturnType<typeof useCourseUserPermissions>);
   });
 
+  // Helper to set up permission mocks
+  const mockPermissions = (canView: boolean, canEdit: boolean) => {
+    mockWaffleFlags({ enableAuthzCourseAuthoring: true });
+    jest.mocked(useCourseUserPermissions).mockReturnValue({
+      isLoading: false,
+      isAuthzEnabled: true,
+      canViewPagesAndResources: canView,
+      canEditPagesAndResources: canEdit,
+    } as ReturnType<typeof useCourseUserPermissions>);
+  };
+
   it('doesn\'t show content permissions section if relevant apps are not enabled', async () => {
     const initialState = {
       models: {
@@ -128,4 +158,60 @@ describe('PagesAndResources', () => {
     await waitFor(() => expect(screen.queryByTestId('additional_course_plugin')).toBeInTheDocument());
     await waitFor(() => expect(screen.queryByTestId('additional_course_content_plugin')).toBeInTheDocument());
   });
+
+  describe('permission integration', () => {
+    it('shows PermissionDeniedAlert when user has no VIEW or EDIT permissions', async () => {
+      mockPermissions(false, false);
+
+      const initialState = {
+        models: {
+          courseApps: {},
+        },
+        pagesAndResources: {
+          courseAppIds: [],
+        },
+      };
+
+      initializeMocks({ initialState });
+      renderComponent();
+
+      await waitFor(() => expect(screen.getByTestId('permissionDeniedAlert')).toBeInTheDocument());
+    });
+
+    it('does NOT show PermissionDeniedAlert when user has VIEW permission', async () => {
+      mockPermissions(true, false);
+
+      const initialState = {
+        models: {
+          courseApps: {},
+        },
+        pagesAndResources: {
+          courseAppIds: [],
+        },
+      };
+
+      initializeMocks({ initialState });
+      renderComponent();
+
+      await waitFor(() => expect(screen.queryByTestId('permissionDeniedAlert')).not.toBeInTheDocument());
+    });
+
+    it('does NOT show PermissionDeniedAlert when user has EDIT permission', async () => {
+      mockPermissions(true, true);
+
+      const initialState = {
+        models: {
+          courseApps: {},
+        },
+        pagesAndResources: {
+          courseAppIds: [],
+        },
+      };
+
+      initializeMocks({ initialState });
+      renderComponent();
+
+      await waitFor(() => expect(screen.queryByTestId('permissionDeniedAlert')).not.toBeInTheDocument());
+    });
+  });
 });

src/pages-and-resources/discussions/app-config-form/apps/openedx/OpenedXConfigForm.jsx

@@ -181,8 +181,4 @@ OpenedXConfigForm.propTypes = {
   isEditable: PropTypes.bool,
 };
 
-OpenedXConfigForm.defaultProps = {
-  isEditable: true,
-};
-
 export default OpenedXConfigForm;