@thorprovider/blocks 0.1.2 → 1.0.0

package/src/blocks/e-commerce/storefront-hero/storefront-hero.test.tsx

@@ -0,0 +1,412 @@
+// @vitest-environment jsdom
+import { renderToStaticMarkup } from 'react-dom/server'
+import { beforeAll, describe, expect, it, vi } from 'vitest'
+import { render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import StorefrontHero, { type FeaturedProduct } from './storefront-hero'
+import { storefrontHeroPropsSchema } from '../../../lib/contracts'
+
+// The showcase presentation mounts a carousel (embla) and motion elements, so
+// the jsdom environment needs the browser observers those libraries read.
+beforeAll(() => {
+  ;(globalThis as { IS_REACT_ACT_ENVIRONMENT?: boolean }).IS_REACT_ACT_ENVIRONMENT = true
+  if (!window.matchMedia) {
+    window.matchMedia = ((query: string) => ({
+      matches: false,
+      media: query,
+      onchange: null,
+      addListener: () => {},
+      removeListener: () => {},
+      addEventListener: () => {},
+      removeEventListener: () => {},
+      dispatchEvent: () => false,
+    })) as unknown as typeof window.matchMedia
+  }
+  if (!('ResizeObserver' in globalThis)) {
+    ;(globalThis as { ResizeObserver?: unknown }).ResizeObserver = class {
+      observe() {}
+      unobserve() {}
+      disconnect() {}
+    }
+  }
+  if (!('IntersectionObserver' in globalThis)) {
+    ;(globalThis as { IntersectionObserver?: unknown }).IntersectionObserver = class {
+      observe() {}
+      unobserve() {}
+      disconnect() {}
+      takeRecords() {
+        return []
+      }
+    }
+  }
+})
+
+const fullProduct: FeaturedProduct = {
+  id: 'p1',
+  name: 'Taladro percutor',
+  brand: 'INGCO',
+  price: 69.99,
+  originalPrice: 99.99,
+  rating: 4.8,
+  reviewCount: 236,
+  inStock: true,
+  isNew: true,
+  image: '/products/drill.png',
+  colors: ['#111111'],
+}
+
+const bareProduct: FeaturedProduct = {
+  id: 'p2',
+  name: 'Decibelímetro',
+  price: 129.5,
+}
+
+const base = {
+  title: 'Potencia para cada proyecto',
+  description: 'Herramientas profesionales',
+  products: [] as FeaturedProduct[],
+}
+
+describe('StorefrontHero — compact: optional editorial image', () => {
+  it('renders no editorial image when none is supplied', () => {
+    const html = renderToStaticMarkup(<StorefrontHero {...base} />)
+    expect(html).not.toContain('<img')
+  })
+
+  it('renders a native editorial image with its src and alt text', () => {
+    const html = renderToStaticMarkup(
+      <StorefrontHero {...base} heroImage={{ src: '/hero-tools.png', alt: 'Taladro inalámbrico y accesorios' }} />,
+    )
+    expect(html).toContain('src="/hero-tools.png"')
+    expect(html).toContain('alt="Taladro inalámbrico y accesorios"')
+  })
+
+  it('never renders an empty image src', () => {
+    const blank = renderToStaticMarkup(
+      <StorefrontHero {...base} heroImage={{ src: '   ', alt: 'Vacío' }} />,
+    )
+    expect(blank).not.toContain('<img')
+  })
+
+  it('preserves the product grid when the editorial image is omitted', () => {
+    const html = renderToStaticMarkup(<StorefrontHero {...base} products={[fullProduct]} />)
+    expect(html).toContain('Taladro percutor')
+    expect(html).toContain('src="/products/drill.png"')
+    expect(html).not.toContain('/hero-tools.png')
+  })
+
+  it('keeps the product grid when the editorial image is supplied', () => {
+    const html = renderToStaticMarkup(
+      <StorefrontHero
+        {...base}
+        products={[fullProduct]}
+        heroImage={{ src: '/hero-tools.png', alt: 'Taladro inalámbrico' }}
+      />,
+    )
+    expect(html).toContain('src="/hero-tools.png"')
+    expect(html).toContain('Taladro percutor')
+  })
+})
+
+describe('StorefrontHero — compact: detail affordance', () => {
+  it('defaults the product-card action to "Ver producto"', () => {
+    const html = renderToStaticMarkup(<StorefrontHero {...base} products={[fullProduct]} />)
+    expect(html).toContain('Ver producto')
+  })
+
+  it('renders the add-to-cart control only when its handler is supplied', () => {
+    const withoutHandler = renderToStaticMarkup(<StorefrontHero {...base} products={[fullProduct]} />)
+    expect(withoutHandler).not.toContain('Agregar al carrito')
+
+    const withHandler = renderToStaticMarkup(
+      <StorefrontHero {...base} products={[fullProduct]} onAddToCart={() => {}} />,
+    )
+    expect(withHandler).toContain('Agregar al carrito')
+  })
+
+  it('disables purchase and shows the out-of-stock label only from an explicit inStock: false', () => {
+    const available = renderToStaticMarkup(<StorefrontHero {...base} products={[bareProduct]} />)
+    expect(available).not.toContain('Agotado')
+
+    const outOfStock = renderToStaticMarkup(
+      <StorefrontHero {...base} products={[{ ...bareProduct, inStock: false }]} />,
+    )
+    expect(outOfStock).toContain('Agotado')
+    expect(outOfStock).toContain('disabled')
+  })
+})
+
+describe('StorefrontHero — compact: currency never hardcoded', () => {
+  it('formats prices through Intl with the supplied currency', () => {
+    const html = renderToStaticMarkup(
+      <StorefrontHero {...base} currency='EUR' products={[fullProduct]} />,
+    )
+    expect(html).toContain('69.99')
+    expect(html).toContain('99.99')
+    expect(html).not.toContain('$')
+  })
+
+  it('renders a plain localized amount when no currency is supplied', () => {
+    const html = renderToStaticMarkup(<StorefrontHero {...base} products={[bareProduct]} />)
+    expect(html).toContain('129.5')
+    expect(html).not.toContain('$')
+  })
+})
+
+describe('StorefrontHero — compact: truthful evidence only', () => {
+  it('omits brand, colors, and rating rows when the host supplies none', () => {
+    const html = renderToStaticMarkup(<StorefrontHero {...base} products={[bareProduct]} />)
+    expect(html).not.toContain('Colores:')
+    expect(html).not.toContain('INGCO')
+    expect(html).not.toContain('(236)')
+    expect(html).not.toContain('Nuevo')
+  })
+
+  it('renders rating and review count only when supplied', () => {
+    const html = renderToStaticMarkup(<StorefrontHero {...base} products={[fullProduct]} />)
+    expect(html).toContain('(236)')
+  })
+
+  it('renders the discount badge and struck original price only from a real price pair', () => {
+    const onSale = renderToStaticMarkup(<StorefrontHero {...base} products={[fullProduct]} />)
+    expect(onSale).toContain('% OFF')
+    expect(onSale).toContain('line-through')
+
+    const withoutPair = renderToStaticMarkup(
+      <StorefrontHero {...base} products={[{ ...bareProduct, originalPrice: 99 }]} />,
+    )
+    expect(withoutPair).not.toContain('% OFF')
+    expect(withoutPair).not.toContain('line-through')
+  })
+
+  it('renders no invented claims with no optional evidence and a non-USD currency', () => {
+    const html = renderToStaticMarkup(
+      <StorefrontHero {...base} products={[bareProduct]} currency='EUR' />,
+    )
+    expect(html).toContain('Decibelímetro')
+    expect(html).toContain(new Intl.NumberFormat(undefined, { style: 'currency', currency: 'EUR' }).format(129.5))
+    expect(html).not.toContain('$')
+    expect(html).not.toContain('%')
+  })
+
+  it('renders the product grid text-forward when the list is empty', () => {
+    const html = renderToStaticMarkup(<StorefrontHero {...base} />)
+    expect(html).toContain('Potencia para cada proyecto')
+    expect(html).not.toContain('src="/products/drill.png"')
+  })
+})
+
+describe('StorefrontHero — showcase: search affordance only with a handler', () => {
+  const showcase = { ...base, presentation: 'showcase' as const, products: [fullProduct] }
+
+  it('renders the search input only when onSearch is supplied', () => {
+    const withHandler = renderToStaticMarkup(<StorefrontHero {...showcase} onSearch={() => {}} />)
+    expect(withHandler).toContain('type="search"')
+    expect(withHandler).toContain('Buscar')
+
+    const withoutHandler = renderToStaticMarkup(<StorefrontHero {...showcase} />)
+    expect(withoutHandler).not.toContain('type="search"')
+  })
+
+  it('produces a carousel structure (slide dots) absent from compact', () => {
+    const html = renderToStaticMarkup(<StorefrontHero {...showcase} />)
+    expect(html).toContain('Ir a la diapositiva 1')
+    expect(html).toContain('Taladro percutor')
+
+    const compact = renderToStaticMarkup(<StorefrontHero {...base} products={[fullProduct]} />)
+    expect(compact).not.toContain('Ir a la diapositiva 1')
+  })
+
+  it('formats slide prices with the supplied currency', () => {
+    const html = renderToStaticMarkup(<StorefrontHero {...showcase} currency='EUR' />)
+    expect(html).toContain(new Intl.NumberFormat(undefined, { style: 'currency', currency: 'EUR' }).format(69.99))
+    expect(html).not.toContain('$')
+  })
+})
+
+describe('StorefrontHero — showcase: purchase affordance is handler-gated and stock-consistent', () => {
+  const purchaseLabel = 'Adquirir ahora'
+  const available: FeaturedProduct = { id: 'p1', name: 'Taladro percutor', price: 69.99, inStock: true }
+  const showcase = { ...base, presentation: 'showcase' as const, buyNowLabel: purchaseLabel }
+
+  it('renders no purchase-labeled control when no onBuyNow handler is supplied', () => {
+    render(<StorefrontHero {...showcase} products={[available]} />)
+    expect(screen.queryByRole('button', { name: purchaseLabel })).toBeNull()
+    expect(screen.queryByText(purchaseLabel)).toBeNull()
+  })
+
+  it('does not offer an actionable purchase control for an out-of-stock product', async () => {
+    const user = userEvent.setup()
+    const onBuyNow = vi.fn()
+    render(<StorefrontHero {...showcase} products={[{ ...available, inStock: false }]} onBuyNow={onBuyNow} />)
+    const buy = screen.getByRole('button', { name: purchaseLabel }) as HTMLButtonElement
+    expect(buy.disabled).toBe(true)
+    await user.click(buy)
+    expect(onBuyNow).not.toHaveBeenCalled()
+  })
+
+  it('renders an enabled purchase control that reports the product through the handler', async () => {
+    const user = userEvent.setup()
+    const onBuyNow = vi.fn()
+    render(<StorefrontHero {...showcase} products={[available]} onBuyNow={onBuyNow} />)
+    const buy = screen.getByRole('button', { name: purchaseLabel }) as HTMLButtonElement
+    expect(buy.disabled).toBe(false)
+    await user.click(buy)
+    expect(onBuyNow).toHaveBeenCalledWith(available)
+  })
+})
+
+describe('StorefrontHero — compact: host-supplied action label is handler-gated', () => {
+  const customLabel = 'Adquirir ahora'
+
+  it('omits a host-supplied action label when no onBuyNow handler is supplied', () => {
+    const html = renderToStaticMarkup(<StorefrontHero {...base} products={[fullProduct]} buyNowLabel={customLabel} />)
+    expect(html).not.toContain(customLabel)
+  })
+
+  it('renders a host-supplied action label when onBuyNow is supplied', () => {
+    const html = renderToStaticMarkup(
+      <StorefrontHero {...base} products={[fullProduct]} buyNowLabel={customLabel} onBuyNow={() => {}} />,
+    )
+    expect(html).toContain(customLabel)
+  })
+})
+
+describe('StorefrontHero — editorial: honest department and deal evidence', () => {
+  it('renders departments with the count row only when supplied', () => {
+    const html = renderToStaticMarkup(
+      <StorefrontHero
+        {...base}
+        presentation='editorial'
+        departments={[
+          { id: 'd1', name: 'Herramientas', count: '120 referencias' },
+          { id: 'd2', name: 'Medición' },
+        ]}
+      />,
+    )
+    expect(html).toContain('Herramientas')
+    expect(html).toContain('120 referencias')
+    expect(html).toContain('Medición')
+  })
+
+  it('renders deal description and struck price only when supplied', () => {
+    const html = renderToStaticMarkup(
+      <StorefrontHero
+        {...base}
+        presentation='editorial'
+        featuredDeals={[
+          { id: 'deal1', name: 'Combo taller', price: 199, originalPrice: 249 },
+          { id: 'deal2', name: 'Rebate', description: 'Con descripción', price: 59 },
+        ]}
+      />,
+    )
+    expect(html).toContain('Con descripción')
+    expect(html).toContain('Combo taller')
+    expect(html).toContain('line-through')
+  })
+
+  it('renders deal and locator buttons only with a real destination or handler', () => {
+    const html = renderToStaticMarkup(
+      <StorefrontHero
+        {...base}
+        presentation='editorial'
+        featuredDeals={[{ id: 'deal1', name: 'Combo taller', price: 199 }]}
+        storeLocator={{ title: 'Nuestras tiendas', description: 'Cerca de ti', ctaLabel: 'Ver tiendas' }}
+      />,
+    )
+    expect(html).not.toContain('Comprar ahora')
+    expect(html).not.toContain('Ver tiendas')
+  })
+})
+
+describe('StorefrontHero — promotional: no invented scarcity', () => {
+  const promotional = {
+    ...base,
+    presentation: 'promotional' as const,
+    categories: [
+      { id: 'c1', name: 'Electricidad', count: '2.5k+' },
+      { id: 'c2', name: 'Fontanería' },
+    ],
+  }
+
+  it('renders discount and countdown only when the host supplies them', () => {
+    const withEvidence = renderToStaticMarkup(
+      <StorefrontHero
+        {...promotional}
+        deals={[{ id: 'deal1', title: 'Semana eléctrica', discount: '15%', endTime: '2d : 15h' }]}
+      />,
+    )
+    expect(withEvidence).toContain('Semana eléctrica')
+    expect(withEvidence).toContain('15%')
+    expect(withEvidence).toContain('2d : 15h')
+
+    const bare = renderToStaticMarkup(
+      <StorefrontHero {...promotional} deals={[{ id: 'deal1', title: 'Semana eléctrica' }]} />,
+    )
+    expect(bare).toContain('Semana eléctrica')
+    expect(bare).not.toContain('Termina en')
+  })
+
+  it('renders the deals-bar shop-now button only with its handler', () => {
+    const bare = renderToStaticMarkup(
+      <StorefrontHero {...promotional} deals={[{ id: 'deal1', title: 'Semana eléctrica' }]} />,
+    )
+    expect(bare).not.toContain('Comprar ahora')
+
+    const withHandler = renderToStaticMarkup(
+      <StorefrontHero {...promotional} deals={[{ id: 'deal1', title: 'Semana eléctrica' }]} onShopNow={() => {}} />,
+    )
+    expect(withHandler).toContain('Comprar ahora')
+  })
+
+  it('renders category counts and arrows only with evidence', () => {
+    const html = renderToStaticMarkup(<StorefrontHero {...promotional} />)
+    expect(html).toContain('2.5k+')
+    expect(html).toContain('Electricidad')
+    expect(html).toContain('Fontanería')
+  })
+
+  it('renders the first deal when rotation has not advanced', () => {
+    const html = renderToStaticMarkup(
+      <StorefrontHero
+        {...promotional}
+        deals={[
+          { id: 'deal1', title: 'Semana eléctrica' },
+          { id: 'deal2', title: 'Mes de medición' },
+        ]}
+      />,
+    )
+    expect(html).toContain('Semana eléctrica')
+  })
+})
+
+describe('storefrontHeroPropsSchema — serializable contract', () => {
+  it('parses the canonical props subset across presentations', () => {
+    const parsed = storefrontHeroPropsSchema.parse({
+      title: 'Potencia para cada proyecto',
+      description: 'Herramientas profesionales',
+      presentation: 'promotional',
+      currency: 'EUR',
+      products: [fullProduct],
+      heroImage: { src: '/hero-tools.png', alt: 'Taladro inalámbrico' },
+      departments: [{ id: 'd1', name: 'Herramientas', count: '120 productos' }],
+      featuredDeals: [{ id: 'f1', name: 'Oferta', price: 49.9, originalPrice: 79.9 }],
+      deals: [{ id: 'deal1', title: 'Semana eléctrica', endTime: '2026-11-30' }],
+      categories: [{ id: 'c1', name: 'Taladros', count: '35' }],
+      rotationInterval: 3000,
+    })
+    expect(parsed.products).toHaveLength(1)
+    expect(parsed.presentation).toBe('promotional')
+  })
+
+  it('rejects unknown presentation values', () => {
+    expect(() =>
+      storefrontHeroPropsSchema.parse({
+        title: 'x',
+        description: 'y',
+        presentation: 'mega',
+        products: [],
+      }),
+    ).toThrow()
+  })
+})