test: improve coverage for course outline

refactor: remove delete unit hook and thunk till unit list is implemented test: additional tests for sections test: additional tests for subsections test: replace query calls by button clicks
openedx · Dec 20, 2023 · c873e67 · c873e67
1 parent b4f6221
commit c873e67
Show file tree

Hide file tree

Showing 13 changed files with 276 additions and 173 deletions.
diff --git a/src/course-outline/CourseOutline.test.jsx b/src/course-outline/CourseOutline.test.jsx
diff --git a/src/course-outline/__mocks__/courseOutlineIndex.js b/src/course-outline/__mocks__/courseOutlineIndex.js
@@ -55,7 +55,7 @@ module.exports = {
       },
     ],
     showCorrectness: 'always',
-    highlightsEnabledForMessaging: true,
+    highlightsEnabledForMessaging: false,
     highlightsEnabled: true,
     highlightsPreviewOnly: false,
     highlightsDocUrl: 'http://edx.readthedocs.io/projects/open-edx-building-and-running-a-course/en/latest/developing_course/course_sections.html#set-section-highlights-for-weekly-course-highlight-messages',
@@ -72,7 +72,7 @@ module.exports = {
           category: 'chapter',
           hasChildren: true,
           editedOn: 'Aug 23, 2023 at 12:35 UTC',
-          published: true,
+          published: false,
           publishedOn: 'Aug 23, 2023 at 12:35 UTC',
           studioUrl: '/course/course-v1:edX+DemoX+Demo_Course?show=block-v1%3AedX%2BDemoX%2BDemo_Course%2Btype%40chapter%2Bblock%40d8a6192ade314473a78242dfeedfbf5b',
           releasedToStudents: true,

diff --git a/src/course-outline/card-header/CardHeader.jsx b/src/course-outline/card-header/CardHeader.jsx
@@ -62,7 +62,7 @@ const CardHeader = ({
       {isFormOpen ? (
         <Form.Group className="m-0">
           <Form.Control
-            data-testid="edit field"
+            data-testid={`${namePrefix}-edit-field`}
             ref={(e) => e && e.focus()}
             value={titleValue}
             name="displayName"
@@ -115,7 +115,7 @@ const CardHeader = ({
       <div className="ml-auto d-flex">
         {!isFormOpen && (
           <IconButton
-            data-testid="edit-button"
+            data-testid={`${namePrefix}-edit-button`}
             alt={intl.formatMessage(messages.altButtonEdit)}
             iconAs={EditIcon}
             onClick={onClickEdit}
@@ -133,14 +133,30 @@ const CardHeader = ({
           />
           <Dropdown.Menu>
             <Dropdown.Item
+              data-testid={`${namePrefix}-card-header__menu-publish-button`}
               disabled={isDisabledPublish}
               onClick={onClickPublish}
             >
               {intl.formatMessage(messages.menuPublish)}
             </Dropdown.Item>
-            <Dropdown.Item onClick={onClickConfigure}>{intl.formatMessage(messages.menuConfigure)}</Dropdown.Item>
-            <Dropdown.Item onClick={onClickDuplicate}>{intl.formatMessage(messages.menuDuplicate)}</Dropdown.Item>
-            <Dropdown.Item onClick={onClickDelete}>{intl.formatMessage(messages.menuDelete)}</Dropdown.Item>
+            <Dropdown.Item
+              data-testid={`${namePrefix}-card-header__menu-configure-button`}
+              onClick={onClickConfigure}
+            >
+              {intl.formatMessage(messages.menuConfigure)}
+            </Dropdown.Item>
+            <Dropdown.Item
+              data-testid={`${namePrefix}-card-header__menu-duplicate-button`}
+              onClick={onClickDuplicate}
+            >
+              {intl.formatMessage(messages.menuDuplicate)}
+            </Dropdown.Item>
+            <Dropdown.Item
+              data-testid={`${namePrefix}-card-header__menu-delete-button`}
+              onClick={onClickDelete}
+            >
+              {intl.formatMessage(messages.menuDelete)}
+            </Dropdown.Item>
           </Dropdown.Menu>
         </Dropdown>
       </div>

diff --git a/src/course-outline/card-header/CardHeader.test.jsx b/src/course-outline/card-header/CardHeader.test.jsx
@@ -146,7 +146,7 @@ describe('<CardHeader />', () => {
   it('calls onClickEdit when the button is clicked', async () => {
     const { findByTestId } = renderComponent();
 
-    const editButton = await findByTestId('edit-button');
+    const editButton = await findByTestId('section-edit-button');
     fireEvent.click(editButton);
     waitFor(() => {
       expect(onClickEditMock).toHaveBeenCalled();
@@ -159,7 +159,7 @@ describe('<CardHeader />', () => {
       isFormOpen: true,
     });
 
-    expect(await findByTestId('edit field')).toBeInTheDocument();
+    expect(await findByTestId('section-edit-field')).toBeInTheDocument();
     waitFor(() => {
       expect(queryByTestId('section-card-header__expanded-btn')).not.toBeInTheDocument();
       expect(queryByTestId('edit-button')).not.toBeInTheDocument();
@@ -173,7 +173,7 @@ describe('<CardHeader />', () => {
       isDisabledEditField: true,
     });
 
-    expect(await findByTestId('edit field')).toBeDisabled();
+    expect(await findByTestId('section-edit-field')).toBeDisabled();
   });
 
   it('calls onClickDelete when item is clicked', async () => {

diff --git a/src/course-outline/data/slice.js b/src/course-outline/data/slice.js
@@ -121,23 +121,6 @@ const slice = createSlice({
         return section;
       });
     },
-    deleteUnit: (state, { payload }) => {
-      state.sectionsList = state.sectionsList.map((section) => {
-        if (section.id !== payload.sectionId) {
-          return section;
-        }
-        section.childInfo.children = section.childInfo.children.map((subsection) => {
-          if (subsection.id !== payload.subsectionId) {
-            return subsection;
-          }
-          subsection.childInfo.children = subsection.childInfo.children.filter(
-            ({ id }) => id !== payload.itemId,
-          );
-          return subsection;
-        });
-        return section;
-      });
-    },
     duplicateSection: (state, { payload }) => {
       state.sectionsList = state.sectionsList.reduce((result, currentValue) => {
         if (currentValue.id === payload.id) {
@@ -166,7 +149,6 @@ export const {
   setCurrentSubsection,
   deleteSection,
   deleteSubsection,
-  deleteUnit,
   duplicateSection,
   reorderSectionList,
 } = slice.actions;

diff --git a/src/course-outline/data/thunk.js b/src/course-outline/data/thunk.js
@@ -39,7 +39,6 @@ import {
   updateFetchSectionLoadingStatus,
   deleteSection,
   deleteSubsection,
-  deleteUnit,
   duplicateSection,
   reorderSectionList,
 } from './slice';
@@ -265,15 +264,6 @@ export function deleteCourseSubsectionQuery(subsectionId, sectionId) {
   };
 }
 
-export function deleteCourseUnitQuery(unitId, subsectionId, sectionId) {
-  return async (dispatch) => {
-    dispatch(deleteCourseItemQuery(
-      unitId,
-      () => deleteUnit({ itemId: unitId, subsectionId, sectionId }),
-    ));
-  };
-}
-
 /**
  * Generic function to duplicate any course item. See wrapper functions below for specific implementations.
  * @param {string} itemId

diff --git a/src/course-outline/delete-modal/DeleteModal.jsx b/src/course-outline/delete-modal/DeleteModal.jsx
@@ -28,6 +28,7 @@ const DeleteModal = ({ isOpen, close, onDeleteSubmit }) => {
             {intl.formatMessage(messages.cancelButton)}
           </Button>
           <Button
+            data-testid="delete-confirm-button"
             onClick={(e) => {
               e.preventDefault();
               onDeleteSubmit();

diff --git a/src/course-outline/header-navigations/HeaderNavigations.jsx b/src/course-outline/header-navigations/HeaderNavigations.jsx
@@ -50,6 +50,7 @@ const HeaderNavigations = ({
         >
           <Button
             onClick={handleReIndex}
+            data-testid="course-reindex"
             variant="outline-primary"
             disabled={isDisabledReindexButton}
           >

diff --git a/src/course-outline/hooks.jsx b/src/course-outline/hooks.jsx
@@ -24,7 +24,6 @@ import {
   addNewSubsectionQuery,
   deleteCourseSectionQuery,
   deleteCourseSubsectionQuery,
-  deleteCourseUnitQuery,
   editCourseItemQuery,
   duplicateSectionQuery,
   duplicateSubsectionQuery,
@@ -133,11 +132,7 @@ const useCourseOutline = ({ courseId }) => {
       dispatch(deleteCourseSubsectionQuery(currentItem.id, currentSection.id));
       break;
     case COURSE_BLOCK_NAMES.vertical.id:
-      dispatch(deleteCourseUnitQuery(
-        currentItem.id,
-        currentSubsection.id,
-        currentSection.id,
-      ));
+      // delete unit
       break;
     default:
       return;

diff --git a/src/course-outline/publish-modal/PublishModal.jsx b/src/course-outline/publish-modal/PublishModal.jsx
@@ -67,7 +67,10 @@ const PublishModal = ({
           <ModalDialog.CloseButton variant="tertiary">
             {intl.formatMessage(messages.cancelButton)}
           </ModalDialog.CloseButton>
-          <Button onClick={onPublishSubmit}>
+          <Button
+            data-testid="publish-confirm-button"
+            onClick={onPublishSubmit}
+          >
             {intl.formatMessage(messages.publishButton)}
           </Button>
         </ActionRow>

diff --git a/src/course-outline/section-card/SectionCard.test.jsx b/src/course-outline/section-card/SectionCard.test.jsx
@@ -8,6 +8,7 @@ import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
 
 import initializeStore from '../../store';
 import SectionCard from './SectionCard';
+import cardHeaderMessages from '../card-header/messages';
 
 // eslint-disable-next-line no-unused-vars
 let axiosMock;
@@ -25,6 +26,8 @@ const section = {
   highlights: ['highlight 1', 'highlight 2'],
 };
 
+const onEditSectionSubmit = jest.fn();
+
 const renderComponent = (props) => render(
   <AppProvider store={store}>
     <IntlProvider locale="en">
@@ -33,14 +36,11 @@ const renderComponent = (props) => render(
         onOpenPublishModal={jest.fn()}
         onOpenHighlightsModal={jest.fn()}
         onOpenDeleteModal={jest.fn()}
-        onEditClick={jest.fn()}
         savingStatus=""
-        onEditSectionSubmit={jest.fn()}
+        onEditSectionSubmit={onEditSectionSubmit}
         onDuplicateSubmit={jest.fn()}
         isSectionsExpanded
-        namePrefix="section"
-        connectDragSource={(el) => el}
-        isDragging
+        onNewSubsectionSubmit={jest.fn()}
         {...props}
       >
         <span>children</span>
@@ -83,4 +83,69 @@ describe('<SectionCard />', () => {
     expect(queryByTestId('section-card__subsections')).toBeInTheDocument();
     expect(queryByTestId('new-subsection-button')).toBeInTheDocument();
   });
+
+  it('title only updates if changed', async () => {
+    const { findByTestId } = renderComponent();
+
+    let editButton = await findByTestId('section-edit-button');
+    fireEvent.click(editButton);
+    let editField = await findByTestId('section-edit-field');
+    fireEvent.blur(editField);
+
+    expect(onEditSectionSubmit).not.toHaveBeenCalled();
+
+    editButton = await findByTestId('section-edit-button');
+    fireEvent.click(editButton);
+    editField = await findByTestId('section-edit-field');
+    fireEvent.change(editField, { target: { value: 'some random value' } });
+    fireEvent.blur(editField);
+    expect(onEditSectionSubmit).toHaveBeenCalled();
+  });
+
+  it('renders live status', async () => {
+    const { findByText } = renderComponent();
+    expect(await findByText(cardHeaderMessages.statusBadgeLive.defaultMessage)).toBeInTheDocument();
+  });
+
+  it('renders published but live status', async () => {
+    const { findByText } = renderComponent({
+      section: {
+        ...section,
+        published: true,
+        releasedToStudents: false,
+        visibleToStaffOnly: false,
+        visibilityState: 'visible',
+        staffOnlyMessage: false,
+      },
+    });
+    expect(await findByText(cardHeaderMessages.statusBadgePublishedNotLive.defaultMessage)).toBeInTheDocument();
+  });
+
+  it('renders staff status', async () => {
+    const { findByText } = renderComponent({
+      section: {
+        ...section,
+        published: false,
+        releasedToStudents: false,
+        visibleToStaffOnly: true,
+        visibilityState: 'staff_only',
+        staffOnlyMessage: true,
+      },
+    });
+    expect(await findByText(cardHeaderMessages.statusBadgeStaffOnly.defaultMessage)).toBeInTheDocument();
+  });
+
+  it('renders draft status', async () => {
+    const { findByText } = renderComponent({
+      section: {
+        ...section,
+        published: false,
+        releasedToStudents: false,
+        visibleToStaffOnly: false,
+        visibilityState: 'staff_only',
+        staffOnlyMessage: false,
+      },
+    });
+    expect(await findByText(cardHeaderMessages.statusBadgeDraft.defaultMessage)).toBeInTheDocument();
+  });
 });
diff --git a/src/course-outline/status-bar/StatusBar.jsx b/src/course-outline/status-bar/StatusBar.jsx
@@ -81,7 +81,7 @@ const StatusBar = ({
               {intl.formatMessage(messages.highlightEmailsEnabled)}
             </span>
           ) : (
-            <Button size="sm" onClick={openEnableHighlightsModal}>
+            <Button data-testid="highlights-enable-button" size="sm" onClick={openEnableHighlightsModal}>
               {intl.formatMessage(messages.highlightEmailsButton)}
             </Button>
           )}

diff --git a/src/course-outline/subsection-card/SubsectionCard.test.jsx b/src/course-outline/subsection-card/SubsectionCard.test.jsx
@@ -36,6 +36,8 @@ const subsection = {
   hasChanges: false,
 };
 
+const onEditSubectionSubmit = jest.fn();
+
 const renderComponent = (props) => render(
   <AppProvider store={store}>
     <IntlProvider locale="en">
@@ -47,7 +49,7 @@ const renderComponent = (props) => render(
         onOpenDeleteModal={jest.fn()}
         onEditClick={jest.fn()}
         savingStatus=""
-        onEditSubmit={jest.fn()}
+        onEditSubmit={onEditSubectionSubmit}
         onDuplicateSubmit={jest.fn()}
         namePrefix="subsection"
         {...props}
@@ -91,4 +93,33 @@ describe('<SubsectionCard />', () => {
     expect(queryByTestId('subsection-card__units')).not.toBeInTheDocument();
     expect(queryByTestId('new-unit-button')).not.toBeInTheDocument();
   });
+
+  it('updates current section, subsection and item', async () => {
+    const { findByTestId } = renderComponent();
+
+    const menu = await findByTestId('subsection-card-header__menu');
+    fireEvent.click(menu);
+    const { currentSection, currentSubsection, currentItem } = store.getState().courseOutline;
+    expect(currentSection).toEqual(section);
+    expect(currentSubsection).toEqual(subsection);
+    expect(currentItem).toEqual(subsection);
+  });
+
+  it('title only updates if changed', async () => {
+    const { findByTestId } = renderComponent();
+
+    let editButton = await findByTestId('subsection-edit-button');
+    fireEvent.click(editButton);
+    let editField = await findByTestId('subsection-edit-field');
+    fireEvent.blur(editField);
+
+    expect(onEditSubectionSubmit).not.toHaveBeenCalled();
+
+    editButton = await findByTestId('subsection-edit-button');
+    fireEvent.click(editButton);
+    editField = await findByTestId('subsection-edit-field');
+    fireEvent.change(editField, { target: { value: 'some random value' } });
+    fireEvent.keyDown(editField, { key: 'Enter', keyCode: 13 });
+    expect(onEditSubectionSubmit).toHaveBeenCalled();
+  });
 });