marcel/excalidraw
1
0
Fork 0
mirror of https://github.com/excalidraw/excalidraw.git synced 2025-11-15 10:15:03 +01:00
Code Issues Packages Projects Releases Wiki Activity

fix: withInternalFallback leaking state in multi-instance scenarios (#6602)

Browse Source
This commit is contained in:
David Luzar
2023-05-19 15:47:01 +02:00
committed by GitHub
parent a89952e32f
commit a8f0a14610
2 changed files with 125 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

100
src/components/hoc/withInternalFallback.test.tsx Normal file
View File

@@ -0,0 +1,100 @@
import { render, queryAllByTestId } from "../../tests/test-utils";
import { Excalidraw, MainMenu } from "../../packages/excalidraw/index";
describe("Test internal component fallback rendering", () => {
it("should render only one menu per excalidraw instance (custom menu first scenario)", async () => {
const { container } = await render(
<div>
<Excalidraw>
<MainMenu>test</MainMenu>
</Excalidraw>
<Excalidraw />
</div>,
);
expect(queryAllByTestId(container, "dropdown-menu-button")?.length).toBe(2);
const excalContainers = container.querySelectorAll<HTMLDivElement>(
".excalidraw-container",
);
expect(
queryAllByTestId(excalContainers[0], "dropdown-menu-button")?.length,
).toBe(1);
expect(
queryAllByTestId(excalContainers[1], "dropdown-menu-button")?.length,
).toBe(1);
});
it("should render only one menu per excalidraw instance (default menu first scenario)", async () => {
const { container } = await render(
<div>
<Excalidraw />
<Excalidraw>
<MainMenu>test</MainMenu>
</Excalidraw>
</div>,
);
expect(queryAllByTestId(container, "dropdown-menu-button")?.length).toBe(2);
const excalContainers = container.querySelectorAll<HTMLDivElement>(
".excalidraw-container",
);
expect(
queryAllByTestId(excalContainers[0], "dropdown-menu-button")?.length,
).toBe(1);
expect(
queryAllByTestId(excalContainers[1], "dropdown-menu-button")?.length,
).toBe(1);
});
it("should render only one menu per excalidraw instance (two custom menus scenario)", async () => {
const { container } = await render(
<div>
<Excalidraw>
<MainMenu>test</MainMenu>
</Excalidraw>
<Excalidraw>
<MainMenu>test</MainMenu>
</Excalidraw>
</div>,
);
expect(queryAllByTestId(container, "dropdown-menu-button")?.length).toBe(2);
const excalContainers = container.querySelectorAll<HTMLDivElement>(
".excalidraw-container",
);
expect(
queryAllByTestId(excalContainers[0], "dropdown-menu-button")?.length,
).toBe(1);
expect(
queryAllByTestId(excalContainers[1], "dropdown-menu-button")?.length,
).toBe(1);
});
it("should render only one menu per excalidraw instance (two default menus scenario)", async () => {
const { container } = await render(
<div>
<Excalidraw />
<Excalidraw />
</div>,
);
expect(queryAllByTestId(container, "dropdown-menu-button")?.length).toBe(2);
const excalContainers = container.querySelectorAll<HTMLDivElement>(
".excalidraw-container",
);
expect(
queryAllByTestId(excalContainers[0], "dropdown-menu-button")?.length,
).toBe(1);
expect(
queryAllByTestId(excalContainers[1], "dropdown-menu-button")?.length,
).toBe(1);
});
});