From c96acf4c4bf834567a8de4792a805c5a2a47b7b4 Mon Sep 17 00:00:00 2001
From: Eric Olkowski <thatblindgeye@gmail.com>
Date: Mon, 29 Apr 2024 09:07:53 -0400
Subject: [PATCH] Added additional tests

---
 .../components/Dropdown/DropdownSimple.tsx    |  3 +-
 .../__tests__/DropdownSimple.test.tsx         | 63 +++++++++++++++----
 .../DropdownSimple.test.tsx.snap              |  6 +-
 .../Dropdown/examples/DropdownTemplates.md    |  3 +-
 4 files changed, 59 insertions(+), 16 deletions(-)

diff --git a/packages/react-templates/src/components/Dropdown/DropdownSimple.tsx b/packages/react-templates/src/components/Dropdown/DropdownSimple.tsx
index d5abe602396..7f2c773e92e 100644
--- a/packages/react-templates/src/components/Dropdown/DropdownSimple.tsx
+++ b/packages/react-templates/src/components/Dropdown/DropdownSimple.tsx
@@ -7,6 +7,7 @@ import {
 } from '@patternfly/react-core/dist/esm/components/Dropdown';
 import { MenuToggle, MenuToggleElement } from '@patternfly/react-core/dist/esm/components/MenuToggle';
 import { Divider } from '@patternfly/react-core/dist/esm/components/Divider';
+import { OUIAProps } from '@patternfly/react-core/dist/esm/helpers';
 
 export interface DropdownSimpleItem extends Omit<DropdownItemProps, 'content'> {
   /** Content of the dropdown item. If the isDivider prop is true, this prop will be ignored. */
@@ -23,7 +24,7 @@ export interface DropdownSimpleItem extends Omit<DropdownItemProps, 'content'> {
   isDivider?: boolean;
 }
 
-export interface DropdownSimpleProps {
+export interface DropdownSimpleProps extends OUIAProps {
   /** Initial items of the dropdown. */
   initialItems?: DropdownSimpleItem[];
   /** @hide Forwarded ref */
diff --git a/packages/react-templates/src/components/Dropdown/__tests__/DropdownSimple.test.tsx b/packages/react-templates/src/components/Dropdown/__tests__/DropdownSimple.test.tsx
index fbb0884ec6e..ddd8b37df66 100644
--- a/packages/react-templates/src/components/Dropdown/__tests__/DropdownSimple.test.tsx
+++ b/packages/react-templates/src/components/Dropdown/__tests__/DropdownSimple.test.tsx
@@ -39,17 +39,20 @@ describe('Dropdown toggle', () => {
     expect(onToggle).toHaveBeenCalledWith(true);
   });
 
-  test('Only calls onToggle when dropdown toggle is clicked', async () => {
+  test('Does not call onToggle when dropdown toggle is not clicked', async () => {
     const onToggle = jest.fn();
     const items = [{ content: 'Action', value: 1 }];
     const user = userEvent.setup();
-    render(<DropdownSimple initialItems={items} onToggle={onToggle} toggleContent="Dropdown" />);
+    render(
+      <div>
+        <button>Actual</button>
+        <DropdownSimple initialItems={items} onToggle={onToggle} toggleContent="Dropdown" />
+      </div>
+    );
 
-    const toggle = screen.getByRole('button', { name: 'Dropdown' });
-    await user.click(toggle);
-    const actionItem = screen.getByRole('menuitem', { name: 'Action' });
-    await user.click(actionItem);
-    expect(onToggle).toHaveBeenCalledTimes(1);
+    const btn = screen.getByRole('button', { name: 'Actual' });
+    await user.click(btn);
+    expect(onToggle).not.toHaveBeenCalled();
   });
 
   test('Calls toggle onSelect when item is clicked', async () => {
@@ -78,6 +81,44 @@ describe('Dropdown toggle', () => {
     expect(onSelect).not.toHaveBeenCalled();
   });
 
+  test('Does not pass isToggleFullWidth to menu toggle by default', () => {
+    render(<DropdownSimple toggleContent="Dropdown" />);
+
+    expect(screen.getByRole('button', { name: 'Dropdown' })).not.toHaveClass(styles.modifiers.fullWidth);
+  });
+
+  test('Passes isToggleFullWidth to menu toggle when passed in', () => {
+    render(<DropdownSimple isToggleFullWidth toggleContent="Dropdown" />);
+
+    expect(screen.getByRole('button', { name: 'Dropdown' })).toHaveClass(styles.modifiers.fullWidth);
+  });
+
+  test('Does not focus toggle on item select by default', async () => {
+    const items = [{ content: 'Action', value: 1 }];
+    const user = userEvent.setup();
+    render(<DropdownSimple initialItems={items} toggleContent="Dropdown" />);
+
+    const toggle = screen.getByRole('button', { name: 'Dropdown' });
+    await user.click(toggle);
+    const actionItem = screen.getByRole('menuitem', { name: 'Action' });
+    await user.click(actionItem);
+
+    expect(toggle).not.toHaveFocus();
+  });
+
+  test('Focuses toggle on item select when shouldFocusToggleOnSelect is true', async () => {
+    const items = [{ content: 'Action', value: 1 }];
+    const user = userEvent.setup();
+    render(<DropdownSimple shouldFocusToggleOnSelect initialItems={items} toggleContent="Dropdown" />);
+
+    const toggle = screen.getByRole('button', { name: 'Dropdown' });
+    await user.click(toggle);
+    const actionItem = screen.getByRole('menuitem', { name: 'Action' });
+    await user.click(actionItem);
+
+    expect(toggle).toHaveFocus();
+  });
+
   test('Matches snapshot', () => {
     const { asFragment } = render(<DropdownSimple toggleContent="Dropdown" />);
 
@@ -198,12 +239,12 @@ describe('Dropdown items', () => {
 
   test('Matches snapshot', async () => {
     const items = [
-      { content: 'Action', value: 1 },
-      { value: 'separator', isDivider: true },
-      { content: 'Link', value: 'separator', to: '#' }
+      { content: 'Action', value: 1, ouiaId: '1' },
+      { value: 'separator', isDivider: true, ouiaId: '2' },
+      { content: 'Link', value: 'separator', to: '#', ouiaId: '3' }
     ];
     const user = userEvent.setup();
-    const { asFragment } = render(<DropdownSimple initialItems={items} toggleContent="Dropdown" />);
+    const { asFragment } = render(<DropdownSimple ouiaId={4} initialItems={items} toggleContent="Dropdown" />);
 
     const toggle = screen.getByRole('button', { name: 'Dropdown' });
     await user.click(toggle);
diff --git a/packages/react-templates/src/components/Dropdown/__tests__/__snapshots__/DropdownSimple.test.tsx.snap b/packages/react-templates/src/components/Dropdown/__tests__/__snapshots__/DropdownSimple.test.tsx.snap
index 01afc33b7c1..c1f0b5cab98 100644
--- a/packages/react-templates/src/components/Dropdown/__tests__/__snapshots__/DropdownSimple.test.tsx.snap
+++ b/packages/react-templates/src/components/Dropdown/__tests__/__snapshots__/DropdownSimple.test.tsx.snap
@@ -36,7 +36,7 @@ exports[`Dropdown items Matches snapshot 1`] = `
   </button>
   <div
     class="pf-v5-c-menu"
-    data-ouia-component-id="OUIA-Generated-Dropdown-18"
+    data-ouia-component-id="4"
     data-ouia-component-type="PF5/Dropdown"
     data-ouia-safe="true"
     data-popper-escaped="true"
@@ -53,7 +53,7 @@ exports[`Dropdown items Matches snapshot 1`] = `
       >
         <li
           class="pf-v5-c-menu__list-item"
-          data-ouia-component-id="OUIA-Generated-DropdownItem-13"
+          data-ouia-component-id="1"
           data-ouia-component-type="PF5/DropdownItem"
           data-ouia-safe="true"
           role="none"
@@ -81,7 +81,7 @@ exports[`Dropdown items Matches snapshot 1`] = `
         />
         <li
           class="pf-v5-c-menu__list-item"
-          data-ouia-component-id="OUIA-Generated-DropdownItem-14"
+          data-ouia-component-id="3"
           data-ouia-component-type="PF5/DropdownItem"
           data-ouia-safe="true"
           role="none"
diff --git a/packages/react-templates/src/components/Dropdown/examples/DropdownTemplates.md b/packages/react-templates/src/components/Dropdown/examples/DropdownTemplates.md
index 9261adf60b2..723e8acc93c 100644
--- a/packages/react-templates/src/components/Dropdown/examples/DropdownTemplates.md
+++ b/packages/react-templates/src/components/Dropdown/examples/DropdownTemplates.md
@@ -21,7 +21,8 @@ DropdownItemProps,
 Flex,
 FlexItem,
 MenuToggle,
-MenuToggleElement
+MenuToggleElement,
+OUIAProps
 } from '@patternfly/react-core';
 import { DropdownSimple, DropdownSimpleItem } from '@patternfly/react-templates';
 import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';