From 2131b376cd81e0c67d36c693ff9e64a96b4948b5 Mon Sep 17 00:00:00 2001 From: Ryan Di Date: Mon, 27 Oct 2025 21:44:15 +1100 Subject: [PATCH] refactor and fix test --- excalidraw-app/tests/MobileMenu.test.tsx | 16 +-- packages/common/src/editorInterface.ts | 2 +- packages/element/src/transformHandles.ts | 4 +- packages/excalidraw/components/App.tsx | 73 +++++------- .../excalidraw/renderer/interactiveScene.ts | 6 +- .../regressionTests.test.tsx.snap | 104 +++++++++--------- .../excalidraw/tests/regressionTests.test.tsx | 10 +- packages/excalidraw/tests/test-utils.ts | 8 +- 8 files changed, 99 insertions(+), 124 deletions(-) diff --git a/excalidraw-app/tests/MobileMenu.test.tsx b/excalidraw-app/tests/MobileMenu.test.tsx index 59ee66177d..70f2162f9b 100644 --- a/excalidraw-app/tests/MobileMenu.test.tsx +++ b/excalidraw-app/tests/MobileMenu.test.tsx @@ -17,7 +17,6 @@ describe("Test MobileMenu", () => { beforeEach(async () => { await render(); - // @ts-ignore h.app.refreshEditorInterface(); }); @@ -26,20 +25,7 @@ describe("Test MobileMenu", () => { }); it("should set editor interface correctly", () => { - expect(h.app.editorInterface).toMatchInlineSnapshot(` - { - "canFitSidebar": false, - "desktopUIMode": "full", - "formFactor": "desktop", - "isLandscape": true, - "isTouchScreen": false, - "userAgent": { - "isMobileDevice": false, - "platform": "other", - "raw": "Mozilla/5.0 (darwin) AppleWebKit/537.36 (KHTML, like Gecko) jsdom/22.1.0", - }, - } - `); + expect(h.app.editorInterface.formFactor).toBe("phone"); }); it("should initialize with welcome screen and hide once user interacts", async () => { diff --git a/packages/common/src/editorInterface.ts b/packages/common/src/editorInterface.ts index 4e7c248fac..7cb78e54e5 100644 --- a/packages/common/src/editorInterface.ts +++ b/packages/common/src/editorInterface.ts @@ -80,7 +80,7 @@ export const isTabletBreakpoint = ( return minSide >= MQ_MIN_TABLET && maxSide <= MQ_MAX_TABLET; }; -export const isMobileOrTablet = (): boolean => { +const isMobileOrTablet = (): boolean => { const ua = navigator.userAgent || ""; const platform = navigator.platform || ""; const uaData = (navigator as any).userAgentData as diff --git a/packages/element/src/transformHandles.ts b/packages/element/src/transformHandles.ts index b686cb49f4..4a9e5f167c 100644 --- a/packages/element/src/transformHandles.ts +++ b/packages/element/src/transformHandles.ts @@ -1,6 +1,5 @@ import { DEFAULT_TRANSFORM_HANDLE_SPACING, - isMobileOrTablet, type EditorInterface, } from "@excalidraw/common"; @@ -329,6 +328,7 @@ export const getTransformHandles = ( export const hasBoundingBox = ( elements: readonly NonDeletedExcalidrawElement[], appState: InteractiveCanvasAppState, + editorInterface: EditorInterface, ) => { if (appState.selectedLinearElement?.isEditing) { return false; @@ -347,5 +347,5 @@ export const hasBoundingBox = ( // on mobile/tablet we currently don't show bbox because of resize issues // (also prob best for simplicity's sake) - return element.points.length > 2 && !isMobileOrTablet(); + return element.points.length > 2 && !editorInterface.userAgent.isMobileDevice; }; diff --git a/packages/excalidraw/components/App.tsx b/packages/excalidraw/components/App.tsx index e161b49527..96ef9fff6c 100644 --- a/packages/excalidraw/components/App.tsx +++ b/packages/excalidraw/components/App.tsx @@ -105,7 +105,6 @@ import { type StylesPanelMode, loadDesktopUIModePreference, setDesktopUIMode, - isMobileOrTablet, } from "@excalidraw/common"; import { @@ -701,19 +700,7 @@ class App extends React.Component { height: window.innerHeight, }; - const storedDesktopUIMode = loadDesktopUIModePreference(); - const userAgentDescriptor = createUserAgentDescriptor( - typeof navigator !== "undefined" ? navigator.userAgent : "", - ); - // allow host app to control formFactor and desktopUIMode via props - this.editorInterface = updateObject(this.editorInterface, { - desktopUIMode: - props.UIOptions.desktopUIMode ?? - storedDesktopUIMode ?? - this.editorInterface.desktopUIMode, - formFactor: this.getFormFactor(), - userAgent: userAgentDescriptor, - }); + this.refreshEditorInterface(); this.stylesPanelMode = deriveStylesPanelMode(this.editorInterface); this.id = nanoid(); @@ -2455,14 +2442,14 @@ class App extends React.Component { } }; - private getFormFactor = () => { - const { width, height } = this.state; - return this.props.UIOptions.formFactor ?? isTestEnv() - ? "desktop" - : getFormFactor(width, height); + private getFormFactor = (editorWidth: number, editorHeight: number) => { + return ( + this.props.UIOptions.formFactor ?? + getFormFactor(editorWidth, editorHeight) + ); }; - private refreshEditorInterface = () => { + public refreshEditorInterface = () => { const container = this.excalidrawContainerRef.current; if (!container) { return; @@ -2471,22 +2458,28 @@ class App extends React.Component { const { width: editorWidth, height: editorHeight } = container.getBoundingClientRect(); + const storedDesktopUIMode = loadDesktopUIModePreference(); + const userAgentDescriptor = createUserAgentDescriptor( + typeof navigator !== "undefined" ? navigator.userAgent : "", + ); + // allow host app to control formFactor and desktopUIMode via props const sidebarBreakpoint = this.props.UIOptions.dockedSidebarBreakpoint != null ? this.props.UIOptions.dockedSidebarBreakpoint : MQ_RIGHT_SIDEBAR_MIN_WIDTH; - const nextEditorInterface = updateObject(this.editorInterface, { - formFactor: this.getFormFactor(), + desktopUIMode: + this.props.UIOptions.desktopUIMode ?? + storedDesktopUIMode ?? + this.editorInterface.desktopUIMode, + formFactor: this.getFormFactor(editorWidth, editorHeight), + userAgent: userAgentDescriptor, canFitSidebar: editorWidth > sidebarBreakpoint, isLandscape: editorWidth > editorHeight, }); - const didChange = nextEditorInterface !== this.editorInterface; - if (didChange) { - this.editorInterface = nextEditorInterface; - this.reconcileStylesPanelMode(nextEditorInterface); - } - return didChange; + + this.editorInterface = nextEditorInterface; + this.reconcileStylesPanelMode(nextEditorInterface); }; private reconcileStylesPanelMode = (nextEditorInterface: EditorInterface) => { @@ -2585,15 +2578,6 @@ class App extends React.Component { this.focusContainer(); } - if ( - // bounding rects don't work in tests so updating - // the state on init would result in making the test enviro run - // in mobile breakpoint (0 width/height), making everything fail - !isTestEnv() - ) { - this.refreshEditorInterface(); - } - if (supportsResizeObserver && this.excalidrawContainerRef.current) { this.resizeObserver = new ResizeObserver(() => { this.refreshEditorInterface(); @@ -2810,13 +2794,6 @@ class App extends React.Component { this.setState({ showWelcomeScreen: true }); } - if ( - prevProps.UIOptions.dockedSidebarBreakpoint !== - this.props.UIOptions.dockedSidebarBreakpoint - ) { - this.refreshEditorInterface(); - } - const hasFollowedPersonLeft = prevState.userToFollow && !this.state.collaborators.has(prevState.userToFollow.socketId); @@ -5257,7 +5234,7 @@ class App extends React.Component { if ( considerBoundingBox && this.state.selectedElementIds[element.id] && - hasBoundingBox([element], this.state) + hasBoundingBox([element], this.state, this.editorInterface) ) { // if hitting the bounding box, return early // but if not, we should check for other cases as well (e.g. frame name) @@ -6165,7 +6142,8 @@ class App extends React.Component { // better way of showing them is found !( isLinearElement(selectedElements[0]) && - (isMobileOrTablet() || selectedElements[0].points.length === 2) + (this.editorInterface.userAgent.isMobileDevice || + selectedElements[0].points.length === 2) ) ) { const elementWithTransformHandleType = @@ -7290,7 +7268,8 @@ class App extends React.Component { !isElbowArrow(selectedElements[0]) && !( isLinearElement(selectedElements[0]) && - (isMobileOrTablet() || selectedElements[0].points.length === 2) + (this.editorInterface.userAgent.isMobileDevice || + selectedElements[0].points.length === 2) ) && !( this.state.selectedLinearElement && diff --git a/packages/excalidraw/renderer/interactiveScene.ts b/packages/excalidraw/renderer/interactiveScene.ts index 5c928e1998..b948aa8c38 100644 --- a/packages/excalidraw/renderer/interactiveScene.ts +++ b/packages/excalidraw/renderer/interactiveScene.ts @@ -892,7 +892,11 @@ const _renderInteractiveScene = ({ // Paint selected elements if (!appState.multiElement && !appState.selectedLinearElement?.isEditing) { - const showBoundingBox = hasBoundingBox(selectedElements, appState); + const showBoundingBox = hasBoundingBox( + selectedElements, + appState, + editorInterface, + ); const isSingleLinearElementSelected = selectedElements.length === 1 && isLinearElement(selectedElements[0]); diff --git a/packages/excalidraw/tests/__snapshots__/regressionTests.test.tsx.snap b/packages/excalidraw/tests/__snapshots__/regressionTests.test.tsx.snap index 2bacaaa735..43ca509d84 100644 --- a/packages/excalidraw/tests/__snapshots__/regressionTests.test.tsx.snap +++ b/packages/excalidraw/tests/__snapshots__/regressionTests.test.tsx.snap @@ -118,7 +118,7 @@ exports[`given element A and group of elements B and given both are selected whe "userToFollow": null, "viewBackgroundColor": "#ffffff", "viewModeEnabled": false, - "width": 1024, + "width": 1440, "zenModeEnabled": false, "zoom": { "value": 1, @@ -548,7 +548,7 @@ exports[`given element A and group of elements B and given both are selected whe "userToFollow": null, "viewBackgroundColor": "#ffffff", "viewModeEnabled": false, - "width": 1024, + "width": 1440, "zenModeEnabled": false, "zoom": { "value": 1, @@ -957,7 +957,7 @@ exports[`regression tests > Cmd/Ctrl-click exclusively select element under poin "userToFollow": null, "viewBackgroundColor": "#ffffff", "viewModeEnabled": false, - "width": 1024, + "width": 1440, "zenModeEnabled": false, "zoom": { "value": 1, @@ -1525,7 +1525,7 @@ exports[`regression tests > Drags selected element when hitting only bounding bo "userToFollow": null, "viewBackgroundColor": "#ffffff", "viewModeEnabled": false, - "width": 1024, + "width": 1440, "zenModeEnabled": false, "zoom": { "value": 1, @@ -1739,7 +1739,7 @@ exports[`regression tests > adjusts z order when grouping > [end of test] appSta "userToFollow": null, "viewBackgroundColor": "#ffffff", "viewModeEnabled": false, - "width": 1024, + "width": 1440, "zenModeEnabled": false, "zoom": { "value": 1, @@ -2122,7 +2122,7 @@ exports[`regression tests > alt-drag duplicates an element > [end of test] appSt "userToFollow": null, "viewBackgroundColor": "#ffffff", "viewModeEnabled": false, - "width": 1024, + "width": 1440, "zenModeEnabled": false, "zoom": { "value": 1, @@ -2367,7 +2367,7 @@ exports[`regression tests > arrow keys > [end of test] appState 1`] = ` "userToFollow": null, "viewBackgroundColor": "#ffffff", "viewModeEnabled": false, - "width": 1024, + "width": 1440, "zenModeEnabled": false, "zoom": { "value": 1, @@ -2551,7 +2551,7 @@ exports[`regression tests > can drag element that covers another element, while "userToFollow": null, "viewBackgroundColor": "#ffffff", "viewModeEnabled": false, - "width": 1024, + "width": 1440, "zenModeEnabled": false, "zoom": { "value": 1, @@ -2876,7 +2876,7 @@ exports[`regression tests > change the properties of a shape > [end of test] app "userToFollow": null, "viewBackgroundColor": "#ffffff", "viewModeEnabled": false, - "width": 1024, + "width": 1440, "zenModeEnabled": false, "zoom": { "value": 1, @@ -3135,7 +3135,7 @@ exports[`regression tests > click on an element and drag it > [dragged] appState "userToFollow": null, "viewBackgroundColor": "#ffffff", "viewModeEnabled": false, - "width": 1024, + "width": 1440, "zenModeEnabled": false, "zoom": { "value": 1, @@ -3378,7 +3378,7 @@ exports[`regression tests > click on an element and drag it > [end of test] appS "userToFollow": null, "viewBackgroundColor": "#ffffff", "viewModeEnabled": false, - "width": 1024, + "width": 1440, "zenModeEnabled": false, "zoom": { "value": 1, @@ -3616,7 +3616,7 @@ exports[`regression tests > click to select a shape > [end of test] appState 1`] "userToFollow": null, "viewBackgroundColor": "#ffffff", "viewModeEnabled": false, - "width": 1024, + "width": 1440, "zenModeEnabled": false, "zoom": { "value": 1, @@ -3877,7 +3877,7 @@ exports[`regression tests > click-drag to select a group > [end of test] appStat "userToFollow": null, "viewBackgroundColor": "#ffffff", "viewModeEnabled": false, - "width": 1024, + "width": 1440, "zenModeEnabled": false, "zoom": { "value": 1, @@ -4192,7 +4192,7 @@ exports[`regression tests > deleting last but one element in editing group shoul "userToFollow": null, "viewBackgroundColor": "#ffffff", "viewModeEnabled": false, - "width": 1024, + "width": 1440, "zenModeEnabled": false, "zoom": { "value": 1, @@ -4657,7 +4657,7 @@ exports[`regression tests > deselects group of selected elements on pointer down "userToFollow": null, "viewBackgroundColor": "#ffffff", "viewModeEnabled": false, - "width": 1024, + "width": 1440, "zenModeEnabled": false, "zoom": { "value": 1, @@ -4914,7 +4914,7 @@ exports[`regression tests > deselects group of selected elements on pointer up w "userToFollow": null, "viewBackgroundColor": "#ffffff", "viewModeEnabled": false, - "width": 1024, + "width": 1440, "zenModeEnabled": false, "zoom": { "value": 1, @@ -5219,7 +5219,7 @@ exports[`regression tests > deselects selected element on pointer down when poin "userToFollow": null, "viewBackgroundColor": "#ffffff", "viewModeEnabled": false, - "width": 1024, + "width": 1440, "zenModeEnabled": false, "zoom": { "value": 1, @@ -5401,7 +5401,7 @@ exports[`regression tests > deselects selected element, on pointer up, when clic "userToFollow": null, "viewBackgroundColor": "#ffffff", "viewModeEnabled": false, - "width": 1024, + "width": 1440, "zenModeEnabled": false, "zoom": { "value": 1, @@ -5603,7 +5603,7 @@ exports[`regression tests > double click to edit a group > [end of test] appStat "userToFollow": null, "viewBackgroundColor": "#ffffff", "viewModeEnabled": false, - "width": 1024, + "width": 1440, "zenModeEnabled": false, "zoom": { "value": 1, @@ -6002,7 +6002,7 @@ exports[`regression tests > drags selected elements from point inside common bou "userToFollow": null, "viewBackgroundColor": "#ffffff", "viewModeEnabled": false, - "width": 1024, + "width": 1440, "zenModeEnabled": false, "zoom": { "value": 1, @@ -6295,7 +6295,7 @@ exports[`regression tests > draw every type of shape > [end of test] appState 1` "userToFollow": null, "viewBackgroundColor": "#ffffff", "viewModeEnabled": false, - "width": 1024, + "width": 1440, "zenModeEnabled": false, "zoom": { "value": 1, @@ -7158,7 +7158,7 @@ exports[`regression tests > given a group of selected elements with an element t "userToFollow": null, "viewBackgroundColor": "#ffffff", "viewModeEnabled": false, - "width": 1024, + "width": 1440, "zenModeEnabled": false, "zoom": { "value": 1, @@ -7494,7 +7494,7 @@ exports[`regression tests > given a selected element A and a not selected elemen "userToFollow": null, "viewBackgroundColor": "#ffffff", "viewModeEnabled": false, - "width": 1024, + "width": 1440, "zenModeEnabled": false, "zoom": { "value": 1, @@ -7774,7 +7774,7 @@ exports[`regression tests > given selected element A with lower z-index than uns "userToFollow": null, "viewBackgroundColor": "#ffffff", "viewModeEnabled": false, - "width": 1024, + "width": 1440, "zenModeEnabled": false, "zoom": { "value": 1, @@ -8011,7 +8011,7 @@ exports[`regression tests > given selected element A with lower z-index than uns "userToFollow": null, "viewBackgroundColor": "#ffffff", "viewModeEnabled": false, - "width": 1024, + "width": 1440, "zenModeEnabled": false, "zoom": { "value": 1, @@ -8251,7 +8251,7 @@ exports[`regression tests > key 2 selects rectangle tool > [end of test] appStat "userToFollow": null, "viewBackgroundColor": "#ffffff", "viewModeEnabled": false, - "width": 1024, + "width": 1440, "zenModeEnabled": false, "zoom": { "value": 1, @@ -8433,7 +8433,7 @@ exports[`regression tests > key 3 selects diamond tool > [end of test] appState "userToFollow": null, "viewBackgroundColor": "#ffffff", "viewModeEnabled": false, - "width": 1024, + "width": 1440, "zenModeEnabled": false, "zoom": { "value": 1, @@ -8615,7 +8615,7 @@ exports[`regression tests > key 4 selects ellipse tool > [end of test] appState "userToFollow": null, "viewBackgroundColor": "#ffffff", "viewModeEnabled": false, - "width": 1024, + "width": 1440, "zenModeEnabled": false, "zoom": { "value": 1, @@ -8824,7 +8824,7 @@ exports[`regression tests > key 5 selects arrow tool > [end of test] appState 1` "userToFollow": null, "viewBackgroundColor": "#ffffff", "viewModeEnabled": false, - "width": 1024, + "width": 1440, "zenModeEnabled": false, "zoom": { "value": 1, @@ -9056,7 +9056,7 @@ exports[`regression tests > key 6 selects line tool > [end of test] appState 1`] "userToFollow": null, "viewBackgroundColor": "#ffffff", "viewModeEnabled": false, - "width": 1024, + "width": 1440, "zenModeEnabled": false, "zoom": { "value": 1, @@ -9257,7 +9257,7 @@ exports[`regression tests > key 7 selects freedraw tool > [end of test] appState "userToFollow": null, "viewBackgroundColor": "#ffffff", "viewModeEnabled": false, - "width": 1024, + "width": 1440, "zenModeEnabled": false, "zoom": { "value": 1, @@ -9484,7 +9484,7 @@ exports[`regression tests > key a selects arrow tool > [end of test] appState 1` "userToFollow": null, "viewBackgroundColor": "#ffffff", "viewModeEnabled": false, - "width": 1024, + "width": 1440, "zenModeEnabled": false, "zoom": { "value": 1, @@ -9689,7 +9689,7 @@ exports[`regression tests > key d selects diamond tool > [end of test] appState "userToFollow": null, "viewBackgroundColor": "#ffffff", "viewModeEnabled": false, - "width": 1024, + "width": 1440, "zenModeEnabled": false, "zoom": { "value": 1, @@ -9898,7 +9898,7 @@ exports[`regression tests > key l selects line tool > [end of test] appState 1`] "userToFollow": null, "viewBackgroundColor": "#ffffff", "viewModeEnabled": false, - "width": 1024, + "width": 1440, "zenModeEnabled": false, "zoom": { "value": 1, @@ -10101,7 +10101,7 @@ exports[`regression tests > key o selects ellipse tool > [end of test] appState "userToFollow": null, "viewBackgroundColor": "#ffffff", "viewModeEnabled": false, - "width": 1024, + "width": 1440, "zenModeEnabled": false, "zoom": { "value": 1, @@ -10281,7 +10281,7 @@ exports[`regression tests > key p selects freedraw tool > [end of test] appState "userToFollow": null, "viewBackgroundColor": "#ffffff", "viewModeEnabled": false, - "width": 1024, + "width": 1440, "zenModeEnabled": false, "zoom": { "value": 1, @@ -10481,7 +10481,7 @@ exports[`regression tests > key r selects rectangle tool > [end of test] appStat "userToFollow": null, "viewBackgroundColor": "#ffffff", "viewModeEnabled": false, - "width": 1024, + "width": 1440, "zenModeEnabled": false, "zoom": { "value": 1, @@ -10671,7 +10671,7 @@ exports[`regression tests > make a group and duplicate it > [end of test] appSta "userToFollow": null, "viewBackgroundColor": "#ffffff", "viewModeEnabled": false, - "width": 1024, + "width": 1440, "zenModeEnabled": false, "zoom": { "value": 1, @@ -11198,7 +11198,7 @@ exports[`regression tests > noop interaction after undo shouldn't create history "userToFollow": null, "viewBackgroundColor": "#ffffff", "viewModeEnabled": false, - "width": 1024, + "width": 1440, "zenModeEnabled": false, "zoom": { "value": 1, @@ -11476,7 +11476,7 @@ exports[`regression tests > pinch-to-zoom works > [end of test] appState 1`] = ` "userToFollow": null, "viewBackgroundColor": "#ffffff", "viewModeEnabled": false, - "width": 1024, + "width": 1440, "zenModeEnabled": false, "zoom": { "value": 1, @@ -11603,7 +11603,7 @@ exports[`regression tests > shift click on selected element should deselect it o "userToFollow": null, "viewBackgroundColor": "#ffffff", "viewModeEnabled": false, - "width": 1024, + "width": 1440, "zenModeEnabled": false, "zoom": { "value": 1, @@ -11809,7 +11809,7 @@ exports[`regression tests > shift-click to multiselect, then drag > [end of test "userToFollow": null, "viewBackgroundColor": "#ffffff", "viewModeEnabled": false, - "width": 1024, + "width": 1440, "zenModeEnabled": false, "zoom": { "value": 1, @@ -12132,7 +12132,7 @@ exports[`regression tests > should group elements and ungroup them > [end of tes "userToFollow": null, "viewBackgroundColor": "#ffffff", "viewModeEnabled": false, - "width": 1024, + "width": 1440, "zenModeEnabled": false, "zoom": { "value": 1, @@ -12567,7 +12567,7 @@ exports[`regression tests > single-clicking on a subgroup of a selected group sh "userToFollow": null, "viewBackgroundColor": "#ffffff", "viewModeEnabled": false, - "width": 1024, + "width": 1440, "zenModeEnabled": false, "zoom": { "value": 1, @@ -13200,7 +13200,7 @@ exports[`regression tests > spacebar + drag scrolls the canvas > [end of test] a "userToFollow": null, "viewBackgroundColor": "#ffffff", "viewModeEnabled": false, - "width": 1024, + "width": 1440, "zenModeEnabled": false, "zoom": { "value": 1, @@ -13329,7 +13329,7 @@ exports[`regression tests > supports nested groups > [end of test] appState 1`] "userToFollow": null, "viewBackgroundColor": "#ffffff", "viewModeEnabled": false, - "width": 1024, + "width": 1440, "zenModeEnabled": false, "zoom": { "value": 1, @@ -13991,7 +13991,7 @@ exports[`regression tests > switches from group of selected elements to another "userToFollow": null, "viewBackgroundColor": "#ffffff", "viewModeEnabled": false, - "width": 1024, + "width": 1440, "zenModeEnabled": false, "zoom": { "value": 1, @@ -14331,7 +14331,7 @@ exports[`regression tests > switches selected element on pointer down > [end of "userToFollow": null, "viewBackgroundColor": "#ffffff", "viewModeEnabled": false, - "width": 1024, + "width": 1440, "zenModeEnabled": false, "zoom": { "value": 1, @@ -14565,7 +14565,7 @@ exports[`regression tests > two-finger scroll works > [end of test] appState 1`] "userToFollow": null, "viewBackgroundColor": "#ffffff", "viewModeEnabled": false, - "width": 1024, + "width": 1440, "zenModeEnabled": false, "zoom": { "value": 1, @@ -14692,7 +14692,7 @@ exports[`regression tests > undo/redo drawing an element > [end of test] appStat "userToFollow": null, "viewBackgroundColor": "#ffffff", "viewModeEnabled": false, - "width": 1024, + "width": 1440, "zenModeEnabled": false, "zoom": { "value": 1, @@ -15084,7 +15084,7 @@ exports[`regression tests > updates fontSize & fontFamily appState > [end of tes "userToFollow": null, "viewBackgroundColor": "#ffffff", "viewModeEnabled": false, - "width": 1024, + "width": 1440, "zenModeEnabled": false, "zoom": { "value": 1, @@ -15212,7 +15212,7 @@ exports[`regression tests > zoom hotkeys > [end of test] appState 1`] = ` "userToFollow": null, "viewBackgroundColor": "#ffffff", "viewModeEnabled": false, - "width": 1024, + "width": 1440, "zenModeEnabled": false, "zoom": { "value": 1, diff --git a/packages/excalidraw/tests/regressionTests.test.tsx b/packages/excalidraw/tests/regressionTests.test.tsx index d4b5185bac..2ee2167914 100644 --- a/packages/excalidraw/tests/regressionTests.test.tsx +++ b/packages/excalidraw/tests/regressionTests.test.tsx @@ -1,7 +1,13 @@ import React from "react"; import { vi } from "vitest"; -import { FONT_FAMILY, CODES, KEYS, reseed } from "@excalidraw/common"; +import { + FONT_FAMILY, + CODES, + KEYS, + reseed, + MQ_MIN_WIDTH_DESKTOP, +} from "@excalidraw/common"; import { setDateTimeForTests } from "@excalidraw/common"; @@ -60,7 +66,7 @@ beforeEach(async () => { finger2.reset(); await render(); - API.setAppState({ height: 768, width: 1024 }); + API.setAppState({ height: 768, width: MQ_MIN_WIDTH_DESKTOP }); }); afterEach(() => { diff --git a/packages/excalidraw/tests/test-utils.ts b/packages/excalidraw/tests/test-utils.ts index 6c77e10a0b..7289a59820 100644 --- a/packages/excalidraw/tests/test-utils.ts +++ b/packages/excalidraw/tests/test-utils.ts @@ -189,20 +189,20 @@ export const withExcalidrawDimensions = async ( dimensions: { width: number; height: number }, cb: () => void, ) => { + const { h } = window; + mockBoundingClientRect(dimensions); act(() => { - // @ts-ignore h.app.refreshEditorInterface(); - window.h.app.refresh(); + h.app.refresh(); }); await cb(); restoreOriginalGetBoundingClientRect(); act(() => { - // @ts-ignore h.app.refreshEditorInterface(); - window.h.app.refresh(); + h.app.refresh(); }); };