@thorprovider/blocks 0.1.3 → 2.0.0

package/src/blocks/e-commerce/product-overview/product-overview.test.tsx

@@ -0,0 +1,283 @@
+import { renderToStaticMarkup } from 'react-dom/server'
+import { describe, expect, it } from 'vitest'
+import ProductOverview, {
+  galleryImages,
+  resolveAddToCartPayload,
+  variantLabelOf,
+  type ProductDetailProduct,
+  type ProductOverviewProps,
+} from './product-overview'
+
+const formatPrice = (money: { amount: string; currencyCode: string }) =>
+  `${money.currencyCode} ${money.amount}`
+
+const product: ProductDetailProduct = {
+  id: 'p1',
+  handle: 'taladro',
+  title: 'Taladro inalámbrico',
+  description: 'Un taladro',
+  vendor: 'Acme',
+  options: [{ id: 'o1', name: 'Color', values: ['Rojo', 'Azul'] }],
+  variants: [
+    {
+      id: 'v-red',
+      title: 'Rojo',
+      availableForSale: true,
+      selectedOptions: [{ name: 'Color', value: 'Rojo' }],
+      price: { amount: '10.00', currencyCode: 'USD' },
+    },
+    {
+      id: 'v-blue',
+      title: 'Azul',
+      availableForSale: true,
+      selectedOptions: [{ name: 'Color', value: 'Azul' }],
+      price: { amount: '25.50', currencyCode: 'USD' },
+    },
+    {
+      id: 'v-sold',
+      title: 'Verde',
+      availableForSale: false,
+      selectedOptions: [{ name: 'Color', value: 'Verde' }],
+      price: { amount: '9.00', currencyCode: 'USD' },
+    },
+    {
+      id: 'v-noprice',
+      title: 'Gris',
+      availableForSale: true,
+      selectedOptions: [{ name: 'Color', value: 'Gris' }],
+      price: null,
+    },
+    {
+      id: 'v-free',
+      title: 'Blanco',
+      availableForSale: true,
+      selectedOptions: [{ name: 'Color', value: 'Blanco' }],
+      price: { amount: '0', currencyCode: 'USD' },
+    },
+  ],
+  images: [
+    { url: 'https://cdn.example/p1.jpg', altText: 'p1' },
+    { url: 'https://cdn.example/p2.jpg', altText: 'p2' },
+  ],
+}
+
+const singleImageProduct: ProductDetailProduct = {
+  ...product,
+  images: [{ url: 'https://cdn.example/p1.jpg', altText: 'p1' }],
+}
+
+const render = (props: ProductOverviewProps) => renderToStaticMarkup(<ProductOverview {...props} />)
+
+describe('ProductOverview — canonical render (task 2.1)', () => {
+  it('renders title, images, option/variant selection, and the selected price', () => {
+    const html = render({ product, selectedVariantId: 'v-blue', formatPrice, onAddToCart: () => {} })
+    expect(html).toContain('Taladro inalámbrico')
+    expect(html).toContain('https://cdn.example/p1.jpg')
+    expect(html).toContain('Variantes')
+    expect(html).toContain('Azul')
+    expect(html).toContain('USD 25.50')
+  })
+})
+
+describe('ProductOverview — bounded presentations (tasks 2.2, 2.3)', () => {
+  it('renders the gallery presentation from the same canonical props with a different DOM structure', () => {
+    const standardHtml = render({ product, selectedVariantId: 'v-blue', formatPrice, onAddToCart: () => {} })
+    const galleryHtml = render({
+      product,
+      presentation: 'gallery',
+      selectedVariantId: 'v-blue',
+      formatPrice,
+      onAddToCart: () => {},
+    })
+    expect(galleryHtml).not.toBe(standardHtml)
+    expect(standardHtml).toContain('@container')
+    expect(galleryHtml).not.toContain('@container')
+    expect(galleryHtml).toContain('Taladro inalámbrico')
+    expect(galleryHtml).toContain('USD 25.50')
+  })
+
+  it('omits absent rich sections without empty chrome', () => {
+    const html = render({ product: singleImageProduct, presentation: 'rich', formatPrice })
+    expect(html).not.toContain('Características clave')
+    expect(html).not.toContain('Especificaciones técnicas')
+    expect(html).not.toContain('Resumen')
+  })
+
+  it('renders the rich sections only when the optional data is supplied', () => {
+    const html = render({
+      product,
+      presentation: 'rich',
+      selectedVariantId: 'v-blue',
+      formatPrice,
+      features: ['Batería de larga duración', 'Maletín incluido'],
+      specifications: { Voltaje: '18V', Protección: 'IP54' },
+      reviews: [{ id: 1, author: 'Ana', rating: 5, comment: 'Excelente', date: '2026-01-01' }],
+      rating: { value: 4, count: 3 },
+    })
+    expect(html).toContain('Características clave')
+    expect(html).toContain('Batería de larga duración')
+    expect(html).toContain('Resumen')
+    expect(html).toContain('Especificaciones')
+    expect(html).toContain('Reseñas (1)')
+    expect(html).toContain('Galería')
+  })
+
+  it('renders the specifications section when it is the only rich data', () => {
+    const html = render({
+      product,
+      presentation: 'rich',
+      formatPrice,
+      specifications: { Voltaje: '18V', Protección: 'IP54' },
+    })
+    expect(html).toContain('Especificaciones técnicas')
+    expect(html).toContain('IP54')
+  })
+
+  it('renders the reviews section when it is the only rich data', () => {
+    const html = render({
+      product,
+      presentation: 'rich',
+      formatPrice,
+      reviews: [{ id: 1, author: 'Ana', rating: 5, comment: 'Excelente', date: '2026-01-01' }],
+    })
+    expect(html).toContain('Ana')
+    expect(html).toContain('Excelente')
+  })
+})
+
+describe('ProductOverview — controlled selection and add-to-cart identity (task 2.4)', () => {
+  it('does not default to the first variant and prompts for an explicit selection', () => {
+    const html = render({ product, formatPrice, onAddToCart: () => {} })
+    expect(html).toContain('Selecciona una variante')
+    expect(html).not.toContain('USD 10.00')
+  })
+
+  it('shows the selected non-default variant at its current price', () => {
+    const html = render({ product, selectedVariantId: 'v-blue', formatPrice, onAddToCart: () => {} })
+    expect(html).toContain('USD 25.50')
+    expect(html).not.toContain('USD 10.00')
+  })
+
+  it('reports a missing price as unavailable instead of zero', () => {
+    const html = render({ product, selectedVariantId: 'v-noprice', formatPrice })
+    expect(html).toContain('Precio no disponible')
+    expect(html).not.toContain('USD 0')
+  })
+
+  it('preserves a backend-resolved valid zero', () => {
+    const html = render({ product, selectedVariantId: 'v-free', formatPrice })
+    expect(html).toContain('USD 0')
+    expect(html).not.toContain('Precio no disponible')
+  })
+
+  it('enables purchase only for an available, priced, explicitly selected variant', () => {
+    const onlyAvailable: ProductDetailProduct = { ...product, variants: [product.variants[0]] }
+    const enabled = render({
+      product: onlyAvailable,
+      selectedVariantId: 'v-red',
+      formatPrice,
+      onAddToCart: () => {},
+    })
+    expect(enabled).not.toContain('disabled=""')
+
+    const noSelection = render({ product: onlyAvailable, formatPrice, onAddToCart: () => {} })
+    expect(noSelection).toContain('disabled=""')
+  })
+})
+
+describe('ProductOverview — sector-neutral (task 2.5)', () => {
+  it('renders a non-fashion product with no size/color system and derives currency from Money', () => {
+    const electronics: ProductDetailProduct = {
+      id: 'e1',
+      title: 'Laptop Pro 14',
+      description: 'Una laptop',
+      vendor: 'Nimbus',
+      options: [{ id: 'o1', name: 'Capacidad', values: ['256 GB', '512 GB'] }],
+      variants: [
+        {
+          id: 'e-256',
+          title: '256 GB',
+          availableForSale: true,
+          selectedOptions: [{ name: 'Capacidad', value: '256 GB' }],
+          price: { amount: '256.00', currencyCode: 'EUR' },
+        },
+      ],
+      images: [{ url: 'https://cdn.example/e1.jpg', altText: 'e1' }],
+    }
+
+    const html = render({ product: electronics, selectedVariantId: 'e-256', formatPrice })
+    expect(html).toContain('Laptop Pro 14')
+    expect(html).toContain('256 GB')
+    expect(html).toContain('EUR 256.00')
+    expect(html).not.toContain('$')
+    expect(html).not.toContain('Talla')
+  })
+})
+
+describe('ProductOverview — purpose-gated wishlist affordance', () => {
+  const presentations = ['standard', 'gallery', 'rich'] as const
+
+  it('renders the wishlist button only when a toggle handler is wired', () => {
+    for (const presentation of presentations) {
+      const wired = render({
+        product,
+        presentation,
+        selectedVariantId: 'v-blue',
+        formatPrice,
+        onToggleWishlist: () => {},
+      })
+      const unwired = render({ product, presentation, selectedVariantId: 'v-blue', formatPrice })
+
+      expect(wired).toContain('Agregar a favoritos')
+      expect(unwired).not.toContain('Agregar a favoritos')
+      expect(unwired).not.toContain('Quitar de favoritos')
+    }
+  })
+
+  it('reflects the controlled wishlist state in the button label', () => {
+    const html = render({
+      product,
+      selectedVariantId: 'v-blue',
+      formatPrice,
+      isWishlisted: true,
+      onToggleWishlist: () => {},
+    })
+    expect(html).toContain('Quitar de favoritos')
+    expect(html).not.toContain('Agregar a favoritos')
+  })
+})
+
+describe('resolveAddToCartPayload', () => {
+  const variant = product.variants[1]
+
+  it('returns null when no variant is selected (no first-variant shortcut)', () => {
+    expect(resolveAddToCartPayload(null, 2)).toBeNull()
+  })
+
+  it('uses the selected backend variant id and defaults the quantity to 1', () => {
+    expect(resolveAddToCartPayload(variant, undefined)).toEqual({ variantId: 'v-blue', quantity: 1 })
+  })
+
+  it('carries the requested quantity', () => {
+    expect(resolveAddToCartPayload(variant, 3)).toEqual({ variantId: 'v-blue', quantity: 3 })
+  })
+})
+
+describe('variant helpers', () => {
+  it('prefers the variant title', () => {
+    expect(variantLabelOf(product.variants[0])).toBe('Rojo')
+  })
+
+  it('falls back to option values when a variant has no title', () => {
+    expect(variantLabelOf({ ...product.variants[0], title: '' })).toBe('Rojo')
+  })
+
+  it('uses the product images when present and never a fabricated URL', () => {
+    const withImages: ProductDetailProduct = {
+      ...product,
+      images: [{ url: 'https://cdn.example/p1.jpg', altText: 'p1' }],
+    }
+    expect(galleryImages(withImages, 'FALLBACK')).toEqual(['https://cdn.example/p1.jpg'])
+    expect(galleryImages({ ...product, images: [] }, 'FALLBACK')).toEqual(['FALLBACK'])
+  })
+})