diff --git a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap index ba35f2c39d2b..b92246026eff 100644 --- a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap +++ b/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 [ diff --git a/packages/react/src/components/Menu/Menu-test.js b/packages/react/src/components/Menu/Menu-test.js index e7c6e6786567..43974f5e89d2 100644 --- a/packages/react/src/components/Menu/Menu-test.js +++ b/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(
); - expect(wrapper.getDOMNode()).toBe(null); - }); - - it('receives the expected classes when opened', () => { - const wrapper = mount(); - 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(); + + expect(document.querySelector('.custom-class')).toBeDefined(); }); - describe('option', () => { - it('receives the expected classes', () => { - const wrapper = mount(); - const container = wrapper.childAt(0).childAt(0); - - expect(container.hasClass(`${prefix}--menu-option`)).toBe(true); - }); - - it('renders props.label', () => { - const wrapper = mount(); - - 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(); - - 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(); - 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(); - 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( - - ); - - 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(); + + expect(screen.getByRole('menu')).toHaveAttribute( + 'data-testid', + 'test-id' + ); }); - describe('radiogroup', () => { - it('children have role "menuitemradio"', () => { - const wrapper = mount( -