diff --git a/src/components/LayerUI.tsx b/src/components/LayerUI.tsx index 161512001..b7d765a8a 100644 --- a/src/components/LayerUI.tsx +++ b/src/components/LayerUI.tsx @@ -409,6 +409,7 @@ const LayerUI = ({ renderCustomStats={renderCustomStats} renderSidebars={renderSidebars} device={device} + renderWelcomeScreen={renderWelcomeScreen} /> )} diff --git a/src/components/MobileMenu.tsx b/src/components/MobileMenu.tsx index 42a5bda40..75e08867c 100644 --- a/src/components/MobileMenu.tsx +++ b/src/components/MobileMenu.tsx @@ -41,6 +41,7 @@ type MobileMenuProps = { renderCustomStats?: ExcalidrawProps["renderCustomStats"]; renderSidebars: () => JSX.Element | null; device: Device; + renderWelcomeScreen: boolean; }; export const MobileMenu = ({ @@ -57,12 +58,13 @@ export const MobileMenu = ({ renderCustomStats, renderSidebars, device, + renderWelcomeScreen, }: MobileMenuProps) => { const { welcomeScreenCenterTunnel, mainMenuTunnel } = useTunnels(); const renderToolbar = () => { return ( - + {renderWelcomeScreen && }
{(heading: React.ReactNode) => ( diff --git a/src/tests/MobileMenu.test.tsx b/src/tests/MobileMenu.test.tsx new file mode 100644 index 000000000..41d5d0169 --- /dev/null +++ b/src/tests/MobileMenu.test.tsx @@ -0,0 +1,45 @@ +import ExcalidrawApp from "../excalidraw-app"; +import { + mockBoundingClientRect, + render, + restoreOriginalGetBoundingClientRect, +} from "./test-utils"; + +import { UI } from "./helpers/ui"; + +describe("Test MobileMenu", () => { + const { h } = window; + const dimensions = { height: 400, width: 800 }; + + beforeEach(async () => { + await render(); + //@ts-ignore + h.app.refreshDeviceState(h.app.excalidrawContainerRef.current!); + }); + + beforeAll(() => { + mockBoundingClientRect(dimensions); + }); + + afterAll(() => { + restoreOriginalGetBoundingClientRect(); + }); + + it("should set device correctly", () => { + expect(h.app.device).toMatchInlineSnapshot(` + Object { + "canDeviceFitSidebar": false, + "isMobile": true, + "isSmScreen": false, + "isTouchScreen": false, + } + `); + }); + + it("should initialize with welcome screen and hide once user interacts", async () => { + expect(document.querySelector(".welcome-screen-center")).toMatchSnapshot(); + + UI.clickTool("rectangle"); + expect(document.querySelector(".welcome-screen-center")).toBeNull(); + }); +}); diff --git a/src/tests/__snapshots__/MobileMenu.test.tsx.snap b/src/tests/__snapshots__/MobileMenu.test.tsx.snap new file mode 100644 index 000000000..f3e55fd99 --- /dev/null +++ b/src/tests/__snapshots__/MobileMenu.test.tsx.snap @@ -0,0 +1,240 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Test MobileMenu should initialize with welcome screen and hide once user interacts 1`] = ` +
+ +
+ All your data is saved locally in your browser. +
+
+ + + + +
+ +
+
+ Try Excalidraw Plus! +
+ +
+
+`;