Get playwright green (#3823)

* Fix "Text-to-CAD functionality" electron test

* Make "Closing settings modal should go back..." test not run order-dependent

* Seeing if paneOpen is part of the run order-dependent story

* Fix mistake in selector for text-to-cad test

* Add resiliency to a couple flakes

---------

Co-authored-by: 49fl <ircsurfer33@gmail.com>

e2e/playwright/file-tree.spec.ts

@@ -112,7 +112,8 @@ test.describe('when using the file tree to', () => {
       })
 
       const {
-        panesOpen,
+        openKclCodePanel,
+        openFilePanel,
         createAndSelectProject,
         pasteCodeInEditor,
         createNewFileAndSelect,
@@ -124,9 +125,9 @@ test.describe('when using the file tree to', () => {
       await page.setViewportSize({ width: 1200, height: 500 })
       page.on('console', console.log)
 
-      await panesOpen(['files', 'code'])
-
       await createAndSelectProject('project-000')
+      await openKclCodePanel()
+      await openFilePanel()
       // File the main.kcl with contents
       const kclCube = await fsp.readFile(
         'src/wasm-lib/tests/executor/inputs/cube.kcl',

e2e/playwright/test-utils.ts

@@ -548,13 +548,16 @@ export async function getUtils(page: Page, test_?: typeof test) {
 
     createNewFileAndSelect: async (name: string) => {
       return test?.step(`Create a file named ${name}, select it`, async () => {
+        await openFilePanel(page)
         await page.getByTestId('create-file-button').click()
         await page.getByTestId('file-rename-field').fill(name)
         await page.keyboard.press('Enter')
-        await page
+        const newFile = page
           .locator('[data-testid="file-pane-scroll-container"] button')
           .filter({ hasText: name })
-          .click()
+
+        await expect(newFile).toBeVisible()
+        await newFile.click()
       })
     },
 
@@ -585,6 +588,15 @@ export async function getUtils(page: Page, test_?: typeof test) {
       })
     },
 
+    /**
+     * @deprecated Sorry I don't have time to fix this right now, but runs like
+     * the one linked below show me that setting the open panes in this manner is not reliable.
+     * You can either set `openPanes` as a part of the same initScript we run in setupElectron/setup,
+     * or you can imperatively open the panes with functions like {openKclCodePanel}
+     * (or we can make a general openPane function that takes a paneId).,
+     * but having a separate initScript does not seem to work reliably.
+     * @link https://github.com/KittyCAD/modeling-app/actions/runs/10731890169/job/29762700806?pr=3807#step:20:19553
+     */
     panesOpen: async (paneIds: PaneId[]) => {
       return test?.step(`Setting ${paneIds} panes to be open`, async () => {
         await page.addInitScript(

e2e/playwright/testing-settings.spec.ts

@@ -288,7 +288,7 @@ test.describe('Testing settings', () => {
       })
 
       await test.step('Refresh the application and see project setting applied', async () => {
-        await page.reload()
+        await page.reload({ waitUntil: 'domcontentloaded' })
 
         await expect(logoLink).toHaveCSS('--primary-hue', projectThemeColor)
         await settingsCloseButton.click()
@@ -368,10 +368,10 @@ test.describe('Testing settings', () => {
       })
 
       const {
-        panesOpen,
+        openKclCodePanel,
+        openFilePanel,
         createAndSelectProject,
         pasteCodeInEditor,
-        clickPane,
         createNewFileAndSelect,
         editorTextMatches,
       } = await getUtils(page, test)
@@ -379,8 +379,6 @@ test.describe('Testing settings', () => {
       await page.setViewportSize({ width: 1200, height: 500 })
       page.on('console', console.log)
 
-      await panesOpen([])
-
       await test.step('Precondition: No projects exist', async () => {
         await expect(page.getByTestId('home-section')).toBeVisible()
         const projectLinksPre = page.getByTestId('project-link')
@@ -389,14 +387,14 @@ test.describe('Testing settings', () => {
 
       await createAndSelectProject('project-000')
 
-      await clickPane('code')
+      await openKclCodePanel()
       const kclCube = await fsp.readFile(
         'src/wasm-lib/tests/executor/inputs/cube.kcl',
         'utf-8'
       )
       await pasteCodeInEditor(kclCube)
 
-      await clickPane('files')
+      await openFilePanel()
       await createNewFileAndSelect('2.kcl')
 
       const kclCylinder = await fsp.readFile(

e2e/playwright/text-to-cad-tests.spec.ts

@@ -690,40 +690,53 @@ test(
   'Text-to-CAD functionality',
   { tag: '@electron' },
   async ({ browserName }, testInfo) => {
+    const projectName = 'project-000'
+    const prompt = 'lego 2x4'
+    const textToCadFileName = 'lego-2x4.kcl'
+
     const { electronApp, page, dir } = await setupElectron({ testInfo })
     const fileExists = () =>
-      fs.existsSync(join(dir, 'project-000', 'lego-2x4.kcl'))
+      fs.existsSync(join(dir, projectName, textToCadFileName))
 
-    const { createAndSelectProject, panesOpen } = await getUtils(page, test)
+    const {
+      createAndSelectProject,
+      openFilePanel,
+      openKclCodePanel,
+      waitForPageLoad,
+    } = await getUtils(page, test)
 
     await page.setViewportSize({ width: 1200, height: 500 })
 
-    await panesOpen(['code', 'files'])
+    // Locators
+    const projectMenuButton = page.getByRole('button', { name: projectName })
+    const textToCadFileButton = page.getByRole('listitem').filter({
+      has: page.getByRole('button', { name: textToCadFileName }),
+    })
+    const textToCadComment = page.getByText(
+      `// Generated by Text-to-CAD: ${prompt}`
+    )
 
     // Create and navigate to the project
     await createAndSelectProject('project-000')
 
     // Wait for Start Sketch otherwise you will not have access Text-to-CAD command
-    await expect(
-      page.getByRole('button', { name: 'Start Sketch' })
-    ).toBeEnabled({
-      timeout: 20_000,
-    })
+    await waitForPageLoad()
+    await openFilePanel()
+    await openKclCodePanel()
 
     await test.step(`Test file creation`, async () => {
-      await sendPromptFromCommandBar(page, 'lego 2x4')
+      await sendPromptFromCommandBar(page, prompt)
       // File is considered created if it shows up in the Project Files pane
-      const file = page.getByRole('button', { name: 'lego-2x4.kcl' })
-      await expect(file).toBeVisible({ timeout: 20_000 })
+      await expect(textToCadFileButton).toBeVisible({ timeout: 20_000 })
       expect(fileExists()).toBeTruthy()
     })
 
     await test.step(`Test file navigation`, async () => {
-      const file = page.getByRole('button', { name: 'lego-2x4.kcl' })
-      await file.click()
-      const kclComment = page.getByText('Lego 2x4 Brick')
+      await expect(projectMenuButton).toContainText('main.kcl')
+      await textToCadFileButton.click()
       // File can be navigated and loaded assuming a specific KCL comment is loaded into the KCL code pane
-      await expect(kclComment).toBeVisible({ timeout: 20_000 })
+      await expect(textToCadComment).toBeVisible({ timeout: 20_000 })
+      await expect(projectMenuButton).toContainText(textToCadFileName)
     })
 
     await test.step(`Test file deletion on rejection`, async () => {
@@ -737,6 +750,8 @@ test(
       )
       await expect(submittingToastMessage).toBeVisible()
       expect(fileExists()).toBeFalsy()
+      // Confirm we've navigated back to the main.kcl file after deletion
+      await expect(projectMenuButton).toContainText('main.kcl')
     })
 
     await electronApp.close()