@thorprovider/blocks 0.1.3 → 2.0.0

package/src/blocks/e-commerce/product-list/product-card.test.tsx

@@ -0,0 +1,263 @@
+// @vitest-environment jsdom
+import { act } from 'react'
+import { createRoot, type Root } from 'react-dom/client'
+import { renderToStaticMarkup } from 'react-dom/server'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+
+import { ProductCard, type ProductCardProps } from './product-card'
+import type { ProductPresentation } from '../../../lib/contracts'
+
+;(globalThis as Record<string, unknown>).IS_REACT_ACT_ENVIRONMENT = true
+
+// jsdom lacks the browser APIs the classic presentation's motion layer touches.
+if (!window.matchMedia) {
+  window.matchMedia = ((query: string) => ({
+    matches: false,
+    media: query,
+    onchange: null,
+    addEventListener: () => {},
+    removeEventListener: () => {},
+    addListener: () => {},
+    removeListener: () => {},
+    dispatchEvent: () => false,
+  })) as unknown as typeof window.matchMedia
+}
+if (!('IntersectionObserver' in window)) {
+  ;(window as Record<string, unknown>).IntersectionObserver = class {
+    observe() {}
+    unobserve() {}
+    disconnect() {}
+    takeRecords() {
+      return []
+    }
+  }
+}
+
+const baseItem: ProductPresentation = {
+  id: 'p1',
+  title: 'Llave de impacto',
+  image: '/demo/impact.svg',
+  imageAlt: 'Llave de impacto inalámbrica',
+  price: { amount: '129.50', currencyCode: 'EUR' },
+  compareAtPrice: { amount: '159.00', currencyCode: 'EUR' },
+  rating: 4.5,
+  badge: 'Nuevo',
+}
+
+const renderMarkup = (props: ProductCardProps) => renderToStaticMarkup(<ProductCard {...props} />)
+
+describe('ProductCard — renders from canonical data', () => {
+  it('renders one item cell from canonical Money, requiring no demo-only fields', () => {
+    const html = renderMarkup({ item: baseItem })
+    expect(html).toContain('Llave de impacto')
+    expect(html).toContain('129')
+    expect(html).not.toContain('$')
+  })
+
+  it('renders exactly one cell, with no section wrapper or heading', () => {
+    const html = renderMarkup({ item: baseItem })
+    expect(html.match(/<h3/g)?.length).toBe(1)
+    expect(html).not.toContain('<section')
+    expect(html).not.toContain('<h2')
+  })
+})
+
+describe('ProductCard — optional fields are omitted, not emptied', () => {
+  it('renders without empty src, stars, or chip when optionals are absent', () => {
+    const html = renderMarkup({
+      item: { ...baseItem, image: undefined, imageAlt: undefined, rating: undefined, badge: undefined },
+    })
+    expect(html).not.toContain('src=""')
+    expect(html).not.toContain('4.5')
+    expect(html).not.toContain('Nuevo')
+  })
+
+  it('falls back to the title as the image alt text', () => {
+    const html = renderMarkup({ item: { ...baseItem, imageAlt: undefined } })
+    expect(html).toContain('alt="Llave de impacto"')
+  })
+})
+
+describe('ProductCard — missing price is unavailable, never zero', () => {
+  it('shows the unavailable label, disables add-to-cart, and never renders a zero', () => {
+    const html = renderMarkup({
+      item: { ...baseItem, price: { amount: '', currencyCode: '' }, compareAtPrice: undefined },
+    })
+    expect(html).toContain('Precio no disponible')
+    expect(html).not.toContain('$0')
+    expect(html).toContain('disabled')
+  })
+
+  it('treats a valid zero as a real price', () => {
+    const html = renderMarkup({
+      item: { ...baseItem, price: { amount: '0.00', currencyCode: 'USD' }, compareAtPrice: undefined },
+    })
+    expect(html).toContain('$0.00')
+    expect(html).not.toContain('Precio no disponible')
+  })
+})
+
+describe('ProductCard — no evidence is invented', () => {
+  it('shows no stars, chip, scarcity copy, or crossed-out price when none is supplied', () => {
+    const html = renderMarkup({
+      item: { id: 'p1', title: 'Producto 1', price: { amount: '10.00', currencyCode: 'EUR' } },
+    })
+    expect(html).not.toContain('line-through')
+    expect(html).not.toContain('Nuevo')
+    expect(html).not.toContain('¡Solo')
+  })
+})
+
+describe('ProductCard — compare-at only when valid and higher', () => {
+  it('renders a comparison price only when strictly higher', () => {
+    expect(renderMarkup({ item: baseItem })).toContain('159')
+    const equal = renderMarkup({
+      item: { ...baseItem, compareAtPrice: { amount: '129.50', currencyCode: 'EUR' } },
+    })
+    const lower = renderMarkup({
+      item: { ...baseItem, compareAtPrice: { amount: '99.00', currencyCode: 'EUR' } },
+    })
+    const invalid = renderMarkup({
+      item: { ...baseItem, compareAtPrice: { amount: '', currencyCode: '' } },
+    })
+    expect(equal).not.toContain('159')
+    expect(lower).not.toContain('99')
+    expect(invalid).not.toContain('line-through')
+  })
+})
+
+describe('ProductCard — bounded presentation surface', () => {
+  it('changes structure across presentations while keeping the same contract', () => {
+    const classic = renderMarkup({ item: baseItem })
+    const minimal = renderMarkup({ item: baseItem, presentation: 'minimal' })
+    const rich = renderMarkup({ item: baseItem, presentation: 'rich' })
+    for (const html of [classic, minimal, rich]) {
+      expect(html).toContain('129')
+      expect(html).toContain('Llave de impacto')
+      expect(html).toContain('Agregar al carrito')
+    }
+    expect(classic).toContain('>Agregar al carrito<')
+    expect(minimal).not.toContain('>Agregar al carrito<')
+    expect(minimal).toContain('aria-label="Agregar al carrito"')
+    expect(rich).toContain('aria-pressed')
+    expect(rich).toContain('>Agregar al carrito<')
+  })
+})
+
+describe('ProductCard — rich presentation degrades honestly', () => {
+  const heartTag = (html: string) => html.match(/<button[^>]*aria-pressed[^>]*>/)?.[0]
+  const isDisabled = (tag: string | undefined) => /\sdisabled(?:="")?(?=[\s>])/.test(tag ?? '')
+
+  it('reflects the wishlisted prop and disables the heart without wiring', () => {
+    const unwired = renderMarkup({ item: baseItem, presentation: 'rich' })
+    expect(unwired).toContain('aria-pressed="false"')
+    expect(isDisabled(heartTag(unwired))).toBe(true)
+    expect(unwired).not.toContain('Ver similares')
+    expect(renderMarkup({ item: baseItem, presentation: 'rich', wishlisted: true })).toContain(
+      'aria-pressed="true"',
+    )
+    const wired = renderMarkup({ item: baseItem, presentation: 'rich', onToggleWishlist: () => {} })
+    expect(isDisabled(heartTag(wired))).toBe(false)
+  })
+})
+
+describe('ProductCard — labels are overridable', () => {
+  it('uses supplied labels for actions and availability copy', () => {
+    const html = renderMarkup({
+      item: { ...baseItem, price: { amount: '', currencyCode: '' } },
+      addToCartLabel: 'Comprar ahora',
+      unavailablePriceLabel: 'Consultar precio',
+      addToWishlistLabel: 'Guardar',
+      viewSimilarLabel: 'Ver parecidos',
+      presentation: 'rich',
+      onViewSimilar: () => {},
+    })
+    expect(html).toContain('Comprar ahora')
+    expect(html).toContain('Consultar precio')
+    expect(html).toContain('Guardar')
+    expect(html).toContain('Ver parecidos')
+    expect(html).not.toContain('Agregar al carrito')
+  })
+})
+
+describe('ProductCard — actions are reported, not owned', () => {
+  let container: HTMLDivElement
+  let root: Root
+  let mounted: Root | undefined
+
+  const mount = (props: ProductCardProps) => {
+    root = createRoot(container)
+    mounted = root
+    act(() => root.render(<ProductCard {...props} />))
+  }
+
+  const click = (element: Element | undefined | null) => {
+    expect(element).toBeDefined()
+    act(() => {
+      element!.dispatchEvent(new MouseEvent('click', { bubbles: true }))
+    })
+  }
+
+  beforeEach(() => {
+    container = document.createElement('div')
+    document.body.appendChild(container)
+  })
+
+  afterEach(() => {
+    const root = mounted
+    if (root) act(() => root.unmount())
+    container.remove()
+  })
+
+  it('reports add-to-cart and product clicks with the item identity', () => {
+    const onAddToCart = vi.fn()
+    const onProductClick = vi.fn()
+    mount({ item: baseItem, onAddToCart, onProductClick })
+
+    const addToCart = Array.from(container.querySelectorAll('button')).find((b) =>
+      b.textContent?.includes('Agregar al carrito'),
+    )
+    click(addToCart)
+    expect(onAddToCart).toHaveBeenCalledWith(baseItem)
+
+    click(container.querySelector('h3 button'))
+    expect(onProductClick).toHaveBeenCalledWith(baseItem)
+  })
+
+  it('reports the wishlist toggle with the next state and reflects the prop', () => {
+    const onToggleWishlist = vi.fn()
+    mount({ item: baseItem, presentation: 'rich', wishlisted: false, onToggleWishlist })
+
+    const heart = () => container.querySelector('button[aria-pressed]')
+    expect(heart()!.getAttribute('aria-pressed')).toBe('false')
+    click(heart())
+    expect(onToggleWishlist).toHaveBeenCalledWith(baseItem, true)
+    expect(heart()!.getAttribute('aria-pressed')).toBe('false')
+  })
+
+  it('keeps an unwired heart disabled and inert', () => {
+    mount({ item: baseItem, presentation: 'rich', wishlisted: false })
+    const heart = () => container.querySelector('button[aria-pressed]') as HTMLButtonElement
+    expect(heart().disabled).toBe(true)
+    click(heart())
+    expect(heart().getAttribute('aria-pressed')).toBe('false')
+  })
+
+  it('reflects host-owned wishlist membership from the prop', () => {
+    const onToggleWishlist = vi.fn()
+    mount({ item: baseItem, presentation: 'rich', wishlisted: true, onToggleWishlist })
+
+    const heart = () => container.querySelector('button[aria-pressed]')
+    expect(heart()!.getAttribute('aria-pressed')).toBe('true')
+    click(heart())
+    expect(onToggleWishlist).toHaveBeenCalledWith(baseItem, false)
+    expect(heart()!.getAttribute('aria-pressed')).toBe('true')
+  })
+
+  it('reports view-similar through its callback and omits the affordance without it', () => {
+    const onViewSimilar = vi.fn()
+    mount({ item: baseItem, presentation: 'rich', onViewSimilar })
+    click(container.querySelector('button[aria-label="Ver similares"]'))
+    expect(onViewSimilar).toHaveBeenCalledWith(baseItem)
+  })
+})