Attempt to fix tests.

src/components/LibraryMenuHeaderContent.tsx

@@ -191,6 +191,7 @@ export const LibraryDropdownMenuButton: React.FC<{
       <DropdownMenu open={isLibraryMenuOpen}>
         <DropdownMenu.Trigger
           onToggle={() => setIsLibraryMenuOpen(!isLibraryMenuOpen)}
+          aria-label="Library menu"
         >
           {DotsIcon}
         </DropdownMenu.Trigger>

src/components/main-menu/MainMenu.tsx

@@ -57,6 +57,7 @@ const MainMenu = Object.assign(
                 });
               }}
               data-testid="main-menu-trigger"
+              aria-label="Main menu"
             >
               {HamburgerMenuIcon}
             </DropdownMenu.Trigger>

src/tests/library.test.tsx

@@ -1,4 +1,4 @@
-import { fireEvent, render, waitFor } from "./test-utils";
+import { fireEvent, render, togglePopover, waitFor } from "./test-utils";
 import { queryByTestId } from "@testing-library/react";
 
 import ExcalidrawApp from "../excalidraw-app";
@@ -192,12 +192,7 @@ describe("library menu", () => {
     const libraryButton = container.querySelector(".sidebar-trigger");
 
     fireEvent.click(libraryButton!);
-    fireEvent.click(
+    togglePopover("Library menu");
-      queryByTestId(
-        container.querySelector(".layer-ui__library")!,
-        "dropdown-menu-button",
-      )!,
-    );
     queryByTestId(container, "lib-dropdown--load")!.click();
 
     const libraryItems = parseLibraryJSON(await libraryJSONPromise);

src/tests/packages/__snapshots__/excalidraw.test.tsx.snap

@@ -2,12 +2,31 @@
 
 exports[`<Excalidraw/> <MainMenu/> should render main menu with host menu items if passed from host 1`] = `
 <div
-  class="dropdown-menu"
+  aria-labelledby="radix-:r5v:"
+  aria-orientation="vertical"
+  class="dropdown-menu main-menu-content"
+  data-align="start"
+  data-orientation="vertical"
+  data-radix-menu-content=""
+  data-side="bottom"
+  data-state="open"
   data-testid="dropdown-menu"
+  dir="ltr"
+  id="radix-:r60:"
+  role="menu"
+  style="outline: none; --radix-dropdown-menu-content-transform-origin: var(--radix-popper-transform-origin); --radix-dropdown-menu-content-available-width: var(--radix-popper-available-width); --radix-dropdown-menu-content-available-height: var(--radix-popper-available-height); --radix-dropdown-menu-trigger-width: var(--radix-popper-anchor-width); --radix-dropdown-menu-trigger-height: var(--radix-popper-anchor-height); animation: none;"
+  tabindex="-1"
 >
   <div
     class="Island dropdown-menu-container"
     style="--padding: 2; z-index: 2;"
+  >
+    <div
+      class="radix-menu-item"
+      data-orientation="vertical"
+      data-radix-collection-item=""
+      role="menuitem"
+      tabindex="-1"
     >
       <button
         class="dropdown-menu-item dropdown-menu-item-base"
@@ -22,6 +41,7 @@ exports[`<Excalidraw/> <MainMenu/> should render main menu with host menu items
           Click me
         </div>
       </button>
+    </div>
     <a
       class="dropdown-menu-item dropdown-menu-item-base"
       href="blog.excalidaw.com"
@@ -46,6 +66,13 @@ exports[`<Excalidraw/> <MainMenu/> should render main menu with host menu items
         custom menu item
       </button>
     </div>
+    <div
+      class="radix-menu-item"
+      data-orientation="vertical"
+      data-radix-collection-item=""
+      role="menuitem"
+      tabindex="-1"
+    >
       <button
         aria-label="Help"
         class="dropdown-menu-item dropdown-menu-item-base"
@@ -106,16 +133,36 @@ exports[`<Excalidraw/> <MainMenu/> should render main menu with host menu items
       </button>
     </div>
   </div>
+</div>
 `;
 
 exports[`<Excalidraw/> Test UIOptions prop Test canvasActions should render menu with default items when "UIOPtions" is "undefined" 1`] = `
 <div
-  class="dropdown-menu"
+  aria-labelledby="radix-:rq:"
+  aria-orientation="vertical"
+  class="dropdown-menu main-menu-content"
+  data-align="start"
+  data-orientation="vertical"
+  data-radix-menu-content=""
+  data-side="bottom"
+  data-state="open"
   data-testid="dropdown-menu"
+  dir="ltr"
+  id="radix-:rr:"
+  role="menu"
+  style="outline: none; --radix-dropdown-menu-content-transform-origin: var(--radix-popper-transform-origin); --radix-dropdown-menu-content-available-width: var(--radix-popper-available-width); --radix-dropdown-menu-content-available-height: var(--radix-popper-available-height); --radix-dropdown-menu-trigger-width: var(--radix-popper-anchor-width); --radix-dropdown-menu-trigger-height: var(--radix-popper-anchor-height); animation: none;"
+  tabindex="-1"
 >
   <div
     class="Island dropdown-menu-container"
     style="--padding: 2; z-index: 2;"
+  >
+    <div
+      class="radix-menu-item"
+      data-orientation="vertical"
+      data-radix-collection-item=""
+      role="menuitem"
+      tabindex="-1"
     >
       <button
         aria-label="Open"
@@ -155,6 +202,14 @@ exports[`<Excalidraw/> Test UIOptions prop Test canvasActions should render menu
           Ctrl+O
         </div>
       </button>
+    </div>
+    <div
+      class="radix-menu-item"
+      data-orientation="vertical"
+      data-radix-collection-item=""
+      role="menuitem"
+      tabindex="-1"
+    >
       <button
         aria-label="Save to..."
         class="dropdown-menu-item dropdown-menu-item-base"
@@ -188,6 +243,14 @@ exports[`<Excalidraw/> Test UIOptions prop Test canvasActions should render menu
           Save to...
         </div>
       </button>
+    </div>
+    <div
+      class="radix-menu-item"
+      data-orientation="vertical"
+      data-radix-collection-item=""
+      role="menuitem"
+      tabindex="-1"
+    >
       <button
         aria-label="Export image..."
         class="dropdown-menu-item dropdown-menu-item-base"
@@ -250,6 +313,14 @@ exports[`<Excalidraw/> Test UIOptions prop Test canvasActions should render menu
           Ctrl+Shift+E
         </div>
       </button>
+    </div>
+    <div
+      class="radix-menu-item"
+      data-orientation="vertical"
+      data-radix-collection-item=""
+      role="menuitem"
+      tabindex="-1"
+    >
       <button
         aria-label="Help"
         class="dropdown-menu-item dropdown-menu-item-base"
@@ -308,6 +379,14 @@ exports[`<Excalidraw/> Test UIOptions prop Test canvasActions should render menu
           ?
         </div>
       </button>
+    </div>
+    <div
+      class="radix-menu-item"
+      data-orientation="vertical"
+      data-radix-collection-item=""
+      role="menuitem"
+      tabindex="-1"
+    >
       <button
         aria-label="Reset the canvas"
         class="dropdown-menu-item dropdown-menu-item-base"
@@ -341,6 +420,7 @@ exports[`<Excalidraw/> Test UIOptions prop Test canvasActions should render menu
           Reset the canvas
         </div>
       </button>
+    </div>
     <div
       style="height: 1px; margin: .5rem 0px;"
     />
@@ -473,6 +553,13 @@ exports[`<Excalidraw/> Test UIOptions prop Test canvasActions should render menu
     <div
       style="height: 1px; margin: .5rem 0px;"
     />
+    <div
+      class="radix-menu-item"
+      data-orientation="vertical"
+      data-radix-collection-item=""
+      role="menuitem"
+      tabindex="-1"
+    >
       <button
         aria-label="Dark mode"
         class="dropdown-menu-item dropdown-menu-item-base"
@@ -512,6 +599,7 @@ exports[`<Excalidraw/> Test UIOptions prop Test canvasActions should render menu
           Shift+Alt+D
         </div>
       </button>
+    </div>
     <div
       style="margin-top: 0.5rem;"
     >
@@ -587,7 +675,7 @@ exports[`<Excalidraw/> Test UIOptions prop Test canvasActions should render menu
               style="width: 1px; height: 100%; margin: 0px auto;"
             />
             <button
-              aria-controls="radix-:r0:"
+              aria-controls="radix-:r12:"
               aria-expanded="false"
               aria-haspopup="dialog"
               aria-label="Canvas background"

src/tests/packages/excalidraw.test.tsx

@@ -1,4 +1,9 @@
-import { fireEvent, GlobalTestState, toggleMenu, render } from "../test-utils";
+import {
+  fireEvent,
+  GlobalTestState,
+  render,
+  togglePopover,
+} from "../test-utils";
 import { Excalidraw, Footer, MainMenu } from "../../packages/excalidraw/index";
 import { queryByText, queryByTestId } from "@testing-library/react";
 import { GRID_SIZE, THEME } from "../../constants";
@@ -11,7 +16,7 @@ describe("<Excalidraw/>", () => {
   afterEach(() => {
     const menu = document.querySelector(".dropdown-menu");
     if (menu) {
-      toggleMenu(document.querySelector(".excalidraw")!);
+      togglePopover("Main menu");
     }
   });
 
@@ -130,7 +135,7 @@ describe("<Excalidraw/>", () => {
           <Excalidraw UIOptions={undefined} />,
         );
         //open menu
-        toggleMenu(container);
+        togglePopover("Main menu");
         expect(queryByTestId(container, "dropdown-menu")).toMatchSnapshot();
       });
 
@@ -139,7 +144,7 @@ describe("<Excalidraw/>", () => {
           <Excalidraw UIOptions={{ canvasActions: { clearCanvas: false } }} />,
         );
         //open menu
-        toggleMenu(container);
+        togglePopover("Main menu");
         expect(queryByTestId(container, "clear-canvas-button")).toBeNull();
       });
 
@@ -148,7 +153,7 @@ describe("<Excalidraw/>", () => {
           <Excalidraw UIOptions={{ canvasActions: { export: false } }} />,
         );
         //open menu
-        toggleMenu(container);
+        togglePopover("Main menu");
         expect(queryByTestId(container, "json-export-button")).toBeNull();
       });
 
@@ -157,7 +162,7 @@ describe("<Excalidraw/>", () => {
           <Excalidraw UIOptions={{ canvasActions: { saveAsImage: false } }} />,
         );
         //open menu
-        toggleMenu(container);
+        togglePopover("Main menu");
         expect(queryByTestId(container, "image-export-button")).toBeNull();
       });
 
@@ -176,7 +181,7 @@ describe("<Excalidraw/>", () => {
           />,
         );
         //open menu
-        toggleMenu(container);
+        togglePopover("Main menu");
         expect(queryByTestId(container, "save-as-button")).toBeNull();
       });
 
@@ -187,7 +192,7 @@ describe("<Excalidraw/>", () => {
           />,
         );
         //open menu
-        toggleMenu(container);
+        togglePopover("Main menu");
         expect(queryByTestId(container, "save-button")).toBeNull();
       });
 
@@ -198,7 +203,7 @@ describe("<Excalidraw/>", () => {
           />,
         );
         //open menu
-        toggleMenu(container);
+        togglePopover("Main menu");
         expect(queryByTestId(container, "canvas-background-picker")).toBeNull();
       });
 
@@ -207,7 +212,7 @@ describe("<Excalidraw/>", () => {
           <Excalidraw UIOptions={{ canvasActions: { toggleTheme: false } }} />,
         );
         //open menu
-        toggleMenu(container);
+        togglePopover("Main menu");
         expect(queryByTestId(container, "toggle-dark-mode")).toBeNull();
       });
 
@@ -228,8 +233,8 @@ describe("<Excalidraw/>", () => {
           </Excalidraw>,
         );
         //open menu
-        toggleMenu(container);
         // load button shouldn't be rendered since `UIActions.canvasActions.loadScene` is `false`
+        togglePopover("Main menu");
         expect(queryByTestId(container, "load-button")).toBeNull();
       });
     });
@@ -240,7 +245,7 @@ describe("<Excalidraw/>", () => {
       const { container } = await render(<Excalidraw />);
       expect(h.state.theme).toBe(THEME.LIGHT);
       //open menu
-      toggleMenu(container);
+      togglePopover("Main menu");
       const darkModeToggle = queryByTestId(container, "toggle-dark-mode");
       expect(darkModeToggle).toBeTruthy();
     });
@@ -250,7 +255,7 @@ describe("<Excalidraw/>", () => {
 
       expect(h.state.theme).toBe(THEME.DARK);
       //open menu
-      toggleMenu(container);
+      togglePopover("Main menu");
       expect(queryByTestId(container, "toggle-dark-mode")).toBe(null);
     });
 
@@ -263,7 +268,7 @@ describe("<Excalidraw/>", () => {
       );
       expect(h.state.theme).toBe(THEME.DARK);
       //open menu
-      toggleMenu(container);
+      togglePopover("Main menu");
       const darkModeToggle = queryByTestId(container, "toggle-dark-mode");
       expect(darkModeToggle).toBeTruthy();
     });
@@ -277,7 +282,7 @@ describe("<Excalidraw/>", () => {
       );
       expect(h.state.theme).toBe(THEME.DARK);
       //open menu
-      toggleMenu(container);
+      togglePopover("Main menu");
       const darkModeToggle = queryByTestId(container, "toggle-dark-mode");
       expect(darkModeToggle).toBe(null);
     });
@@ -287,7 +292,7 @@ describe("<Excalidraw/>", () => {
     it('should allow editing name when the name prop is "undefined"', async () => {
       const { container } = await render(<Excalidraw />);
       //open menu
-      toggleMenu(container);
+      togglePopover("Main menu");
       fireEvent.click(queryByTestId(container, "image-export-button")!);
       const textInput: HTMLInputElement | null = document.querySelector(
         ".ImageExportModal .ImageExportModal__preview__filename .TextInput",
@@ -300,7 +305,7 @@ describe("<Excalidraw/>", () => {
       const name = "test";
       const { container } = await render(<Excalidraw name={name} />);
       //open menu
-      toggleMenu(container);
+      togglePopover("Main menu");
       await fireEvent.click(queryByTestId(container, "image-export-button")!);
       const textInput = document.querySelector(
         ".ImageExportModal .ImageExportModal__preview__filename .TextInput",
@@ -353,7 +358,7 @@ describe("<Excalidraw/>", () => {
         </Excalidraw>,
       );
       //open menu
-      toggleMenu(container);
+      togglePopover("Main menu");
       expect(queryByTestId(container, "dropdown-menu")).toMatchSnapshot();
     });
 
@@ -372,7 +377,7 @@ describe("<Excalidraw/>", () => {
 
       const { container } = await render(<CustomExcalidraw />);
       //open menu
-      toggleMenu(container);
+      togglePopover("Main menu");
 
       expect(h.state.theme).toBe(THEME.LIGHT);