Nadro/3394/project name regression (#3609)

* exporting createProjectAndRenameIt, going to be used for a third time

* feat: added e2e test to test project name retention after onboarding plays

* fix: formatting, adding Page type

* fix: resolved linter warnings, wrong syntax and function name typo

e2e/playwright/projects.spec.ts

@@ -1,4 +1,4 @@
-import { test, expect } from '@playwright/test'
+import { test, expect, Page } from '@playwright/test'
 import {
   doExport,
   getUtils,
@@ -6,6 +6,7 @@ import {
   Paths,
   setupElectron,
   tearDown,
+  createProjectAndRenameIt,
 } from './test-utils'
 import fsp from 'fs/promises'
 import fs from 'fs'
@@ -531,33 +532,23 @@ test(
 
     page.on('console', console.log)
 
-    const createProjectAndRenameIt = async (name: string) =>
+    const createProjectAndRenameItTest = async ({
-      test.step(`Create and rename project ${name}`, async () => {
+      name,
-        await page.getByRole('button', { name: 'New project' }).click()
+      page,
-        await expect(page.getByText('Successfully created')).toBeVisible()
+    }: {
-        await expect(page.getByText('Successfully created')).not.toBeVisible()
+      name: string
-
+      page: Page
-        await expect(page.getByText(`project-000`)).toBeVisible()
+    }) => {
-        await page.getByText(`project-000`).hover()
+      await test.step(`Create and rename project ${name}`, async () => {
-        await page.getByText(`project-000`).focus()
+        await createProjectAndRenameIt({ name, page })
-
-        await page.getByLabel('sketch').first().click()
-
-        await page.waitForTimeout(100)
-
-        // type "updated project name"
-        await page.keyboard.press('Backspace')
-        await page.keyboard.type(name)
-
-        await page.getByLabel('checkmark').last().click()
       })
+    }
 
     // we need to create the folders so that the order is correct
     // creating them ahead of time with fs tools means they all have the same timestamp
-    await createProjectAndRenameIt('router-template-slate')
+    await createProjectAndRenameItTest({ name: 'router-template-slate', page })
-    // await createProjectAndRenameIt('focusrite_scarlett_mounting_braket')
+    await createProjectAndRenameItTest({ name: 'bracket', page })
-    await createProjectAndRenameIt('bracket')
+    await createProjectAndRenameItTest({ name: 'lego', page })
-    await createProjectAndRenameIt('lego')
 
     await test.step('delete the middle project, i.e. the bracket project', async () => {
       const project = page.getByText('bracket')
@@ -627,33 +618,23 @@ test(
 
     page.on('console', console.log)
 
-    const createProjectAndRenameIt = async (name: string) =>
+    const createProjectAndRenameItTest = async ({
-      test.step(`Create and rename project ${name}`, async () => {
+      name,
-        await page.getByRole('button', { name: 'New project' }).click()
+      page,
-        await expect(page.getByText('Successfully created')).toBeVisible()
+    }: {
-        await expect(page.getByText('Successfully created')).not.toBeVisible()
+      name: string
-
+      page: Page
-        await expect(page.getByText(`project-000`)).toBeVisible()
+    }) => {
-        await page.getByText(`project-000`).hover()
+      await test.step(`Create and rename project ${name}`, async () => {
-        await page.getByText(`project-000`).focus()
+        await createProjectAndRenameIt({ name, page })
-
-        await page.getByLabel('sketch').first().click()
-
-        await page.waitForTimeout(100)
-
-        // type "updated project name"
-        await page.keyboard.press('Backspace')
-        await page.keyboard.type(name)
-
-        await page.getByLabel('checkmark').last().click()
       })
+    }
 
     // we need to create the folders so that the order is correct
     // creating them ahead of time with fs tools means they all have the same timestamp
-    await createProjectAndRenameIt('router-template-slate')
+    await createProjectAndRenameItTest({ name: 'router-template-slate', page })
-    // await createProjectAndRenameIt('focusrite_scarlett_mounting_braket')
+    await createProjectAndRenameItTest({ name: 'bracket', page })
-    await createProjectAndRenameIt('bracket')
+    await createProjectAndRenameItTest({ name: 'lego', page })
-    await createProjectAndRenameIt('lego')
 
     await test.step('should be shorted by modified initially', async () => {
       const lastModifiedButton = page.getByRole('button', {
@@ -1705,3 +1686,47 @@ test.describe('Renaming in the file tree', () => {
     }
   )
 })
+
+test(
+  'Original project name persist after onboarding',
+  { tag: '@electron' },
+  async ({ browserName }, testInfo) => {
+    const { electronApp, page } = await setupElectron({
+      testInfo,
+    })
+    await page.setViewportSize({ width: 1200, height: 500 })
+
+    const getAllProjects = () => page.getByTestId('project-link').all()
+    page.on('console', console.log)
+
+    await test.step('Should create and name a project called wrist brace', async () => {
+      await createProjectAndRenameIt({ name: 'wrist brace', page })
+    })
+
+    await test.step('Should go through onboarding', async () => {
+      await page.getByTestId('user-sidebar-toggle').click()
+      await page.getByTestId('user-settings').click()
+      await page.getByRole('button', { name: 'Replay Onboarding' }).click()
+
+      const numberOfOnboardingSteps = 12
+      for (let clicks = 0; clicks < numberOfOnboardingSteps; clicks++) {
+        await page.getByTestId('onboarding-next').click()
+      }
+
+      await page.getByTestId('project-sidebar-toggle').click()
+    })
+
+    await test.step('Should go home after onboarding is completed', async () => {
+      await page.getByRole('button', { name: 'Go to Home' }).click()
+    })
+
+    await test.step('Should show the original project called wrist brace', async () => {
+      const projectNames = ['Tutorial Project 00', 'wrist brace']
+      for (const [index, projectLink] of (await getAllProjects()).entries()) {
+        await expect(projectLink).toContainText(projectNames[index])
+      }
+    })
+
+    await electronApp.close()
+  }
+)

e2e/playwright/test-utils.ts

@@ -209,7 +209,7 @@ export const wiggleMove = async (
 }
 
 export const circleMove = async (
-  page: any,
+  page: Page,
   x: number,
   y: number,
   steps: number,
@@ -892,3 +892,29 @@ export async function isOutOfViewInScrollContainer(
 
   return isOutOfView
 }
+
+export async function createProjectAndRenameIt({
+  name,
+  page,
+}: {
+  name: string
+  page: Page
+}) {
+  await page.getByRole('button', { name: 'New project' }).click()
+  await expect(page.getByText('Successfully created')).toBeVisible()
+  await expect(page.getByText('Successfully created')).not.toBeVisible()
+
+  await expect(page.getByText(`project-000`)).toBeVisible()
+  await page.getByText(`project-000`).hover()
+  await page.getByText(`project-000`).focus()
+
+  await page.getByLabel('sketch').first().click()
+
+  await page.waitForTimeout(100)
+
+  // type the name passed in
+  await page.keyboard.press('Backspace')
+  await page.keyboard.type(name)
+
+  await page.getByLabel('checkmark').last().click()
+}