test: add basic tests

directus/.env

@@ -14,17 +14,17 @@ SESSION_COOKIE_SECURE= Lax
 REFRESH_TOKEN_COOKIE_SECURE= true
 
 # REFRESH_TOKEN_TTL= 20s
-# ACCESS_TOKEN_TTL=25s
-# SESSION_COOKIE_TTL=25s
+ACCESS_TOKEN_TTL=14s
+SESSION_COOKIE_TTL=14s
 
 CORS_ENABLED= true
 CORS_ORIGIN= true
-CORS_METHODS="*"
+CORS_METHODS=*
 CORS_ALLOWED_HEADERS=Content-Type,Authorization,Credentials
 
 AUTH_GOOGLE_MODE=session
 
 WEBSOCKETS_ENABLED=true
 WEBSOCKETS_GRAPHQL_ENABLED=true
 
-# LOG_LEVEL=trace
+LOG_LEVEL=trace

package.json

@@ -54,6 +54,7 @@
     "@nuxt/schema": "^3.10.3",
     "@playwright/test": "^1.44.1",
     "changelogen": "^0.5.5",
+    "cross-env": "^7.0.3",
     "directus": "^10.11.2",
     "eslint": "^8.57.0",
     "nuxt": "^3.11.0",
@@ -66,4 +67,4 @@
   "peerDependencies": {
     "@vue/apollo-composable": "^4.0.1"
   }
-}
+}

playground/.env

@@ -1,2 +1,2 @@
 NODE_OPTIONS=--dns-result-order=ipv4first
-NUXT_PUBLIC_DIRECTUS_AUTH_MODE=cookie
+NUXT_PUBLIC_DIRECTUS_AUTH_MODE=session

playground/app.vue

@@ -1,5 +1,8 @@
 <template>
   <div>
+    <client-only>
+      <div data-testid="hydration-check" />
+    </client-only>
     <nuxt-page />
   </div>
 </template>

playground/nuxt.config.ts

@@ -2,7 +2,7 @@ import { defineNuxtConfig } from 'nuxt/config'
 
 export default defineNuxtConfig({
   modules: ['../src/module'],
-  ssr: true,
+  ssr: process.env.NUXT_SSR !== 'false',
   directus: {
     auth: {
       enabled: true,

playground/pages/auth/login.vue

@@ -6,15 +6,15 @@
       <input
         v-model="email"
         type="email"
-        placeholder="Email"
+        placeholder="email"
       >
     </div>
     <div>
       <label>Password:</label>
       <input
         v-model="password"
         type="password"
-        placeholder="Password"
+        placeholder="password"
       >
     </div>
 

playground/pages/graphql.vue

@@ -1,7 +1,9 @@
 <template>
   <div>
     <h1>GraphQL</h1>
-    <p>{{ counter }}</p>
+    <p data-testid="counter">
+      {{ counter }}
+    </p>
     <button
       v-if="config.public.directus.auth.mode ==='session'"
       @click="refresh()"

playground/pages/home.vue

@@ -1,7 +1,12 @@
 <template>
   <div>
-    <h3>Home</h3>
-    <p>{{ user }}</p>
+    <h1>Home</h1>
+    <p data-testid="user-data">
+      {{ user }}
+    </p>
+    <button @click="fetchUser()">
+      Fetch user
+    </button>
     <button @click="logout()">
       Logout
     </button>
@@ -11,5 +16,5 @@
 <script setup lang="ts">
 import { useDirectusAuth } from '#imports'
 
-const { logout, user } = useDirectusAuth()
+const { logout, user, fetchUser } = useDirectusAuth()
 </script>

playground/pages/rest.vue

@@ -1,17 +1,16 @@
 <template>
   <div>
     <h1>Rest</h1>
-    <p>{{ data }}</p>
-    <button @click="refresh()">
-      Refresh
-    </button>
+    <p data-testid="rest-data">
+      {{ data }}
+    </p>
   </div>
 </template>
 
 <script setup>
 import { useDirectusRest, readItems, useAsyncData } from '#imports'
 
-const { data, refresh } = await useAsyncData(() =>
+const { data } = await useAsyncData(() =>
   useDirectusRest(readItems('country')),
 )
 </script>

tests/auth.spec.ts

@@ -1,7 +1,32 @@
-import { test } from '@playwright/test'
+import { test, expect } from '@playwright/test'
+import { goto, login, reload, tokenTimeout } from './utils'
 
-test('should be logged in', async () => {
+test('should be logged in', async ({ browser }) => {
+  const context = await browser.newContext()
+  const page = await context.newPage()
+  await login(page)
+
+  await reload(page)
+  await expect(page.getByRole('heading', { name: 'Home' })).toBeVisible()
+
+  await goto(page, '/')
+  await expect(page.getByRole('heading', { name: 'Home' })).toBeVisible()
+
+  await page.goto('/404')
+  await expect(page.getByRole('heading', { name: '404' })).toBeVisible()
+  await page.getByRole('link', { name: 'Go back home' }).click()
+  await expect(page.getByRole('heading', { name: 'Home' })).toBeVisible()
 })
 
-test('should refresh session', async () => {
+test('should refresh session', async ({ browser }) => {
+  const context = await browser.newContext()
+  const page = await context.newPage()
+  await login(page)
+
+  await expect(page.getByTestId('user-data')).toContainText('id')
+
+  await page.waitForTimeout(tokenTimeout)
+  await page.getByRole('button', { name: 'Fetch user' }).click()
+  await page.waitForTimeout(2000)
+  await expect(page.getByTestId('user-data')).toContainText('id')
 })

tests/graphql.spec.ts

@@ -0,0 +1,40 @@
+import { test, expect } from '@playwright/test'
+import { goto, login, readCounter } from './utils'
+
+test('should query data', async ({ browser }) => {
+  const context = await browser.newContext()
+  const page = await context.newPage()
+  await login(page)
+
+  await goto(page, '/graphql')
+  await expect(page.getByRole('heading', { name: 'GraphQL' })).toBeVisible()
+
+  await readCounter(page)
+
+  await context.close()
+})
+
+test('should mutate and subscribe', async ({ browser }) => {
+  const context = await browser.newContext()
+  const page = await context.newPage()
+  await login(page)
+
+  await goto(page, '/graphql')
+  await expect(page.getByRole('heading', { name: 'GraphQL' })).toBeVisible()
+
+  const initialValue = await readCounter(page)
+
+  await page.getByRole('button', { name: 'Increment' }).click()
+  await page.waitForTimeout(2000)
+
+  if (process.env.NUXT_PUBLIC_DIRECTUS_AUTH_MODE === 'session') {
+    await page.getByRole('button', { name: 'Refresh' }).click()
+    await page.waitForTimeout(2000)
+  }
+
+  const updatedValue = await readCounter(page)
+
+  expect(updatedValue).toBeGreaterThanOrEqual(initialValue)
+
+  await context.close()
+})

tests/rest.spec.ts

@@ -0,0 +1,15 @@
+import { test, expect } from '@playwright/test'
+import { login, goto } from './utils'
+
+test('should read items', async ({ browser }) => {
+  const context = await browser.newContext()
+  const page = await context.newPage()
+  await login(page)
+
+  await goto(page, '/rest')
+  await expect(page.getByRole('heading', { name: 'Rest' })).toBeVisible()
+
+  await expect(page.getByTestId('rest-data')).toContainText('id')
+
+  await context.close()
+})

tests/utils/index.ts

@@ -2,14 +2,16 @@ import { type Page, expect } from '@playwright/test'
 
 export const credentials = { email: '[email protected]', password: 'abc123' }
 
+export const tokenTimeout = 16000
+
 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()
+  expect(page.getByTestId('hydration-check')).toBeDefined()
 }
 
 export async function login(page: Page) {
@@ -21,7 +23,8 @@ export async function login(page: Page) {
   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()
+export async function readCounter(page: Page) {
+  const counter = await page.getByTestId('counter').textContent()
+  expect(counter).not.toBeNaN()
+  return Number.parseInt(counter as string)
 }