test(nuxt, e2e): Create long-running app for Nuxt (clerk#4600)

wobsoriano · web-flow · commit a97a830eae82 · 2024-11-19T08:26:02.000-08:00
diff --git a/.changeset/wet-dryers-pay.md b/.changeset/wet-dryers-pay.md
@@ -0,0 +1,2 @@
+---
+---
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
@@ -143,7 +143,7 @@ jobs:
     strategy:
       fail-fast: false
       matrix:
-        test-name: [ 'generic', 'express', 'quickstart', 'ap-flows', 'elements', 'sessions', 'astro', 'expo-web', 'tanstack-start', 'tanstack-router', 'vue']
+        test-name: [ 'generic', 'express', 'quickstart', 'ap-flows', 'elements', 'sessions', 'astro', 'expo-web', 'tanstack-start', 'tanstack-router', 'vue', 'nuxt']
         test-project: ['chrome']
         include:
           - test-name: 'nextjs'
diff --git a/integration/presets/longRunningApps.ts b/integration/presets/longRunningApps.ts
@@ -6,6 +6,7 @@ import { envs } from './envs';
 import { expo } from './expo';
 import { express } from './express';
 import { next } from './next';
+import { nuxt } from './nuxt';
 import { react } from './react';
 import { remix } from './remix';
 import { tanstack } from './tanstack';
@@ -39,6 +40,7 @@ export const createLongRunningApps = () => {
     { id: 'tanstack.start', config: tanstack.start, env: envs.withEmailCodes },
     { id: 'tanstack.router', config: tanstack.router, env: envs.withEmailCodes },
     { id: 'vue.vite', config: vue.vite, env: envs.withCustomRoles },
+    { id: 'nuxt.node', config: nuxt.node, env: envs.withCustomRoles },
   ] as const;
 
   const apps = configs.map(longRunningApplication);
diff --git a/integration/presets/nuxt.ts b/integration/presets/nuxt.ts
@@ -0,0 +1,18 @@
+import { applicationConfig } from '../models/applicationConfig';
+import { templates } from '../templates';
+
+const clerkNuxtLocal = `file:${process.cwd()}/packages/nuxt`;
+
+const nuxtNode = applicationConfig()
+  .setName('nuxt-node')
+  .useTemplate(templates['nuxt-node'])
+  .setEnvFormatter('public', key => `NUXT_PUBLIC_${key}`)
+  .addScript('setup', 'pnpm install')
+  .addScript('dev', 'pnpm dev')
+  .addScript('build', 'pnpm build')
+  .addScript('serve', 'pnpm preview')
+  .addDependency('@clerk/nuxt', clerkNuxtLocal);
+
+export const nuxt = {
+  node: nuxtNode,
+} as const;
diff --git a/integration/templates/index.ts b/integration/templates/index.ts
@@ -17,6 +17,7 @@ export const templates = {
   'tanstack-start': resolve(__dirname, './tanstack-start'),
   'tanstack-router': resolve(__dirname, './tanstack-router'),
   'vue-vite': resolve(__dirname, './vue-vite'),
+  'nuxt-node': resolve(__dirname, './nuxt-node'),
 } as const;
 
 if (new Set([...Object.values(templates)]).size !== Object.values(templates).length) {
diff --git a/integration/templates/nuxt-node/app.vue b/integration/templates/nuxt-node/app.vue
@@ -0,0 +1,3 @@
+<template>
+  <NuxtPage />
+</template>
diff --git a/integration/templates/nuxt-node/middleware/auth.global.js b/integration/templates/nuxt-node/middleware/auth.global.js
@@ -0,0 +1,16 @@
+export default defineNuxtRouteMiddleware((to, from) => {
+  const { userId } = useAuth();
+
+  const isPublicPage = ['/sign-in'].includes(to.path);
+  const isProtectedPage = ['/user'].includes(to.path);
+
+  // Is authenticated and trying to access a public page
+  if (userId.value && isPublicPage) {
+    return navigateTo('/user');
+  }
+
+  // Is not authenticated and trying to access a protected page
+  if (!userId.value && isProtectedPage) {
+    return navigateTo('/sign-in');
+  }
+});
diff --git a/integration/templates/nuxt-node/nuxt.config.js b/integration/templates/nuxt-node/nuxt.config.js
@@ -0,0 +1,15 @@
+export default defineNuxtConfig({
+  modules: ['@clerk/nuxt'],
+  // The code below is only necessary in our test environment.
+  // Env vars are automatically read by Nuxt. See https://nuxt.com/docs/guide/going-further/runtime-config
+  runtimeConfig: {
+    public: {
+      clerk: {
+        publishableKey: process.env.NUXT_PUBLIC_CLERK_PUBLISHABLE_KEY,
+      },
+    },
+    clerk: {
+      secretKey: process.env.CLERK_SECRET_KEY,
+    },
+  },
+});
diff --git a/integration/templates/nuxt-node/package.json b/integration/templates/nuxt-node/package.json
@@ -0,0 +1,17 @@
+{
+  "name": "nuxt-clerk-integration-template",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "build": "nuxt build",
+    "dev": "nuxt dev --port $PORT",
+    "generate": "nuxt generate",
+    "postinstall": "nuxt prepare",
+    "preview": "nuxt preview --port $PORT"
+  },
+  "dependencies": {
+    "nuxt": "^3.14.159",
+    "vue": "^3.5.12",
+    "vue-router": "^4.4.5"
+  }
+}
diff --git a/integration/templates/nuxt-node/pages/index.vue b/integration/templates/nuxt-node/pages/index.vue
@@ -0,0 +1,21 @@
+<template>
+  <div>
+    <h1>Index Route</h1>
+    <SignedIn>
+      <p>You are signed in!</p>
+      <div>
+        <p>View your profile here</p>
+        <UserButton />
+        <OrganizationSwitcher />
+      </div>
+      <div>
+        <SignOutButton />
+      </div>
+    </SignedIn>
+    <SignedOut>
+      <p>You are signed out</p>
+
+      <SignIn />
+    </SignedOut>
+  </div>
+</template>
diff --git a/integration/templates/nuxt-node/pages/only-admin.vue b/integration/templates/nuxt-node/pages/only-admin.vue
@@ -0,0 +1,8 @@
+<template>
+  <Protect>
+    <p>I am an admin</p>
+    <template #fallback>
+      <p>Not an admin</p>
+    </template>
+  </Protect>
+</template>
diff --git a/integration/templates/nuxt-node/pages/sign-in.vue b/integration/templates/nuxt-node/pages/sign-in.vue
@@ -0,0 +1,3 @@
+<template>
+  <SignIn />
+</template>
diff --git a/integration/templates/nuxt-node/pages/user.vue b/integration/templates/nuxt-node/pages/user.vue
@@ -0,0 +1,11 @@
+<script setup>
+const { data: user } = await useFetch('/api/me');
+</script>
+
+<template>
+  <UserProfile />
+  <ul>
+    <li>First name: {{ user.firstName }}</li>
+    <li>Email: {{ user.emailAddresses[0].emailAddress }}</li>
+  </ul>
+</template>
diff --git a/integration/templates/nuxt-node/server/api/me.js b/integration/templates/nuxt-node/server/api/me.js
@@ -0,0 +1,16 @@
+import { clerkClient } from '@clerk/nuxt/server';
+
+export default eventHandler(async event => {
+  const { userId } = event.context.auth;
+
+  if (!userId) {
+    throw createError({
+      statusCode: 401,
+      statusMessage: 'Unauthorized',
+    });
+  }
+
+  const user = await clerkClient(event).users.getUser(userId);
+
+  return user;
+});
diff --git a/integration/tests/nuxt/basic.test.ts b/integration/tests/nuxt/basic.test.ts
@@ -0,0 +1,101 @@
+import { expect, test } from '@playwright/test';
+
+import { appConfigs } from '../../presets';
+import type { FakeOrganization, FakeUser } from '../../testUtils';
+import { createTestUtils, testAgainstRunningApps } from '../../testUtils';
+
+testAgainstRunningApps({ withEnv: [appConfigs.envs.withCustomRoles] })('basic tests for @nuxt', ({ app }) => {
+  test.describe.configure({ mode: 'parallel' });
+
+  let fakeUser: FakeUser;
+  let fakeOrganization: FakeOrganization;
+
+  test.beforeAll(async () => {
+    const u = createTestUtils({ app });
+    fakeUser = u.services.users.createFakeUser();
+    const user = await u.services.users.createBapiUser(fakeUser);
+    fakeOrganization = await u.services.users.createFakeOrganization(user.id);
+  });
+
+  test.afterAll(async () => {
+    await fakeOrganization.delete();
+    await fakeUser.deleteIfExists();
+
+    await app.teardown();
+  });
+
+  test.afterEach(async ({ page, context }) => {
+    const u = createTestUtils({ app, page, context });
+    await u.page.signOut();
+    await u.page.context().clearCookies();
+  });
+
+  test('sign in with hash routing', async ({ page, context }) => {
+    const u = createTestUtils({ app, page, context });
+
+    await u.page.goToRelative('/sign-in');
+    await u.po.signIn.waitForMounted();
+
+    await u.po.signIn.setIdentifier(fakeUser.email);
+    await u.po.signIn.continue();
+    await u.page.waitForURL(`${app.serverUrl}/sign-in#/factor-one`);
+
+    await u.po.signIn.setPassword(fakeUser.password);
+    await u.po.signIn.continue();
+    await u.po.expect.toBeSignedIn();
+  });
+
+  test('render user profile with SSR data', async ({ page, context }) => {
+    const u = createTestUtils({ app, page, context });
+
+    await u.page.goToRelative('/sign-in');
+    await u.po.signIn.waitForMounted();
+    await u.po.signIn.signInWithEmailAndInstantPassword({ email: fakeUser.email, password: fakeUser.password });
+    await u.po.expect.toBeSignedIn();
+
+    await u.po.userButton.waitForMounted();
+    await u.page.goToRelative('/user');
+    await u.po.userProfile.waitForMounted();
+
+    // Fetched from an API endpoint (/api/me), which is server-rendered.
+    // This also verifies that the server middleware is working.
+    await expect(u.page.getByText(`First name: ${fakeUser.firstName}`)).toBeVisible();
+    await expect(u.page.getByText(`Email: ${fakeUser.email}`)).toBeVisible();
+  });
+
+  test('redirects to sign-in when unauthenticated', async ({ page, context }) => {
+    const u = createTestUtils({ app, page, context });
+
+    await u.page.goToRelative('/user');
+    await u.page.waitForURL(`${app.serverUrl}/sign-in`);
+    await u.po.signIn.waitForMounted();
+  });
+
+  test('renders control components contents in SSR', async ({ page, context }) => {
+    const u = createTestUtils({ app, page, context });
+
+    await u.page.goToAppHome();
+    await expect(u.page.getByText('You are signed out')).toBeVisible();
+
+    await u.page.goToRelative('/sign-in');
+    await u.po.signIn.waitForMounted();
+    await u.po.signIn.signInWithEmailAndInstantPassword({ email: fakeUser.email, password: fakeUser.password });
+    await u.po.expect.toBeSignedIn();
+    await expect(u.page.getByText('You are signed in!')).toBeVisible();
+  });
+
+  test('renders <Protect /> component contents to admin', async ({ page, context }) => {
+    const u = createTestUtils({ app, page, context });
+
+    await u.page.goToRelative('/sign-in');
+    await u.po.signIn.waitForMounted();
+    await u.po.signIn.signInWithEmailAndInstantPassword({ email: fakeUser.email, password: fakeUser.password });
+    await u.po.expect.toBeSignedIn();
+
+    await u.page.waitForAppUrl('/');
+    await u.po.organizationSwitcher.waitForMounted();
+    await u.po.organizationSwitcher.waitForAnOrganizationToSelected();
+    await u.page.goToRelative('/only-admin');
+    await expect(u.page.getByText('I am an admin')).toBeVisible();
+  });
+});
diff --git a/package.json b/package.json
@@ -36,6 +36,7 @@
     "test:integration:express": "E2E_APP_ID=express.* pnpm test:integration:base --grep @express",
     "test:integration:generic": "E2E_APP_ID=react.vite.*,next.appRouter.withEmailCodes* pnpm test:integration:base --grep @generic",
     "test:integration:nextjs": "E2E_APP_ID=next.appRouter.* pnpm test:integration:base --grep @nextjs",
+    "test:integration:nuxt": "E2E_APP_ID=nuxt.node npm run test:integration:base -- --grep @nuxt",
     "test:integration:quickstart": "E2E_APP_ID=quickstart.* pnpm test:integration:base --grep @quickstart",
     "test:integration:remix": "echo 'placeholder'",
     "test:integration:sessions": "pnpm test:integration:base --grep @sessions",
diff --git a/turbo.json b/turbo.json
@@ -218,6 +218,12 @@
       "env": ["CLEANUP", "DEBUG", "E2E_*", "INTEGRATION_INSTANCE_KEYS"],
       "inputs": ["integration/**"],
       "outputLogs": "new-only"
+    },
+    "//#test:integration:nuxt": {
+      "dependsOn": ["@clerk/clerk-js#build", "@clerk/vue#build", "@clerk/nuxt#build"],
+      "env": ["CLEANUP", "DEBUG", "E2E_*", "INTEGRATION_INSTANCE_KEYS"],
+      "inputs": ["integration/**"],
+      "outputLogs": "new-only"
     }
   }
 }

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+<template>`
	`2`	`+ <NuxtPage />`
	`3`	`+</template>`