No More Baked Absolute Window Coordinates in Tests + No More Cyclic D…

…ependency Issues (#4168)

* does it fix Karma circular dependencies?

* serving the editor css files in Karma too

* load the editor entry point imports before running tests

* fixing InsertionPlusButton tests

* creating test helper function windowRectangleToCanvasRectangle

* fixing Reparent indicators tests

* fixing absolute reparent strategy tests

* adding --noEmit to TSC

* making Paste Here actually work based on the opening cursor position

* oh paste here tests, I fix you

* "fix" draw-to-insert test

* really fixing draw-to-insert text test

* ok, fixing this for the last time

* adding data-testid to the canvas root

* actually boundingClientRectToCanvasRectangle should take the renderResult

* updating snapshots with the canvas container data-testid

* Update karma-base.conf.js

editor/karma-base.conf.js

@@ -54,16 +54,25 @@ module.exports = function (config) {
     // list of files / patterns to load in the browser
     files: [
       './mocha-setup-beforeall.js',
-      './karma-setup.js',
+      './karma-setup.js', // this must run before importing the editor-entry-point-imports module
+      './src/templates/editor-entry-point-imports.tsx', // we load the real editor entry point first, to make sure the environment matches the real environment, and also to avoid diverging circular dependencies
       {
         pattern: './resources/editor/**/*.png',
         watched: false,
         served: true,
         included: false,
         nocache: false,
       },
+      {
+        pattern: './resources/editor/**/*.css',
+        watched: false,
+        served: true,
+        included: false,
+        nocache: false,
+      },
     ],
     proxies: {
+      '/editor/css/': '/base/resources/editor/css',
       '/editor/icons': '/base/resources/editor/icons',
       '/editor/cursors': '/base/resources/editor/cursors',
       '/editor/fills': '/base/resources/editor/fills',

editor/karma-setup.js

@@ -18,6 +18,7 @@ ReactTestingLibrary.configure({
   },
 })
 
+// this must run before importing the editor-entry-point-imports module
 window.expect = expect
 window.jest = null
 window.KarmaTestEnvironment = true

editor/package.json

@@ -50,7 +50,7 @@
     "lint-editor": "lint-staged",
     "dev-fast": "APP_ENV=development REACT_APP_ENVIRONMENT_CONFIG=development REACT_APP_AUTH0_CLIENT_ID=$AUTH0_CLIENT_ID REACT_APP_AUTH0_ENDPOINT=$AUTH0_ENDPOINT REACT_APP_AUTH0_REDIRECT_URI=$AUTH0_REDIRECT_URI REACT_APP_COMMIT_HASH=`git rev-parse HEAD` vite --force",
     "vite-build": "node --max_old_space_size=16384 ./node_modules/vite/bin/vite build -- -DEBUG",
-    "watch-tsc": "tsc --watch && NODE_OPTIONS=\"--max_old_space_size=4096 $NODE_OPENSSL_OPTION\"",
+    "watch-tsc": "tsc --watch --noEmit && NODE_OPTIONS=\"--max_old_space_size=4096 $NODE_OPENSSL_OPTION\"",
     "unused-exports": "ts-unused-exports ./tsconfig.json --ignoreLocallyUsed"
   },
   "lint-staged": {

editor/src/components/canvas/__snapshots__/ui-jsx-canvas-bugs.spec.tsx.snap

@@ -4,6 +4,7 @@ exports[`UiJsxCanvas #747 - DOM object constructor cannot be called as a functio
 "<div style=\\"all: initial\\">
   <div
     id=\\"canvas-container\\"
+    data-testid=\\"canvas-container\\"
     style=\\"position: absolute\\"
     data-utopia-valid-paths=\\"sb sb/scene sb/scene/app\\"
     data-utopia-root-element-path=\\"sb\\"

editor/src/components/canvas/canvas-strategies/strategies/absolute-flex-reparent-strategy-helpers.spec.browser2.tsx

@@ -26,6 +26,8 @@ import {
   TestScenePath,
   TestSceneUID,
 } from '../../ui-jsx.test-utils'
+import { boundingClientRectToCanvasRectangle } from '../../../../utils/utils.test-utils'
+import { FlexReparentIndicatorSize } from '../../controls/select-mode/flex-reparent-target-indicator'
 
 async function dragElement(
   renderResult: EditorRenderResult,
@@ -2221,13 +2223,19 @@ async function checkReparentIndicator(
   expectedTop: number,
   expectedWidth: number,
   expectedHeight: number,
+  horizontal: 'horizontal' | 'vertical',
 ): Promise<void> {
   const element = await renderResult.renderedDOM.findByTestId('flex-reparent-indicator-0')
   const bounds = element.getBoundingClientRect()
-  expect(bounds.left).toEqual(expectedLeft)
-  expect(bounds.top).toEqual(expectedTop)
-  expect(bounds.width).toEqual(expectedWidth)
-  expect(bounds.height).toEqual(expectedHeight)
+  const canvasBounds = boundingClientRectToCanvasRectangle(renderResult, bounds)
+  expect(
+    canvasBounds.x + (horizontal === 'horizontal' ? FlexReparentIndicatorSize / 2 : 0),
+  ).toEqual(expectedLeft)
+  expect(canvasBounds.y + (horizontal === 'vertical' ? FlexReparentIndicatorSize / 2 : 0)).toEqual(
+    expectedTop,
+  )
+  expect(canvasBounds.width).toEqual(expectedWidth)
+  expect(canvasBounds.height).toEqual(expectedHeight)
 }
 
 describe('Reparent indicators', () => {
@@ -2271,7 +2279,7 @@ describe('Reparent indicators', () => {
     await renderResult.getDispatchFollowUpActionsFinished()
 
     // Check the indicator presence and position.
-    await checkReparentIndicator(renderResult, 388, 610, 2, 123)
+    await checkReparentIndicator(renderResult, 0, 500, 2, 123, 'horizontal')
     expect(renderResult.getEditorState().editor.displayNoneInstances).toEqual([
       EP.fromString('storyboard/scene/parentsibling/seconddiv'),
     ])
@@ -2317,7 +2325,7 @@ describe('Reparent indicators', () => {
     await renderResult.getDispatchFollowUpActionsFinished()
 
     // Check the indicator presence and position.
-    await checkReparentIndicator(renderResult, 788, 610, 2, 123)
+    await checkReparentIndicator(renderResult, 400, 500, 2, 123, 'horizontal')
   })
 
   it(`shows the reparent indicator between two elements in a 'row' container`, async () => {
@@ -2360,7 +2368,7 @@ describe('Reparent indicators', () => {
     await renderResult.getDispatchFollowUpActionsFinished()
 
     // Check the indicator presence and position.
-    await checkReparentIndicator(renderResult, 522, 610, 2, 123)
+    await checkReparentIndicator(renderResult, 134, 500, 2, 123, 'horizontal')
   })
 
   it(`shows the reparent indicator between two elements in a 'row-reverse' container`, async () => {
@@ -2403,7 +2411,7 @@ describe('Reparent indicators', () => {
     await renderResult.getDispatchFollowUpActionsFinished()
 
     // Check the indicator presence and position.
-    await checkReparentIndicator(renderResult, 654, 610, 2, 123)
+    await checkReparentIndicator(renderResult, 266, 500, 2, 123, 'horizontal')
   })
   it(`shows the reparent indicator between the parent and the first element in a 'row' container with absolute siblings`, async () => {
     const renderResult = await renderTestEditorWithCode(
@@ -2447,7 +2455,7 @@ describe('Reparent indicators', () => {
     await renderResult.getDispatchFollowUpActionsFinished()
 
     // Check the indicator presence and position.
-    await checkReparentIndicator(renderResult, 388, 110, 2, 40)
+    await checkReparentIndicator(renderResult, 0, 0, 2, 40, 'horizontal')
   })
   it(`shows the reparent indicator between the parent and the last element in a 'row' container with absolute siblings`, async () => {
     const renderResult = await renderTestEditorWithCode(
@@ -2491,7 +2499,7 @@ describe('Reparent indicators', () => {
     await renderResult.getDispatchFollowUpActionsFinished()
 
     // Check the indicator presence and position.
-    await checkReparentIndicator(renderResult, 438, 110, 2, 40)
+    await checkReparentIndicator(renderResult, 50, 0, 2, 40, 'horizontal')
   })
   it(`shows the reparent indicator between the parent and the first element in a 'row-reverse' container with absolute siblings`, async () => {
     const renderResult = await renderTestEditorWithCode(
@@ -2535,7 +2543,7 @@ describe('Reparent indicators', () => {
     await renderResult.getDispatchFollowUpActionsFinished()
 
     // Check the indicator presence and position.
-    await checkReparentIndicator(renderResult, 788, 110, 2, 40)
+    await checkReparentIndicator(renderResult, 400, 0, 2, 40, 'horizontal')
   })
   it(`doesn't show the reparent indicator when there are no siblings`, async () => {
     const renderResult = await renderTestEditorWithCode(
@@ -2764,6 +2772,6 @@ describe('Reparent indicators', () => {
       ),
     ])
     expect(renderResult.getEditorState().editor.canvas.controls.parentOutlineHighlight).toBeNull()
-    await checkReparentIndicator(renderResult, 389, 227, 75, 2)
+    await checkReparentIndicator(renderResult, 0, 118, 75, 2, 'vertical')
   })
 })

editor/src/components/canvas/canvas-strategies/strategies/absolute-reparent-strategy.spec.browser2.tsx

@@ -50,6 +50,7 @@ import {
 import { queryHelpers } from '@testing-library/react'
 import { forceNotNull } from '../../../../core/shared/optional-utils'
 import { getDomRectCenter } from '../../../../core/shared/dom-utils'
+import { boundingClientRectToCanvasRectangle } from '../../../../utils/utils.test-utils'
 
 interface CheckCursor {
   cursor: CSSCursor | null
@@ -1040,10 +1041,14 @@ export var ${BakedInStoryboardVariableName} = (props) => {
       await dragElement(renderResult, 'ccc', dragDelta, emptyModifiers, null, async () => {
         const draggedElement = await renderResult.renderedDOM.findByTestId('ccc')
         const draggedElementBounds = draggedElement.getBoundingClientRect()
-        expect(draggedElementBounds.x).toEqual(1014)
-        expect(draggedElementBounds.y).toEqual(535)
-        expect(draggedElementBounds.width).toEqual(50)
-        expect(draggedElementBounds.height).toEqual(50)
+        const draggedElementCanvasBounds = boundingClientRectToCanvasRectangle(
+          renderResult,
+          draggedElementBounds,
+        )
+        expect(draggedElementCanvasBounds.x).toEqual(625)
+        expect(draggedElementCanvasBounds.y).toEqual(425)
+        expect(draggedElementCanvasBounds.width).toEqual(50)
+        expect(draggedElementCanvasBounds.height).toEqual(50)
       })
 
       await renderResult.getDispatchFollowUpActionsFinished()
@@ -1157,10 +1162,14 @@ export var ${BakedInStoryboardVariableName} = (props) => {
       await dragElement(renderResult, 'ccc', dragDelta, emptyModifiers, null, async () => {
         const draggedElement = await renderResult.renderedDOM.findByTestId('ccc')
         const draggedElementBounds = draggedElement.getBoundingClientRect()
-        expect(draggedElementBounds.x).toEqual(1014)
-        expect(draggedElementBounds.y).toEqual(535)
-        expect(draggedElementBounds.width).toEqual(50)
-        expect(draggedElementBounds.height).toEqual(50)
+        const draggedElementCanvasBounds = boundingClientRectToCanvasRectangle(
+          renderResult,
+          draggedElementBounds,
+        )
+        expect(draggedElementCanvasBounds.x).toEqual(625)
+        expect(draggedElementCanvasBounds.y).toEqual(425)
+        expect(draggedElementCanvasBounds.width).toEqual(50)
+        expect(draggedElementCanvasBounds.height).toEqual(50)
       })
 
       await renderResult.getDispatchFollowUpActionsFinished()

editor/src/components/canvas/canvas-strategies/strategies/draw-to-insert-text-strategy.spec.browser2.tsx

@@ -11,6 +11,7 @@ import {
   getPrintedUiJsCode,
   renderTestEditorWithCode,
 } from '../../../canvas/ui-jsx.test-utils'
+import { CanvasContainerID } from '../../canvas-types'
 
 describe('draw-to-insert text', () => {
   describe('draw', () => {
@@ -288,9 +289,13 @@ describe('draw-to-insert text', () => {
       await pressKey('t')
       await editor.getDispatchFollowUpActionsFinished()
 
+      const canvasRootElement = editor.renderedDOM
+        .getByTestId(CanvasContainerID)
+        .getBoundingClientRect()
+
       const insideDiv = {
-        x: 500,
-        y: 500,
+        x: canvasRootElement.x + 120,
+        y: canvasRootElement.y + 400,
       }
 
       await mouseDragFromPointToPoint(canvasControlsLayer, insideDiv, {
@@ -314,13 +319,13 @@ describe('draw-to-insert text', () => {
             import { Storyboard } from 'utopia-api'
 
             export var storyboard = (
-              <Storyboard data-uid='sb'>
+              <Storyboard data-uid='sb' >
                 <span
                   style={{
                     position: 'absolute',
                     wordBreak: 'break-word',
-                    left: 112,
-                    top: 391,
+                    left: 121,
+                    top: 401,
                     width: 50,
                     height: 50,
                   }}