test: add Playwright (#694)

* test: add Playwright to local provider

* test: improve local provider spec to check for page reload, refresh and sign out

* test: add basic tests for refresh provider

* chore: update github actions versions

* test: remove timeout check for refresh provider

* test: use a better name

---------

Co-authored-by: Zoey <[email protected]>

Author: phoenix-ru

.github/workflows/ci.yaml

@@ -8,20 +8,21 @@ on:
 
 env:
   NODE_VER: 18.19.1
+  CI: true
 
 jobs:
   test-module:
     runs-on: ubuntu-latest
 
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
 
       - name: Use Node.js ${{ env.NODE_VER }}
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
           node-version: ${{ env.NODE_VER }}
 
-      - uses: pnpm/action-setup@v2
+      - uses: pnpm/action-setup@v3
         name: Install pnpm
         id: pnpm-install
         with:
@@ -48,14 +49,14 @@ jobs:
         working-directory: ./playground-local
 
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
 
       - name: Use Node.js ${{ env.NODE_VER }}
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
           node-version: ${{ env.NODE_VER }}
 
-      - uses: pnpm/action-setup@v2
+      - uses: pnpm/action-setup@v3
         name: Install pnpm
         id: pnpm-install
         with:
@@ -64,26 +65,29 @@ jobs:
       # Install deps
       - run: pnpm i
 
+      - name: Install Playwright Browsers
+        run: pnpm exec playwright install --with-deps
+
       # Check building
       - run: pnpm build
 
-      # start prod-app and curl from it
-      - run: "timeout 60 pnpm start & (sleep 45 && curl --fail localhost:3000)"
+      - name: Run Playwright tests using Vitest
+        run: pnpm test:e2e
 
   test-playground-refresh:
     runs-on: ubuntu-latest
     defaults:
       run:
         working-directory: ./playground-refresh
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
 
       - name: Use Node.js ${{ env.NODE_VER }}
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
           node-version: ${{ env.NODE_VER }}
 
-      - uses: pnpm/action-setup@v2
+      - uses: pnpm/action-setup@v3
         name: Install pnpm
         id: pnpm-install
         with:
@@ -92,29 +96,29 @@ jobs:
       # Install deps
       - run: pnpm i
 
+      - name: Install Playwright Browsers
+        run: pnpm exec playwright install --with-deps
+
       # Check building
       - run: pnpm build
 
-      # start prod-app and curl from it
-      - run: "timeout 60 pnpm start & (sleep 45 && curl --fail localhost:$PORT)"
-        env:
-          AUTH_ORIGIN: "http://localhost:3002"
-          PORT: 3002
+      - name: Run Playwright tests using Vitest
+        run: pnpm test:e2e
 
   test-playground-authjs:
     runs-on: ubuntu-latest
     defaults:
       run:
         working-directory: ./playground-authjs
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
 
       - name: Use Node.js ${{ env.NODE_VER }}
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
           node-version: ${{ env.NODE_VER }}
 
-      - uses: pnpm/action-setup@v2
+      - uses: pnpm/action-setup@v3
         name: Install pnpm
         id: pnpm-install
         with:

.github/workflows/reproduire.yml

@@ -10,7 +10,7 @@ jobs:
   reproduire:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
       - uses: Hebilicious/reproduire@4b686ae9cbb72dad60f001d278b6e3b2ce40a9ac # v0.0.9-mp
         with:
           label: needs-reproduction

package.json

@@ -24,11 +24,11 @@
     "dev:prepare": "nuxt-module-build build --stub"
   },
   "dependencies": {
-    "@nuxt/kit": "^3.10.2",
+    "@nuxt/kit": "^3.10.3",
     "defu": "^6.1.4",
-    "h3": "^1.10.1",
+    "h3": "^1.11.1",
     "knitwork": "^1.0.0",
-    "nitropack": "^2.8.1",
+    "nitropack": "^2.9.1",
     "requrl": "^3.0.2",
     "ufo": "^1.4.0"
   },
@@ -37,11 +37,11 @@
   },
   "devDependencies": {
     "@nuxt/module-builder": "^0.5.5",
-    "@nuxt/schema": "^3.10.2",
+    "@nuxt/schema": "^3.10.3",
     "@nuxtjs/eslint-config-typescript": "^12.1.0",
-    "@types/node": "^18.19.14",
+    "@types/node": "^18.19.21",
     "eslint": "^8.56.0",
-    "nuxt": "^3.10.2",
+    "nuxt": "^3.10.3",
     "ofetch": "^1.3.3",
     "ts-essentials": "^9.4.1",
     "typescript": "^5.3.3",

playground-local/.gitignore

@@ -0,0 +1,5 @@
+node_modules/
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/

playground-local/app.vue

@@ -10,31 +10,33 @@ const password = ref('')
 
 <template>
   <div>
-    <pre>Status: {{ status }}</pre>
+    <pre>Status: <span data-testid="status">{{ status }}</span></pre>
     <pre>Data: {{ data || 'no session data present, are you logged in?' }}</pre>
     <pre>Last refreshed at: {{ lastRefreshedAt || 'no refresh happened' }}</pre>
     <pre>JWT token: {{ token || 'no token present, are you logged in?' }}</pre>
+
     <form @submit.prevent="signIn({ username, password })">
-      <input v-model="username" type="text" placeholder="Username">
-      <input v-model="password" type="password" placeholder="Password">
-      <button type="submit">
+      <input v-model="username" type="text" placeholder="Username" data-testid="username">
+      <input v-model="password" type="password" placeholder="Password" data-testid="password">
+      <button type="submit" data-testid="submit">
         sign in
       </button>
     </form>
+
     <br>
     <button @click="signIn({ username, password }, { callbackUrl: '/protected/globally' })">
       sign in (with redirect to protected page)
     </button>
     <br>
-    <button @click="signOut({ callbackUrl: '/signout' })">
+    <button data-testid="signout" @click="signOut({ callbackUrl: '/signout' })">
       sign out
     </button>
     <br>
-    <button @click="getSession({ required: false })">
+    <button data-testid="refresh-required-false" @click="getSession({ required: false })">
       refresh session (required: false)
     </button>
     <br>
-    <button @click="getSession({ required: true, callbackUrl: '/' })">
+    <button data-testid="refresh-required-true" @click="getSession({ required: true, callbackUrl: '/' })">
       refresh session (required: true)
     </button>
     <br>

playground-local/package.json

@@ -8,17 +8,23 @@
     "build": "nuxi build",
     "start": "nuxi preview",
     "generate": "nuxi generate",
-    "postinstall": "nuxt prepare"
+    "postinstall": "nuxt prepare",
+    "test:e2e": "vitest"
   },
   "dependencies": {
     "jsonwebtoken": "^9.0.2",
     "zod": "^3.22.4"
   },
   "devDependencies": {
+    "@nuxt/test-utils": "^3.11.0",
+    "@playwright/test": "^1.42.0",
     "@types/jsonwebtoken": "^9.0.5",
+    "@types/node": "^18.19.14",
+    "@vue/test-utils": "^2.4.4",
     "eslint": "^8.56.0",
-    "nuxt": "^3.10.1",
+    "nuxt": "^3.10.3",
     "typescript": "^5.3.3",
+    "vitest": "^1.3.1",
     "vue-tsc": "^1.8.27"
   }
 }

playground-local/playwright.config.ts

@@ -0,0 +1,77 @@
+import { defineConfig, devices } from '@playwright/test'
+
+/**
+ * Read environment variables from file.
+ * https://github.com/motdotla/dotenv
+ */
+// require('dotenv').config();
+
+/**
+ * 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',
+  /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
+  use: {
+    /* Base URL to use in actions like `await page.goto('/')`. */
+    // baseURL: 'http://127.0.0.1:3000',
+
+    /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
+    trace: 'on-first-retry'
+  },
+
+  /* Configure projects for major browsers */
+  projects: [
+    {
+      name: 'chromium',
+      use: { ...devices['Desktop Chrome'] }
+    },
+
+    {
+      name: 'firefox',
+      use: { ...devices['Desktop Firefox'] }
+    }
+
+    // {
+    //   name: 'webkit',
+    //   use: { ...devices['Desktop Safari'] }
+    // }
+
+    /* Test against mobile viewports. */
+    // {
+    //   name: 'Mobile Chrome',
+    //   use: { ...devices['Pixel 5'] },
+    // },
+    // {
+    //   name: 'Mobile Safari',
+    //   use: { ...devices['iPhone 12'] },
+    // },
+
+    /* Test against branded browsers. */
+    // {
+    //   name: 'Microsoft Edge',
+    //   use: { ...devices['Desktop Edge'], channel: 'msedge' },
+    // },
+    // {
+    //   name: 'Google Chrome',
+    //   use: { ...devices['Desktop Chrome'], channel: 'chrome' },
+    // },
+  ]
+
+  /* Run your local dev server before starting the tests */
+  // webServer: {
+  //   command: 'npm run start',
+  //   url: 'http://127.0.0.1:3000',
+  //   reuseExistingServer: !process.env.CI,
+  // },
+})

playground-local/tests/local.spec.ts

@@ -0,0 +1,62 @@
+import { describe, test } from 'vitest'
+import { setup, createPage } from '@nuxt/test-utils/e2e'
+import { expect as playwrightExpect } from '@playwright/test'
+
+const STATUS_AUTHENTICATED = 'authenticated'
+const STATUS_UNAUTHENTICATED = 'unauthenticated'
+
+describe('Local Provider', async () => {
+  await setup({
+    runner: 'vitest',
+    browser: true
+  })
+
+  test('load, sign in, reload, refresh, sign out', async () => {
+    const page = await createPage('/')
+    const [
+      usernameInput,
+      passwordInput,
+      submitButton,
+      status,
+      signoutButton,
+      refreshRequiredFalseButton,
+      refreshRequiredTrueButton
+    ] = await Promise.all([
+      page.getByTestId('username'),
+      page.getByTestId('password'),
+      page.getByTestId('submit'),
+      page.getByTestId('status'),
+      page.getByTestId('signout'),
+      page.getByTestId('refresh-required-false'),
+      page.getByTestId('refresh-required-true')
+    ])
+
+    await playwrightExpect(status).toHaveText(STATUS_UNAUTHENTICATED)
+
+    await usernameInput.fill('hunter')
+    await passwordInput.fill('hunter2')
+
+    // Click button and wait for API to finish
+    const responsePromise = page.waitForResponse(/\/api\/auth\/login/)
+    await submitButton.click()
+    await responsePromise
+
+    await playwrightExpect(status).toHaveText(STATUS_AUTHENTICATED)
+
+    // Ensure that we are still authenticated after page refresh
+    await page.reload()
+    await playwrightExpect(status).toHaveText(STATUS_AUTHENTICATED)
+
+    // Refresh (required: false), status should not change
+    await refreshRequiredFalseButton.click()
+    await playwrightExpect(status).toHaveText(STATUS_AUTHENTICATED)
+
+    // Refresh (required: true), status should not change
+    await refreshRequiredTrueButton.click()
+    await playwrightExpect(status).toHaveText(STATUS_AUTHENTICATED)
+
+    // Sign out, status should change
+    await signoutButton.click()
+    await playwrightExpect(status).toHaveText(STATUS_UNAUTHENTICATED)
+  })
+})

playground-local/vitest.config.ts

@@ -0,0 +1,7 @@
+import { defineConfig } from 'vitest/config'
+
+export default defineConfig({
+  test: {
+    include: ['tests/*.spec.ts']
+  }
+})

playground-refresh/.gitignore

@@ -0,0 +1,5 @@
+node_modules/
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/