fix: after review

openedx · Feb 29, 2024 · 32cfc78 · 32cfc78
1 parent 62ae4b5
commit 32cfc78
Show file tree

Hide file tree

Showing 5 changed files with 22 additions and 13 deletions.
diff --git a/src/course-unit/CourseUnit.scss b/src/course-unit/CourseUnit.scss
@@ -1,4 +1,4 @@
 @import "./breadcrumbs/Breadcrumbs";
 @import "./course-sequence/CourseSequence";
 @import "./add-component/AddComponent";
-@import "./course-xblock/CourseXblock";
+@import "./course-xblock/CourseXBlock";
diff --git a/src/course-unit/CourseUnit.test.jsx b/src/course-unit/CourseUnit.test.jsx
@@ -1,6 +1,6 @@
 import MockAdapter from 'axios-mock-adapter';
 import {
-  act, render, waitFor, fireEvent,
+  act, render, waitFor, fireEvent, within,
 } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { IntlProvider } from '@edx/frontend-platform/i18n';
@@ -88,14 +88,15 @@ describe('<CourseUnit />', () => {
   });
 
   it('render CourseUnit component correctly', async () => {
-    const { getByText, getByRole } = render(<RootWrapper />);
+    const { getByText, getByRole, getByTestId } = render(<RootWrapper />);
     const currentSectionName = courseUnitIndexMock.ancestor_info.ancestors[1].display_name;
     const currentSubSectionName = courseUnitIndexMock.ancestor_info.ancestors[1].display_name;
 
     await waitFor(() => {
+      const unitHeaderTitle = getByTestId('unit-header-title');
       expect(getByText(unitDisplayName)).toBeInTheDocument();
-      expect(getByRole('button', { name: headerTitleMessages.altButtonEdit.defaultMessage })).toBeInTheDocument();
-      expect(getByRole('button', { name: headerTitleMessages.altButtonSettings.defaultMessage })).toBeInTheDocument();
+      expect(within(unitHeaderTitle).getByRole('button', { name: headerTitleMessages.altButtonEdit.defaultMessage })).toBeInTheDocument();
+      expect(within(unitHeaderTitle).getByRole('button', { name: headerTitleMessages.altButtonSettings.defaultMessage })).toBeInTheDocument();
       expect(getByRole('button', { name: headerNavigationsMessages.viewLiveButton.defaultMessage })).toBeInTheDocument();
       expect(getByRole('button', { name: headerNavigationsMessages.previewButton.defaultMessage })).toBeInTheDocument();
       expect(getByRole('button', { name: currentSectionName })).toBeInTheDocument();
@@ -129,7 +130,10 @@ describe('<CourseUnit />', () => {
 
   it('checks courseUnit title changing when edit query is successfully', async () => {
     const {
-      findByText, queryByRole, getByRole,
+      findByText,
+      queryByRole,
+      getByRole,
+      getByTestId,
     } = render(<RootWrapper />);
     let editTitleButton = null;
     let titleEditField = null;
@@ -153,8 +157,11 @@ describe('<CourseUnit />', () => {
       });
 
     await waitFor(() => {
-      editTitleButton = getByRole('button', { name: headerTitleMessages.altButtonEdit.defaultMessage });
-      titleEditField = queryByRole('textbox', { name: headerTitleMessages.ariaLabelButtonEdit.defaultMessage });
+      const unitHeaderTitle = getByTestId('unit-header-title');
+      editTitleButton = within(unitHeaderTitle)
+        .getByRole('button', { name: headerTitleMessages.altButtonEdit.defaultMessage });
+      titleEditField = within(unitHeaderTitle)
+        .queryByRole('textbox', { name: headerTitleMessages.ariaLabelButtonEdit.defaultMessage });
     });
     expect(titleEditField).not.toBeInTheDocument();
     fireEvent.click(editTitleButton);
@@ -246,7 +253,7 @@ describe('<CourseUnit />', () => {
   });
 
   it('the sequence unit is updated after changing the unit header', async () => {
-    const { getAllByTestId, getByRole } = render(<RootWrapper />);
+    const { getAllByTestId, getByTestId } = render(<RootWrapper />);
     const updatedCourseSectionVerticalData = cloneDeep(courseSectionVerticalMock);
     const updatedAncestorsChild = updatedCourseSectionVerticalData.xblock_info.ancestor_info.ancestors[0];
     set(updatedCourseSectionVerticalData, 'xblock_info.ancestor_info.ancestors[0].child_info.children', [
@@ -278,10 +285,12 @@ describe('<CourseUnit />', () => {
 
     await executeThunk(fetchCourseSectionVerticalData(blockId), store.dispatch);
 
-    const editTitleButton = getByRole('button', { name: headerTitleMessages.altButtonEdit.defaultMessage });
+    const unitHeaderTitle = getByTestId('unit-header-title');
+
+    const editTitleButton = within(unitHeaderTitle).getByRole('button', { name: headerTitleMessages.altButtonEdit.defaultMessage });
     fireEvent.click(editTitleButton);
 
-    const titleEditField = getByRole('textbox', { name: headerTitleMessages.ariaLabelButtonEdit.defaultMessage });
+    const titleEditField = within(unitHeaderTitle).getByRole('textbox', { name: headerTitleMessages.ariaLabelButtonEdit.defaultMessage });
     fireEvent.change(titleEditField, { target: { value: newDisplayName } });
 
     await act(async () => fireEvent.blur(titleEditField));

diff --git a/...urse-unit/course-xblock/CourseXblock.scss → ...urse-unit/course-xblock/CourseXBlock.scss b/...urse-unit/course-xblock/CourseXblock.scss → ...urse-unit/course-xblock/CourseXBlock.scss
diff --git a/src/course-unit/course-xblock/messages.js b/src/course-unit/course-xblock/messages.js
@@ -3,7 +3,7 @@ import { defineMessages } from '@edx/frontend-platform/i18n';
 const messages = defineMessages({
   blockAltButtonEdit: {
     id: 'course-authoring.course-unit.xblock.button.edit.alt',
-    defaultMessage: 'Edit Item',
+    defaultMessage: 'Edit',
   },
   blockActionsDropdownAlt: {
     id: 'course-authoring.course-unit.xblock.button.actions.alt',

diff --git a/src/course-unit/header-title/HeaderTitle.jsx b/src/course-unit/header-title/HeaderTitle.jsx
@@ -27,7 +27,7 @@ const HeaderTitle = ({
   }, [unitTitle]);
 
   return (
-    <div className="d-flex align-items-center lead">
+    <div className="d-flex align-items-center lead" data-testid="unit-header-title">
       {isTitleEditFormOpen ? (
         <Form.Group className="m-0">
           <Form.Control