@thorprovider/blocks 2.0.0 → 3.0.0

package/src/blocks/e-commerce/shopping-carts/shopping-cart.test.tsx

@@ -1,399 +0,0 @@
-// @vitest-environment jsdom
-import { act } from 'react'
-import { createRoot, type Root } from 'react-dom/client'
-import { renderToStaticMarkup } from 'react-dom/server'
-import userEvent from '@testing-library/user-event'
-import { Zap } from 'lucide-react'
-import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
-
-import { ShoppingCart, type ShoppingCartProps } from './shopping-cart'
-import type { CartTotals, ShoppingCartItem } from '../../../lib/contracts'
-
-;(globalThis as Record<string, unknown>).IS_REACT_ACT_ENVIRONMENT = true
-
-// jsdom lacks browser APIs some shadcn/ui primitives probe on mount.
-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 usd = (amount: string) => ({ amount, currencyCode: 'USD' })
-
-const items: ShoppingCartItem[] = [
-  {
-    id: 'line_1',
-    name: 'Taladro',
-    quantity: 2,
-    image: 'https://cdn.example/taladro.jpg',
-    unitPrice: usd('45.00'),
-    lineTotal: usd('90.00'),
-  },
-  { id: 'line_2', name: 'Batería', quantity: 1, unitPrice: usd('20.00'), lineTotal: usd('20.00') },
-]
-
-const totals: CartTotals = {
-  subtotal: usd('110.00'),
-  discount: usd('10.00'),
-  tax: usd('8.00'),
-  shipping: usd('0'),
-  total: usd('108.00'),
-}
-
-const formatMoney = (money: { amount: string; currencyCode: string }) =>
-  `${money.currencyCode} ${money.amount}`
-
-const renderMarkup = (props: ShoppingCartProps) => renderToStaticMarkup(<ShoppingCart {...props} />)
-
-describe('ShoppingCart — renders from authoritative cart data', () => {
-  it('renders supplied backend totals verbatim (no local arithmetic)', () => {
-    const html = renderMarkup({ items, promotions: [], totals, formatMoney })
-    expect(html).toContain('USD 110.00')
-    expect(html).toContain('USD 10.00')
-    expect(html).toContain('USD 8.00')
-    expect(html).toContain('Gratis')
-    expect(html).toContain('USD 108.00')
-  })
-
-  it('does not invent subtotal or total when none are supplied', () => {
-    const html = renderMarkup({ items, promotions: [], formatMoney })
-    expect(html).not.toContain('Subtotal')
-    expect(html).not.toContain('Total')
-  })
-
-  it('renders a controlled pending state', () => {
-    const html = renderMarkup({ items, promotions: [], totalsState: 'pending' })
-    expect(html).toContain('Actualizando totales')
-  })
-
-  it('renders a controlled error state with a recovery action', () => {
-    const html = renderMarkup({ items, promotions: [], totalsState: 'error', onRetryTotals: () => {} })
-    expect(html).toContain('No se pudieron actualizar los totales')
-    expect(html).toContain('Reintentar')
-  })
-
-  it('never renders a fake zero for absent or malformed required totals', () => {
-    const html = renderMarkup({
-      items,
-      promotions: [],
-      totals: { subtotal: { amount: '', currencyCode: 'USD' }, total: { amount: 'abc', currencyCode: 'USD' } },
-      formatMoney,
-    })
-    expect(html).not.toContain('USD 0')
-    expect(html).toContain('Totales no disponibles')
-  })
-
-  it('preserves a legitimate zero total', () => {
-    const html = renderMarkup({
-      items,
-      promotions: [],
-      totals: { subtotal: usd('0'), total: usd('0') },
-      formatMoney,
-    })
-    expect(html).toContain('USD 0')
-    expect(html).not.toContain('Totales no disponibles')
-  })
-
-  it('renders the authoritative line total verbatim, never unit price × quantity', () => {
-    const html = renderMarkup({
-      items: [
-        { id: 'line_x', name: 'Pieza', quantity: 1, unitPrice: usd('10.00'), lineTotal: usd('10.00') },
-        { id: 'line_y', name: 'Set', quantity: 3, unitPrice: usd('10.00'), lineTotal: usd('25.00') },
-      ],
-      promotions: [],
-      totals,
-      formatMoney,
-    })
-    expect(html).toContain('>USD 10.00<')
-    expect(html).toContain('>USD 25.00<')
-    expect(html).not.toContain('>USD 30')
-    expect(html).not.toContain('—')
-  })
-
-  it('shows an unavailable marker (not zero) for a malformed line total', () => {
-    const html = renderMarkup({
-      items: [{ id: 'line_x', name: 'Pieza', quantity: 1, unitPrice: usd('10.00'), lineTotal: { amount: '', currencyCode: 'USD' } }],
-      promotions: [],
-      totals,
-      formatMoney,
-    })
-    expect(html).toContain('—')
-    expect(html).not.toContain('USD 0')
-  })
-
-  it('renders absolute quantities from props (cart contract, not a delta)', () => {
-    const html = renderMarkup({ items, promotions: [], totals, formatMoney })
-    expect(html).toContain('>2<')
-    expect(html).toContain('>1<')
-  })
-})
-
-describe('ShoppingCart — optional fields are omitted, not emptied', () => {
-  it('omits an absent line image without emitting an empty src', () => {
-    const html = renderMarkup({ items, promotions: [], totals, formatMoney })
-    expect(html).not.toMatch(/src=""/)
-  })
-
-  it('renders no delivery estimate, express controls, or suggestions when absent', () => {
-    const html = renderMarkup({ items, promotions: [], totals, formatMoney })
-    expect(html).not.toContain('Entrega estimada')
-    expect(html).not.toContain('Apple Pay')
-    expect(html).not.toContain('Google Pay')
-    expect(html).not.toContain('Compra rápida')
-    expect(html).not.toContain('Vistos recientemente')
-  })
-
-  it('omits the promo entry affordance when no callback is supplied', () => {
-    const html = renderMarkup({ items, promotions: [], totals, formatMoney })
-    expect(html).not.toContain('código de descuento')
-  })
-})
-
-describe('ShoppingCart — truthful evidence only', () => {
-  it('renders host-supplied suggestions with Money prices and omits absent fields', () => {
-    const html = renderMarkup({
-      items,
-      promotions: [],
-      totals,
-      formatMoney,
-      recentlyViewed: [
-        { id: 'p1', name: 'Mouse', image: '/demo/mouse.svg', unitPrice: usd('5.00') },
-        { id: 'p2', name: 'Cable' },
-      ],
-    })
-    expect(html).toContain('Vistos recientemente')
-    expect(html).toContain('USD 5.00')
-    expect(html).not.toMatch(/src=""/)
-    expect(html).not.toContain('$')
-  })
-
-  it('derives the display currency from the authoritative Money subtotal', () => {
-    const eur = (amount: string) => ({ amount, currencyCode: 'EUR' })
-    const html = renderMarkup({
-      items,
-      promotions: [],
-      totals: { subtotal: eur('110.00'), discount: eur('10.00'), tax: eur('8.00'), shipping: eur('0'), total: eur('108.00') },
-    })
-    expect(html).toMatch(/(?:EUR|€)\s?110\.00/)
-    expect(html).toMatch(/(?:EUR|€)\s?108\.00/)
-  })
-
-  it('renders host-supplied promotion progress and activated copy from data', () => {
-    const html = renderMarkup({
-      items,
-      promotions: [{ threshold: 200, reward: 'Envío gratis', icon: Zap }],
-      totals,
-      formatMoney,
-    })
-    expect(html).toContain('Te faltan')
-    expect(html).toContain('Envío gratis')
-  })
-})
-
-describe('ShoppingCart — actions are reported, not owned', () => {
-  let container: HTMLElement
-  let root: Root
-  let user: ReturnType<typeof userEvent.setup>
-
-  beforeEach(() => {
-    container = document.createElement('div')
-    document.body.appendChild(container)
-    root = createRoot(container)
-    user = userEvent.setup()
-  })
-
-  afterEach(() => {
-    act(() => root.unmount())
-    container.remove()
-  })
-
-  const mount = (props: ShoppingCartProps) => {
-    act(() => {
-      root.render(<ShoppingCart {...props} />)
-    })
-  }
-
-  it('reports absolute quantity changes keyed by the backend line id', async () => {
-    const onQuantityChange = vi.fn()
-    mount({ items, promotions: [], totals, onQuantityChange })
-    const increase = container.querySelector('button[aria-label="Aumentar cantidad, Taladro"]')!
-    await user.click(increase)
-    expect(onQuantityChange).toHaveBeenCalledWith('line_1', 3)
-    const decrease = container.querySelector('button[aria-label="Disminuir cantidad, Taladro"]')!
-    await user.click(decrease)
-    expect(onQuantityChange).toHaveBeenCalledWith('line_1', 1)
-  })
-
-  it('reports removals keyed by the backend line id', async () => {
-    const onRemove = vi.fn()
-    mount({ items, promotions: [], totals, onRemove })
-    await user.click(container.querySelector('button[aria-label="Quitar Taladro"]')!)
-    expect(onRemove).toHaveBeenCalledWith('line_1')
-  })
-
-  it('reports the promo code to the host and never resolves it locally', async () => {
-    const onApplyPromo = vi.fn()
-    mount({ items, promotions: [], totals, onApplyPromo })
-    const input = container.querySelector('input')!
-    await user.type(input, 'X10')
-    await user.click(container.querySelector('button[type="submit"]')!)
-    expect(onApplyPromo).toHaveBeenCalledWith('X10')
-    expect((input as HTMLInputElement).value).toBe('')
-  })
-
-  it('does not invent an applied-discount row from the entered code', async () => {
-    const onApplyPromo = vi.fn()
-    mount({ items, promotions: [], totals, onApplyPromo, formatMoney })
-    const input = container.querySelector('input')!
-    await user.type(input, 'X10')
-    await user.click(container.querySelector('button[type="submit"]')!)
-    expect(onApplyPromo).toHaveBeenCalledTimes(1)
-    expect(container.querySelector('input')!.value).toBe('')
-  })
-})
-
-describe('ShoppingCart — presentation and action availability', () => {
-  it('defaults to the compact collapsible card', () => {
-    const html = renderMarkup({ items, promotions: [], totals, formatMoney })
-    expect(html).toContain('max-w-md')
-    expect(html).toContain('Contraer carrito')
-    expect(html).toContain('max-h-64')
-  })
-
-  it('renders page presentation as a wide, always-expanded review with a heading', () => {
-    const html = renderMarkup({ items, promotions: [], totals, formatMoney, presentation: 'page' })
-    expect(html).toContain('max-w-3xl')
-    expect(html).toContain('<h1')
-    expect(html).not.toContain('Contraer carrito')
-    expect(html).not.toContain('max-h-64')
-  })
-
-  it('keeps the same data and action contract across presentations', () => {
-    for (const presentation of ['compact', 'page'] as const) {
-      const html = renderMarkup({
-        items,
-        promotions: [],
-        totals,
-        formatMoney,
-        presentation,
-        onApplyPromo: () => {},
-      })
-      expect(html).toContain('USD 108.00')
-      expect(html).toContain('Taladro')
-      expect(html).toContain('código de descuento')
-    }
-  })
-
-  it('offers a continue-shopping action in page presentation', () => {
-    const html = renderMarkup({
-      items,
-      promotions: [],
-      totals,
-      formatMoney,
-      presentation: 'page',
-      onContinueShopping: () => {},
-    })
-    expect(html).toContain('Seguir comprando')
-  })
-
-  it('suppresses checkout when the checkout feature is unavailable', () => {
-    const html = renderMarkup({
-      items,
-      promotions: [],
-      totals,
-      formatMoney,
-      presentation: 'page',
-      checkoutUnavailable: true,
-    })
-    expect(html).not.toContain('Ver carrito y finalizar')
-  })
-
-  it('disables checkout while the cart is not ready', () => {
-    const html = renderMarkup({
-      items,
-      promotions: [],
-      totals,
-      formatMoney,
-      presentation: 'page',
-      checkoutDisabled: true,
-    })
-    expect(html).toMatch(/<button[^>]*disabled[^>]*>[^<]*Ver carrito y finalizar/)
-  })
-})
-
-describe('ShoppingCart — no hardcoded currency or locale copy', () => {
-  it('formats every amount through the canonical Money path', () => {
-    const html = renderMarkup({
-      items,
-      promotions: [],
-      totals,
-      formatMoney,
-      recentlyViewed: [{ id: 'p1', name: 'Mouse', unitPrice: usd('5.00') }],
-    })
-    expect(html).toContain('USD 110.00')
-    expect(html).toContain('USD 5.00')
-    expect(html).not.toMatch(/\$\d/)
-  })
-
-  it('uses overridable labels for actions, states, and summary copy', () => {
-    const html = renderMarkup({
-      items,
-      promotions: [],
-      totals,
-      titleLabel: 'Mi carrito',
-      emptyLabel: 'Nada por aquí',
-      checkoutLabel: 'Pagar',
-    })
-    expect(html).toContain('Mi carrito')
-    expect(html).toContain('Pagar')
-    const empty = renderMarkup({
-      items: [],
-      promotions: [],
-      emptyLabel: 'Nada por aquí',
-      titleLabel: 'Mi carrito',
-    })
-    expect(empty).toContain('Nada por aquí')
-    expect(empty).not.toContain('Taladro')
-  })
-})
-
-describe('ShoppingCart — accessibility', () => {
-  it('names every line mutation control', () => {
-    const html = renderMarkup({ items, promotions: [], totals, formatMoney })
-    expect(html).toContain('aria-label="Disminuir cantidad, Taladro"')
-    expect(html).toContain('aria-label="Aumentar cantidad, Taladro"')
-    expect(html).toContain('aria-label="Quitar Taladro"')
-  })
-
-  it('names the promo input and apply action', () => {
-    const html = renderMarkup({ items, promotions: [], totals, onApplyPromo: () => {} })
-    expect(html).toContain('código de descuento')
-    expect(html).toMatch(/<label[^>]*for=/)
-    expect(html).toMatch(/<input[^>]*id=/)
-  })
-
-  it('announces pending totals politely and errors as an alert', () => {
-    const pending = renderMarkup({ items, promotions: [], totalsState: 'pending' })
-    expect(pending).toContain('aria-live="polite"')
-    expect(pending).toContain('Actualizando totales')
-    const error = renderMarkup({ items, promotions: [], totalsState: 'error' })
-    expect(error).toMatch(/role="alert"/)
-  })
-})