Merge branch 'main' into ryanrosello-og/playwright-test-coverage

e2e/playwright/command-bar-tests.spec.ts

@@ -98,14 +98,16 @@ const extrude001 = extrude(-10, sketch001)`
 
     const commandBarButton = page.getByRole('button', { name: 'Commands' })
     const cmdSearchBar = page.getByPlaceholder('Search commands')
-    const themeOption = page.getByRole('option', {
-      name: 'theme',
+    const commandName = 'debug panel'
+    const commandOption = page.getByRole('option', {
+      name: commandName,
       exact: false,
     })
     const commandLevelArgButton = page.getByRole('button', { name: 'level' })
     const commandThemeArgButton = page.getByRole('button', { name: 'value' })
+    const paneSelector = page.getByRole('button', { name: 'debug panel' })
     // This selector changes after we set the setting
-    let commandOptionInput = page.getByPlaceholder('Select an option')
+    let commandOptionInput = page.getByPlaceholder('On')
 
     await expect(
       page.getByRole('button', { name: 'Start Sketch' })
@@ -127,17 +129,16 @@ const extrude001 = extrude(-10, sketch001)`
     await expect(cmdSearchBar).toBeFocused()
 
     // Try typing in the command bar
-    await cmdSearchBar.fill('theme')
-    await expect(themeOption).toBeVisible()
-    await themeOption.click()
-    const themeInput = page.getByPlaceholder('Select an option')
-    await expect(themeInput).toBeVisible()
-    await expect(themeInput).toBeFocused()
-    // Select dark theme
+    await cmdSearchBar.fill(commandName)
+    await expect(commandOption).toBeVisible()
+    await commandOption.click()
+    const toggleInput = page.getByPlaceholder('On')
+    await expect(toggleInput).toBeVisible()
+    await expect(toggleInput).toBeFocused()
+    // Select On
     await page.keyboard.press('ArrowDown')
     await page.keyboard.press('ArrowDown')
-    await page.keyboard.press('ArrowDown')
-    await expect(page.getByRole('option', { name: 'system' })).toHaveAttribute(
+    await expect(page.getByRole('option', { name: 'Off' })).toHaveAttribute(
       'data-headlessui-state',
       'active'
     )
@@ -145,21 +146,21 @@ const extrude001 = extrude(-10, sketch001)`
 
     // Check the toast appeared
     await expect(
-      page.getByText(`Set theme to "system" for this project`)
+      page.getByText(`Set show debug panel to "false" for this project`)
     ).toBeVisible()
-    // Check that the theme changed
-    await expect(page.locator('body')).not.toHaveClass(`body-bg dark`)
+    // Check that the visibility changed
+    await expect(paneSelector).not.toBeVisible()
 
-    commandOptionInput = page.getByPlaceholder('system')
+    commandOptionInput = page.getByPlaceholder('off')
 
     // Test case for https://github.com/KittyCAD/modeling-app/issues/2882
     await commandBarButton.click()
     await cmdSearchBar.focus()
-    await cmdSearchBar.fill('theme')
-    await themeOption.click()
+    await cmdSearchBar.fill(commandName)
+    await commandOption.click()
     await expect(commandThemeArgButton).toBeDisabled()
     await commandOptionInput.focus()
-    await commandOptionInput.fill('lig')
+    await commandOptionInput.fill('on')
     await commandLevelArgButton.click()
     await expect(commandLevelArgButton).toBeDisabled()
 
@@ -197,7 +198,7 @@ const extrude001 = extrude(-10, sketch001)`
     })
     await expect(themeOption).toBeVisible()
     await themeOption.click()
-    const themeInput = page.getByPlaceholder('Select an option')
+    const themeInput = page.getByPlaceholder('dark')
     await expect(themeInput).toBeVisible()
     await expect(themeInput).toBeFocused()
     // Select dark theme
@@ -212,7 +213,7 @@ const extrude001 = extrude(-10, sketch001)`
 
     // Check the toast appeared
     await expect(
-      page.getByText(`Set theme to "system" for this project`)
+      page.getByText(`Set theme to "system" as a user default`)
     ).toBeVisible()
     // Check that the theme changed
     await expect(page.locator('body')).not.toHaveClass(`body-bg dark`)

e2e/playwright/regression-tests.spec.ts

@@ -1,6 +1,8 @@
 import { test, expect } from '@playwright/test'
 
 import { getUtils, setup, tearDown } from './test-utils'
+import { TEST_CODE_TRIGGER_ENGINE_EXPORT_ERROR } from './storageStates'
+import { bracket } from 'lib/exampleKcl'
 
 test.beforeEach(async ({ context, page }) => {
   await setup(context, page)
@@ -164,7 +166,7 @@ const sketch001 = startSketchAt([-0, -0])
     |> yLineTo(0, %)
     |> close(%)
     |>
-  
+
   const example = extrude(5, exampleSketch)
   shell({ faces: ['end'], thickness: 0.25 }, exampleSketch)`
       )
@@ -223,4 +225,210 @@ const sketch001 = startSketchAt([-0, -0])
 
     await expect(page.locator('.cm-lint-marker-error')).toBeVisible()
   })
+  test('when engine fails export we handle the failure and alert the user', async ({
+    page,
+  }) => {
+    const u = await getUtils(page)
+    await page.addInitScript(async (code) => {
+      localStorage.setItem('persistCode', code)
+    }, TEST_CODE_TRIGGER_ENGINE_EXPORT_ERROR)
+
+    await page.setViewportSize({ width: 1000, height: 500 })
+
+    await u.waitForAuthSkipAppStart()
+
+    // wait for execution done
+    await u.openDebugPanel()
+    await u.expectCmdLog('[data-message-type="execution-done"]')
+    await u.closeDebugPanel()
+
+    // expect zero errors in guter
+    await expect(page.locator('.cm-lint-marker-error')).not.toBeVisible()
+
+    // export the model
+    const exportButton = page.getByTestId('export-pane-button')
+    await expect(exportButton).toBeVisible()
+
+    // Click the export button
+    exportButton.click()
+
+    // Click the stl.
+    const stlOption = page.getByText('glTF')
+    await expect(stlOption).toBeVisible()
+
+    await page.keyboard.press('Enter')
+
+    // Click the checkbox
+    const submitButton = page.getByText('Confirm Export')
+    await expect(submitButton).toBeVisible()
+
+    await page.keyboard.press('Enter')
+
+    // Find the toast.
+    // Look out for the toast message
+    const exportingToastMessage = page.getByText(`Exporting...`)
+    await expect(exportingToastMessage).toBeVisible()
+
+    const errorToastMessage = page.getByText(`Error while exporting`)
+    await expect(errorToastMessage).toBeVisible()
+
+    const engineErrorToastMessage = page.getByText(`Nothing to export`)
+    await expect(engineErrorToastMessage).toBeVisible()
+
+    // Make sure the exporting toast is gone
+    await expect(exportingToastMessage).not.toBeVisible()
+
+    // Click the code editor
+    page.locator('.cm-content').click()
+
+    await page.waitForTimeout(2000)
+
+    // Expect the toast to be gone
+    await expect(errorToastMessage).not.toBeVisible()
+    await expect(engineErrorToastMessage).not.toBeVisible()
+
+    // Now add in code that works.
+    page.locator('.cm-content').fill(bracket)
+    page.locator('.cm-content').click()
+    await page.keyboard.press('End')
+    await page.keyboard.press('Enter')
+
+    // wait for execution done
+    await u.openDebugPanel()
+    await u.clearCommandLogs()
+    await u.expectCmdLog('[data-message-type="execution-done"]')
+    await u.closeDebugPanel()
+
+    // Now try exporting
+
+    // Click the export button
+    exportButton.click()
+
+    // Click the stl.
+    await expect(stlOption).toBeVisible()
+
+    await page.keyboard.press('Enter')
+
+    // Click the checkbox
+    await expect(submitButton).toBeVisible()
+
+    await page.keyboard.press('Enter')
+
+    // Find the toast.
+    // Look out for the toast message
+    await expect(exportingToastMessage).toBeVisible()
+
+    // Expect it to succeed.
+    await expect(exportingToastMessage).not.toBeVisible()
+    await expect(errorToastMessage).not.toBeVisible()
+    await expect(engineErrorToastMessage).not.toBeVisible()
+
+    const successToastMessage = page.getByText(`Exported successfully`)
+    await expect(successToastMessage).toBeVisible()
+  })
+  test('ensure you can not export while an export is already going', async ({
+    page,
+  }) => {
+    const u = await getUtils(page)
+    await page.addInitScript(async (code) => {
+      localStorage.setItem('persistCode', code)
+    }, bracket)
+
+    await page.setViewportSize({ width: 1000, height: 500 })
+
+    await u.waitForAuthSkipAppStart()
+
+    // wait for execution done
+    await u.openDebugPanel()
+    await u.expectCmdLog('[data-message-type="execution-done"]')
+    await u.closeDebugPanel()
+
+    // expect zero errors in guter
+    await expect(page.locator('.cm-lint-marker-error')).not.toBeVisible()
+
+    // export the model
+    const exportButton = page.getByTestId('export-pane-button')
+    await expect(exportButton).toBeVisible()
+
+    // Click the export button
+    exportButton.click()
+
+    // Click the stl.
+    const stlOption = page.getByText('glTF')
+    await expect(stlOption).toBeVisible()
+
+    await page.keyboard.press('Enter')
+
+    // Click the checkbox
+    const submitButton = page.getByText('Confirm Export')
+    await expect(submitButton).toBeVisible()
+
+    await page.keyboard.press('Enter')
+
+    // Find the toast.
+    // Look out for the toast message
+    const exportingToastMessage = page.getByText(`Exporting...`)
+    await expect(exportingToastMessage).toBeVisible()
+
+    const errorToastMessage = page.getByText(`Error while exporting`)
+
+    const engineErrorToastMessage = page.getByText(`Nothing to export`)
+
+    const alreadyExportingToastMessage = page.getByText(`Already exporting`)
+
+    // Try exporting again.
+    // Click the export button
+    exportButton.click()
+
+    // Click the stl.
+    await expect(stlOption).toBeVisible()
+
+    await page.keyboard.press('Enter')
+
+    // Click the checkbox
+    await expect(submitButton).toBeVisible()
+
+    await page.keyboard.press('Enter')
+
+    // Find the toast.
+    // Look out for the toast message
+    await expect(exportingToastMessage).toBeVisible()
+    await expect(alreadyExportingToastMessage).toBeVisible()
+
+    // Expect it to succeed.
+    await expect(exportingToastMessage).not.toBeVisible()
+    await expect(errorToastMessage).not.toBeVisible()
+    await expect(engineErrorToastMessage).not.toBeVisible()
+
+    const successToastMessage = page.getByText(`Exported successfully`)
+    await expect(successToastMessage).toBeVisible()
+
+    await expect(alreadyExportingToastMessage).not.toBeVisible()
+
+    // Try exporting again.
+    // Click the export button
+    exportButton.click()
+
+    // Click the stl.
+    await expect(stlOption).toBeVisible()
+
+    await page.keyboard.press('Enter')
+
+    // Click the checkbox
+    await expect(submitButton).toBeVisible()
+
+    await page.keyboard.press('Enter')
+
+    // Find the toast.
+    // Look out for the toast message
+    await expect(exportingToastMessage).toBeVisible()
+
+    // Expect it to succeed.
+    await expect(exportingToastMessage).not.toBeVisible()
+    await expect(errorToastMessage).not.toBeVisible()
+    await expect(engineErrorToastMessage).not.toBeVisible()
+    await expect(alreadyExportingToastMessage).not.toBeVisible()
+
+    await expect(successToastMessage).toBeVisible()
+  })
 })

e2e/playwright/sketch-tests.spec.ts

@@ -151,11 +151,12 @@ test.describe('Sketch tests', () => {
 
     await page.mouse.click(700, 200)
 
-    await expect(page.locator('.cm-content')).toHaveText(
-      `const sketch001 = startSketchOn('XZ')
-  |> startProfileAt([4.61, -14.01], %)
-  |> line([0.31, 16.47], %)`
-    )
+    await expect.poll(u.normalisedEditorCode)
+      .toBe(`const sketch001 = startSketchOn('XZ')
+  |> startProfileAt([12.34, -12.34], %)
+  |> line([-12.34, 12.34], %)
+
+`)
   })
   test('Can exit selection of face', async ({ page }) => {
     // Load the app with the code panes

e2e/playwright/storageStates.ts

@@ -368,3 +368,5 @@ startSketchOn(keychain, 'end')
        height - (keychainHoleSize + 1.5)
      ], keychainHoleSize, %)
   |> extrude(-thickness, %)`
+
+export const TEST_CODE_TRIGGER_ENGINE_EXPORT_ERROR = `const thing = 1`

e2e/playwright/test-network-and-connection-issues.spec.ts

@@ -204,19 +204,24 @@ test.describe('Test network and connection issues', () => {
 
     // Ensure we can continue sketching
     await page.mouse.click(startXPx + PUR * 20, 500 - PUR * 20)
-    await expect(page.locator('.cm-content'))
-      .toHaveText(`const sketch001 = startSketchOn('XZ')
-    |> startProfileAt(${commonPoints.startAt}, %)
-    |> line([${commonPoints.num1}, 0], %)
-    |> line([-8.84, 8.75], %)`)
+    await expect.poll(u.normalisedEditorCode)
+      .toBe(`const sketch001 = startSketchOn('XZ')
+  |> startProfileAt([12.34, -12.34], %)
+  |> line([12.34, 0], %)
+  |> line([-12.34, 12.34], %)
+
+`)
     await page.waitForTimeout(100)
     await page.mouse.click(startXPx, 500 - PUR * 20)
-    await expect(page.locator('.cm-content'))
-      .toHaveText(`const sketch001 = startSketchOn('XZ')
-    |> startProfileAt(${commonPoints.startAt}, %)
-    |> line([${commonPoints.num1}, 0], %)
-    |> line([-8.84, 8.75], %)
-    |> line([-5.6, 0], %)`)
+
+    await expect.poll(u.normalisedEditorCode)
+      .toBe(`const sketch001 = startSketchOn('XZ')
+  |> startProfileAt([12.34, -12.34], %)
+  |> line([12.34, 0], %)
+  |> line([-12.34, 12.34], %)
+  |> line([-12.34, 0], %)
+
+`)
 
     // Unequip line tool
     await page.keyboard.press('Escape')

e2e/playwright/test-utils.ts

@@ -271,6 +271,18 @@ async function waitForAuthAndLsp(page: Page) {
   return waitForLspPromise
 }
 
+export function normaliseKclNumbers(code: string, ignoreZero = true): string {
+  const numberRegexp = /(?<!\w)-?\b\d+(\.\d+)?\b(?!\w)/g
+  const replaceNumber = (number: string) => {
+    if (ignoreZero && (number === '0' || number === '-0')) return number
+    const sign = number.startsWith('-') ? '-' : ''
+    return `${sign}12.34`
+  }
+  const replaceNumbers = (text: string) =>
+    text.replace(numberRegexp, replaceNumber)
+  return replaceNumbers(code)
+}
+
 export async function getUtils(page: Page) {
   // Chrome devtools protocol session only works in Chromium
   const browserType = page.context().browser()?.browserType().name()
@@ -333,6 +345,11 @@ export async function getUtils(page: Page) {
         .boundingBox()
         .then((box) => ({ ...box, x: box?.x || 0, y: box?.y || 0 })),
     codeLocator: page.locator('.cm-content'),
+    normalisedEditorCode: async () => {
+      const code = await page.locator('.cm-content').innerText()
+      return normaliseKclNumbers(code)
+    },
+    normalisedCode: (code: string) => normaliseKclNumbers(code),
     canvasLocator: page.getByTestId('client-side-scene'),
     doAndWaitForCmd: async (
       fn: () => Promise<void>,

e2e/playwright/testing-constraints.spec.ts

@@ -80,11 +80,11 @@ const part001 = startSketchOn('XZ')
   |> line([74.36, 130.4], %, $seg01)
   |> line([78.92, -120.11], %)
   |> angledLine([segAng(seg01), yo], %)
-  |> line([41.19, 28.97 + 5], %)
+  |> line([41.19, 58.97 + 5], %)
 const part002 = startSketchOn('XZ')
-  |> startProfileAt([299.05, 231.45], %)
-  |> xLine(-425.34, %, $seg_what)
-  |> yLine(-264.06, %)
+  |> startProfileAt([299.05, 120], %)
+  |> xLine(-385.34, %, $seg_what)
+  |> yLine(-170.06, %)
   |> xLine(segLen(seg_what), %)
   |> lineTo([profileStartX(%), profileStartY(%)], %)`
       )
@@ -138,7 +138,7 @@ const part001 = startSketchOn('XZ')
   |> line([74.36, 130.4], %, $seg01)
   |> line([78.92, -120.11], %)
   |> angledLine([segAng(seg01), 78.33], %)
-  |> line([41.19, 28.97], %)
+  |> line([51.19, 48.97], %)
 const part002 = startSketchOn('XZ')
   |> startProfileAt([299.05, 231.45], %)
   |> xLine(-425.34, %, $seg_what)
@@ -237,7 +237,7 @@ const part001 = startSketchOn('XZ')
   |> line([74.36, 130.4], %)
   |> line([78.92, -120.11], %)
   |> line([9.16, 77.79], %)
-  |> line([41.19, 28.97], %)
+  |> line([51.19, 48.97], %)
 const part002 = startSketchOn('XZ')
   |> startProfileAt([299.05, 231.45], %)
   |> xLine(-425.34, %, $seg_what)
@@ -343,7 +343,7 @@ const part001 = startSketchOn('XZ')
   |> line([74.36, 130.4], %)
   |> line([78.92, -120.11], %)
   |> line([9.16, 77.79], %)
-  |> line([41.19, 28.97], %)
+  |> line([51.19, 48.97], %)
 const part002 = startSketchOn('XZ')
   |> startProfileAt([299.05, 231.45], %)
   |> xLine(-425.34, %, $seg_what)
@@ -450,7 +450,7 @@ const part001 = startSketchOn('XZ')
   |> line([74.36, 130.4], %)
   |> line([78.92, -120.11], %)
   |> line([9.16, 77.79], %)
-  |> line([41.19, 28.97], %)
+  |> line([51.19, 48.97], %)
 const part002 = startSketchOn('XZ')
   |> startProfileAt([299.05, 231.45], %)
   |> xLine(-425.34, %, $seg_what)
@@ -560,7 +560,7 @@ const part001 = startSketchOn('XZ')
   |> line([74.36, 130.4], %)
   |> line([78.92, -120.11], %)
   |> line([9.16, 77.79], %)
-  |> line([41.19, 28.97], %)
+  |> line([51.19, 48.97], %)
 const part002 = startSketchOn('XZ')
   |> startProfileAt([299.05, 231.45], %)
   |> xLine(-425.34, %, $seg_what)
@@ -613,14 +613,14 @@ const part002 = startSketchOn('XZ')
         codeAfter: [
           `|> yLine(130.4, %)`,
           `|> yLine(77.79, %)`,
-          `|> yLine(28.97, %)`,
+          `|> yLine(48.97, %)`,
         ],
       },
       {
         codeAfter: [
           `|> xLine(74.36, %)`,
           `|> xLine(9.16, %)`,
-          `|> xLine(41.19, %)`,
+          `|> xLine(51.19, %)`,
         ],
         constraintName: 'Horizontal',
       },
@@ -636,7 +636,7 @@ const part001 = startSketchOn('XZ')
   |> line([74.36, 130.4], %)
   |> line([78.92, -120.11], %)
   |> line([9.16, 77.79], %)
-  |> line([41.19, 28.97], %)
+  |> line([51.19, 48.97], %)
 const part002 = startSketchOn('XZ')
   |> startProfileAt([299.05, 231.45], %)
   |> xLine(-425.34, %, $seg_what)

e2e/playwright/testing-settings.spec.ts

@@ -63,95 +63,55 @@ test.describe('Testing settings', () => {
       .getByRole('button', { name: 'Start Sketch' })
       .waitFor({ state: 'visible' })
 
+    const paneButtonLocator = page.getByTestId('debug-pane-button')
+    const headingLocator = page.getByRole('heading', {
+      name: 'Settings',
+      exact: true,
+    })
+    const inputLocator = page.locator('input[name="modeling-showDebugPanel"]')
+
     // Open the settings modal with the browser keyboard shortcut
     await page.keyboard.press('Meta+Shift+,')
 
-    await expect(
-      page.getByRole('heading', { name: 'Settings', exact: true })
-    ).toBeVisible()
-    await page
-      .locator('select[name="app-theme"]')
-      .selectOption({ value: 'light' })
-
-    // Verify the toast appeared
-    await expect(
-      page.getByText(`Set theme to "light" for this project`)
-    ).toBeVisible()
-    // Check that the theme changed
-    await expect(page.locator('body')).not.toHaveClass(`body-bg dark`)
-
-    // Check that the user setting was not changed
-    await page.getByRole('radio', { name: 'User' }).click()
-    await expect(page.locator('select[name="app-theme"]')).toHaveValue('dark')
-
-    // Roll back to default "system" theme
-    await page
-      .getByText(
-        'themeRoll back themeRoll back to match defaultThe overall appearance of the appl'
-      )
-      .hover()
-    await page
-      .getByRole('button', {
-        name: 'Roll back theme',
-      })
-      .click()
-    await expect(page.locator('select[name="app-theme"]')).toHaveValue('system')
-
-    // Check that the project setting did not change
-    await page.getByRole('radio', { name: 'Project' }).click()
-    await expect(page.locator('select[name="app-theme"]')).toHaveValue('light')
-  })
-
-  test('Project settings can be opened with keybinding from the editor', async ({
-    page,
-  }) => {
-    const u = await getUtils(page)
-    await page.setViewportSize({ width: 1200, height: 500 })
-    await u.waitForAuthSkipAppStart()
-    await page
-      .getByRole('button', { name: 'Start Sketch' })
-      .waitFor({ state: 'visible' })
+    await expect(headingLocator).toBeVisible()
+    await page.locator('#showDebugPanel').getByText('OffOn').click()
 
+    // Close it and open again with keyboard shortcut, while KCL editor is focused
     // Put the cursor in the editor
-    await page.locator('.cm-content').click()
-
-    // Open the settings modal with the browser keyboard shortcut
-    await page.keyboard.press('Meta+Shift+,')
-
-    await expect(
-      page.getByRole('heading', { name: 'Settings', exact: true })
-    ).toBeVisible()
-    await page
-      .locator('select[name="app-theme"]')
-      .selectOption({ value: 'light' })
+    await test.step('Open settings with keyboard shortcut', async () => {
+      await page.getByTestId('settings-close-button').click()
+      await page.locator('.cm-content').click()
+      await page.keyboard.press('Meta+Shift+,')
+      await expect(headingLocator).toBeVisible()
+    })
 
     // Verify the toast appeared
     await expect(
-      page.getByText(`Set theme to "light" for this project`)
+      page.getByText(`Set show debug panel to "false" for this project`)
     ).toBeVisible()
     // Check that the theme changed
-    await expect(page.locator('body')).not.toHaveClass(`body-bg dark`)
+    await expect(paneButtonLocator).not.toBeVisible()
 
     // Check that the user setting was not changed
     await page.getByRole('radio', { name: 'User' }).click()
-    await expect(page.locator('select[name="app-theme"]')).toHaveValue('dark')
+    await expect(inputLocator).toBeChecked()
 
-    // Roll back to default "system" theme
-    await page
-      .getByText(
-        'themeRoll back themeRoll back to match defaultThe overall appearance of the appl'
-      )
+    // Roll back to default of "off"
+    await await page
+      .getByText('show debug panelRoll back show debug panelRoll back to match')
       .hover()
     await page
       .getByRole('button', {
-        name: 'Roll back theme',
+        name: 'Roll back show debug panel',
       })
       .click()
-    await expect(page.locator('select[name="app-theme"]')).toHaveValue('system')
+    await expect(inputLocator).not.toBeChecked()
 
     // Check that the project setting did not change
     await page.getByRole('radio', { name: 'Project' }).click()
-    await expect(page.locator('select[name="app-theme"]')).toHaveValue('light')
+    await expect(
+      page.locator('input[name="modeling-showDebugPanel"]')
+    ).not.toBeChecked()
   })
 
   test('Project and user settings can be reset', async ({ page }) => {
@@ -162,69 +122,67 @@ test.describe('Testing settings', () => {
       .getByRole('button', { name: 'Start Sketch' })
       .waitFor({ state: 'visible' })
 
-    // Put the cursor in the editor
-    await page.locator('.cm-content').click()
-
-    // Open the settings modal with the browser keyboard shortcut
-    await page.keyboard.press('Meta+Shift+,')
+    const projectSettingsTab = page.getByRole('radio', { name: 'Project' })
+    const userSettingsTab = page.getByRole('radio', { name: 'User' })
+    const resetButton = page.getByRole('button', {
+      name: 'Restore default settings',
+    })
+    const themeColorSetting = page.locator('#themeColor').getByRole('slider')
+    const settingValues = {
+      default: '259',
+      user: '120',
+      project: '50',
+    }
 
+    // Open the settings modal with lower-right button
+    await page.getByRole('link', { name: 'Settings' }).last().click()
     await expect(
       page.getByRole('heading', { name: 'Settings', exact: true })
     ).toBeVisible()
 
-    // Click the reset settings button.
-    await page.getByRole('button', { name: 'Restore default settings' }).click()
+    await test.step('Set up theme color', async () => {
+      // Verify we're looking at the project-level settings,
+      // and it's set to default value
+      await expect(projectSettingsTab).toBeChecked()
+      await expect(themeColorSetting).toHaveValue(settingValues.default)
 
-    await page
-      .locator('select[name="app-theme"]')
-      .selectOption({ value: 'light' })
+      // Set project-level value to 50
+      await themeColorSetting.fill(settingValues.project)
 
-    // Verify the toast appeared
-    await expect(
-      page.getByText(`Set theme to "light" for this project`)
-    ).toBeVisible()
-    // Check that the theme changed
-    await expect(page.locator('body')).not.toHaveClass(`body-bg dark`)
-    await expect(page.locator('select[name="app-theme"]')).toHaveValue('light')
+      // Set user-level value to 120
+      await userSettingsTab.click()
+      await themeColorSetting.fill(settingValues.user)
+      await projectSettingsTab.click()
+    })
 
-    // Check that the user setting was not changed
-    await page.getByRole('radio', { name: 'User' }).click()
-    await expect(page.locator('select[name="app-theme"]')).toHaveValue('system')
+    await test.step('Reset project settings', async () => {
+      // Click the reset settings button.
+      await resetButton.click()
 
-    // Click the reset settings button.
-    await page.getByRole('button', { name: 'Restore default settings' }).click()
+      // Verify it is now set to the inherited user value
+      await expect(themeColorSetting).toHaveValue(settingValues.default)
 
-    // Verify it is now set to the default value
-    await expect(page.locator('select[name="app-theme"]')).toHaveValue('system')
+      // Check that the user setting also rolled back
+      await userSettingsTab.click()
+      await expect(themeColorSetting).toHaveValue(settingValues.default)
+      await projectSettingsTab.click()
 
-    // Set the user theme to light.
-    await page
-      .locator('select[name="app-theme"]')
-      .selectOption({ value: 'light' })
+      // Set project-level value to 50 again to test the user-level reset
+      await themeColorSetting.fill(settingValues.project)
+      await userSettingsTab.click()
+    })
 
-    // Verify the toast appeared
-    await expect(
-      page.getByText(`Set theme to "light" as a user default`)
-    ).toBeVisible()
-    // Check that the theme changed
-    await expect(page.locator('body')).not.toHaveClass(`body-bg dark`)
-    await expect(page.locator('select[name="app-theme"]')).toHaveValue('light')
+    await test.step('Reset user settings', async () => {
+      // Change the setting and click the reset settings button.
+      await themeColorSetting.fill(settingValues.user)
+      await resetButton.click()
 
-    await page.getByRole('radio', { name: 'Project' }).click()
-    await expect(page.locator('select[name="app-theme"]')).toHaveValue('light')
+      // Verify it is now set to the default value
+      await expect(themeColorSetting).toHaveValue(settingValues.default)
 
-    // Click the reset settings button.
-    await page.getByRole('button', { name: 'Restore default settings' }).click()
-    // Verify it is now set to the default value
-    await expect(page.locator('select[name="app-theme"]')).toHaveValue('system')
-
-    await page.getByRole('radio', { name: 'User' }).click()
-    await expect(page.locator('select[name="app-theme"]')).toHaveValue('system')
-
-    // Click the reset settings button.
-    await page.getByRole('button', { name: 'Restore default settings' }).click()
-
-    // Verify it is now set to the default value
-    await expect(page.locator('select[name="app-theme"]')).toHaveValue('system')
+      // Check that the project setting also changed
+      await projectSettingsTab.click()
+      await expect(themeColorSetting).toHaveValue(settingValues.default)
+    })
   })
 })

e2e/playwright/various.spec.ts

@@ -468,7 +468,7 @@ test('Sketch on face', async ({ page }) => {
 
   await u.openAndClearDebugPanel()
   await u.doAndWaitForCmd(
-    () => page.mouse.click(625, 133),
+    () => page.mouse.click(625, 165),
     'default_camera_get_settings',
     true
   )
@@ -498,13 +498,14 @@ test('Sketch on face', async ({ page }) => {
   await expect(page.locator('.cm-content')).not.toHaveText(previousCodeContent)
   previousCodeContent = await page.locator('.cm-content').innerText()
 
-  await expect(page.locator('.cm-content'))
-    .toContainText(`const sketch002 = startSketchOn(extrude001, seg01)
+  await expect.poll(u.normalisedEditorCode).toContain(
+    u.normalisedCode(`const sketch002 = startSketchOn(extrude001, seg01)
   |> startProfileAt([-12.94, 6.6], %)
   |> line([2.45, -0.2], %)
   |> line([-2.6, -1.25], %)
   |> lineTo([profileStartX(%), profileStartY(%)], %)
   |> close(%)`)
+  )
 
   await u.openAndClearDebugPanel()
   await page.getByRole('button', { name: 'Exit Sketch' }).click()
@@ -513,7 +514,7 @@ test('Sketch on face', async ({ page }) => {
   await u.updateCamPosition([1049, 239, 686])
   await u.closeDebugPanel()
 
-  await page.getByText('startProfileAt([-12.94, 6.6], %)').click()
+  await page.getByText('startProfileAt([-12').click()
   await expect(page.getByRole('button', { name: 'Edit Sketch' })).toBeVisible()
   await page.getByRole('button', { name: 'Edit Sketch' }).click()
   await page.waitForTimeout(400)
@@ -549,7 +550,7 @@ test('Sketch on face', async ({ page }) => {
   await page.getByRole('button', { name: 'Exit Sketch' }).click()
   await u.expectCmdLog('[data-message-type="execution-done"]')
 
-  await page.getByText('startProfileAt([-12.94, 6.6], %)').click()
+  await page.getByText('startProfileAt([-12').click()
 
   await expect(page.getByRole('button', { name: 'Extrude' })).not.toBeDisabled()
   await page.waitForTimeout(100)