fix: Fix type issues + increase test cov

src/content-tags-drawer/ContentTagsCollapsible.jsx

@@ -1,3 +1,4 @@
+// @ts-check
 import React from 'react';
 import {
   Badge,
@@ -91,22 +92,24 @@ import useContentTagsCollapsibleHelper from './ContentTagsCollapsibleHelper';
  * Here is an example of what the value of the "Virology" tag would be:
  *
  *  "Science%20and%20Research,Molecular%2C%20Cellular%2C%20and%20Microbiology,Virology"
- * @param {string} contentId - Id of the content object
- * @param {Object} taxonomyAndTagsData - Object containing Taxonomy meta data along with applied tags
- * @param {number} taxonomyAndTagsData.id - id of Taxonomy
- * @param {string} taxonomyAndTagsData.name - name of Taxonomy
- * @param {string} taxonomyAndTagsData.description - description of Taxonomy
- * @param {boolean} taxonomyAndTagsData.enabled - Whether Taxonomy is enabled/disabled
- * @param {boolean} taxonomyAndTagsData.allowMultiple - Whether Taxonomy allows multiple tags to be applied
- * @param {boolean} taxonomyAndTagsData.allowFreeText - Whether Taxonomy allows free text tags
- * @param {boolean} taxonomyAndTagsData.systemDefined - Whether Taxonomy is system defined or authored by user
- * @param {boolean} taxonomyAndTagsData.visibleToAuthors - Whether Taxonomy should be visible to object authors
- * @param {string[]} taxonomyAndTagsData.orgs - Array of orgs this Taxonomy belongs to
- * @param {boolean} taxonomyAndTagsData.allOrgs - Whether Taxonomy belongs to all orgs
- * @param {Object[]} taxonomyAndTagsData.contentTags - Array of taxonomy tags that are applied to the content
- * @param {string} taxonomyAndTagsData.contentTags.value - Value of applied Tag
- * @param {string} taxonomyAndTagsData.contentTags.lineage - Array of Tag's ancestors sorted (ancestor -> tag)
- * @param {boolean} editable - Whether the tags can be edited
+ *
+ * @param {Object} props - The component props.
+ * @param {string} props.contentId - Id of the content object
+ * @param {Object} props.taxonomyAndTagsData - Object containing Taxonomy meta data along with applied tags
+ * @param {number} props.taxonomyAndTagsData.id - id of Taxonomy
+ * @param {string} props.taxonomyAndTagsData.name - name of Taxonomy
+ * @param {string} props.taxonomyAndTagsData.description - description of Taxonomy
+ * @param {boolean} props.taxonomyAndTagsData.enabled - Whether Taxonomy is enabled/disabled
+ * @param {boolean} props.taxonomyAndTagsData.allowMultiple - Whether Taxonomy allows multiple tags to be applied
+ * @param {boolean} props.taxonomyAndTagsData.allowFreeText - Whether Taxonomy allows free text tags
+ * @param {boolean} props.taxonomyAndTagsData.systemDefined - Whether Taxonomy is system defined or authored by user
+ * @param {boolean} props.taxonomyAndTagsData.visibleToAuthors - Whether Taxonomy should be visible to object authors
+ * @param {string[]} props.taxonomyAndTagsData.orgs - Array of orgs this Taxonomy belongs to
+ * @param {boolean} props.taxonomyAndTagsData.allOrgs - Whether Taxonomy belongs to all orgs
+ * @param {Object[]} props.taxonomyAndTagsData.contentTags - Array of taxonomy tags that are applied to the content
+ * @param {string} props.taxonomyAndTagsData.contentTags.value - Value of applied Tag
+ * @param {string} props.taxonomyAndTagsData.contentTags.lineage - Array of Tag's ancestors sorted (ancestor -> tag)
+ * @param {boolean} props.editable - Whether the tags can be edited
  */
 const ContentTagsCollapsible = ({ contentId, taxonomyAndTagsData, editable }) => {
   const intl = useIntl();
@@ -119,11 +122,11 @@ const ContentTagsCollapsible = ({ contentId, taxonomyAndTagsData, editable }) =>
   const [isOpen, open, close] = useToggle(false);
   const [addTagsButtonRef, setAddTagsButtonRef] = React.useState(null);
 
-  const [searchTerm, setSearchTerm] = React.useState(null);
+  const [searchTerm, setSearchTerm] = React.useState('');
 
   const handleSelectableBoxChange = React.useCallback((e) => {
     tagChangeHandler(e.target.value, e.target.checked);
-  });
+  }, []);
 
   const handleSearch = debounce((term) => {
     setSearchTerm(term.trim());
@@ -132,17 +135,17 @@ const ContentTagsCollapsible = ({ contentId, taxonomyAndTagsData, editable }) =>
   const handleSearchChange = React.useCallback((value) => {
     if (value === '') {
       // No need to debounce when search term cleared
-      setSearchTerm(null);
+      setSearchTerm('');
     } else {
       handleSearch(value);
     }
-  });
+  }, []);
 
   const modalPopupOnCloseHandler = React.useCallback((event) => {
     close(event);
     // Clear search term
-    setSearchTerm(null);
-  });
+    setSearchTerm('');
+  }, []);
 
   return (
     <div className="d-flex">

src/content-tags-drawer/ContentTagsCollapsible.test.jsx

@@ -6,6 +6,7 @@ import {
   fireEvent,
   waitFor,
 } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 import PropTypes from 'prop-types';
 
 import ContentTagsCollapsible from './ContentTagsCollapsible';
@@ -238,6 +239,66 @@ describe('<ContentTagsCollapsible />', () => {
     });
   });
 
+  it('should handle search term change', async () => {
+    jest.useFakeTimers(); // To account for debounce timer
+
+    await act(async () => {
+      const {
+        container,
+        getByRole,
+        getByText,
+        getByDisplayValue,
+      } = render(
+        <ContentTagsCollapsibleComponent
+          contentId={data.contentId}
+          taxonomyAndTagsData={data.taxonomyAndTagsData}
+          editable={data.editable}
+        />,
+      );
+
+      // Expand the Taxonomy to view applied tags and "Add tags" button
+      const expandToggle = container.getElementsByClassName('collapsible-trigger')[0];
+      await act(async () => {
+        fireEvent.click(expandToggle);
+      });
+
+      // Click on "Add tags" button to open dropdown
+      const addTagsButton = getByText(messages.addTagsButtonText.defaultMessage);
+      await act(async () => {
+        fireEvent.click(addTagsButton);
+      });
+
+      // Get the search field
+      const searchField = getByRole('searchbox');
+
+      const searchTerm = 'memo';
+
+      // Trigger a change in the search field
+      await userEvent.type(searchField, searchTerm);
+
+      // Fast-forward time by 500 milliseconds (for the debounce delay)
+      act(() => {
+        jest.advanceTimersByTime(500);
+      });
+
+      await waitFor(() => {
+        // Check that the search term has been set
+        expect(searchField.value).toBe(searchTerm);
+        expect(getByDisplayValue(searchTerm)).toBeInTheDocument();
+      });
+
+      // Clear search
+      await userEvent.clear(searchField);
+
+      await waitFor(() => {
+        // Check that the search term has been set
+        expect(searchField.value).toBe('');
+      });
+
+      jest.useRealTimers(); // Restore real timers after the test
+    });
+  });
+
   it('should render taxonomy tags data without tags number badge', async () => {
     const updatedData = { ...data };
     updatedData.taxonomyAndTagsData.contentTags = [];

src/content-tags-drawer/ContentTagsCollapsibleHelper.jsx

@@ -1,3 +1,4 @@
+// @ts-check
 import React from 'react';
 import { useCheckboxSetValues } from '@edx/paragon';
 import { cloneDeep } from 'lodash';
@@ -196,7 +197,7 @@ const useContentTagsCollapsibleHelper = (contentId, taxonomyAndTagsData) => {
 
     setAddedContentTags(addedTree);
     setUpdatingTags(true);
-  });
+  }, []);
 
   return {
     tagChangeHandler, tagsTree, contentTagsCount, checkedTags,

src/content-tags-drawer/ContentTagsDropDownSelector.jsx

@@ -48,7 +48,6 @@ const ContentTagsDropDownSelector = ({
     // Traverse the tags tree using the lineage
     let traversal = tagsTree;
     lineage.forEach(t => {
-      // We need to decode the tag to traverse the tree since the lineage value is encoded
       traversal = traversal[t]?.children || {};
     });
 
@@ -148,7 +147,7 @@ const ContentTagsDropDownSelector = ({
 
 ContentTagsDropDownSelector.defaultProps = {
   lineage: [],
-  searchTerm: null,
+  searchTerm: '',
 };
 
 ContentTagsDropDownSelector.propTypes = {