feat: [FC-0044] Unit page - display xblock components (#857)

src/course-unit/CourseUnit.test.jsx

@@ -95,14 +95,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();
@@ -136,7 +137,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;
@@ -160,8 +164,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);
@@ -299,7 +306,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', [
@@ -331,10 +338,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));

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',

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
@@ -55,7 +55,8 @@ const HeaderTitle = ({
         alt={intl.formatMessage(messages.altButtonSettings)}
         className="flex-shrink-0"
         iconAs={SettingsIcon}
-        onClick={() => {}}
+        onClick={() => {
+        }}
       />
     </div>
   );