chore(test): add tests for action menu

package.json

@@ -48,7 +48,7 @@
     "@redhat-cloud-services/eslint-config-redhat-cloud-services": "^1.3.0",
     "@tanstack/react-query-devtools": "^5.8.4",
     "@testing-library/jest-dom": "^5.16.5",
-    "@testing-library/react": "^14.0.0",
+    "@testing-library/react": "^14.1.2",
     "@testing-library/user-event": "14.4.3",
     "@types/jest": "^29.5.3",
     "@types/react-router-dom": "^5.3.3",

src/components/__tests__/__snapshots__/actionMenu.test.tsx.snap

@@ -0,0 +1,95 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders proper dom including elipse icon 1`] = `
+<DocumentFragment>
+  <button
+    aria-expanded="false"
+    aria-label="Action Menu Toggle"
+    class="pf-v5-c-menu-toggle pf-m-plain"
+    type="button"
+  >
+    <svg
+      aria-hidden="true"
+      class="pf-v5-svg"
+      fill="currentColor"
+      height="1em"
+      role="img"
+      viewBox="0 0 192 512"
+      width="1em"
+    >
+      <path
+        d="M96 184c39.8 0 72 32.2 72 72s-32.2 72-72 72-72-32.2-72-72 32.2-72 72-72zM24 80c0 39.8 32.2 72 72 72s72-32.2 72-72S135.8 8 96 8 24 40.2 24 80zm0 352c0 39.8 32.2 72 72 72s72-32.2 72-72-32.2-72-72-72-72 32.2-72 72z"
+      />
+    </svg>
+  </button>
+</DocumentFragment>
+`;
+
+exports[`snapshot matches after opening the action menu 1`] = `
+<DocumentFragment>
+  <button
+    aria-expanded="true"
+    aria-label="Action Menu Toggle"
+    class="pf-v5-c-menu-toggle pf-m-expanded pf-m-plain"
+    type="button"
+  >
+    <svg
+      aria-hidden="true"
+      class="pf-v5-svg"
+      fill="currentColor"
+      height="1em"
+      role="img"
+      viewBox="0 0 192 512"
+      width="1em"
+    >
+      <path
+        d="M96 184c39.8 0 72 32.2 72 72s-32.2 72-72 72-72-32.2-72-72 32.2-72 72-72zM24 80c0 39.8 32.2 72 72 72s72-32.2 72-72S135.8 8 96 8 24 40.2 24 80zm0 352c0 39.8 32.2 72 72 72s72-32.2 72-72-32.2-72-72-72-72 32.2-72 72z"
+      />
+    </svg>
+  </button>
+  <div
+    class="pf-v5-c-menu"
+    data-ouia-component-id="OUIA-Generated-Dropdown-4"
+    data-ouia-component-type="PF5/Dropdown"
+    data-ouia-safe="true"
+    data-popper-escaped="true"
+    data-popper-placement="bottom-start"
+    data-popper-reference-hidden="true"
+    style="position: absolute; left: 0px; top: 0px; z-index: 9999; opacity: 1; transition: opacity 0ms cubic-bezier(.54, 1.5, .38, 1.11); min-width: 0px; transform: translate(0px, 0px);"
+  >
+    <div
+      class="pf-v5-c-menu__content"
+    >
+      <ul
+        class="pf-v5-c-menu__list"
+        role="menu"
+      >
+        <li
+          class="pf-v5-c-menu__list-item"
+          data-ouia-component-id="OUIA-Generated-DropdownItem-2"
+          data-ouia-component-type="PF5/DropdownItem"
+          data-ouia-safe="true"
+          role="none"
+        >
+          <button
+            class="pf-v5-c-menu__item"
+            role="menuitem"
+            tabindex="0"
+            type="button"
+          >
+            <span
+              class="pf-v5-c-menu__item-main"
+            >
+              <span
+                class="pf-v5-c-menu__item-text"
+              >
+                Delete
+              </span>
+            </span>
+          </button>
+        </li>
+      </ul>
+    </div>
+  </div>
+</DocumentFragment>
+`;

src/components/__tests__/actionMenu.test.tsx

@@ -0,0 +1,120 @@
+import React from 'react';
+import ActionMenu from '../ActionMenu';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import '@testing-library/jest-dom';
+
+test('renders proper dom including elipse icon', () => {
+    const item = { foo: 'bar' };
+    const actionClicked = (_item: {foo: string}) => {};
+    const { asFragment } = render(
+        <ActionMenu<{ foo: string }>
+        item={item}
+        actions={[{ label: 'Delete', onClick: actionClicked }]}
+    />
+    );
+    expect(asFragment()).toMatchSnapshot();
+  });
+
+  test('actions will not show before button is clicked', () => {
+    const user = userEvent.setup();
+
+    const item = { foo: 'bar' };
+    const actionClicked = (_item: {foo: string}) => {};
+    const { queryByText } = render(
+        <ActionMenu<{ foo: string }>
+        item={item}
+        actions={[{ label: 'Delete', onClick: actionClicked }]}
+    />
+    );
+    expect(queryByText("Delete")).toBeNull();
+  });
+
+  test('actions will show after button is clicked', async () => {
+    const user = userEvent.setup();
+
+    const item = { foo: 'bar' };
+    const actionClicked = (_item: {foo: string}) => {};
+    render(
+        <ActionMenu<{ foo: string }>
+        item={item}
+        actions={[{ label: 'Delete', onClick: actionClicked }]}
+    />
+    );
+    const toggleButton = await screen.findByLabelText('Action Menu Toggle');
+    await user.click(toggleButton);
+    expect(screen.getByText("Delete")).toBeVisible();
+  });
+
+  test('snapshot matches after opening the action menu', async () => {
+    const user = userEvent.setup();
+
+    const item = { foo: 'bar' };
+    const actionClicked = (_item: {foo: string}) => {};
+    const { asFragment } = render(
+        <ActionMenu<{ foo: string }>
+        item={item}
+        actions={[{ label: 'Delete', onClick: actionClicked }]}
+    />
+    );
+    const toggleButton = await screen.findByLabelText('Action Menu Toggle');
+    await user.click(toggleButton);
+    expect(asFragment()).toMatchSnapshot();
+  });
+
+  test('action callback should get called when clicked', async () => {
+    const user = userEvent.setup();
+
+    const item = { foo: 'bar' };
+    const actionClicked = jest.fn();
+    render(
+        <ActionMenu<{ foo: string }>
+        item={item}
+        actions={[{ label: 'Delete', onClick: actionClicked }]}
+    />
+    );
+    expect(actionClicked).toHaveBeenCalledTimes(0);
+    const toggleButton = await screen.findByLabelText('Action Menu Toggle');
+    await user.click(toggleButton);
+    const deleteButton = await screen.findByText("Delete");
+    await user.click(deleteButton);
+    expect(actionClicked).toHaveBeenCalledTimes(1);
+  });
+
+  test('action menu closes after selection', async () => {
+    const user = userEvent.setup();
+
+    const item = { foo: 'bar' };
+    const actionClicked = jest.fn();
+    render(
+        <ActionMenu<{ foo: string }>
+        item={item}
+        actions={[{ label: 'Delete', onClick: actionClicked }]}
+    />
+    );
+    const toggleButton = await screen.findByLabelText('Action Menu Toggle');
+    await user.click(toggleButton);
+    const deleteButton = await screen.findByText("Delete");
+    expect(deleteButton).toBeVisible();
+    await user.click(deleteButton);
+    expect(deleteButton).not.toBeVisible();
+  });
+
+  test('action menu closes if toggle is clicked again', async () => {
+    const user = userEvent.setup();
+
+    const item = { foo: 'bar' };
+    const actionClicked = jest.fn();
+    render(
+        <ActionMenu<{ foo: string }>
+        item={item}
+        actions={[{ label: 'Delete', onClick: actionClicked }]}
+    />
+    );
+    const toggleButton = await screen.findByLabelText('Action Menu Toggle');
+    await user.click(toggleButton);
+    const deleteButton = await screen.findByText("Delete");
+    expect(deleteButton).toBeVisible();
+    await user.click(toggleButton);
+    expect(deleteButton).not.toBeVisible();
+  });