siesa-agents 2.1.72-qa.2 → 2.1.72-qa.21

package/siesa-agents/resources/playwright-kit/helpers/blazor-e2e-helpers.ts

@@ -0,0 +1,417 @@
+/**
+ * Blazor E2E Helpers — Módulo reutilizable para specs GP HCM
+ * Siesa Business ERP (Blazor Server + DevExpress + Radzen + SignalR)
+ *
+ * Extraído de Replica 4 (Capacitaciones) con refinamientos arquitectónicos.
+ * Patrones validados en R1-R4 (4 módulos, 191+ tests).
+ *
+ * Uso:
+ *   import { createObsCollector, login, searchInGrid, ... } from './blazor-e2e-helpers';
+ */
+
+import { expect, type Page } from '@playwright/test';
+import * as fs from 'fs';
+import * as path from 'path';
+
+// ─── Observability Collector ─────────────────────────────────────
+
+export interface ObsEntry {
+  timestamp: string;
+  type: 'console-error' | 'console-warn' | 'js-exception' | 'http-error' | 'app-alert';
+  message: string;
+  url?: string;
+}
+
+export function createObsCollector() {
+  const entries: ObsEntry[] = [];
+  const now = () => new Date().toISOString().slice(11, 23);
+
+  function attach(page: Page) {
+    page.on('console', msg => {
+      if (msg.type() === 'error') {
+        entries.push({ timestamp: now(), type: 'console-error', message: msg.text().slice(0, 300) });
+      } else if (msg.type() === 'warning') {
+        entries.push({ timestamp: now(), type: 'console-warn', message: msg.text().slice(0, 300) });
+      }
+    });
+
+    page.on('pageerror', err => {
+      entries.push({ timestamp: now(), type: 'js-exception', message: String(err).slice(0, 300) });
+    });
+
+    page.on('response', resp => {
+      if (resp.status() >= 400) {
+        entries.push({
+          timestamp: now(),
+          type: 'http-error',
+          message: `${resp.status()} ${resp.statusText()}`,
+          url: resp.url().slice(0, 200),
+        });
+      }
+    });
+
+    // Auto-accept dialogs (confirm/alert/prompt) para demo autónoma
+    page.on('dialog', async dialog => {
+      entries.push({
+        timestamp: now(),
+        type: 'app-alert',
+        message: `[${dialog.type()}] ${dialog.message().slice(0, 300)}`,
+      });
+      await dialog.accept().catch(() => {});
+    });
+  }
+
+  function report(suiteName: string) {
+    console.log(`\n╔══ OBSERVABILITY REPORT — ${suiteName} ══╗`);
+    console.log(`║ Total entries: ${entries.length}`);
+    const byType = entries.reduce((acc, e) => { acc[e.type] = (acc[e.type] || 0) + 1; return acc; }, {} as Record<string, number>);
+    for (const [type, count] of Object.entries(byType)) {
+      console.log(`║  ${type}: ${count}`);
+    }
+    if (entries.length > 0) {
+      console.log('║ ─── Detalle (max 20) ───');
+      for (const e of entries.slice(0, 20)) {
+        console.log(`║ [${e.timestamp}] ${e.type}: ${e.message}${e.url ? ` (${e.url})` : ''}`);
+      }
+      if (entries.length > 20) console.log(`║ ... y ${entries.length - 20} mas`);
+    }
+    console.log(`╚${'═'.repeat(40)}╝\n`);
+
+    // JSON file output
+    const reportData = {
+      suite: suiteName,
+      timestamp: new Date().toISOString(),
+      total: entries.length,
+      byType,
+      entries,
+    };
+    const outDir = path.join(process.cwd(), 'test-results');
+    fs.mkdirSync(outDir, { recursive: true });
+    const jsonPath = path.join(outDir, 'observability-report.json');
+    fs.writeFileSync(jsonPath, JSON.stringify(reportData, null, 2));
+    console.log(`Observability JSON → ${jsonPath}`);
+
+    return reportData;
+  }
+
+  return { entries, attach, report };
+}
+
+// ─── Settle (espera condicional Blazor) ──────────────────────────
+
+/**
+ * Espera condicional a que Blazor/SignalR termine de renderizar:
+ * red en reposo + loader SDK oculto + un pequeño margen configurable.
+ * Reemplaza los `waitForTimeout()` incondicionales largos (regla R-CI-01).
+ * El margen se ajusta con la env var BLAZOR_SETTLE_MS (default 1000 ms);
+ * en CI lento se puede subir sin tocar el código.
+ */
+const SETTLE_MS = Number(process.env.BLAZOR_SETTLE_MS ?? 1000);
+
+export async function settle(page: Page, extraMs = 0) {
+  await page.waitForLoadState('networkidle').catch(() => {});
+  await page.locator('.sdk-loader').waitFor({ state: 'hidden', timeout: 15_000 }).catch(() => {});
+  const margin = SETTLE_MS + extraMs;
+  if (margin > 0) await page.waitForTimeout(margin);
+}
+
+// ─── Login ───────────────────────────────────────────────────────
+
+/**
+ * Selecciona la BD en el login si el combo está presente y `DB_ENGINE` está definido.
+ * Opt-in y best-effort: si no hay combo, `DB_ENGINE` no está, o algo falla, NO lanza
+ * y deja el login directo (comportamiento validado R1-R9 intacto).
+ * Soporta los dos mecanismos del ERP: DevExpress (SDKDropDownField) y <select> nativo.
+ */
+export async function selectDbIfPresent(page: Page, db?: string) {
+  const bd = db ?? process.env.DB_ENGINE;
+  if (!bd) return;
+  try {
+    // 1) DevExpress dropdown (SDKDropDownField_BLLogin.ConnectionName)
+    const ddField = page.locator('[data-automation-id="SDKDropDownField_BLLogin.ConnectionName"]');
+    if (await ddField.isVisible({ timeout: 2_000 }).catch(() => false)) {
+      await ddField.click();
+      const opt = page.getByText(new RegExp(bd, 'i')).first();
+      if (await opt.isVisible({ timeout: 2_000 }).catch(() => false)) {
+        await opt.click();
+        return;
+      }
+    }
+    // 2) <select> nativo
+    const sel = page.locator('select').first();
+    if (await sel.isVisible({ timeout: 2_000 }).catch(() => false)) {
+      const options = await sel.locator('option').allTextContents();
+      const idx = options.findIndex(o => new RegExp(bd, 'i').test(o));
+      if (idx >= 0) await sel.selectOption({ index: idx });
+    }
+  } catch {
+    // best-effort: ante cualquier fallo, continuar con login directo
+  }
+}
+
+export async function login(page: Page, user?: string, pass?: string, db?: string) {
+  const cred = {
+    user: user || process.env.TEST_USER || 'Carlos1',
+    password: pass || process.env.TEST_PASS || '1234',
+  };
+  if (!user && !process.env.TEST_USER) {
+    console.warn('[blazor login] TEST_USER no definido — usando credencial demo "Carlos1". Define TEST_USER/TEST_PASS en .env para tu entorno.');
+  }
+  await page.goto('/login');
+  // Opt-in: solo selecciona BD si DB_ENGINE está definido y el combo existe (si no, login directo).
+  await selectDbIfPresent(page, db);
+  const userInput = page.locator(
+    '[data-automation-id="SDKCharField_BLLogin.Username"] input.dxbl-text-edit-input'
+  );
+  await userInput.waitFor({ state: 'visible', timeout: 30_000 });
+  await userInput.click();
+  await userInput.fill('');
+  await userInput.pressSequentially(cred.user, { delay: 50 });
+
+  await page.locator('[data-automation-id="SDKPasswordField_"]').click();
+  await page.locator('[data-automation-id="SDKPasswordField_"]').fill(cred.password);
+
+  await page.locator('[data-automation-id="SDKButton_submit"]').click();
+  try {
+    await page.waitForURL(/.*(?!.*login).*/, { timeout: 30_000 });
+  } catch (e) {
+    throw new Error(
+      `login: no se completó la autenticación para el usuario "${cred.user}". ` +
+      `Verifica TEST_USER/TEST_PASS y BASE_URL. Causa: ${e instanceof Error ? e.message : String(e)}`
+    );
+  }
+  await settle(page);
+}
+
+// ─── Form Helpers ────────────────────────────────────────────────
+
+export async function fillSDKText(page: Page, automationId: string, value: string) {
+  const input = page.locator(`[data-automation-id="${automationId}"] input.dxbl-text-edit-input`);
+  await input.click({ force: true });
+  await input.fill('');
+  await input.pressSequentially(value, { delay: 30 });
+}
+
+export async function fillSDKTextArea(page: Page, automationId: string, value: string) {
+  const textarea = page.locator(`[data-automation-id="${automationId}"] textarea`);
+  await textarea.click({ force: true });
+  await textarea.fill('');
+  await textarea.pressSequentially(value, { delay: 30 });
+}
+
+export async function fillFechaRadzen(page: Page, automationId: string, fechaMMDDYYYY: string) {
+  const dateInput = page.locator(`[data-automation-id="${automationId}"] input.rz-inputtext`);
+  await dateInput.click();
+  await dateInput.fill('');
+  await dateInput.pressSequentially(fechaMMDDYYYY, { delay: 30 });
+  await page.keyboard.press('Enter');
+}
+
+// ─── Toolbar & UI ────────────────────────────────────────────────
+
+/** Click toolbar button (Create, Edit, Save, etc.) — handles duplicate buttons from hidden sidebar */
+export async function clickToolbar(page: Page, action: string) {
+  await page.evaluate(() => window.scrollTo(0, 0));
+  await page.waitForTimeout(500);
+  const allBtns = page.locator(`[data-automation-id="TopBarButton_Action.${action}"]`);
+  const count = await allBtns.count();
+  const btn = count > 1 ? allBtns.last() : allBtns.first();
+  try {
+    await btn.click({ force: true, timeout: 5_000 });
+  } catch {
+    await btn.evaluate(el => (el as HTMLElement).click());
+  }
+  await settle(page);
+}
+
+export async function closeOverlays(page: Page) {
+  const dialogClose = page.locator('.rz-dialog-titlebar-close');
+  if (await dialogClose.isVisible({ timeout: 1000 }).catch(() => false)) {
+    await dialogClose.click();
+  }
+  const notifClose = page.locator('.rz-notification-close');
+  if (await notifClose.isVisible({ timeout: 500 }).catch(() => false)) {
+    await notifClose.click();
+  }
+}
+
+export async function clickActivo(page: Page) {
+  const activoBtns = page.locator('[data-automation-id="SDKSelectBar_Status"]')
+    .getByText('Activo', { exact: true });
+  const activoBtn = (await activoBtns.count()) > 1 ? activoBtns.last() : activoBtns.first();
+  await activoBtn.click();
+}
+
+export async function waitForSave(page: Page) {
+  await page.locator('.sdk-loader').waitFor({ state: 'hidden', timeout: 15_000 }).catch(() => {});
+  await page.waitForTimeout(1500);
+}
+
+// ─── Entity Popup ────────────────────────────────────────────────
+
+/**
+ * Seleccionar entidad via popup lupa.
+ * Dual-mode: formulario búsqueda (Código+Buscar) vs grid directo (Celda de filtro+Enter).
+ * Maneja overlay search_back_fade con force:true.
+ */
+export async function selectEntityPopup(page: Page, entityAutomationId: string, searchText?: string) {
+  // Click lupa
+  const lupaIcon = page.locator(`[data-automation-id="${entityAutomationId}_SearchBtn"] i.fa-solid.fa-magnifying-glass`);
+  if (await lupaIcon.isVisible({ timeout: 3000 }).catch(() => false)) {
+    await lupaIcon.click();
+  } else {
+    const lupaBtn = page.locator(`[data-automation-id="${entityAutomationId}_SearchBtn"]`);
+    if (await lupaBtn.isVisible({ timeout: 2000 }).catch(() => false)) {
+      await lupaBtn.click();
+    } else {
+      await page.evaluate(() => {
+        const icons = document.querySelectorAll('i.fa-solid.fa-magnifying-glass');
+        if (icons.length > 0) (icons[0] as HTMLElement).click();
+      });
+    }
+  }
+  await settle(page);
+
+  // Detectar modo popup
+  const buscarBtn = page.getByRole('button', { name: 'Buscar' });
+  const hasBuscarForm = await buscarBtn.isVisible({ timeout: 2000 }).catch(() => false);
+
+  if (hasBuscarForm) {
+    if (searchText) {
+      const dialogInputs = page.locator('.rz-dialog-wrapper input[type="text"], .rz-dialog-wrapper input.dxbl-text-edit-input');
+      const firstInput = dialogInputs.first();
+      if (await firstInput.isVisible({ timeout: 2000 }).catch(() => false)) {
+        await firstInput.click({ force: true });
+        await firstInput.fill('');
+        await firstInput.pressSequentially(searchText, { delay: 30 });
+        await page.waitForTimeout(500);
+      }
+    }
+    await buscarBtn.click();
+    await settle(page);
+  } else if (searchText) {
+    const filterInput = page.getByRole('textbox', { name: 'Celda de filtro' }).first();
+    if (await filterInput.isVisible({ timeout: 2000 }).catch(() => false)) {
+      await filterInput.click();
+      await filterInput.fill(searchText);
+      await page.keyboard.press('Enter');
+      await settle(page);
+    }
+  }
+
+  // Seleccionar primera fila (force para overlay)
+  const row = page.locator('tr.rz-data-row, tr.dx-data-row').first();
+  if (await row.isVisible({ timeout: 10_000 }).catch(() => false)) {
+    try { await row.click({ force: true }); }
+    catch { await row.evaluate(el => (el as HTMLElement).click()); }
+    await page.waitForTimeout(1000);
+  }
+
+  await closeOverlays(page);
+}
+
+// ─── Grid Search (Listados) ─────────────────────────────────────
+
+/**
+ * Buscar y seleccionar un registro en un listado Blazor.
+ * Dual-mode: formulario de búsqueda (Buscar btn) vs grid con "Celda de filtro".
+ * Presiona Enter después de llenar filtro para activar binding DevExpress.
+ */
+export async function searchInGrid(
+  page: Page,
+  listUrl: string,
+  searchCode: string,
+  opts?: { clickEdit?: boolean; filterColumn?: number }
+) {
+  const filterCol = opts?.filterColumn ?? 0;
+  const clickEdit = opts?.clickEdit ?? true;
+
+  // 1. Navegar al listado
+  await page.goto(listUrl);
+  await settle(page);
+
+  // 2. Detectar modo
+  const buscarBtn = page.getByRole('button', { name: 'Buscar' });
+  const hasBuscarForm = await buscarBtn.isVisible({ timeout: 3000 }).catch(() => false);
+
+  if (hasBuscarForm) {
+    const dialogInputs = page.locator('input[type="text"], input.dxbl-text-edit-input');
+    const firstInput = dialogInputs.first();
+    if (await firstInput.isVisible({ timeout: 2000 }).catch(() => false)) {
+      await firstInput.click({ force: true });
+      await firstInput.fill(searchCode);
+    }
+    await buscarBtn.click();
+    await settle(page);
+  } else {
+    const filterCells = page.getByRole('textbox', { name: 'Celda de filtro' });
+    if (await filterCells.first().isVisible({ timeout: 5000 }).catch(() => false)) {
+      const target = filterCells.nth(filterCol);
+      await target.click();
+      await target.fill(searchCode);
+      await page.keyboard.press('Enter');
+      await settle(page);
+    }
+  }
+
+  // 3. Seleccionar fila
+  const row = page.locator('tr.rz-data-row, tr.dx-data-row').first();
+  const rowVisible = await row.isVisible({ timeout: 10_000 }).catch(() => false);
+
+  if (rowVisible && clickEdit) {
+    const editIcon = row.locator('i.fa-pencil, i.fa-pen, i.fa-pen-to-square, i.fa-edit').first();
+    const hasEditIcon = await editIcon.isVisible({ timeout: 2000 }).catch(() => false);
+    if (hasEditIcon) {
+      try { await editIcon.click({ force: true }); }
+      catch { await editIcon.evaluate(el => (el as HTMLElement).click()); }
+    } else {
+      try { await row.click({ force: true }); }
+      catch { await row.evaluate(el => (el as HTMLElement).click()); }
+    }
+    await settle(page);
+  } else if (rowVisible) {
+    try { await row.click({ force: true }); }
+    catch { await row.evaluate(el => (el as HTMLElement).click()); }
+    await settle(page);
+  }
+
+  return rowVisible;
+}
+
+// ─── Navigation ──────────────────────────────────────────────────
+
+export async function navigateTo(page: Page, url: string) {
+  await page.goto(url);
+  await settle(page);
+  await expect(page.locator('[data-automation-id]').first()).toBeVisible({ timeout: 15_000 });
+}
+
+export async function waitForGrid(page: Page) {
+  await page.locator('.rz-datatable, .dxbl-grid, .dx-datagrid, tr.rz-data-row, tr.dx-data-row').first()
+    .waitFor({ state: 'visible', timeout: 15_000 }).catch(() => {});
+}
+
+// ─── Fecha Helper ────────────────────────────────────────────────
+
+export function getFechas(diasAdelante = 30): { inicio: string; fin: string } {
+  const hoy = new Date();
+  const fin = new Date(hoy);
+  fin.setDate(fin.getDate() + diasAdelante);
+
+  const fmt = (d: Date) =>
+    `${String(d.getMonth() + 1).padStart(2, '0')}/${String(d.getDate()).padStart(2, '0')}/${d.getFullYear()}`;
+
+  return { inicio: fmt(hoy), fin: fmt(fin) };
+}
+
+// ─── Step Logger ─────────────────────────────────────────────────
+
+export function step(n: number, desc: string) {
+  console.log(`  [#${n}] ${desc}`);
+}
+
+// ─── RUN_ID Generator ────────────────────────────────────────────
+
+export function generateRunId() {
+  return Date.now().toString().slice(-4);
+}