From 5a0334f37f354af0bd9562190f5210cfa8dd092c Mon Sep 17 00:00:00 2001 From: Aakansha Doshi Date: Thu, 2 Feb 2023 12:58:45 +0530 Subject: [PATCH] fix: hide welcome screen on mobile once user interacts (#6185) * fix: hide welcome screen on mobile once started drawing * Add specs --- src/components/LayerUI.tsx | 1 + src/components/MobileMenu.tsx | 4 +- src/tests/MobileMenu.test.tsx | 45 ++++ .../__snapshots__/MobileMenu.test.tsx.snap | 240 ++++++++++++++++++ 4 files changed, 289 insertions(+), 1 deletion(-) create mode 100644 src/tests/MobileMenu.test.tsx create mode 100644 src/tests/__snapshots__/MobileMenu.test.tsx.snap diff --git a/src/components/LayerUI.tsx b/src/components/LayerUI.tsx index 16151200..b7d765a8 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 42a5bda4..75e08867 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 00000000..41d5d016 --- /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 00000000..f3e55fd9 --- /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! +
+ +
+
+`;