feat: add editable state tests for various sections in Schedule and Details

Author: bra-i-am

src/schedule-and-details/ScheduleAndDetails.test.jsx

@@ -10,6 +10,8 @@ import { executeThunk } from '@src/utils';
 import genericMessages from '@src/generic/help-sidebar/messages';
 import { DATE_FORMAT } from '@src/constants';
 import { getCourseSettingsApiUrl } from '@src/data/api';
+import { mockWaffleFlags } from '@src/data/apiHooks.mock';
+import { useUserPermissionsWithAuthzCourse } from '@src/authz/hooks';
 
 import { CourseAuthoringProvider } from '@src/CourseAuthoringContext';
 import { courseDetailsMock, courseSettingsMock } from './__mocks__';
@@ -22,6 +24,17 @@ import scheduleMessages from './schedule-section/messages';
 import messages from './messages';
 import ScheduleAndDetails from '.';
 
+jest.mock('@src/authz/hooks', () => ({
+  useUserPermissionsWithAuthzCourse: jest.fn().mockReturnValue({
+    isLoading: false,
+    permissions: {
+      canViewScheduleAndDetails: true,
+      canEditSchedule: true,
+      canEditDetails: true,
+    },
+  }),
+}));
+
 let axiosMock;
 let store;
 const courseId = '123';
@@ -167,3 +180,92 @@ describe('<ScheduleAndDetails />', () => {
     expect(getByText(messages.alertFail.defaultMessage)).toBeInTheDocument();
   });
 });
+
+describe('<ScheduleAndDetails /> permissions', () => {
+  beforeEach(() => {
+    jest.restoreAllMocks();
+    const mocks = initializeMocks();
+    axiosMock = mocks.axiosMock;
+    store = mocks.reduxStore;
+    axiosMock.onGet(getCourseDetailsApiUrl(courseId)).reply(200, courseDetailsMock);
+    axiosMock.onGet(getCourseSettingsApiUrl(courseId)).reply(200, courseSettingsMock);
+    axiosMock.onPut(getCourseDetailsApiUrl(courseId)).reply(200);
+    jest.mocked(useUserPermissionsWithAuthzCourse).mockReturnValue({
+      isLoading: false,
+      permissions: {
+        canViewScheduleAndDetails: true,
+        canEditSchedule: true,
+        canEditDetails: true,
+      },
+    });
+  });
+
+  it('renders normally when authz flag is disabled (no regression)', async () => {
+    mockWaffleFlags({ enableAuthzCourseAuthoring: false });
+    const { getAllByText } = renderComponent();
+    await waitFor(() => {
+      expect(getAllByText(messages.headingTitle.defaultMessage).length).toBeGreaterThan(0);
+    });
+  });
+
+  it('renders normally when user has all permissions', async () => {
+    mockWaffleFlags({ enableAuthzCourseAuthoring: true });
+    const { getAllByText } = renderComponent();
+    await waitFor(() => {
+      expect(getAllByText(messages.headingTitle.defaultMessage).length).toBeGreaterThan(0);
+    });
+  });
+
+  it('shows PermissionDeniedAlert when user lacks view permission', async () => {
+    mockWaffleFlags({ enableAuthzCourseAuthoring: true });
+    jest.mocked(useUserPermissionsWithAuthzCourse).mockReturnValue({
+      isLoading: false,
+      permissions: { canViewScheduleAndDetails: false, canEditSchedule: false, canEditDetails: false },
+    });
+    const { getByTestId } = renderComponent();
+    await waitFor(() => {
+      expect(getByTestId('permissionDeniedAlert')).toBeInTheDocument();
+    });
+  });
+
+  it('disables schedule date inputs when user lacks edit_schedule permission', async () => {
+    mockWaffleFlags({ enableAuthzCourseAuthoring: true });
+    jest.mocked(useUserPermissionsWithAuthzCourse).mockReturnValue({
+      isLoading: false,
+      permissions: { canViewScheduleAndDetails: true, canEditSchedule: false, canEditDetails: true },
+    });
+    const { getAllByPlaceholderText } = renderComponent();
+    await waitFor(() => {
+      const dateInputs = getAllByPlaceholderText(DATE_FORMAT.toLocaleUpperCase());
+      dateInputs.forEach((input) => expect(input).toBeDisabled());
+    });
+  });
+
+  it('disables pacing and details inputs when user lacks edit_details permission', async () => {
+    mockWaffleFlags({ enableAuthzCourseAuthoring: true });
+    jest.mocked(useUserPermissionsWithAuthzCourse).mockReturnValue({
+      isLoading: false,
+      permissions: { canViewScheduleAndDetails: true, canEditSchedule: true, canEditDetails: false },
+    });
+    const { getAllByRole } = renderComponent();
+    await waitFor(() => {
+      const radios = getAllByRole('radio');
+      radios.forEach((radio) => expect(radio).toBeDisabled());
+    });
+  });
+
+  it('save button cannot be triggered when user has no edit permissions', async () => {
+    mockWaffleFlags({ enableAuthzCourseAuthoring: true });
+    jest.mocked(useUserPermissionsWithAuthzCourse).mockReturnValue({
+      isLoading: false,
+      permissions: { canViewScheduleAndDetails: true, canEditSchedule: false, canEditDetails: false },
+    });
+    const { getAllByPlaceholderText, queryByText } = renderComponent();
+    // Wait for page to load
+    const dateInputs = await waitFor(() => getAllByPlaceholderText(DATE_FORMAT.toLocaleUpperCase()));
+    // All date inputs must be disabled (no edit_schedule permission)
+    dateInputs.forEach((input) => expect(input).toBeDisabled());
+    // No changes can be made so the save button never appears
+    expect(queryByText(messages.buttonSaveText.defaultMessage)).not.toBeInTheDocument();
+  });
+});

src/schedule-and-details/details-section/DetailsSection.test.jsx

@@ -57,4 +57,26 @@ describe('<DetailsSection />', () => {
       getByRole('button', { name: messages.dropdownEmpty.defaultMessage }),
     ).toBeInTheDocument();
   });
+
+  it('disables the language dropdown toggle when isEditable is false', () => {
+    const { getByRole } = render(<RootWrapper {...props} isEditable={false} />);
+    const toggle = getByRole('button', { name: courseSettingsMock.languageOptions[1][1] });
+    expect(toggle).toBeDisabled();
+  });
+
+  it('does not call onChange when dropdown item clicked while isEditable is false', () => {
+    onChangeMock.mockClear();
+    const { getByRole } = render(<RootWrapper {...props} isEditable={false} />);
+    // Toggle is disabled, so clicking it does not open the dropdown
+    const toggle = getByRole('button', { name: courseSettingsMock.languageOptions[1][1] });
+    expect(toggle).toBeDisabled();
+    fireEvent.click(toggle);
+    expect(onChangeMock).not.toHaveBeenCalled();
+  });
+
+  it('enables the language dropdown when isEditable is true', () => {
+    const { getByRole } = render(<RootWrapper {...props} isEditable />);
+    const toggle = getByRole('button', { name: courseSettingsMock.languageOptions[1][1] });
+    expect(toggle).not.toBeDisabled();
+  });
 });

src/schedule-and-details/instructors-section/InstructorsSection.test.jsx

@@ -106,4 +106,14 @@ describe('<InstructorsSection />', () => {
       }],
     }, 'instructorInfo');
   });
+
+  it('disables add button when isEditable is false', () => {
+    render(<RootWrapper {...props} isEditable={false} />);
+    expect(screen.getByRole('button', { name: messages.instructorAdd.defaultMessage })).toBeDisabled();
+  });
+
+  it('enables add button when isEditable is true', () => {
+    render(<RootWrapper {...props} isEditable />);
+    expect(screen.getByRole('button', { name: messages.instructorAdd.defaultMessage })).not.toBeDisabled();
+  });
 });

src/schedule-and-details/instructors-section/instructor-container/InstructorContainer.test.jsx

@@ -122,4 +122,18 @@ describe('<InstructorContainer />', () => {
     fireEvent.click(deleteBtn);
     expect(onDeleteMock).toHaveBeenCalledWith(props.idx);
   });
+
+  it('disables all inputs and delete button when isEditable is false', () => {
+    const { getAllByRole, getByRole } = render(<RootWrapper {...props} isEditable={false} />);
+    const textboxes = getAllByRole('textbox');
+    textboxes.forEach((input) => expect(input).toBeDisabled());
+    expect(getByRole('button', { name: messages.instructorDelete.defaultMessage })).toBeDisabled();
+  });
+
+  it('enables all inputs and delete button when isEditable is true', () => {
+    const { getAllByRole, getByRole } = render(<RootWrapper {...props} isEditable />);
+    const textboxes = getAllByRole('textbox');
+    textboxes.forEach((input) => expect(input).not.toBeDisabled());
+    expect(getByRole('button', { name: messages.instructorDelete.defaultMessage })).not.toBeDisabled();
+  });
 });

src/schedule-and-details/introducing-section/IntroducingSection.test.jsx

@@ -83,4 +83,14 @@ describe('<IntroducingSection />', () => {
     expect(queryAllByText(messages.courseOverviewLabel.defaultMessage).length).toBe(0);
     expect(queryAllByText(messages.courseAboutSidebarLabel.defaultMessage).length).toBe(0);
   });
+
+  it('disables the short description textarea when isEditable is false', () => {
+    const { getByLabelText } = render(<RootWrapper {...props} isEditable={false} />);
+    expect(getByLabelText(messages.courseShortDescriptionLabel.defaultMessage)).toBeDisabled();
+  });
+
+  it('enables the short description textarea when isEditable is true', () => {
+    const { getByLabelText } = render(<RootWrapper {...props} isEditable />);
+    expect(getByLabelText(messages.courseShortDescriptionLabel.defaultMessage)).not.toBeDisabled();
+  });
 });

src/schedule-and-details/introducing-section/extended-course-details/ExtendedCourseDetails.test.jsx

@@ -64,4 +64,16 @@ describe('<ExtendedCourseDetails />', () => {
     });
     expect(onChangeMock).toHaveBeenCalledWith('abc', 'title');
   });
+
+  it('disables all inputs when isEditable is false', () => {
+    const { getAllByRole } = render(<RootWrapper {...props} isEditable={false} />);
+    const inputs = getAllByRole('textbox');
+    inputs.forEach((input) => expect(input).toBeDisabled());
+  });
+
+  it('enables all inputs when isEditable is true', () => {
+    const { getAllByRole } = render(<RootWrapper {...props} isEditable />);
+    const inputs = getAllByRole('textbox');
+    inputs.forEach((input) => expect(input).not.toBeDisabled());
+  });
 });

src/schedule-and-details/introducing-section/introduction-video/IntroductionVideo.test.jsx

@@ -62,4 +62,18 @@ describe('<IntroductionVideo />', () => {
     fireEvent.click(button);
     expect(onChangeMock).toHaveBeenCalledWith('', 'introVideo');
   });
+
+  it('disables input and delete button when isEditable is false', () => {
+    const initialProps = { ...props, introVideo: 'BvgNgTPTkSo', isEditable: false };
+    const { getByPlaceholderText, getByRole } = render(<RootWrapper {...initialProps} />);
+    expect(getByPlaceholderText(messages.courseIntroductionVideoPlaceholder.defaultMessage)).toBeDisabled();
+    expect(getByRole('button', { name: messages.courseIntroductionVideoDelete.defaultMessage })).toBeDisabled();
+  });
+
+  it('enables input and delete button when isEditable is true', () => {
+    const initialProps = { ...props, introVideo: 'BvgNgTPTkSo', isEditable: true };
+    const { getByPlaceholderText, getByRole } = render(<RootWrapper {...initialProps} />);
+    expect(getByPlaceholderText(messages.courseIntroductionVideoPlaceholder.defaultMessage)).not.toBeDisabled();
+    expect(getByRole('button', { name: messages.courseIntroductionVideoDelete.defaultMessage })).not.toBeDisabled();
+  });
 });

src/schedule-and-details/learning-outcomes-section/InstructorsSection.test.jsx

@@ -66,4 +66,18 @@ describe('<LearningOutcomesSection />', () => {
 
     expect(onChangeMock).toHaveBeenCalledWith(['abc'], 'learningInfo');
   });
+
+  it('disables input, delete button and add button when isEditable is false', () => {
+    const { getByPlaceholderText, getByRole } = render(<RootWrapper {...props} isEditable={false} />);
+    expect(getByPlaceholderText(messages.outcomesInputPlaceholder.defaultMessage)).toBeDisabled();
+    expect(getByRole('button', { name: messages.outcomesDelete.defaultMessage })).toBeDisabled();
+    expect(getByRole('button', { name: messages.outcomesAdd.defaultMessage })).toBeDisabled();
+  });
+
+  it('enables input, delete button and add button when isEditable is true', () => {
+    const { getByPlaceholderText, getByRole } = render(<RootWrapper {...props} isEditable />);
+    expect(getByPlaceholderText(messages.outcomesInputPlaceholder.defaultMessage)).not.toBeDisabled();
+    expect(getByRole('button', { name: messages.outcomesDelete.defaultMessage })).not.toBeDisabled();
+    expect(getByRole('button', { name: messages.outcomesAdd.defaultMessage })).not.toBeDisabled();
+  });
 });

src/schedule-and-details/license-section/LicenseSection.test.jsx

@@ -25,4 +25,16 @@ describe('<LicenseSection />', () => {
     expect(getByText(messages.licenseTitle.defaultMessage)).toBeInTheDocument();
     expect(getByText(messages.licenseDescription.defaultMessage)).toBeInTheDocument();
   });
+
+  it('disables license type buttons when isEditable is false', () => {
+    const { getAllByRole } = render(<RootWrapper {...props} isEditable={false} />);
+    const buttons = getAllByRole('button');
+    buttons.forEach((button) => expect(button).toBeDisabled());
+  });
+
+  it('enables license type buttons when isEditable is true', () => {
+    const { getAllByRole } = render(<RootWrapper {...props} isEditable />);
+    const buttons = getAllByRole('button');
+    buttons.forEach((button) => expect(button).not.toBeDisabled());
+  });
 });

src/schedule-and-details/license-section/license-commons-options/LicenseCommonsOptions.test.jsx

@@ -47,11 +47,29 @@ describe('<LicenseCommonsOptions />', () => {
     expect(props.onToggleCheckbox).not.toHaveBeenCalled();
     fireEvent.click(checkboxList[1]);
     expect(props.onToggleCheckbox).toHaveBeenCalledWith(LICENSE_COMMONS_OPTIONS.nonCommercial);
-    // Note: there is no point in asserting that the checkbox is now checked,
-    // because it is a controlled component that never changes unless the props change.
-    // This test should really be implemented in a higher level component/page.
-    // await waitFor(() => {
-    //   expect(checkboxList[1].checked).toBeFalsy();
-    // });
+  });
+
+  it('disables all non-fixed checkboxes when isEditable is false', () => {
+    const { getAllByRole } = render(<RootWrapper {...props} isEditable={false} />);
+    const checkboxList = getAllByRole('checkbox');
+    // All checkboxes (including attribution which is always disabled) should be disabled
+    checkboxList.forEach((checkbox) => expect(checkbox).toBeDisabled());
+  });
+
+  it('does not call onToggleCheckbox when clicked while isEditable is false', () => {
+    onToggleCheckboxMock.mockClear();
+    const { getAllByRole } = render(<RootWrapper {...props} isEditable={false} />);
+    const checkboxList = getAllByRole('checkbox');
+    fireEvent.click(checkboxList[1]);
+    expect(onToggleCheckboxMock).not.toHaveBeenCalled();
+  });
+
+  it('non-fixed checkboxes are enabled when isEditable is true', () => {
+    const { getAllByRole } = render(<RootWrapper {...props} isEditable />);
+    const checkboxList = getAllByRole('checkbox');
+    // checkboxList[0] is attribution (always disabled), rest should be enabled
+    expect(checkboxList[1]).not.toBeDisabled();
+    expect(checkboxList[2]).not.toBeDisabled();
+    expect(checkboxList[3]).not.toBeDisabled();
   });
 });