mirror of
https://github.com/excalidraw/excalidraw.git
synced 2025-05-03 10:00:07 -04:00
fix: stale appState of MainMenu defaultItems rendered from Actions (#6074)
This commit is contained in:
David Luzar
GitHub
parent
9803a85381
commit
40d53d9231
26 changed files with 463 additions and 431 deletions
|
|
@ -1,5 +1,114 @@
|
|||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`<Excalidraw/> <MainMenu/> should render main menu with host menu items if passed from host 1`] = `
|
||||
<div
|
||||
class="dropdown-menu"
|
||||
data-testid="dropdown-menu"
|
||||
>
|
||||
<div
|
||||
class="Island dropdown-menu-container"
|
||||
style="--padding: 2; z-index: 1;"
|
||||
>
|
||||
<button
|
||||
class="dropdown-menu-item dropdown-menu-item-base"
|
||||
type="button"
|
||||
>
|
||||
<div
|
||||
class="dropdown-menu-item__icon"
|
||||
/>
|
||||
<div
|
||||
class="dropdown-menu-item__text"
|
||||
>
|
||||
Click me
|
||||
</div>
|
||||
</button>
|
||||
<a
|
||||
class="dropdown-menu-item dropdown-menu-item-base"
|
||||
href="blog.excalidaw.com"
|
||||
rel="noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
<div
|
||||
class="dropdown-menu-item__icon"
|
||||
/>
|
||||
<div
|
||||
class="dropdown-menu-item__text"
|
||||
>
|
||||
Excalidraw blog
|
||||
</div>
|
||||
</a>
|
||||
<div
|
||||
class="dropdown-menu-item-base dropdown-menu-item-custom"
|
||||
>
|
||||
<button
|
||||
style="height: 2rem;"
|
||||
>
|
||||
|
||||
custom menu item
|
||||
</button>
|
||||
</div>
|
||||
<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>
|
||||
`;
|
||||
|
||||
exports[`<Excalidraw/> Test UIOptions prop Test canvasActions should render menu with default items when "UIOPtions" is "undefined" 1`] = `
|
||||
<div
|
||||
class="dropdown-menu"
|
||||
|
|
@ -454,112 +563,3 @@ exports[`<Excalidraw/> Test UIOptions prop Test canvasActions should render menu
|
|||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`<Excalidraw/> should render main menu with host menu items if passed from host 1`] = `
|
||||
<div
|
||||
class="dropdown-menu"
|
||||
data-testid="dropdown-menu"
|
||||
>
|
||||
<div
|
||||
class="Island dropdown-menu-container"
|
||||
style="--padding: 2; z-index: 1;"
|
||||
>
|
||||
<button
|
||||
class="dropdown-menu-item dropdown-menu-item-base"
|
||||
type="button"
|
||||
>
|
||||
<div
|
||||
class="dropdown-menu-item__icon"
|
||||
/>
|
||||
<div
|
||||
class="dropdown-menu-item__text"
|
||||
>
|
||||
Click me
|
||||
</div>
|
||||
</button>
|
||||
<a
|
||||
class="dropdown-menu-item dropdown-menu-item-base"
|
||||
href="blog.excalidaw.com"
|
||||
rel="noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
<div
|
||||
class="dropdown-menu-item__icon"
|
||||
/>
|
||||
<div
|
||||
class="dropdown-menu-item__text"
|
||||
>
|
||||
Excalidraw blog
|
||||
</div>
|
||||
</a>
|
||||
<div
|
||||
class="dropdown-menu-item-base dropdown-menu-item-custom"
|
||||
>
|
||||
<button
|
||||
style="height: 2rem;"
|
||||
>
|
||||
|
||||
custom menu item
|
||||
</button>
|
||||
</div>
|
||||
<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>
|
||||
`;
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@ import { Excalidraw, Footer, MainMenu } from "../../packages/excalidraw/index";
|
|||
import { queryByText, queryByTestId } from "@testing-library/react";
|
||||
import { GRID_SIZE, THEME } from "../../constants";
|
||||
import { t } from "../../i18n";
|
||||
import { useMemo } from "react";
|
||||
|
||||
const { h } = window;
|
||||
|
||||
|
|
@ -13,6 +14,7 @@ describe("<Excalidraw/>", () => {
|
|||
toggleMenu(document.querySelector(".excalidraw")!);
|
||||
}
|
||||
});
|
||||
|
||||
describe("Test zenModeEnabled prop", () => {
|
||||
it('should show exit zen mode button when zen mode is set and zen mode option in context menu when zenModeEnabled is "undefined"', async () => {
|
||||
const { container } = await render(<Excalidraw />);
|
||||
|
|
@ -121,34 +123,6 @@ describe("<Excalidraw/>", () => {
|
|||
});
|
||||
});
|
||||
|
||||
it("should render main menu with host menu items if passed from host", async () => {
|
||||
const { container } = await render(
|
||||
<Excalidraw UIOptions={undefined}>
|
||||
<MainMenu>
|
||||
<MainMenu.Item onSelect={() => window.alert("Clicked")}>
|
||||
Click me
|
||||
</MainMenu.Item>
|
||||
<MainMenu.ItemLink href="blog.excalidaw.com">
|
||||
Excalidraw blog
|
||||
</MainMenu.ItemLink>
|
||||
<MainMenu.ItemCustom>
|
||||
<button
|
||||
style={{ height: "2rem" }}
|
||||
onClick={() => window.alert("custom menu item")}
|
||||
>
|
||||
{" "}
|
||||
custom menu item
|
||||
</button>
|
||||
</MainMenu.ItemCustom>
|
||||
<MainMenu.DefaultItems.Help />
|
||||
</MainMenu>
|
||||
</Excalidraw>,
|
||||
);
|
||||
//open menu
|
||||
toggleMenu(container);
|
||||
expect(queryByTestId(container, "dropdown-menu")).toMatchSnapshot();
|
||||
});
|
||||
|
||||
describe("Test UIOptions prop", () => {
|
||||
describe("Test canvasActions", () => {
|
||||
it('should render menu with default items when "UIOPtions" is "undefined"', async () => {
|
||||
|
|
@ -306,7 +280,7 @@ describe("<Excalidraw/>", () => {
|
|||
//open menu
|
||||
toggleMenu(container);
|
||||
const darkModeToggle = queryByTestId(container, "toggle-dark-mode");
|
||||
expect(darkModeToggle).toBeFalsy();
|
||||
expect(darkModeToggle).toBe(null);
|
||||
});
|
||||
});
|
||||
|
||||
|
|
@ -336,6 +310,7 @@ describe("<Excalidraw/>", () => {
|
|||
expect(textInput?.nodeName).toBe("SPAN");
|
||||
});
|
||||
});
|
||||
|
||||
describe("Test autoFocus prop", () => {
|
||||
it("should not focus when autoFocus is false", async () => {
|
||||
const { container } = await render(<Excalidraw />);
|
||||
|
|
@ -353,4 +328,64 @@ describe("<Excalidraw/>", () => {
|
|||
).toBe(true);
|
||||
});
|
||||
});
|
||||
|
||||
describe("<MainMenu/>", () => {
|
||||
it("should render main menu with host menu items if passed from host", async () => {
|
||||
const { container } = await render(
|
||||
<Excalidraw>
|
||||
<MainMenu>
|
||||
<MainMenu.Item onSelect={() => window.alert("Clicked")}>
|
||||
Click me
|
||||
</MainMenu.Item>
|
||||
<MainMenu.ItemLink href="blog.excalidaw.com">
|
||||
Excalidraw blog
|
||||
</MainMenu.ItemLink>
|
||||
<MainMenu.ItemCustom>
|
||||
<button
|
||||
style={{ height: "2rem" }}
|
||||
onClick={() => window.alert("custom menu item")}
|
||||
>
|
||||
{" "}
|
||||
custom menu item
|
||||
</button>
|
||||
</MainMenu.ItemCustom>
|
||||
<MainMenu.DefaultItems.Help />
|
||||
</MainMenu>
|
||||
</Excalidraw>,
|
||||
);
|
||||
//open menu
|
||||
toggleMenu(container);
|
||||
expect(queryByTestId(container, "dropdown-menu")).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it("should update themeToggle text even if MainMenu memoized", async () => {
|
||||
const CustomExcalidraw = () => {
|
||||
const customMenu = useMemo(() => {
|
||||
return (
|
||||
<MainMenu>
|
||||
<MainMenu.DefaultItems.ToggleTheme />
|
||||
</MainMenu>
|
||||
);
|
||||
}, []);
|
||||
|
||||
return <Excalidraw>{customMenu}</Excalidraw>;
|
||||
};
|
||||
|
||||
const { container } = await render(<CustomExcalidraw />);
|
||||
//open menu
|
||||
toggleMenu(container);
|
||||
|
||||
expect(h.state.theme).toBe(THEME.LIGHT);
|
||||
|
||||
expect(
|
||||
queryByTestId(container, "toggle-dark-mode")?.textContent,
|
||||
).toContain(t("buttons.darkMode"));
|
||||
|
||||
fireEvent.click(queryByTestId(container, "toggle-dark-mode")!);
|
||||
|
||||
expect(
|
||||
queryByTestId(container, "toggle-dark-mode")?.textContent,
|
||||
).toContain(t("buttons.lightMode"));
|
||||
});
|
||||
});
|
||||
});
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue