refactor(react): update menu tests to use RTL (#11872)

* refactor(react): update menu tests to rtl

* chore(react): update snapshots

Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>

packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap

@@ -8470,7 +8470,7 @@ Map {
         "type": "oneOf",
       },
       "target": Object {
-        "type": "element",
+        "type": "object",
       },
       "x": Object {
         "args": Array [

packages/react/src/components/Menu/Menu-test.js

@@ -6,134 +6,110 @@
  */
 
 import React from 'react';
-import Menu, {
-  MenuItem,
-  MenuRadioGroup,
-  MenuSelectableItem,
-  MenuDivider,
-} from '../Menu';
-import { mount } from 'enzyme';
-
-const prefix = 'cds';
+import Menu, { MenuItem } from '../Menu';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 
 describe('Menu', () => {
   describe('renders as expected', () => {
-    describe('menu', () => {
-      it("isn't rendered when closed", () => {
-        const wrapper = mount(<Menu />);
-        expect(wrapper.getDOMNode()).toBe(null);
-      });
-
-      it('receives the expected classes when opened', () => {
-        const wrapper = mount(<Menu open />);
-        const container = wrapper.getDOMNode();
-
-        expect(container.classList.contains(`${prefix}--menu`)).toBe(true);
-        expect(container.classList.contains(`${prefix}--menu--open`)).toBe(
-          true
-        );
-      });
+    it('should place a className on the outermost element', () => {
+      render(<Menu className="custom-class" open />);
+
+      expect(document.querySelector('.custom-class')).toBeDefined();
     });
 
-    describe('option', () => {
-      it('receives the expected classes', () => {
-        const wrapper = mount(<MenuItem label="Copy" />);
-        const container = wrapper.childAt(0).childAt(0);
-
-        expect(container.hasClass(`${prefix}--menu-option`)).toBe(true);
-      });
-
-      it('renders props.label', () => {
-        const wrapper = mount(<MenuItem label="Copy" />);
-
-        expect(wrapper.find(`span.${prefix}--menu-option__label`).text()).toBe(
-          'Copy'
-        );
-        expect(
-          wrapper.find(`span.${prefix}--menu-option__label`).prop('title')
-        ).toBe('Copy');
-      });
-
-      it('renders props.shortcut when provided', () => {
-        const wrapper = mount(<MenuItem label="Copy" shortcut="⌘C" />);
-
-        expect(
-          wrapper.find(`div.${prefix}--menu-option__info`).length
-        ).toBeGreaterThan(0);
-        expect(wrapper.find(`div.${prefix}--menu-option__info`).text()).toBe(
-          '⌘C'
-        );
-      });
-
-      it('respects props.disabled', () => {
-        const wrapper = mount(<MenuItem label="Copy" disabled />);
-        const content = wrapper.find(`div.${prefix}--menu-option__content`);
-
-        expect(
-          content.hasClass(`${prefix}--menu-option__content--disabled`)
-        ).toBe(true);
-        expect(
-          wrapper.find(`li.${prefix}--menu-option`).prop('aria-disabled')
-        ).toBe(true);
-      });
-
-      it('supports danger kind', () => {
-        const wrapper = mount(<MenuItem label="Delete" kind="danger" />);
-        const option = wrapper.find(`.${prefix}--menu-option`);
-
-        expect(option.hasClass(`${prefix}--menu-option--danger`)).toBe(true);
-      });
-
-      it('renders props.children as submenu', () => {
-        const wrapper = mount(
-          <Menu open>
-            <MenuItem label="Format">
-              <MenuItem label="Bold" />
-              <MenuItem label="Italic" />
-            </MenuItem>
-          </Menu>
-        );
-
-        const level1 = wrapper.find(`li.${prefix}--menu-option`).at(0);
-
-        expect(level1.find(`ul.${prefix}--menu`).length).toBeGreaterThan(0);
-      });
+    it('should spread props onto ul', () => {
+      render(<Menu data-testid="test-id" open />);
+
+      expect(screen.getByRole('menu')).toHaveAttribute(
+        'data-testid',
+        'test-id'
+      );
     });
 
-    describe('radiogroup', () => {
-      it('children have role "menuitemradio"', () => {
-        const wrapper = mount(
-          <MenuRadioGroup label="Share with" items={['None', 'All']} />
-        );
-        const options = wrapper.find(`li.${prefix}--menu-option`);
+    it('have an id when one is provided', () => {
+      render(<Menu id="test-id" open />);
 
-        expect(options.every('li[role="menuitemradio"]')).toBe(true);
-      });
+      expect(screen.getByRole('menu')).toHaveAttribute('id', 'test-id');
     });
 
-    describe('selectable', () => {
-      it('has role "menuitemcheckbox"', () => {
-        const wrapper = mount(<MenuSelectableItem label="Publish" />);
-        const container = wrapper.childAt(0);
+    it('should call onClose on key down', () => {
+      const onClose = jest.fn();
+      render(
+        <Menu open onClose={onClose}>
+          <MenuItem label="item" />
+        </Menu>
+      );
+
+      userEvent.type(screen.getByRole('menuitem'), '{enter}');
 
-        expect(container.prop('role')).toBe('menuitemcheckbox');
-      });
+      expect(onClose).toHaveBeenCalled();
     });
 
-    describe('divider', () => {
-      it('receives the expected classes', () => {
-        const wrapper = mount(<MenuDivider />);
-        const container = wrapper.childAt(0);
+    it('should call onClose on click', () => {
+      const onClose = jest.fn();
+      render(
+        <Menu open onClose={onClose}>
+          <MenuItem label="item" />
+        </Menu>
+      );
+
+      userEvent.click(screen.getByRole('menuitem'));
+
+      expect(onClose).toHaveBeenCalled();
+    });
+
+    it('should be open if open is supplied', () => {
+      render(<Menu open />);
+
+      expect(screen.getByRole('menu')).toBeInTheDocument();
+    });
+
+    it('should change size based on size prop', () => {
+      render(<Menu open size="lg" />);
+
+      expect(screen.getByRole('menu')).toHaveClass('cds--menu--lg');
+    });
 
-        expect(container.hasClass(`${prefix}--menu-divider`)).toBe(true);
-      });
+    it('should append to target element', () => {
+      const el = document.createElement('div');
+      document.body.appendChild(el);
+      el.classList.add('custom-class');
+      render(<Menu open target={el} />);
+
+      expect(document.querySelector('.custom-class')).toBeInTheDocument();
+      document.body.removeChild(el);
+    });
+  });
+});
+
+describe('MenuItem', () => {
+  describe('renders as expected', () => {
+    it('should be disabled', () => {
+      render(<MenuItem label="item" disabled />);
+
+      expect(screen.getByRole('menuitem')).toHaveAttribute(
+        'aria-disabled',
+        'true'
+      );
+
+      expect(screen.getByRole('menuitem')).toHaveClass(
+        'cds--menu-option--disabled'
+      );
+    });
+
+    it('should change kind based on prop', () => {
+      render(<MenuItem label="item" kind="danger" />);
+
+      expect(screen.getByRole('menuitem')).toHaveClass(
+        'cds--menu-option--danger'
+      );
+    });
 
-      it('has role "separator"', () => {
-        const wrapper = mount(<MenuDivider />);
-        const container = wrapper.childAt(0);
+    it('should render label', () => {
+      render(<MenuItem label="item" />);
 
-        expect(container.prop('role')).toBe('separator');
-      });
+      expect(screen.getByText('item')).toBeInTheDocument();
     });
   });
 });

packages/react/src/components/Menu/Menu.js

@@ -351,7 +351,7 @@ Menu.propTypes = {
   /**
    * Optionally pass an element the Menu should be appended to as a child. Defaults to document.body.
    */
-  target: PropTypes.element,
+  target: PropTypes.object,
 
   /**
    * Specify the x position where this menu is rendered