From 46d7a0dde415ef83854c8f8959c8b53861aae18b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?R=C3=B4mulo=20Penido?= Date: Fri, 11 Oct 2024 12:59:07 -0300 Subject: [PATCH] test: add tests --- .../component-info/ComponentDetails.test.tsx | 2 +- .../component-info/ComponentInfo.tsx | 15 ++++-- .../component-picker/ComponentPicker.test.tsx | 47 +++++++++++++++++++ .../component-picker/ComponentPicker.tsx | 1 + src/library-authoring/data/api.mocks.ts | 19 ++++++++ 5 files changed, 78 insertions(+), 6 deletions(-) create mode 100644 src/library-authoring/component-picker/ComponentPicker.test.tsx diff --git a/src/library-authoring/component-info/ComponentDetails.test.tsx b/src/library-authoring/component-info/ComponentDetails.test.tsx index 622957472..2136fa0d0 100644 --- a/src/library-authoring/component-info/ComponentDetails.test.tsx +++ b/src/library-authoring/component-info/ComponentDetails.test.tsx @@ -45,7 +45,7 @@ describe('', () => { it('should render the component usage', async () => { render(mockLibraryBlockMetadata.usageKeyNeverPublished); expect(await screen.findByText('Component Usage')).toBeInTheDocument(); - // TODO: replace with actual data when implement tag list + // TODO: replace with actual data when implement course list expect(screen.queryByText('This will show the courses that use this component.')).toBeInTheDocument(); }); diff --git a/src/library-authoring/component-info/ComponentInfo.tsx b/src/library-authoring/component-info/ComponentInfo.tsx index 0dca48eeb..56da19db0 100644 --- a/src/library-authoring/component-info/ComponentInfo.tsx +++ b/src/library-authoring/component-info/ComponentInfo.tsx @@ -5,7 +5,7 @@ import { Tabs, Stack, } from '@openedx/paragon'; -import { useContext } from 'react'; +import { useContext, useEffect } from 'react'; import { ToastContext } from '../../generic/toast-context'; import { useLibraryContext } from '../common/context'; @@ -26,6 +26,7 @@ const ComponentInfo = () => { readOnly, openComponentEditor, componentPickerMode, + parentLocator, } = useLibraryContext(); // istanbul ignore if: this should never happen @@ -37,15 +38,19 @@ const ComponentInfo = () => { mutate: addComponentToCourse, isSuccess: addComponentToCourseSuccess, isError: addComponentToCourseError, - } = useAddComponentToCourse(); + reset, + } = useAddComponentToCourse(parentLocator, usageKey); if (addComponentToCourseSuccess) { window.parent.postMessage('closeComponentPicker', '*'); } - if (addComponentToCourseError) { - showToast(intl.formatMessage(messages.addComponentToCourseError)); - } + useEffect(() => { + if (addComponentToCourseError) { + showToast(intl.formatMessage(messages.addComponentToCourseError)); + reset(); + } + }, [addComponentToCourseError, showToast, intl]); const canEdit = canEditComponent(usageKey); diff --git a/src/library-authoring/component-picker/ComponentPicker.test.tsx b/src/library-authoring/component-picker/ComponentPicker.test.tsx new file mode 100644 index 000000000..cd4c7f71a --- /dev/null +++ b/src/library-authoring/component-picker/ComponentPicker.test.tsx @@ -0,0 +1,47 @@ +import { + initializeMocks, + fireEvent, + render, + screen, +} from '../../testUtils'; +import { + mockGetContentLibraryV2List, + mockContentLibrary, + mockLibraryBlockMetadata, +} from '../data/api.mocks'; +import { ComponentPicker } from './ComponentPicker'; + +mockGetContentLibraryV2List.applyMock(); +mockContentLibrary.applyMock(); +mockLibraryBlockMetadata.applyMock(); + +jest.mock('react-router-dom', () => ({ + ...jest.requireActual('react-router-dom'), + useSearchParams: () => { + const [params] = [new URLSearchParams({ + parentLocator: 'block-v1:edX+DemoX+Demo_Course+type@vertical+block@vertical1', + })]; + return [ + params, + ]; + }, +})); + +describe('', () => { + beforeEach(() => { + initializeMocks(); + }); + + it('should render the library list', async () => { + render(); + + expect(await screen.findByText('Test Library 1')).toBeInTheDocument(); + fireEvent.click(screen.getByDisplayValue(/lib:sampletaxonomyorg1:tl1/i)); + + fireEvent.click(screen.getByText('Next')); + + // Wait for the content library to load + expect(await screen.findByText('Content library')).toBeInTheDocument(); + expect(await screen.findByText('Test Library 1')).toBeInTheDocument(); + }); +}); diff --git a/src/library-authoring/component-picker/ComponentPicker.tsx b/src/library-authoring/component-picker/ComponentPicker.tsx index 3ab849710..508f1ef41 100644 --- a/src/library-authoring/component-picker/ComponentPicker.tsx +++ b/src/library-authoring/component-picker/ComponentPicker.tsx @@ -29,6 +29,7 @@ export const ComponentPicker = () => { throw new Error('parentLocator is required'); } + // URLSearchParams decodes '+' to ' ', so we need to convert it back parentLocator = parentLocator.replaceAll(' ', '+'); const [currentStep, setCurrentStep] = useState('select-library'); diff --git a/src/library-authoring/data/api.mocks.ts b/src/library-authoring/data/api.mocks.ts index 91a1b52d9..42bff6f9d 100644 --- a/src/library-authoring/data/api.mocks.ts +++ b/src/library-authoring/data/api.mocks.ts @@ -1,9 +1,19 @@ /* istanbul ignore file */ +import { camelCaseObject } from '@edx/frontend-platform'; import { mockContentTaxonomyTagsData } from '../../content-tags-drawer/data/api.mocks'; import { getBlockType } from '../../generic/key-utils'; import { createAxiosError } from '../../testUtils'; +import contentLibrariesListV2 from '../__mocks__/contentLibrariesListV2'; import * as api from './api'; +/** + * Mock for `getContentLibraryV2List()` + */ +export async function mockGetContentLibraryV2List(): ReturnType { + return Promise.resolve(camelCaseObject(contentLibrariesListV2)); +} +mockGetContentLibraryV2List.applyMock = () => jest.spyOn(api, 'getContentLibraryV2List').mockImplementation(mockGetContentLibraryV2List); + /** * Mock for `getContentLibrary()` * @@ -85,6 +95,14 @@ export async function mockContentLibrary(libraryId: string): Promise jest.spyOn(api, 'getContentLibrary').mockImplementation(mockContentLibrary); /**