test: Add new functionality tests

openedx · Mar 5, 2024 · 104b55f · 104b55f
1 parent 8b4bfee
commit 104b55f
Show file tree

Hide file tree

Showing 2 changed files with 187 additions and 5 deletions.
diff --git a/src/content-tags-drawer/ContentTagsCollapsible.test.jsx b/src/content-tags-drawer/ContentTagsCollapsible.test.jsx
@@ -167,16 +167,16 @@ describe('<ContentTagsCollapsible />', () => {
 
     // Click on "Add a tag" button to open dropdown to select new tags
     const addTagsButton = getByText(messages.collapsibleAddTagsPlaceholderText.defaultMessage);
-    // Use `mouseDown` instead of `click` since the react-select didn't respond to `click`
+    // Use `mouseDown/mouseUp` instead of `click` since the react-select didn't respond to `click`
     fireEvent.mouseDown(addTagsButton);
+    fireEvent.mouseUp(addTagsButton);
 
     // Wait for the dropdown selector for tags to open,
     // Tag 3 should only appear there, (i.e. the dropdown is open, since Tag 3 is not applied)
     expect(getAllByText('Tag 3').length).toBe(1);
 
     // Click to check Tag 3 and check the `addStagedContentTag` was called with the correct params
     const tag3 = getByText('Tag 3');
-    fireEvent.click(tag3); // Need to call click first time to get focus in tests
     fireEvent.click(tag3);
 
     const taxonomyId = 123;
@@ -199,16 +199,16 @@ describe('<ContentTagsCollapsible />', () => {
 
     // Click on "Add a tag" button to open dropdown to select new tags
     const addTagsButton = getByText(messages.collapsibleAddTagsPlaceholderText.defaultMessage);
-    // Use `mouseDown` instead of `click` since the react-select didn't respond to `click`
+    // Use `mouseDown/mouseup` instead of `click` since the react-select didn't respond to `click`
     fireEvent.mouseDown(addTagsButton);
+    fireEvent.mouseUp(addTagsButton);
 
     // Wait for the dropdown selector for tags to open,
     // Tag 3 should only appear there, (i.e. the dropdown is open, since Tag 3 is not applied)
     expect(getAllByText('Tag 3').length).toBe(1);
 
     // Click to check Tag 3
     const tag3 = getByText('Tag 3');
-    fireEvent.click(tag3); // Need to call click first time to get focus in tests
     fireEvent.click(tag3);
 
     // Click to uncheck Tag 3 and check the `removeStagedContentTag` was called with the correct params

diff --git a/src/content-tags-drawer/ContentTagsDrawer.test.jsx b/src/content-tags-drawer/ContentTagsDrawer.test.jsx
@@ -1,13 +1,15 @@
 import React from 'react';
 import { IntlProvider } from '@edx/frontend-platform/i18n';
-import { act, render, fireEvent } from '@testing-library/react';
+import { act, render, fireEvent, screen} from '@testing-library/react';
 
 import ContentTagsDrawer from './ContentTagsDrawer';
 import {
   useContentTaxonomyTagsData,
   useContentData,
+  useTaxonomyTagsData,
 } from './data/apiHooks';
 import { useTaxonomyListDataResponse, useIsTaxonomyListDataLoaded } from '../taxonomy/data/apiHooks';
+import messages from './messages';
 
 jest.mock('react-router-dom', () => ({
   ...jest.requireActual('react-router-dom'),
@@ -28,6 +30,15 @@ jest.mock('./data/apiHooks', () => ({
   useContentTaxonomyTagsUpdater: jest.fn(() => ({
     isError: false,
   })),
+  useTaxonomyTagsData: jest.fn(() => ({
+    hasMorePages: false,
+    tagPages: {
+      isLoading: true,
+      isError: false,
+      canAddTag: false,
+      data: [],
+    },
+  })),
 }));
 
 jest.mock('../taxonomy/data/apiHooks', () => ({
@@ -42,6 +53,82 @@ const RootWrapper = () => (
 );
 
 describe('<ContentTagsDrawer />', () => {
+  const setupMockDataForStagedTagsTesting = () => {
+    useIsTaxonomyListDataLoaded.mockReturnValue(true);
+    useContentTaxonomyTagsData.mockReturnValue({
+      isSuccess: true,
+      data: {
+        taxonomies: [
+          {
+            name: 'Taxonomy 1',
+            taxonomyId: 123,
+            canTagObject: true,
+            tags: [
+              {
+                value: 'Tag 1',
+                lineage: ['Tag 1'],
+                canDeleteObjecttag: true,
+              },
+              {
+                value: 'Tag 2',
+                lineage: ['Tag 2'],
+                canDeleteObjecttag: true,
+              },
+            ],
+          },
+        ],
+      },
+    });
+    useTaxonomyListDataResponse.mockReturnValue({
+      results: [{
+        id: 123,
+        name: 'Taxonomy 1',
+        description: 'This is a description 1',
+        canTagObject: true,
+      }],
+    });
+
+    useTaxonomyTagsData.mockReturnValue({
+      hasMorePages: false,
+      canAddTag: false,
+      tagPages: {
+        isLoading: false,
+        isError: false,
+        data: [{
+          value: 'Tag 1',
+          externalId: null,
+          childCount: 0,
+          depth: 0,
+          parentValue: null,
+          id: 12345,
+          subTagsUrl: null,
+          canChangeTag: false,
+          canDeleteTag: false,
+        }, {
+          value: 'Tag 2',
+          externalId: null,
+          childCount: 0,
+          depth: 0,
+          parentValue: null,
+          id: 12346,
+          subTagsUrl: null,
+          canChangeTag: false,
+          canDeleteTag: false,
+        }, {
+          value: 'Tag 3',
+          externalId: null,
+          childCount: 0,
+          depth: 0,
+          parentValue: null,
+          id: 12347,
+          subTagsUrl: null,
+          canChangeTag: false,
+          canDeleteTag: false,
+        }],
+      },
+    });
+  };
+
   it('should render page and page title correctly', () => {
     const { getByText } = render(<RootWrapper />);
     expect(getByText('Manage tags')).toBeInTheDocument();
@@ -138,6 +225,101 @@ describe('<ContentTagsDrawer />', () => {
     });
   });
 
+  it('should test adding a content tag to the staged tags for a taxonomy', () => {
+    setupMockDataForStagedTagsTesting();
+
+    const { container, getByText, getAllByText } = render(<RootWrapper />);
+
+    // Expand the Taxonomy to view applied tags and "Add a tag" button
+    const expandToggle = container.getElementsByClassName('collapsible-trigger')[0];
+
+    fireEvent.click(expandToggle);
+
+    // Click on "Add a tag" button to open dropdown
+    const addTagsButton = getByText(messages.collapsibleAddTagsPlaceholderText.defaultMessage);
+    // Use `mouseDown` instead of `click` since the react-select didn't respond to `click`
+    fireEvent.mouseDown(addTagsButton);
+
+    // Tag 3 should only appear in dropdown selector, (i.e. the dropdown is open, since Tag 3 is not applied)
+    expect(getAllByText('Tag 3').length).toBe(1);
+
+    // Click to check Tag 3
+    const tag3 = getByText('Tag 3');
+    fireEvent.click(tag3);
+
+    // Check that Tag 3 has been staged, i.e. there should be 2 of them on the page
+    expect(getAllByText('Tag 3').length).toBe(2);
+  });
+
+  it('should test removing a staged content from a taxonomy', () => {
+    setupMockDataForStagedTagsTesting();
+
+    const { container, getByText, getAllByText } = render(<RootWrapper />);
+
+    // Expand the Taxonomy to view applied tags and "Add a tag" button
+    const expandToggle = container.getElementsByClassName('collapsible-trigger')[0];
+
+    fireEvent.click(expandToggle);
+
+    // Click on "Add a tag" button to open dropdown
+    const addTagsButton = getByText(messages.collapsibleAddTagsPlaceholderText.defaultMessage);
+    // Use `mouseDown` instead of `click` since the react-select didn't respond to `click`
+    fireEvent.mouseDown(addTagsButton);
+
+    // Tag 3 should only appear in dropdown selector, (i.e. the dropdown is open, since Tag 3 is not applied)
+    expect(getAllByText('Tag 3').length).toBe(1);
+
+    // Click to check Tag 3
+    const tag3 = getByText('Tag 3');
+    fireEvent.click(tag3);
+
+    // Check that Tag 3 has been staged, i.e. there should be 2 of them on the page
+    expect(getAllByText('Tag 3').length).toBe(2);
+
+    // Click it again to unstage it and confirm that there is only one on the page
+    fireEvent.click(tag3);
+    expect(getAllByText('Tag 3').length).toBe(1);
+  });
+
+  it('should test clearing staged tags for a taxonomy', () => {
+    setupMockDataForStagedTagsTesting();
+
+    const {
+      container,
+      getByText,
+      getAllByText,
+      queryByText,
+    } = render(<RootWrapper />);
+
+    // Expand the Taxonomy to view applied tags and "Add a tag" button
+    const expandToggle = container.getElementsByClassName('collapsible-trigger')[0];
+
+    fireEvent.click(expandToggle);
+
+    // Click on "Add a tag" button to open dropdown
+    const addTagsButton = getByText(messages.collapsibleAddTagsPlaceholderText.defaultMessage);
+    // Use `mouseDown` instead of `click` since the react-select didn't respond to `click`
+    fireEvent.mouseDown(addTagsButton);
+
+    // Tag 3 should only appear in dropdown selector, (i.e. the dropdown is open, since Tag 3 is not applied)
+    expect(getAllByText('Tag 3').length).toBe(1);
+
+    // Click to check Tag 3
+    const tag3 = getByText('Tag 3');
+    fireEvent.click(tag3);
+
+    // Check that Tag 3 has been staged, i.e. there should be 2 of them on the page
+    expect(getAllByText('Tag 3').length).toBe(2);
+
+    // Click on the Cancel button in the dropdown to clear the staged tags
+    const dropdownCancel = getByText(messages.collapsibleCancelStagedTagsButtonText.defaultMessage);
+    fireEvent.click(dropdownCancel);
+
+    // Check that there are no more Tag 3 on the page, since the staged one is cleared
+    // and the dropdown has been closed
+    expect(queryByText('Tag 3')).not.toBeInTheDocument();
+  });
+
   it('should call closeContentTagsDrawer when CloseButton is clicked', async () => {
     const postMessageSpy = jest.spyOn(window.parent, 'postMessage');