test: Add coverage tests for UnitTaxonomyDrawer

src/taxonomy/api/hooks/api.test.js

@@ -22,4 +22,13 @@ describe('taxonomy API: useTaxonomyListData', () => {
       queryFn: expect.any(Function),
     });
   });
+
+  it('should call useQuery with the correct parameters when org passed in', () => {
+    useTaxonomyListData('testOrg');
+
+    expect(useQuery).toHaveBeenCalledWith({
+      queryKey: ['taxonomyList'],
+      queryFn: expect.any(Function),
+    });
+  });
 });

src/taxonomy/api/types.mjs

@@ -1,6 +1,6 @@
 // @ts-check
 
-/** 
+/**
  * @typedef {Object} TaxonomyData
  * @property {number} id
  * @property {string} name

src/unit-taxonomy-tags-drawer/TagBubble.jsx

@@ -1,5 +1,3 @@
-// TagBubble.jsx
-
 import React from 'react';
 import {
   Button,

src/unit-taxonomy-tags-drawer/TagBubble.test.jsx

@@ -0,0 +1,86 @@
+import React from 'react';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
+import { initializeMockApp } from '@edx/frontend-platform';
+import { AppProvider } from '@edx/frontend-platform/react';
+import { render } from '@testing-library/react';
+import PropTypes from 'prop-types';
+
+import initializeStore from '../store';
+
+import TagBubble from './TagBubble';
+
+let store;
+
+const data = {
+  value: 'Tag 1',
+};
+
+const TagBubbleComponent = ({ value, subTagsCount, implicit }) => (
+  <AppProvider store={store}>
+    <IntlProvider locale="en" messages={{}}>
+      <TagBubble value={value} subTagsCount={subTagsCount} implicit={implicit} />
+    </IntlProvider>
+  </AppProvider>
+);
+
+TagBubbleComponent.defaultProps = {
+  subTagsCount: 0,
+  implicit: true,
+};
+
+TagBubbleComponent.propTypes = {
+  value: PropTypes.string.isRequired,
+  subTagsCount: PropTypes.number,
+  implicit: PropTypes.bool,
+};
+
+describe('<TagBubble />', async () => {
+  beforeEach(async () => {
+    initializeMockApp({
+      authenticatedUser: {
+        userId: 3,
+        username: 'abc123',
+        administrator: true,
+        roles: [],
+      },
+    });
+    store = initializeStore();
+  });
+
+  it('should render only value of the implicit tag with no sub tags', () => {
+    const { container, getByText } = render(<TagBubbleComponent value={data.value} />);
+    expect(getByText(data.value)).toBeInTheDocument();
+    expect(container.getElementsByClassName('implicit').length).toBe(1);
+  });
+
+  it('should render value of the implicit tag with sub tags', () => {
+    const tagBubbleData = {
+      subTagsCount: 5,
+      ...data,
+    };
+    const { container, getByText } = render(
+      <TagBubbleComponent
+        value={tagBubbleData.value}
+        subTagsCount={tagBubbleData.subTagsCount}
+      />,
+    );
+    expect(getByText(`${tagBubbleData.value} (${tagBubbleData.subTagsCount})`)).toBeInTheDocument();
+    expect(container.getElementsByClassName('implicit').length).toBe(1);
+  });
+
+  it('should render value of the explicit tag with no sub tags', () => {
+    const tagBubbleData = {
+      implicit: false,
+      ...data,
+    };
+    const { container, getByText } = render(
+      <TagBubbleComponent
+        value={tagBubbleData.value}
+        implicit={tagBubbleData.implicit}
+      />,
+    );
+    expect(getByText(`${tagBubbleData.value}`)).toBeInTheDocument();
+    expect(container.getElementsByClassName('implicit').length).toBe(0);
+    expect(container.getElementsByClassName('btn-icon-after').length).toBe(1);
+  });
+});

src/unit-taxonomy-tags-drawer/TaxonomyTagsCollapsible.test.jsx

@@ -0,0 +1,86 @@
+import React from 'react';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
+import { initializeMockApp } from '@edx/frontend-platform';
+import { AppProvider } from '@edx/frontend-platform/react';
+import { act, render } from '@testing-library/react';
+import PropTypes from 'prop-types';
+
+import initializeStore from '../store';
+
+import TaxonomyTagsCollapsible from './TaxonomyTagsCollapsible';
+
+let store;
+
+jest.mock('./api/hooks/selectors', () => ({
+  useTaxonomyTagsDataResponse: jest.fn(),
+  useIsTaxonomyTagsDataLoaded: jest.fn(),
+}));
+
+const data = {
+  id: 123,
+  name: 'Taxonomy 1',
+  unitTags: [
+    {
+      name: 'Tag 1 Name',
+      value: 'Tag 1',
+      taxonomyId: 123,
+    },
+    {
+      name: 'Tag 2 Name',
+      value: 'Tag 2',
+      taxonomyId: 123,
+    },
+  ],
+};
+
+const TaxonomyTagsCollapsibleComponent = ({ taxonomyAndTagsData }) => (
+  <AppProvider store={store}>
+    <IntlProvider locale="en" messages={{}}>
+      <TaxonomyTagsCollapsible taxonomyAndTagsData={taxonomyAndTagsData} />
+    </IntlProvider>
+  </AppProvider>
+);
+
+TaxonomyTagsCollapsibleComponent.propTypes = {
+  taxonomyAndTagsData: PropTypes.shape({
+    id: PropTypes.number,
+    name: PropTypes.string,
+    unitTags: PropTypes.arrayOf(PropTypes.shape({
+      name: PropTypes.string,
+      value: PropTypes.string,
+      taxonomyId: PropTypes.number,
+    })),
+  }).isRequired,
+};
+
+describe('<TaxonomyTagsCollapsible />', async () => {
+  beforeEach(async () => {
+    initializeMockApp({
+      authenticatedUser: {
+        userId: 3,
+        username: 'abc123',
+        administrator: true,
+        roles: [],
+      },
+    });
+    store = initializeStore();
+  });
+
+  it('should render taxonomy tags data along unit tags number badge', async () => {
+    await act(async () => {
+      const { container, getByText } = render(<TaxonomyTagsCollapsibleComponent taxonomyAndTagsData={data} />);
+      expect(getByText('Taxonomy 1')).toBeInTheDocument();
+      expect(container.getElementsByClassName('tags-count-badge').length).toBe(1);
+      expect(getByText('2')).toBeInTheDocument();
+    });
+  });
+
+  it('should render taxonomy tags data without tags number badge', async () => {
+    data.unitTags = [];
+    await act(async () => {
+      const { container, getByText } = render(<TaxonomyTagsCollapsibleComponent taxonomyAndTagsData={data} />);
+      expect(getByText('Taxonomy 1')).toBeInTheDocument();
+      expect(container.getElementsByClassName('tags-count-badge-empty').length).toBe(1);
+    });
+  });
+});

src/unit-taxonomy-tags-drawer/TaxonomyTagsDropDownSelector.jsx

@@ -57,14 +57,12 @@ const TaxonomyTagsDropDownSelector = ({
   );
 };
 
-const taxonomyTagsShape = {
-  value: PropTypes.string.isRequired,
-};
-taxonomyTagsShape.children = PropTypes.arrayOf(PropTypes.shape(taxonomyTagsShape));
-
 TaxonomyTagsDropDownSelector.propTypes = {
   taxonomyId: PropTypes.number.isRequired,
-  taxonomyTag: PropTypes.shape(taxonomyTagsShape).isRequired,
+  taxonomyTag: PropTypes.shape({
+    value: PropTypes.string,
+    subTagsUrl: PropTypes.string,
+  }).isRequired,
   level: PropTypes.number.isRequired,
   useTaxonomyTagsData: PropTypes.func.isRequired,
 };

src/unit-taxonomy-tags-drawer/TaxonomyTagsDropDownSelector.test.jsx

@@ -0,0 +1,102 @@
+import React from 'react';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
+import { initializeMockApp } from '@edx/frontend-platform';
+import { AppProvider } from '@edx/frontend-platform/react';
+import { act, render } from '@testing-library/react';
+import PropTypes from 'prop-types';
+
+import initializeStore from '../store';
+
+import TaxonomyTagsDropDownSelector from './TaxonomyTagsDropDownSelector';
+import { useTaxonomyTagsDataResponse, useIsTaxonomyTagsDataLoaded } from './api/hooks/selectors';
+
+jest.mock('./api/hooks/selectors', () => ({
+  useTaxonomyTagsDataResponse: jest.fn(),
+  useIsTaxonomyTagsDataLoaded: jest.fn(),
+}));
+
+let store;
+
+const data = {
+  taxonomyId: 123,
+  taxonomyTag: {
+    value: 'Tag 1',
+    subTagsUrl: null,
+  },
+  level: 0,
+  useTaxonomyTagsData: (taxonomyId, fullPathProvided) => {
+    const taxonomyTagsData = useTaxonomyTagsDataResponse(taxonomyId, fullPathProvided);
+    const isTaxonomyTagsLoaded = useIsTaxonomyTagsDataLoaded(taxonomyId, fullPathProvided);
+    return { taxonomyTagsData, isTaxonomyTagsLoaded };
+  },
+};
+
+const TaxonomyTagsDropDownSelectorComponent = ({
+  taxonomyId, taxonomyTag, level, useTaxonomyTagsData,
+}) => (
+  <AppProvider store={store}>
+    <IntlProvider locale="en" messages={{}}>
+      <TaxonomyTagsDropDownSelector
+        taxonomyId={taxonomyId}
+        taxonomyTag={taxonomyTag}
+        level={level}
+        useTaxonomyTagsData={useTaxonomyTagsData}
+      />
+    </IntlProvider>
+  </AppProvider>
+);
+
+TaxonomyTagsDropDownSelectorComponent.propTypes = {
+  taxonomyId: PropTypes.number.isRequired,
+  taxonomyTag: PropTypes.shape({
+    value: PropTypes.string,
+    subTagsUrl: PropTypes.string,
+  }).isRequired,
+  level: PropTypes.number.isRequired,
+  useTaxonomyTagsData: PropTypes.func.isRequired,
+};
+
+describe('<TaxonomyTagsDropDownSelector />', async () => {
+  beforeEach(async () => {
+    initializeMockApp({
+      authenticatedUser: {
+        userId: 3,
+        username: 'abc123',
+        administrator: true,
+        roles: [],
+      },
+    });
+    store = initializeStore();
+  });
+
+  it('should render taxonomy tags drop down selector with no sub tags', async () => {
+    await act(async () => {
+      const { container, getByText } = render(
+        <TaxonomyTagsDropDownSelectorComponent
+          taxonomyId={data.taxonomyId}
+          taxonomyTag={data.taxonomyTag}
+          level={data.level}
+          useTaxonomyTagsData={data.useTaxonomyTagsData}
+        />,
+      );
+      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 () => {
+    data.taxonomyTag.subTagsUrl = 'https://example.com';
+    await act(async () => {
+      const { container, getByText } = render(
+        <TaxonomyTagsDropDownSelectorComponent
+          taxonomyId={data.taxonomyId}
+          taxonomyTag={data.taxonomyTag}
+          level={data.level}
+          useTaxonomyTagsData={data.useTaxonomyTagsData}
+        />,
+      );
+      expect(getByText('Tag 1')).toBeInTheDocument();
+      expect(container.getElementsByClassName('taxonomy-tags-arrow-drop-down').length).toBe(1);
+    });
+  });
+});