Compare commits
9 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| c77b88988b | |||
| 7b85924018 | |||
| 70e5a232c9 | |||
| a55c64a9c8 | |||
| 3a67b26e1f | |||
| 271406de9e | |||
| d0b855b45d | |||
| 14e17c5fc6 | |||
| 70b0801228 |
+88
-1
@@ -1,4 +1,4 @@
|
||||
import { test as base, expect } from "@playwright/test";
|
||||
import { test as base, expect, type Page } from "@playwright/test";
|
||||
import AxeBuilder from "@axe-core/playwright";
|
||||
|
||||
export const test = base.extend<{ axeCheck: void }>({
|
||||
@@ -10,3 +10,90 @@ export const test = base.extend<{ axeCheck: void }>({
|
||||
});
|
||||
|
||||
export { expect } from "@playwright/test";
|
||||
|
||||
const MOCK_USER_ID = "mock_user_123";
|
||||
const MOCK_SESSION_ID = "mock_session_456";
|
||||
|
||||
function mockAuthRoutes(page: Page, authenticated = false) {
|
||||
page.route(/.*\/auth\/sign-up\/email.*/, async (route) => {
|
||||
await route.fulfill({
|
||||
status: 200,
|
||||
contentType: "application/json",
|
||||
body: JSON.stringify({
|
||||
token: null,
|
||||
user: {
|
||||
id: MOCK_USER_ID,
|
||||
email: "mock@cartsnitch.test",
|
||||
name: "Mock User",
|
||||
emailVerified: true,
|
||||
createdAt: new Date().toISOString(),
|
||||
updatedAt: new Date().toISOString(),
|
||||
},
|
||||
}),
|
||||
});
|
||||
});
|
||||
|
||||
page.route(/.*\/auth\/sign-in\/email.*/, async (route) => {
|
||||
await route.fulfill({
|
||||
status: 200,
|
||||
contentType: "application/json",
|
||||
body: JSON.stringify({
|
||||
redirect: false,
|
||||
token: "mock_token_123",
|
||||
user: {
|
||||
id: MOCK_USER_ID,
|
||||
email: "mock@cartsnitch.test",
|
||||
name: "Mock User",
|
||||
emailVerified: true,
|
||||
createdAt: new Date().toISOString(),
|
||||
updatedAt: new Date().toISOString(),
|
||||
},
|
||||
}),
|
||||
});
|
||||
});
|
||||
|
||||
page.route(/.*\/auth\/get-session.*/, async (route) => {
|
||||
if (authenticated) {
|
||||
await route.fulfill({
|
||||
status: 200,
|
||||
contentType: "application/json",
|
||||
body: JSON.stringify({
|
||||
session: {
|
||||
id: MOCK_SESSION_ID,
|
||||
expiresAt: new Date(Date.now() + 7 * 24 * 60 * 60 * 1000).toISOString(),
|
||||
createdAt: new Date().toISOString(),
|
||||
updatedAt: new Date().toISOString(),
|
||||
ipAddress: null,
|
||||
userAgent: null,
|
||||
},
|
||||
user: {
|
||||
id: MOCK_USER_ID,
|
||||
email: "mock@cartsnitch.test",
|
||||
name: "Mock User",
|
||||
emailVerified: true,
|
||||
createdAt: new Date().toISOString(),
|
||||
updatedAt: new Date().toISOString(),
|
||||
},
|
||||
}),
|
||||
});
|
||||
} else {
|
||||
await route.fulfill({
|
||||
status: 401,
|
||||
contentType: "application/json",
|
||||
body: JSON.stringify({ error: "Unauthorized" }),
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
export function mockSessionPending(page: Page) {
|
||||
page.route(/.*\/auth\/session.*/, async (route) => {
|
||||
await route.fulfill({
|
||||
status: 401,
|
||||
contentType: "application/json",
|
||||
body: JSON.stringify({ error: "Unauthorized" }),
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
export { mockAuthRoutes };
|
||||
|
||||
@@ -1,18 +1,18 @@
|
||||
import { test, expect } from '@playwright/test';
|
||||
import { mockAuthRoutes } from '../fixtures';
|
||||
|
||||
const uniqueEmail = () => `betty+e2e-${Date.now()}@cartsnitch.test`;
|
||||
|
||||
test.describe('J1: Registration and Login', () => {
|
||||
test('can register a new account and lands on dashboard', async ({ page }) => {
|
||||
test('can register a new account and see check your email screen', async ({ page }) => {
|
||||
mockAuthRoutes(page, true);
|
||||
await page.goto('/register');
|
||||
await page.fill('[placeholder="Full Name"]', 'Betty Tester');
|
||||
await page.fill('[placeholder="Email"]', uniqueEmail());
|
||||
await page.fill('[placeholder="Password (min. 8 characters)"]', 'TestPass123!');
|
||||
await page.click('button[type="submit"]');
|
||||
|
||||
// With VITE_MOCK_AUTH=true the app navigates to "/" on success
|
||||
await expect(page).toHaveURL('http://localhost:5173/');
|
||||
await expect(page.getByRole('heading', { name: /cart/i })).toBeVisible();
|
||||
await expect(page.getByRole('heading', { name: /check your email/i })).toBeVisible();
|
||||
});
|
||||
|
||||
test('shows validation error when registration fields are empty', async ({ page }) => {
|
||||
@@ -31,22 +31,9 @@ test.describe('J1: Registration and Login', () => {
|
||||
});
|
||||
|
||||
test('can sign in with credentials and land on dashboard', async ({ page }) => {
|
||||
// Register first so we have a real account
|
||||
const email = uniqueEmail();
|
||||
await page.goto('/register');
|
||||
await page.fill('[placeholder="Full Name"]', 'Login Betty');
|
||||
await page.fill('[placeholder="Email"]', email);
|
||||
await page.fill('[placeholder="Password (min. 8 characters)"]', 'TestPass123!');
|
||||
await page.click('button[type="submit"]');
|
||||
await expect(page).toHaveURL('http://localhost:5173/');
|
||||
|
||||
// Sign out by clearing the mock session (reload with no session)
|
||||
await page.goto('/');
|
||||
await page.reload();
|
||||
|
||||
// Now sign in
|
||||
mockAuthRoutes(page, true);
|
||||
await page.goto('/login');
|
||||
await page.fill('[placeholder="Email"]', email);
|
||||
await page.fill('[placeholder="Email"]', 'test@cartsnitch.test');
|
||||
await page.fill('[placeholder="Password"]', 'TestPass123!');
|
||||
await page.click('button[type="submit"]');
|
||||
|
||||
|
||||
@@ -1,8 +1,9 @@
|
||||
import { test, expect } from '@playwright/test';
|
||||
import { mockAuthRoutes } from '../fixtures';
|
||||
|
||||
test.describe('J8: Unauthenticated Access', () => {
|
||||
test('redirects /dashboard (/) to /login when not authenticated', async ({ page }) => {
|
||||
// No session cookie — start fresh
|
||||
mockAuthRoutes(page, false);
|
||||
await page.context().clearCookies();
|
||||
await page.goto('/');
|
||||
|
||||
@@ -11,6 +12,7 @@ test.describe('J8: Unauthenticated Access', () => {
|
||||
});
|
||||
|
||||
test('redirects /purchases to /login when not authenticated', async ({ page }) => {
|
||||
mockAuthRoutes(page, false);
|
||||
await page.context().clearCookies();
|
||||
await page.goto('/purchases');
|
||||
|
||||
@@ -19,6 +21,7 @@ test.describe('J8: Unauthenticated Access', () => {
|
||||
});
|
||||
|
||||
test('redirects /products to /login when not authenticated', async ({ page }) => {
|
||||
mockAuthRoutes(page, false);
|
||||
await page.context().clearCookies();
|
||||
await page.goto('/products');
|
||||
|
||||
@@ -27,6 +30,7 @@ test.describe('J8: Unauthenticated Access', () => {
|
||||
});
|
||||
|
||||
test('redirects /coupons to /login when not authenticated', async ({ page }) => {
|
||||
mockAuthRoutes(page, false);
|
||||
await page.context().clearCookies();
|
||||
await page.goto('/coupons');
|
||||
|
||||
@@ -35,15 +39,9 @@ test.describe('J8: Unauthenticated Access', () => {
|
||||
});
|
||||
|
||||
test('shows loading spinner while auth session is pending', async ({ page }) => {
|
||||
// Intercept but don't respond — session stays pending
|
||||
mockAuthRoutes(page, false);
|
||||
await page.context().clearCookies();
|
||||
await page.request.fetch('/api/auth/session', {
|
||||
method: 'GET',
|
||||
});
|
||||
|
||||
// Just navigate to a protected route — ProtectedRoute will show spinner while session is pending
|
||||
await page.goto('/purchases');
|
||||
// Spinner is visible briefly; once resolved, should redirect to login
|
||||
await expect(page).toHaveURL(/\/login/, { timeout: 10_000 });
|
||||
});
|
||||
});
|
||||
|
||||
+2
-1
@@ -1,6 +1,7 @@
|
||||
import { test, expect } from './fixtures';
|
||||
import { test, expect, mockAuthRoutes } from './fixtures';
|
||||
|
||||
test('app loads', async ({ page }) => {
|
||||
mockAuthRoutes(page, false);
|
||||
await page.goto('/');
|
||||
// Unauthenticated users are redirected to /login
|
||||
await expect(page).toHaveURL(/\/login/);
|
||||
|
||||
@@ -9,9 +9,12 @@ export default defineConfig({
|
||||
},
|
||||
],
|
||||
webServer: {
|
||||
command: 'VITE_MOCK_AUTH=true npm run dev',
|
||||
command: 'npm run dev',
|
||||
url: 'http://localhost:5173',
|
||||
reuseExistingServer: !process.env.CI,
|
||||
env: {
|
||||
VITE_MOCK_AUTH: 'true',
|
||||
},
|
||||
},
|
||||
use: {
|
||||
baseURL: 'http://localhost:5173',
|
||||
|
||||
+5
-5
@@ -1,5 +1,5 @@
|
||||
import { useState } from 'react'
|
||||
import { Link, useNavigate } from 'react-router-dom'
|
||||
import { Link } from 'react-router-dom'
|
||||
import { authClient } from '../lib/auth-client.ts'
|
||||
import { useAuthStore } from '../stores/auth.ts'
|
||||
|
||||
@@ -8,7 +8,6 @@ export function Login() {
|
||||
const [password, setPassword] = useState('')
|
||||
const [error, setError] = useState('')
|
||||
const [loading, setLoading] = useState(false)
|
||||
const navigate = useNavigate()
|
||||
const setAuthenticated = useAuthStore((s) => s.setAuthenticated)
|
||||
|
||||
async function handleSubmit(e: React.FormEvent) {
|
||||
@@ -31,11 +30,12 @@ export function Login() {
|
||||
throw new Error(authError.message ?? 'Sign in failed')
|
||||
}
|
||||
|
||||
// After successful signIn, force a session fetch to confirm the cookie is set
|
||||
// before navigating to the protected route
|
||||
// After successful signIn, force a full page reload so Better-Auth's
|
||||
// useSession() reinitializes with fresh cookie-backed session state.
|
||||
// Using React Router's navigate() races with Better-Auth's internal update.
|
||||
const sessionResult = await authClient.getSession()
|
||||
if (sessionResult.data) {
|
||||
navigate('/')
|
||||
window.location.href = '/'
|
||||
} else {
|
||||
setError('Sign in failed. Please try again.')
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user