test: Update tests for latest code

openedx · Nov 27, 2023 · b9e9657 · b9e9657
1 parent 9271338
commit b9e9657
Show file tree

Hide file tree

Showing 6 changed files with 210 additions and 141 deletions.
diff --git a/src/content-tags-drawer/ContentTagsCollapsible.test.jsx b/src/content-tags-drawer/ContentTagsCollapsible.test.jsx
@@ -6,32 +6,38 @@ import PropTypes from 'prop-types';
 import ContentTagsCollapsible from './ContentTagsCollapsible';
 
 jest.mock('./data/apiHooks', () => ({
-  useTaxonomyTagsDataResponse: jest.fn(),
-  useIsTaxonomyTagsDataLoaded: jest.fn(),
+  useContentTaxonomyTagsMutation: jest.fn(() => ({
+    isError: false,
+  })),
 }));
 
 const data = {
-  id: 123,
-  name: 'Taxonomy 1',
-  contentTags: [
-    {
-      value: 'Tag 1',
-      lineage: ['Tag 1'],
-    },
-    {
-      value: 'Tag 2',
-      lineage: ['Tag 2'],
-    },
-  ],
+  contentId: 'block-v1:SampleTaxonomyOrg1+STC1+2023_1+type@vertical+block@7f47fe2dbcaf47c5a071671c741fe1ab',
+  taxonomyAndTagsData: {
+    id: 123,
+    name: 'Taxonomy 1',
+    contentTags: [
+      {
+        value: 'Tag 1',
+        lineage: ['Tag 1'],
+      },
+      {
+        value: 'Tag 2',
+        lineage: ['Tag 2'],
+      },
+    ],
+  },
+  editable: true,
 };
 
-const ContentTagsCollapsibleComponent = ({ taxonomyAndTagsData }) => (
+const ContentTagsCollapsibleComponent = ({ contentId, taxonomyAndTagsData, editable }) => (
   <IntlProvider locale="en" messages={{}}>
-    <ContentTagsCollapsible taxonomyAndTagsData={taxonomyAndTagsData} />
+    <ContentTagsCollapsible contentId={contentId} taxonomyAndTagsData={taxonomyAndTagsData} editable={editable} />
   </IntlProvider>
 );
 
 ContentTagsCollapsibleComponent.propTypes = {
+  contentId: PropTypes.string.isRequired,
   taxonomyAndTagsData: PropTypes.shape({
     id: PropTypes.number,
     name: PropTypes.string,
@@ -40,22 +46,35 @@ ContentTagsCollapsibleComponent.propTypes = {
       lineage: PropTypes.arrayOf(PropTypes.string),
     })),
   }).isRequired,
+  editable: PropTypes.bool.isRequired,
 };
 
 describe('<ContentTagsCollapsible />', () => {
   it('should render taxonomy tags data along content tags number badge', async () => {
     await act(async () => {
-      const { container, getByText } = render(<ContentTagsCollapsibleComponent taxonomyAndTagsData={data} />);
+      const { container, getByText } = render(
+        <ContentTagsCollapsibleComponent
+          contentId={data.contentId}
+          taxonomyAndTagsData={data.taxonomyAndTagsData}
+          editable={data.editable}
+        />,
+      );
       expect(getByText('Taxonomy 1')).toBeInTheDocument();
       expect(container.getElementsByClassName('badge').length).toBe(1);
       expect(getByText('2')).toBeInTheDocument();
     });
   });
 
   it('should render taxonomy tags data without tags number badge', async () => {
-    data.contentTags = [];
+    data.taxonomyAndTagsData.contentTags = [];
     await act(async () => {
-      const { container, getByText } = render(<ContentTagsCollapsibleComponent taxonomyAndTagsData={data} />);
+      const { container, getByText } = render(
+        <ContentTagsCollapsibleComponent
+          contentId={data.contentId}
+          taxonomyAndTagsData={data.taxonomyAndTagsData}
+          editable={data.editable}
+        />,
+      );
       expect(getByText('Taxonomy 1')).toBeInTheDocument();
       expect(container.getElementsByClassName('invisible').length).toBe(1);
     });

diff --git a/src/content-tags-drawer/ContentTagsDrawer.test.jsx b/src/content-tags-drawer/ContentTagsDrawer.test.jsx
@@ -4,10 +4,8 @@ import { act, render, fireEvent } from '@testing-library/react';
 
 import ContentTagsDrawer from './ContentTagsDrawer';
 import {
-  useContentTaxonomyTagsDataResponse,
-  useIsContentTaxonomyTagsDataLoaded,
-  useContentDataResponse,
-  useIsContentDataLoaded,
+  useContentTaxonomyTagsData,
+  useContentData,
 } from './data/apiHooks';
 import { useTaxonomyListDataResponse, useIsTaxonomyListDataLoaded } from '../taxonomy/data/apiHooks';
 
@@ -19,12 +17,17 @@ jest.mock('react-router-dom', () => ({
 }));
 
 jest.mock('./data/apiHooks', () => ({
-  useContentTaxonomyTagsDataResponse: jest.fn(),
-  useIsContentTaxonomyTagsDataLoaded: jest.fn(),
-  useContentDataResponse: jest.fn(),
-  useIsContentDataLoaded: jest.fn(),
-  useTaxonomyTagsDataResponse: jest.fn(),
-  useIsTaxonomyTagsDataLoaded: jest.fn(),
+  useContentTaxonomyTagsData: jest.fn(() => ({
+    isSuccess: false,
+    data: {},
+  })),
+  useContentData: jest.fn(() => ({
+    isSuccess: false,
+    data: {},
+  })),
+  useContentTaxonomyTagsMutation: jest.fn(() => ({
+    isError: false,
+  })),
 }));
 
 jest.mock('../taxonomy/data/apiHooks', () => ({
@@ -45,7 +48,6 @@ describe('<ContentTagsDrawer />', () => {
   });
 
   it('shows spinner before the content data query is complete', async () => {
-    useIsContentDataLoaded.mockReturnValue(false);
     await act(async () => {
       const { getAllByRole } = render(<RootWrapper />);
       const spinner = getAllByRole('status')[0];
@@ -55,7 +57,6 @@ describe('<ContentTagsDrawer />', () => {
 
   it('shows spinner before the taxonomy tags query is complete', async () => {
     useIsTaxonomyListDataLoaded.mockReturnValue(false);
-    useIsContentTaxonomyTagsDataLoaded.mockReturnValue(false);
     await act(async () => {
       const { getAllByRole } = render(<RootWrapper />);
       const spinner = getAllByRole('status')[1];
@@ -64,9 +65,11 @@ describe('<ContentTagsDrawer />', () => {
   });
 
   it('shows the content display name after the query is complete', async () => {
-    useIsContentDataLoaded.mockReturnValue(true);
-    useContentDataResponse.mockReturnValue({
-      displayName: 'Unit 1',
+    useContentData.mockReturnValue({
+      isSuccess: true,
+      data: {
+        displayName: 'Unit 1',
+      },
     });
     await act(async () => {
       const { getByText } = render(<RootWrapper />);
@@ -76,36 +79,38 @@ describe('<ContentTagsDrawer />', () => {
 
   it('shows the taxonomies data including tag numbers after the query is complete', async () => {
     useIsTaxonomyListDataLoaded.mockReturnValue(true);
-    useIsContentTaxonomyTagsDataLoaded.mockReturnValue(true);
-    useContentTaxonomyTagsDataResponse.mockReturnValue({
-      taxonomies: [
-        {
-          name: 'Taxonomy 1',
-          taxonomyId: 123,
-          editable: true,
-          tags: [
-            {
-              value: 'Tag 1',
-              lineage: ['Tag 1'],
-            },
-            {
-              value: 'Tag 2',
-              lineage: ['Tag 2'],
-            },
-          ],
-        },
-        {
-          name: 'Taxonomy 2',
-          taxonomyId: 124,
-          editable: true,
-          tags: [
-            {
-              value: 'Tag 3',
-              lineage: ['Tag 3'],
-            },
-          ],
-        },
-      ],
+    useContentTaxonomyTagsData.mockReturnValue({
+      isSuccess: true,
+      data: {
+        taxonomies: [
+          {
+            name: 'Taxonomy 1',
+            taxonomyId: 123,
+            editable: true,
+            tags: [
+              {
+                value: 'Tag 1',
+                lineage: ['Tag 1'],
+              },
+              {
+                value: 'Tag 2',
+                lineage: ['Tag 2'],
+              },
+            ],
+          },
+          {
+            name: 'Taxonomy 2',
+            taxonomyId: 124,
+            editable: true,
+            tags: [
+              {
+                value: 'Tag 3',
+                lineage: ['Tag 3'],
+              },
+            ],
+          },
+        ],
+      },
     });
     useTaxonomyListDataResponse.mockReturnValue({
       results: [{

diff --git a/src/content-tags-drawer/ContentTagsDropDownSelector.test.jsx b/src/content-tags-drawer/ContentTagsDropDownSelector.test.jsx
@@ -1,51 +1,64 @@
 import React from 'react';
 import { IntlProvider } from '@edx/frontend-platform/i18n';
-import { act, render } from '@testing-library/react';
+import { act, render, waitFor } from '@testing-library/react';
 import PropTypes from 'prop-types';
 
 import ContentTagsDropDownSelector from './ContentTagsDropDownSelector';
-import { useTaxonomyTagsDataResponse, useIsTaxonomyTagsDataLoaded } from './data/apiHooks';
+import { useTaxonomyTagsData } from './data/apiHooks';
 
 jest.mock('./data/apiHooks', () => ({
-  useTaxonomyTagsDataResponse: jest.fn(),
-  useIsTaxonomyTagsDataLoaded: jest.fn(),
+  useTaxonomyTagsData: jest.fn(() => ({
+    isSuccess: false,
+    data: {},
+  })),
 }));
 
 const data = {
   taxonomyId: 123,
   level: 0,
+  tagsTree: {},
 };
 
-const TaxonomyTagsDropDownSelectorComponent = ({
-  taxonomyId, level, subTagsUrl,
+const ContentTagsDropDownSelectorComponent = ({
+  taxonomyId, level, subTagsUrl, lineage, tagsTree,
 }) => (
   <IntlProvider locale="en" messages={{}}>
     <ContentTagsDropDownSelector
       taxonomyId={taxonomyId}
       level={level}
       subTagsUrl={subTagsUrl}
+      lineage={lineage}
+      tagsTree={tagsTree}
     />
   </IntlProvider>
 );
 
-TaxonomyTagsDropDownSelectorComponent.defaultProps = {
+ContentTagsDropDownSelectorComponent.defaultProps = {
   subTagsUrl: undefined,
+  lineage: [],
 };
 
-TaxonomyTagsDropDownSelectorComponent.propTypes = {
+ContentTagsDropDownSelectorComponent.propTypes = {
   taxonomyId: PropTypes.number.isRequired,
   level: PropTypes.number.isRequired,
   subTagsUrl: PropTypes.string,
+  lineage: PropTypes.arrayOf(PropTypes.string),
+  tagsTree: PropTypes.objectOf(
+    PropTypes.shape({
+      explicit: PropTypes.bool.isRequired,
+      children: PropTypes.shape({}).isRequired,
+    }).isRequired,
+  ).isRequired,
 };
 
 describe('<ContentTagsDropDownSelector />', () => {
   it('should render taxonomy tags drop down selector loading with spinner', async () => {
-    useIsTaxonomyTagsDataLoaded.mockReturnValue(false);
     await act(async () => {
       const { getByRole } = render(
-        <TaxonomyTagsDropDownSelectorComponent
+        <ContentTagsDropDownSelectorComponent
           taxonomyId={data.taxonomyId}
           level={data.level}
+          tagsTree={data.tagsTree}
         />,
       );
       const spinner = getByRole('status');
@@ -54,43 +67,53 @@ describe('<ContentTagsDropDownSelector />', () => {
   });
 
   it('should render taxonomy tags drop down selector with no sub tags', async () => {
-    useIsTaxonomyTagsDataLoaded.mockReturnValue(true);
-    useTaxonomyTagsDataResponse.mockReturnValue({
-      results: [{
-        value: 'Tag 1',
-        subTagsUrl: null,
-      }],
+    useTaxonomyTagsData.mockReturnValue({
+      isSuccess: true,
+      data: {
+        results: [{
+          value: 'Tag 1',
+          subTagsUrl: null,
+        }],
+      },
     });
     await act(async () => {
       const { container, getByText } = render(
-        <TaxonomyTagsDropDownSelectorComponent
+        <ContentTagsDropDownSelectorComponent
           key={`selector-${data.taxonomyId}`}
           taxonomyId={data.taxonomyId}
           level={data.level}
+          tagsTree={data.tagsTree}
         />,
       );
-      expect(getByText('Tag 1')).toBeInTheDocument();
-      expect(container.getElementsByClassName('taxonomy-tags-arrow-drop-down').length).toBe(0);
+      await waitFor(() => {
+        expect(getByText('Tag 1')).toBeInTheDocument();
+        expect(container.getElementsByClassName('taxonomy-tags-arrow-drop-down').length).toBe(0);
+      });
     });
   });
 
   it('should render taxonomy tags drop down selector with sub tags', async () => {
-    useIsTaxonomyTagsDataLoaded.mockReturnValue(true);
-    useTaxonomyTagsDataResponse.mockReturnValue({
-      results: [{
-        value: 'Tag 2',
-        subTagsUrl: 'https://example.com',
-      }],
+    useTaxonomyTagsData.mockReturnValue({
+      isSuccess: true,
+      data: {
+        results: [{
+          value: 'Tag 2',
+          subTagsUrl: 'https://example.com',
+        }],
+      },
     });
     await act(async () => {
       const { container, getByText } = render(
-        <TaxonomyTagsDropDownSelectorComponent
+        <ContentTagsDropDownSelectorComponent
           taxonomyId={data.taxonomyId}
           level={data.level}
+          tagsTree={data.tagsTree}
         />,
       );
-      expect(getByText('Tag 2')).toBeInTheDocument();
-      expect(container.getElementsByClassName('taxonomy-tags-arrow-drop-down').length).toBe(1);
+      await waitFor(() => {
+        expect(getByText('Tag 2')).toBeInTheDocument();
+        expect(container.getElementsByClassName('taxonomy-tags-arrow-drop-down').length).toBe(1);
+      });
     });
   });
 });