@arroyavecommerce/theme-kinetic 0.2.0

package/src/catalog/buy-box.test.tsx

@@ -0,0 +1,225 @@
+import { readFileSync } from "node:fs"
+import { fileURLToPath } from "node:url"
+import { describe, expect, it, vi } from "vitest"
+import { renderToStaticMarkup } from "react-dom/server"
+import { BuyBox, agregarDesdeBuyBox } from "./buy-box"
+import { mockCtx, fixtureDetalle } from "../test/mock-ctx"
+
+const codigoFuente = readFileSync(fileURLToPath(new URL("./buy-box.tsx", import.meta.url)), "utf-8")
+
+describe("BuyBox", () => {
+  it("renderiza un solo h1 con el titulo del producto", () => {
+    const detalle = fixtureDetalle()
+    const html = renderToStaticMarkup(<BuyBox detalle={detalle} ctx={mockCtx()} />)
+
+    const matches = html.match(/<h1[\s>]/g) ?? []
+    expect(matches).toHaveLength(1)
+    expect(html).toContain(detalle.producto.titulo)
+  })
+
+  it("renderiza precio, compareAt tachado y descuentoPct", () => {
+    const detalle = fixtureDetalle()
+    const html = renderToStaticMarkup(<BuyBox detalle={detalle} ctx={mockCtx()} />)
+
+    expect(html).toContain(detalle.producto.precio)
+    expect(html).toContain(detalle.producto.compareAt!)
+    expect(html).toContain("-17%")
+  })
+
+  it("renderiza el rating cuando esta presente", () => {
+    const detalle = fixtureDetalle()
+    const html = renderToStaticMarkup(<BuyBox detalle={detalle} ctx={mockCtx()} />)
+
+    expect(html).toContain("4.6")
+  })
+
+  it("renderiza swatches de color", () => {
+    const detalle = fixtureDetalle()
+    const html = renderToStaticMarkup(<BuyBox detalle={detalle} ctx={mockCtx()} />)
+
+    for (const color of detalle.variantes.color ?? []) {
+      expect(html).toContain(color.etiqueta)
+    }
+  })
+
+  it("renderiza chips de talla, una agotada tachada, y aviso de pocas unidades", () => {
+    const detalle = fixtureDetalle()
+    const html = renderToStaticMarkup(<BuyBox detalle={detalle} ctx={mockCtx()} />)
+
+    const agotada = (detalle.variantes.talla ?? []).find((t) => t.agotada)
+    expect(agotada).toBeDefined()
+    expect(html).toContain("Solo quedan 2")
+    expect(html).toContain("line-through")
+  })
+
+  it("agregarDesdeBuyBox llama a ctx.acciones.agregarAlCarrito con el variantId resuelto", async () => {
+    const detalle = fixtureDetalle()
+    const agregarAlCarrito = vi.fn(async () => ({ ok: true }))
+    const ctx = mockCtx({ acciones: { agregarAlCarrito } })
+
+    await agregarDesdeBuyBox(ctx, detalle, { color: "blanco", talla: "39" })
+
+    expect(agregarAlCarrito).toHaveBeenCalledWith(detalle.resolverVariante({ color: "blanco", talla: "39" }))
+  })
+
+  it("agregarDesdeBuyBox no llama la accion si no hay variante resuelta", async () => {
+    const detalle = fixtureDetalle()
+    const agregarAlCarrito = vi.fn(async () => ({ ok: true }))
+    const ctx = mockCtx({ acciones: { agregarAlCarrito } })
+
+    await agregarDesdeBuyBox(ctx, detalle, {})
+
+    expect(agregarAlCarrito).not.toHaveBeenCalled()
+  })
+
+  it("sin talla seleccionada, el CTA de agregar esta deshabilitado", () => {
+    const detalle = fixtureDetalle()
+    const html = renderToStaticMarkup(<BuyBox detalle={detalle} ctx={mockCtx()} />)
+
+    expect(html).toMatch(/<button[^>]*disabled=""[^>]*>Agregar a la bolsa<\/button>/)
+  })
+
+  it("mostrarFavoritos false no renderiza el boton de favoritos", () => {
+    const detalle = fixtureDetalle()
+    const html = renderToStaticMarkup(
+      <BuyBox detalle={detalle} ctx={mockCtx()} mostrarFavoritos={false} />
+    )
+
+    expect(html).not.toContain("♡")
+    expect(html).not.toContain("favoritos")
+  })
+
+  it("mostrarFavoritos true renderiza el boton de favoritos", () => {
+    const detalle = fixtureDetalle()
+    const html = renderToStaticMarkup(
+      <BuyBox detalle={detalle} ctx={mockCtx()} mostrarFavoritos={true} />
+    )
+
+    expect(html).toContain("♡")
+  })
+
+  it('compraRapida true renderiza el boton "Comprar ahora"', () => {
+    const detalle = fixtureDetalle()
+    const html = renderToStaticMarkup(
+      <BuyBox detalle={detalle} ctx={mockCtx()} compraRapida={true} />
+    )
+
+    expect(html).toContain("Comprar ahora")
+  })
+
+  it('compraRapida false no renderiza "Comprar ahora"', () => {
+    const detalle = fixtureDetalle()
+    const html = renderToStaticMarkup(
+      <BuyBox detalle={detalle} ctx={mockCtx()} compraRapida={false} />
+    )
+
+    expect(html).not.toContain("Comprar ahora")
+  })
+
+  it("renderiza la card de envio con las lineas de envioInfo", () => {
+    const detalle = fixtureDetalle()
+    const html = renderToStaticMarkup(<BuyBox detalle={detalle} ctx={mockCtx()} />)
+
+    for (const linea of detalle.producto.envioInfo ?? []) {
+      expect(html).toContain(linea)
+    }
+  })
+
+  it("renderiza el acordeon con los titulos de cada seccion", () => {
+    const detalle = fixtureDetalle()
+    const html = renderToStaticMarkup(<BuyBox detalle={detalle} ctx={mockCtx()} />)
+
+    for (const seccion of detalle.producto.acordeon ?? []) {
+      expect(html).toContain(seccion.titulo)
+    }
+  })
+
+  it("no emite <img> ni <a> directos: todo pasa por ctx.componentes", () => {
+    expect(codigoFuente).not.toMatch(/<img[\s>]/)
+    expect(codigoFuente).not.toMatch(/<a[\s>]/)
+  })
+})
+
+/**
+ * Regresion 4d-iii: BuyBox debe soportar modo "controlado opcional" (seleccion
+ * izada por PdpBody) sin romper el uso standalone (todos los tests de arriba,
+ * que NO pasan `seleccion`/`onSeleccionChange`, siguen usando el useState
+ * interno como fallback).
+ */
+describe("BuyBox: modo controlado (seleccion izada)", () => {
+  it("con `seleccion` controlada, refleja color y talla seleccionados en el markup (aria-pressed)", () => {
+    const detalle = fixtureDetalle()
+    const seleccion = { color: "negro", talla: "38" }
+    const html = renderToStaticMarkup(
+      <BuyBox detalle={detalle} ctx={mockCtx()} seleccion={seleccion} onSeleccionChange={() => {}} />
+    )
+
+    // el color "negro" queda con aria-pressed="true" (outline activo) y la talla "38" tambien
+    const bloqueColorNegro = html.slice(html.indexOf('aria-label="Negro"'), html.indexOf('aria-label="Negro"') + 80)
+    expect(bloqueColorNegro).toContain('aria-pressed="true"')
+    const idxTalla38 = html.indexOf(">38<")
+    const bloqueTalla38 = html.slice(Math.max(0, idxTalla38 - 300), idxTalla38)
+    expect(bloqueTalla38).toContain('aria-pressed="true"')
+  })
+
+  it("seleccionar una talla en modo controlado llama a onSeleccionChange con {...previo, talla}", () => {
+    const detalle = fixtureDetalle()
+    const seleccionPrevia = { color: "blanco" }
+    const onSeleccionChange = vi.fn()
+    let elementoBuyBox: ReturnType<typeof BuyBox> | null = null
+
+    // BuyBox usa useState internamente incluso en modo controlado (fallback no usado);
+    // invocarlo dentro del render de un componente anfitrion mantiene el dispatcher de
+    // hooks activo (equivalente a inlinear un hook propio), permitiendo inspeccionar el
+    // arbol de elementos devuelto sin depender de un DOM real (no disponible en este setup).
+    function Harness() {
+      elementoBuyBox = BuyBox({
+        detalle,
+        ctx: mockCtx(),
+        seleccion: seleccionPrevia,
+        onSeleccionChange,
+      })
+      return elementoBuyBox
+    }
+    renderToStaticMarkup(<Harness />)
+
+    const talla38 = (detalle.variantes.talla ?? []).find((t) => t.valor === "38")!
+    const boton = encontrarBotonPorTexto(elementoBuyBox, talla38.etiqueta)
+    expect(boton).not.toBeNull()
+
+    boton.props.onClick()
+
+    expect(onSeleccionChange).toHaveBeenCalledWith({ ...seleccionPrevia, talla: "38" })
+  })
+})
+
+/**
+ * Camina un arbol de elementos React (no HTML) buscando un <button> cuyos
+ * children sean exactamente `texto`. Los sub-componentes de funcion (p.ej.
+ * `SelectorTalla`) no estan expandidos en el arbol devuelto por `BuyBox()`
+ * (JSX no los inlinea): para llegar a sus botones internos se invocan como
+ * funciones puras (ninguno de estos sub-componentes usa hooks) y se
+ * continua caminando su salida.
+ */
+function encontrarBotonPorTexto(nodo: unknown, texto: string): any {
+  if (nodo == null || typeof nodo !== "object") return null
+  if (Array.isArray(nodo)) {
+    for (const hijo of nodo) {
+      const encontrado = encontrarBotonPorTexto(hijo, texto)
+      if (encontrado) return encontrado
+    }
+    return null
+  }
+  const el = nodo as { type?: unknown; props?: Record<string, unknown> }
+  if (el.type === "button" && el.props?.children === texto) {
+    return el
+  }
+  if (typeof el.type === "function") {
+    const renderizado = (el.type as (props: unknown) => unknown)(el.props)
+    return encontrarBotonPorTexto(renderizado, texto)
+  }
+  if (el.props && "children" in el.props) {
+    return encontrarBotonPorTexto(el.props.children, texto)
+  }
+  return null
+}

package/src/catalog/buy-box.tsx

@@ -0,0 +1,353 @@
+"use client"
+
+import { useState, type CSSProperties } from "react"
+import type { RenderContext } from "../context"
+
+export type Detalle = NonNullable<NonNullable<RenderContext["catalogo"]>["detalle"]>
+export type Seleccion = { color?: string; talla?: string }
+
+/**
+ * Ejecuta la acción de "agregar al carrito" a partir de la selección de variante
+ * del buy box. Extraída como función pura para poder testearla sin simular
+ * eventos de click en el DOM (ver `agregarProducto` en product-card.tsx).
+ */
+export async function agregarDesdeBuyBox(ctx: RenderContext, detalle: Detalle, sel: Seleccion) {
+  const variantId = detalle.resolverVariante(sel)
+  if (!variantId) return
+  return ctx.acciones.agregarAlCarrito(variantId)
+}
+
+function Rating({ rating }: { rating: NonNullable<Detalle["producto"]["rating"]> }) {
+  const llenas = Math.max(0, Math.min(5, Math.round(rating.promedio)))
+  const estrellas = "★★★★★".slice(0, llenas) + "☆☆☆☆☆".slice(0, 5 - llenas)
+  return (
+    <div className="flex items-center gap-2 text-[12px]" style={{ color: "var(--cms-texto-suave)" }}>
+      <span style={{ color: "var(--cms-texto)" }}>{estrellas}</span>
+      <span>
+        {rating.promedio.toFixed(1)} · {rating.total} reseñas
+      </span>
+    </div>
+  )
+}
+
+function SelectorColor({
+  colores,
+  seleccionado,
+  onSeleccionar,
+  ctx,
+}: {
+  colores: NonNullable<Detalle["variantes"]["color"]>
+  seleccionado: string | undefined
+  onSeleccionar: (valor: string) => void
+  ctx: RenderContext
+}) {
+  const { Imagen } = ctx.componentes
+  const etiquetaActual = colores.find((c) => c.valor === seleccionado)?.etiqueta
+
+  return (
+    <div>
+      <div className="mb-2 text-[12px] font-semibold">
+        Color:{" "}
+        <span className="font-normal" style={{ color: "var(--cms-texto-suave)" }}>
+          {etiquetaActual}
+        </span>
+      </div>
+      <div className="flex gap-2.5">
+        {colores.map((color) => {
+          const activo = color.valor === seleccionado
+          return (
+            <button
+              key={color.valor}
+              type="button"
+              onClick={() => onSeleccionar(color.valor)}
+              aria-label={color.etiqueta}
+              aria-pressed={activo}
+              className="h-[52px] w-[52px] overflow-hidden p-0"
+              style={{
+                borderRadius: "var(--cms-radio)",
+                outline: activo ? "2px solid var(--cms-texto)" : "none",
+                outlineOffset: "2px",
+                border: "none",
+                background: "transparent",
+              }}
+            >
+              {color.swatchUrl ? (
+                <Imagen src={color.swatchUrl} alt={color.etiqueta} className="h-full w-full object-cover" />
+              ) : (
+                <span
+                  role="img"
+                  aria-label={color.etiqueta}
+                  className="block h-full w-full"
+                  style={{ background: color.hex ?? "var(--cms-superficie)" }}
+                />
+              )}
+            </button>
+          )
+        })}
+      </div>
+    </div>
+  )
+}
+
+function SelectorTalla({
+  tallas,
+  seleccionada,
+  onSeleccionar,
+}: {
+  tallas: NonNullable<Detalle["variantes"]["talla"]>
+  seleccionada: string | undefined
+  onSeleccionar: (valor: string) => void
+}) {
+  const pocasUnidades = tallas.filter((t) => !t.agotada && t.pocasUnidades != null)
+
+  return (
+    <div>
+      <div className="mb-2 flex items-baseline justify-between">
+        <span className="text-[12px] font-semibold">Talla</span>
+      </div>
+      <div className="grid grid-cols-5 gap-2">
+        {tallas.map((talla) => {
+          const activaSel = talla.valor === seleccionada
+          return (
+            <button
+              key={talla.valor}
+              type="button"
+              disabled={talla.agotada}
+              onClick={() => onSeleccionar(talla.valor)}
+              aria-pressed={activaSel}
+              className="py-3 text-center text-[12.5px]"
+              style={{
+                border: `var(--cms-grosor-borde) solid ${activaSel ? "var(--cms-texto)" : "var(--cms-borde)"}`,
+                borderRadius: "var(--cms-radio)",
+                background: activaSel ? "var(--cms-primario)" : "transparent",
+                color: talla.agotada
+                  ? "var(--cms-texto-suave)"
+                  : activaSel
+                    ? "var(--cms-primario-texto)"
+                    : "var(--cms-texto)",
+                textDecoration: talla.agotada ? "line-through" : "none",
+                fontWeight: activaSel ? 600 : 400,
+              }}
+            >
+              {talla.etiqueta}
+            </button>
+          )
+        })}
+      </div>
+      {pocasUnidades.map((talla) => (
+        <div key={talla.valor} className="mt-1.5 text-[11.5px]" style={{ color: "var(--cms-acento)" }}>
+          Solo quedan {talla.pocasUnidades} en talla {talla.etiqueta}
+        </div>
+      ))}
+    </div>
+  )
+}
+
+function CardEnvio({ lineas }: { lineas: string[] }) {
+  return (
+    <div
+      className="flex flex-col gap-2 p-3.5 text-[12px]"
+      style={{
+        background: "var(--cms-superficie)",
+        border: "var(--cms-grosor-borde) solid var(--cms-borde)",
+        borderRadius: "var(--cms-radio)",
+      }}
+    >
+      {lineas.map((linea, i) => (
+        <span key={i}>{linea}</span>
+      ))}
+    </div>
+  )
+}
+
+function SeccionAcordeon({ seccion }: { seccion: { titulo: string; cuerpo: string } }) {
+  const [abierto, setAbierto] = useState(false)
+
+  return (
+    <div style={{ borderBottom: "var(--cms-grosor-borde) solid var(--cms-borde)" }}>
+      <button
+        type="button"
+        onClick={() => setAbierto((v) => !v)}
+        aria-expanded={abierto}
+        className="flex w-full items-center justify-between py-3.5 text-[13px] font-semibold"
+        style={{ background: "transparent", border: "none", color: "var(--cms-texto)" }}
+      >
+        <span>{seccion.titulo}</span>
+        <span aria-hidden="true">{abierto ? "－" : "＋"}</span>
+      </button>
+      {abierto ? (
+        <p className="m-0 pb-3.5 text-[12.5px] leading-[1.6]" style={{ color: "var(--cms-texto-suave)" }}>
+          {seccion.cuerpo}
+        </p>
+      ) : null}
+    </div>
+  )
+}
+
+export function BuyBox({
+  detalle,
+  ctx,
+  mostrarFavoritos = false,
+  compraRapida = false,
+  seleccion,
+  onSeleccionChange,
+}: {
+  detalle: Detalle
+  ctx: RenderContext
+  mostrarFavoritos?: boolean
+  compraRapida?: boolean
+  /** Selección controlada { color?, talla? }. Si se omite, BuyBox mantiene su propio estado (uso standalone). */
+  seleccion?: Seleccion
+  /** Requerido junto a `seleccion` para operar en modo controlado. */
+  onSeleccionChange?: (sel: Seleccion) => void
+}) {
+  const { producto, variantes } = detalle
+  const [colorInterno, setColorInterno] = useState<string | undefined>(variantes.color?.[0]?.valor)
+  const [tallaInterno, setTallaInterno] = useState<string | undefined>(undefined)
+  const [favorito, setFavorito] = useState(false)
+
+  const controlado = seleccion != null && onSeleccionChange != null
+  const color = controlado ? seleccion.color : colorInterno
+  const talla = controlado ? seleccion.talla : tallaInterno
+
+  const setColor = (valor: string) => {
+    if (controlado) onSeleccionChange({ ...seleccion, color: valor })
+    else setColorInterno(valor)
+  }
+  const setTalla = (valor: string) => {
+    if (controlado) onSeleccionChange({ ...seleccion, talla: valor })
+    else setTallaInterno(valor)
+  }
+
+  const variantId = detalle.resolverVariante({ color, talla })
+
+  return (
+    <div className="flex flex-col gap-4">
+      <div>
+        {producto.eyebrow ? (
+          <div
+            className="text-[10.5px] font-semibold"
+            style={{ letterSpacing: ".12em", color: "var(--cms-acento)", fontFamily: "var(--cms-fuente-mono)" }}
+          >
+            {producto.eyebrow}
+          </div>
+        ) : null}
+        <h1
+          className="mt-2 text-[30px] leading-[1.1]"
+          style={{
+            fontFamily: "var(--cms-fuente-titulo)",
+            fontWeight: "var(--cms-titulo-peso)",
+            textTransform: "var(--cms-titulo-transform)",
+            letterSpacing: "var(--cms-titulo-espaciado)",
+          }}
+        >
+          {producto.titulo}
+        </h1>
+        <div className="mt-2.5 flex items-center gap-2.5">
+          <span className="text-[20px] font-semibold" style={{ fontFamily: "var(--cms-fuente-mono)" }}>
+            {producto.precio}
+          </span>
+          {producto.compareAt ? (
+            <span
+              className="text-[13px] font-medium"
+              style={{
+                fontFamily: "var(--cms-fuente-mono)",
+                color: "var(--cms-texto-suave)",
+                textDecoration: "line-through",
+              }}
+            >
+              {producto.compareAt}
+            </span>
+          ) : null}
+          {producto.descuentoPct != null ? (
+            <span
+              className="px-2.5 py-1 text-[10px] font-semibold"
+              style={{
+                background: "var(--cms-acento)",
+                color: "var(--cms-primario-texto)",
+                borderRadius: "var(--cms-radio)",
+                fontFamily: "var(--cms-fuente-mono)",
+              }}
+            >
+              -{producto.descuentoPct}%
+            </span>
+          ) : null}
+        </div>
+        {producto.rating ? (
+          <div className="mt-2">
+            <Rating rating={producto.rating} />
+          </div>
+        ) : null}
+      </div>
+
+      {variantes.color?.length ? (
+        <SelectorColor colores={variantes.color} seleccionado={color} onSeleccionar={setColor} ctx={ctx} />
+      ) : null}
+
+      {variantes.talla?.length ? (
+        <SelectorTalla tallas={variantes.talla} seleccionada={talla} onSeleccionar={setTalla} />
+      ) : null}
+
+      <div className="flex gap-2.5">
+        <button
+          type="button"
+          disabled={!variantId}
+          onClick={() => void agregarDesdeBuyBox(ctx, detalle, { color, talla })}
+          className="flex-1 py-[15px] text-center text-[13px] font-semibold uppercase tracking-[0.06em]"
+          style={{
+            background: "var(--cms-primario)",
+            color: "var(--cms-primario-texto)",
+            borderRadius: "var(--cms-radio)",
+            fontFamily: "var(--cms-fuente-texto)",
+            opacity: variantId ? 1 : 0.5,
+          }}
+        >
+          Agregar a la bolsa
+        </button>
+        {mostrarFavoritos ? (
+          <button
+            type="button"
+            onClick={() => setFavorito((v) => !v)}
+            aria-pressed={favorito}
+            aria-label="favoritos"
+            className="flex w-[52px] items-center justify-center text-[18px]"
+            style={{
+              border: "var(--cms-grosor-borde) solid var(--cms-borde)",
+              borderRadius: "var(--cms-radio)",
+              background: "transparent",
+              color: "var(--cms-texto)",
+            }}
+          >
+            {favorito ? "♥" : "♡"}
+          </button>
+        ) : null}
+      </div>
+
+      {compraRapida ? (
+        <button
+          type="button"
+          className="py-[13px] text-center text-[12.5px] font-semibold uppercase tracking-[0.06em]"
+          style={{
+            border: "var(--cms-grosor-borde) solid var(--cms-texto)",
+            borderRadius: "var(--cms-radio)",
+            fontFamily: "var(--cms-fuente-texto)",
+            background: "transparent",
+            color: "var(--cms-texto)",
+          }}
+        >
+          Comprar ahora
+        </button>
+      ) : null}
+
+      {producto.envioInfo?.length ? <CardEnvio lineas={producto.envioInfo} /> : null}
+
+      {producto.acordeon?.length ? (
+        <div>
+          {producto.acordeon.map((seccion) => (
+            <SeccionAcordeon key={seccion.titulo} seccion={seccion} />
+          ))}
+        </div>
+      ) : null}
+    </div>
+  )
+}

package/src/catalog/config.test.ts

@@ -0,0 +1,115 @@
+import { describe, expect, it } from "vitest"
+import type { CmsPageConfig } from "@arroyavecommerce/cms-core"
+import { resolverPlpConfig, resolverPdpConfig, plpSettings, pdpSettings } from "./config"
+
+describe("resolverPlpConfig", () => {
+  it("null -> defaults", () => {
+    expect(resolverPlpConfig(null)).toEqual({
+      filtros: "sidebar",
+      columnas: 3,
+      card: "minimal",
+      paginacion: "numerada",
+      mostrarContador: true,
+      vista: "grilla",
+    })
+  })
+
+  it("resuelve selections validas", () => {
+    const config: CmsPageConfig = {
+      version: 1,
+      selections: {
+        "plp.filtros": "pills",
+        "plp.columnas": "4",
+        "plp.mostrarContador": "no",
+      },
+    }
+    const resuelto = resolverPlpConfig(config)
+    expect(resuelto.filtros).toBe("pills")
+    expect(resuelto.columnas).toBe(4)
+    expect(resuelto.mostrarContador).toBe(false)
+  })
+
+  it("plp.filtros invalido -> fallback sidebar", () => {
+    const config: CmsPageConfig = { version: 1, selections: { "plp.filtros": "xxx" } }
+    expect(resolverPlpConfig(config).filtros).toBe("sidebar")
+  })
+
+  it("plp.columnas invalido -> fallback 3", () => {
+    const config: CmsPageConfig = { version: 1, selections: { "plp.columnas": "5" } }
+    expect(resolverPlpConfig(config).columnas).toBe(3)
+  })
+
+  it("plp.vista:'lista' se resuelve; invalido -> fallback grilla", () => {
+    const lista: CmsPageConfig = { version: 1, selections: { "plp.vista": "lista" } }
+    expect(resolverPlpConfig(lista).vista).toBe("lista")
+    const invalido: CmsPageConfig = { version: 1, selections: { "plp.vista": "xxx" } }
+    expect(resolverPlpConfig(invalido).vista).toBe("grilla")
+  })
+})
+
+describe("resolverPdpConfig", () => {
+  it("null -> defaults", () => {
+    expect(resolverPdpConfig(null)).toEqual({
+      galeria: "grid",
+      stickyBar: true,
+      compraRapida: false,
+      mostrarFavoritos: true,
+      mostrarReseñas: false,
+      mostrarRelacionados: true,
+    })
+  })
+
+  it("pdp.mostrarReseñas:'si' -> true", () => {
+    const config: CmsPageConfig = { version: 1, selections: { "pdp.mostrarReseñas": "si" } }
+    expect(resolverPdpConfig(config).mostrarReseñas).toBe(true)
+  })
+
+  it("pdp.galeria invalido -> fallback grid", () => {
+    const config: CmsPageConfig = { version: 1, selections: { "pdp.galeria": "xxx" } }
+    expect(resolverPdpConfig(config).galeria).toBe("grid")
+  })
+
+  it("booleano invalido -> el default de esa clave (no simple 'true')", () => {
+    const config: CmsPageConfig = { version: 1, selections: { "pdp.stickyBar": "xxx", "pdp.compraRapida": "xxx" } }
+    const resuelto = resolverPdpConfig(config)
+    expect(resuelto.stickyBar).toBe(true)
+    expect(resuelto.compraRapida).toBe(false)
+  })
+})
+
+describe("plpSettings / pdpSettings", () => {
+  it("plpSettings contiene las claves esperadas", () => {
+    const claves = plpSettings.map((s) => s.key)
+    expect(claves).toEqual([
+      "plp.filtros",
+      "plp.columnas",
+      "plp.card",
+      "plp.paginacion",
+      "plp.mostrarContador",
+      "plp.vista",
+    ])
+  })
+
+  it("pdpSettings contiene las claves esperadas", () => {
+    const claves = pdpSettings.map((s) => s.key)
+    expect(claves).toEqual([
+      "pdp.galeria",
+      "pdp.stickyBar",
+      "pdp.compraRapida",
+      "pdp.mostrarFavoritos",
+      "pdp.mostrarReseñas",
+      "pdp.mostrarRelacionados",
+    ])
+  })
+
+  it("cada setting tiene label y opciones no vacias", () => {
+    for (const setting of [...plpSettings, ...pdpSettings]) {
+      expect(setting.label.length).toBeGreaterThan(0)
+      expect(setting.opciones.length).toBeGreaterThan(0)
+      for (const opcion of setting.opciones) {
+        expect(opcion.value.length).toBeGreaterThan(0)
+        expect(opcion.label.length).toBeGreaterThan(0)
+      }
+    }
+  })
+})