test(e2e): add functions for logging in via username / password (#554)

cngonzalez · web-flow · commit 719b49590444 · 2025-06-06T13:18:53.000-04:00
* test(e2e): add functions for logging in via username / password

* chore(e2e): add a few more notes about the auth / storage state process
diff --git a/.github/workflows/depcheck.yml b/.github/workflows/depcheck.yml
@@ -28,3 +28,8 @@ jobs:
 
       - name: Depcheck
         run: pnpm depcheck
+        env:
+          CI: true
+          SDK_E2E_USER_ID: ${{ secrets.SDK_E2E_USER_ID }}
+          SDK_E2E_USER_PASSWORD: ${{ secrets.SDK_E2E_USER_PASSWORD }}
+          RECAPTCHA_E2E_STAGING_KEY: ${{ secrets.RECAPTCHA_E2E_STAGING_KEY }}
diff --git a/.gitignore b/.gitignore
@@ -22,3 +22,5 @@ stats
 
 docs
 .vitest-reports
+
+.auth
diff --git a/apps/kitchensink-react/e2e/authenticated.spec.ts b/apps/kitchensink-react/e2e/authenticated.spec.ts
@@ -1,21 +1,31 @@
 // we may want to have our own unauthenticated fixture in the future.
-import {test as baseTest} from '@playwright/test'
 import {expect, test} from '@repo/e2e'
 
 test.describe('Authenticated', () => {
-  // This test isn't relevant for most public uses of the SDK,
-  // but it's useful for working with Playwright tests locally
-  test('Kitchen sink loads with localStorage auth token', async ({page}) => {
+  test('Kitchen sink loads when authenticated', async ({page}) => {
     await page.goto('/')
 
     // should be able to see the component beneath the AuthBoundary
     await expect(page.getByTestId('project-auth-home')).toBeVisible()
     // Verify we're authenticated by checking for the absence of the sign-in link
     await expect(page.getByRole('link', {name: 'Sign in with email'})).not.toBeVisible()
   })
+})
 
-  baseTest('Can test unauthenticated state', async ({page}) => {
+// We might go for a dedicated unauthenticated fixture in the future
+// rather than just clearing the localStorage
+test.describe('Unauthenticated', () => {
+  test('Can test unauthenticated state', async ({page}) => {
     await page.goto('/')
+
+    await page.evaluate(() => {
+      window.localStorage.clear()
+    })
+
+    await page.reload()
+
+    // should not be able to see the component beneath the AuthBoundary
+    await expect(page.getByTestId('project-auth-home')).not.toBeVisible()
     // The sign in link should be visible when not authenticated
     await expect(page.getByRole('link', {name: 'Sign in with email'})).toBeVisible()
   })
diff --git a/apps/kitchensink-react/src/App.tsx b/apps/kitchensink-react/src/App.tsx
@@ -1,24 +1,14 @@
-import {SanityApp, SanityConfig, useDashboardNavigate} from '@sanity/sdk-react'
+import {SanityApp, useDashboardNavigate} from '@sanity/sdk-react'
 import {Spinner, ThemeProvider} from '@sanity/ui'
 import {buildTheme} from '@sanity/ui/theme'
 import {type JSX, Suspense} from 'react'
 import {BrowserRouter, useNavigate} from 'react-router'
 
 import {AppRoutes} from './AppRoutes'
+import {devConfig, e2eConfig} from './sanityConfig'
 
 const theme = buildTheme({})
 
-const sanityConfigs: SanityConfig[] = [
-  {
-    projectId: 'ppsg7ml5',
-    dataset: 'test',
-  },
-  {
-    projectId: 'd45jg133',
-    dataset: 'production',
-  },
-]
-
 function NavigationHandler() {
   const navigate = useNavigate()
   useDashboardNavigate(({path, type}) => {
@@ -30,7 +20,10 @@ function NavigationHandler() {
 export default function App(): JSX.Element {
   return (
     <ThemeProvider theme={theme}>
-      <SanityApp fallback={<Spinner />} config={sanityConfigs}>
+      <SanityApp
+        fallback={<Spinner />}
+        config={import.meta.env['VITE_IS_CI'] ? e2eConfig : devConfig}
+      >
         <BrowserRouter>
           <Suspense>
             <NavigationHandler />
diff --git a/apps/kitchensink-react/src/sanityConfig.ts b/apps/kitchensink-react/src/sanityConfig.ts
@@ -0,0 +1,22 @@
+import {type SanityConfig} from '@sanity/sdk-react'
+
+export const devConfig: SanityConfig[] = [
+  {
+    projectId: 'ppsg7ml5',
+    dataset: 'test',
+  },
+  {
+    projectId: 'd45jg133',
+    dataset: 'production',
+  },
+]
+
+export const e2eConfig: SanityConfig[] = [
+  {
+    projectId: '8bzpkfx0',
+    dataset: 'production',
+    auth: {
+      apiHost: 'https://api.sanity.work',
+    },
+  },
+]
diff --git a/apps/kitchensink-react/vite.config.ts b/apps/kitchensink-react/vite.config.ts
@@ -1,31 +1,42 @@
 import {resolve} from 'node:path'
 
 import react from '@vitejs/plugin-react'
-import {defineConfig} from 'vite'
+import {defineConfig, loadEnv} from 'vite'
 
 const ReactCompilerConfig = {
   target: '18',
 }
 
-export default defineConfig({
-  server: {
-    port: 3333,
-    fs: {
-      strict: false,
+export default defineConfig(({mode}) => {
+  // load env from root directory of turborepo
+  const rootDir = resolve(process.cwd(), '../..')
+  const env = loadEnv(mode, rootDir, '')
+
+  return {
+    server: {
+      port: 3333,
+      fs: {
+        strict: false,
+      },
     },
-  },
-  plugins: [
-    react({
-      babel: {
-        plugins: [['babel-plugin-react-compiler', ReactCompilerConfig]],
+    plugins: [
+      react({
+        babel: {
+          plugins: [['babel-plugin-react-compiler', ReactCompilerConfig]],
+        },
+      }),
+    ],
+    clearScreen: false,
+    resolve: {
+      alias: {
+        '@sanity/sdk': resolve(import.meta.dirname, '../../packages/core/src/_exports'),
+        '@sanity/sdk-react': resolve(import.meta.dirname, '../../packages/react/src/_exports'),
       },
-    }),
-  ],
-  clearScreen: false,
-  resolve: {
-    alias: {
-      '@sanity/sdk': resolve(import.meta.dirname, '../../packages/core/src/_exports'),
-      '@sanity/sdk-react': resolve(import.meta.dirname, '../../packages/react/src/_exports'),
     },
-  },
+    define: {
+      'import.meta.env.VITE_IS_CI': JSON.stringify(
+        process.env['CI'] === 'true' || env['CI'] === 'true',
+      ),
+    },
+  }
 })
diff --git a/knip.config.ts b/knip.config.ts
@@ -61,6 +61,7 @@ const baseConfig = {
         config: 'tsconfig.json',
       },
       project,
+      entry: ['src/index.ts', 'src/setup/**/*.ts', 'src/teardown/**/*.ts'],
       ignoreDependencies: ['@repo/tsconfig'],
     },
   },
diff --git a/packages/@repo/e2e/README.md b/packages/@repo/e2e/README.md
@@ -19,7 +19,7 @@ To run E2E tests run the following commands from the root of the project
 - Run files that have my-spec or my-spec-2 in the file name
 
   ```sh
-  pnpm test:e2e my-spec my-spec-2
+  pnpm test:e2e -- my-spec my-spec-2
   ```
 
 - For help, run
@@ -36,3 +36,12 @@ For more useful commands, see the [Playwright Command Line](https://playwright.d
 ### Running tests from your code editor
 
 You can run your tests in your editor with the help of some useful editor plugins/extensions. For example, you can download `Playwright Test for VSCode` from Microsoft to show and run your tests in VSCode.
+
+### Running in CI mode
+
+These tests run in CI with a dedicated e2e test user. If you'd like to replicate that, you should add the following variables to your .env.local file:
+
+- `CI`: true
+- `SDK_E2E_USER_ID`: sdk+e2e@sanity.io
+- `SDK_E2E_USER_PASSWORD` (found in 1Password under "SDK e2e user Sanity login")
+- `RECAPTCHA_E2E_STAGING_KEY` (found in 1Password under "Legion E2E staging reCAPTCHA bypass token")
diff --git a/packages/@repo/e2e/src/env.ts b/packages/@repo/e2e/src/env.ts
@@ -1,17 +1,20 @@
 import {loadEnvFiles} from './helpers/loadEnvFiles'
 
-/**
- * Environment variables for E2E tests
- */
-type KnownEnvVar = 'SDK_E2E_SESSION_TOKEN' | 'CI'
-
 interface E2EEnv {
   /** The session token for authenticated tests */
   SDK_E2E_SESSION_TOKEN?: string
   /** Whether we're running in CI */
   CI?: string
+  /** E2E test user ID */
+  SDK_E2E_USER_ID?: string
+  /** E2E test user password */
+  SDK_E2E_USER_PASSWORD?: string
+  /** E2E test recaptcha key for CI */
+  RECAPTCHA_E2E_STAGING_KEY?: string
 }
 
+type KnownEnvVar = keyof E2EEnv
+
 loadEnvFiles()
 
 /**
@@ -37,11 +40,22 @@ function findEnv(name: KnownEnvVar): string | undefined {
 export function getE2EEnv(): E2EEnv {
   const CI = findEnv('CI')
   let SDK_E2E_SESSION_TOKEN: string | undefined
-  if (!CI) {
+  let SDK_E2E_USER_ID: string | undefined
+  let SDK_E2E_USER_PASSWORD: string | undefined
+  let RECAPTCHA_E2E_STAGING_KEY: string | undefined
+  if (CI) {
+    SDK_E2E_USER_ID = readEnv('SDK_E2E_USER_ID')
+    SDK_E2E_USER_PASSWORD = readEnv('SDK_E2E_USER_PASSWORD')
+    RECAPTCHA_E2E_STAGING_KEY = readEnv('RECAPTCHA_E2E_STAGING_KEY')
+  } else {
     SDK_E2E_SESSION_TOKEN = readEnv('SDK_E2E_SESSION_TOKEN')
   }
+
   return {
     SDK_E2E_SESSION_TOKEN,
     CI,
+    SDK_E2E_USER_ID,
+    SDK_E2E_USER_PASSWORD,
+    RECAPTCHA_E2E_STAGING_KEY,
   }
 }
diff --git a/packages/@repo/e2e/src/fixtures.ts b/packages/@repo/e2e/src/fixtures.ts
@@ -0,0 +1,12 @@
+import {test as base} from '@playwright/test'
+
+/**
+ * @internal
+ * Playwright test configuration for SDK E2E tests
+ * (If different apps diverge dramatically, we can move this logic)
+ */
+export const test = base.extend({
+  // We'll add custom fixtures shortly
+})
+
+export {expect} from '@playwright/test'
diff --git a/packages/@repo/e2e/src/index.ts b/packages/@repo/e2e/src/index.ts
@@ -1,8 +1,15 @@
-import {defineConfig} from '@playwright/test'
+import {defineConfig, devices} from '@playwright/test'
 import type {PlaywrightTestConfig} from '@playwright/test'
+import path from 'node:path'
+import {fileURLToPath} from 'node:url'
 import {getE2EEnv} from './env'
 
+const __dirname = path.dirname(fileURLToPath(import.meta.url))
+const SETUP_DIR = path.join(path.dirname(__dirname), 'src', 'setup')
+const TEARDOWN_DIR = path.join(path.dirname(__dirname), 'src', 'teardown')
+const AUTH_FILE = path.join(path.dirname(__dirname), '.auth', 'user.json')
 const BASE_URL = 'http://localhost:3333'
+
 const {CI} = getE2EEnv()
 
 /**
@@ -32,6 +39,26 @@ export const basePlaywrightConfig: PlaywrightTestConfig = {
   },
   /* Configure output directory for test results */
   outputDir: './e2e/test-results',
+  /* Projects configuration */
+  projects: [
+    {
+      name: 'setup',
+      testDir: SETUP_DIR,
+      testMatch: /.*\.setup\.ts/,
+      teardown: 'cleanup',
+    },
+    {
+      name: 'cleanup',
+      testDir: TEARDOWN_DIR,
+      testMatch: /.*\.teardown\.ts/,
+    },
+    // we can add as many different projects as we like here
+    {
+      name: 'chromium',
+      use: {...devices['Desktop Chrome'], storageState: AUTH_FILE},
+      dependencies: ['setup'],
+    },
+  ],
 }
 
 /**
@@ -49,4 +76,5 @@ export const createPlaywrightConfig = (
   })
 }
 
-export {expect, test} from './sdk-test'
+// Export test fixtures
+export {test, expect} from './fixtures'
diff --git a/packages/@repo/e2e/src/sdk-test.ts b/packages/@repo/e2e/src/sdk-test.ts
diff --git a/packages/@repo/e2e/src/setup/auth.setup.ts b/packages/@repo/e2e/src/setup/auth.setup.ts
diff --git a/packages/@repo/e2e/src/teardown/global.teardown.ts b/packages/@repo/e2e/src/teardown/global.teardown.ts
diff --git a/turbo.json b/turbo.json

-Original file line number
+Diff line change
 docs
 .vitest-reports
++
 +.auth