@patternfly/react-core 4.276.6 → 5.0.0-alpha.10

package/src/demos/examples/MultipleFileUpload/MultipleFileUploadRejectedFile.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import { FileRejection } from 'react-dropzone';
 import {
   MultipleFileUpload,
   MultipleFileUploadMain,
@@ -82,11 +83,14 @@ export const MultipleFileUploadBasic: React.FunctionComponent = () => {
   };
 
   // dropzone prop that communicates to the user that files they've attempted to upload are not an appropriate type
-  const handleDropRejected = (files: File[], _event: React.DragEvent<HTMLElement>) => {
-    if (files.length === 1) {
-      setModalText(`${files[0].name} is not an accepted file type`);
+  const handleDropRejected = (fileRejections: FileRejection[]) => {
+    if (fileRejections.length === 1) {
+      setModalText(`${fileRejections[0].file.name} is not an accepted file type`);
     } else {
-      const rejectedMessages = files.reduce((acc, file) => (acc += `${file.name}, `), '');
+      const rejectedMessages = fileRejections.reduce(
+        (acc, fileRejection) => (acc += `${fileRejection.file.name}, `),
+        ''
+      );
       setModalText(`${rejectedMessages}are not accepted file types`);
     }
   };
@@ -98,7 +102,12 @@ export const MultipleFileUploadBasic: React.FunctionComponent = () => {
       <MultipleFileUpload
         onFileDrop={handleFileDrop}
         dropzoneProps={{
-          accept: 'image/jpeg, application/msword, application/pdf, image/png',
+          accept: {
+            'image/jpeg': ['.jpg', '.jpeg'],
+            'application/msword': ['.doc'],
+            'application/pdf': ['.pdf'],
+            'image/png': ['.png']
+          },
           onDropRejected: handleDropRejected
         }}
         isHorizontal={isHorizontal}

package/src/helpers/Popper/Popper.tsx

@@ -3,7 +3,6 @@ import * as ReactDOM from 'react-dom';
 import { usePopper } from './thirdparty/react-popper/usePopper';
 import { Placement, Modifier } from './thirdparty/popper-core';
 import { css } from '@patternfly/react-styles';
-import { FindRefWrapper } from './FindRefWrapper';
 import '@patternfly/react-styles/css/components/Popper/Popper.css';
 
 const hash = {
@@ -42,18 +41,6 @@ const getOppositePlacement = (placement: Placement): any =>
       ] as Placement
   );
 
-/** @deprecated Please use the menuAppendTo prop directly from within the PF component which uses it. */
-export interface ToggleMenuBaseProps {
-  /** The container to append the menu to. Defaults to 'inline'
-   * If your menu is being cut off you can append it to an element higher up the DOM tree.
-   * Some examples:
-   * menuAppendTo="parent"
-   * menuAppendTo={() => document.body}
-   * menuAppendTo={document.getElementById('target')}
-   */
-  menuAppendTo?: HTMLElement | (() => HTMLElement) | 'parent' | 'inline';
-}
-
 export const getOpacityTransition = (animationDuration: number) =>
   `opacity ${animationDuration}ms cubic-bezier(.54, 1.5, .38, 1.11)`;
 
@@ -66,7 +53,6 @@ export interface PopperProps {
   /**
    * The reference element to which the Popover is relatively placed to.
    * Use either trigger or reference, not both.
-   * Passing this property or the removeFindDomNode property, will bypass the use of findDOMNode for the trigger in react strict mode.
    */
   reference?: HTMLElement | (() => HTMLElement) | React.RefObject<any>;
   /** The popper (menu/tooltip/popover) element */
@@ -79,8 +65,8 @@ export interface PopperProps {
   position?: 'right' | 'left' | 'center';
   /** Instead of direction and position can set the placement of the popper */
   placement?: Placement;
-  /** The container to append the popper to. Defaults to 'document.body' */
-  appendTo?: HTMLElement | (() => HTMLElement);
+  /** The container to append the popper to. Defaults to 'inline'. */
+  appendTo?: HTMLElement | (() => HTMLElement) | 'inline';
   /** z-index of the popper element */
   zIndex?: number;
   /** True to make the popper visible */
@@ -151,9 +137,7 @@ export interface PopperProps {
         | 'right-start'
         | 'right-end'
       )[];
-  /** @beta Bypasses the use of findDOMNode for both the popper and trigger in react strict mode. Without this flag, the trigger and popper will require passed references via the reference property (trigger) and popperRef property (popper) for strict mode. */
-  removeFindDomNode?: boolean;
-  /** @beta Reference to the popper (menu/tooltip/popover) element. Passing this property or the removeFindDomNode property, will bypass the use of findDOMNode for the popper in react strict mode. The popper property is still required. */
+  /** @beta Reference to the popper (menu/tooltip/popover) element. */
   popperRef?: HTMLElement | (() => HTMLElement) | React.RefObject<any>;
 }
 
@@ -164,7 +148,7 @@ export const Popper: React.FunctionComponent<PopperProps> = ({
   direction = 'down',
   position = 'left',
   placement,
-  appendTo = () => document.body,
+  appendTo = 'inline',
   zIndex = 9999,
   isVisible = true,
   positionModifiers,
@@ -183,7 +167,6 @@ export const Popper: React.FunctionComponent<PopperProps> = ({
   enableFlip = true,
   flipBehavior = 'flip',
   reference,
-  removeFindDomNode = false,
   popperRef
 }) => {
   const [triggerElement, setTriggerElement] = React.useState(null);
@@ -209,7 +192,7 @@ export const Popper: React.FunctionComponent<PopperProps> = ({
     }
   }, [reference]);
   React.useEffect(() => {
-    // When the popperRef is defined or the popper visiblity changes, ensure the popper element is up to date
+    // When the popperRef is defined or the popper visibility changes, ensure the popper element is up to date
     if (popperRef) {
       if ((popperRef as React.RefObject<any>).current) {
         setPopperElement((popperRef as React.RefObject<any>).current);
@@ -364,55 +347,34 @@ export const Popper: React.FunctionComponent<PopperProps> = ({
     ...attributes.popper
   };
 
-  const menuWithPopper = React.cloneElement(popper, options);
-
-  const getTarget: () => HTMLElement = () => {
-    if (typeof appendTo === 'function') {
-      return appendTo();
-    }
-    return appendTo;
-  };
-
-  /**
-   * To enable strict mode, the popper must either have its reference defined via the popperRef property,
-   * or the removeFindDomNode flag must be present. Even if the reference is passed in, unlike the trigger,
-   * the popper property must still be passed.
-   * The trigger must similarly have either its reference defined via the reference property, or the
-   * removeFindDomNode flag must be present. The trigger property is not required when the reference is passed.
-   *
-   * Strict mode may be enabled by passing both reference properties to Popper, or by passing the
-   * removeFindDomNode flag with either reference property, or by solely passing the removeFindDomNode
-   * flag.
-   */
-  let popperPortal;
-  if (removeFindDomNode) {
-    // If removeFindDomNode is passed, use the removeFindDomNode method of wrapping divs
-    popperPortal = (
+  const getMenuWithPopper = () => {
+    const localPopper = React.cloneElement(popper, options);
+    return popperRef ? (
+      localPopper
+    ) : (
       <div style={{ display: 'contents' }} ref={node => setPopperElement(node?.firstElementChild as HTMLElement)}>
-        {menuWithPopper}
+        {localPopper}
       </div>
     );
-  } else if (popperRef) {
-    // If removeFindDomNode is not passed and popperRef is passed, use the popperRef method
-    popperPortal = menuWithPopper;
-  } else {
-    // If neither removeFindDomNode and popperRef exist, use the old method of FindRefWrapper
-    popperPortal = (
-      <FindRefWrapper onFoundRef={(foundRef: any) => setPopperElement(foundRef)}>{menuWithPopper}</FindRefWrapper>
-    );
-  }
+  };
+
+  const getPopper = () => {
+    if (appendTo === 'inline') {
+      return getMenuWithPopper();
+    } else {
+      const target = typeof appendTo === 'function' ? appendTo() : appendTo;
+      return ReactDOM.createPortal(getMenuWithPopper(), target);
+    }
+  };
 
   return (
     <>
-      {!reference && trigger && React.isValidElement(trigger) && !removeFindDomNode && (
-        <FindRefWrapper onFoundRef={(foundRef: any) => setTriggerElement(foundRef)}>{trigger}</FindRefWrapper>
-      )}
-      {!reference && trigger && React.isValidElement(trigger) && removeFindDomNode && (
+      {!reference && trigger && React.isValidElement(trigger) && (
         <div style={{ display: 'contents' }} ref={node => setTriggerElement(node?.firstElementChild as HTMLElement)}>
           {trigger}
         </div>
       )}
-      {ready && isVisible && ReactDOM.createPortal(popperPortal, getTarget())}
+      {ready && isVisible && getPopper()}
     </>
   );
 };

package/src/helpers/Popper/__mocks__/Popper.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import { PopperProps } from '../Popper';
+
+export const Popper = ({ popper, zIndex, isVisible, trigger }: PopperProps) => (
+  <>
+    <div>{popper}</div>
+    <p>{`zIndex: ${zIndex}`}</p>
+    <p>{`isOpen: ${isVisible}`}</p>
+    <div>{trigger}</div>
+  </>
+);

package/src/helpers/Popper/__mocks__/index.ts

@@ -0,0 +1 @@
+export * from './Popper';

package/src/helpers/constants.ts

@@ -10,8 +10,6 @@ import globalHeightBreakpointLg from '@patternfly/react-tokens/dist/esm/global_h
 import globalHeightBreakpointXl from '@patternfly/react-tokens/dist/esm/global_height_breakpoint_xl';
 import globalHeightBreakpoint2xl from '@patternfly/react-tokens/dist/esm/global_height_breakpoint_2xl';
 
-export const KEY_CODES = { ARROW_UP: 38, ARROW_DOWN: 40, ESCAPE_KEY: 27, TAB: 9, ENTER: 13, SPACE: 32 };
-
 export const SIDE = { RIGHT: 'right', LEFT: 'left', BOTH: 'both', NONE: 'none' };
 
 export const KEYHANDLER_DIRECTION = { UP: 'up', DOWN: 'down', RIGHT: 'right', LEFT: 'left' };

package/src/helpers/resizeObserver.tsx

@@ -10,7 +10,7 @@ import { canUseDOM } from './util';
  * private observer: any = () => {};
  *
  * public componentDidMount() {
- *   this.observer = getResizeObserver(this.containerRef.current, this.handleResize);
+ *   this.observer = getResizeObserver(this.containerRef.current, this.handleResize, true);
  * }
  *
  * public componentWillUnmount() {
@@ -37,7 +37,7 @@ import { canUseDOM } from './util';
  * private observer: any = () => {};
  *
  * public componentDidMount() {
- *   this.observer = getResizeObserver(this.inputRef.current, this.handleResize);
+ *   this.observer = getResizeObserver(this.inputRef.current, this.handleResize, true);
  * }
  *
  * public componentWillUnmount() {
@@ -59,18 +59,18 @@ import { canUseDOM } from './util';
  * Example 3 - With debounced method passed in:
  *
  * public componentDidMount() {
- *   this.observer = getResizeObserver(this.inputRef.current, debounce(this.handleResize, 250), false);
+ *   this.observer = getResizeObserver(this.inputRef.current, debounce(this.handleResize, 250));
  * }
  *
  * @param {Element} containerRefElement The container reference to observe
  * @param {Function} handleResize The function to call for resize events
- * @param {boolean} useRequestAnimationFrame Whether to pass the handleResize function as a callback to requestAnimationFrame. Pass in false when the function passed in is debounced. Defaults to true.
+ * @param {boolean} useRequestAnimationFrame Whether to pass the handleResize function as a callback to requestAnimationFrame. Pass in true when the function passed in is not debounced.
  * @return {Function} The function used to unobserve resize events
  */
 export const getResizeObserver = (
   containerRefElement: Element,
   handleResize: () => void,
-  useRequestAnimationFrame: boolean = true
+  useRequestAnimationFrame?: boolean
 ) => {
   let unobserve: any;
 

package/src/next/components/Dropdown/Dropdown.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { css } from '@patternfly/react-styles';
 import { Menu, MenuContent, MenuProps } from '../../../components/Menu';
-import { Popper } from '../../../helpers/Popper/Popper';
+import { Popper, PopperProps } from '../../../helpers/Popper/Popper';
 import { useOUIAProps, OUIAProps } from '../../../helpers';
 
 export interface DropdownProps extends MenuProps, OUIAProps {
@@ -32,6 +32,8 @@ export interface DropdownProps extends MenuProps, OUIAProps {
   ouiaSafe?: boolean;
   /** z-index of the dropdown menu */
   zIndex?: number;
+  /** Additional properties to pass to the Popper */
+  popperProps?: PopperProps;
 }
 
 const DropdownBase: React.FunctionComponent<DropdownProps> = ({
@@ -48,6 +50,7 @@ const DropdownBase: React.FunctionComponent<DropdownProps> = ({
   ouiaId,
   ouiaSafe = true,
   zIndex = 9999,
+  popperProps,
   ...props
 }: DropdownProps) => {
   const localMenuRef = React.useRef<HTMLDivElement>();
@@ -100,7 +103,7 @@ const DropdownBase: React.FunctionComponent<DropdownProps> = ({
     <Menu
       className={css(className)}
       ref={menuRef}
-      onSelect={(event, itemId) => onSelect(event, itemId)}
+      onSelect={(event, itemId) => onSelect && onSelect(event, itemId)}
       isPlain={isPlain}
       isScrollable={isScrollable}
       {...(minWidth && {
@@ -117,11 +120,11 @@ const DropdownBase: React.FunctionComponent<DropdownProps> = ({
     <div ref={containerRef} {...ouiaProps}>
       <Popper
         trigger={toggle(toggleRef)}
-        removeFindDomNode
         popper={menu}
         appendTo={containerRef.current || undefined}
         isVisible={isOpen}
         zIndex={zIndex}
+        {...popperProps}
       />
     </div>
   );

package/src/next/components/Dropdown/__tests__/Dropdown.test.tsx

@@ -0,0 +1,236 @@
+import React from 'react';
+import { Dropdown } from '../../Dropdown';
+import { render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+jest.mock('../../../../components/Menu');
+
+jest.mock('../../../../helpers/Popper/Popper');
+
+const toggle = (ref: React.RefObject<any>) => <button ref={ref}>Dropdown</button>;
+
+const dropdownChildren = <div>Dropdown children</div>;
+
+test('renders dropdown', () => {
+  render(
+    <div data-testid="dropdown">
+      <Dropdown toggle={toggleRef => toggle(toggleRef)}>{dropdownChildren}</Dropdown>
+    </div>
+  );
+
+  expect(screen.getByTestId('dropdown').children[0]).toBeVisible();
+});
+
+test('passes children', () => {
+  render(<Dropdown toggle={toggleRef => toggle(toggleRef)}>{dropdownChildren}</Dropdown>);
+
+  expect(screen.getByText('Dropdown children')).toBeVisible();
+});
+
+test('renders passed toggle element', () => {
+  render(<Dropdown toggle={toggleRef => toggle(toggleRef)}>{dropdownChildren}</Dropdown>);
+
+  expect(screen.getByRole('button', { name: 'Dropdown' })).toBeVisible();
+});
+
+test('passes no class name by default', () => {
+  render(
+    <Dropdown isOpen={true} toggle={toggleRef => toggle(toggleRef)}>
+      {dropdownChildren}
+    </Dropdown>
+  );
+
+  expect(screen.getByTestId('menu-mock')).not.toHaveClass();
+});
+
+test('passes custom class name', () => {
+  render(
+    <Dropdown className="custom-class" isOpen={true} toggle={toggleRef => toggle(toggleRef)}>
+      {dropdownChildren}
+    </Dropdown>
+  );
+
+  expect(screen.getByTestId('menu-mock')).toHaveClass('custom-class');
+});
+
+test('does not pass isPlain to Menu by default', () => {
+  render(
+    <Dropdown isOpen={true} toggle={toggleRef => toggle(toggleRef)}>
+      {dropdownChildren}
+    </Dropdown>
+  );
+
+  expect(screen.getByText('isPlain: undefined')).toBeVisible();
+});
+
+test('passes isPlain to Menu', () => {
+  render(
+    <Dropdown isPlain isOpen={true} toggle={toggleRef => toggle(toggleRef)}>
+      {dropdownChildren}
+    </Dropdown>
+  );
+
+  expect(screen.getByText('isPlain: true')).toBeVisible();
+});
+
+test('does not pass isScrollable to Menu by default', () => {
+  render(
+    <Dropdown isOpen={true} toggle={toggleRef => toggle(toggleRef)}>
+      {dropdownChildren}
+    </Dropdown>
+  );
+
+  expect(screen.getByText('isScrollable: undefined')).toBeVisible();
+});
+
+test('passes isScrollable to Menu', () => {
+  render(
+    <Dropdown isScrollable isOpen={true} toggle={toggleRef => toggle(toggleRef)}>
+      {dropdownChildren}
+    </Dropdown>
+  );
+
+  expect(screen.getByText('isScrollable: true')).toBeVisible();
+});
+
+test('does not pass minWidth to Menu by default', () => {
+  render(
+    <Dropdown isOpen={true} toggle={toggleRef => toggle(toggleRef)}>
+      {dropdownChildren}
+    </Dropdown>
+  );
+
+  expect(screen.getByText('minWidth: undefined')).toBeVisible();
+});
+
+test('passes minWidth to Menu', () => {
+  render(
+    <Dropdown minWidth="100px" isOpen={true} toggle={toggleRef => toggle(toggleRef)}>
+      {dropdownChildren}
+    </Dropdown>
+  );
+
+  expect(screen.getByText('minWidth: 100px')).toBeVisible();
+});
+
+test('passes default zIndex to popper', () => {
+  render(<Dropdown toggle={toggleRef => toggle(toggleRef)}>{dropdownChildren}</Dropdown>);
+
+  expect(screen.getByText('zIndex: 9999')).toBeVisible();
+});
+
+test('passes zIndex to popper', () => {
+  render(
+    <Dropdown zIndex={100} toggle={toggleRef => toggle(toggleRef)}>
+      {dropdownChildren}
+    </Dropdown>
+  );
+
+  expect(screen.getByText('zIndex: 100')).toBeVisible();
+});
+
+test('does not pass isOpen to popper by default', () => {
+  render(<Dropdown toggle={toggleRef => toggle(toggleRef)}>{dropdownChildren}</Dropdown>);
+
+  expect(screen.getByText('isOpen: undefined')).toBeVisible();
+});
+
+test('passes isOpen to popper', () => {
+  render(
+    <Dropdown isOpen toggle={toggleRef => toggle(toggleRef)}>
+      {dropdownChildren}
+    </Dropdown>
+  );
+
+  expect(screen.getByText('isOpen: true')).toBeVisible();
+});
+
+/* no default tests for callback props
+since there is no way to test that the 
+function doesn`t get passed */
+
+test('passes onSelect callback', async () => {
+  const user = userEvent.setup();
+
+  const onSelect = jest.fn();
+  render(
+    <Dropdown onSelect={onSelect} toggle={toggleRef => toggle(toggleRef)}>
+      {dropdownChildren}
+    </Dropdown>
+  );
+
+  const trigger = await screen.findByText('Mock item');
+  await user.click(trigger);
+
+  expect(onSelect).toBeCalledTimes(1);
+});
+
+test('onOpenChange is called when passed and user clicks outside of dropdown', async () => {
+  const user = userEvent.setup();
+  const onOpenChange = jest.fn();
+
+  render(
+    <Dropdown isOpen={true} onOpenChange={onOpenChange} toggle={toggleRef => toggle(toggleRef)}>
+      {dropdownChildren}
+    </Dropdown>
+  );
+
+  const dropdown = screen.getByRole('button', { name: 'Dropdown' });
+  await user.click(dropdown);
+  await user.click(document.body);
+
+  expect(onOpenChange).toBeCalledTimes(1);
+});
+
+test('onOpenChange is called when passed and user presses tab key', async () => {
+  const user = userEvent.setup();
+  const onOpenChange = jest.fn();
+
+  render(
+    <Dropdown isOpen={true} onOpenChange={onOpenChange} toggle={toggleRef => toggle(toggleRef)}>
+      {dropdownChildren}
+    </Dropdown>
+  );
+
+  //focus dropdown
+  const dropdown = screen.getByRole('button', { name: 'Dropdown' });
+  await user.click(dropdown);
+  await user.keyboard('{Tab}');
+
+  expect(onOpenChange).toBeCalledTimes(1);
+});
+
+test('onOpenChange is called when passed and user presses esc key', async () => {
+  const user = userEvent.setup();
+  const onOpenChange = jest.fn();
+
+  render(
+    <Dropdown isOpen={true} onOpenChange={onOpenChange} toggle={toggleRef => toggle(toggleRef)}>
+      {dropdownChildren}
+    </Dropdown>
+  );
+
+  //focus dropdown
+  const dropdown = screen.getByRole('button', { name: 'Dropdown' });
+  await user.click(dropdown);
+  await user.keyboard('{Escape}');
+
+  expect(onOpenChange).toBeCalledTimes(1);
+});
+
+test('match snapshot', () => {
+  const { asFragment } = render(
+    <Dropdown
+      ouiaId={'dropdown'}
+      isOpen
+      isScrollable
+      isPlain
+      className={'customClass'}
+      toggle={toggleRef => toggle(toggleRef)}
+    >
+      {dropdownChildren}
+    </Dropdown>
+  );
+
+  expect(asFragment()).toMatchSnapshot();
+});

package/src/next/components/Dropdown/__tests__/DropdownGroup.test.tsx

@@ -0,0 +1,69 @@
+import { DropdownGroup } from '../../Dropdown';
+import { render, screen } from '@testing-library/react';
+import React from 'react';
+
+jest.mock('../../../../components/Menu');
+
+const dropdownGroupChildren = <div>Dropdown Group children</div>;
+
+test('renders dropdown group', () => {
+  render(
+    <div data-testid="dropdown-group">
+      <DropdownGroup>{dropdownGroupChildren}</DropdownGroup>
+    </div>
+  );
+
+  expect(screen.getByTestId('dropdown-group').children[0]).toBeVisible();
+});
+
+test('passes children', () => {
+  render(<DropdownGroup>{dropdownGroupChildren}</DropdownGroup>);
+
+  expect(screen.getByText('Dropdown Group children')).toBeVisible();
+});
+
+test('passes no class name by default', () => {
+  render(<DropdownGroup>{dropdownGroupChildren}</DropdownGroup>);
+
+  expect(screen.getByTestId('menu-group-mock')).not.toHaveClass();
+});
+
+test('passes custom class name to MenuGroup', () => {
+  render(<DropdownGroup className="custom-class">{dropdownGroupChildren}</DropdownGroup>);
+
+  expect(screen.getByTestId('menu-group-mock')).toHaveClass('custom-class');
+});
+
+test('passes no label by default', () => {
+  render(<DropdownGroup>{dropdownGroupChildren}</DropdownGroup>);
+
+  expect(screen.getByText('label: undefined')).toBeVisible();
+});
+
+test('passes custom label to MenuGroup', () => {
+  render(<DropdownGroup label="Test label">{dropdownGroupChildren}</DropdownGroup>);
+
+  expect(screen.getByText('label: Test label')).toBeVisible();
+});
+
+test('passes h1 as labelHeadingLevel to MenuGroup by default', () => {
+  render(<DropdownGroup>{dropdownGroupChildren}</DropdownGroup>);
+
+  expect(screen.getByText('labelHeadingLevel: h1')).toBeVisible();
+});
+
+test('passes custom labelHeadingLevel to MenuGroup', () => {
+  render(<DropdownGroup labelHeadingLevel="h2">{dropdownGroupChildren}</DropdownGroup>);
+
+  expect(screen.getByText('labelHeadingLevel: h2')).toBeVisible();
+});
+
+test('matches snapshot', () => {
+  const { asFragment } = render(
+    <DropdownGroup className="custom-class" label="Test label" labelHeadingLevel="h2">
+      {dropdownGroupChildren}
+    </DropdownGroup>
+  );
+
+  expect(asFragment()).toMatchSnapshot();
+});

package/src/next/components/Dropdown/__tests__/DropdownItem.test.tsx

@@ -0,0 +1,73 @@
+import { DropdownItem } from '../../Dropdown';
+import { render, screen } from '@testing-library/react';
+import React from 'react';
+
+jest.mock('../../../../components/Menu');
+
+const dropdownItemChildren = <div>Dropdown Item children</div>;
+
+test('renders dropdown item', () => {
+  render(
+    <div data-testid="dropdown-item">
+      <DropdownItem>{dropdownItemChildren}</DropdownItem>
+    </div>
+  );
+
+  expect(screen.getByTestId('dropdown-item').children[0]).toBeVisible();
+});
+
+test('passes children', () => {
+  render(<DropdownItem>{dropdownItemChildren}</DropdownItem>);
+
+  expect(screen.getByText('Dropdown Item children')).toBeVisible();
+});
+
+test('passes no class name by default', () => {
+  render(<DropdownItem>{dropdownItemChildren}</DropdownItem>);
+
+  expect(screen.getByTestId('menu-item-mock')).not.toHaveClass();
+});
+
+test('passes custom class name to MenuItem', () => {
+  render(<DropdownItem className="custom-class">{dropdownItemChildren}</DropdownItem>);
+
+  expect(screen.getByTestId('menu-item-mock')).toHaveClass('custom-class');
+});
+
+test('passes no description by default', () => {
+  render(<DropdownItem>{dropdownItemChildren}</DropdownItem>);
+
+  expect(screen.getByText('description: undefined')).toBeVisible();
+});
+
+test('passes custom description to MenuItem', () => {
+  render(<DropdownItem description="Test description">{dropdownItemChildren}</DropdownItem>);
+
+  expect(screen.getByText('description: Test description')).toBeVisible();
+});
+
+test('passes no itemId by default', () => {
+  render(<DropdownItem description="Test description">{dropdownItemChildren}</DropdownItem>);
+
+  expect(screen.getByText('itemId: undefined'));
+});
+
+test('passes itemId to MenuItem', () => {
+  render(
+    <DropdownItem itemId="dropdown item" description="Test description">
+      {dropdownItemChildren}
+    </DropdownItem>
+  );
+
+  expect(screen.getByText('itemId: dropdown item'));
+});
+
+test('matches snapshot', () => {
+  const { asFragment } = render(
+    <DropdownItem ouiaId="dropdown item" className="custom-class" description="Test description">
+      {dropdownItemChildren}
+    </DropdownItem>
+  );
+
+  expect(asFragment()).toMatchSnapshot();
+});