Ensure screenshot is taken after modeling machine timeout (#7956)

* Ensure screenshot is taken after modeling machine timeout

* Update snapshots

* Hard-code the platform for Windows

* Fix invalid test ID

* Update snapshots

---------

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

Author: jacebrowning

Makefile

@@ -11,6 +11,15 @@ export POWERSHELL := true
 endif
 endif
 
+ifdef WINDOWS
+PLATFORM := Windows
+else
+PLATFORM := $(shell uname -s)
+ifeq ($(PLATFORM),Linux)
+export LINUX := true
+endif
+endif
+
 ifdef WINDOWS
 CARGO ?= $(USERPROFILE)/.cargo/bin/cargo.exe
 WASM_PACK ?= $(USERPROFILE)/.cargo/bin/wasm-pack.exe
@@ -108,6 +117,12 @@ E2E_GREP ?=
 E2E_WORKERS ?=
 E2E_FAILURES ?= 1
 
+ifdef LINUX
+E2E_MODE ?= changed
+else
+E2E_MODE ?= none
+endif
+
 .PHONY: test
 test: test-unit test-e2e
 
@@ -137,6 +152,17 @@ else
 	npm run test:e2e:desktop -- --workers='100%'
 endif
 
+.PHONY: test-snapshots
+test-snapshots: install build ## Run the snapshot tests
+ifndef LINUX
+	@ echo "NOTE: Snapshots cannot be updated on $(PLATFORM)"
+endif
+ifdef E2E_GREP
+	npm run test:snapshots -- --headed --update-snapshots=$(E2E_MODE) --grep="$(E2E_GREP)"
+else
+	npm run test:snapshots -- --headed --update-snapshots=$(E2E_MODE)
+endif
+
 ###############################################################################
 # CLEAN
 

e2e/playwright/fixtures/toolbarFixture.ts

@@ -212,8 +212,8 @@ export class ToolbarFixture {
   }
   selectArc = async () => {
     await this.page.getByRole('button', { name: 'caret down arcs:' }).click()
-    await expect(this.page.getByTestId('dropdown-arc')).toBeVisible()
-    await this.page.getByTestId('dropdown-arc').click()
+    await expect(this.page.getByTestId('dropdown-tangential-arc')).toBeVisible()
+    await this.page.getByTestId('dropdown-tangential-arc').click()
   }
   selectThreePointArc = async () => {
     await this.page.getByRole('button', { name: 'caret down arcs:' }).click()

e2e/playwright/snapshot-tests.spec.ts

@@ -129,13 +129,13 @@ test(
   async ({ page, scene, toolbar }) => {
     const u = await getUtils(page)
     await page.setViewportSize({ width: 1200, height: 500 })
-    const PUR = 400 / 37.5 //pixeltoUnitRatio
     await u.waitForAuthSkipAppStart()
 
-    const startXPx = 600
+    const startPixelX = 600
+    const pixelToUnitRatio = 400 / 37.5
     const [endOfTangentClk, endOfTangentMv] = scene.makeMouseHelpers(
-      startXPx + PUR * 30,
-      500 - PUR * 20,
+      startPixelX + pixelToUnitRatio * 30,
+      500 - pixelToUnitRatio * 20,
       { steps: 10 }
     )
     const [threePointArcMidPointClk, threePointArcMidPointMv] =
@@ -149,35 +149,41 @@ test(
       steps: 10,
     })
 
-    // click on "Start Sketch" button
+    // Start a sketch
     await u.doAndWaitForImageDiff(
       () => page.getByRole('button', { name: 'Start Sketch' }).click(),
       200
     )
 
-    // select a plane
+    // Select a plane
     await page.mouse.click(700, 200)
-
     let code = `sketch001 = startSketchOn(XZ)`
     await expect(page.locator('.cm-content')).toHaveText(code)
 
-    await page.waitForTimeout(700) // TODO detect animation ending, or disable animation
-
-    await page.mouse.click(startXPx + PUR * 10, 500 - PUR * 10)
+    await page.mouse.click(
+      startPixelX + pixelToUnitRatio * 10,
+      500 - pixelToUnitRatio * 10
+    )
     code += `profile001 = startProfile(sketch001, at = [182.59, -246.32])`
     await expect(page.locator('.cm-content')).toHaveText(code)
     await page.waitForTimeout(100)
 
-    await page.mouse.move(startXPx + PUR * 20, 500 - PUR * 10)
+    await page.mouse.move(
+      startPixelX + pixelToUnitRatio * 20,
+      500 - pixelToUnitRatio * 10
+    )
 
-    await page.waitForTimeout(500)
+    await page.waitForTimeout(1_500) // modeling machine timeout is 1s
     await expect(page).toHaveScreenshot({
       maxDiffPixels: 100,
       mask: lowerRightMasks(page),
     })
 
     const lineEndClick = () =>
-      page.mouse.click(startXPx + PUR * 20, 500 - PUR * 10)
+      page.mouse.click(
+        startPixelX + pixelToUnitRatio * 20,
+        500 - pixelToUnitRatio * 10
+      )
     await lineEndClick()
     await page.waitForTimeout(500)
 
@@ -197,7 +203,7 @@ test(
     await page.waitForTimeout(500)
 
     await endOfTangentMv()
-    await page.waitForTimeout(500)
+    await page.waitForTimeout(1_500) // modeling machine timeout is 1s
     await expect(page).toHaveScreenshot({
       maxDiffPixels: 100,
       mask: lowerRightMasks(page),
@@ -208,7 +214,7 @@ test(
     await page.waitForTimeout(500)
     await endOfTangentClk()
     await threePointArcMidPointMv()
-    await page.waitForTimeout(500)
+    await page.waitForTimeout(1_500) // modeling machine timeout is 1s
     await expect(page).toHaveScreenshot({
       maxDiffPixels: 100,
       mask: lowerRightMasks(page),
@@ -217,7 +223,7 @@ test(
     await page.waitForTimeout(100)
 
     await threePointArcEndPointMv()
-    await page.waitForTimeout(500)
+    await page.waitForTimeout(1_500) // modeling machine timeout is 1s
     await expect(page).toHaveScreenshot({
       maxDiffPixels: 100,
       mask: lowerRightMasks(page),
@@ -237,7 +243,7 @@ test(
     await arcCenterClk()
 
     await arcEndMv()
-    await page.waitForTimeout(500)
+    await page.waitForTimeout(1_500) // modeling machine timeout is 1s
     await expect(page).toHaveScreenshot({
       maxDiffPixels: 100,
       mask: lowerRightMasks(page),
@@ -252,42 +258,38 @@ test(
   async ({ page, context, cmdBar, scene }) => {
     const u = await getUtils(page)
     await page.setViewportSize({ width: 1200, height: 500 })
-    const PUR = 400 / 37.5 //pixeltoUnitRatio
-
     await u.waitForAuthSkipAppStart()
 
-    // click on "Start Sketch" button
+    // Start a sketch
     await u.doAndWaitForImageDiff(
       () => page.getByRole('button', { name: 'Start Sketch' }).click(),
       200
     )
 
-    // select a plane
+    // Select a plane
     await page.mouse.click(700, 200)
-
     await expect(page.locator('.cm-content')).toHaveText(
       `sketch001 = startSketchOn(XZ)`
     )
 
-    // Wait for camera animation
-    await page.waitForTimeout(2000)
-
-    const startXPx = 600
-
     // Equip the rectangle tool
-    const rectangleBtn = page.getByTestId('corner-rectangle')
-    await rectangleBtn.click()
-    await expect(rectangleBtn).toHaveAttribute('aria-pressed', 'true')
+    await page.getByTestId('corner-rectangle').click()
 
     // Draw the rectangle
+    const startPixelX = 600
+    const pixelToUnitRatio = 400 / 37.5
     const rectanglePointOne: [number, number] = [
-      startXPx + PUR * 40,
-      500 - PUR * 30,
+      startPixelX + pixelToUnitRatio * 40,
+      500 - pixelToUnitRatio * 30,
     ]
     await page.mouse.move(...rectanglePointOne, { steps: 5 })
-    await page.mouse.click(...rectanglePointOne, { delay: 50 })
-    await page.mouse.move(startXPx + PUR * 10, 500 - PUR * 10, { steps: 5 })
-    await page.waitForTimeout(800)
+    await page.mouse.click(...rectanglePointOne, { delay: 500 })
+    await page.mouse.move(
+      startPixelX + pixelToUnitRatio * 10,
+      500 - pixelToUnitRatio * 10,
+      { steps: 5 }
+    )
+    await page.waitForTimeout(1_500) // modeling machine timeout is 1s
 
     // Ensure the draft rectangle looks the same as it usually does
     await expect(page).toHaveScreenshot({
@@ -302,36 +304,38 @@ test(
   async ({ page, context, cmdBar, scene }) => {
     const u = await getUtils(page)
     await page.setViewportSize({ width: 1200, height: 500 })
-    const PUR = 400 / 37.5 //pixeltoUnitRatio
-
     await u.waitForAuthSkipAppStart()
 
+    // Start a sketch
     await u.doAndWaitForImageDiff(
       () => page.getByRole('button', { name: 'Start Sketch' }).click(),
       200
     )
 
-    // select a plane
+    // Select a plane
     await page.mouse.click(700, 200)
-
     await expect(page.locator('.cm-content')).toHaveText(
       `sketch001 = startSketchOn(XZ)`
     )
 
-    // Wait for camera animation
-    await page.waitForTimeout(2000)
-
-    const startXPx = 600
-
-    // Equip the rectangle tool
-    // await page.getByRole('button', { name: 'line Line', exact: true }).click()
+    // Equip the circle tool
     await page.getByTestId('circle-center').click()
 
-    // Draw the rectangle
-    await page.mouse.click(startXPx + PUR * 20, 500 - PUR * 20)
-    await page.mouse.move(startXPx + PUR * 10, 500 - PUR * 10, { steps: 5 })
+    // Draw the circle
+    const startPixelX = 600
+    const pixelToUnitRatio = 400 / 37.5
+    await page.mouse.click(
+      startPixelX + pixelToUnitRatio * 20,
+      500 - pixelToUnitRatio * 20
+    )
+    await page.mouse.move(
+      startPixelX + pixelToUnitRatio * 10,
+      500 - pixelToUnitRatio * 10,
+      { steps: 5 }
+    )
+    await page.waitForTimeout(1_500) // modeling machine timeout is 1s
 
-    // Ensure the draft rectangle looks the same as it usually does
+    // Ensure the draft circle looks the same as it usually does
     await expect(page).toHaveScreenshot({
       maxDiffPixels: 100,
       mask: lowerRightMasks(page),