refactor: streamline permission handling in ScheduleAndDetails component and tests

Author: bra-i-am

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

@@ -27,13 +27,21 @@ import ScheduleAndDetails from '.';
 jest.mock('@src/authz/hooks', () => ({
   useCourseUserPermissions: jest.fn().mockReturnValue({
     isLoading: false,
-    isAuthzEnabled: true,
     canViewScheduleAndDetails: true,
     canEditSchedule: true,
     canEditDetails: true,
   }),
 }));
 
+const mockPermissions = (overrides = {}) =>
+  jest.mocked(useCourseUserPermissions).mockReturnValue({
+    isLoading: false,
+    canViewScheduleAndDetails: true,
+    canEditSchedule: true,
+    canEditDetails: true,
+    ...overrides,
+  });
+
 let axiosMock;
 let store;
 const courseId = '123';
@@ -191,13 +199,7 @@ describe('<ScheduleAndDetails /> permissions', () => {
     axiosMock.onGet(getCourseDetailsApiUrl(courseId)).reply(200, courseDetailsMock);
     axiosMock.onGet(getCourseSettingsApiUrl(courseId)).reply(200, courseSettingsMock);
     axiosMock.onPut(getCourseDetailsApiUrl(courseId)).reply(200);
-    jest.mocked(useCourseUserPermissions).mockReturnValue({
-      isLoading: false,
-      isAuthzEnabled: true,
-      canViewScheduleAndDetails: true,
-      canEditSchedule: true,
-      canEditDetails: true,
-    });
+    mockPermissions();
   });
 
   it('renders normally when authz flag is disabled (no regression)', async () => {
@@ -218,13 +220,7 @@ describe('<ScheduleAndDetails /> permissions', () => {
 
   it('shows PermissionDeniedAlert when user lacks view permission', async () => {
     mockWaffleFlags({ enableAuthzCourseAuthoring: true });
-    jest.mocked(useCourseUserPermissions).mockReturnValue({
-      isLoading: false,
-      isAuthzEnabled: true,
-      canViewScheduleAndDetails: false,
-      canEditSchedule: false,
-      canEditDetails: false,
-    });
+    mockPermissions({ canViewScheduleAndDetails: false, canEditSchedule: false, canEditDetails: false });
     const { getByTestId } = renderComponent();
     await waitFor(() => {
       expect(getByTestId('permissionDeniedAlert')).toBeInTheDocument();
@@ -233,13 +229,7 @@ describe('<ScheduleAndDetails /> permissions', () => {
 
   it('disables schedule date inputs when user lacks edit_schedule permission', async () => {
     mockWaffleFlags({ enableAuthzCourseAuthoring: true });
-    jest.mocked(useCourseUserPermissions).mockReturnValue({
-      isLoading: false,
-      isAuthzEnabled: true,
-      canViewScheduleAndDetails: true,
-      canEditSchedule: false,
-      canEditDetails: true,
-    });
+    mockPermissions({ canEditSchedule: false });
     const { getAllByPlaceholderText } = renderComponent();
     await waitFor(() => {
       const dateInputs = getAllByPlaceholderText(DATE_FORMAT.toLocaleUpperCase());
@@ -249,13 +239,7 @@ describe('<ScheduleAndDetails /> permissions', () => {
 
   it('disables pacing and details inputs when user lacks edit_details permission', async () => {
     mockWaffleFlags({ enableAuthzCourseAuthoring: true });
-    jest.mocked(useCourseUserPermissions).mockReturnValue({
-      isLoading: false,
-      isAuthzEnabled: true,
-      canViewScheduleAndDetails: true,
-      canEditSchedule: true,
-      canEditDetails: false,
-    });
+    mockPermissions({ canEditDetails: false });
     const { getAllByRole } = renderComponent();
     await waitFor(() => {
       const radios = getAllByRole('radio');
@@ -265,13 +249,7 @@ describe('<ScheduleAndDetails /> permissions', () => {
 
   it('save button cannot be triggered when user has no edit permissions', async () => {
     mockWaffleFlags({ enableAuthzCourseAuthoring: true });
-    jest.mocked(useCourseUserPermissions).mockReturnValue({
-      isLoading: false,
-      isAuthzEnabled: true,
-      canViewScheduleAndDetails: true,
-      canEditSchedule: false,
-      canEditDetails: false,
-    });
+    mockPermissions({ canEditSchedule: false, canEditDetails: false });
     const { getAllByPlaceholderText, queryByText } = renderComponent();
     // Wait for page to load
     const dateInputs = await waitFor(() => getAllByPlaceholderText(DATE_FORMAT.toLocaleUpperCase()));

src/schedule-and-details/index.jsx

@@ -176,8 +176,7 @@ const ScheduleAndDetails = () => {
     );
   }
 
-  const isScheduleEditable = canEditSchedule;
-  const isDetailsEditable = canEditDetails;
+  const canEdit = canEditSchedule || canEditDetails;
 
   const showCreditSection = creditEligibilityEnabled && isCreditCourse;
   const showRequirementsSection = aboutPageEditable || isPrerequisiteCoursesEnabled || isEntranceExamsEnabled;
@@ -277,7 +276,7 @@ const ScheduleAndDetails = () => {
                   <PacingSection
                     selfPaced={selfPaced}
                     startDate={startDate}
-                    isEditable={isDetailsEditable}
+                    isEditable={canEditDetails}
                     onChange={handleValuesChange}
                   />
                   <ScheduleSection
@@ -292,14 +291,14 @@ const ScheduleAndDetails = () => {
                     certificateAvailableDate={certificateAvailableDate}
                     certificatesDisplayBehavior={certificatesDisplayBehavior}
                     canShowCertificateAvailableDateField={canShowCertificateAvailableDateField}
-                    isEditable={isScheduleEditable}
+                    isEditable={canEditSchedule}
                     onChange={handleValuesChange}
                   />
                   {aboutPageEditable && (
                     <DetailsSection
                       language={language}
                       languageOptions={languageOptions}
-                      isEditable={isDetailsEditable}
+                      isEditable={canEditDetails}
                       onChange={handleValuesChange}
                     />
                   )}
@@ -320,19 +319,19 @@ const ScheduleAndDetails = () => {
                     shortDescriptionEditable={shortDescriptionEditable}
                     enableExtendedCourseDetails={enableExtendedCourseDetails}
                     videoThumbnailImageAssetPath={videoThumbnailImageAssetPath}
-                    isEditable={isDetailsEditable}
+                    isEditable={canEditDetails}
                     onChange={handleValuesChange}
                   />
                   {enableExtendedCourseDetails && (
                     <>
                       <LearningOutcomesSection
                         learningInfo={learningInfo}
-                        isEditable={isDetailsEditable}
+                        isEditable={canEditDetails}
                         onChange={handleValuesChange}
                       />
                       <InstructorsSection
                         instructors={instructorInfo?.instructors}
-                        isEditable={isDetailsEditable}
+                        isEditable={canEditDetails}
                         onChange={handleValuesChange}
                       />
                     </>
@@ -348,14 +347,14 @@ const ScheduleAndDetails = () => {
                       possiblePreRequisiteCourses={possiblePreRequisiteCourses}
                       entranceExamMinimumScorePct={entranceExamMinimumScorePct}
                       isPrerequisiteCoursesEnabled={isPrerequisiteCoursesEnabled}
-                      isEditable={isDetailsEditable}
+                      isEditable={canEditDetails}
                       onChange={handleValuesChange}
                     />
                   )}
                   {licensingEnabled && (
                     <LicenseSection
                       license={license}
-                      isEditable={isDetailsEditable}
+                      isEditable={canEditDetails}
                       onChange={handleValuesChange}
                     />
                   )}
@@ -403,7 +402,7 @@ const ScheduleAndDetails = () => {
             <StatefulButton
               key="save-button"
               onClick={handleUpdateValues}
-              disabled={hasErrors || (!isScheduleEditable && !isDetailsEditable)}
+              disabled={hasErrors || !canEdit}
               state={isQueryPending
                 ? STATEFUL_BUTTON_STATES.pending
                 : STATEFUL_BUTTON_STATES.default}

src/schedule-and-details/requirements-section/RequirementsSection.test.jsx

@@ -97,11 +97,9 @@ describe('<RequirementsSection />', () => {
   });
 
   it('disables effort input and prerequisite dropdown when isEditable is false', () => {
-    const { getByDisplayValue, getByRole } = render(<RootWrapper {...props} isEditable={false} />);
+    const { container, getByDisplayValue } = render(<RootWrapper {...props} isEditable={false} />);
     expect(getByDisplayValue(props.effort)).toBeDisabled();
-    expect(getByRole('button', { name: messages.dropdownLabel.defaultMessage, hidden: true })).toBeDefined();
-    const dropdown = getByRole('button', { name: new RegExp(props.preRequisiteCourses[0] || '', 'i'), hidden: true });
-    expect(dropdown || getByRole('button', { name: messages.dropdownEmptyText?.defaultMessage || '' })).toBeDefined();
+    expect(container.querySelector('#prerequisiteDropdown')).toBeDisabled();
   });
 
   it('enables effort input when isEditable is true', () => {