test: install playwright

.gitignore

@@ -55,4 +55,6 @@ Network Trash Folder
 Temporary Items
 .apdisk
 
-package
+package
+test-results/
+playwright-report/

package.json

@@ -25,13 +25,19 @@
     "dist"
   ],
   "scripts": {
-    "prepack": "nuxt-module-build",
     "dev": "nuxi dev playground",
-    "dev:build": "nuxi build playground",
     "dev:prepare": "nuxt-module-build --stub && nuxi prepare playground",
-    "release": "npm run lint && npm run typecheck && npm run prepack && changelogen --release && npm publish && git push --follow-tags",
+    "dev:build:ssr": "nuxi build playground",
+    "dev:build:spa": "cross-env NUXT_SSR=false nuxi build playground",
+    "test": "playwright test --ui",
+    "test:prod:ssr": "cross-env NODE_ENV=production && npm run dev:build:ssr && playwright test",
+    "test:prod:spa": "cross-env NODE_ENV=production && npm run dev:build:spa && playwright test",
+    "test:prod": "npm run test:prod:ssr && npm run test:prod:spa",
     "lint": "eslint .",
-    "typecheck": "nuxi typecheck"
+    "typecheck": "nuxi typecheck",
+    "prepack": "nuxt-module-build",
+    "release:pre": "npm run typecheck && npm run lint && npm run prepack",
+    "release": "npm run release:pre && npm run test:prod && changelogen --release && npm publish && git push --follow-tags"
   },
   "dependencies": {
     "@directus/sdk": "^16.0.0",
@@ -44,6 +50,7 @@
     "@nuxt/eslint-config": "^0.3.13",
     "@nuxt/module-builder": "^0.5.5",
     "@nuxt/schema": "^3.10.3",
+    "@playwright/test": "^1.44.1",
     "changelogen": "^0.5.5",
     "eslint": "^8.57.0",
     "nuxt": "^3.11.0",
@@ -56,4 +63,4 @@
   "peerDependencies": {
     "@vue/apollo-composable": "^4.0.1"
   }
-}
+}

playwright.config.ts

@@ -0,0 +1,39 @@
+import { defineConfig, devices } from '@playwright/test'
+
+/**
+ * See https://playwright.dev/docs/test-configuration.
+ */
+export default defineConfig({
+  testDir: './tests',
+  /* Run tests in files in parallel */
+  fullyParallel: true,
+  /* Fail the build on CI if you accidentally left test.only in the source code. */
+  forbidOnly: !!process.env.CI,
+  /* Retry on CI only */
+  retries: process.env.CI ? 2 : 0,
+  /* Opt out of parallel tests on CI. */
+  workers: process.env.CI ? 1 : undefined,
+  /* Reporter to use. See https://playwright.dev/docs/test-reporters */
+  reporter: 'html',
+
+  /* Run your local dev server before starting the tests */
+  webServer: {
+    command: process.env.NODE_ENV === 'production' ? 'nuxi preview playground' : 'nuxi dev playground',
+    url: 'http://localhost:3000',
+    reuseExistingServer: !process.env.CI,
+    timeout: 120000,
+  },
+
+  use: {
+    baseURL: 'http://localhost:3000',
+    trace: 'on-first-retry',
+  },
+
+  /* Configure projects for major browsers */
+  projects: [
+    {
+      name: 'chromium',
+      use: { ...devices['Desktop Chrome'] },
+    },
+  ],
+})

tests/basic.spec.ts

@@ -0,0 +1,8 @@
+import { test, expect } from '@playwright/test'
+import { goto, login, reload } from './utils'
+
+test('should be logged in', async ({ browser }) => {
+})
+
+test('should refresh session', async ({ browser }) => {
+})

tests/utils/index.ts

@@ -0,0 +1,27 @@
+import { type Page, expect } from '@playwright/test'
+
+export const credentials = { email: '[email protected]', password: 'abc123' }
+
+export async function goto(page: Page, path: string) {
+  await page.goto(path)
+  await expect(page.getByTestId('hydration-check')).toBeAttached()
+}
+
+export async function reload(page: Page) {
+  await page.reload()
+  await expect(page.getByTestId('hydration-check')).toBeAttached()
+}
+
+export async function login(page: Page) {
+  await goto(page, '/auth/login')
+  await expect(page.getByRole('heading', { name: 'Login' })).toBeVisible()
+  await page.getByPlaceholder('email').fill(credentials.email)
+  await page.getByPlaceholder('password').fill(credentials.password)
+  await page.getByRole('button', { name: 'Login', exact: true }).click()
+  await expect(page.getByRole('heading', { name: 'Home' })).toBeVisible()
+}
+
+export async function logout(page: Page) {
+  await page.getByRole('button', { name: 'Logout' }).click()
+  await expect(page.getByRole('heading', { name: 'Login' })).toBeVisible()
+}