Tests: update a bunch of tests to use stream-relative coordinates for scene interactions (#7966)

* Duplicate convertPagePositionToStream in utils

for a standalone version of this function outside of scene fixture

* Update coordinates in many tests to be stream-dependent

* Little test tweak

* lint

* Fix plane sketching tests, make them less about code matching

* Fix regex in snapping test

* Tweak values in scale sketching test

* Remove "sketching with offset planes" test, we have other tests for that

* Tweak scalar values in snap to close tests

* Fix lints

* Re-run CI

* Update snapshots

* Update coordinates to be relative in camera movement web test

* Update camera location in trackball test

* Remove highlighted code expectation from gizmo test

* Don't expect on the exact value of the circle in this test

* Remove pixel checks from selection test

Yay I'm using the selection in the status bar for a test!

* Update e2e/playwright/sketch-tests.spec.ts

Co-authored-by: graphite-app[bot] <96075541+graphite-app[bot]@users.noreply.github.com>

---------

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
Co-authored-by: graphite-app[bot] <96075541+graphite-app[bot]@users.noreply.github.com>

Author: 3 people

e2e/playwright/can-create-sketches-on-all-planes-and-their-back-sides.spec.ts

@@ -5,7 +5,7 @@ import { uuidv4 } from '@src/lib/utils'
 import type { HomePageFixture } from '@e2e/playwright/fixtures/homePageFixture'
 import type { SceneFixture } from '@e2e/playwright/fixtures/sceneFixture'
 import type { ToolbarFixture } from '@e2e/playwright/fixtures/toolbarFixture'
-import type { CmdBarFixture } from '@e2e/playwright/fixtures/cmdBarFixture'
+import type { EditorFixture } from '@e2e/playwright/fixtures/editorFixture'
 import { getUtils } from '@e2e/playwright/test-utils'
 import { expect, test } from '@e2e/playwright/zoo-test'
 
@@ -15,7 +15,7 @@ test.describe('Can create sketches on all planes and their back sides', () => {
     homePage: HomePageFixture,
     scene: SceneFixture,
     toolbar: ToolbarFixture,
-    cmdBar: CmdBarFixture,
+    editor: EditorFixture,
     plane: string,
     clickCoords: { x: number; y: number }
   ) => {
@@ -52,43 +52,36 @@ test.describe('Can create sketches on all planes and their back sides', () => {
       },
     }
 
-    const code = `@settings(defaultLengthUnit = in)sketch001 = startSketchOn(${plane})profile001 = startProfile(sketch001, at = [0.91, -1.22])`
+    const code = `@settings(defaultLengthUnit = in)sketch001 = startSketchOn(${plane})profile001 = startProfile(sketch001, at = [`
 
-    await u.openDebugPanel()
-
-    await u.clearCommandLogs()
-    await page.getByRole('button', { name: 'Start Sketch' }).click()
-
-    await u.sendCustomCmd(camCommand)
-    await page.waitForTimeout(100)
-    await u.sendCustomCmd(updateCamCommand)
+    await test.step(`Sketch on the ${plane} plane using custom camera commands to orient`, async () => {
+      await u.openDebugPanel()
+      await u.clearCommandLogs()
+      await toolbar.startSketchBtn.click()
 
-    await u.closeDebugPanel()
+      await u.sendCustomCmd(camCommand)
+      await page.waitForTimeout(100)
+      await u.sendCustomCmd(updateCamCommand)
 
-    await page.mouse.click(clickCoords.x, clickCoords.y)
-    await page.waitForTimeout(600) // wait for animation
+      await u.closeDebugPanel()
 
-    await toolbar.waitUntilSketchingReady()
-
-    await expect(
-      page.getByRole('button', { name: 'line Line', exact: true })
-    ).toBeVisible()
+      const resolvedCoords = await scene.convertPagePositionToStream(
+        clickCoords.x,
+        clickCoords.y
+      )
+      await page.mouse.click(resolvedCoords.x, resolvedCoords.y)
+      await page.waitForTimeout(600) // wait for animation
 
-    await u.closeDebugPanel()
-    await page.mouse.click(707, 393)
+      await toolbar.waitUntilSketchingReady()
 
-    await expect(page.locator('.cm-content')).toHaveText(code)
+      await u.closeDebugPanel()
+      await expect(toolbar.lineBtn).toHaveAttribute('aria-pressed', 'true')
+    })
 
-    await page
-      .getByRole('button', { name: 'line Line', exact: true })
-      .first()
-      .click()
-    await u.openAndClearDebugPanel()
-    await page.getByRole('button', { name: 'Exit Sketch' }).click()
-    await u.expectCmdLog('[data-message-type="execution-done"]')
+    const lineCoords = await scene.convertPagePositionToStream(707, 393)
+    await page.mouse.click(lineCoords.x, lineCoords.y)
 
-    await u.clearCommandLogs()
-    await u.removeCurrentCode()
+    await editor.expectEditor.toContain(code)
   }
 
   const planeConfigs = [
@@ -125,13 +118,13 @@ test.describe('Can create sketches on all planes and their back sides', () => {
   ]
 
   for (const config of planeConfigs) {
-    test(config.plane, async ({ page, homePage, scene, toolbar, cmdBar }) => {
+    test(config.plane, async ({ page, homePage, scene, toolbar, editor }) => {
       await sketchOnPlaneAndBackSideTest(
         page,
         homePage,
         scene,
         toolbar,
-        cmdBar,
+        editor,
         config.plane,
         config.coords
       )
@@ -144,7 +137,7 @@ test.describe('Can create sketches on offset planes and their back sides', () =>
     homePage: HomePageFixture,
     scene: SceneFixture,
     toolbar: ToolbarFixture,
-    cmdbar: CmdBarFixture,
+    editor: EditorFixture,
     plane: string,
     clickCoords: { x: number; y: number }
   ) => {
@@ -194,54 +187,48 @@ yzPlane = offsetPlane(YZ, offset = 0.05)
       .toLocaleLowerCase()
 
     const codeLine1 = `sketch001 = startSketchOn(${prefix}${planeName}Plane)`
-    const codeLine2 = `profile001 = startProfile(sketch001, at = [${0.91 + (plane[0] === '-' ? 0.01 : 0)}, -${1.21 + (plane[0] === '-' ? 0.01 : 0)}])`
-
-    await u.openDebugPanel()
-
-    await u.clearCommandLogs()
-    await page.getByRole('button', { name: 'Start Sketch' }).click()
-
-    await u.sendCustomCmd(camCommand)
-    await page.waitForTimeout(100)
-    await u.sendCustomCmd(updateCamCommand)
-
-    await u.closeDebugPanel()
-
-    await toolbar.openFeatureTreePane()
-    await toolbar.getDefaultPlaneVisibilityButton('XY').click()
-    await toolbar.getDefaultPlaneVisibilityButton('XZ').click()
-    await toolbar.getDefaultPlaneVisibilityButton('YZ').click()
-    await expect(
-      toolbar
-        .getDefaultPlaneVisibilityButton('YZ')
-        .locator('[aria-label="eye crossed out"]')
-    ).toBeVisible()
-
-    await page.mouse.click(clickCoords.x, clickCoords.y)
-    await page.waitForTimeout(600) // wait for animation
-
-    await toolbar.waitUntilSketchingReady()
-
-    await expect(
-      page.getByRole('button', { name: 'line Line', exact: true })
-    ).toBeVisible()
+    const codeLine2 = 'profile001 = startProfile(sketch001, at = ['
+
+    await test.step(`Sketch on the ${plane} plane using custom camera commands to orient`, async () => {
+      await u.openDebugPanel()
+
+      await u.clearCommandLogs()
+      await toolbar.startSketchBtn.click()
+
+      await u.sendCustomCmd(camCommand)
+      await page.waitForTimeout(100)
+      await u.sendCustomCmd(updateCamCommand)
+
+      await u.closeDebugPanel()
+
+      // TODO: can we remove these feature tree checks? They seem out of place.
+      await toolbar.openFeatureTreePane()
+      await toolbar.getDefaultPlaneVisibilityButton('XY').click()
+      await toolbar.getDefaultPlaneVisibilityButton('XZ').click()
+      await toolbar.getDefaultPlaneVisibilityButton('YZ').click()
+      await expect(
+        toolbar
+          .getDefaultPlaneVisibilityButton('YZ')
+          .locator('[aria-label="eye crossed out"]')
+      ).toBeVisible()
+
+      const resolvedCoords = await scene.convertPagePositionToStream(
+        clickCoords.x,
+        clickCoords.y
+      )
+      await page.mouse.click(resolvedCoords.x, resolvedCoords.y)
+      await page.waitForTimeout(600) // wait for animation
 
-    await u.closeDebugPanel()
-    await page.mouse.click(707, 393)
+      await toolbar.waitUntilSketchingReady()
 
-    await expect(page.locator('.cm-content')).toContainText(codeLine1)
-    await expect(page.locator('.cm-content')).toContainText(codeLine2)
+      await expect(toolbar.lineBtn).toHaveAttribute('aria-pressed', 'true')
+    })
 
-    await page
-      .getByRole('button', { name: 'line Line', exact: true })
-      .first()
-      .click()
-    await u.openAndClearDebugPanel()
-    await page.getByRole('button', { name: 'Exit Sketch' }).click()
-    await u.expectCmdLog('[data-message-type="execution-done"]')
+    const lineCoords = await scene.convertPagePositionToStream(707, 393)
+    await page.mouse.click(lineCoords.x, lineCoords.y)
 
-    await u.clearCommandLogs()
-    await u.removeCurrentCode()
+    await editor.expectEditor.toContain(codeLine1)
+    await editor.expectEditor.toContain(codeLine2)
   }
 
   const planeConfigs = [
@@ -278,13 +265,13 @@ yzPlane = offsetPlane(YZ, offset = 0.05)
   ]
 
   for (const config of planeConfigs) {
-    test(config.plane, async ({ page, homePage, scene, toolbar, cmdBar }) => {
+    test(config.plane, async ({ page, homePage, scene, toolbar, editor }) => {
       await sketchOnPlaneAndBackSideTest(
         page,
         homePage,
         scene,
         toolbar,
-        cmdBar,
+        editor,
         config.plane,
         config.coords
       )

e2e/playwright/editor-tests.spec.ts

@@ -1420,6 +1420,7 @@ sketch001 = startSketchOn(XZ)
     page,
     homePage,
     toolbar,
+    scene,
   }) => {
     await page.addInitScript(async () => {
       localStorage.setItem(
@@ -1446,9 +1447,15 @@ sketch001 = startSketchOn(XZ)
     await toolbar.editSketch(0)
 
     await page.waitForTimeout(1000)
+    await toolbar.closePane('code')
 
     // Click on the bottom segment that lies on the x axis
-    await page.mouse.click(width * 0.85, height / 2)
+    const clickCoords = await scene.convertPagePositionToStream(
+      0.85,
+      0.5,
+      'ratio'
+    )
+    await page.mouse.click(clickCoords.x, clickCoords.y)
 
     await page.waitForTimeout(1000)
 

e2e/playwright/fixtures/toolbarFixture.ts

@@ -51,6 +51,8 @@ export class ToolbarFixture {
   /** User button for the user sidebar menu */
   userSidebarButton!: Locator
   signOutButton!: Locator
+  /** Selection indicator text in the status bar */
+  selectionStatus!: Locator
 
   constructor(page: Page) {
     this.page = page
@@ -92,6 +94,8 @@ export class ToolbarFixture {
 
     this.userSidebarButton = page.getByTestId('user-sidebar-toggle')
     this.signOutButton = page.getByTestId('user-sidebar-sign-out')
+
+    this.selectionStatus = page.getByTestId('selection-status')
   }
 
   get logoLink() {

e2e/playwright/import-ui.spec.ts

@@ -85,6 +85,8 @@ sketch002 = startSketchOn(extrude001, face = seg01)`
 
       await test.step('check the user is warned when sketching on a imported face', async () => {
         // Start sketch mode
+        await toolbar.closePane('debug')
+        await toolbar.closePane('code')
         await toolbar.startSketchPlaneSelection()
 
         // Click on a face from the imported model