test: initial test

.env.example

@@ -1,2 +1,5 @@
 CLERK_PUBLISHABLE_KEY=your_publishable_key
 CLERK_SECRET_KEY=your_secret_key
+
+E2E_CLERK_USER_USERNAME=
+E2E_CLERK_USER_PASSWORD=

.gitignore

@@ -23,3 +23,5 @@ logs
 !.env.example
 
 .vscode
+
+test-results

e2e/app.spec.ts

@@ -0,0 +1,34 @@
+import { setupClerkTestingToken } from '@clerk/testing/playwright'
+import { test } from '@nuxt/test-utils/playwright'
+
+test.describe('app', () => {
+  test('sign -in', async ({ page, goto }) => {
+    await setupClerkTestingToken({ page })
+
+    await goto('/', { waitUntil: 'hydration' })
+    // await expect(page.locator("h1")).toContainText("Sign In")
+    await page.goto('/dashboard')
+    await page.waitForSelector('.cl-signIn-root', { state: 'attached' })
+    await page.locator('input[name=identifier]').fill(process.env.E2E_CLERK_USER_USERNAME!)
+    await page.getByRole('button', { name: 'Continue', exact: true }).click()
+    await page.locator('input[name=password]').fill(process.env.E2E_CLERK_USER_PASSWORD!)
+    await page.getByRole('button', { name: 'Continue', exact: true }).click()
+    await page.waitForURL('**/dashboard')
+  })
+
+  test('sign up', async ({ page }) => {
+    await setupClerkTestingToken({ page })
+
+    await page.goto('/sign-up')
+    // await expect(page.locator("h1")).toContainText("Sign Up");
+    await page.waitForSelector('.cl-signUp-root', { state: 'attached' })
+    await page.locator('input[name=username]').fill(`user${Date.now()}`)
+    await page.locator('input[name=emailAddress]').fill(`user${Date.now()}[email protected]`)
+    await page.locator('input[name=password]').fill(`Pass!@${Date.now()}`)
+    await page.getByRole('button', { name: 'Continue', exact: true }).click()
+    await page.waitForSelector('.cl-signUp-emailCode', { state: 'attached' })
+    await page.locator('input[id=digit-0-field]').fill('424242')
+    await page.getByRole('button', { name: 'Continue', exact: true }).click()
+    await page.waitForURL('**/dashboard')
+  })
+})

e2e/global.setup.ts

@@ -0,0 +1,12 @@
+import { clerkSetup } from '@clerk/testing/playwright'
+import { test as setup } from '@playwright/test'
+
+setup('global setup', async () => {
+  await clerkSetup()
+
+  if (!process.env.E2E_CLERK_USER_USERNAME || !process.env.E2E_CLERK_USER_PASSWORD) {
+    throw new Error(
+      'Please provide E2E_CLERK_USER_USERNAME and E2E_CLERK_USER_PASSWORD environment variables.',
+    )
+  }
+})

package.json

@@ -1,5 +1,6 @@
 {
   "name": "nuxt-app",
+  "type": "module",
   "private": true,
   "scripts": {
     "build": "nuxt build",
@@ -8,7 +9,8 @@
     "preview": "nuxt preview",
     "postinstall": "nuxt prepare",
     "lint": "eslint .",
-    "lint:fix": "eslint . --fix"
+    "lint:fix": "eslint . --fix",
+    "test:e2e": "playwright test"
   },
   "dependencies": {
     "@nuxt/image": "^1.7.0",
@@ -19,8 +21,11 @@
   },
   "devDependencies": {
     "@antfu/eslint-config": "^2.21.2",
+    "@clerk/testing": "^1.1.8",
+    "@nuxt/test-utils": "^3.13.1",
     "@nuxtjs/google-fonts": "^3.2.0",
     "@nuxtjs/tailwindcss": "^6.12.0",
+    "@playwright/test": "^1.45.1",
     "@types/node": "^20.14.9",
     "eslint": "^9.6.0",
     "nuxt": "^3.12.3",

playwright.config.mts

@@ -0,0 +1,30 @@
+import { fileURLToPath } from 'node:url'
+import { defineConfig, devices } from '@playwright/test'
+import type { ConfigOptions } from '@nuxt/test-utils/playwright'
+
+export default defineConfig<ConfigOptions>({
+  testDir: fileURLToPath(new URL('e2e', import.meta.url)),
+  outputDir: 'test-results/',
+  webServer: {
+    command: 'pnpm dev',
+  },
+  use: {
+    headless: false,
+    nuxt: {
+      rootDir: fileURLToPath(new URL('.', import.meta.url)),
+    },
+  },
+  projects: [
+    {
+      name: 'global setup',
+      testMatch: /global\.setup\.ts/,
+    },
+    {
+      name: 'Desktop Chrome',
+      use: {
+        ...devices['Desktop Chrome'],
+      },
+      dependencies: ['global setup'],
+    },
+  ],
+})