@thorprovider/blocks 0.1.1 → 0.1.3

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

@@ -0,0 +1,72 @@
+import { renderToStaticMarkup } from 'react-dom/server'
+import { describe, expect, it } from 'vitest'
+import StorefrontHero1, { type FeaturedProduct } from './storefront-hero-1'
+
+const product: FeaturedProduct = {
+  id: 'p1',
+  name: 'Taladro percutor',
+  brand: 'INGCO',
+  price: 69.99,
+  originalPrice: 99.99,
+  rating: 4.8,
+  reviewCount: 236,
+  inStock: true,
+  isNew: false,
+  isOnSale: true,
+  image: '/products/drill.png',
+  colors: ['#111111'],
+}
+
+const base = {
+  title: 'Potencia para cada proyecto',
+  description: 'Herramientas profesionales',
+  products: [],
+}
+
+describe('StorefrontHero1 — optional editorial image', () => {
+  it('renders no editorial image when none is supplied', () => {
+    const html = renderToStaticMarkup(<StorefrontHero1 {...base} />)
+    expect(html).not.toContain('<img')
+  })
+
+  it('renders a native editorial image with its src and alt text', () => {
+    const html = renderToStaticMarkup(
+      <StorefrontHero1 {...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(
+      <StorefrontHero1 {...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(<StorefrontHero1 {...base} products={[product]} />)
+    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(
+      <StorefrontHero1
+        {...base}
+        products={[product]}
+        heroImage={{ src: '/hero-tools.png', alt: 'Taladro inalámbrico' }}
+      />,
+    )
+    expect(html).toContain('src="/hero-tools.png"')
+    expect(html).toContain('Taladro percutor')
+  })
+})
+
+describe('StorefrontHero1 — product card secondary action label', () => {
+  it('defaults the second product-card action to "Ver producto"', () => {
+    const html = renderToStaticMarkup(<StorefrontHero1 {...base} products={[product]} />)
+    expect(html).toContain('Ver producto')
+  })
+})

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

@@ -23,6 +23,11 @@ export interface FeaturedProduct {
   colors: string[]
 }
 
+export interface HeroImage {
+  src: string
+  alt: string
+}
+
 export interface StorefrontHero1Props {
   title: string
   description: string
@@ -31,6 +36,12 @@ export interface StorefrontHero1Props {
   badge?: string
   primaryCta?: CTA
   secondaryCta?: CTA
+  /**
+   * Optional editorial image. Rendered as a native `<img>` when `src` is a
+   * non-empty string; omitted entirely when absent or blank (never an empty
+   * `src`). The product grid is unaffected.
+   */
+  heroImage?: HeroImage
   onAddToCart?: (product: FeaturedProduct) => void
   onBuyNow?: (product: FeaturedProduct) => void
   onSelectColor?: (product: FeaturedProduct, index: number, color: string) => void
@@ -82,11 +93,12 @@ function StorefrontHero1({
   badge,
   primaryCta,
   secondaryCta,
+  heroImage,
   onAddToCart,
   onBuyNow,
   onSelectColor,
   addToCartLabel = 'Agregar al carrito',
-  buyNowLabel = 'Comprar ahora',
+  buyNowLabel = 'Ver producto',
   newLabel = 'Nuevo',
   outOfStockLabel = 'Agotado',
   colorsLabel = 'Colores:',
@@ -137,6 +149,13 @@ function StorefrontHero1({
               )}
             </div>
           )}
+          {heroImage && heroImage.src.trim().length > 0 ? (
+            <img
+              src={heroImage.src}
+              alt={heroImage.alt}
+              className='mt-10 aspect-video w-full rounded-lg object-cover'
+            />
+          ) : null}
         </motion.div>
 
         <div className='w-full max-w-2xl lg:mt-0'>

package/src/blocks/marketing/footers/footer-section-1.test.tsx

@@ -0,0 +1,117 @@
+import type { ReactElement, ReactNode } from 'react'
+import { renderToStaticMarkup } from 'react-dom/server'
+import { describe, expect, it, vi } from 'vitest'
+import { FooterSection1 } from './footer-section-1'
+
+const base = {
+  brandName: 'ElectroCuba',
+  linkColumns: [],
+}
+
+type SubmitHandler = (event: { preventDefault: () => void }) => void
+
+function findForm(node: ReactNode): ReactElement<{ onSubmit?: SubmitHandler }> | undefined {
+  if (node === null || node === undefined || typeof node !== 'object') return undefined
+  if (Array.isArray(node)) {
+    for (const child of node) {
+      const found = findForm(child)
+      if (found) return found
+    }
+    return undefined
+  }
+  const element = node as ReactElement<{ children?: ReactNode }>
+  if (element.type === 'form') return element as ReactElement<{ onSubmit?: SubmitHandler }>
+  return findForm(element.props?.children)
+}
+
+describe('FooterSection1 — optional brand accent', () => {
+  it('renders the brand name unchanged when no accent is supplied', () => {
+    const html = renderToStaticMarkup(<FooterSection1 {...base} />)
+    expect(html).toContain('>ElectroCuba</span>')
+    expect(html).not.toContain('text-brand-promo')
+  })
+
+  it('accents a matched trailing segment without duplicating the brand name', () => {
+    const html = renderToStaticMarkup(
+      <FooterSection1 {...base} brandAccent={{ text: 'Cuba', className: 'text-brand-promo' }} />,
+    )
+    expect(html).toContain('Electro<span class="text-brand-promo">Cuba</span>')
+    expect(html.match(/Electro/g)).toHaveLength(1)
+    expect(html.match(/Cuba/g)).toHaveLength(1)
+  })
+
+  it('accents the full brand name when the accent covers all of it', () => {
+    const html = renderToStaticMarkup(
+      <FooterSection1 {...base} brandAccent={{ text: 'ElectroCuba', className: 'text-brand-promo' }} />,
+    )
+    expect(html).toContain('<span class="text-brand-promo">ElectroCuba</span>')
+  })
+
+  it('does not accent when the segment is not a trailing match', () => {
+    const html = renderToStaticMarkup(<FooterSection1 {...base} brandAccent={{ text: 'Electro' }} />)
+    expect(html).toContain('>ElectroCuba</span>')
+  })
+})
+
+describe('FooterSection1 — newsletter requires a submit callback', () => {
+  it('renders no form, input, or button when the newsletter has no onSubmit', () => {
+    const html = renderToStaticMarkup(
+      <FooterSection1 {...base} newsletter={{ buttonLabel: 'Suscribirse', placeholder: 'tu@correo.com' }} />,
+    )
+    expect(html).not.toContain('<form')
+    expect(html).not.toContain('<input')
+    expect(html).not.toContain('<button')
+  })
+
+  it('renders the interactive form when a submit handler is supplied', () => {
+    const html = renderToStaticMarkup(
+      <FooterSection1 {...base} newsletter={{ buttonLabel: 'Suscribirse', onSubmit: () => {} }} />,
+    )
+    expect(html).toContain('<form')
+    expect(html).toContain('<input')
+    expect(html).toContain('<button')
+    expect(html).toContain('Suscribirse')
+  })
+
+  it('retains the supplied submit handler and forwards the email', () => {
+    const onSubmit = vi.fn()
+    const tree = FooterSection1({
+      ...base,
+      newsletter: { buttonLabel: 'Suscribirse', onSubmit },
+    })
+    const form = findForm(tree)
+    expect(form).toBeDefined()
+
+    vi.stubGlobal(
+      'FormData',
+      class {
+        get() {
+          return 'shopper@example.com'
+        }
+      },
+    )
+    try {
+      form?.props.onSubmit?.({ preventDefault: () => {} })
+    } finally {
+      vi.unstubAllGlobals()
+    }
+
+    expect(onSubmit).toHaveBeenCalledWith('shopper@example.com')
+  })
+})
+
+describe('FooterSection1 — optional outer surface className', () => {
+  it('keeps the default surface when className is omitted', () => {
+    const html = renderToStaticMarkup(<FooterSection1 {...base} />)
+    expect(html).toContain('bg-secondary')
+  })
+
+  it('merges a branded surface onto the footer and drops the default background', () => {
+    const html = renderToStaticMarkup(
+      <FooterSection1 {...base} className='bg-brand-nav text-brand-nav-foreground' />,
+    )
+    expect(html).toContain('bg-brand-nav')
+    expect(html).toContain('text-brand-nav-foreground')
+    expect(html).not.toContain('bg-secondary')
+  })
+})

package/src/blocks/marketing/footers/footer-section-1.tsx

@@ -3,6 +3,7 @@
 import { Input } from '../../../ui/input'
 import { Button } from '../../../ui/button'
 import { ArrowRight } from 'lucide-react'
+import { cn } from '../../../lib/utils'
 
 export interface FooterLink {
   label: string
@@ -17,24 +18,59 @@ export interface FooterLinkColumn {
 export interface FooterNewsletter {
   placeholder?: string
   buttonLabel: string
+  /**
+   * Submit handler. The interactive form (input + submit button) renders only
+   * when this is supplied. A newsletter without `onSubmit` renders no form,
+   * input, or button — never a fake form.
+   */
   onSubmit?: (email: string) => void
 }
 
+export interface BrandAccent {
+  /** Trailing segment of `brandName` to render with the accent styling. */
+  text: string
+  /** Consumer-supplied classes for the accent span (e.g. a brand color token). */
+  className?: string
+}
+
 export interface FooterSection1Props {
   brandName: string
+  /**
+   * Optional accent for a trailing segment of `brandName` (e.g. the "Cuba" in
+   * "ElectroCuba"). When omitted, or when `text` is not a trailing segment of
+   * `brandName`, the brand name renders unchanged.
+   */
+  brandAccent?: BrandAccent
   brandDescription?: string
   linkColumns: FooterLinkColumn[]
   newsletter?: FooterNewsletter
+  /**
+   * Consumer-supplied classes merged onto the outer `<footer>` as the final
+   * argument, so a semantic surface such as `bg-brand-nav
+   * text-brand-nav-foreground` overrides the default `bg-secondary`. Purely
+   * presentational: no layout, structure, or behavior changes.
+   */
+  className?: string
 }
 
 export function FooterSection1({
   brandName,
+  brandAccent,
   brandDescription,
   linkColumns,
   newsletter,
+  className,
 }: FooterSection1Props) {
+  const accentText = brandAccent?.text ?? ''
+  const hasAccent = accentText.length > 0 && brandName.endsWith(accentText)
+  const baseName = hasAccent ? brandName.slice(0, brandName.length - accentText.length) : brandName
+  const newsletterSubmit = newsletter?.onSubmit
+
   return (
-    <footer className='bg-secondary w-full py-16' aria-label='Pie de página'>
+    <footer
+      className={cn('bg-secondary w-full py-16', className)}
+      aria-label='Pie de página'
+    >
       <div className='mx-auto w-full max-w-7xl px-4 sm:px-6 lg:px-8'>
         <div className='grid grid-cols-1 gap-8 lg:grid-cols-12'>
           {/* Left Section */}
@@ -66,23 +102,24 @@ export function FooterSection1({
                 <circle cx='13.1' cy='26.1' r='1.7' stroke='currentColor' />
                 <circle cx='22.1' cy='26.1' r='1.7' stroke='currentColor' />
               </svg>
-              <span className='text-xl font-semibold'>{brandName}</span>
+              <span className='text-xl font-semibold'>
+                {baseName}
+                {hasAccent ? <span className={brandAccent?.className}>{accentText}</span> : null}
+              </span>
             </div>
             {brandDescription && (
               <p className='text-muted-foreground mb-8 max-w-sm text-sm leading-relaxed text-balance'>
                 {brandDescription}
               </p>
             )}
-            {newsletter && (
+            {newsletter && newsletterSubmit ? (
               <form
                 className='relative'
                 onSubmit={e => {
                   e.preventDefault()
-                  if (newsletter.onSubmit) {
-                    const email = new FormData(e.currentTarget).get('email')
-                    if (typeof email === 'string') {
-                      newsletter.onSubmit(email)
-                    }
+                  const email = new FormData(e.currentTarget).get('email')
+                  if (typeof email === 'string') {
+                    newsletterSubmit(email)
                   }
                 }}
               >
@@ -103,7 +140,7 @@ export function FooterSection1({
                   <ArrowRight />
                 </Button>
               </form>
-            )}
+            ) : null}
           </div>
 
           {/* Right Section */}

package/src/blocks/marketing/navbars/navbar-4-account-menu.test.tsx

@@ -0,0 +1,38 @@
+import { Children, isValidElement, type ReactNode } from 'react'
+import { describe, expect, it } from 'vitest'
+import { Navbar4AccountMenu } from './navbar-4-account-menu'
+import { DropdownMenuItem } from '../../../ui/dropdown-menu'
+
+// Inspect the block-owned menu items without mounting Radix's browser portal.
+function menuItems(node: ReactNode): Record<string, unknown>[] {
+  return Children.toArray(node).flatMap(child => {
+    if (!isValidElement<{ children?: ReactNode }>(child)) return []
+    return [
+      ...(child.type === DropdownMenuItem ? [child.props as Record<string, unknown>] : []),
+      ...menuItems(child.props.children),
+    ]
+  })
+}
+
+const user = { name: 'Ada', email: 'ada@example.test', initials: 'A' }
+
+describe('Navbar4AccountMenu consumer actions', () => {
+  it('omits help and sign-out when no consumer actions exist', () => {
+    expect(menuItems(Navbar4AccountMenu({ user }))).toEqual([])
+  })
+
+  it('dispatches sign-out to its consumer', () => {
+    let calls = 0
+    const [item] = menuItems(Navbar4AccountMenu({ user, onSignOut: () => { calls++ } }))
+    ;(item.onSelect as () => void)()
+    expect(calls).toBe(1)
+  })
+
+  it('rejects further sign-out selection while the consumer is pending', () => {
+    let calls = 0
+    const [item] = menuItems(Navbar4AccountMenu({ user, pending: true, onSignOut: () => { calls++ } }))
+    expect(item.disabled).toBe(true)
+    ;(item.onSelect as () => void)()
+    expect(calls).toBe(0)
+  })
+})

package/src/blocks/marketing/navbars/navbar-4-account-menu.tsx

@@ -15,7 +15,7 @@ import {
 export interface StoreUser {
   name: string
   email: string
-  avatar: string
+  avatar?: string
   initials: string
 }
 
@@ -33,6 +33,7 @@ export interface Navbar4AccountMenuProps {
   items?: AccountMenuItem[]
   onHelp?: () => void
   onSignOut?: () => void
+  pending?: boolean
 }
 
 const accountIcons = {
@@ -47,6 +48,7 @@ export function Navbar4AccountMenu({
   items = [],
   onHelp,
   onSignOut,
+  pending = false,
 }: Navbar4AccountMenuProps) {
   if (!user) {
     return null
@@ -58,7 +60,8 @@ export function Navbar4AccountMenu({
         <Button
           variant='ghost'
           size='icon'
-          className='rounded-full'
+          className='size-11 rounded-full'
+          disabled={pending}
           aria-label={`Account menu for ${user.name}`}
         >
           <Avatar size='sm' className='pointer-events-none size-8'>
@@ -85,11 +88,11 @@ export function Navbar4AccountMenu({
               </div>
             </div>
           </DropdownMenuLabel>
-          <DropdownMenuSeparator />
+          {items.length > 0 ? <DropdownMenuSeparator /> : null}
           {items.map(item => {
             const Icon = item.icon ? accountIcons[item.icon] : Package
             return (
-              <DropdownMenuItem key={item.href} asChild className='gap-2.5 px-2 py-2'>
+              <DropdownMenuItem key={item.href} asChild disabled={pending} className='gap-2.5 px-2 py-2'>
                 <a href={item.href}>
                   <Icon className='text-muted-foreground size-4' />
                   <span className='flex min-w-0 flex-col'>
@@ -102,17 +105,30 @@ export function Navbar4AccountMenu({
               </DropdownMenuItem>
             )
           })}
-          <DropdownMenuSeparator />
-          <DropdownMenuItem className='gap-2.5 px-2 py-2' onSelect={onHelp}>
-            <HelpCircle className='text-muted-foreground size-4' />
-            Help & support
-          </DropdownMenuItem>
-          <DropdownMenuItem variant='destructive' className='gap-2.5 px-2 py-2' onSelect={onSignOut}>
-            <LogOut className='size-4' />
-            Sign out
-          </DropdownMenuItem>
+          {onHelp || onSignOut ? <DropdownMenuSeparator /> : null}
+          {onHelp ? (
+            <DropdownMenuItem
+              disabled={pending}
+              className='gap-2.5 px-2 py-2'
+              onSelect={() => { if (!pending) onHelp() }}
+            >
+              <HelpCircle className='text-muted-foreground size-4' />
+              Help & support
+            </DropdownMenuItem>
+          ) : null}
+          {onSignOut ? (
+            <DropdownMenuItem
+              disabled={pending}
+              variant='destructive'
+              className='gap-2.5 px-2 py-2'
+              onSelect={() => { if (!pending) onSignOut() }}
+            >
+              <LogOut className='size-4' />
+              Sign out
+            </DropdownMenuItem>
+          ) : null}
         </DropdownMenuGroup>
       </DropdownMenuContent>
     </DropdownMenu>
   )
-}
+}

package/src/blocks/marketing/navbars/navbar-4-cart-sheet.test.tsx

@@ -0,0 +1,204 @@
+import { renderToStaticMarkup } from 'react-dom/server'
+import { describe, expect, it } from 'vitest'
+import { Navbar4CartSheet, type CartItem } from './navbar-4-cart-sheet'
+
+const items: CartItem[] = [
+  { id: 'line_1', name: 'Taladro', variant: 'Rojo', price: 45, qty: 2, image: 'https://cdn.example/t.jpg' },
+]
+
+const formatMoney = (money: { amount: string; currencyCode: string }) =>
+  `${money.currencyCode} ${money.amount}`
+
+const noop = () => {}
+
+describe('Navbar4CartSheet — authoritative subtotal', () => {
+  it('never renders a fake zero for a supplied but absent/malformed subtotal', () => {
+    const html = renderToStaticMarkup(
+      <Navbar4CartSheet
+        items={items}
+        onQtyChange={noop}
+        onRemove={noop}
+        subtotal={{ amount: '', currencyCode: 'USD' }}
+        formatMoney={formatMoney}
+      />,
+    )
+    expect(html).not.toContain('USD 0')
+    expect(html).toContain('—')
+  })
+
+  it('preserves a legitimate zero subtotal', () => {
+    const html = renderToStaticMarkup(
+      <Navbar4CartSheet
+        items={items}
+        onQtyChange={noop}
+        onRemove={noop}
+        subtotal={{ amount: '0', currencyCode: 'USD' }}
+        formatMoney={formatMoney}
+      />,
+    )
+    expect(html).toContain('USD 0')
+    expect(html).not.toContain('—')
+  })
+
+  it('falls back to the legacy local subtotal only when none is supplied', () => {
+    const html = renderToStaticMarkup(
+      <Navbar4CartSheet
+        items={items}
+        onQtyChange={noop}
+        onRemove={noop}
+        formatPrice={value => `$${value.toFixed(2)}`}
+      />,
+    )
+    expect(html).toContain('$90.00')
+  })
+})
+
+describe('Navbar4CartSheet — canonical line amounts', () => {
+  it('renders the canonical backend line amount in its currency, not price times qty', () => {
+    const html = renderToStaticMarkup(
+      <Navbar4CartSheet
+        items={[{ ...items[0], price: 0, lineTotal: { amount: '90.00', currencyCode: 'EUR' } }]}
+        onQtyChange={noop}
+        onRemove={noop}
+        canonical
+        formatMoney={formatMoney}
+      />,
+    )
+    expect(html).toContain('EUR 90.00')
+    expect(html).not.toContain('USD 0')
+  })
+
+  it('never falls back to a numeric amount when a canonical line amount is missing', () => {
+    const html = renderToStaticMarkup(
+      <Navbar4CartSheet
+        items={[{ ...items[0], price: 45, lineTotal: undefined }]}
+        onQtyChange={noop}
+        onRemove={noop}
+        canonical
+        formatPrice={value => `$${value.toFixed(2)}`}
+      />,
+    )
+    expect(html).not.toContain('$90.00')
+    expect(html).toContain('—')
+  })
+
+  it('shows the unavailable label for a malformed canonical line amount', () => {
+    const html = renderToStaticMarkup(
+      <Navbar4CartSheet
+        items={[{ ...items[0], lineTotal: { amount: '', currencyCode: 'USD' } }]}
+        onQtyChange={noop}
+        onRemove={noop}
+        canonical
+        formatMoney={formatMoney}
+      />,
+    )
+    expect(html).not.toContain('USD 0')
+    expect(html).toContain('—')
+  })
+
+  it('preserves legacy numeric rendering when canonical mode is omitted', () => {
+    const html = renderToStaticMarkup(
+      <Navbar4CartSheet
+        items={[{ ...items[0], lineTotal: { amount: '90.00', currencyCode: 'EUR' } }]}
+        onQtyChange={noop}
+        onRemove={noop}
+        formatPrice={value => `$${value.toFixed(2)}`}
+      />,
+    )
+    expect(html).toContain('$90.00')
+    expect(html).not.toContain('EUR 90.00')
+  })
+})
+
+describe('Navbar4CartSheet — read/mutation lifecycle', () => {
+  it('shows a pending state instead of claiming an empty cart', () => {
+    const html = renderToStaticMarkup(
+      <Navbar4CartSheet items={[]} onQtyChange={noop} onRemove={noop} state='pending' />,
+    )
+    expect(html).toContain('Actualizando el carrito')
+    expect(html).not.toContain('Your cart is empty')
+  })
+
+  it('shows a recoverable error state with its retry action', () => {
+    const html = renderToStaticMarkup(
+      <Navbar4CartSheet
+        items={items}
+        onQtyChange={noop}
+        onRemove={noop}
+        state='error'
+        errorLabel='No se pudo leer el carrito.'
+        retryLabel='Reintentar'
+        onRetry={noop}
+      />,
+    )
+    expect(html).toContain('No se pudo leer el carrito.')
+    expect(html).toContain('Reintentar')
+    expect(html).toContain('role="alert"')
+  })
+
+  it('disables mutation controls while pending', () => {
+    const html = renderToStaticMarkup(
+      <Navbar4CartSheet items={items} onQtyChange={noop} onRemove={noop} state='pending' />,
+    )
+    expect(html).toContain('aria-label="Increase quantity, Taladro"')
+    expect(html).toContain('disabled')
+  })
+})
+
+describe('Navbar4CartSheet — action availability', () => {
+  it('suppresses the checkout action when checkout is not installed', () => {
+    const html = renderToStaticMarkup(
+      <Navbar4CartSheet
+        items={items}
+        onQtyChange={noop}
+        onRemove={noop}
+        checkoutUnavailable
+        onCheckout={noop}
+      />,
+    )
+    expect(html).not.toContain('>Checkout</button>')
+    expect(html).toContain('View cart')
+  })
+
+  it('disables the checkout action while the cart is not ready', () => {
+    const html = renderToStaticMarkup(
+      <Navbar4CartSheet items={items} onQtyChange={noop} onRemove={noop} checkoutDisabled onCheckout={noop} />,
+    )
+    expect(html).toContain('>Checkout</button>')
+    expect(html).toMatch(/disabled[^>]*>Checkout<\/button>/)
+  })
+
+  it('suppresses the review action when the cart view is not installed', () => {
+    const html = renderToStaticMarkup(
+      <Navbar4CartSheet
+        items={items}
+        onQtyChange={noop}
+        onRemove={noop}
+        viewCartUnavailable
+        onViewCart={noop}
+      />,
+    )
+    expect(html).not.toContain('View cart')
+  })
+})
+
+describe('Navbar4CartSheet — accessibility', () => {
+  it('names the line mutation controls', () => {
+    const html = renderToStaticMarkup(
+      <Navbar4CartSheet items={items} onQtyChange={noop} onRemove={noop} />,
+    )
+    expect(html).toMatch(/aria-label="[^"]*(Increase|Decrease|Aumentar|Disminuir)[^"]*"/)
+    expect(html).toMatch(/aria-label="[^"]*(Remove|Quitar)[^"]*"/)
+  })
+
+  it('announces pending reads politely and errors as an alert', () => {
+    const pending = renderToStaticMarkup(
+      <Navbar4CartSheet items={[]} onQtyChange={noop} onRemove={noop} state='pending' />,
+    )
+    expect(pending).toMatch(/role="status"[^>]*aria-live="polite"/)
+    const error = renderToStaticMarkup(
+      <Navbar4CartSheet items={items} onQtyChange={noop} onRemove={noop} state='error' />,
+    )
+    expect(error).toMatch(/role="alert"/)
+  })
+})