feat: Unit page - make Video button functional

openedx · Feb 9, 2024 · 48001a4 · 48001a4
1 parent f07a7a9
commit 48001a4
Show file tree

Hide file tree

Showing 4 changed files with 142 additions and 7 deletions.
diff --git a/src/course-unit/CourseUnit.test.jsx b/src/course-unit/CourseUnit.test.jsx
@@ -159,6 +159,23 @@ describe('<CourseUnit />', () => {
     expect(await findByText(newDisplayName)).toBeInTheDocument();
   });
 
+  it('doesn\'t handle creating xblock and displays an error message', async () => {
+    const { courseKey, locator } = courseCreateXblockMock;
+    axiosMock
+      .onPost(postXBlockBaseApiUrl({ type: 'video', category: 'video', parentLocator: blockId }))
+      .reply(500, {});
+    const { getByRole } = render(<RootWrapper />);
+
+    await waitFor(() => {
+      const videoButton = getByRole('button', {
+        name: new RegExp(`${messages.buttonText.defaultMessage} Video`, 'i'),
+      });
+
+      userEvent.click(videoButton);
+      expect(mockedUsedNavigate).not.toHaveBeenCalledWith(`/course/${courseKey}/editor/video/${locator}`);
+    });
+  });
+
   it('handle creating Problem xblock and navigate to editor page', async () => {
     const { courseKey, locator } = courseCreateXblockMock;
     axiosMock
@@ -167,13 +184,31 @@ describe('<CourseUnit />', () => {
     const { getByRole } = render(<RootWrapper />);
 
     await waitFor(() => {
-      const discussionButton = getByRole('button', {
+      const problemButton = getByRole('button', {
         name: new RegExp(`${messages.buttonText.defaultMessage} Problem`, 'i'),
       });
 
-      userEvent.click(discussionButton);
+      userEvent.click(problemButton);
       expect(mockedUsedNavigate).toHaveBeenCalled();
       expect(mockedUsedNavigate).toHaveBeenCalledWith(`/course/${courseKey}/editor/problem/${locator}`);
     });
   });
+
+  it('handles creating Video xblock and navigates to editor page', async () => {
+    const { courseKey, locator } = courseCreateXblockMock;
+    axiosMock
+      .onPost(postXBlockBaseApiUrl({ type: 'video', category: 'video', parentLocator: blockId }))
+      .reply(200, courseCreateXblockMock);
+    const { getByRole } = render(<RootWrapper />);
+
+    await waitFor(() => {
+      const videoButton = getByRole('button', {
+        name: new RegExp(`${messages.buttonText.defaultMessage} Video`, 'i'),
+      });
+
+      userEvent.click(videoButton);
+      expect(mockedUsedNavigate).toHaveBeenCalled();
+      expect(mockedUsedNavigate).toHaveBeenCalledWith(`/course/${courseKey}/editor/video/${locator}`);
+    });
+  });
 });
diff --git a/src/course-unit/add-component/AddComponent.jsx b/src/course-unit/add-component/AddComponent.jsx
@@ -21,8 +21,9 @@ const AddComponent = ({ blockId, handleCreateNewCourseXblock }) => {
       handleCreateNewCourseXblock({ type, parentLocator: blockId });
       break;
     case COMPONENT_ICON_TYPES.problem:
+    case COMPONENT_ICON_TYPES.video:
       handleCreateNewCourseXblock({ type, parentLocator: blockId }, ({ courseKey, locator }) => {
-        navigate(`/course/${courseKey}/editor/problem/${locator}`);
+        navigate(`/course/${courseKey}/editor/${type}/${locator}`);
       });
       break;
     default:

diff --git a/src/course-unit/add-component/AddComponent.test.jsx b/src/course-unit/add-component/AddComponent.test.jsx
@@ -63,7 +63,47 @@ describe('<AddComponent />', () => {
     ));
   });
 
-  it('create new "Discussion" xblock on click', () => {
+  it('doesn\'t render AddComponent component when there aren\'t componentTemplates', async () => {
+    axiosMock
+      .onGet(getCourseSectionVerticalApiUrl(blockId))
+      .reply(200, {
+        ...courseSectionVerticalMock,
+        component_templates: [],
+      });
+    await executeThunk(fetchCourseSectionVerticalData(blockId), store.dispatch);
+
+    const { queryByRole } = renderComponent();
+
+    expect(queryByRole('heading', { name: messages.title.defaultMessage })).not.toBeInTheDocument();
+  });
+
+  it('does\'t call handleCreateNewCourseXblock with custom component create button is clicked', async () => {
+    axiosMock
+      .onGet(getCourseSectionVerticalApiUrl(blockId))
+      .reply(200, {
+        ...courseSectionVerticalMock,
+        component_templates: [
+          {
+            type: 'custom',
+            templates: [],
+            display_name: 'Custom',
+            support_legend: {},
+          },
+        ],
+      });
+    await executeThunk(fetchCourseSectionVerticalData(blockId), store.dispatch);
+
+    const { getByRole } = renderComponent();
+
+    const customComponentButton = getByRole('button', {
+      name: new RegExp(`${messages.buttonText.defaultMessage} Custom`, 'i'),
+    });
+
+    userEvent.click(customComponentButton);
+    expect(handleCreateNewCourseXblockMock).not.toHaveBeenCalled();
+  });
+
+  it('calls handleCreateNewCourseXblock with correct parameters when Discussion xblock create button is clicked', () => {
     const { getByRole } = renderComponent();
 
     const discussionButton = getByRole('button', {
@@ -78,7 +118,7 @@ describe('<AddComponent />', () => {
     });
   });
 
-  it('create new "Drag and Drop" xblock on click', () => {
+  it('calls handleCreateNewCourseXblock with correct parameters when Drag-and-Drop xblock create button is clicked', () => {
     const { getByRole } = renderComponent();
 
     const discussionButton = getByRole('button', {
@@ -93,7 +133,7 @@ describe('<AddComponent />', () => {
     });
   });
 
-  it('create new "Problem" xblock on click', () => {
+  it('calls handleCreateNewCourseXblock with correct parameters when Problem xblock create button is clicked', () => {
     const { getByRole } = renderComponent();
 
     const discussionButton = getByRole('button', {
@@ -107,4 +147,19 @@ describe('<AddComponent />', () => {
       type: 'problem',
     }, expect.any(Function));
   });
+
+  it('calls handleCreateNewCourseXblock with correct parameters when Video xblock create button is clicked', () => {
+    const { getByRole } = renderComponent();
+
+    const discussionButton = getByRole('button', {
+      name: new RegExp(`${messages.buttonText.defaultMessage} Video`, 'i'),
+    });
+
+    userEvent.click(discussionButton);
+    expect(handleCreateNewCourseXblockMock).toHaveBeenCalled();
+    expect(handleCreateNewCourseXblockMock).toHaveBeenCalledWith({
+      parentLocator: '123',
+      type: 'video',
+    }, expect.any(Function));
+  });
 });
diff --git a/src/utils.test.js b/src/utils.test.js
@@ -1,4 +1,12 @@
-import { getFileSizeToClosestByte } from './utils';
+import { getConfig, getPath } from '@edx/frontend-platform';
+
+import { getFileSizeToClosestByte, createCorrectInternalRoute } from './utils';
+
+jest.mock('@edx/frontend-platform', () => ({
+  getConfig: jest.fn(),
+  ensureConfig: jest.fn(),
+  getPath: jest.fn(),
+}));
 
 describe('FilesAndUploads utils', () => {
   describe('getFileSizeToClosestByte', () => {
@@ -33,4 +41,40 @@ describe('FilesAndUploads utils', () => {
       expect(expectedSize).toEqual(actualSize);
     });
   });
+  describe('createCorrectInternalRoute', () => {
+    beforeEach(() => {
+      getConfig.mockReset();
+      getPath.mockReset();
+    });
+
+    it('returns the correct internal route when checkPath is not prefixed with basePath', () => {
+      getConfig.mockReturnValue({ PUBLIC_PATH: 'example.com' });
+      getPath.mockReturnValue('/');
+
+      const checkPath = '/some/path';
+      const result = createCorrectInternalRoute(checkPath);
+
+      expect(result).toBe('/some/path');
+    });
+
+    it('returns the input checkPath when it is already prefixed with basePath', () => {
+      getConfig.mockReturnValue({ PUBLIC_PATH: 'example.com' });
+      getPath.mockReturnValue('/course-authoring');
+
+      const checkPath = '/course-authoring/some/path';
+      const result = createCorrectInternalRoute(checkPath);
+
+      expect(result).toBe('/course-authoring/some/path');
+    });
+
+    it('handles basePath ending with a slash correctly', () => {
+      getConfig.mockReturnValue({ PUBLIC_PATH: 'example.com/' });
+      getPath.mockReturnValue('/course-authoring/');
+
+      const checkPath = '/some/path';
+      const result = createCorrectInternalRoute(checkPath);
+
+      expect(result).toBe('/course-authoring/some/path');
+    });
+  });
 });