test: replace query calls by button clicks

openedx · Dec 20, 2023 · 7da6de8 · 7da6de8
1 parent 98bb314
commit 7da6de8
Show file tree

Hide file tree

Showing 10 changed files with 162 additions and 112 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/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/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
@@ -85,19 +85,18 @@ describe('<SectionCard />', () => {
   });
 
   it('title only updates if changed', async () => {
-    const { queryByTestId, findByTestId } = renderComponent();
+    const { findByTestId } = renderComponent();
 
-    let editButton = await findByTestId('edit-button');
+    let editButton = await findByTestId('section-edit-button');
     fireEvent.click(editButton);
-    let editField = await findByTestId('edit field');
-    expect(queryByTestId('edit field')).toBeInTheDocument();
+    let editField = await findByTestId('section-edit-field');
     fireEvent.blur(editField);
 
     expect(onEditSectionSubmit).not.toHaveBeenCalled();
 
-    editButton = await findByTestId('edit-button');
+    editButton = await findByTestId('section-edit-button');
     fireEvent.click(editButton);
-    editField = await findByTestId('edit field');
+    editField = await findByTestId('section-edit-field');
     fireEvent.change(editField, { target: { value: 'some random value' } });
     fireEvent.blur(editField);
     expect(onEditSectionSubmit).toHaveBeenCalled();

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
@@ -108,16 +108,16 @@ describe('<SubsectionCard />', () => {
   it('title only updates if changed', async () => {
     const { findByTestId } = renderComponent();
 
-    let editButton = await findByTestId('edit-button');
+    let editButton = await findByTestId('subsection-edit-button');
     fireEvent.click(editButton);
-    let editField = await findByTestId('edit field');
+    let editField = await findByTestId('subsection-edit-field');
     fireEvent.blur(editField);
 
     expect(onEditSubectionSubmit).not.toHaveBeenCalled();
 
-    editButton = await findByTestId('edit-button');
+    editButton = await findByTestId('subsection-edit-button');
     fireEvent.click(editButton);
-    editField = await findByTestId('edit field');
+    editField = await findByTestId('subsection-edit-field');
     fireEvent.change(editField, { target: { value: 'some random value' } });
     fireEvent.keyDown(editField, { key: 'Enter', keyCode: 13 });
     expect(onEditSubectionSubmit).toHaveBeenCalled();