test(vue-start): basic-cloudflare, basic-auth

e2e/solid-start/basic-auth/.gitignore

@@ -18,3 +18,4 @@ yarn.lock
 /playwright-report/
 /blob-report/
 /playwright/.cache/
+.tmp/

e2e/solid-start/basic-auth/package.json

@@ -6,11 +6,11 @@
   "scripts": {
     "dev": "vite dev --port 3000",
     "dev:e2e": "vite dev",
-    "build": "vite build",
+    "build": "vite build && tsc --noEmit",
     "preview": "vite preview",
-    "start": "node .output/server/index.mjs",
+    "start": "pnpx srvx --prod -s ../client dist/server/server.js",
     "prisma-generate": "prisma generate",
-    "test:e2e": "exit 0; rm -rf port*.txt; pnpm run prisma-generate && playwright test --project=chromium"
+    "test:e2e": "rm -rf port*.txt; mkdir -p .tmp; rm -f .tmp/dev.db .tmp/dev.db-journal .tmp/dev.db-wal .tmp/dev.db-shm; export DATABASE_URL=file:./.tmp/dev.db; pnpm run prisma-generate && pnpm exec prisma migrate deploy && playwright test --project=chromium"
   },
   "dependencies": {
     "@libsql/client": "^0.15.15",
@@ -32,6 +32,7 @@
     "dotenv": "^17.2.3",
     "postcss": "^8.5.1",
     "prisma": "^7.0.0",
+    "srvx": "^0.9.8",
     "tailwindcss": "^4.1.17",
     "typescript": "^5.7.2",
     "vite-plugin-solid": "^2.11.10",

e2e/solid-start/basic-auth/playwright.config.ts

@@ -1,7 +1,13 @@
+import { fileURLToPath } from 'node:url'
+import path from 'node:path'
 import { defineConfig, devices } from '@playwright/test'
 import { getTestServerPort } from '@tanstack/router-e2e-utils'
 import packageJson from './package.json' with { type: 'json' }
 
+// Ensure port file is written next to this config, even if Playwright loads it
+// from a different working directory.
+process.chdir(path.dirname(fileURLToPath(import.meta.url)))
+
 const PORT = await getTestServerPort(packageJson.name)
 const baseURL = `http://localhost:${PORT}`
 /**
@@ -19,7 +25,7 @@ export default defineConfig({
   },
 
   webServer: {
-    command: `VITE_SERVER_PORT=${PORT} pnpm build && PORT=${PORT} VITE_SERVER_PORT=${PORT} pnpm start`,
+    command: `pnpm build && VITE_SERVER_PORT=${PORT} PORT=${PORT} pnpm start`,
     url: baseURL,
     reuseExistingServer: !process.env.CI,
     stdout: 'pipe',

e2e/solid-start/basic-auth/src/components/Auth.tsx

@@ -9,7 +9,7 @@ export function Auth({
   actionText: string
   onSubmit: (e: HTMLFormElement) => void
   status: 'pending' | 'idle' | 'success' | 'error'
-  afterSubmit?: JSX.Element
+  afterSubmit?: () => JSX.Element
 }) {
   return (
     <div class="fixed inset-0 bg-white dark:bg-black flex items-start justify-center p-8">
@@ -51,7 +51,7 @@ export function Auth({
           >
             {status === 'pending' ? '...' : actionText}
           </button>
-          {afterSubmit ? afterSubmit : null}
+          {afterSubmit ? afterSubmit() : null}
         </form>
       </div>
     </div>

e2e/solid-start/basic-auth/src/components/Login.tsx

@@ -7,9 +7,10 @@ import { signupFn } from '~/routes/signup'
 
 export function Login() {
   const router = useRouter()
+  const login = useServerFn(loginFn)
 
   const loginMutation = useMutation({
-    fn: loginFn,
+    fn: login,
     onSuccess: async (ctx) => {
       if (!ctx.data?.error) {
         await router.invalidate()
@@ -37,7 +38,7 @@ export function Login() {
           },
         })
       }}
-      afterSubmit={
+      afterSubmit={() =>
         loginMutation.data() ? (
           <>
             <div class="text-red-400">{loginMutation.data()?.message}</div>

e2e/solid-start/basic-auth/src/routes/signup.tsx

@@ -88,7 +88,7 @@ function SignupComp() {
           },
         })
       }}
-      afterSubmit={
+      afterSubmit={() =>
         signupMutation.data()?.error ? (
           <>
             <div class="text-red-400">{signupMutation.data()?.message}</div>

e2e/solid-start/basic-auth/src/utils/prisma.ts

@@ -3,7 +3,7 @@ import { PrismaLibSql } from '@prisma/adapter-libsql'
 import { PrismaClient } from '../prisma-generated/client'
 
 const adapter = new PrismaLibSql({
-  url: process.env.DATABASE_URL || 'file:./prisma/dev.db',
+  url: process.env.DATABASE_URL || 'file:./dev.db',
 })
 export const prismaClient = new PrismaClient({ adapter })
 

e2e/solid-start/basic-auth/src/utils/session.ts

@@ -1,6 +1,6 @@
 // src/services/session.server.ts
 import { useSession } from '@tanstack/solid-start/server'
-import type { User } from '@prisma/client'
+import type { User } from '~/prisma-generated/client'
 
 type SessionUser = {
   userEmail: User['email']

e2e/solid-start/basic-auth/tests/app.spec.ts

@@ -1,16 +1,17 @@
 import { expect, test } from '@playwright/test'
 import type { Page } from '@playwright/test'
 
-async function signup(
-  page: Page,
-  baseUrl: string,
-  email: string,
-  password: string,
-) {
-  await page.goto(baseUrl + '/signup')
+async function waitForHydration(page: Page) {
+  await page.waitForFunction(() => typeof (window as any).$_TSR === 'undefined')
+}
+
+async function signup(page: Page, email: string, password: string) {
+  await page.goto('/signup')
+  await waitForHydration(page)
   await page.fill('input[name="email"]', email)
   await page.fill('input[name="password"]', password)
   await page.click('button[type="submit"]')
+  await page.waitForSelector('text=Logout')
 }
 
 async function login(
@@ -20,6 +21,7 @@ async function login(
   signupOnFail = false,
 ) {
   await page.goto('/login')
+  await waitForHydration(page)
   await page.fill('input[name="email"]', email)
   await page.fill('input[name="password"]', password)
   await page.click('button[type="submit"]')
@@ -37,23 +39,28 @@ test('Posts redirects to login when not authenticated', async ({ page }) => {
 })
 
 test('Login fails with user not found', async ({ page }) => {
-  await login(page, 'bad@gmail.com', 'badpassword')
-  expect(page.getByText('User not found')).toBeTruthy()
+  const email = `missing-${Date.now()}@gmail.com`
+  await login(page, email, 'badpassword')
+  await expect(page.getByText('User not found')).toBeVisible()
 })
 
 test('Login fails with incorrect password', async ({ page }) => {
-  await signup(page, 'test@gmail.com', 'badpassword')
-  expect(page.getByText('Incorrect password')).toBeTruthy()
+  const email = `incorrect-password-${Date.now()}@gmail.com`
+  await signup(page, email, 'test')
+  await page.goto('/logout')
+  await login(page, email, 'badpassword')
+  await expect(page.getByText('Incorrect password')).toBeVisible()
 })
 
 test('Can sign up from a not found user', async ({ page }) => {
-  await login(page, 'test2@gmail.com', 'badpassword', true)
-  expect(page.getByText('test@gmail.com')).toBeTruthy()
+  const email = `new-${Date.now()}@gmail.com`
+  await login(page, email, 'badpassword', true)
+  await expect(page.getByText(email)).toBeVisible()
 })
 
 test('Navigating to post after logging in', async ({ page }) => {
-  await login(page, 'test@gmail.com', 'test')
-  await new Promise((r) => setTimeout(r, 1000))
+  const email = `posts-${Date.now()}@gmail.com`
+  await signup(page, email, 'test')
   await page.getByRole('link', { name: 'Posts' }).click()
   await page.getByRole('link', { name: 'sunt aut facere repe' }).click()
   await expect(page.getByRole('heading')).toContainText('sunt aut facere')

e2e/solid-start/basic-auth/tests/mock-db-setup.test.ts

@@ -1,21 +1,16 @@
 import { test as setup } from '@playwright/test'
 
-import { PrismaClient } from '@prisma/client'
-
-const prismaClient = new PrismaClient()
+import { hashPassword, prismaClient } from '../src/utils/prisma'
 
 setup('create new database', async () => {
-  if (
-    await prismaClient.user.findUnique({
-      where: {
-        email: 'test2@gmail.com',
-      },
-    })
-  ) {
-    await prismaClient.user.delete({
-      where: {
-        email: 'test2@gmail.com',
-      },
-    })
-  }
+  await prismaClient.user.deleteMany()
+
+  const email = 'test@gmail.com'
+  const password = await hashPassword('test')
+  await prismaClient.user.create({
+    data: {
+      email,
+      password,
+    },
+  })
 })

e2e/solid-start/basic-auth/tests/mock-db-teardown.test.ts

@@ -1,21 +1,16 @@
 import { test as teardown } from '@playwright/test'
 
-import { PrismaClient } from '@prisma/client'
-
-const prismaClient = new PrismaClient()
+import { hashPassword, prismaClient } from '../src/utils/prisma'
 
 teardown('create new database', async () => {
-  if (
-    await prismaClient.user.findUnique({
-      where: {
-        email: 'test2@gmail.com',
-      },
-    })
-  ) {
-    await prismaClient.user.delete({
-      where: {
-        email: 'test2@gmail.com',
-      },
-    })
-  }
+  await prismaClient.user.deleteMany()
+
+  const email = 'test@gmail.com'
+  const password = await hashPassword('test')
+  await prismaClient.user.create({
+    data: {
+      email,
+      password,
+    },
+  })
 })

e2e/vue-start/basic-auth/.env

@@ -0,0 +1,7 @@
+# Environment variables declared in this file are automatically made available to Prisma.
+# See the documentation for more detail: https://pris.ly/d/prisma-schema#accessing-environment-variables-from-the-schema
+
+# Prisma supports the native connection string format for PostgreSQL, MySQL, SQLite, SQL Server, MongoDB and CockroachDB.
+# See the documentation for all the connection string options: https://pris.ly/d/connection-strings
+
+DATABASE_URL="file:./dev.db"

e2e/vue-start/basic-auth/.gitignore

@@ -0,0 +1,21 @@
+node_modules
+package-lock.json
+yarn.lock
+
+!.env
+.DS_Store
+.cache
+.vercel
+.output
+
+/build/
+/api/
+/server/build
+/public/build
+# Sentry Config File
+.env.sentry-build-plugin
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/
+.tmp/

e2e/vue-start/basic-auth/.prettierignore

@@ -0,0 +1,4 @@
+**/build
+**/public
+pnpm-lock.yaml
+routeTree.gen.ts

e2e/vue-start/basic-auth/package.json

@@ -0,0 +1,42 @@
+{
+  "name": "tanstack-vue-start-e2e-basic-auth",
+  "private": true,
+  "sideEffects": false,
+  "type": "module",
+  "scripts": {
+    "dev": "vite dev --port 3000",
+    "dev:e2e": "vite dev",
+    "build": "vite build && tsc --noEmit",
+    "preview": "vite preview",
+    "start": "pnpx srvx --prod -s ../client dist/server/server.js",
+    "prisma-generate": "prisma generate",
+    "test:e2e": "rm -rf port*.txt; mkdir -p .tmp; rm -f .tmp/dev.db .tmp/dev.db-journal .tmp/dev.db-wal .tmp/dev.db-shm; export DATABASE_URL=file:./.tmp/dev.db; pnpm run prisma-generate && pnpm exec prisma migrate deploy && playwright test --project=chromium"
+  },
+  "dependencies": {
+    "@libsql/client": "^0.15.15",
+    "@prisma/adapter-libsql": "^7.0.0",
+    "@prisma/client": "^7.0.0",
+    "@tanstack/vue-router": "workspace:^",
+    "@tanstack/vue-router-devtools": "workspace:^",
+    "@tanstack/vue-start": "workspace:^",
+    "redaxios": "^0.5.1",
+    "tailwind-merge": "^2.6.0",
+    "vite": "^7.1.7",
+    "vue": "^3.5.25"
+  },
+  "devDependencies": {
+    "@playwright/test": "^1.50.1",
+    "@tailwindcss/postcss": "^4.1.15",
+    "@tanstack/router-e2e-utils": "workspace:^",
+    "@types/node": "^22.10.2",
+    "dotenv": "^17.2.3",
+    "postcss": "^8.5.1",
+    "prisma": "^7.0.0",
+    "srvx": "^0.9.8",
+    "tailwindcss": "^4.1.17",
+    "typescript": "^5.7.2",
+    "@vitejs/plugin-vue": "^6.0.3",
+    "@vitejs/plugin-vue-jsx": "^5.1.2",
+    "vite-tsconfig-paths": "^5.1.4"
+  }
+}

e2e/vue-start/basic-auth/playwright.config.ts

@@ -0,0 +1,34 @@
+import { defineConfig, devices } from '@playwright/test'
+import { getTestServerPort } from '@tanstack/router-e2e-utils'
+import packageJson from './package.json' with { type: 'json' }
+
+const PORT = await getTestServerPort(packageJson.name)
+const baseURL = `http://localhost:${PORT}`
+/**
+ * See https://playwright.dev/docs/test-configuration.
+ */
+export default defineConfig({
+  testDir: './tests',
+  workers: 1,
+
+  reporter: [['line']],
+
+  use: {
+    /* Base URL to use in actions like `await page.goto('/')`. */
+    baseURL,
+  },
+
+  webServer: {
+    command: `VITE_SERVER_PORT=${PORT} pnpm build && PORT=${PORT} VITE_SERVER_PORT=${PORT} pnpm start`,
+    url: baseURL,
+    reuseExistingServer: !process.env.CI,
+    stdout: 'pipe',
+  },
+
+  projects: [
+    {
+      name: 'chromium',
+      use: { ...devices['Desktop Chrome'] },
+    },
+  ],
+})

e2e/vue-start/basic-auth/postcss.config.mjs

@@ -0,0 +1,5 @@
+export default {
+  plugins: {
+    '@tailwindcss/postcss': {},
+  },
+}

e2e/vue-start/basic-auth/prisma.config.ts

@@ -0,0 +1,12 @@
+import 'dotenv/config'
+import { defineConfig, env } from 'prisma/config'
+
+export default defineConfig({
+  schema: './prisma/schema.prisma',
+  migrations: {
+    path: './prisma/migrations',
+  },
+  datasource: {
+    url: env('DATABASE_URL'),
+  },
+})

e2e/vue-start/basic-auth/prisma/migrations/20240811183753_init/migration.sql

@@ -0,0 +1,8 @@
+-- CreateTable
+CREATE TABLE "User" (
+    "email" TEXT NOT NULL PRIMARY KEY,
+    "password" TEXT NOT NULL
+);
+
+-- CreateIndex
+CREATE UNIQUE INDEX "User_email_key" ON "User"("email");

e2e/vue-start/basic-auth/prisma/migrations/migration_lock.toml

@@ -0,0 +1,3 @@
+# Please do not edit this file manually
+# It should be added in your version-control system (i.e. Git)
+provider = "sqlite"