From 6df1ae7161d2d1a095ab3b087f5b5dd1ea27d7aa Mon Sep 17 00:00:00 2001
From: Frank Noirot <frank@kittycad.io>
Date: Mon, 27 Nov 2023 19:46:15 -0500
Subject: [PATCH] Add Playwright tests for onboarding (#1125)

Add tests for onboarding load and code changes
---
 e2e/playwright/flow-tests.spec.ts   | 44 +++++++++++++++++++++++++++++
 src/routes/Onboarding/Export.tsx    |  1 +
 src/routes/Onboarding/Sketching.tsx |  1 +
 src/routes/Onboarding/index.tsx     |  4 +--
 4 files changed, 48 insertions(+), 2 deletions(-)

diff --git a/e2e/playwright/flow-tests.spec.ts b/e2e/playwright/flow-tests.spec.ts
index 874f1ef01..fabd9ecb9 100644
--- a/e2e/playwright/flow-tests.spec.ts
+++ b/e2e/playwright/flow-tests.spec.ts
@@ -392,3 +392,47 @@ test('Auto complete works', async ({ page }) => {
   |> startProfileAt([0,0], %)
   |> xLine(5, %)`)
 })
+
+// Onboarding tests
+test('Onboarding redirects and code updating', async ({ page, context }) => {
+  const u = getUtils(page)
+
+  // Override beforeEach test setup
+  await context.addInitScript(async () => {
+    // Give some initial code, so we can test that it's cleared
+    localStorage.setItem('persistCode', 'const sigmaAllow = 15000')
+
+    const storedSettings = JSON.parse(
+      localStorage.getItem('SETTINGS_PERSIST_KEY') || '{}'
+    )
+    storedSettings.onboardingStatus = '/export'
+    localStorage.setItem('SETTINGS_PERSIST_KEY', JSON.stringify(storedSettings))
+  })
+
+  await page.setViewportSize({ width: 1200, height: 500 })
+  await page.goto('localhost:3000')
+  await u.waitForAuthSkipAppStart()
+
+  // Test that the redirect happened
+  await expect(page.url()).toBe(
+    `http://localhost:3000/file/new/onboarding/export`
+  )
+
+  // Test that you come back to this page when you refresh
+  await page.reload()
+  await expect(page.url()).toBe(
+    `http://localhost:3000/file/new/onboarding/export`
+  )
+
+  // Test that the onboarding pane loaded
+  const title = page.locator('[data-testid="onboarding-content"]')
+  await expect(title).toBeAttached()
+
+  // Test that the code changes when you advance to the next step
+  await page.locator('[data-testid="onboarding-next"]').click()
+  await expect(page.locator('.cm-content')).toHaveText('')
+
+  // Test that the code is not empty when you click on the next step
+  await page.locator('[data-testid="onboarding-next"]').click()
+  await expect(page.locator('.cm-content')).toHaveText(/.+/)
+})
diff --git a/src/routes/Onboarding/Export.tsx b/src/routes/Onboarding/Export.tsx
index 36a4d5492..25668a063 100644
--- a/src/routes/Onboarding/Export.tsx
+++ b/src/routes/Onboarding/Export.tsx
@@ -62,6 +62,7 @@ export default function Export() {
             Element="button"
             onClick={next}
             icon={{ icon: faArrowRight }}
+            data-testid="onboarding-next"
           >
             Next: Sketching
           </ActionButton>
diff --git a/src/routes/Onboarding/Sketching.tsx b/src/routes/Onboarding/Sketching.tsx
index bd273ccf9..306792f0b 100644
--- a/src/routes/Onboarding/Sketching.tsx
+++ b/src/routes/Onboarding/Sketching.tsx
@@ -57,6 +57,7 @@ export default function Sketching() {
             Element="button"
             onClick={next}
             icon={{ icon: faArrowRight }}
+            data-testid="onboarding-next"
           >
             Next: Future Work
           </ActionButton>
diff --git a/src/routes/Onboarding/index.tsx b/src/routes/Onboarding/index.tsx
index 8c7f64eb0..6e36cb4d7 100644
--- a/src/routes/Onboarding/index.tsx
+++ b/src/routes/Onboarding/index.tsx
@@ -125,9 +125,9 @@ const Onboarding = () => {
   useHotkeys('esc', dismiss)
 
   return (
-    <>
+    <div className="content" data-testid="onboarding-content">
       <Outlet />
-    </>
+    </div>
   )
 }