feat: [FC-0070] rendering split test content in unit page

openedx · Feb 26, 2025 · 3e32939 · 3e32939
1 parent a0a0b9d
commit 3e32939
Show file tree

Hide file tree

Showing 28 changed files with 566 additions and 187 deletions.
diff --git a/src/constants.js b/src/constants.js
@@ -59,6 +59,7 @@ export const COURSE_BLOCK_NAMES = ({
   sequential: { id: 'sequential', name: 'Subsection' },
   vertical: { id: 'vertical', name: 'Unit' },
   libraryContent: { id: 'library_content', name: 'Library content' },
+  splitTest: { id: 'split_test', name: 'Split Test' },
   component: { id: 'component', name: 'Component' },
 });
 

diff --git a/src/course-unit/CourseUnit.jsx b/src/course-unit/CourseUnit.jsx
@@ -28,6 +28,7 @@ import Breadcrumbs from './breadcrumbs/Breadcrumbs';
 import HeaderNavigations from './header-navigations/HeaderNavigations';
 import Sequence from './course-sequence';
 import Sidebar from './sidebar';
+import SplitTestSidebarInfo from './sidebar/SplitTestSidebarInfo';
 import { useCourseUnit, useLayoutGrid } from './hooks';
 import messages from './messages';
 import PublishControls from './sidebar/PublishControls';
@@ -52,6 +53,7 @@ const CourseUnit = ({ courseId }) => {
     isTitleEditFormOpen,
     isUnitVerticalType,
     isUnitLibraryType,
+    isSplitTestType,
     staticFileNotices,
     currentlyVisibleToStudents,
     unitXBlockActions,
@@ -72,6 +74,8 @@ const CourseUnit = ({ courseId }) => {
     handleRollbackMovedXBlock,
     handleCloseXBlockMovedAlert,
     handleNavigateToTargetUnit,
+    addComponentTemplateData,
+    setAddComponentTemplateData,
   } = useCourseUnit({ courseId, blockId });
   const layoutGrid = useLayoutGrid(unitCategory, isUnitLibraryType);
 
@@ -153,7 +157,7 @@ const CourseUnit = ({ courseId }) => {
             )}
             headerActions={(
               <HeaderNavigations
-                unitCategory={unitCategory}
+                category={unitCategory}
                 headerNavigationsActions={headerNavigationsActions}
               />
             )}
@@ -186,14 +190,18 @@ const CourseUnit = ({ courseId }) => {
               <XBlockContainerIframe
                 courseId={courseId}
                 blockId={blockId}
+                isUnitVerticalType={isUnitVerticalType}
                 unitXBlockActions={unitXBlockActions}
                 courseVerticalChildren={courseVerticalChildren.children}
                 handleConfigureSubmit={handleConfigureSubmit}
               />
               {isUnitVerticalType && (
                 <AddComponent
-                  blockId={blockId}
+                  parentLocator={blockId}
+                  isUnitVerticalType={isUnitVerticalType}
                   handleCreateNewCourseXBlock={handleCreateNewCourseXBlock}
+                  addComponentTemplateData={addComponentTemplateData}
+                  setAddComponentTemplateData={setAddComponentTemplateData}
                 />
               )}
               {showPasteXBlock && canPasteComponent && isUnitVerticalType && (
@@ -228,6 +236,11 @@ const CourseUnit = ({ courseId }) => {
                     </Sidebar>
                   </>
                 )}
+                {isSplitTestType && (
+                  <Sidebar data-testid="course-split-test-sidebar">
+                    <SplitTestSidebarInfo />
+                  </Sidebar>
+                )}
               </Stack>
             </Layout.Element>
           </Layout>

diff --git a/src/course-unit/CourseUnit.scss b/src/course-unit/CourseUnit.scss
@@ -5,6 +5,7 @@
 @import "./header-title/HeaderTitle";
 @import "./move-modal";
 @import "./preview-changes";
+@import "./xblock-container-iframe";
 
 .course-unit {
   min-width: 900px;

diff --git a/src/course-unit/CourseUnit.test.jsx b/src/course-unit/CourseUnit.test.jsx
@@ -50,7 +50,6 @@ import pasteNotificationsMessages from './clipboard/paste-notification/messages'
 import headerNavigationsMessages from './header-navigations/messages';
 import headerTitleMessages from './header-title/messages';
 import courseSequenceMessages from './course-sequence/messages';
-import sidebarMessages from './sidebar/messages';
 import { extractCourseUnitId } from './sidebar/utils';
 import CourseUnit from './CourseUnit';
 
@@ -62,6 +61,7 @@ import { messageTypes, PUBLISH_TYPES, UNIT_VISIBILITY_STATES } from './constants
 import { IframeProvider } from './context/iFrameContext';
 import moveModalMessages from './move-modal/messages';
 import xblockContainerIframeMessages from './xblock-container-iframe/messages';
+import sidebarMessages from './sidebar/messages';
 import messages from './messages';
 
 let axiosMock;
@@ -212,7 +212,7 @@ describe('<CourseUnit />', () => {
       const iframe = getByTitle(xblockContainerIframeMessages.xblockIframeTitle.defaultMessage);
       expect(iframe).toHaveAttribute('src', `${getConfig().STUDIO_BASE_URL}/container_embed/${blockId}`);
       expect(iframe).toHaveAttribute('allow', IFRAME_FEATURE_POLICY);
-      expect(iframe).toHaveAttribute('style', 'width: 100%; height: 0px;');
+      expect(iframe).toHaveAttribute('style', 'height: 0px;');
       expect(iframe).toHaveAttribute('scrolling', 'no');
       expect(iframe).toHaveAttribute('referrerpolicy', 'origin');
       expect(iframe).toHaveAttribute('loading', 'lazy');
@@ -225,11 +225,11 @@ describe('<CourseUnit />', () => {
 
     await waitFor(() => {
       const iframe = getByTitle(xblockContainerIframeMessages.xblockIframeTitle.defaultMessage);
-      expect(iframe).toHaveAttribute('style', 'width: 100%; height: 0px;');
+      expect(iframe).toHaveAttribute('style', 'height: 0px;');
       simulatePostMessageEvent(messageTypes.toggleCourseXBlockDropdown, {
         courseXBlockDropdownHeight: 200,
       });
-      expect(iframe).toHaveAttribute('style', 'width: 100%; height: 200px;');
+      expect(iframe).toHaveAttribute('style', 'height: 200px;');
     });
   });
 
@@ -2015,4 +2015,77 @@ describe('<CourseUnit />', () => {
       });
     });
   });
+
+  describe('Split Test Content page', () => {
+    const newUnitId = '12345';
+    const sequenceId = courseSectionVerticalMock.subsection_location;
+
+    beforeEach(async () => {
+      axiosMock
+        .onGet(getCourseSectionVerticalApiUrl(blockId))
+        .reply(200, {
+          ...courseSectionVerticalMock,
+          xblock: {
+            ...courseSectionVerticalMock.xblock,
+            category: 'split_test',
+          },
+          xblock_info: {
+            ...courseSectionVerticalMock.xblock_info,
+            category: 'split_test',
+          },
+        });
+      await executeThunk(fetchCourseSectionVerticalData(blockId), store.dispatch);
+    });
+
+    it('navigates to split test content page on receive window event', () => {
+      render(<RootWrapper />);
+
+      simulatePostMessageEvent(messageTypes.handleViewXBlockContent, { usageId: newUnitId });
+      expect(mockedUsedNavigate).toHaveBeenCalledWith(`/course/${courseId}/container/${newUnitId}/${sequenceId}`);
+    });
+
+    it('should render split test content page correctly', async () => {
+      const {
+        getByText,
+        getByRole,
+        queryByRole,
+        getByTestId,
+        queryByText,
+      } = render(<RootWrapper />);
+
+      const currentSectionName = courseUnitIndexMock.ancestor_info.ancestors[1].display_name;
+      const currentSubSectionName = courseUnitIndexMock.ancestor_info.ancestors[1].display_name;
+      const helpLinkUrl = 'https://edx.readthedocs.io/projects/open-edx-building-and-running-a-course/en/latest/developing_course/course_components.html#components-that-contain-other-components';
+
+      await waitFor(() => {
+        const unitHeaderTitle = getByTestId('unit-header-title');
+        expect(getByText(unitDisplayName)).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: currentSectionName })).toBeInTheDocument();
+        expect(getByRole('button', { name: currentSubSectionName })).toBeInTheDocument();
+
+        expect(queryByRole('heading', { name: addComponentMessages.title.defaultMessage })).not.toBeInTheDocument();
+        expect(queryByRole('button', { name: headerNavigationsMessages.viewLiveButton.defaultMessage })).not.toBeInTheDocument();
+        expect(queryByRole('button', { name: headerNavigationsMessages.previewButton.defaultMessage })).not.toBeInTheDocument();
+
+        expect(queryByRole('heading', { name: /unit tags/i })).not.toBeInTheDocument();
+        expect(queryByRole('heading', { name: /unit location/i })).not.toBeInTheDocument();
+
+        // Sidebar
+        expect(queryByRole('heading', { name: sidebarMessages.sidebarSplitTestAddComponentTitle.defaultMessage })).toBeInTheDocument();
+        expect(queryByText(sidebarMessages.sidebarSplitTestSelectComponentType.defaultMessage.replaceAll('{bold_tag}', ''))).toBeInTheDocument();
+        expect(queryByText(sidebarMessages.sidebarSplitTestComponentAdded.defaultMessage)).toBeInTheDocument();
+        expect(queryByRole('heading', { name: sidebarMessages.sidebarSplitTestEditComponentTitle.defaultMessage })).toBeInTheDocument();
+        expect(queryByText(sidebarMessages.sidebarSplitTestEditComponentInstruction.defaultMessage.replaceAll('{bold_tag}', ''))).toBeInTheDocument();
+        expect(queryByRole('heading', { name: sidebarMessages.sidebarSplitTestReorganizeComponentTitle.defaultMessage })).toBeInTheDocument();
+        expect(queryByText(sidebarMessages.sidebarSplitTestReorganizeComponentInstruction.defaultMessage)).toBeInTheDocument();
+        expect(queryByText(sidebarMessages.sidebarSplitTestReorganizeGroupsInstruction.defaultMessage)).toBeInTheDocument();
+        expect(queryByRole('heading', { name: sidebarMessages.sidebarSplitTestExperimentComponentTitle.defaultMessage })).toBeInTheDocument();
+        expect(queryByText(sidebarMessages.sidebarSplitTestExperimentComponentInstruction.defaultMessage)).toBeInTheDocument();
+        expect(queryByRole('link', { name: sidebarMessages.sidebarSplitTestLearnMoreLinkLabel.defaultMessage })).toBeInTheDocument();
+        expect(queryByRole('link', { name: sidebarMessages.sidebarSplitTestLearnMoreLinkLabel.defaultMessage })).toHaveAttribute('href', helpLinkUrl);
+      });
+    });
+  });
 });