108 lines
6.2 KiB
JavaScript
108 lines
6.2 KiB
JavaScript
// Arranque, render de los 13 tipos de la demo, consola limpia y file://.
|
||
import { test, expect, irA, estado, filasChat, filaChat, tarjetas, URL_FILE, TIPOS } from "./fixtures.mjs";
|
||
|
||
test.describe("Carga inicial", () => {
|
||
test("la demo carga sin errores de consola ni red externa", async ({ app }) => {
|
||
await expect(app).toHaveTitle(/WhatsApp Cloud API/);
|
||
await expect(app.locator("#chat-nombre")).toHaveText("Café Aurora");
|
||
await expect(app.locator("#chat-verificado")).toBeVisible();
|
||
await expect(app.locator("#chat-subtitulo")).toHaveText("en línea");
|
||
// «Hoy» + aviso de cifrado
|
||
await expect(app.locator("#chat-cuerpo > li.wa-sistema")).toHaveCount(2);
|
||
await expect(app.locator(".wa-fecha")).toHaveText("Hoy");
|
||
await expect(app.locator(".wa-aviso")).toContainText("servicio seguro de Meta");
|
||
// El fixture comprueba al final que no hubo errores ni peticiones externas
|
||
});
|
||
|
||
test("la demo por defecto recorre los 13 tipos, uno por burbuja", async ({ app }) => {
|
||
const e = await estado(app);
|
||
const tipos = new Set(e.mensajes.map((m) => m.tipo));
|
||
for (const t of TIPOS) expect(tipos, `tipo ${t}`).toContain(t);
|
||
await expect(filasChat(app)).toHaveCount(e.mensajes.length);
|
||
await expect(tarjetas(app)).toHaveCount(e.mensajes.length);
|
||
|
||
const porTipo = {};
|
||
for (const m of e.mensajes) porTipo[m.tipo] ??= m; // el primero de cada tipo
|
||
const fila = (t) => filaChat(app, porTipo[t].id);
|
||
await expect(fila("text").locator(".wa-texto")).toContainText("Bienvenido a Café Aurora");
|
||
await expect(fila("image").locator("img.wa-media")).toBeVisible();
|
||
await expect(fila("image").locator(".wa-caption")).toContainText("Nuevo horario");
|
||
await expect(fila("video").locator(".wa-play-badge")).toBeVisible();
|
||
await expect(fila("audio").locator(".audio-dur")).toHaveText("0:12");
|
||
await expect(fila("audio").locator(".audio-mic")).toBeVisible(); // nota de voz
|
||
await expect(fila("document").locator(".doc-nombre")).toHaveText("carta-cafe-aurora.pdf");
|
||
await expect(fila("document").locator(".doc-sub")).toContainText("PDF", { ignoreCase: true });
|
||
await expect(fila("sticker").locator(".sticker-img")).toBeVisible();
|
||
await expect(fila("sticker").locator(".bubble")).toHaveCount(0); // sin burbuja
|
||
await expect(fila("location").locator(".loc-nombre")).toHaveText("Café Aurora");
|
||
await expect(fila("location").locator(".loc-dir")).toContainText("Calle Mayor");
|
||
await expect(fila("contact").locator(".contact-nombre")).toHaveText("Luna Mendoza");
|
||
await expect(fila("contact").locator(".contact-accion")).toHaveText(["Mensaje", "Guardar contacto"]);
|
||
await expect(fila("template").locator(".tpl-media")).toBeVisible();
|
||
await expect(fila("template").locator(".qr-btn")).toHaveCount(2);
|
||
await expect(fila("template").locator(".template-footer")).toHaveText("Café Aurora · Reservas");
|
||
await expect(fila("buttons").locator("button.qr-btn")).toHaveCount(3);
|
||
await expect(fila("list").locator("button.qr-btn")).toHaveText("Ver opciones");
|
||
await expect(fila("cta_url").locator("a.qr-btn")).toHaveAttribute("href", "https://cafeaurora.example/tienda");
|
||
await expect(fila("cta_url").locator("a.qr-btn")).toHaveAttribute("target", "_blank");
|
||
await expect(fila("carousel").locator(".carousel .card")).toHaveCount(3);
|
||
});
|
||
|
||
test("solo los mensajes salientes llevan ticks; la cola va en el último del grupo", async ({ app }) => {
|
||
const e = await estado(app);
|
||
for (const m of e.mensajes) {
|
||
const ticks = filaChat(app, m.id).locator(":scope > * .meta .tick");
|
||
if (m.dir === "out") await expect(ticks.first()).toBeVisible();
|
||
else await expect(ticks).toHaveCount(0);
|
||
}
|
||
const out = e.mensajes.find((m) => m.dir === "out" && m.estado === "read");
|
||
await expect(filaChat(app, out.id).locator(".tick-read")).toHaveCount(1);
|
||
// m1 (in) y m2 (out) son grupos de uno → ambos .grupo.ultimo
|
||
await expect(filaChat(app, "m1")).toHaveClass(/grupo/);
|
||
await expect(filaChat(app, "m1")).toHaveClass(/ultimo/);
|
||
await expect(filaChat(app, "m3")).toHaveClass(/grupo/);
|
||
await expect(filaChat(app, "m3")).not.toHaveClass(/ultimo/);
|
||
});
|
||
|
||
test("el carrusel se desplaza en horizontal", async ({ app }) => {
|
||
const e = await estado(app);
|
||
const id = e.mensajes.find((m) => m.tipo === "carousel").id;
|
||
const car = filaChat(app, id).locator(".carousel");
|
||
await car.scrollIntoViewIfNeeded();
|
||
const { ancho, visible } = await car.evaluate((el) => ({ ancho: el.scrollWidth, visible: el.clientWidth }));
|
||
expect(ancho).toBeGreaterThan(visible);
|
||
await car.evaluate((el) => { el.scrollLeft = 200; });
|
||
expect(await car.evaluate((el) => el.scrollLeft)).toBeGreaterThan(0);
|
||
});
|
||
|
||
test("el marco del iPhone tiene isla, status bar e indicador de inicio", async ({ app }) => {
|
||
await expect(app.locator("#iphone")).toBeVisible();
|
||
await expect(app.locator("#isla")).toBeVisible();
|
||
await expect(app.locator("#statusbar .sb-hora")).toHaveText("9:41");
|
||
await expect(app.locator("#home-indicator")).toBeVisible();
|
||
const caja = await app.locator("#iphone").boundingBox();
|
||
// proporción 393×852 (con tolerancia por el escalado)
|
||
expect(caja.height / caja.width).toBeGreaterThan(2.0);
|
||
expect(caja.height / caja.width).toBeLessThan(2.3);
|
||
});
|
||
});
|
||
|
||
test.describe("Apertura por file://", () => {
|
||
test("index.html funciona abierto como archivo local", async ({ page }) => {
|
||
await irA(page, URL_FILE);
|
||
expect(page.url()).toMatch(/^file:\/\//);
|
||
await expect(page.locator("#chat-nombre")).toHaveText("Café Aurora");
|
||
const n = (await estado(page)).mensajes.length;
|
||
await expect(filasChat(page)).toHaveCount(n);
|
||
await expect(tarjetas(page)).toHaveCount(n);
|
||
// interacción básica: composer y persistencia
|
||
await page.locator("#composer-input").fill("Hola desde file://");
|
||
await page.locator("#composer-input").press("Enter");
|
||
await expect(page.locator("#chat-cuerpo .wa-row.out").last()).toContainText("Hola desde file://");
|
||
await page.locator("#btn-tema").click();
|
||
await expect(page.locator("body")).toHaveAttribute("data-tema", "oscuro");
|
||
await page.reload();
|
||
await expect(page.locator("body")).toHaveAttribute("data-tema", "oscuro");
|
||
});
|
||
});
|