bakery-admin/bakery-ia
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Improve the UI and tests

Browse Source
This commit is contained in:
Urtzi Alfaro
2025-11-15 21:21:06 +01:00
parent 86d704b354
commit 54b7a5e080
44 changed files with 2268 additions and 1414 deletions
Download Patch File Download Diff File Expand all files Collapse all files

52
frontend/tests/auth/login.spec.ts
View File

@@ -1,26 +1,29 @@
import { test, expect } from '@playwright/test';
import { login, logout, TEST_USER } from '../helpers/auth';
import { acceptCookieConsent } from '../helpers/utils';
test.describe('Login Flow', () => {
test.beforeEach(async ({ page }) => {
// Start at login page
await page.goto('/login');
// Accept cookie consent if present
await acceptCookieConsent(page);
});
test('should display login form', async ({ page }) => {
// Verify login page elements are visible
await expect(page.getByLabel(/email/i)).toBeVisible();
await expect(page.getByLabel(/password/i)).toBeVisible();
await expect(page.getByRole('button', { name: /log in|sign in|login/i })).toBeVisible();
// Verify login page elements are visible (support both English and Spanish)
await expect(page.getByLabel(/email|correo/i)).toBeVisible();
await expect(page.getByRole('textbox', { name: /password|contraseña/i })).toBeVisible();
await expect(page.getByRole('button', { name: /log in|sign in|login|acceder/i })).toBeVisible();
});
test('should successfully login with valid credentials', async ({ page }) => {
// Fill in credentials
await page.getByLabel(/email/i).fill(TEST_USER.email);
await page.getByLabel(/password/i).fill(TEST_USER.password);
await page.getByLabel(/email|correo/i).fill(TEST_USER.email);
await page.getByRole('textbox', { name: /password|contraseña/i }).fill(TEST_USER.password);
// Click login button
await page.getByRole('button', { name: /log in|sign in|login/i }).click();
await page.getByRole('button', { name: /log in|sign in|login|acceder/i }).click();
// Should redirect to dashboard or app
await expect(page).toHaveURL(/\/(app|dashboard)/, { timeout: 10000 });
@@ -31,11 +34,11 @@ test.describe('Login Flow', () => {
test('should show error with invalid email', async ({ page }) => {
// Fill in invalid credentials
await page.getByLabel(/email/i).fill('invalid@email.com');
await page.getByLabel(/password/i).fill('wrongpassword');
await page.getByLabel(/email|correo/i).fill('invalid@email.com');
await page.getByRole('textbox', { name: /password|contraseña/i }).fill('wrongpassword');
// Click login button
await page.getByRole('button', { name: /log in|sign in|login/i }).click();
await page.getByRole('button', { name: /log in|sign in|login|acceder/i }).click();
// Should show error message
await expect(page.locator('body')).toContainText(/invalid|incorrect|error|credenciales/i, {
@@ -48,8 +51,8 @@ test.describe('Login Flow', () => {
test('should show validation error for empty email', async ({ page }) => {
// Try to submit without email
await page.getByLabel(/password/i).fill('somepassword');
await page.getByRole('button', { name: /log in|sign in|login/i }).click();
await page.getByRole('textbox', { name: /password|contraseña/i }).fill('somepassword');
await page.getByRole('button', { name: /log in|sign in|login|acceder/i }).click();
// Should show validation error (either inline or toast)
const bodyText = await page.locator('body').textContent();
@@ -58,8 +61,8 @@ test.describe('Login Flow', () => {
test('should show validation error for empty password', async ({ page }) => {
// Try to submit without password
await page.getByLabel(/email/i).fill('test@example.com');
await page.getByRole('button', { name: /log in|sign in|login/i }).click();
await page.getByLabel(/email|correo/i).fill('test@example.com');
await page.getByRole('button', { name: /log in|sign in|login|acceder/i }).click();
// Should show validation error
const bodyText = await page.locator('body').textContent();
@@ -67,15 +70,17 @@ test.describe('Login Flow', () => {
});
test('should toggle password visibility', async ({ page }) => {
const passwordInput = page.getByLabel(/password/i);
const passwordInput = page.getByRole('textbox', { name: /password|contraseña/i });
// Initially should be password type
await expect(passwordInput).toHaveAttribute('type', 'password');
// Look for toggle button (eye icon, "show password", etc.)
const toggleButton = page.locator('button:has-text("Show"), button:has-text("Mostrar"), button[aria-label*="password"]').first();
const toggleButton = page.getByRole('button', { name: /show|mostrar.*password|contraseña/i });
if (await toggleButton.isVisible()) {
const isToggleVisible = await toggleButton.isVisible({ timeout: 2000 }).catch(() => false);
if (isToggleVisible) {
await toggleButton.click();
// Should change to text type
@@ -88,11 +93,18 @@ test.describe('Login Flow', () => {
});
test('should have link to registration page', async ({ page }) => {
// Look for register/signup link
const registerLink = page.getByRole('link', { name: /register|sign up|crear cuenta/i });
// Look for register/signup button or link
const registerButton = page.getByRole('button', { name: /register|sign up|crear cuenta|registrar/i });
const registerLink = page.getByRole('link', { name: /register|sign up|crear cuenta|registrar/i });
if (await registerLink.isVisible()) {
const isButtonVisible = await registerButton.isVisible({ timeout: 2000 }).catch(() => false);
const isLinkVisible = await registerLink.isVisible({ timeout: 2000 }).catch(() => false);
if (isLinkVisible) {
await expect(registerLink).toHaveAttribute('href', /\/register/);
} else if (isButtonVisible) {
// If it's a button, just verify it exists
await expect(registerButton).toBeVisible();
}
});

12
frontend/tests/auth/logout.spec.ts
View File

@@ -1,12 +1,19 @@
import { test, expect } from '@playwright/test';
import { acceptCookieConsent } from '../helpers/utils';
test.describe('Logout Flow', () => {
// Use authenticated state for these tests
test.use({ storageState: 'tests/.auth/user.json' });
test.beforeEach(async ({ page }) => {
// Accept cookie consent if present on any page navigation
await acceptCookieConsent(page);
});
test('should successfully logout', async ({ page }) => {
// Navigate to dashboard
await page.goto('/app/dashboard');
await acceptCookieConsent(page);
// Verify we're logged in
await expect(page.locator('body')).toContainText(/dashboard|panel de control/i);
@@ -29,8 +36,9 @@ test.describe('Logout Flow', () => {
// Should redirect to login page
await expect(page).toHaveURL(/\/(login|$)/, { timeout: 10000 });
// Verify we're logged out
await expect(page.getByLabel(/email/i)).toBeVisible();
// Verify we're logged out (check for login form)
await acceptCookieConsent(page);
await expect(page.getByLabel(/email|correo/i)).toBeVisible();
});
test('should not access protected routes after logout', async ({ page }) => {

73
frontend/tests/auth/register.spec.ts
View File

@@ -1,19 +1,21 @@
import { test, expect } from '@playwright/test';
import { generateTestId } from '../helpers/utils';
import { generateTestId, acceptCookieConsent } from '../helpers/utils';
test.describe('Registration Flow', () => {
test.beforeEach(async ({ page }) => {
// Start at registration page
await page.goto('/register');
// Accept cookie consent if present
await acceptCookieConsent(page);
});
test('should display registration form', async ({ page }) => {
// Verify registration form elements
await expect(page.getByLabel(/email/i)).toBeVisible();
await expect(page.getByLabel(/password/i).first()).toBeVisible();
// Verify registration form elements (support both English and Spanish)
await expect(page.getByLabel(/email|correo/i)).toBeVisible();
await expect(page.getByRole('textbox', { name: /password|contraseña/i }).first()).toBeVisible();
// Look for submit button
const submitButton = page.getByRole('button', { name: /register|sign up|crear cuenta/i });
const submitButton = page.getByRole('button', { name: /register|sign up|crear cuenta|registrar/i });
await expect(submitButton).toBeVisible();
});
@@ -23,14 +25,15 @@ test.describe('Registration Flow', () => {
const testPassword = 'Test123!@#Password';
// Fill in registration form
await page.getByLabel(/email/i).fill(testEmail);
await page.getByLabel(/email|correo/i).fill(testEmail);
// Find password fields
const passwordFields = page.getByLabel(/password/i);
const passwordFields = page.getByRole('textbox', { name: /password|contraseña/i });
await passwordFields.first().fill(testPassword);
// If there's a confirm password field
if (await passwordFields.count() > 1) {
const count = await passwordFields.count();
if (count > 1) {
await passwordFields.nth(1).fill(testPassword);
}
@@ -52,7 +55,7 @@ test.describe('Registration Flow', () => {
}
// Submit form
await page.getByRole('button', { name: /register|sign up|crear cuenta/i }).click();
await page.getByRole('button', { name: /register|sign up|crear cuenta|registrar/i }).click();
// Should redirect to onboarding or dashboard
await expect(page).toHaveURL(/\/(app|dashboard|onboarding)/, { timeout: 15000 });
@@ -60,13 +63,13 @@ test.describe('Registration Flow', () => {
test('should show validation error for invalid email format', async ({ page }) => {
// Fill in invalid email
await page.getByLabel(/email/i).fill('invalid-email');
await page.getByLabel(/email|correo/i).fill('invalid-email');
const passwordFields = page.getByLabel(/password/i);
const passwordFields = page.getByRole('textbox', { name: /password|contraseña/i });
await passwordFields.first().fill('ValidPassword123!');
// Submit
await page.getByRole('button', { name: /register|sign up|crear cuenta/i }).click();
await page.getByRole('button', { name: /register|sign up|crear cuenta|registrar/i }).click();
// Should show email validation error
await expect(page.locator('body')).toContainText(/valid email|email válido|formato/i, {
@@ -77,16 +80,17 @@ test.describe('Registration Flow', () => {
test('should show error for weak password', async ({ page }) => {
const testEmail = `test-${generateTestId()}@bakery.com`;
await page.getByLabel(/email/i).fill(testEmail);
await page.getByLabel(/email|correo/i).fill(testEmail);
const passwordFields = page.getByLabel(/password/i);
const passwordFields = page.getByRole('textbox', { name: /password|contraseña/i });
await passwordFields.first().fill('123'); // Weak password
if (await passwordFields.count() > 1) {
const count = await passwordFields.count();
if (count > 1) {
await passwordFields.nth(1).fill('123');
}
await page.getByRole('button', { name: /register|sign up|crear cuenta/i }).click();
await page.getByRole('button', { name: /register|sign up|crear cuenta|registrar/i }).click();
// Should show password strength error
await expect(page.locator('body')).toContainText(
@@ -98,16 +102,17 @@ test.describe('Registration Flow', () => {
test('should show error when passwords do not match', async ({ page }) => {
const testEmail = `test-${generateTestId()}@bakery.com`;
await page.getByLabel(/email/i).fill(testEmail);
await page.getByLabel(/email|correo/i).fill(testEmail);
const passwordFields = page.getByLabel(/password/i);
const passwordFields = page.getByRole('textbox', { name: /password|contraseña/i });
// Only test if there are multiple password fields (password + confirm)
if (await passwordFields.count() > 1) {
const count = await passwordFields.count();
if (count > 1) {
await passwordFields.first().fill('Password123!');
await passwordFields.nth(1).fill('DifferentPassword123!');
await page.getByRole('button', { name: /register|sign up|crear cuenta/i }).click();
await page.getByRole('button', { name: /register|sign up|crear cuenta|registrar/i }).click();
// Should show mismatch error
await expect(page.locator('body')).toContainText(/match|coincide|igual/i, {
@@ -118,16 +123,17 @@ test.describe('Registration Flow', () => {
test('should show error for already registered email', async ({ page }) => {
// Try to register with an email that's already in use
await page.getByLabel(/email/i).fill('existing@bakery.com');
await page.getByLabel(/email|correo/i).fill('existing@bakery.com');
const passwordFields = page.getByLabel(/password/i);
const passwordFields = page.getByRole('textbox', { name: /password|contraseña/i });
await passwordFields.first().fill('ValidPassword123!');
if (await passwordFields.count() > 1) {
const count = await passwordFields.count();
if (count > 1) {
await passwordFields.nth(1).fill('ValidPassword123!');
}
await page.getByRole('button', { name: /register|sign up|crear cuenta/i }).click();
await page.getByRole('button', { name: /register|sign up|crear cuenta|registrar/i }).click();
// Should show error about email already existing
await expect(page.locator('body')).toContainText(
@@ -137,11 +143,17 @@ test.describe('Registration Flow', () => {
});
test('should have link to login page', async ({ page }) => {
// Look for login link
// Look for login link or button
const loginLink = page.getByRole('link', { name: /log in|sign in|iniciar sesión/i });
const loginButton = page.getByRole('button', { name: /log in|sign in|iniciar sesión/i });
if (await loginLink.isVisible()) {
const isLinkVisible = await loginLink.isVisible({ timeout: 2000 }).catch(() => false);
const isButtonVisible = await loginButton.isVisible({ timeout: 2000 }).catch(() => false);
if (isLinkVisible) {
await expect(loginLink).toHaveAttribute('href', /\/login/);
} else if (isButtonVisible) {
await expect(loginButton).toBeVisible();
}
});
@@ -152,17 +164,18 @@ test.describe('Registration Flow', () => {
if (await termsCheckbox.isVisible().catch(() => false)) {
const testEmail = `test-${generateTestId()}@bakery.com`;
await page.getByLabel(/email/i).fill(testEmail);
await page.getByLabel(/email|correo/i).fill(testEmail);
const passwordFields = page.getByLabel(/password/i);
const passwordFields = page.getByRole('textbox', { name: /password|contraseña/i });
await passwordFields.first().fill('ValidPassword123!');
if (await passwordFields.count() > 1) {
const count = await passwordFields.count();
if (count > 1) {
await passwordFields.nth(1).fill('ValidPassword123!');
}
// Try to submit without checking terms
await page.getByRole('button', { name: /register|sign up|crear cuenta/i }).click();
await page.getByRole('button', { name: /register|sign up|crear cuenta|registrar/i }).click();
// Should show error or prevent submission
await expect(page.locator('body')).toContainText(/terms|accept|acepto|required/i, {