test: fix component picker tests

openedx · Oct 19, 2024 · b5e64e1 · b5e64e1
1 parent e91df18
commit b5e64e1
Showing 1 changed file with 27 additions and 101 deletions.
diff --git a/src/library-authoring/component-picker/ComponentPicker.test.tsx b/src/library-authoring/component-picker/ComponentPicker.test.tsx
@@ -1,12 +1,9 @@
-import type MockAdapter from 'axios-mock-adapter';
-
 import { mockContentSearchConfig, mockSearchResult } from '../../search-manager/data/api.mock';
 import {
   initializeMocks,
   fireEvent,
   render,
   screen,
-  waitFor,
   within,
 } from '../../testUtils';
 import mockResult from '../__mocks__/library-search.json';
@@ -17,7 +14,6 @@ import {
   mockGetContentLibraryV2List,
   mockLibraryBlockMetadata,
 } from '../data/api.mocks';
-import { getXBlockBaseApiUrl } from '../data/api';
 
 import { ComponentPicker } from './ComponentPicker';
 
@@ -27,8 +23,7 @@ mockGetCollectionMetadata.applyMock();
 mockGetContentLibraryV2List.applyMock();
 mockLibraryBlockMetadata.applyMock();
 
-let axiosMock: MockAdapter;
-let mockShowToast: (message: string) => void;
+let postMessageSpy: jest.SpyInstance;
 
 jest.mock('react-router-dom', () => ({
   ...jest.requireActual('react-router-dom'),
@@ -44,10 +39,8 @@ jest.mock('react-router-dom', () => ({
 
 describe('<ComponentPicker />', () => {
   beforeEach(() => {
-    const mocks = initializeMocks();
-    axiosMock = mocks.axiosMock;
-    mockShowToast = mocks.mockShowToast;
-    axiosMock.onPost(getXBlockBaseApiUrl()).reply(200, {});
+    initializeMocks();
+    postMessageSpy = jest.spyOn(window.parent, 'postMessage');
 
     mockSearchResult(mockResult);
   });
@@ -67,41 +60,12 @@ describe('<ComponentPicker />', () => {
     // Click the add component from the component card
     fireEvent.click(screen.queryAllByRole('button', { name: 'Add' })[0]);
 
-    await waitFor(() => {
-      expect(axiosMock.history.post.length).toBe(1);
-      expect(axiosMock.history.post[0].url).toBe(getXBlockBaseApiUrl());
-      expect(axiosMock.history.post[0].data).toBe(JSON.stringify({
-        parent_locator: 'block-v1:edX+DemoX+Demo_Course+type@vertical+block@vertical1',
-        library_content_key: 'lb:Axim:TEST:html:571fe018-f3ce-45c9-8f53-5dafcb422fdd',
-      }));
-    });
-  });
-
-  it('should show toast if error on api call from the component card button', async () => {
-    axiosMock.onPost(getXBlockBaseApiUrl()).reply(500, {});
-    render(<ComponentPicker />);
-
-    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
-    await screen.findByText(/Change Library/i);
-    expect(await screen.findByText('Test Library 1')).toBeInTheDocument();
-
-    // Click the add component from the component card
-    fireEvent.click(screen.queryAllByRole('button', { name: 'Add' })[0]);
-
-    await waitFor(() => {
-      expect(axiosMock.history.post.length).toBe(1);
-      expect(axiosMock.history.post[0].url).toBe(getXBlockBaseApiUrl());
-      expect(axiosMock.history.post[0].data).toBe(JSON.stringify({
-        parent_locator: 'block-v1:edX+DemoX+Demo_Course+type@vertical+block@vertical1',
-        library_content_key: 'lb:Axim:TEST:html:571fe018-f3ce-45c9-8f53-5dafcb422fdd',
-      }));
-      expect(mockShowToast).toHaveBeenCalledWith('Failed to add component to course');
-    });
+    expect(postMessageSpy).toHaveBeenCalledWith({
+      parentLocator: 'block-v1:edX+DemoX+Demo_Course+type@vertical+block@vertical1',
+      usageKey: 'lb:Axim:TEST:html:571fe018-f3ce-45c9-8f53-5dafcb422fdd',
+      type: 'pickerComponentSelected',
+      category: 'html',
+    }, '*');
   });
 
   it('should pick component using the component sidebar', async () => {
@@ -124,46 +88,12 @@ describe('<ComponentPicker />', () => {
     // Click the add component from the component sidebar
     fireEvent.click(within(sidebar).getByRole('button', { name: 'Add to Course' }));
 
-    await waitFor(() => {
-      expect(axiosMock.history.post.length).toBe(1);
-      expect(axiosMock.history.post[0].url).toBe(getXBlockBaseApiUrl());
-      expect(axiosMock.history.post[0].data).toBe(JSON.stringify({
-        parent_locator: 'block-v1:edX+DemoX+Demo_Course+type@vertical+block@vertical1',
-        library_content_key: 'lb:Axim:TEST:html:571fe018-f3ce-45c9-8f53-5dafcb422fdd',
-      }));
-    });
-  });
-
-  it('should show toast if error on api call from the component sidebar button', async () => {
-    axiosMock.onPost(getXBlockBaseApiUrl()).reply(500, {});
-    render(<ComponentPicker />);
-
-    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
-    await screen.findByText(/Change Library/i);
-    expect(await screen.findByText('Test Library 1')).toBeInTheDocument();
-
-    // Click on the component card to open the sidebar
-    fireEvent.click(screen.queryAllByText('Introduction to Testing')[0]);
-
-    const sidebar = await screen.findByTestId('library-sidebar');
-
-    // Click the add component from the component sidebar
-    fireEvent.click(within(sidebar).getByRole('button', { name: 'Add to Course' }));
-
-    await waitFor(() => {
-      expect(axiosMock.history.post.length).toBe(1);
-      expect(axiosMock.history.post[0].url).toBe(getXBlockBaseApiUrl());
-      expect(axiosMock.history.post[0].data).toBe(JSON.stringify({
-        parent_locator: 'block-v1:edX+DemoX+Demo_Course+type@vertical+block@vertical1',
-        library_content_key: 'lb:Axim:TEST:html:571fe018-f3ce-45c9-8f53-5dafcb422fdd',
-      }));
-      expect(mockShowToast).toHaveBeenCalledWith('Failed to add component to course');
-    });
+    expect(postMessageSpy).toHaveBeenCalledWith({
+      parentLocator: 'block-v1:edX+DemoX+Demo_Course+type@vertical+block@vertical1',
+      usageKey: 'lb:Axim:TEST:html:571fe018-f3ce-45c9-8f53-5dafcb422fdd',
+      type: 'pickerComponentSelected',
+      category: 'html',
+    }, '*');
   });
 
   it('should pick component inside a collection using the card', async () => {
@@ -196,14 +126,12 @@ describe('<ComponentPicker />', () => {
     // Click the add component from the component card
     fireEvent.click(screen.queryAllByRole('button', { name: 'Add' })[0]);
 
-    await waitFor(() => {
-      expect(axiosMock.history.post.length).toBe(1);
-      expect(axiosMock.history.post[0].url).toBe(getXBlockBaseApiUrl());
-      expect(axiosMock.history.post[0].data).toBe(JSON.stringify({
-        parent_locator: 'block-v1:edX+DemoX+Demo_Course+type@vertical+block@vertical1',
-        library_content_key: 'lb:Axim:TEST:html:571fe018-f3ce-45c9-8f53-5dafcb422fdd',
-      }));
-    });
+    expect(postMessageSpy).toHaveBeenCalledWith({
+      parentLocator: 'block-v1:edX+DemoX+Demo_Course+type@vertical+block@vertical1',
+      usageKey: 'lb:Axim:TEST:html:571fe018-f3ce-45c9-8f53-5dafcb422fdd',
+      type: 'pickerComponentSelected',
+      category: 'html',
+    }, '*');
   });
 
   it('should pick component inside a collection using the sidebar', async () => {
@@ -241,14 +169,12 @@ describe('<ComponentPicker />', () => {
     // Click the add component from the collection sidebar
     fireEvent.click(within(collectionSidebar).getByRole('button', { name: 'Add to Course' }));
 
-    await waitFor(() => {
-      expect(axiosMock.history.post.length).toBe(1);
-      expect(axiosMock.history.post[0].url).toBe(getXBlockBaseApiUrl());
-      expect(axiosMock.history.post[0].data).toBe(JSON.stringify({
-        parent_locator: 'block-v1:edX+DemoX+Demo_Course+type@vertical+block@vertical1',
-        library_content_key: 'lb:Axim:TEST:html:571fe018-f3ce-45c9-8f53-5dafcb422fdd',
-      }));
-    });
+    expect(postMessageSpy).toHaveBeenCalledWith({
+      parentLocator: 'block-v1:edX+DemoX+Demo_Course+type@vertical+block@vertical1',
+      usageKey: 'lb:Axim:TEST:html:571fe018-f3ce-45c9-8f53-5dafcb422fdd',
+      type: 'pickerComponentSelected',
+      category: 'html',
+    }, '*');
   });
 
   it('should return to library selection', async () => {