Add desktop playwright test for restarting onboarding (#3481)

* Add a yarn script to run electron tests locally

* Add plawright electron test restarting onboarding

* Add steps to restart onboarding with no code, and restart from settings button

* The "Opening the bracket" had a step that could occasionally resolve to multiple elements

* Fix my misunderstanding of how to select for the bracket project card

---------

Co-authored-by: Jess Frazelle <jessfraz@users.noreply.github.com>

e2e/playwright/onboarding-tests.spec.ts

@@ -1,6 +1,6 @@
 import { test, expect } from '@playwright/test'
-
+import fsp from 'fs/promises'
-import { getUtils, setup, tearDown } from './test-utils'
+import { getUtils, setup, setupElectron, tearDown } from './test-utils'
 import { bracket } from 'lib/exampleKcl'
 import { onboardingPaths } from 'routes/Onboarding/paths'
 import {
@@ -12,7 +12,10 @@ import {
 } from './storageStates'
 import * as TOML from '@iarna/toml'
 
-test.beforeEach(async ({ context, page }) => {
+test.beforeEach(async ({ context, page }, testInfo) => {
+  if (testInfo.tags.includes('@electron')) {
+    return
+  }
   await setup(context, page)
 })
 
@@ -339,3 +342,96 @@ test.describe('Onboarding tests', () => {
     }
   })
 })
+
+test(
+  'Restarting onboarding on desktop takes one attempt',
+  { tag: '@electron' },
+  async ({ browser: _ }, testInfo) => {
+    const { electronApp, page } = await setupElectron({
+      testInfo,
+      folderSetupFn: async (dir) => {
+        await fsp.mkdir(`${dir}/router-template-slate`, { recursive: true })
+        await fsp.copyFile(
+          'src/wasm-lib/tests/executor/inputs/router-template-slate.kcl',
+          `${dir}/router-template-slate/main.kcl`
+        )
+      },
+    })
+
+    // Our constants
+    const u = await getUtils(page)
+    const projectCard = page.getByText('router-template-slate')
+    const helpMenuButton = page.getByRole('button', {
+      name: 'Help and resources',
+    })
+    const restartOnboardingButton = page.getByRole('button', {
+      name: 'Reset onboarding',
+    })
+    const restartConfirmationButton = page.getByRole('button', {
+      name: 'Make a new project',
+    })
+    const tutorialProjectIndicator = page.getByText('Tutorial Project 00')
+    const tutorialModalText = page.getByText('Welcome to Modeling App!')
+    const tutorialDismissButton = page.getByRole('button', { name: 'Dismiss' })
+    const userMenuButton = page.getByTestId('user-sidebar-toggle')
+    const userMenuSettingsButton = page.getByRole('button', {
+      name: 'User settings',
+    })
+    const settingsHeading = page.getByRole('heading', {
+      name: 'Settings',
+      exact: true,
+    })
+    const restartOnboardingSettingsButton = page.getByRole('button', {
+      name: 'Replay onboarding',
+    })
+
+    await test.step('Navigate into project', async () => {
+      await page.setViewportSize({ width: 1200, height: 500 })
+
+      page.on('console', console.log)
+
+      await expect(
+        page.getByRole('heading', { name: 'Your Projects' })
+      ).toBeVisible()
+      await expect(projectCard).toBeVisible()
+      await projectCard.click()
+      await u.waitForPageLoad()
+    })
+
+    await test.step('Restart the onboarding from help menu', async () => {
+      await helpMenuButton.click()
+      await restartOnboardingButton.click()
+
+      await expect(restartConfirmationButton).toBeVisible()
+      await restartConfirmationButton.click()
+    })
+
+    await test.step('Confirm that the onboarding has restarted', async () => {
+      await expect(tutorialProjectIndicator).toBeVisible()
+      await expect(tutorialModalText).toBeVisible()
+      await tutorialDismissButton.click()
+    })
+
+    await test.step('Clear code and restart onboarding from settings', async () => {
+      await u.openKclCodePanel()
+      await expect(u.codeLocator).toContainText('// Shelf Bracket')
+      await u.codeLocator.selectText()
+      await u.codeLocator.fill('')
+
+      await test.step('Navigate to settings', async () => {
+        await userMenuButton.click()
+        await userMenuSettingsButton.click()
+        await expect(settingsHeading).toBeVisible()
+        await expect(restartOnboardingSettingsButton).toBeVisible()
+      })
+
+      await restartOnboardingSettingsButton.click()
+      // Since the code is empty, we should not see the confirmation dialog
+      await expect(restartConfirmationButton).not.toBeVisible()
+      await expect(tutorialProjectIndicator).toBeVisible()
+      await expect(tutorialModalText).toBeVisible()
+    })
+
+    await electronApp.close()
+  }
+)

e2e/playwright/projects.spec.ts

@@ -559,7 +559,7 @@ test(
     await test.step('Clicking the logo takes us back to the projects page / home', async () => {
       await page.getByTestId('app-logo').click()
 
-      await expect(page.getByText('bracket')).toBeVisible()
+      await expect(page.getByRole('link', { name: 'bracket' })).toBeVisible()
       await expect(page.getByText('router-template-slate')).toBeVisible()
       await expect(page.getByText('New Project')).toBeVisible()
     })
@@ -597,7 +597,7 @@ test(
       ).toBeVisible()
       await page.getByRole('button', { name: 'Go to Home' }).click()
 
-      await expect(page.getByText('bracket')).toBeVisible()
+      await expect(page.getByRole('link', { name: 'bracket' })).toBeVisible()
       await expect(page.getByText('router-template-slate')).toBeVisible()
       await expect(page.getByText('New Project')).toBeVisible()
     })

package.json

@@ -94,7 +94,8 @@
     "electron:start": "electron-forge start",
     "electron:package": "electron-forge package",
     "electron:make": "electron-forge make",
-    "electron:publish": "electron-forge publish"
+    "electron:publish": "electron-forge publish",
+    "electron:e2e:local": "NODE_ENV=development yarn playwright test --config=playwright.electron.config.ts --grep=@electron"
   },
   "prettier": {
     "trailingComma": "es5",