@thorprovider/blocks 1.0.0 → 3.0.0

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

@@ -1,412 +0,0 @@
-// @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()
-  })
-})