@arroyavecommerce/theme-kinetic 0.2.0

package/src/chrome/header.test.tsx

@@ -0,0 +1,165 @@
+import { readFileSync } from "node:fs"
+import { fileURLToPath } from "node:url"
+import { describe, expect, it } from "vitest"
+import { renderToStaticMarkup } from "react-dom/server"
+import { headerInline, headerCentrado, headerSplit, headerMinimal, type HeaderProps } from "./header"
+import { mockCtx } from "../test/mock-ctx"
+
+const menu = [
+  { etiqueta: "Novedades", href: "/novedades" },
+  { etiqueta: "Sale", href: "/sale" },
+]
+
+const variantes = [
+  { nombre: "headerInline", variante: headerInline, layout: "inline" as const },
+  { nombre: "headerCentrado", variante: headerCentrado, layout: "centrado" as const },
+  { nombre: "headerSplit", variante: headerSplit, layout: "split" as const },
+  { nombre: "headerMinimal", variante: headerMinimal, layout: "minimal" as const },
+]
+
+// El minimal no monta nav de escritorio (todo va al drawer), así que las
+// columnas del megaMenu no aparecen en el HTML estático.
+const conNav = variantes.filter((v) => v.layout !== "minimal")
+
+const render = (variante: (typeof variantes)[number]["variante"], props: HeaderProps, ctx = mockCtx()) => {
+  const Component = variante.Component
+  return renderToStaticMarkup(<Component props={props} ctx={ctx} menu={menu} />)
+}
+
+describe("header (inline/centrado/split/minimal)", () => {
+  for (const { nombre, variante } of variantes) {
+    describe(nombre, () => {
+      const defaults = variante.defaults
+
+      it("defaults pasan el schema", () => {
+        expect(variante.schema.safeParse(defaults).success).toBe(true)
+      })
+
+      it("renderiza sin crash e incluye <header> sticky", () => {
+        const html = render(variante, defaults)
+        expect(html).toContain("<header")
+        expect(html).toContain("sticky")
+      })
+
+      it("logo modo texto pinta el wordmark", () => {
+        const props = { ...defaults, logo: { modo: "texto" as const, valor: "KINETIC", tamaño: 24 } }
+        expect(render(variante, props)).toContain("KINETIC")
+      })
+
+      it("logo modo imagen resuelve el logo real via ctx.componentes.Imagen", () => {
+        const props = {
+          ...defaults,
+          logo: { modo: "imagen" as const, valor: "https://ejemplo.com/logo.png", tamaño: 28 },
+        }
+        expect(render(variante, props)).toContain('src="https://ejemplo.com/logo.png"')
+      })
+
+      it("con anuncio.activo:true muestra la barra de anuncios", () => {
+        const props = { ...defaults, anuncio: { ...defaults.anuncio, activo: true } }
+        expect(render(variante, props)).toContain(props.anuncio.mensajes[0]!.texto)
+      })
+
+      it("con anuncio.activo:false oculta la barra de anuncios", () => {
+        const props = { ...defaults, anuncio: { ...defaults.anuncio, activo: false } }
+        expect(render(variante, props)).not.toContain(props.anuncio.mensajes[0]!.texto)
+      })
+
+      it("incluye el botón hamburguesa (aria-label 'Abrir menú')", () => {
+        expect(render(variante, defaults)).toContain('aria-label="Abrir menú"')
+      })
+
+      it("acciones.buscar:true incluye el disparador de búsqueda", () => {
+        const props = { ...defaults, acciones: { ...defaults.acciones, buscar: true } }
+        expect(render(variante, props)).toContain('aria-label="Buscar"')
+      })
+
+      it("acciones todas en false no pinta iconos de acción", () => {
+        const props = {
+          ...defaults,
+          acciones: { buscar: false, cuenta: false, favoritos: false, carrito: false },
+        }
+        const html = render(variante, props)
+        expect(html).not.toContain('aria-label="Buscar"')
+        expect(html).not.toContain("Bolsa")
+        expect(html).not.toContain("Favoritos")
+      })
+
+      it("acciones.carrito:true muestra el conteo desde ctx.cartQuantities", () => {
+        const props = { ...defaults, acciones: { ...defaults.acciones, carrito: true } }
+        const html = render(variante, props, mockCtx({ cartQuantities: { a: 40, b: 2 } }))
+        expect(html).toContain("Bolsa")
+        expect(html).toContain(">42</span>")
+      })
+
+      it("el botón de la bolsa abre el mini-cart (es <button>, no link a /cart)", () => {
+        const props = { ...defaults, acciones: { ...defaults.acciones, carrito: true } }
+        const html = render(variante, props, mockCtx({ cartQuantities: { a: 1 } }))
+        // El disparador de la bolsa es un botón accesible…
+        expect(html).toContain('aria-label="Bolsa"')
+        // …y ya no navega a /cart desde el header (el mini-cart, cerrado en el
+        // render estático, no aporta markup; /cart vive dentro del drawer).
+        expect(html).not.toContain('href="/cart"')
+      })
+
+      it("acciones.favoritos:true muestra el icono de favoritos", () => {
+        const props = { ...defaults, acciones: { ...defaults.acciones, favoritos: true } }
+        expect(render(variante, props)).toContain("Favoritos")
+      })
+
+      it("no emite <h1>", () => {
+        expect(render(variante, defaults)).not.toMatch(/<h1[\s>]/)
+      })
+    })
+  }
+
+  for (const { nombre, variante } of conNav) {
+    it(`${nombre} incluye el MegaMenu (columnas de props.megaMenu)`, () => {
+      const html = render(variante, variante.defaults)
+      for (const columna of variante.defaults.megaMenu.columnas) {
+        expect(html).toContain(columna.titulo)
+      }
+    })
+  }
+
+  it("todas las variantes comparten el mismo schema/defaults", () => {
+    expect(headerCentrado.defaults).toEqual(headerInline.defaults)
+    expect(headerSplit.defaults).toEqual(headerInline.defaults)
+    expect(headerMinimal.defaults).toEqual(headerInline.defaults)
+  })
+
+  it("labels en español de cada variante", () => {
+    expect(headerInline.label).toBe("Inline")
+    expect(headerCentrado.label).toBe("Centrado")
+    expect(headerSplit.label).toBe("Split")
+    expect(headerMinimal.label).toBe("Minimal")
+  })
+
+  it("el disparador de búsqueda navega a /search (form GET con name=q)", () => {
+    const rutaFuente = fileURLToPath(new URL("./header.tsx", import.meta.url))
+    const fuente = readFileSync(rutaFuente, "utf-8")
+    expect(fuente).toContain('action="/search"')
+    expect(fuente).toContain('name="q"')
+  })
+
+  it("reemplaza los glifos unicode por SVG inline (sin ⌕ ☰ ◫)", () => {
+    const html = render(headerInline, headerInline.defaults)
+    expect(html).toContain("<svg")
+    expect(html).not.toContain("⌕")
+    expect(html).not.toContain("☰")
+    expect(html).not.toContain("◫")
+  })
+
+  it("no emite <a> ni <img> directos: todo pasa por ctx.componentes / sub-componentes", () => {
+    const rutaFuente = fileURLToPath(new URL("./header.tsx", import.meta.url))
+    const fuente = readFileSync(rutaFuente, "utf-8")
+    expect(fuente).not.toMatch(/<a[\s>]/)
+    expect(fuente).not.toMatch(/<img[\s>]/)
+  })
+
+  it("monta el mini-cart drawer alimentado por ctx.carrito", () => {
+    const rutaFuente = fileURLToPath(new URL("./header.tsx", import.meta.url))
+    const fuente = readFileSync(rutaFuente, "utf-8")
+    expect(fuente).toContain("<MiniCart")
+    expect(fuente).toContain("carrito={ctx.carrito}")
+  })
+})