fix: excalidrawAPI.toggleSidebar not switching between tabs correctly (#7821)

This commit is contained in:
David Luzar
2024-03-28 14:52:23 +01:00
committed by GitHub
parent 7949aa1f1c
commit 65bc500598
3 changed files with 97 additions and 5 deletions

View File

@@ -85,7 +85,7 @@ describe("Sidebar", () => {
});
});
it("should toggle sidebar using props.toggleMenu()", async () => {
it("should toggle sidebar using excalidrawAPI.toggleSidebar()", async () => {
const { container } = await render(
<Excalidraw>
<Sidebar name="customSidebar">
@@ -158,6 +158,20 @@ describe("Sidebar", () => {
const sidebars = container.querySelectorAll(".sidebar");
expect(sidebars.length).toBe(1);
});
// closing sidebar using `{ name: null }`
// -------------------------------------------------------------------------
expect(window.h.app.toggleSidebar({ name: "customSidebar" })).toBe(true);
await waitFor(() => {
const node = container.querySelector("#test-sidebar-content");
expect(node).not.toBe(null);
});
expect(window.h.app.toggleSidebar({ name: null })).toBe(false);
await waitFor(() => {
const node = container.querySelector("#test-sidebar-content");
expect(node).toBe(null);
});
});
});
@@ -329,4 +343,70 @@ describe("Sidebar", () => {
);
});
});
describe("Sidebar.tab", () => {
it("should toggle sidebars tabs correctly", async () => {
const { container } = await render(
<Excalidraw>
<Sidebar name="custom" docked>
<Sidebar.Tabs>
<Sidebar.Tab tab="library">Library</Sidebar.Tab>
<Sidebar.Tab tab="comments">Comments</Sidebar.Tab>
</Sidebar.Tabs>
</Sidebar>
</Excalidraw>,
);
await withExcalidrawDimensions(
{ width: 1920, height: 1080 },
async () => {
expect(
container.querySelector<HTMLElement>(
"[role=tabpanel][data-testid=library]",
),
).toBeNull();
// open library sidebar
expect(
window.h.app.toggleSidebar({ name: "custom", tab: "library" }),
).toBe(true);
expect(
container.querySelector<HTMLElement>(
"[role=tabpanel][data-testid=library]",
),
).not.toBeNull();
// switch to comments tab
expect(
window.h.app.toggleSidebar({ name: "custom", tab: "comments" }),
).toBe(true);
expect(
container.querySelector<HTMLElement>(
"[role=tabpanel][data-testid=comments]",
),
).not.toBeNull();
// toggle sidebar closed
expect(
window.h.app.toggleSidebar({ name: "custom", tab: "comments" }),
).toBe(false);
expect(
container.querySelector<HTMLElement>(
"[role=tabpanel][data-testid=comments]",
),
).toBeNull();
// toggle sidebar open
expect(
window.h.app.toggleSidebar({ name: "custom", tab: "comments" }),
).toBe(true);
expect(
container.querySelector<HTMLElement>(
"[role=tabpanel][data-testid=comments]",
),
).not.toBeNull();
},
);
});
});
});