mirror of
https://github.com/excalidraw/excalidraw.git
synced 2025-05-03 10:00:07 -04:00
feat: Support customising canvas actions 🎉 (#3364)
* feat: Support hiding save, save as, clear & export * Remove canvasActions from state & minor changes * Rename prop to UIOptions & pass default value * Make requested changes * better type checking so that optional check not needed at every point * remove optional checks * Add few tests * Add describe block for canvasActions & use snapshot tests * Add support for hiding canvas background picker * Take snapshot of canvasActions instead of the whole app * Add support for hiding dark mode toggle * Update README.md * Rename table heading * Update changelog * Make requested changes * Update test name * tweaks Co-authored-by: Aakansha Doshi <aakansha1216@gmail.com>
This commit is contained in:
parent
c54a099010
commit
233576628c
12 changed files with 637 additions and 15 deletions
|
@ -130,4 +130,86 @@ describe("<Excalidraw/>", () => {
|
|||
expect(textInput?.nodeName).toBe("SPAN");
|
||||
});
|
||||
});
|
||||
|
||||
describe("Test UIOptions prop", () => {
|
||||
it('should not hide any UI element when the UIOptions prop is "undefined"', async () => {
|
||||
await render(<Excalidraw />);
|
||||
|
||||
const canvasActions = document.querySelector(
|
||||
'section[aria-labelledby="canvasActions-title"]',
|
||||
);
|
||||
|
||||
expect(canvasActions).toMatchSnapshot();
|
||||
});
|
||||
|
||||
describe("Test canvasActions", () => {
|
||||
it('should not hide any UI element when canvasActions is "undefined"', async () => {
|
||||
await render(<Excalidraw UIOptions={{}} />);
|
||||
|
||||
const canvasActions = document.querySelector(
|
||||
'section[aria-labelledby="canvasActions-title"]',
|
||||
);
|
||||
|
||||
expect(canvasActions).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it("should hide clear canvas button when clearCanvas is false", async () => {
|
||||
const { container } = await render(
|
||||
<Excalidraw UIOptions={{ canvasActions: { clearCanvas: false } }} />,
|
||||
);
|
||||
|
||||
expect(queryByTestId(container, "clear-canvas-button")).toBeNull();
|
||||
});
|
||||
|
||||
it("should hide export button when export is false", async () => {
|
||||
const { container } = await render(
|
||||
<Excalidraw UIOptions={{ canvasActions: { export: false } }} />,
|
||||
);
|
||||
|
||||
expect(queryByTestId(container, "export-button")).toBeNull();
|
||||
});
|
||||
|
||||
it("should hide load button when loadScene is false", async () => {
|
||||
const { container } = await render(
|
||||
<Excalidraw UIOptions={{ canvasActions: { loadScene: false } }} />,
|
||||
);
|
||||
|
||||
expect(queryByTestId(container, "load-button")).toBeNull();
|
||||
});
|
||||
|
||||
it("should hide save as button when saveAsScene is false", async () => {
|
||||
const { container } = await render(
|
||||
<Excalidraw UIOptions={{ canvasActions: { saveAsScene: false } }} />,
|
||||
);
|
||||
|
||||
expect(queryByTestId(container, "save-as-button")).toBeNull();
|
||||
});
|
||||
|
||||
it("should hide save button when saveScene is false", async () => {
|
||||
const { container } = await render(
|
||||
<Excalidraw UIOptions={{ canvasActions: { saveScene: false } }} />,
|
||||
);
|
||||
|
||||
expect(queryByTestId(container, "save-button")).toBeNull();
|
||||
});
|
||||
|
||||
it("should hide the canvas background picker when changeViewBackgroundColor is false", async () => {
|
||||
const { container } = await render(
|
||||
<Excalidraw
|
||||
UIOptions={{ canvasActions: { changeViewBackgroundColor: false } }}
|
||||
/>,
|
||||
);
|
||||
|
||||
expect(queryByTestId(container, "canvas-background-picker")).toBeNull();
|
||||
});
|
||||
|
||||
it("should hide the theme toggle when theme is false", async () => {
|
||||
const { container } = await render(
|
||||
<Excalidraw UIOptions={{ canvasActions: { theme: false } }} />,
|
||||
);
|
||||
|
||||
expect(queryByTestId(container, "toggle-dark-mode")).toBeNull();
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue