smig/excalidraw
1
0
Fork 0
mirror of https://github.com/excalidraw/excalidraw.git synced 2025-05-03 10:00:07 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

fix: stale appState of MainMenu defaultItems rendered from Actions (#6074)

Browse source
This commit is contained in:
David Luzar 2023-01-06 14:32:55 +01:00 • committed by GitHub
parent 9803a85381
commit 40d53d9231
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
26 changed files with 463 additions and 431 deletions
Download patch file Download diff file Expand all files Collapse all files

93
src/tests/packages/excalidraw.test.tsx
View file

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