Attempt to fix tests.
This commit is contained in:
barnabasmolnar
parent
8787c7d8cf
commit
b6a7f05761
@ -191,6 +191,7 @@ export const LibraryDropdownMenuButton: React.FC<{
|
|||||||
<DropdownMenu open={isLibraryMenuOpen}>
|
<DropdownMenu open={isLibraryMenuOpen}>
|
||||||
<DropdownMenu.Trigger
|
<DropdownMenu.Trigger
|
||||||
onToggle={() => setIsLibraryMenuOpen(!isLibraryMenuOpen)}
|
onToggle={() => setIsLibraryMenuOpen(!isLibraryMenuOpen)}
|
||||||
|
aria-label="Library menu"
|
||||||
>
|
>
|
||||||
{DotsIcon}
|
{DotsIcon}
|
||||||
</DropdownMenu.Trigger>
|
</DropdownMenu.Trigger>
|
||||||
|
|||||||
@ -57,6 +57,7 @@ const MainMenu = Object.assign(
|
|||||||
});
|
});
|
||||||
}}
|
}}
|
||||||
data-testid="main-menu-trigger"
|
data-testid="main-menu-trigger"
|
||||||
|
aria-label="Main menu"
|
||||||
>
|
>
|
||||||
{HamburgerMenuIcon}
|
{HamburgerMenuIcon}
|
||||||
</DropdownMenu.Trigger>
|
</DropdownMenu.Trigger>
|
||||||
|
|||||||
@ -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 { queryByTestId } from "@testing-library/react";
|
||||||
|
|
||||||
import ExcalidrawApp from "../excalidraw-app";
|
import ExcalidrawApp from "../excalidraw-app";
|
||||||
@ -192,12 +192,7 @@ describe("library menu", () => {
|
|||||||
const libraryButton = container.querySelector(".sidebar-trigger");
|
const libraryButton = container.querySelector(".sidebar-trigger");
|
||||||
|
|
||||||
fireEvent.click(libraryButton!);
|
fireEvent.click(libraryButton!);
|
||||||
fireEvent.click(
|
togglePopover("Library menu");
|
||||||
queryByTestId(
|
|
||||||
container.querySelector(".layer-ui__library")!,
|
|
||||||
"dropdown-menu-button",
|
|
||||||
)!,
|
|
||||||
);
|
|
||||||
queryByTestId(container, "lib-dropdown--load")!.click();
|
queryByTestId(container, "lib-dropdown--load")!.click();
|
||||||
|
|
||||||
const libraryItems = parseLibraryJSON(await libraryJSONPromise);
|
const libraryItems = parseLibraryJSON(await libraryJSONPromise);
|
||||||
|
|||||||
@ -2,26 +2,46 @@
|
|||||||
|
|
||||||
exports[`<Excalidraw/> <MainMenu/> should render main menu with host menu items if passed from host 1`] = `
|
exports[`<Excalidraw/> <MainMenu/> should render main menu with host menu items if passed from host 1`] = `
|
||||||
<div
|
<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"
|
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
|
<div
|
||||||
class="Island dropdown-menu-container"
|
class="Island dropdown-menu-container"
|
||||||
style="--padding: 2; z-index: 2;"
|
style="--padding: 2; z-index: 2;"
|
||||||
>
|
>
|
||||||
<button
|
<div
|
||||||
class="dropdown-menu-item dropdown-menu-item-base"
|
class="radix-menu-item"
|
||||||
type="button"
|
data-orientation="vertical"
|
||||||
|
data-radix-collection-item=""
|
||||||
|
role="menuitem"
|
||||||
|
tabindex="-1"
|
||||||
>
|
>
|
||||||
<div
|
<button
|
||||||
class="dropdown-menu-item__icon"
|
class="dropdown-menu-item dropdown-menu-item-base"
|
||||||
/>
|
type="button"
|
||||||
<div
|
|
||||||
class="dropdown-menu-item__text"
|
|
||||||
>
|
>
|
||||||
Click me
|
<div
|
||||||
</div>
|
class="dropdown-menu-item__icon"
|
||||||
</button>
|
/>
|
||||||
|
<div
|
||||||
|
class="dropdown-menu-item__text"
|
||||||
|
>
|
||||||
|
Click me
|
||||||
|
</div>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
<a
|
<a
|
||||||
class="dropdown-menu-item dropdown-menu-item-base"
|
class="dropdown-menu-item dropdown-menu-item-base"
|
||||||
href="blog.excalidaw.com"
|
href="blog.excalidaw.com"
|
||||||
@ -46,301 +66,361 @@ exports[`<Excalidraw/> <MainMenu/> should render main menu with host menu items
|
|||||||
custom menu item
|
custom menu item
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
<button
|
<div
|
||||||
aria-label="Help"
|
class="radix-menu-item"
|
||||||
class="dropdown-menu-item dropdown-menu-item-base"
|
data-orientation="vertical"
|
||||||
data-testid="help-menu-item"
|
data-radix-collection-item=""
|
||||||
title="Help"
|
role="menuitem"
|
||||||
type="button"
|
tabindex="-1"
|
||||||
>
|
>
|
||||||
<div
|
<button
|
||||||
class="dropdown-menu-item__icon"
|
aria-label="Help"
|
||||||
|
class="dropdown-menu-item dropdown-menu-item-base"
|
||||||
|
data-testid="help-menu-item"
|
||||||
|
title="Help"
|
||||||
|
type="button"
|
||||||
>
|
>
|
||||||
<svg
|
<div
|
||||||
aria-hidden="true"
|
class="dropdown-menu-item__icon"
|
||||||
class=""
|
|
||||||
fill="none"
|
|
||||||
focusable="false"
|
|
||||||
role="img"
|
|
||||||
stroke="currentColor"
|
|
||||||
stroke-linecap="round"
|
|
||||||
stroke-linejoin="round"
|
|
||||||
stroke-width="2"
|
|
||||||
viewBox="0 0 24 24"
|
|
||||||
>
|
>
|
||||||
<g
|
<svg
|
||||||
stroke-width="1.5"
|
aria-hidden="true"
|
||||||
|
class=""
|
||||||
|
fill="none"
|
||||||
|
focusable="false"
|
||||||
|
role="img"
|
||||||
|
stroke="currentColor"
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-linejoin="round"
|
||||||
|
stroke-width="2"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
>
|
>
|
||||||
<path
|
<g
|
||||||
d="M0 0h24v24H0z"
|
stroke-width="1.5"
|
||||||
fill="none"
|
>
|
||||||
stroke="none"
|
<path
|
||||||
/>
|
d="M0 0h24v24H0z"
|
||||||
<circle
|
fill="none"
|
||||||
cx="12"
|
stroke="none"
|
||||||
cy="12"
|
/>
|
||||||
r="9"
|
<circle
|
||||||
/>
|
cx="12"
|
||||||
<line
|
cy="12"
|
||||||
x1="12"
|
r="9"
|
||||||
x2="12"
|
/>
|
||||||
y1="17"
|
<line
|
||||||
y2="17.01"
|
x1="12"
|
||||||
/>
|
x2="12"
|
||||||
<path
|
y1="17"
|
||||||
d="M12 13.5a1.5 1.5 0 0 1 1 -1.5a2.6 2.6 0 1 0 -3 -4"
|
y2="17.01"
|
||||||
/>
|
/>
|
||||||
</g>
|
<path
|
||||||
</svg>
|
d="M12 13.5a1.5 1.5 0 0 1 1 -1.5a2.6 2.6 0 1 0 -3 -4"
|
||||||
</div>
|
/>
|
||||||
<div
|
</g>
|
||||||
class="dropdown-menu-item__text"
|
</svg>
|
||||||
>
|
</div>
|
||||||
Help
|
<div
|
||||||
</div>
|
class="dropdown-menu-item__text"
|
||||||
<div
|
>
|
||||||
class="dropdown-menu-item__shortcut"
|
Help
|
||||||
>
|
</div>
|
||||||
?
|
<div
|
||||||
</div>
|
class="dropdown-menu-item__shortcut"
|
||||||
</button>
|
>
|
||||||
|
?
|
||||||
|
</div>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
`;
|
`;
|
||||||
|
|
||||||
exports[`<Excalidraw/> Test UIOptions prop Test canvasActions should render menu with default items when "UIOPtions" is "undefined" 1`] = `
|
exports[`<Excalidraw/> Test UIOptions prop Test canvasActions should render menu with default items when "UIOPtions" is "undefined" 1`] = `
|
||||||
<div
|
<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"
|
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
|
<div
|
||||||
class="Island dropdown-menu-container"
|
class="Island dropdown-menu-container"
|
||||||
style="--padding: 2; z-index: 2;"
|
style="--padding: 2; z-index: 2;"
|
||||||
>
|
>
|
||||||
<button
|
<div
|
||||||
aria-label="Open"
|
class="radix-menu-item"
|
||||||
class="dropdown-menu-item dropdown-menu-item-base"
|
data-orientation="vertical"
|
||||||
data-testid="load-button"
|
data-radix-collection-item=""
|
||||||
title="Open"
|
role="menuitem"
|
||||||
type="button"
|
tabindex="-1"
|
||||||
>
|
>
|
||||||
<div
|
<button
|
||||||
class="dropdown-menu-item__icon"
|
aria-label="Open"
|
||||||
|
class="dropdown-menu-item dropdown-menu-item-base"
|
||||||
|
data-testid="load-button"
|
||||||
|
title="Open"
|
||||||
|
type="button"
|
||||||
>
|
>
|
||||||
<svg
|
<div
|
||||||
aria-hidden="true"
|
class="dropdown-menu-item__icon"
|
||||||
class=""
|
|
||||||
fill="none"
|
|
||||||
focusable="false"
|
|
||||||
role="img"
|
|
||||||
stroke="currentColor"
|
|
||||||
stroke-linecap="round"
|
|
||||||
stroke-linejoin="round"
|
|
||||||
viewBox="0 0 20 20"
|
|
||||||
>
|
>
|
||||||
<path
|
<svg
|
||||||
d="m9.257 6.351.183.183H15.819c.34 0 .727.182 1.051.506.323.323.505.708.505 1.05v5.819c0 .316-.183.7-.52 1.035-.337.338-.723.522-1.037.522H4.182c-.352 0-.74-.181-1.058-.5-.318-.318-.499-.705-.499-1.057V5.182c0-.351.181-.736.5-1.054.32-.321.71-.503 1.057-.503H6.53l2.726 2.726Z"
|
aria-hidden="true"
|
||||||
stroke-width="1.25"
|
class=""
|
||||||
/>
|
fill="none"
|
||||||
</svg>
|
focusable="false"
|
||||||
</div>
|
role="img"
|
||||||
<div
|
stroke="currentColor"
|
||||||
class="dropdown-menu-item__text"
|
stroke-linecap="round"
|
||||||
>
|
stroke-linejoin="round"
|
||||||
Open
|
viewBox="0 0 20 20"
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
class="dropdown-menu-item__shortcut"
|
|
||||||
>
|
|
||||||
Ctrl+O
|
|
||||||
</div>
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
aria-label="Save to..."
|
|
||||||
class="dropdown-menu-item dropdown-menu-item-base"
|
|
||||||
data-testid="json-export-button"
|
|
||||||
title="Save to..."
|
|
||||||
type="button"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
class="dropdown-menu-item__icon"
|
|
||||||
>
|
|
||||||
<svg
|
|
||||||
aria-hidden="true"
|
|
||||||
class=""
|
|
||||||
fill="none"
|
|
||||||
focusable="false"
|
|
||||||
role="img"
|
|
||||||
stroke="currentColor"
|
|
||||||
stroke-linecap="round"
|
|
||||||
stroke-linejoin="round"
|
|
||||||
viewBox="0 0 20 20"
|
|
||||||
>
|
|
||||||
<path
|
|
||||||
d="M3.333 14.167v1.666c0 .92.747 1.667 1.667 1.667h10c.92 0 1.667-.746 1.667-1.667v-1.666M5.833 9.167 10 13.333l4.167-4.166M10 3.333v10"
|
|
||||||
stroke-width="1.25"
|
|
||||||
/>
|
|
||||||
</svg>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
class="dropdown-menu-item__text"
|
|
||||||
>
|
|
||||||
Save to...
|
|
||||||
</div>
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
aria-label="Export image..."
|
|
||||||
class="dropdown-menu-item dropdown-menu-item-base"
|
|
||||||
data-testid="image-export-button"
|
|
||||||
title="Export image..."
|
|
||||||
type="button"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
class="dropdown-menu-item__icon"
|
|
||||||
>
|
|
||||||
<svg
|
|
||||||
aria-hidden="true"
|
|
||||||
class=""
|
|
||||||
fill="none"
|
|
||||||
focusable="false"
|
|
||||||
role="img"
|
|
||||||
stroke="currentColor"
|
|
||||||
stroke-linecap="round"
|
|
||||||
stroke-linejoin="round"
|
|
||||||
stroke-width="2"
|
|
||||||
viewBox="0 0 24 24"
|
|
||||||
>
|
|
||||||
<g
|
|
||||||
stroke-width="1.25"
|
|
||||||
>
|
>
|
||||||
<path
|
<path
|
||||||
d="M0 0h24v24H0z"
|
d="m9.257 6.351.183.183H15.819c.34 0 .727.182 1.051.506.323.323.505.708.505 1.05v5.819c0 .316-.183.7-.52 1.035-.337.338-.723.522-1.037.522H4.182c-.352 0-.74-.181-1.058-.5-.318-.318-.499-.705-.499-1.057V5.182c0-.351.181-.736.5-1.054.32-.321.71-.503 1.057-.503H6.53l2.726 2.726Z"
|
||||||
fill="none"
|
stroke-width="1.25"
|
||||||
stroke="none"
|
|
||||||
/>
|
/>
|
||||||
<path
|
</svg>
|
||||||
d="M15 8h.01"
|
</div>
|
||||||
/>
|
<div
|
||||||
<path
|
class="dropdown-menu-item__text"
|
||||||
d="M12 20h-5a3 3 0 0 1 -3 -3v-10a3 3 0 0 1 3 -3h10a3 3 0 0 1 3 3v5"
|
|
||||||
/>
|
|
||||||
<path
|
|
||||||
d="M4 15l4 -4c.928 -.893 2.072 -.893 3 0l4 4"
|
|
||||||
/>
|
|
||||||
<path
|
|
||||||
d="M14 14l1 -1c.617 -.593 1.328 -.793 2.009 -.598"
|
|
||||||
/>
|
|
||||||
<path
|
|
||||||
d="M19 16v6"
|
|
||||||
/>
|
|
||||||
<path
|
|
||||||
d="M22 19l-3 3l-3 -3"
|
|
||||||
/>
|
|
||||||
</g>
|
|
||||||
</svg>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
class="dropdown-menu-item__text"
|
|
||||||
>
|
|
||||||
Export image...
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
class="dropdown-menu-item__shortcut"
|
|
||||||
>
|
|
||||||
Ctrl+Shift+E
|
|
||||||
</div>
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
aria-label="Help"
|
|
||||||
class="dropdown-menu-item dropdown-menu-item-base"
|
|
||||||
data-testid="help-menu-item"
|
|
||||||
title="Help"
|
|
||||||
type="button"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
class="dropdown-menu-item__icon"
|
|
||||||
>
|
|
||||||
<svg
|
|
||||||
aria-hidden="true"
|
|
||||||
class=""
|
|
||||||
fill="none"
|
|
||||||
focusable="false"
|
|
||||||
role="img"
|
|
||||||
stroke="currentColor"
|
|
||||||
stroke-linecap="round"
|
|
||||||
stroke-linejoin="round"
|
|
||||||
stroke-width="2"
|
|
||||||
viewBox="0 0 24 24"
|
|
||||||
>
|
>
|
||||||
<g
|
Open
|
||||||
stroke-width="1.5"
|
</div>
|
||||||
|
<div
|
||||||
|
class="dropdown-menu-item__shortcut"
|
||||||
|
>
|
||||||
|
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"
|
||||||
|
data-testid="json-export-button"
|
||||||
|
title="Save to..."
|
||||||
|
type="button"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="dropdown-menu-item__icon"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
aria-hidden="true"
|
||||||
|
class=""
|
||||||
|
fill="none"
|
||||||
|
focusable="false"
|
||||||
|
role="img"
|
||||||
|
stroke="currentColor"
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-linejoin="round"
|
||||||
|
viewBox="0 0 20 20"
|
||||||
>
|
>
|
||||||
<path
|
<path
|
||||||
d="M0 0h24v24H0z"
|
d="M3.333 14.167v1.666c0 .92.747 1.667 1.667 1.667h10c.92 0 1.667-.746 1.667-1.667v-1.666M5.833 9.167 10 13.333l4.167-4.166M10 3.333v10"
|
||||||
fill="none"
|
stroke-width="1.25"
|
||||||
stroke="none"
|
|
||||||
/>
|
/>
|
||||||
<circle
|
</svg>
|
||||||
cx="12"
|
</div>
|
||||||
cy="12"
|
<div
|
||||||
r="9"
|
class="dropdown-menu-item__text"
|
||||||
/>
|
|
||||||
<line
|
|
||||||
x1="12"
|
|
||||||
x2="12"
|
|
||||||
y1="17"
|
|
||||||
y2="17.01"
|
|
||||||
/>
|
|
||||||
<path
|
|
||||||
d="M12 13.5a1.5 1.5 0 0 1 1 -1.5a2.6 2.6 0 1 0 -3 -4"
|
|
||||||
/>
|
|
||||||
</g>
|
|
||||||
</svg>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
class="dropdown-menu-item__text"
|
|
||||||
>
|
|
||||||
Help
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
class="dropdown-menu-item__shortcut"
|
|
||||||
>
|
|
||||||
?
|
|
||||||
</div>
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
aria-label="Reset the canvas"
|
|
||||||
class="dropdown-menu-item dropdown-menu-item-base"
|
|
||||||
data-testid="clear-canvas-button"
|
|
||||||
title="Reset the canvas"
|
|
||||||
type="button"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
class="dropdown-menu-item__icon"
|
|
||||||
>
|
|
||||||
<svg
|
|
||||||
aria-hidden="true"
|
|
||||||
class=""
|
|
||||||
fill="none"
|
|
||||||
focusable="false"
|
|
||||||
role="img"
|
|
||||||
stroke="currentColor"
|
|
||||||
stroke-linecap="round"
|
|
||||||
stroke-linejoin="round"
|
|
||||||
viewBox="0 0 20 20"
|
|
||||||
>
|
>
|
||||||
<path
|
Save to...
|
||||||
d="M3.333 5.833h13.334M8.333 9.167v5M11.667 9.167v5M4.167 5.833l.833 10c0 .92.746 1.667 1.667 1.667h6.666c.92 0 1.667-.746 1.667-1.667l.833-10M7.5 5.833v-2.5c0-.46.373-.833.833-.833h3.334c.46 0 .833.373.833.833v2.5"
|
</div>
|
||||||
stroke-width="1.25"
|
</button>
|
||||||
/>
|
</div>
|
||||||
</svg>
|
<div
|
||||||
</div>
|
class="radix-menu-item"
|
||||||
<div
|
data-orientation="vertical"
|
||||||
class="dropdown-menu-item__text"
|
data-radix-collection-item=""
|
||||||
|
role="menuitem"
|
||||||
|
tabindex="-1"
|
||||||
|
>
|
||||||
|
<button
|
||||||
|
aria-label="Export image..."
|
||||||
|
class="dropdown-menu-item dropdown-menu-item-base"
|
||||||
|
data-testid="image-export-button"
|
||||||
|
title="Export image..."
|
||||||
|
type="button"
|
||||||
>
|
>
|
||||||
Reset the canvas
|
<div
|
||||||
</div>
|
class="dropdown-menu-item__icon"
|
||||||
</button>
|
>
|
||||||
|
<svg
|
||||||
|
aria-hidden="true"
|
||||||
|
class=""
|
||||||
|
fill="none"
|
||||||
|
focusable="false"
|
||||||
|
role="img"
|
||||||
|
stroke="currentColor"
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-linejoin="round"
|
||||||
|
stroke-width="2"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
>
|
||||||
|
<g
|
||||||
|
stroke-width="1.25"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M0 0h24v24H0z"
|
||||||
|
fill="none"
|
||||||
|
stroke="none"
|
||||||
|
/>
|
||||||
|
<path
|
||||||
|
d="M15 8h.01"
|
||||||
|
/>
|
||||||
|
<path
|
||||||
|
d="M12 20h-5a3 3 0 0 1 -3 -3v-10a3 3 0 0 1 3 -3h10a3 3 0 0 1 3 3v5"
|
||||||
|
/>
|
||||||
|
<path
|
||||||
|
d="M4 15l4 -4c.928 -.893 2.072 -.893 3 0l4 4"
|
||||||
|
/>
|
||||||
|
<path
|
||||||
|
d="M14 14l1 -1c.617 -.593 1.328 -.793 2.009 -.598"
|
||||||
|
/>
|
||||||
|
<path
|
||||||
|
d="M19 16v6"
|
||||||
|
/>
|
||||||
|
<path
|
||||||
|
d="M22 19l-3 3l-3 -3"
|
||||||
|
/>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="dropdown-menu-item__text"
|
||||||
|
>
|
||||||
|
Export image...
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="dropdown-menu-item__shortcut"
|
||||||
|
>
|
||||||
|
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"
|
||||||
|
data-testid="help-menu-item"
|
||||||
|
title="Help"
|
||||||
|
type="button"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="dropdown-menu-item__icon"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
aria-hidden="true"
|
||||||
|
class=""
|
||||||
|
fill="none"
|
||||||
|
focusable="false"
|
||||||
|
role="img"
|
||||||
|
stroke="currentColor"
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-linejoin="round"
|
||||||
|
stroke-width="2"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
>
|
||||||
|
<g
|
||||||
|
stroke-width="1.5"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M0 0h24v24H0z"
|
||||||
|
fill="none"
|
||||||
|
stroke="none"
|
||||||
|
/>
|
||||||
|
<circle
|
||||||
|
cx="12"
|
||||||
|
cy="12"
|
||||||
|
r="9"
|
||||||
|
/>
|
||||||
|
<line
|
||||||
|
x1="12"
|
||||||
|
x2="12"
|
||||||
|
y1="17"
|
||||||
|
y2="17.01"
|
||||||
|
/>
|
||||||
|
<path
|
||||||
|
d="M12 13.5a1.5 1.5 0 0 1 1 -1.5a2.6 2.6 0 1 0 -3 -4"
|
||||||
|
/>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="dropdown-menu-item__text"
|
||||||
|
>
|
||||||
|
Help
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="dropdown-menu-item__shortcut"
|
||||||
|
>
|
||||||
|
?
|
||||||
|
</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"
|
||||||
|
data-testid="clear-canvas-button"
|
||||||
|
title="Reset the canvas"
|
||||||
|
type="button"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="dropdown-menu-item__icon"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
aria-hidden="true"
|
||||||
|
class=""
|
||||||
|
fill="none"
|
||||||
|
focusable="false"
|
||||||
|
role="img"
|
||||||
|
stroke="currentColor"
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-linejoin="round"
|
||||||
|
viewBox="0 0 20 20"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M3.333 5.833h13.334M8.333 9.167v5M11.667 9.167v5M4.167 5.833l.833 10c0 .92.746 1.667 1.667 1.667h6.666c.92 0 1.667-.746 1.667-1.667l.833-10M7.5 5.833v-2.5c0-.46.373-.833.833-.833h3.334c.46 0 .833.373.833.833v2.5"
|
||||||
|
stroke-width="1.25"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="dropdown-menu-item__text"
|
||||||
|
>
|
||||||
|
Reset the canvas
|
||||||
|
</div>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
<div
|
<div
|
||||||
style="height: 1px; margin: .5rem 0px;"
|
style="height: 1px; margin: .5rem 0px;"
|
||||||
/>
|
/>
|
||||||
@ -473,45 +553,53 @@ exports[`<Excalidraw/> Test UIOptions prop Test canvasActions should render menu
|
|||||||
<div
|
<div
|
||||||
style="height: 1px; margin: .5rem 0px;"
|
style="height: 1px; margin: .5rem 0px;"
|
||||||
/>
|
/>
|
||||||
<button
|
<div
|
||||||
aria-label="Dark mode"
|
class="radix-menu-item"
|
||||||
class="dropdown-menu-item dropdown-menu-item-base"
|
data-orientation="vertical"
|
||||||
data-testid="toggle-dark-mode"
|
data-radix-collection-item=""
|
||||||
title="Dark mode"
|
role="menuitem"
|
||||||
type="button"
|
tabindex="-1"
|
||||||
>
|
>
|
||||||
<div
|
<button
|
||||||
class="dropdown-menu-item__icon"
|
aria-label="Dark mode"
|
||||||
|
class="dropdown-menu-item dropdown-menu-item-base"
|
||||||
|
data-testid="toggle-dark-mode"
|
||||||
|
title="Dark mode"
|
||||||
|
type="button"
|
||||||
>
|
>
|
||||||
<svg
|
<div
|
||||||
aria-hidden="true"
|
class="dropdown-menu-item__icon"
|
||||||
class=""
|
|
||||||
fill="none"
|
|
||||||
focusable="false"
|
|
||||||
role="img"
|
|
||||||
stroke="currentColor"
|
|
||||||
stroke-linecap="round"
|
|
||||||
stroke-linejoin="round"
|
|
||||||
viewBox="0 0 20 20"
|
|
||||||
>
|
>
|
||||||
<path
|
<svg
|
||||||
clip-rule="evenodd"
|
aria-hidden="true"
|
||||||
d="M10 2.5h.328a6.25 6.25 0 0 0 6.6 10.372A7.5 7.5 0 1 1 10 2.493V2.5Z"
|
class=""
|
||||||
|
fill="none"
|
||||||
|
focusable="false"
|
||||||
|
role="img"
|
||||||
stroke="currentColor"
|
stroke="currentColor"
|
||||||
/>
|
stroke-linecap="round"
|
||||||
</svg>
|
stroke-linejoin="round"
|
||||||
</div>
|
viewBox="0 0 20 20"
|
||||||
<div
|
>
|
||||||
class="dropdown-menu-item__text"
|
<path
|
||||||
>
|
clip-rule="evenodd"
|
||||||
Dark mode
|
d="M10 2.5h.328a6.25 6.25 0 0 0 6.6 10.372A7.5 7.5 0 1 1 10 2.493V2.5Z"
|
||||||
</div>
|
stroke="currentColor"
|
||||||
<div
|
/>
|
||||||
class="dropdown-menu-item__shortcut"
|
</svg>
|
||||||
>
|
</div>
|
||||||
Shift+Alt+D
|
<div
|
||||||
</div>
|
class="dropdown-menu-item__text"
|
||||||
</button>
|
>
|
||||||
|
Dark mode
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="dropdown-menu-item__shortcut"
|
||||||
|
>
|
||||||
|
Shift+Alt+D
|
||||||
|
</div>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
<div
|
<div
|
||||||
style="margin-top: 0.5rem;"
|
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;"
|
style="width: 1px; height: 100%; margin: 0px auto;"
|
||||||
/>
|
/>
|
||||||
<button
|
<button
|
||||||
aria-controls="radix-:r0:"
|
aria-controls="radix-:r12:"
|
||||||
aria-expanded="false"
|
aria-expanded="false"
|
||||||
aria-haspopup="dialog"
|
aria-haspopup="dialog"
|
||||||
aria-label="Canvas background"
|
aria-label="Canvas background"
|
||||||
|
|||||||
@ -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 { Excalidraw, Footer, MainMenu } from "../../packages/excalidraw/index";
|
||||||
import { queryByText, queryByTestId } from "@testing-library/react";
|
import { queryByText, queryByTestId } from "@testing-library/react";
|
||||||
import { GRID_SIZE, THEME } from "../../constants";
|
import { GRID_SIZE, THEME } from "../../constants";
|
||||||
@ -11,7 +16,7 @@ describe("<Excalidraw/>", () => {
|
|||||||
afterEach(() => {
|
afterEach(() => {
|
||||||
const menu = document.querySelector(".dropdown-menu");
|
const menu = document.querySelector(".dropdown-menu");
|
||||||
if (menu) {
|
if (menu) {
|
||||||
toggleMenu(document.querySelector(".excalidraw")!);
|
togglePopover("Main menu");
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
@ -130,7 +135,7 @@ describe("<Excalidraw/>", () => {
|
|||||||
<Excalidraw UIOptions={undefined} />,
|
<Excalidraw UIOptions={undefined} />,
|
||||||
);
|
);
|
||||||
//open menu
|
//open menu
|
||||||
toggleMenu(container);
|
togglePopover("Main menu");
|
||||||
expect(queryByTestId(container, "dropdown-menu")).toMatchSnapshot();
|
expect(queryByTestId(container, "dropdown-menu")).toMatchSnapshot();
|
||||||
});
|
});
|
||||||
|
|
||||||
@ -139,7 +144,7 @@ describe("<Excalidraw/>", () => {
|
|||||||
<Excalidraw UIOptions={{ canvasActions: { clearCanvas: false } }} />,
|
<Excalidraw UIOptions={{ canvasActions: { clearCanvas: false } }} />,
|
||||||
);
|
);
|
||||||
//open menu
|
//open menu
|
||||||
toggleMenu(container);
|
togglePopover("Main menu");
|
||||||
expect(queryByTestId(container, "clear-canvas-button")).toBeNull();
|
expect(queryByTestId(container, "clear-canvas-button")).toBeNull();
|
||||||
});
|
});
|
||||||
|
|
||||||
@ -148,7 +153,7 @@ describe("<Excalidraw/>", () => {
|
|||||||
<Excalidraw UIOptions={{ canvasActions: { export: false } }} />,
|
<Excalidraw UIOptions={{ canvasActions: { export: false } }} />,
|
||||||
);
|
);
|
||||||
//open menu
|
//open menu
|
||||||
toggleMenu(container);
|
togglePopover("Main menu");
|
||||||
expect(queryByTestId(container, "json-export-button")).toBeNull();
|
expect(queryByTestId(container, "json-export-button")).toBeNull();
|
||||||
});
|
});
|
||||||
|
|
||||||
@ -157,7 +162,7 @@ describe("<Excalidraw/>", () => {
|
|||||||
<Excalidraw UIOptions={{ canvasActions: { saveAsImage: false } }} />,
|
<Excalidraw UIOptions={{ canvasActions: { saveAsImage: false } }} />,
|
||||||
);
|
);
|
||||||
//open menu
|
//open menu
|
||||||
toggleMenu(container);
|
togglePopover("Main menu");
|
||||||
expect(queryByTestId(container, "image-export-button")).toBeNull();
|
expect(queryByTestId(container, "image-export-button")).toBeNull();
|
||||||
});
|
});
|
||||||
|
|
||||||
@ -176,7 +181,7 @@ describe("<Excalidraw/>", () => {
|
|||||||
/>,
|
/>,
|
||||||
);
|
);
|
||||||
//open menu
|
//open menu
|
||||||
toggleMenu(container);
|
togglePopover("Main menu");
|
||||||
expect(queryByTestId(container, "save-as-button")).toBeNull();
|
expect(queryByTestId(container, "save-as-button")).toBeNull();
|
||||||
});
|
});
|
||||||
|
|
||||||
@ -187,7 +192,7 @@ describe("<Excalidraw/>", () => {
|
|||||||
/>,
|
/>,
|
||||||
);
|
);
|
||||||
//open menu
|
//open menu
|
||||||
toggleMenu(container);
|
togglePopover("Main menu");
|
||||||
expect(queryByTestId(container, "save-button")).toBeNull();
|
expect(queryByTestId(container, "save-button")).toBeNull();
|
||||||
});
|
});
|
||||||
|
|
||||||
@ -198,7 +203,7 @@ describe("<Excalidraw/>", () => {
|
|||||||
/>,
|
/>,
|
||||||
);
|
);
|
||||||
//open menu
|
//open menu
|
||||||
toggleMenu(container);
|
togglePopover("Main menu");
|
||||||
expect(queryByTestId(container, "canvas-background-picker")).toBeNull();
|
expect(queryByTestId(container, "canvas-background-picker")).toBeNull();
|
||||||
});
|
});
|
||||||
|
|
||||||
@ -207,7 +212,7 @@ describe("<Excalidraw/>", () => {
|
|||||||
<Excalidraw UIOptions={{ canvasActions: { toggleTheme: false } }} />,
|
<Excalidraw UIOptions={{ canvasActions: { toggleTheme: false } }} />,
|
||||||
);
|
);
|
||||||
//open menu
|
//open menu
|
||||||
toggleMenu(container);
|
togglePopover("Main menu");
|
||||||
expect(queryByTestId(container, "toggle-dark-mode")).toBeNull();
|
expect(queryByTestId(container, "toggle-dark-mode")).toBeNull();
|
||||||
});
|
});
|
||||||
|
|
||||||
@ -228,8 +233,8 @@ describe("<Excalidraw/>", () => {
|
|||||||
</Excalidraw>,
|
</Excalidraw>,
|
||||||
);
|
);
|
||||||
//open menu
|
//open menu
|
||||||
toggleMenu(container);
|
|
||||||
// load button shouldn't be rendered since `UIActions.canvasActions.loadScene` is `false`
|
// load button shouldn't be rendered since `UIActions.canvasActions.loadScene` is `false`
|
||||||
|
togglePopover("Main menu");
|
||||||
expect(queryByTestId(container, "load-button")).toBeNull();
|
expect(queryByTestId(container, "load-button")).toBeNull();
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
@ -240,7 +245,7 @@ describe("<Excalidraw/>", () => {
|
|||||||
const { container } = await render(<Excalidraw />);
|
const { container } = await render(<Excalidraw />);
|
||||||
expect(h.state.theme).toBe(THEME.LIGHT);
|
expect(h.state.theme).toBe(THEME.LIGHT);
|
||||||
//open menu
|
//open menu
|
||||||
toggleMenu(container);
|
togglePopover("Main menu");
|
||||||
const darkModeToggle = queryByTestId(container, "toggle-dark-mode");
|
const darkModeToggle = queryByTestId(container, "toggle-dark-mode");
|
||||||
expect(darkModeToggle).toBeTruthy();
|
expect(darkModeToggle).toBeTruthy();
|
||||||
});
|
});
|
||||||
@ -250,7 +255,7 @@ describe("<Excalidraw/>", () => {
|
|||||||
|
|
||||||
expect(h.state.theme).toBe(THEME.DARK);
|
expect(h.state.theme).toBe(THEME.DARK);
|
||||||
//open menu
|
//open menu
|
||||||
toggleMenu(container);
|
togglePopover("Main menu");
|
||||||
expect(queryByTestId(container, "toggle-dark-mode")).toBe(null);
|
expect(queryByTestId(container, "toggle-dark-mode")).toBe(null);
|
||||||
});
|
});
|
||||||
|
|
||||||
@ -263,7 +268,7 @@ describe("<Excalidraw/>", () => {
|
|||||||
);
|
);
|
||||||
expect(h.state.theme).toBe(THEME.DARK);
|
expect(h.state.theme).toBe(THEME.DARK);
|
||||||
//open menu
|
//open menu
|
||||||
toggleMenu(container);
|
togglePopover("Main menu");
|
||||||
const darkModeToggle = queryByTestId(container, "toggle-dark-mode");
|
const darkModeToggle = queryByTestId(container, "toggle-dark-mode");
|
||||||
expect(darkModeToggle).toBeTruthy();
|
expect(darkModeToggle).toBeTruthy();
|
||||||
});
|
});
|
||||||
@ -277,7 +282,7 @@ describe("<Excalidraw/>", () => {
|
|||||||
);
|
);
|
||||||
expect(h.state.theme).toBe(THEME.DARK);
|
expect(h.state.theme).toBe(THEME.DARK);
|
||||||
//open menu
|
//open menu
|
||||||
toggleMenu(container);
|
togglePopover("Main menu");
|
||||||
const darkModeToggle = queryByTestId(container, "toggle-dark-mode");
|
const darkModeToggle = queryByTestId(container, "toggle-dark-mode");
|
||||||
expect(darkModeToggle).toBe(null);
|
expect(darkModeToggle).toBe(null);
|
||||||
});
|
});
|
||||||
@ -287,7 +292,7 @@ describe("<Excalidraw/>", () => {
|
|||||||
it('should allow editing name when the name prop is "undefined"', async () => {
|
it('should allow editing name when the name prop is "undefined"', async () => {
|
||||||
const { container } = await render(<Excalidraw />);
|
const { container } = await render(<Excalidraw />);
|
||||||
//open menu
|
//open menu
|
||||||
toggleMenu(container);
|
togglePopover("Main menu");
|
||||||
fireEvent.click(queryByTestId(container, "image-export-button")!);
|
fireEvent.click(queryByTestId(container, "image-export-button")!);
|
||||||
const textInput: HTMLInputElement | null = document.querySelector(
|
const textInput: HTMLInputElement | null = document.querySelector(
|
||||||
".ImageExportModal .ImageExportModal__preview__filename .TextInput",
|
".ImageExportModal .ImageExportModal__preview__filename .TextInput",
|
||||||
@ -300,7 +305,7 @@ describe("<Excalidraw/>", () => {
|
|||||||
const name = "test";
|
const name = "test";
|
||||||
const { container } = await render(<Excalidraw name={name} />);
|
const { container } = await render(<Excalidraw name={name} />);
|
||||||
//open menu
|
//open menu
|
||||||
toggleMenu(container);
|
togglePopover("Main menu");
|
||||||
await fireEvent.click(queryByTestId(container, "image-export-button")!);
|
await fireEvent.click(queryByTestId(container, "image-export-button")!);
|
||||||
const textInput = document.querySelector(
|
const textInput = document.querySelector(
|
||||||
".ImageExportModal .ImageExportModal__preview__filename .TextInput",
|
".ImageExportModal .ImageExportModal__preview__filename .TextInput",
|
||||||
@ -353,7 +358,7 @@ describe("<Excalidraw/>", () => {
|
|||||||
</Excalidraw>,
|
</Excalidraw>,
|
||||||
);
|
);
|
||||||
//open menu
|
//open menu
|
||||||
toggleMenu(container);
|
togglePopover("Main menu");
|
||||||
expect(queryByTestId(container, "dropdown-menu")).toMatchSnapshot();
|
expect(queryByTestId(container, "dropdown-menu")).toMatchSnapshot();
|
||||||
});
|
});
|
||||||
|
|
||||||
@ -372,7 +377,7 @@ describe("<Excalidraw/>", () => {
|
|||||||
|
|
||||||
const { container } = await render(<CustomExcalidraw />);
|
const { container } = await render(<CustomExcalidraw />);
|
||||||
//open menu
|
//open menu
|
||||||
toggleMenu(container);
|
togglePopover("Main menu");
|
||||||
|
|
||||||
expect(h.state.theme).toBe(THEME.LIGHT);
|
expect(h.state.theme).toBe(THEME.LIGHT);
|
||||||
|
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user