@khanacademy/wonder-blocks-dropdown 5.3.8 → 5.4.0

package/src/components/__tests__/action-menu.test.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable max-lines */
 import * as React from "react";
 import {render, screen} from "@testing-library/react";
 import {PointerEventsCheckLevel, userEvent} from "@testing-library/user-event";
@@ -145,29 +146,6 @@ describe("ActionMenu", () => {
         expect(screen.queryByRole("menu")).not.toBeInTheDocument();
     });
 
-    it("updates the aria-expanded value when opening", async () => {
-        // Arrange
-        render(
-            <ActionMenu
-                menuText={"Action menu!"}
-                testId="openTest"
-                onChange={onChange}
-                selectedValues={[]}
-            >
-                <ActionItem label="Action" onClick={onClick} />
-                <SeparatorItem />
-                <OptionItem label="Toggle" value="toggle" onClick={onToggle} />
-            </ActionMenu>,
-        );
-
-        // Act
-        const opener = await screen.findByRole("button");
-        await userEvent.click(opener);
-
-        // Assert
-        expect(opener).toHaveAttribute("aria-expanded", "true");
-    });
-
     it("triggers actions", async () => {
         // Arrange
         const onChange = jest.fn();
@@ -572,4 +550,633 @@ describe("ActionMenu", () => {
             expect(opener).toHaveTextContent("Action menu!");
         });
     });
+
+    describe("With OptionItems", () => {
+        it("Should render option items with `role=menuitemcheckbox`", async () => {
+            // Arrange
+            render(
+                <ActionMenu
+                    menuText="Action menu!"
+                    testId="openTest"
+                    onChange={onChange}
+                >
+                    <OptionItem
+                        label="Toggle A"
+                        value="toggle-a"
+                        testId="toggle-a"
+                    />
+                    <OptionItem
+                        label="Toggle B"
+                        value="toggle-b"
+                        testId="toggle-b"
+                    />
+                </ActionMenu>,
+            );
+
+            // Act
+            // open the menu
+            const opener = await screen.findByRole("button");
+            await userEvent.click(opener);
+
+            // Assert
+            expect(
+                await screen.findAllByRole("menuitemcheckbox", {hidden: true}),
+            ).toHaveLength(2);
+        });
+
+        it("Should render non-selected option items with `aria-checked` set to `false`", async () => {
+            // Arrange
+            render(
+                <ActionMenu
+                    menuText="Action menu!"
+                    testId="openTest"
+                    onChange={onChange}
+                    selectedValues={[]}
+                >
+                    <OptionItem
+                        label="Toggle A"
+                        value="toggle-a"
+                        testId="toggle-a"
+                    />
+                    <OptionItem
+                        label="Toggle B"
+                        value="toggle-b"
+                        testId="toggle-b"
+                    />
+                </ActionMenu>,
+            );
+
+            // Act
+            // open the menu
+            const opener = await screen.findByRole("button");
+            await userEvent.click(opener);
+
+            // Assert
+            const menuItemCheckboxes = await screen.findAllByRole(
+                "menuitemcheckbox",
+                {
+                    hidden: true,
+                },
+            );
+            expect(menuItemCheckboxes.at(0)).toHaveAttribute(
+                "aria-checked",
+                "false",
+            );
+            expect(menuItemCheckboxes.at(1)).toHaveAttribute(
+                "aria-checked",
+                "false",
+            );
+        });
+
+        it("Should render selected option items with `aria-checked` set to `true`", async () => {
+            // Arrange
+            render(
+                <ActionMenu
+                    menuText="Action menu!"
+                    testId="openTest"
+                    onChange={onChange}
+                    selectedValues={["toggle-a"]}
+                >
+                    <OptionItem
+                        label="Toggle A"
+                        value="toggle-a"
+                        testId="toggle-a"
+                    />
+                    <OptionItem
+                        label="Toggle B"
+                        value="toggle-b"
+                        testId="toggle-b"
+                    />
+                </ActionMenu>,
+            );
+
+            // Act
+            // open the menu
+            const opener = await screen.findByRole("button");
+            await userEvent.click(opener);
+
+            // Assert
+            const menuItemCheckboxes = await screen.findAllByRole(
+                "menuitemcheckbox",
+                {
+                    hidden: true,
+                },
+            );
+            expect(menuItemCheckboxes.at(0)).toHaveAttribute(
+                "aria-checked",
+                "true",
+            );
+        });
+
+        it("Should not use `aria-selected` attribute on selected and non-selected options", async () => {
+            // Arrange
+            render(
+                <ActionMenu
+                    menuText="Action menu!"
+                    testId="openTest"
+                    onChange={onChange}
+                    selectedValues={["toggle-a"]}
+                >
+                    <OptionItem
+                        label="Toggle A"
+                        value="toggle-a"
+                        testId="toggle-a"
+                    />
+                    <OptionItem
+                        label="Toggle B"
+                        value="toggle-b"
+                        testId="toggle-b"
+                    />
+                </ActionMenu>,
+            );
+
+            // Act
+            // open the menu
+            const opener = await screen.findByRole("button");
+            await userEvent.click(opener);
+
+            // Assert
+            const menuItemCheckboxes = await screen.findAllByRole(
+                "menuitemcheckbox",
+                {
+                    hidden: true,
+                },
+            );
+            expect(menuItemCheckboxes.at(0)).not.toHaveAttribute(
+                "aria-selected",
+            );
+            expect(menuItemCheckboxes.at(1)).not.toHaveAttribute(
+                "aria-selected",
+            );
+        });
+
+        it("Should render action items with `role=menuitem` and option items with `role=menuitemcheckbox`", async () => {
+            // Arrange
+            render(
+                <ActionMenu
+                    menuText="Action menu!"
+                    testId="openTest"
+                    onChange={onChange}
+                >
+                    <ActionItem label="Action" />
+                    <OptionItem
+                        label="Toggle A"
+                        value="toggle-a"
+                        testId="toggle-a"
+                    />
+                </ActionMenu>,
+            );
+
+            // Act
+            // open the menu
+            const opener = await screen.findByRole("button");
+            await userEvent.click(opener);
+
+            // Assert
+            expect(
+                await screen.findAllByRole("menuitem", {hidden: true}),
+            ).toHaveLength(1);
+            expect(
+                await screen.findAllByRole("menuitemcheckbox", {hidden: true}),
+            ).toHaveLength(1);
+        });
+
+        describe("With Virtualization", () => {
+            it("Should render option items with `role=menuitemcheckbox` when there are many options", async () => {
+                // Arrange
+                render(
+                    <ActionMenu
+                        menuText="Action menu!"
+                        testId="openTest"
+                        onChange={onChange}
+                    >
+                        {[...new Array(126)].map((_, i) => (
+                            <OptionItem
+                                label={`Toggle ${i}`}
+                                key={i}
+                                value={`toggle-${i}`}
+                            />
+                        ))}
+                    </ActionMenu>,
+                );
+
+                // Act
+                // open the menu
+                const opener = await screen.findByRole("button");
+                await userEvent.click(opener);
+
+                // Assert
+                // Note there are less than the option items amount because they are
+                // virtualized
+                expect(
+                    await screen.findAllByRole("menuitemcheckbox", {
+                        hidden: true,
+                    }),
+                ).toHaveLength(14);
+                expect(
+                    screen.queryAllByRole("menuitem", {
+                        hidden: true,
+                    }),
+                ).toHaveLength(0);
+            });
+
+            it("Should render selected option items with `aria-checked=true` when there are many options", async () => {
+                // Arrange
+                render(
+                    <ActionMenu
+                        menuText="Action menu!"
+                        testId="openTest"
+                        onChange={onChange}
+                        selectedValues={["toggle-0"]}
+                    >
+                        {[...new Array(126)].map((_, i) => (
+                            <OptionItem
+                                label={`Toggle ${i}`}
+                                key={i}
+                                value={`toggle-${i}`}
+                            />
+                        ))}
+                    </ActionMenu>,
+                );
+
+                // Act
+                // open the menu
+                const opener = await screen.findByRole("button");
+                await userEvent.click(opener);
+
+                // Assert
+                const menuItemCheckboxes = await screen.findAllByRole(
+                    "menuitemcheckbox",
+                    {
+                        hidden: true,
+                    },
+                );
+                expect(menuItemCheckboxes.at(0)).toHaveAttribute(
+                    "aria-checked",
+                    "true",
+                );
+            });
+
+            it("Should render non-selected option items with `aria-checked=false` when there are many options", async () => {
+                // Arrange
+                render(
+                    <ActionMenu
+                        menuText="Action menu!"
+                        testId="openTest"
+                        onChange={onChange}
+                        selectedValues={[]}
+                    >
+                        {[...new Array(126)].map((_, i) => (
+                            <OptionItem
+                                label={`Toggle ${i}`}
+                                key={i}
+                                value={`toggle-${i}`}
+                            />
+                        ))}
+                    </ActionMenu>,
+                );
+
+                // Act
+                // open the menu
+                const opener = await screen.findByRole("button");
+                await userEvent.click(opener);
+
+                // Assert
+                const menuItemCheckboxes = await screen.findAllByRole(
+                    "menuitemcheckbox",
+                    {
+                        hidden: true,
+                    },
+                );
+                expect(menuItemCheckboxes.at(0)).toHaveAttribute(
+                    "aria-checked",
+                    "false",
+                );
+            });
+
+            it("Should not use `aria-selected` attribute on selected and non-selected options", async () => {
+                // Arrange
+                render(
+                    <ActionMenu
+                        menuText="Action menu!"
+                        testId="openTest"
+                        onChange={onChange}
+                        selectedValues={["toggle-0"]}
+                    >
+                        {[...new Array(126)].map((_, i) => (
+                            <OptionItem
+                                label={`Toggle ${i}`}
+                                key={i}
+                                value={`toggle-${i}`}
+                            />
+                        ))}
+                    </ActionMenu>,
+                );
+
+                // Act
+                // open the menu
+                const opener = await screen.findByRole("button");
+                await userEvent.click(opener);
+
+                // Assert
+                const menuItemCheckboxes = await screen.findAllByRole(
+                    "menuitemcheckbox",
+                    {
+                        hidden: true,
+                    },
+                );
+                expect(menuItemCheckboxes.at(0)).not.toHaveAttribute(
+                    "aria-selected",
+                );
+                expect(menuItemCheckboxes.at(1)).not.toHaveAttribute(
+                    "aria-selected",
+                );
+            });
+        });
+    });
+
+    describe("Ids", () => {
+        it("Should auto-generate an id for the opener if `id` prop is not provided", async () => {
+            // Arrange
+            render(
+                <ActionMenu menuText={"Action menu!"}>
+                    <ActionItem label="Create" />
+                </ActionMenu>,
+            );
+
+            // Act
+            const opener = await screen.findByRole("button");
+
+            // Assert
+            // Expect autogenerated id to be in the form uid-action-menu-opener-[number]-wb-id
+            expect(opener).toHaveAttribute(
+                "id",
+                expect.stringMatching(/^uid-action-menu-opener-\d+-wb-id$/),
+            );
+        });
+
+        it("Should use the `id` prop if provided", async () => {
+            // Arrange
+            const id = "test-id";
+            render(
+                <ActionMenu menuText={"Action menu!"} id={id}>
+                    <ActionItem label="Create" />
+                </ActionMenu>,
+            );
+
+            // Act
+            const opener = await screen.findByRole("button");
+
+            // Assert
+            expect(opener).toHaveAttribute("id", id);
+        });
+        it("Should auto-generate an id for the dropdown if `dropdownId` prop is not provided", async () => {
+            // Arrange
+            render(
+                <ActionMenu menuText={"Action menu!"}>
+                    <ActionItem label="Create" />
+                </ActionMenu>,
+            );
+
+            // Act
+            // Open the dropdown
+            const opener = await screen.findByRole("button");
+            await userEvent.click(opener);
+
+            // Assert
+            expect(
+                await screen.findByRole("menu", {hidden: true}),
+            ).toHaveAttribute(
+                "id",
+                expect.stringMatching(/^uid-action-menu-dropdown-\d+-wb-id$/),
+            );
+        });
+
+        it("Should use the `dropdownId` prop if provided", async () => {
+            // Arrange
+            const dropdownId = "test-id";
+            render(
+                <ActionMenu menuText={"Action menu!"} dropdownId={dropdownId}>
+                    <ActionItem label="Create" />
+                </ActionMenu>,
+            );
+
+            // Act
+            // Open the dropdown
+            const opener = await screen.findByRole("button");
+            await userEvent.click(opener);
+
+            // Assert
+            expect(
+                await screen.findByRole("menu", {hidden: true}),
+            ).toHaveAttribute("id", dropdownId);
+        });
+    });
+
+    describe("a11y > aria-controls", () => {
+        it("Should set the `aria-controls` attribute on the default opener to the provided dropdownId prop", async () => {
+            // Arrange
+            const dropdownId = "test-id";
+            render(
+                <ActionMenu menuText={"Action menu!"} dropdownId={dropdownId}>
+                    <ActionItem label="Create" />
+                </ActionMenu>,
+            );
+
+            // Act
+            const opener = await screen.findByRole("button");
+            await userEvent.click(opener);
+            const dropdown = await screen.findByRole("menu", {hidden: true});
+
+            // Assert
+            expect(opener).toHaveAttribute("aria-controls", dropdown.id);
+            expect(opener).toHaveAttribute("aria-controls", dropdownId);
+        });
+
+        it("Should set the `aria-controls` attribute on the default opener to the auto-generated dropdownId", async () => {
+            // Arrange
+            render(
+                <ActionMenu menuText={"Action menu!"}>
+                    <ActionItem label="Create" />
+                </ActionMenu>,
+            );
+
+            // Act
+            const opener = await screen.findByRole("button");
+            await userEvent.click(opener);
+            const dropdown = await screen.findByRole("menu", {hidden: true});
+
+            // Assert
+            expect(opener).toHaveAttribute("aria-controls", dropdown.id);
+            expect(opener).toHaveAttribute(
+                "aria-controls",
+                expect.stringMatching(/^uid-action-menu-dropdown-\d+-wb-id$/),
+            );
+        });
+
+        it("Should set the `aria-controls` attribute on the custom opener to the provided dropdownId prop", async () => {
+            // Arrange
+            const dropdownId = "test-id";
+            render(
+                <ActionMenu
+                    menuText={"Action menu!"}
+                    dropdownId={dropdownId}
+                    opener={() => (
+                        <button aria-label="Search" onClick={jest.fn()} />
+                    )}
+                >
+                    <ActionItem label="Action" onClick={onClick} />
+                </ActionMenu>,
+            );
+
+            // Act
+            const opener = await screen.findByLabelText("Search");
+            await userEvent.click(opener);
+            const dropdown = await screen.findByRole("menu", {hidden: true});
+
+            // Assert
+            expect(opener).toHaveAttribute("aria-controls", dropdown.id);
+            expect(opener).toHaveAttribute("aria-controls", dropdownId);
+        });
+
+        it("Should set the `aria-controls` attribute on the custom opener to the auto-generated dropdownId", async () => {
+            // Arrange
+            render(
+                <ActionMenu
+                    menuText={"Action menu!"}
+                    opener={() => (
+                        <button aria-label="Search" onClick={jest.fn()} />
+                    )}
+                >
+                    <ActionItem label="Action" onClick={onClick} />
+                </ActionMenu>,
+            );
+
+            // Act
+            const opener = await screen.findByLabelText("Search");
+            await userEvent.click(opener);
+            const dropdown = await screen.findByRole("menu", {hidden: true});
+
+            // Assert
+            expect(opener).toHaveAttribute("aria-controls", dropdown.id);
+            expect(opener).toHaveAttribute(
+                "aria-controls",
+                expect.stringMatching(/^uid-action-menu-dropdown-\d+-wb-id$/),
+            );
+        });
+    });
+
+    describe("a11y > aria-haspopup", () => {
+        it("should have aria-haspopup set on the opener", async () => {
+            // Arrange
+            render(
+                <ActionMenu menuText={"Action menu!"} onChange={onChange}>
+                    <ActionItem label="Action" onClick={onClick} />
+                </ActionMenu>,
+            );
+
+            // Act
+            const opener = await screen.findByRole("button");
+
+            // Assert
+            expect(opener).toHaveAttribute("aria-haspopup", "menu");
+        });
+
+        it("should have aria-haspopup set on the custom opener", async () => {
+            // Arrange
+            render(
+                <ActionMenu
+                    menuText={"Action menu!"}
+                    onChange={onChange}
+                    opener={() => (
+                        <button aria-label="Search" onClick={jest.fn()} />
+                    )}
+                >
+                    <ActionItem label="Action" onClick={onClick} />
+                </ActionMenu>,
+            );
+
+            // Act
+            const opener = await screen.findByLabelText("Search");
+
+            // Assert
+            expect(opener).toHaveAttribute("aria-haspopup", "menu");
+        });
+    });
+
+    describe("a11y > aria-expanded", () => {
+        it("should have aria-expanded=false when closed", async () => {
+            // Arrange
+            render(
+                <ActionMenu menuText={"Action menu!"} onChange={onChange}>
+                    <ActionItem label="Action" onClick={onClick} />
+                </ActionMenu>,
+            );
+
+            // Act
+            const opener = await screen.findByRole("button");
+
+            // Assert
+            expect(opener).toHaveAttribute("aria-expanded", "false");
+        });
+
+        it("updates the aria-expanded value when opening", async () => {
+            // Arrange
+            render(
+                <ActionMenu menuText={"Action menu!"} onChange={onChange}>
+                    <ActionItem label="Action" onClick={onClick} />
+                </ActionMenu>,
+            );
+
+            // Act
+            const opener = await screen.findByRole("button");
+            await userEvent.click(opener);
+
+            // Assert
+            expect(opener).toHaveAttribute("aria-expanded", "true");
+        });
+
+        it("should have aria-expanded=false when closed and using a custom opener", async () => {
+            // Arrange
+            render(
+                <ActionMenu
+                    menuText={"Action menu!"}
+                    onChange={onChange}
+                    opener={() => (
+                        <button aria-label="Search" onClick={jest.fn()} />
+                    )}
+                >
+                    <ActionItem label="Action" onClick={onClick} />
+                </ActionMenu>,
+            );
+
+            // Act
+            const opener = await screen.findByLabelText("Search");
+
+            // Assert
+            expect(opener).toHaveAttribute("aria-expanded", "false");
+        });
+
+        it("updates the aria-expanded value when opening and using a custom opener", async () => {
+            // Arrange
+            render(
+                <ActionMenu
+                    menuText={"Action menu!"}
+                    onChange={onChange}
+                    opener={() => (
+                        <button aria-label="Search" onClick={jest.fn()} />
+                    )}
+                >
+                    <ActionItem label="Action" onClick={onClick} />
+                </ActionMenu>,
+            );
+
+            // Act
+            const opener = await screen.findByLabelText("Search");
+            await userEvent.click(opener);
+
+            // Assert
+            expect(opener).toHaveAttribute("aria-expanded", "true");
+        });
+    });
 });