Fix the TaxonomyMenu test, which wasn't getting run at all (#930)

* test: fix the TaxonomyMenu test, which wasn't getting run at all
Co-authored-by: Rômulo Penido <[email protected]>

src/taxonomy/taxonomy-menu/TaxonomyMenu.jsx

@@ -21,6 +21,16 @@ import { ImportTagsWizard } from '../import-tags';
 import { ManageOrgsModal } from '../manage-orgs';
 import messages from './messages';
 
+/** @typedef {import('../data/types.mjs').TaxonomyData} TaxonomyData */
+// Note: to make mocking easier for tests, the types below only specify the subset of TaxonomyData that we actually use.
+
+/**
+ * A menu that provides actions for editing a specific taxonomy.
+ * @type {React.FC<{
+ *   taxonomy: Pick<TaxonomyData, 'id'|'name'|'tagsCount'|'systemDefined'|'canChangeTaxonomy'|'canDeleteTaxonomy'>,
+ *   iconMenu?: boolean
+ * }>}
+ */
 const TaxonomyMenu = ({
   taxonomy, iconMenu,
 }) => {

src/taxonomy/taxonomy-menu/TaxonomyMenu.test.jsx

@@ -1,4 +1,7 @@
-import { useMemo } from 'react';
+// @ts-check
+/* eslint-disable react/prop-types */
+// ^ eslint doesn't 'see' JSDoc types; remove this lint directive when converting this to .tsx
+import React, { useMemo } from 'react';
 import { IntlProvider } from '@edx/frontend-platform/i18n';
 import { initializeMockApp } from '@edx/frontend-platform';
 import { AppProvider } from '@edx/frontend-platform/react';
@@ -25,15 +28,25 @@ const queryClient = new QueryClient();
 
 const mockSetToastMessage = jest.fn();
 
+/**
+ * @type {React.FC<{
+ *   iconMenu: boolean,
+ *   systemDefined?: boolean,
+ *   canChangeTaxonomy?: boolean,
+ *   canDeleteTaxonomy?: boolean,
+ * }>}
+ */
 const TaxonomyMenuComponent = ({
   iconMenu,
-  systemDefined,
-  canChangeTaxonomy,
-  canDeleteTaxonomy,
+  systemDefined = false,
+  canChangeTaxonomy = true,
+  canDeleteTaxonomy = true,
 }) => {
   const context = useMemo(() => ({
     toastMessage: null,
     setToastMessage: mockSetToastMessage,
+    alertProps: null,
+    setAlertProps: null,
   }), []);
 
   return (
@@ -59,18 +72,7 @@ const TaxonomyMenuComponent = ({
   );
 };
 
-TaxonomyMenuComponent.propTypes = TaxonomyMenu.propTypes;
-
-TaxonomyMenuComponent.defaultProps = {
-  id: taxonomyId,
-  name: taxonomyName,
-  tagsCount: 0,
-  systemDefined: false,
-  canChangeTaxonomy: true,
-  canDeleteTaxonomy: true,
-};
-
-describe.each([true, false])('<TaxonomyMenu iconMenu=%s />', async (iconMenu) => {
+describe.each([true, false])('<TaxonomyMenu iconMenu=%s />', (iconMenu) => {
   beforeEach(async () => {
     initializeMockApp({
       authenticatedUser: {
@@ -87,30 +89,35 @@ describe.each([true, false])('<TaxonomyMenu iconMenu=%s />', async (iconMenu) =>
     jest.clearAllMocks();
   });
 
-  test('should open and close menu on button click', async () => {
-    const { findByTestId, getByTestId, queryByTestId } = render(
+  test('should open and close menu on button click', () => {
+    const { getByRole, getByTestId, queryByLabelText } = render(
       <TaxonomyMenuComponent iconMenu={iconMenu} />,
     );
+    const menuLabelText = 'Actions';
+    const menuAltText = `${taxonomyName} actions`;
+    const menuButtonText = iconMenu ? menuAltText : menuLabelText;
 
     // Menu closed/doesn't exist yet
-    expect(queryByTestId('taxonomy-menu')).not.toBeInTheDocument();
+    expect(queryByLabelText(menuLabelText)).not.toBeInTheDocument();
 
     // Click on the menu button to open
-    fireEvent.click(await findByTestId('taxonomy-menu-button'));
+    fireEvent.click(getByRole('button', { name: menuButtonText }));
 
     // Menu opened
     expect(getByTestId('taxonomy-menu')).toBeVisible();
 
     // Click on button again to close the menu
-    fireEvent.click(await findByTestId('taxonomy-menu-button'));
+    fireEvent.click(getByRole('button', { name: menuButtonText }));
 
     // Menu closed
     // Jest bug: toBeVisible() isn't checking opacity correctly
     // expect(getByTestId('taxonomy-menu')).not.toBeVisible();
     expect(getByTestId('taxonomy-menu').style.opacity).toEqual('0');
+    // TODO: the above should be getByLabelText(menuButtonText) but there is a conflict
+    // when iconMenu={true} because the <button> has aria-label in that case.
 
     // Menu button still visible
-    expect(getByTestId('taxonomy-menu-button')).toBeVisible();
+    expect(getByRole('button', { name: menuButtonText })).toBeVisible();
   });
 
   test('Shows menu actions that user is permitted', async () => {
@@ -153,17 +160,17 @@ describe.each([true, false])('<TaxonomyMenu iconMenu=%s />', async (iconMenu) =>
     expect(queryByTestId('taxonomy-menu-delete')).not.toBeInTheDocument();
   });
 
-  test('Hides import/delete actions for system-defined taxonomies', async () => {
+  test('Hides import/delete actions for system-defined taxonomies', () => {
     const systemDefined = true;
-    const { queryByTestId } = render(
+    const { getByTestId, queryByTestId } = render(
       <TaxonomyMenuComponent
         iconMenu={iconMenu}
         systemDefined={systemDefined}
       />,
     );
 
     // Click on the menu button to open
-    fireEvent.click(queryByTestId('taxonomy-menu-button'));
+    fireEvent.click(getByTestId('taxonomy-menu-button'));
 
     // Ensure expected menu items are found
     expect(queryByTestId('taxonomy-menu-export')).toBeInTheDocument();
@@ -265,6 +272,7 @@ describe.each([true, false])('<TaxonomyMenu iconMenu=%s />', async (iconMenu) =>
     fireEvent.change(input, { target: { value: 'DELETE' } });
     expect(deleteButton).toBeEnabled();
 
+    // @ts-ignore
     deleteTaxonomy.mockResolvedValueOnce({});
 
     // Click on delete button
@@ -287,6 +295,7 @@ describe.each([true, false])('<TaxonomyMenu iconMenu=%s />', async (iconMenu) =>
     } = render(<TaxonomyMenuComponent iconMenu={iconMenu} />);
 
     // We need to provide a taxonomy or the modal will not open
+    // @ts-ignore
     getTaxonomy.mockResolvedValue({
       id: 1,
       name: 'Taxonomy 1',