cardosofelipe/syndarix
1
0
Fork 0
forked from cardosofelipe/fast-next-template
Code Issues 18 Pull Requests Wiki Activity

Add E2E test mode flag and rebuild Profile Settings tests

Browse Source 
- Introduced `__PLAYWRIGHT_TEST__` flag in `storage.ts` to bypass token encryption for improved E2E test stability.
- Rebuilt Profile Settings E2E tests to verify user data display with mock API responses.
- Refactored `setupAuthenticatedMocks` and `loginViaUI` to support new test requirements and streamline session setup.
- Removed outdated debug selectors test `test-selectors.spec.ts`.
This commit is contained in:
Felipe Cardoso
2025-11-05 21:07:21 +01:00
parent 9ffd61527c
commit df8ef98857
4 changed files with 81 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
frontend/e2e/helpers/auth.ts
View File

@@ -44,9 +44,9 @@ export const MOCK_SESSION = {
* @param email User email (defaults to mock user email)
* @param password User password (defaults to mock password)
*/
export async function loginViaUI(page: Page, email = 'test@example.com', password = 'password123'): Promise<void> {
export async function loginViaUI(page: Page, email = 'test@example.com', password = 'Password123!'): Promise<void> {
// Navigate to login page
await page.goto('/auth/login');
await page.goto('/login');
// Fill login form
await page.locator('input[name="email"]').fill(email);
@@ -70,6 +70,11 @@ export async function loginViaUI(page: Page, email = 'test@example.com', passwor
* @param page Playwright page object
*/
export async function setupAuthenticatedMocks(page: Page): Promise<void> {
// Set E2E test mode flag to skip encryption in storage.ts
await page.addInitScript(() => {
(window as any).__PLAYWRIGHT_TEST__ = true;
});
const baseURL = process.env.NEXT_PUBLIC_API_BASE_URL || 'http://localhost:8000';
// Mock POST /api/v1/auth/login - Login endpoint
@@ -79,13 +84,11 @@ export async function setupAuthenticatedMocks(page: Page): Promise<void> {
status: 200,
contentType: 'application/json',
body: JSON.stringify({
success: true,
data: {
user: MOCK_USER,
access_token: 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIwMDAwMDAwMC0wMDAwLTAwMDAtMDAwMC0wMDAwMDAwMDAwMDEiLCJleHAiOjk5OTk5OTk5OTl9.signature',
refresh_token: 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIwMDAwMDAwMC0wMDAwLTAwMDAtMDAwMC0wMDAwMDAwMDAwMDIiLCJleHAiOjk5OTk5OTk5OTl9.signature',
expires_in: 3600,
},
user: MOCK_USER,
access_token: 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIwMDAwMDAwMC0wMDAwLTAwMDAtMDAwMC0wMDAwMDAwMDAwMDEiLCJleHAiOjk5OTk5OTk5OTl9.signature',
refresh_token: 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIwMDAwMDAwMC0wMDAwLTAwMDAtMDAwMC0wMDAwMDAwMDAwMDIiLCJleHAiOjk5OTk5OTk5OTl9.signature',
expires_in: 3600,
token_type: 'bearer',
}),
});
} else {
@@ -100,20 +103,14 @@ export async function setupAuthenticatedMocks(page: Page): Promise<void> {
await route.fulfill({
status: 200,
contentType: 'application/json',
body: JSON.stringify({
success: true,
data: MOCK_USER,
}),
body: JSON.stringify(MOCK_USER),
});
} else if (route.request().method() === 'PATCH') {
const postData = route.request().postDataJSON();
await route.fulfill({
status: 200,
contentType: 'application/json',
body: JSON.stringify({
success: true,
data: { ...MOCK_USER, ...postData },
}),
body: JSON.stringify({ ...MOCK_USER, ...postData }),
});
} else {
await route.continue();
@@ -126,7 +123,6 @@ export async function setupAuthenticatedMocks(page: Page): Promise<void> {
status: 200,
contentType: 'application/json',
body: JSON.stringify({
success: true,
message: 'Password changed successfully',
}),
});
@@ -139,10 +135,7 @@ export async function setupAuthenticatedMocks(page: Page): Promise<void> {
status: 200,
contentType: 'application/json',
body: JSON.stringify({
success: true,
data: {
sessions: [MOCK_SESSION],
},
sessions: [MOCK_SESSION],
}),
});
} else {
@@ -157,7 +150,6 @@ export async function setupAuthenticatedMocks(page: Page): Promise<void> {
status: 200,
contentType: 'application/json',
body: JSON.stringify({
success: true,
message: 'Session revoked successfully',
}),
});

45
frontend/e2e/settings-profile.spec.ts
View File

@@ -1,24 +1,37 @@
/**
* E2E Tests for Profile Settings Page
*
* DELETED: All profile settings tests were failing due to auth state issues after
* architecture simplification. These tests will be rebuilt in Phase 3 with a
* pragmatic approach combining actual login flow and direct auth store injection.
*
* Tests to rebuild:
* - Display profile form with user data
* - Update first name
* - Update last name
* - Update email (with verification flow)
* - Validation errors
* - Successfully save changes
* Tests user profile management functionality
*/
import { test } from '@playwright/test';
import { test, expect } from '@playwright/test';
import { setupAuthenticatedMocks, loginViaUI, MOCK_USER } from './helpers/auth';
test.describe('Profile Settings', () => {
test.skip('Placeholder - tests will be rebuilt in Phase 3', async () => {
// Tests deleted during nuclear refactor Phase 2
// Will be rebuilt with pragmatic auth approach
test.beforeEach(async ({ page }) => {
// Set up API mocks
await setupAuthenticatedMocks(page);
// Login via UI to establish authenticated session
await loginViaUI(page);
// Navigate to profile page
await page.goto('/settings/profile');
// Wait for page to render
await page.waitForTimeout(1000);
});
test('should display profile form with user data', async ({ page }) => {
// Check page title
await expect(page.locator('h2')).toContainText('Profile Settings');
// Wait for form to be populated with user data (use label-based selectors)
const firstNameInput = page.getByLabel(/first name/i);
await firstNameInput.waitFor({ state: 'visible', timeout: 10000 });
// Verify form fields are populated with mock user data
await expect(firstNameInput).toHaveValue(MOCK_USER.first_name);
await expect(page.getByLabel(/last name/i)).toHaveValue(MOCK_USER.last_name);
await expect(page.getByLabel(/email/i)).toHaveValue(MOCK_USER.email);
});
});

17
frontend/e2e/test-selectors.spec.ts
View File

@@ -1,17 +0,0 @@
import { test } from '@playwright/test';
import { setupAuthenticatedMocks } from './helpers/auth';
test('debug selectors', async ({ page }) => {
await setupAuthenticatedMocks(page);
await page.goto('/settings/profile');
await page.waitForTimeout(2000); // Wait for render
// Print all input elements
const inputs = await page.locator('input').all();
for (const input of inputs) {
const name = await input.getAttribute('name');
const id = await input.getAttribute('id');
const type = await input.getAttribute('type');
console.log(`Input: id="${id}", name="${name}", type="${type}"`);
}
});

40
frontend/src/lib/auth/storage.ts
View File

@@ -3,6 +3,9 @@
* Primary: httpOnly cookies (server-side)
* Fallback: Encrypted localStorage (client-side)
* SSR-safe: All browser APIs guarded
*
* E2E Test Mode: When __PLAYWRIGHT_TEST__ flag is set, encryption is skipped
* for easier E2E testing without production code pollution
*/
import { encryptData, decryptData, clearEncryptionKey } from './crypto';
@@ -17,6 +20,14 @@ const STORAGE_METHOD_KEY = 'auth_storage_method';
export type StorageMethod = 'cookie' | 'localStorage';
/**
* Check if running in E2E test mode (Playwright)
* This flag is set by E2E tests to skip encryption for easier testing
*/
function isE2ETestMode(): boolean {
return typeof window !== 'undefined' && (window as any).__PLAYWRIGHT_TEST__ === true;
}
/**
* Check if localStorage is available (browser only)
*/
@@ -102,6 +113,13 @@ export async function saveTokens(tokens: TokenStorage): Promise<void> {
}
try {
// E2E TEST MODE: Skip encryption for Playwright tests
if (isE2ETestMode()) {
localStorage.setItem(STORAGE_KEY, JSON.stringify(tokens));
return;
}
// PRODUCTION: Use encryption
const encrypted = await encryptData(JSON.stringify(tokens));
localStorage.setItem(STORAGE_KEY, encrypted);
} catch (error) {
@@ -134,12 +152,28 @@ export async function getTokens(): Promise<TokenStorage | null> {
}
try {
const encrypted = localStorage.getItem(STORAGE_KEY);
if (!encrypted) {
const stored = localStorage.getItem(STORAGE_KEY);
if (!stored) {
return null;
}
const decrypted = await decryptData(encrypted);
// E2E TEST MODE: Tokens stored as plain JSON
if (isE2ETestMode()) {
const parsed = JSON.parse(stored);
// Validate structure - must have required fields
if (!parsed || typeof parsed !== 'object' ||
!('accessToken' in parsed) || !('refreshToken' in parsed) ||
(parsed.accessToken !== null && typeof parsed.accessToken !== 'string') ||
(parsed.refreshToken !== null && typeof parsed.refreshToken !== 'string')) {
throw new Error('Invalid token structure');
}
return parsed as TokenStorage;
}
// PRODUCTION: Decrypt tokens
const decrypted = await decryptData(stored);
const parsed = JSON.parse(decrypted);
// Validate structure - must have required fields