WealthySmart/frontend/e2e/financiamientos-demo.spec.ts

import { test, expect } from "@playwright/test";
import { FeatureDoc } from "./feature-doc";

/**
 * Demo walkthrough of the Financiamientos (Tasa Cero) feature. Doubles as an
 * e2e smoke test and as the generator for e2e-docs/financiamientos/ — a
 * captioned, screenshot-per-step Markdown doc plus the full video (native
 * cursor/chapters, burned-in subtitles, spoken narration) in the Playwright
 * HTML report.
 */
// NOTE: do not `test.use({ video: "off" })` here — disabling the fixture
// video breaks page.screencast's internal sizing (verified: it then records
// a shrunken frame letterboxed inside the requested canvas). The fixture's
// own video ends up redundant/unused but harmless.

test("@demo Financiamientos — compras Tasa Cero en cuotas", async ({ page }, testInfo) => {
  const doc = new FeatureDoc(
    page,
    testInfo,
    "financiamientos",
    "Financiamientos — Tasa Cero",
    "WealthySmart trackea las compras BAC Tasa Cero como planes de cuotas mensuales: cada cuota futura ya cuenta en el presupuesto del mes que le toca, en lugar de registrar la compra como un solo pago.",
  );
  await doc.start();

  await doc.step(
    "Iniciar sesión",
    "El acceso está protegido con usuario y contraseña; la sesión vive en una cookie HTTP-only.",
    async () => {
      await page.goto("/login");
      // CopilotKit mounts its dev web-inspector in dev builds; keep it out of
      // the recording — it isn't part of the product.
      await page.addStyleTag({ content: "cpk-web-inspector { display: none !important; }" });
      await page.getByLabel("Username").fill(process.env.ADMIN_USERNAME!);
      await page.getByLabel("Password").fill(process.env.ADMIN_PASSWORD!);
      await expect(page.getByRole("button", { name: /sign in/i })).toBeEnabled();
    },
  );

  await doc.step(
    "Panel de inicio",
    "Después del login se llega al dashboard Inicio, con el resumen del mes y la navegación lateral por módulos.",
    async () => {
      await page.getByRole("button", { name: /sign in/i }).click();
      await page.waitForURL("/");
      await expect(page.getByRole("link", { name: "Financiamientos", exact: true })).toBeVisible();
      await page.waitForLoadState("networkidle");
    },
  );

  await doc.step(
    "Modo privacidad",
    "El botón de privacidad difumina todos los montos sensibles — útil para compartir pantalla (y para este demo).",
    async () => {
      await page.getByRole("button", { name: "Toggle privacy mode" }).click();
      await expect(page.locator("html")).toHaveClass(/privacy/);
    },
  );

  await doc.step(
    "Página de Financiamientos",
    "El módulo resume todos los planes Tasa Cero: saldo faltante total, cuánto suman las cuotas de los planes activos cada mes, y cuántos planes siguen vivos.",
    async () => {
      await page.getByRole("link", { name: "Financiamientos", exact: true }).click();
      await page.waitForURL("/financiamientos");
      await expect(page.getByText("Saldo faltante total")).toBeVisible();
      await expect(page.getByText("Cuotas por mes (activos)")).toBeVisible();
      await page.waitForLoadState("networkidle");
    },
  );

  await doc.step(
    "Tabla de planes",
    "Cada plan muestra el comercio, el avance de cuotas (facturadas vs. totales), el monto de la cuota, el saldo que falta y cuándo cae la próxima cuota.",
    async () => {
      const rows = page.getByRole("button", { name: /editar plan de/i });
      await expect(rows.first()).toBeVisible();
      expect(await rows.count()).toBeGreaterThan(0);
      await expect(page.getByRole("columnheader", { name: "Próxima cuota" })).toBeVisible();
    },
  );

  await doc.step(
    "Detalle de un plan",
    "Al hacer clic en un plan se abre su detalle editable: fecha ancla, número de cuotas y monto. Desde aquí también se puede deshacer la conversión a Tasa Cero.",
    async () => {
      await page.getByRole("button", { name: /editar plan de/i }).first().click();
      await expect(page.getByRole("heading", { name: "Editar plan Tasa Cero" })).toBeVisible();
    },
  );

  await doc.step(
    "Cerrar el detalle",
    "El plan queda igual que estaba — el recorrido es de solo lectura.",
    async () => {
      await page.keyboard.press("Escape");
      await expect(page.getByRole("heading", { name: "Editar plan Tasa Cero" })).toBeHidden();
    },
  );

  await doc.save();
});