Add an E2E test for clicking all the way through the onboarding, restore code pane highlighting in onboarding (#2265)

* Add test clicking through each onboarding step

* Revert "get rid of code pane shit (#2259)"

This reverts commit d341681c0d.

* Fix the missing #code-pane id

* fmt

e2e/playwright/flow-tests.spec.ts

@@ -8,7 +8,8 @@ import {
   TEST_SETTINGS,
   TEST_SETTINGS_KEY,
   TEST_SETTINGS_CORRUPTED,
-  TEST_SETTINGS_ONBOARDING,
+  TEST_SETTINGS_ONBOARDING_EXPORT,
+  TEST_SETTINGS_ONBOARDING_START,
 } from './storageStates'
 import * as TOML from '@iarna/toml'
 
@@ -680,6 +681,45 @@ test('Project settings can be set and override user settings', async ({
   await expect(page.locator('select[name="app-theme"]')).toHaveValue('light')
 })
 
+test('Click through each onboarding step', async ({ page }) => {
+  const u = getUtils(page)
+
+  // Override beforeEach test setup
+  await page.addInitScript(
+    async ({ settingsKey, settings }) => {
+      // Give no initial code, so that the onboarding start is shown immediately
+      localStorage.setItem('persistCode', '')
+      localStorage.setItem(settingsKey, settings)
+    },
+    {
+      settingsKey: TEST_SETTINGS_KEY,
+      settings: TOML.stringify({ settings: TEST_SETTINGS_ONBOARDING_START }),
+    }
+  )
+
+  await page.setViewportSize({ width: 1200, height: 1080 })
+  await page.goto('/')
+  await u.waitForAuthSkipAppStart()
+
+  // Test that the onboarding pane loaded
+  await expect(page.getByText('Welcome to Modeling App! This')).toBeVisible()
+
+  const nextButton = page.getByTestId('onboarding-next')
+
+  while ((await nextButton.innerText()) !== 'Finish') {
+    await expect(nextButton).toBeVisible()
+    await nextButton.click()
+  }
+
+  // Finish the onboarding
+  await expect(nextButton).toBeVisible()
+  await nextButton.click()
+
+  // Test that the onboarding pane is gone
+  await expect(page.getByTestId('onboarding-content')).not.toBeVisible()
+  await expect(page.url()).not.toContain('onboarding')
+})
+
 test('Onboarding redirects and code updating', async ({ page }) => {
   const u = getUtils(page)
 
@@ -692,7 +732,7 @@ test('Onboarding redirects and code updating', async ({ page }) => {
     },
     {
       settingsKey: TEST_SETTINGS_KEY,
-      settings: TOML.stringify({ settings: TEST_SETTINGS_ONBOARDING }),
+      settings: TOML.stringify({ settings: TEST_SETTINGS_ONBOARDING_EXPORT }),
     }
   )
 

e2e/playwright/storageStates.ts

@@ -22,11 +22,16 @@ export const TEST_SETTINGS = {
   },
 } satisfies Partial<SaveSettingsPayload>
 
-export const TEST_SETTINGS_ONBOARDING = {
+export const TEST_SETTINGS_ONBOARDING_EXPORT = {
   ...TEST_SETTINGS,
   app: { ...TEST_SETTINGS.app, onboardingStatus: '/export' },
 } satisfies Partial<SaveSettingsPayload>
 
+export const TEST_SETTINGS_ONBOARDING_START = {
+  ...TEST_SETTINGS,
+  app: { ...TEST_SETTINGS.app, onboardingStatus: '' },
+} satisfies Partial<SaveSettingsPayload>
+
 export const TEST_SETTINGS_CORRUPTED = {
   app: {
     theme: Themes.Dark,

src/components/ModelingSidebar/ModelingPane.tsx

@@ -24,6 +24,7 @@ export const ModelingPaneHeader = ({
 
 export const ModelingPane = ({
   title,
+  id,
   children,
   className,
   Menu,
@@ -43,6 +44,7 @@ export const ModelingPane = ({
     <section
       {...props}
       data-testid={detailsTestId}
+      id={id}
       className={
         pointerEventsCssClass + styles.panel + ' group ' + (className || '')
       }

src/components/ModelingSidebar/ModelingSidebar.tsx

@@ -165,7 +165,11 @@ function ModelingSidebarSection({
         <Tab.Panel key="none" />
         {filteredPanes.map((pane) => (
           <Tab.Panel key={pane.id} className="h-full">
-            <ModelingPane title={pane.title} Menu={pane.Menu}>
+            <ModelingPane
+              id={`${pane.id}-pane`}
+              title={pane.title}
+              Menu={pane.Menu}
+            >
               {pane.Content instanceof Function ? (
                 <pane.Content />
               ) : (

src/routes/Onboarding/CodeEditor.tsx

@@ -14,11 +14,7 @@ export default function CodeEditor() {
     <div className="fixed grid justify-end items-center inset-0 z-50 pointer-events-none">
       <div
         className="fixed inset-0 bg-black opacity-50 dark:opacity-80 pointer-events-none"
-        style={
+        style={{ clipPath: useBackdropHighlight('code-pane') }}
-          {
-            /*clipPath: useBackdropHighlight('code-pane')*/
-          }
-        }
       ></div>
       <div
         className={

src/routes/Onboarding/InteractiveNumbers.tsx

@@ -15,11 +15,7 @@ export default function InteractiveNumbers() {
     <div className="fixed grid justify-end items-center inset-0 z-50 pointer-events-none">
       <div
         className="fixed inset-0 bg-black opacity-50 pointer-events-none"
-        style={
+        style={{ clipPath: useBackdropHighlight('code-pane') }}
-          {
-            /*clipPath: useBackdropHighlight('code-pane')*/
-          }
-        }
       ></div>
       <div
         className={

src/routes/Onboarding/ParametricModeling.tsx

@@ -31,11 +31,7 @@ export default function ParametricModeling() {
     <div className="fixed grid justify-end items-center inset-0 z-50 pointer-events-none">
       <div
         className="fixed inset-0 bg-black dark:bg-black-80 opacity-50 pointer-events-none"
-        style={
+        style={{ clipPath: useBackdropHighlight('code-pane') }}
-          {
-            /*clipPath: useBackdropHighlight('code-pane')*/
-          }
-        }
       ></div>
       <div
         className={