Added additional tests

Author: Eric Olkowski

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 */

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);

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"

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';