@arroyavecommerce/theme-kinetic 0.2.0

package/src/chrome/footer.test.tsx

@@ -0,0 +1,133 @@
+import { readFileSync } from "node:fs"
+import { fileURLToPath } from "node:url"
+import { describe, expect, it } from "vitest"
+import { renderToStaticMarkup } from "react-dom/server"
+import { footerModa, footerMinimal, footerNewsletter } from "./footer"
+import { mockCtx } from "../test/mock-ctx"
+
+const variantes = [
+  { nombre: "moda", variante: footerModa },
+  { nombre: "minimal", variante: footerMinimal },
+  { nombre: "newsletter", variante: footerNewsletter },
+]
+
+describe("variantes de footer", () => {
+  it.each(variantes)("$nombre renderiza un <footer> sin crash", ({ variante }) => {
+    const html = renderToStaticMarkup(
+      <variante.Component props={variante.defaults} ctx={mockCtx()} menu={[]} />
+    )
+    expect(html).toContain("<footer")
+  })
+
+  it.each(variantes)("$nombre: sus defaults pasan el schema", ({ variante }) => {
+    expect(variante.schema.safeParse(variante.defaults).success).toBe(true)
+  })
+
+  it.each(variantes)("$nombre: renderiza el legal y no emite <h1>", ({ variante }) => {
+    const html = renderToStaticMarkup(
+      <variante.Component props={variante.defaults} ctx={mockCtx()} menu={[]} />
+    )
+    expect(html).toContain(variante.defaults.legal)
+    expect(html).not.toMatch(/<h1[\s>]/)
+  })
+})
+
+describe("footerModa — contenido", () => {
+  const html = renderToStaticMarkup(
+    <footerModa.Component props={footerModa.defaults} ctx={mockCtx()} menu={[]} />
+  )
+
+  it("renderiza el logo de texto (no el string 'LOGO')", () => {
+    expect(html).toContain("MODA")
+    expect(html).not.toContain(">LOGO<")
+  })
+
+  it("renderiza cada columna con sus enlaces via ctx.componentes.Enlace", () => {
+    for (const columna of footerModa.defaults.columnas) {
+      expect(html).toContain(columna.titulo)
+      for (const enlace of columna.enlaces) {
+        expect(html).toContain(enlace.texto)
+        expect(html).toContain(`href="${enlace.href}"`)
+      }
+    }
+  })
+
+  it("con modo 'icono' los pagos y redes se pintan como SVG", () => {
+    expect(html).toContain("<svg")
+    // href de cada red presente (Enlace del ctx)
+    for (const red of footerModa.defaults.redes.items) {
+      expect(html).toContain(`href="${red.href}"`)
+    }
+  })
+
+  it("emite las reglas CSS del tintado de iconos", () => {
+    expect(html).toContain(".icons--tinta")
+    expect(html).toContain(".icons--acento")
+  })
+})
+
+describe("pagos — modo icono vs texto", () => {
+  it("modo 'texto' muestra los labels de los métodos, no SVG de pago", () => {
+    const props = {
+      ...footerModa.defaults,
+      pagos: { ...footerModa.defaults.pagos, modo: "texto" as const, metodos: ["visa"] as const },
+      redes: { ...footerModa.defaults.redes, items: [] },
+    }
+    const html = renderToStaticMarkup(
+      <footerModa.Component props={props} ctx={mockCtx()} menu={[]} />
+    )
+    expect(html).toContain("Visa") // label del método
+    expect(html).not.toContain("<svg") // sin iconos (redes vacías + pagos en texto)
+  })
+
+  it("modo 'icono' renderiza SVG y el <title> accesible del método", () => {
+    const props = {
+      ...footerModa.defaults,
+      pagos: { modo: "icono" as const, color: "marca" as const, metodos: ["visa"] as const },
+      redes: { ...footerModa.defaults.redes, items: [] },
+    }
+    const html = renderToStaticMarkup(
+      <footerModa.Component props={props} ctx={mockCtx()} menu={[]} />
+    )
+    expect(html).toContain("<svg")
+    expect(html).toContain("<title>Visa</title>")
+  })
+
+  it("color 'tinta' añade la clase contenedora .icons--tinta", () => {
+    const props = {
+      ...footerModa.defaults,
+      pagos: { ...footerModa.defaults.pagos, color: "tinta" as const },
+    }
+    const html = renderToStaticMarkup(
+      <footerModa.Component props={props} ctx={mockCtx()} menu={[]} />
+    )
+    expect(html).toContain('class="flex flex-wrap items-center gap-2 icons--tinta"')
+  })
+})
+
+describe("footerNewsletter — formulario", () => {
+  const html = renderToStaticMarkup(
+    <footerNewsletter.Component props={footerNewsletter.defaults} ctx={mockCtx()} menu={[]} />
+  )
+
+  it("renderiza título, placeholder y botón editables del boletín", () => {
+    expect(html).toContain(footerNewsletter.defaults.boletin.titulo)
+    expect(html).toContain(`placeholder="${footerNewsletter.defaults.boletin.placeholder}"`)
+    expect(html).toContain(footerNewsletter.defaults.boletin.boton)
+    expect(html).toContain(footerNewsletter.defaults.boletin.nota)
+  })
+
+  it("incluye un input de email y un submit", () => {
+    expect(html).toContain('type="email"')
+    expect(html).toContain('type="submit"')
+  })
+})
+
+describe("footer.tsx — disciplina de render", () => {
+  it("no emite <a> ni <img> directos: todo pasa por ctx.componentes", () => {
+    const rutaFuente = fileURLToPath(new URL("./footer.tsx", import.meta.url))
+    const fuente = readFileSync(rutaFuente, "utf-8")
+    expect(fuente).not.toMatch(/<a[\s>]/)
+    expect(fuente).not.toMatch(/<img[\s>]/)
+  })
+})