frontend: desktop e2e onboarding test

frontend/apps/desktop/package.json

@@ -16,7 +16,7 @@
   "main": ".vite/build/main.js",
   "scripts": {
     "dev": "electron-forge start",
-    "e2e": "playwright test",
+    "test": "playwright test",
     "format": "prettier \"**/*.{ts,tsx,md,mdx,json}\" --check  --ignore-path ../../../.prettierignore",
     "lint": "echo TODO",
     "make": "electron-forge make",

frontend/apps/desktop/playwright.config.ts

@@ -1,7 +1,7 @@
 import {PlaywrightTestConfig} from '@playwright/test'
 
 const config: PlaywrightTestConfig = {
-  testDir: './e2e',
+  testDir: './test',
   maxFailures: 2,
 }
 

frontend/apps/desktop/src/daemon.ts

@@ -38,6 +38,8 @@ const prodDaemonBinaryPath = join(
 
 const userDataDir = join(app.getPath('userData'), 'daemon')
 
+console.log(`== ~ userDataDir:`, userDataDir)
+
 let goDaemonExecutablePath =
   process.env.NODE_ENV == 'development'
     ? devDaemonBinaryPath

frontend/apps/desktop/test/onboarding.spec.ts

@@ -0,0 +1,86 @@
+import {Page, test, expect} from '@playwright/test'
+import {alias, bio, electronApp} from './test-setup'
+
+let page: Page
+
+test('Onboarding', async () => {
+  page = await electronApp.firstWindow()
+
+  await page.waitForSelector('[role=heading]')
+  // const text = await page.$eval(
+  //   '[data-testid="step-title"]',
+  //   (el) => el.textContent,
+  // )
+  const welcomeTitles = await page.getByRole('heading').allTextContents()
+  expect(welcomeTitles).toEqual(['Welcome to', 'Mintter'])
+
+  await page.getByRole('button', {name: 'NEXT'}).click()
+
+  // Mnemonics Step
+  const mnemonicsTitles = await page.getByRole('heading').allTextContents()
+  expect(mnemonicsTitles).toEqual(['Your Keys.', 'Your Data.'])
+  const mnemonics = await page.getByTestId('mnemonics')
+  expect(mnemonics).toBeVisible()
+
+  // check prev button
+  expect(await page.getByRole('button', {name: 'PREV'})).toBeVisible()
+  expect(await page.getByRole('button', {name: 'PREV'})).not.toBeDisabled()
+
+  // check if the mnemonics are the correct amount of words
+  let text = (await mnemonics.allTextContents())[0]
+  let words = text?.split(', ')
+  expect(words).toHaveLength(12)
+
+  // toggle own seed textarea
+  await page.getByTestId('ownseed-btn').click()
+  const textarea = await page.getByPlaceholder('food barrel buzz ...')
+  expect(textarea).toBeVisible()
+  await page.getByTestId('ownseed-btn').click({force: true})
+
+  // continue to next step
+  await page.getByRole('button', {name: 'NEXT'}).click()
+
+  // check Profile step title
+  const profileTitles = await page.getByRole('heading').allTextContents()
+  expect(profileTitles).toEqual(['Profile', 'Information'])
+
+  // check profile alias input
+  let inputAlias = await page.getByPlaceholder(
+    `Readable alias or username. Doesn't have to be unique.`,
+  )
+  expect(inputAlias).toBeVisible()
+  await inputAlias.type(alias)
+
+  // check profile bio input
+  let inputBio = await page.getByPlaceholder(`A little bit about yourself...`)
+  expect(inputBio).toBeVisible()
+  await inputBio.type(bio)
+
+  // check prev button
+  expect(await page.getByRole('button', {name: 'PREV'})).toBeVisible()
+  expect(await page.getByRole('button', {name: 'PREV'})).not.toBeDisabled()
+
+  // continue to next step
+  await page.getByRole('button', {name: 'NEXT'}).click()
+
+  await page.waitForTimeout(10)
+  // check Analytics step title
+  const analyticsTitles = await page.getByRole('heading').allTextContents()
+  expect(analyticsTitles).toEqual(['Crash', 'Analytics'])
+
+  // check prev button
+  expect(await page.getByRole('button', {name: 'PREV'})).toBeVisible()
+  expect(await page.getByRole('button', {name: 'PREV'})).not.toBeDisabled()
+
+  // continue to next step
+  await page.getByRole('button', {name: 'NEXT'}).click()
+  // await page.waitForTimeout(10000)
+
+  // check finish step
+  await page.waitForTimeout(10)
+  // check Analytics step title
+  const finishTitles = await page.getByRole('heading').allTextContents()
+  expect(finishTitles).toEqual(['You are Ready!'])
+
+  await page.getByRole('button', {name: 'Open Mintter App'}).click()
+})

frontend/apps/desktop/test/test-setup.ts

@@ -0,0 +1,52 @@
+import {
+  ElectronApplication,
+  Page,
+  _electron as electron,
+  expect,
+  test,
+} from '@playwright/test'
+import path from 'path'
+import {findLatestBuild, parseElectronApp} from 'electron-playwright-helpers'
+
+let electronApp: ElectronApplication
+
+test.beforeAll(async () => {
+  // remove the app data:
+
+  // find the latest build in the out directory
+  const latestBuild = findLatestBuild()
+
+  // parse the directory and find paths and other info
+  const appInfo = parseElectronApp(latestBuild)
+
+  // set the CI environment variable to true
+  process.env.CI = 'e2e'
+
+  electronApp = await electron.launch({
+    args: [appInfo.main],
+    executablePath: appInfo.executable,
+  })
+
+  electronApp.on('window', async (page) => {
+    const filename = page.url()?.split('/').pop()
+
+    // capture errors
+    page.on('pageerror', (error) => {
+      console.error(error)
+    })
+    // capture console messages
+    page.on('console', (msg) => {
+      console.log(msg.text())
+    })
+  })
+})
+
+test.afterAll(async () => {
+  // close app
+  await electronApp.close()
+})
+
+export {electronApp}
+
+export const alias = 'test alias'
+export const bio = 'some random test bio'

frontend/packages/app/package.json

@@ -7,7 +7,9 @@
   "private": true,
   "scripts": {
     "lint": "eslint .",
-    "format": "prettier \"**/*.{ts,tsx,md,mdx,json}\" --check --ignore-path ../../../.prettierignore"
+    "format": "prettier \"**/*.{ts,tsx,md,mdx,json}\" --check --ignore-path ../../../.prettierignore",
+    "test": "echo TODO",
+    "typecheck": "tsc --noEmit"
   },
   "dependencies": {
     "@bufbuild/connect-web": "0.7.0",

frontend/packages/app/src/pages/onboarding.tsx

@@ -244,6 +244,7 @@ function Mnemonics(props: OnboardingStepProps) {
                   fontSize={18}
                   fontWeight="700"
                   display="block"
+                  testID="mnemonics"
                 >
                   {mnemonics.data?.join(', ')}
                 </SizableText>
@@ -273,6 +274,7 @@ function Mnemonics(props: OnboardingStepProps) {
               <Button
                 size="$2"
                 theme="green"
+                testID="ownseed-btn"
                 onPress={() => {
                   if (useOwnSeed) {
                     // refetch here is so that user always sees new words when they click "generate a new seed"
@@ -346,11 +348,12 @@ function Profile(props: OnboardingStepProps) {
                   borderColor="transparent"
                   borderWidth={0}
                 >
-                  <Label size="$2" htmlFor="alias">
+                  <Label size="$2" htmlFor="alias" role="complementary">
                     Alias
                   </Label>
                   <Input
                     id="alias"
+                    testID="input-alias"
                     onChangeText={(val) => (submitValue.current.alias = val)}
                     placeholder="Readable alias or username. Doesn't have to be unique."
                   />
@@ -361,7 +364,7 @@ function Profile(props: OnboardingStepProps) {
                   borderColor="transparent"
                   borderWidth={0}
                 >
-                  <Label size="$2" htmlFor="bio">
+                  <Label size="$2" htmlFor="bio" role="complementary">
                     Bio
                   </Label>
                   <TextArea

frontend/packages/shared/package.json

@@ -3,13 +3,10 @@
   "version": "0.1.0",
   "main": "src/index.ts",
   "scripts": {
-    "dev": "tsc -w",
-    "build": "tsc ",
-    "test": "vitest --run",
-    "test:watch": "vitest --watch",
     "lint": "eslint .",
     "format": "prettier \"**/*.{ts,tsx,md,mdx,json}\" --check --ignore-path ../../../.prettierignore",
-    "validate": "yarn lint && yarn test"
+    "test": "echo TODO",
+    "typecheck": "tsc --noEmit"
   },
   "keywords": [],
   "author": "",

frontend/packages/ui/package.json

@@ -17,7 +17,9 @@
     "build": "tamagui-build",
     "format": "prettier \"**/*.{ts,tsx,md,mdx,json}\" --check --ignore-path ../../../.prettierignore",
     "clean": "tamagui-build clean",
-    "clean:build": "tamagui-build clean:build"
+    "clean:build": "tamagui-build clean:build",
+    "test": "echo TODO",
+    "typecheck": "tsc --noEmit"
   },
   "dependencies": {
     "@tamagui/animations-react-native": "1.52.5",

package.json

@@ -6,7 +6,7 @@
     "lint:fix": "turbo lint --continue -- --fix --cache --cache-location 'node_modules/.cache/.eslintcache'",
     "format": "turbo format --continue -- --cache --cache-location='node_modules/.cache/.prettiercache'",
     "format:fix": "turbo format --continue -- --write --cache --cache-location='node_modules/.cache/.prettiercache'",
-    "test": "yarn workspaces foreach run test",
+    "test": "turbo test --continue",
     "validate": "yarn lint && yarn format",
     "site": "yarn workspace @mintter/site dev",
     "site:prod": "yarn workspace @mintter/site build",

turbo.json

@@ -14,6 +14,7 @@
     "dev": {
       "cache": false,
       "persistent": true
-    }
+    },
+    "test": {}
   }
 }