@thorprovider/blocks 0.1.1 → 0.1.3

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

@@ -0,0 +1,229 @@
+import { renderToStaticMarkup } from 'react-dom/server'
+import { describe, expect, it } from 'vitest'
+import { ShoppingCart4, type ShoppingCart4Item, type ShoppingCart4Totals } from './shopping-cart-4'
+
+const items: ShoppingCart4Item[] = [
+  {
+    id: 'line_1',
+    name: 'Taladro',
+    price: 45,
+    quantity: 2,
+    image: 'https://cdn.example/taladro.jpg',
+    lineTotal: { amount: '90.00', currencyCode: 'USD' },
+  },
+  { id: 'line_2', name: 'Batería', price: 20, quantity: 1 },
+]
+
+const totals: ShoppingCart4Totals = {
+  subtotal: { amount: '110.00', currencyCode: 'USD' },
+  discount: { amount: '10.00', currencyCode: 'USD' },
+  tax: { amount: '8.00', currencyCode: 'USD' },
+  shipping: { amount: '0', currencyCode: 'USD' },
+  total: { amount: '108.00', currencyCode: 'USD' },
+}
+
+const formatMoney = (money: { amount: string; currencyCode: string }) =>
+  `${money.currencyCode} ${money.amount}`
+
+describe('ShoppingCart4 — backend-authoritative totals', () => {
+  it('renders supplied backend totals verbatim (no local arithmetic)', () => {
+    const html = renderToStaticMarkup(
+      <ShoppingCart4 items={items} promotions={[]} totals={totals} formatMoney={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 = renderToStaticMarkup(
+      <ShoppingCart4 items={items} promotions={[]} formatMoney={formatMoney} />,
+    )
+    expect(html).not.toContain('Subtotal')
+    expect(html).not.toContain('Total')
+  })
+
+  it('renders a controlled pending state', () => {
+    const html = renderToStaticMarkup(
+      <ShoppingCart4 items={items} promotions={[]} totalsState='pending' />,
+    )
+    expect(html).toContain('Actualizando totales')
+  })
+
+  it('renders a controlled error state with a recovery action', () => {
+    const html = renderToStaticMarkup(
+      <ShoppingCart4
+        items={items}
+        promotions={[]}
+        totalsState='error'
+        onRetryTotals={() => {}}
+      />,
+    )
+    expect(html).toContain('No se pudieron actualizar los totales')
+    expect(html).toContain('Reintentar')
+  })
+
+  it('omits an absent line image without emitting an empty src', () => {
+    const html = renderToStaticMarkup(
+      <ShoppingCart4 items={items} promotions={[]} totals={totals} formatMoney={formatMoney} />,
+    )
+    expect(html).not.toMatch(/src=""/)
+  })
+
+  it('does not fabricate a delivery estimate or express payment controls', () => {
+    const html = renderToStaticMarkup(
+      <ShoppingCart4 items={items} promotions={[]} totals={totals} formatMoney={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')
+  })
+
+  it('never renders a fake zero for absent or malformed required totals', () => {
+    const html = renderToStaticMarkup(
+      <ShoppingCart4
+        items={items}
+        promotions={[]}
+        totals={{
+          subtotal: { amount: '', currencyCode: 'USD' },
+          total: { amount: 'abc', currencyCode: 'USD' },
+        }}
+        formatMoney={formatMoney}
+      />,
+    )
+    expect(html).not.toContain('USD 0')
+    expect(html).toContain('Totales no disponibles')
+  })
+
+  it('preserves a legitimate zero total', () => {
+    const html = renderToStaticMarkup(
+      <ShoppingCart4
+        items={items}
+        promotions={[]}
+        totals={{
+          subtotal: { amount: '0', currencyCode: 'USD' },
+          total: { amount: '0', currencyCode: 'USD' },
+        }}
+        formatMoney={formatMoney}
+      />,
+    )
+    expect(html).toContain('USD 0')
+    expect(html).not.toContain('Totales no disponibles')
+  })
+
+  it('shows an unavailable marker (not zero) for a supplied but malformed line total', () => {
+    const html = renderToStaticMarkup(
+      <ShoppingCart4
+        items={[{ id: 'line_x', name: 'Pieza', price: 10, quantity: 1, lineTotal: { amount: '', currencyCode: 'USD' } }]}
+        promotions={[]}
+        totals={totals}
+        formatMoney={formatMoney}
+      />,
+    )
+    expect(html).toContain('—')
+    expect(html).not.toContain('USD 0')
+  })
+
+  it('renders absolute quantities from props (cart contract, not a delta)', () => {
+    const html = renderToStaticMarkup(
+      <ShoppingCart4 items={items} promotions={[]} totals={totals} formatMoney={formatMoney} />,
+    )
+    expect(html).toContain('>2<')
+    expect(html).toContain('>1<')
+  })
+})
+
+describe('ShoppingCart4 — presentation and action availability', () => {
+  it('defaults to the compact collapsible card', () => {
+    const html = renderToStaticMarkup(
+      <ShoppingCart4 items={items} promotions={[]} totals={totals} formatMoney={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 = renderToStaticMarkup(
+      <ShoppingCart4
+        items={items}
+        promotions={[]}
+        totals={totals}
+        formatMoney={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('offers a continue-shopping action in page presentation', () => {
+    const html = renderToStaticMarkup(
+      <ShoppingCart4
+        items={items}
+        promotions={[]}
+        totals={totals}
+        formatMoney={formatMoney}
+        presentation='page'
+        onContinueShopping={() => {}}
+      />,
+    )
+    expect(html).toContain('Seguir comprando')
+  })
+
+  it('suppresses checkout when the checkout feature is unavailable', () => {
+    const html = renderToStaticMarkup(
+      <ShoppingCart4
+        items={items}
+        promotions={[]}
+        totals={totals}
+        formatMoney={formatMoney}
+        presentation='page'
+        checkoutUnavailable
+      />,
+    )
+    expect(html).not.toContain('Ver carrito y finalizar')
+  })
+
+  it('disables checkout while the cart is not ready', () => {
+    const html = renderToStaticMarkup(
+      <ShoppingCart4
+        items={items}
+        promotions={[]}
+        totals={totals}
+        formatMoney={formatMoney}
+        presentation='page'
+        checkoutDisabled
+      />,
+    )
+    expect(html).toMatch(/<button[^>]*disabled[^>]*>[^<]*Ver carrito y finalizar/)
+  })
+})
+
+describe('ShoppingCart4 — accessibility', () => {
+  it('names every line mutation control', () => {
+    const html = renderToStaticMarkup(
+      <ShoppingCart4 items={items} promotions={[]} totals={totals} formatMoney={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('announces pending totals politely and errors as an alert', () => {
+    const pending = renderToStaticMarkup(
+      <ShoppingCart4 items={items} promotions={[]} totalsState='pending' />,
+    )
+    expect(pending).toContain('aria-live="polite"')
+    expect(pending).toContain('Actualizando totales')
+    const error = renderToStaticMarkup(
+      <ShoppingCart4 items={items} promotions={[]} totalsState='error' />,
+    )
+    expect(error).toMatch(/role="alert"/)
+  })
+})