michangarrito/apps/frontend/e2e/auth.spec.ts

import { test, expect } from '@playwright/test';

/**
 * E2E Tests - Autenticacion
 * MiChangarrito Frontend
 */

test.describe('Autenticacion', () => {
  test.beforeEach(async ({ page }) => {
    await page.goto('/login');
  });

  test('debe mostrar la pagina de login', async ({ page }) => {
    // Verificar titulo
    await expect(page.locator('h1')).toContainText('MiChangarrito');
    await expect(page.locator('h2')).toContainText('Iniciar sesion');

    // Verificar campos del formulario
    await expect(page.locator('input[name="phone"]')).toBeVisible();
    await expect(page.locator('input[name="pin"]')).toBeVisible();
    await expect(page.locator('button[type="submit"]')).toBeVisible();

    // Verificar link a registro
    await expect(page.locator('a[href="/register"]')).toBeVisible();
  });

  test('debe validar campos requeridos', async ({ page }) => {
    // Intentar enviar formulario vacio
    await page.locator('button[type="submit"]').click();

    // Los campos tienen required, el navegador debe validar
    const phoneInput = page.locator('input[name="phone"]');
    await expect(phoneInput).toHaveAttribute('required', '');
  });

  test('debe aceptar solo numeros en telefono', async ({ page }) => {
    const phoneInput = page.locator('input[name="phone"]');

    // Escribir texto con letras
    await phoneInput.fill('abc123def456');

    // Debe filtrar solo numeros
    await expect(phoneInput).toHaveValue('123456');
  });

  test('debe limitar telefono a 10 digitos', async ({ page }) => {
    const phoneInput = page.locator('input[name="phone"]');

    await phoneInput.fill('12345678901234');

    // maxLength=10
    await expect(phoneInput).toHaveAttribute('maxLength', '10');
  });

  test('debe aceptar solo numeros en PIN', async ({ page }) => {
    const pinInput = page.locator('input[name="pin"]');

    await pinInput.fill('abc1234');

    // Debe filtrar solo numeros
    await expect(pinInput).toHaveValue('1234');
  });

  test('debe mostrar error con credenciales invalidas', async ({ page }) => {
    // Llenar formulario con datos invalidos
    await page.locator('input[name="phone"]').fill('5500000000');
    await page.locator('input[name="pin"]').fill('0000');

    // Enviar
    await page.locator('button[type="submit"]').click();

    // Esperar respuesta del servidor
    await page.waitForTimeout(1000);

    // Debe mostrar mensaje de error (si el backend esta corriendo)
    // Si no hay backend, verificamos que el boton vuelve a estar habilitado
    const submitButton = page.locator('button[type="submit"]');
    await expect(submitButton).not.toBeDisabled();
  });

  test('debe mostrar estado de carga al enviar', async ({ page }) => {
    // Llenar formulario
    await page.locator('input[name="phone"]').fill('5512345678');
    await page.locator('input[name="pin"]').fill('1234');

    // Enviar y verificar estado de carga
    const submitButton = page.locator('button[type="submit"]');
    await submitButton.click();

    // Verificar que muestra "Ingresando..." mientras carga
    // Nota: Esto es rapido, puede no capturarse siempre
    await expect(submitButton).toContainText(/Ingresar|Ingresando/);
  });

  test('debe navegar a registro', async ({ page }) => {
    await page.locator('a[href="/register"]').click();

    await expect(page).toHaveURL('/register');
  });

  test('debe redirigir a login si no esta autenticado', async ({ page }) => {
    // Intentar acceder a ruta protegida
    await page.goto('/dashboard');

    // Debe redirigir a login
    await expect(page).toHaveURL('/login');
  });

  test('debe redirigir a login desde rutas protegidas', async ({ page }) => {
    const protectedRoutes = [
      '/dashboard',
      '/products',
      '/orders',
      '/customers',
      '/fiado',
      '/inventory',
      '/settings',
    ];

    for (const route of protectedRoutes) {
      await page.goto(route);
      await expect(page).toHaveURL('/login');
    }
  });
});

test.describe('Registro', () => {
  test.beforeEach(async ({ page }) => {
    await page.goto('/register');
  });

  test('debe mostrar la pagina de registro', async ({ page }) => {
    await expect(page.locator('h1')).toContainText('MiChangarrito');

    // Verificar link a login
    await expect(page.locator('a[href="/login"]')).toBeVisible();
  });

  test('debe navegar a login desde registro', async ({ page }) => {
    await page.locator('a[href="/login"]').click();

    await expect(page).toHaveURL('/login');
  });
});