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:
Arun 2021-04-04 15:57:14 +05:30 committed by GitHub
parent c54a099010
commit 233576628c
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
12 changed files with 637 additions and 15 deletions

View file

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