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

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

/**
 * E2E Tests - Navegacion
 * MiChangarrito Frontend
 *
 * Nota: Estos tests requieren autenticacion
 * Se usan con un usuario de prueba pre-configurado
 */

test.describe('Navegacion Publica', () => {
  test('debe cargar la aplicacion', async ({ page }) => {
    await page.goto('/');

    // Al no estar autenticado, debe redirigir a login
    await expect(page).toHaveURL('/login');
  });

  test('rutas invalidas redirigen a login', async ({ page }) => {
    await page.goto('/ruta-que-no-existe');

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

  test('login page tiene titulo correcto', async ({ page }) => {
    await page.goto('/login');

    await expect(page).toHaveTitle(/MiChangarrito/i);
  });
});

test.describe('UI Responsiva', () => {
  test('login se adapta a mobile', async ({ page }) => {
    // Viewport mobile
    await page.setViewportSize({ width: 375, height: 667 });
    await page.goto('/login');

    // El formulario debe ser visible y usable
    await expect(page.locator('form')).toBeVisible();
    await expect(page.locator('input[name="phone"]')).toBeVisible();
    await expect(page.locator('input[name="pin"]')).toBeVisible();
    await expect(page.locator('button[type="submit"]')).toBeVisible();
  });

  test('login se adapta a tablet', async ({ page }) => {
    // Viewport tablet
    await page.setViewportSize({ width: 768, height: 1024 });
    await page.goto('/login');

    await expect(page.locator('form')).toBeVisible();
  });

  test('login se adapta a desktop', async ({ page }) => {
    // Viewport desktop
    await page.setViewportSize({ width: 1920, height: 1080 });
    await page.goto('/login');

    await expect(page.locator('form')).toBeVisible();
  });
});

test.describe('Accesibilidad', () => {
  test('campos tienen labels', async ({ page }) => {
    await page.goto('/login');

    // Verificar que los inputs tienen labels asociados
    const phoneLabel = page.locator('label[for="phone"]');
    const pinLabel = page.locator('label[for="pin"]');

    await expect(phoneLabel).toBeVisible();
    await expect(pinLabel).toBeVisible();
  });

  test('formulario es navegable con teclado', async ({ page }) => {
    await page.goto('/login');

    // Tab al primer campo
    await page.keyboard.press('Tab');
    const phoneInput = page.locator('input[name="phone"]');
    await expect(phoneInput).toBeFocused();

    // Tab al segundo campo
    await page.keyboard.press('Tab');
    const pinInput = page.locator('input[name="pin"]');
    await expect(pinInput).toBeFocused();

    // Tab al boton
    await page.keyboard.press('Tab');
    const submitButton = page.locator('button[type="submit"]');
    await expect(submitButton).toBeFocused();
  });

  test('formulario puede enviarse con Enter', async ({ page }) => {
    await page.goto('/login');

    // Llenar campos
    await page.locator('input[name="phone"]').fill('5512345678');
    await page.locator('input[name="pin"]').fill('1234');

    // Enviar con Enter
    await page.keyboard.press('Enter');

    // El formulario debe intentar enviarse (el boton estara en estado loading)
    const submitButton = page.locator('button[type="submit"]');
    // Puede estar disabled durante el envio o ya haber terminado
    await page.waitForTimeout(500);
  });
});

test.describe('Performance', () => {
  test('login carga en menos de 3 segundos', async ({ page }) => {
    const startTime = Date.now();

    await page.goto('/login');
    await expect(page.locator('h1')).toBeVisible();

    const loadTime = Date.now() - startTime;
    expect(loadTime).toBeLessThan(3000);
  });
});