menu-button tests

packages/combobox/__tests__/combobox.test.tsx

@@ -1,5 +1,5 @@
 import React, { useState } from "react";
-import { render, act, withMarkup, userEvent, cleanup } from "$test/utils";
+import { render, act, withMarkup, userEvent } from "$test/utils";
 import { axe } from "jest-axe";
 import {
   Combobox,
@@ -13,20 +13,20 @@ import cities from "../examples/cities";
 
 describe("<Combobox />", () => {
   it("should not have basic a11y issues", async () => {
-    const { container } = render(<BasicCombobox />);
-    let results = await axe(container);
-    expect(results).toHaveNoViolations();
+    let { container } = render(<BasicCombobox />);
+    expect(await axe(container)).toHaveNoViolations();
   });
 
   it("should open a list on text entry", () => {
     jest.useFakeTimers();
     let optionToSelect = "Eagle Pass, Texas";
-
     let { getByTestId, getByText } = render(<BasicCombobox />);
     let getByTextWithMarkup = withMarkup(getByText);
     let input = getByTestId("input");
-    userEvent.type(input, "e");
-    act(() => void jest.advanceTimersByTime(100));
+    act(() => {
+      userEvent.type(input, "e");
+      jest.advanceTimersByTime(100);
+    });
     expect(getByTestId("list")).toBeInTheDocument();
     expect(getByTextWithMarkup(optionToSelect)).toBeInTheDocument();
   });

packages/listbox/__tests__/listbox.test.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { render, act, fireEvent, userEvent } from "$test/utils";
+import { render, act, fireEvent } from "$test/utils";
 import { axe } from "jest-axe";
 import { Listbox, ListboxOption } from "@reach/listbox";
 import VisuallyHidden from "@reach/visually-hidden";
@@ -28,8 +28,8 @@ describe("<Listbox />", () => {
     act(clickButton);
     expect(getPopover()).not.toBeVisible();
 
-    // Listbox doesn't use an HTML5 button, so we also need to test keyboard
-    // events
+    // TODO: Listbox doesn't use an HTML5 button, so we also need to test
+    //       keyboard events
   });
 });
 

packages/menu-button/__tests__/menu-button.test.tsx

@@ -0,0 +1,44 @@
+import React from "react";
+import { render, act, withMarkup, fireEvent } from "$test/utils";
+import { axe } from "jest-axe";
+import { Menu, MenuList, MenuButton, MenuItem } from "@reach/menu-button";
+
+describe("<MenuButton />", () => {
+  it("should not have basic a11y issues", async () => {
+    let { container } = render(<BasicMenuButton />);
+    expect(await axe(container)).toHaveNoViolations();
+  });
+
+  it("should toggle on button click", () => {
+    let { getByRole, getByText, queryByText } = render(<BasicMenuButton />);
+    let getByTextWithMarkup = withMarkup(getByText);
+    let queryByTextWithMarkup = withMarkup(queryByText);
+
+    // Menu opens on mousedown, not click!
+    function clickButton() {
+      fireEvent.mouseDown(getByRole("button"));
+      fireEvent.mouseUp(getByRole("button"));
+    }
+
+    expect(queryByTextWithMarkup("Create a Copy")).not.toBeTruthy();
+    act(clickButton);
+    expect(getByTextWithMarkup("Create a Copy")).toBeInTheDocument();
+  });
+});
+
+function BasicMenuButton() {
+  return (
+    <Menu>
+      <MenuButton id="example-button">
+        Actions <span aria-hidden="true">▾</span>
+      </MenuButton>
+      <MenuList>
+        <input type="text" />
+        <MenuItem onSelect={() => jest.fn()}>Download</MenuItem>
+        <MenuItem onSelect={() => jest.fn()}>Create a Copy</MenuItem>
+        <MenuItem onSelect={() => jest.fn()}>Mark as Draft</MenuItem>
+        <MenuItem onSelect={() => jest.fn()}>Delete</MenuItem>
+      </MenuList>
+    </Menu>
+  );
+}

test/utils.tsx

@@ -25,7 +25,7 @@ import { RenderOptions, RenderResult } from "./types";
  * @param query The getter function returned from RTL's render method
  */
 export function withMarkup(query: Query) {
-  return (text: string): HTMLElement =>
+  return (text: string): HTMLElement | null =>
     query((content: string, node: HTMLElement) => {
       const hasText = (node: HTMLElement) => node.textContent === text;
       const childrenDontHaveText = Array.from(node.children).every(
@@ -82,6 +82,6 @@ export function render<
   return result;
 }
 
-type Query = (f: MatcherFunction) => HTMLElement;
+type Query = (f: MatcherFunction) => HTMLElement | null;
 
 export { act, userEvent, RenderOptions, RenderResult };