test: switch menuitem tests to react testing library (#1491)

packages/react/src/components/MenuItem/click-link.test.tsx

@@ -0,0 +1,86 @@
+import clickLink from './click-link';
+
+describe('clickLink function', () => {
+  let fixture: HTMLElement;
+  let one: HTMLElement | null;
+  let two: HTMLElement | null;
+
+  beforeEach(() => {
+    fixture = document.createElement('div');
+    fixture.innerHTML = `
+      <a id="link-one"></a>
+      <a id="link-two"></a>
+    `;
+    document.body.appendChild(fixture);
+    one = document.getElementById('link-one');
+    two = document.getElementById('link-two');
+  });
+
+  afterEach(() => {
+    document.body.removeChild(fixture);
+  });
+
+  test('clicks the first link within the target', () => {
+    let firstCalled = false,
+      secondCalled = false;
+    const onFirstClick = () => {
+      firstCalled = true;
+    };
+    const onSecondClick = () => {
+      secondCalled = true;
+    };
+
+    if (one && two) {
+      one.addEventListener('click', onFirstClick);
+      two.addEventListener('click', onSecondClick);
+
+      clickLink(fixture, fixture);
+
+      expect(firstCalled).toBeTruthy();
+      expect(secondCalled).toBeFalsy();
+
+      one.removeEventListener('click', onFirstClick);
+      two.removeEventListener('click', onSecondClick);
+    }
+  });
+
+  test('does nothing if the target is an anchor', () => {
+    let firstCalled = false,
+      secondCalled = false;
+    const onFirstClick = () => {
+      firstCalled = true;
+    };
+    const onSecondClick = () => {
+      secondCalled = true;
+    };
+
+    if (one && two) {
+      one.addEventListener('click', onFirstClick);
+      two.addEventListener('click', onSecondClick);
+
+      clickLink(one, one);
+
+      expect(firstCalled).toBeFalsy();
+      expect(secondCalled).toBeFalsy();
+
+      one.removeEventListener('click', onFirstClick);
+      two.removeEventListener('click', onSecondClick);
+    }
+  });
+
+  test('does nothing if there are no links within the target', () => {
+    const divWithoutLinks = document.createElement('div');
+    document.body.appendChild(divWithoutLinks);
+
+    let clickCalled = false;
+    divWithoutLinks.addEventListener('click', () => {
+      clickCalled = true;
+    });
+
+    clickLink(divWithoutLinks);
+
+    expect(clickCalled).toBeFalsy();
+
+    document.body.removeChild(divWithoutLinks);
+  });
+});

packages/react/src/components/MenuItem/index.test.tsx

@@ -0,0 +1,72 @@
+import React from 'react';
+import sinon from 'sinon';
+import { screen, render } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import MenuItem from '../MenuItem';
+import { axe } from 'jest-axe';
+
+const user = userEvent.setup();
+
+test('clicks first direct child link given a click', async () => {
+  const onClick = sinon.spy();
+  render(
+    <MenuItem>
+      <a href="/foo" onClick={onClick}>
+        Foo
+      </a>
+    </MenuItem>
+  );
+
+  expect(onClick.calledOnce).toBeFalsy();
+  await user.click(screen.getByRole('link', { name: 'Foo' }));
+  expect(onClick.calledOnce).toBeTruthy();
+});
+
+test('calls onClick prop', async () => {
+  const onClick = sinon.spy();
+  render(<MenuItem onClick={onClick}>BOOGNISH</MenuItem>);
+
+  await user.click(screen.getByText('BOOGNISH'));
+  expect(onClick.calledOnce).toBeTruthy();
+});
+test('clicks the menuitem given enter/space keydowns', async () => {
+  const onClick = sinon.spy();
+  const handleKeyDown = (event: React.KeyboardEvent) => {
+    if (event.key === 'Enter' || event.key === ' ') {
+      event.preventDefault();
+    }
+  };
+
+  render(
+    <MenuItem onClick={onClick} onKeyDown={handleKeyDown}>
+      <div role="button" tabIndex={0}>
+        BOOGNISH
+      </div>
+    </MenuItem>
+  );
+
+  const menuItem = screen.getByText('BOOGNISH');
+
+  expect(menuItem).not.toBeNull();
+
+  await user.type(menuItem, '{enter}');
+  await user.type(menuItem, '{space}');
+
+  expect(onClick.calledTwice).toBeTruthy();
+});
+
+test('supports menuItemRef props', () => {
+  const ref = sinon.spy();
+  render(<MenuItem menuItemRef={ref}>BOOGNISH</MenuItem>);
+  expect(ref.calledOnce).toBeTruthy();
+});
+
+test('should return no axe violations', async () => {
+  const { container } = render(
+    <ul role="menubar">
+      <MenuItem>Foo</MenuItem>
+    </ul>
+  );
+  const results = await axe(container);
+  expect(results).toHaveNoViolations();
+});