foss/excalidraw
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Attempt to fix tests.

Browse Source
This commit is contained in:
barnabasmolnar 2023-07-24 14:04:37 +02:00
parent 8787c7d8cf
commit b6a7f05761
5 changed files with 431 additions and 341 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/components/LibraryMenuHeaderContent.tsx
View File

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

1
src/components/main-menu/MainMenu.tsx
View File

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

9
src/tests/library.test.tsx
View File

@ -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(
queryByTestId(
container.querySelector(".layer-ui__library")!,
"dropdown-menu-button",
)!,
);
togglePopover("Library menu");
queryByTestId(container, "lib-dropdown--load")!.click();
const libraryItems = parseLibraryJSON(await libraryJSONPromise);

94
src/tests/packages/__snapshots__/excalidraw.test.tsx.snap
View File

@ -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"
@ -105,17 +132,37 @@ exports[`<Excalidraw/> <MainMenu/> should render main menu with host menu items
</div>
</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"

43
src/tests/packages/excalidraw.test.tsx
View File

@ -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);