@thorprovider/blocks 1.0.0 → 2.0.0

package/src/blocks/e-commerce/category-filters/{category-filter-2.test.tsx → category-listing.test.tsx}

@@ -1,19 +1,29 @@
 import type { ReactElement, ReactNode } from 'react'
 import { renderToStaticMarkup } from 'react-dom/server'
 import { describe, expect, it, vi } from 'vitest'
+import type { ProductPresentation } from '../../../lib/contracts'
 import {
-  CategoryFilter2,
-  CategoryFilter2StatusView,
+  CategoryListing,
+  CategoryListingStatusView,
   buildFilterChange,
   reconcileSearchDraft,
   toggleFilterValue,
-  type CategoryFilter2ActiveFilter,
-  type FilterProduct,
-} from './category-filter-2'
-
-const products: FilterProduct[] = [
-  { id: 'pantalla-samsung-a54', name: 'Pantalla Samsung Galaxy A54 OLED', price: '$49.99', image: '/demo/pantalla.svg' },
-  { id: 'bateria-iphone-13', name: 'Batería iPhone 13', price: '$29.99' },
+  type CategoryListingActiveFilter,
+  type CategoryListingProps,
+} from './category-listing'
+
+const products: ProductPresentation[] = [
+  {
+    id: 'pantalla-samsung-a54',
+    title: 'Pantalla Samsung Galaxy A54 OLED',
+    image: '/demo/pantalla.svg',
+    price: { amount: '49.99', currencyCode: 'USD' },
+  },
+  {
+    id: 'bateria-iphone-13',
+    title: 'Batería iPhone 13',
+    price: { amount: '29.99', currencyCode: 'USD' },
+  },
 ]
 
 const advertisedSorts = [
@@ -22,7 +32,7 @@ const advertisedSorts = [
   { value: 'newest', label: 'Más recientes' },
 ]
 
-const activeChips: CategoryFilter2ActiveFilter[] = [
+const activeChips: CategoryListingActiveFilter[] = [
   { id: 'text', kind: 'text', label: 'pantalla', params: ['q'], value: 'pantalla' },
   { id: 'category:pantallas', kind: 'category', label: 'Pantallas', params: ['categories'], value: 'pantallas' },
   { id: 'price', kind: 'price', label: '10 – 40', params: ['priceMin', 'priceMax'] },
@@ -30,8 +40,29 @@ const activeChips: CategoryFilter2ActiveFilter[] = [
 
 const countOccurrences = (html: string, needle: string) => html.split(needle).length - 1
 
+function render(overrides: Partial<CategoryListingProps> = {}): string {
+  return renderToStaticMarkup(
+    <CategoryListing
+      products={products}
+      pagination={[]}
+      status={{ state: 'ready' }}
+      activeFilters={[]}
+      searchValue=''
+      selectedCategories={[]}
+      selectedCollections={[]}
+      selectedSort='featured'
+      selectedPage={1}
+      selectedPageSize={10}
+      showSearch={false}
+      showFilters
+      showSort
+      {...overrides}
+    />,
+  )
+}
+
 /** Find every element whose prop `key` equals `value`, walking the returned
- *  element tree (no DOM needed — `CategoryFilter2StatusView` is hooks-free). */
+ *  element tree (no DOM needed — `CategoryListingStatusView` is hooks-free). */
 function findAllByProp(
   node: ReactNode,
   key: string,
@@ -61,173 +92,232 @@ function findAllByProp(
   return found
 }
 
-describe('CategoryFilter2 — controlled canonical query', () => {
+describe('CategoryListing — controlled canonical query', () => {
   it('renders the query-selected search, category, sort and page values', () => {
-    const html = renderToStaticMarkup(
-      <CategoryFilter2
-        products={products}
-        categories={[
-          { id: 'pantallas', label: 'Pantallas' },
-          { id: 'baterias', label: 'Baterías' },
-        ]}
-        sortOptions={advertisedSorts}
-        pagination={[1, 2, 3]}
-        showSearch
-        searchValue='pantalla'
-        selectedCategories={['pantallas']}
-        selectedSort='name'
-        selectedPage={2}
-      />,
-    )
+    const html = render({
+      categories: [
+        { id: 'pantallas', label: 'Pantallas' },
+        { id: 'baterias', label: 'Baterías' },
+      ],
+      sortOptions: advertisedSorts,
+      pagination: [1, 2, 3],
+      showSearch: true,
+      searchValue: 'pantalla',
+      selectedCategories: ['pantallas'],
+      selectedSort: 'name',
+      selectedPage: 2,
+    })
 
     expect(html).toContain('value="pantalla"')
-    // The sort control renders (its options are portaled client-side, so the
-    // advertised label set is asserted by the mapper test instead).
     expect(html).toContain('aria-label="Ordenar por"')
     expect(html).toContain('aria-checked="true"')
     expect(html).toContain('aria-current="page"')
-    // The selected page is page 2; only one link is active.
     expect(countOccurrences(html, 'aria-current="page"')).toBe(1)
   })
 
   it('hides the search control by default and shows it when requested', () => {
-    const hidden = renderToStaticMarkup(<CategoryFilter2 products={products} sortOptions={advertisedSorts} />)
+    const hidden = render()
     expect(hidden).not.toContain('type="search"')
 
-    const shown = renderToStaticMarkup(<CategoryFilter2 products={products} sortOptions={advertisedSorts} showSearch />)
+    const shown = render({ showSearch: true })
     expect(shown).toContain('type="search"')
     expect(shown).toContain('aria-label="Buscar"')
   })
 
   it('renders collection controls when collections are supplied', () => {
-    const html = renderToStaticMarkup(
-      <CategoryFilter2
-        products={products}
-        collections={[{ id: 'ofertas', label: 'Ofertas' }]}
-        selectedCollections={['ofertas']}
-      />,
-    )
+    const html = render({
+      collections: [{ id: 'ofertas', label: 'Ofertas' }],
+      selectedCollections: ['ofertas'],
+    })
     expect(html).toContain('Colección')
     expect(html).toContain('Ofertas')
     expect(html).toContain('aria-checked="true"')
   })
+
+  it('does not own private query state: the controlled values always win', () => {
+    const html = render({ selectedCategories: ['pantallas'], categories: [{ id: 'pantallas', label: 'Pantallas' }] })
+    expect(html).toContain('aria-checked="true"')
+
+    const cleared = render({ selectedCategories: [], categories: [{ id: 'pantallas', label: 'Pantallas' }] })
+    expect(cleared).not.toContain('aria-checked="true"')
+  })
 })
 
-describe('CategoryFilter2 — no fabricated price or sort choices', () => {
+describe('CategoryListing — no fabricated price or sort choices', () => {
   it('omits the price control without a real backend range', () => {
-    const html = renderToStaticMarkup(<CategoryFilter2 products={products} sortOptions={advertisedSorts} />)
-    expect(html).not.toContain('Rango de precio')
+    expect(render({ sortOptions: advertisedSorts })).not.toContain('Rango de precio')
   })
 
   it('shows the price control only from a real range', () => {
-    const html = renderToStaticMarkup(
-      <CategoryFilter2 products={products} priceRange={{ min: 0, max: 100, step: 5 }} selectedPriceRange={[10, 40]} />,
-    )
+    const html = render({
+      priceRange: { min: 0, max: 100, step: 5 },
+      selectedPriceRange: [10, 40],
+    })
     expect(html).toContain('Rango de precio')
     expect(html).toContain('value="10"')
     expect(html).toContain('value="40"')
   })
 
-  it('renders the sort control only when advertised options are supplied', () => {
-    const withOptions = renderToStaticMarkup(<CategoryFilter2 products={products} sortOptions={advertisedSorts} />)
-    expect(withOptions).toContain('aria-label="Ordenar por"')
-
-    const withoutOptions = renderToStaticMarkup(<CategoryFilter2 products={products} />)
-    expect(withoutOptions).not.toContain('aria-label="Ordenar por"')
+  it('hides the price control when showPrice is false even with a real range', () => {
+    const html = render({
+      showPrice: false,
+      priceRange: { min: 0, max: 100, step: 5 },
+      selectedPriceRange: [10, 40],
+    })
+    expect(html).not.toContain('Rango de precio')
   })
 
-  it('renders no sort control when no options are advertised', () => {
-    const html = renderToStaticMarkup(<CategoryFilter2 products={products} />)
-    expect(html).not.toContain('Ordenar por')
+  it('renders the sort control only when advertised options are supplied', () => {
+    expect(render({ sortOptions: advertisedSorts })).toContain('aria-label="Ordenar por"')
+    expect(render()).not.toContain('aria-label="Ordenar por"')
   })
 })
 
-describe('CategoryFilter2 — provider-paged products are not re-paginated', () => {
+describe('CategoryListing — provider-paged products are not re-paginated', () => {
   it('renders exactly the supplied page of products with backend page links', () => {
-    const html = renderToStaticMarkup(
-      <CategoryFilter2 products={products} pagination={[1, 2, 3]} selectedPage={2} sortOptions={advertisedSorts} />,
-    )
+    const html = render({ pagination: [1, 2, 3], selectedPage: 2, sortOptions: advertisedSorts })
     expect(html).toContain('Pantalla Samsung Galaxy A54 OLED')
     expect(html).toContain('Batería iPhone 13')
     expect(countOccurrences(html, 'data-slot="pagination-link"')).toBe(3)
-    // The second product has no image; the block omits src rather than emitting "".
     expect(html).not.toContain('src=""')
   })
 })
 
-describe('CategoryFilter2 — product cards link and placeholder (tasks 3.1/3.2)', () => {
-  it('renders each product card as a real anchor when href is present', () => {
-    const linked: FilterProduct[] = [
-      { id: 'p1', name: 'Pantalla', price: '$49.99', href: '/productos/pantalla-samsung-a54' },
-    ]
-    const html = renderToStaticMarkup(<CategoryFilter2 products={linked} />)
-    expect(html).toMatch(/<a[^>]*href="\/productos\/pantalla-samsung-a54"/)
-    expect(html).toContain('Pantalla')
-    // The card is not rendered as an article when it is a link.
+describe('CategoryListing — canonical ProductCard reuse', () => {
+  it('renders results through the canonical card, not private card markup', () => {
+    const html = render()
+    expect(countOccurrences(html, 'data-slot="card"')).toBe(products.length)
     expect(html).not.toContain('<article')
-  })
-
-  it('keeps the onClick path (article, no anchor) when href is absent', () => {
-    const html = renderToStaticMarkup(
-      <CategoryFilter2 products={products} onProductClick={() => {}} />,
-    )
-    expect(html).not.toMatch(/<a[^>]*href="\/productos\//)
-    expect(html).toContain('<article')
-  })
-
-  it('links only the cards that carry an href', () => {
-    const mixed: FilterProduct[] = [
-      { id: 'p1', name: 'Pantalla', price: '$49.99', href: '/productos/p1' },
-      { id: 'p2', name: 'Batería', price: '$29.99' },
-    ]
-    const html = renderToStaticMarkup(<CategoryFilter2 products={mixed} />)
-    expect(countOccurrences(html, '<a ')).toBe(1)
-    expect(html).toMatch(/<a[^>]*href="\/productos\/p1"/)
-    expect(html).toContain('Batería')
+    expect(html).not.toContain('data-slot="category-listing-product-card"')
   })
 
   it('renders a neutral placeholder and no <img> when the image is absent', () => {
-    const html = renderToStaticMarkup(<CategoryFilter2 products={products} />)
+    const html = render()
     expect(html).toContain('data-slot="product-image-placeholder"')
-    // The product without an image never emits an <img> without src.
     expect(html).not.toContain('src=""')
-    // One product has an image (Pantalla), one does not (Batería): exactly one img.
     expect(countOccurrences(html, '<img')).toBe(1)
     expect(html).toMatch(/<img[^>]*src="\/demo\/pantalla.svg"/)
   })
+
+  it('does not render an inert add-to-cart control when the listing owns no cart action', () => {
+    const html = render()
+    expect(html).not.toContain('Agregar al carrito')
+  })
+})
+
+describe('CategoryListing — bounded presentations', () => {
+  it('renders the same products and controls in both presentations', () => {
+    for (const presentation of ['sidebar', 'toolbar'] as const) {
+      const html = render({
+        presentation,
+        categories: [{ id: 'pantallas', label: 'Pantallas' }],
+        sortOptions: advertisedSorts,
+        searchValue: 'pantalla',
+        showSearch: true,
+        selectedPage: 2,
+        pagination: [1, 2],
+      })
+      expect(html).toContain('Pantalla Samsung Galaxy A54 OLED')
+      expect(html).toContain('Batería iPhone 13')
+      expect(html).toContain('value="pantalla"')
+      expect(html).toContain('aria-label="Ordenar por"')
+      expect(html).toContain('aria-current="page"')
+    }
+  })
+
+  it('keeps the persistent sidebar only in the sidebar presentation', () => {
+    expect(render({ presentation: 'sidebar' })).toContain('<aside')
+    expect(render({ presentation: 'toolbar' })).not.toContain('<aside')
+  })
+
+  it('renders the toolbar filter trigger and sort sheet controls on mobile', () => {
+    const html = render({
+      presentation: 'toolbar',
+      sortOptions: advertisedSorts,
+      selectedCategories: ['pantallas'],
+      categories: [{ id: 'pantallas', label: 'Pantallas' }],
+    })
+    expect(html).toContain('Filtros')
+    expect(html).toContain('aria-label="Ordenar por"')
+    expect(html).toContain('aria-expanded="false"')
+  })
 })
 
-describe('CategoryFilter2 — emitted changes (pure reducer)', () => {
+describe('CategoryListing — generic facets and honest counts', () => {
+  const facetGroup = {
+    id: 'connectivity',
+    label: 'Conectividad',
+    options: [
+      { value: 'wifi', label: 'Wi-Fi', count: 12 },
+      { value: 'bluetooth', label: 'Bluetooth', count: 0 },
+      { value: 'wired', label: 'Cable', count: Number.NaN },
+      { value: 'other', label: 'Otro', count: -3 },
+    ],
+  }
+
+  it('renders generic facet groups with their real counts', () => {
+    const html = render({
+      facets: [facetGroup],
+      selectedFacets: { connectivity: ['wifi'] },
+    })
+    expect(html).toContain('data-slot="facet-group"')
+    expect(html).toContain('Conectividad')
+    expect(html).toContain('Wi-Fi')
+    expect(html).toContain('aria-checked="true"')
+  })
+
+  it('preserves a real zero count and omits invalid counts', () => {
+    const html = render({ facets: [facetGroup] })
+    const counts = html.split('data-slot="facet-count"').slice(1)
+    expect(counts).toHaveLength(2)
+    expect(counts[0]).toContain('12')
+    expect(counts[1]).toContain('0')
+  })
+
+  it('renders no facet chrome without provider metadata', () => {
+    const html = render()
+    expect(html).not.toContain('data-slot="facet-group"')
+    expect(html).not.toContain('facet-count')
+  })
+
+  it('omits a supplied group with no options', () => {
+    const html = render({ facets: [{ id: 'empty', label: 'Vacío', options: [] }] })
+    expect(html).not.toContain('data-facet-id="empty"')
+  })
+})
+
+describe('CategoryListing — emitted changes (pure reducer)', () => {
   it('adds and removes a selection without duplicates', () => {
     expect(toggleFilterValue([], 'a', true)).toEqual(['a'])
     expect(toggleFilterValue(['a'], 'b', true)).toEqual(['a', 'b'])
     expect(toggleFilterValue(['a', 'b'], 'a', false)).toEqual(['b'])
   })
 
-  it('emits the canonical filter change including collections', () => {
+  it('emits the absolute canonical filter change including facets and price', () => {
     expect(
       buildFilterChange({
         categories: ['pantallas'],
         collections: ['ofertas'],
         priceRange: [10, 40],
-        size: null,
-        color: null,
+        facets: { connectivity: ['wifi'] },
       }),
     ).toEqual({
       categories: ['pantallas'],
       collections: ['ofertas'],
       priceRange: [10, 40],
-      size: null,
-      color: null,
+      facets: { connectivity: ['wifi'] },
+    })
+  })
+
+  it('omits price and facets when the host supplied none', () => {
+    expect(buildFilterChange({ categories: [], collections: [] })).toEqual({
+      categories: [],
+      collections: [],
     })
   })
 })
 
-describe('CategoryFilter2 — controlled search draft (E2 task 8.2 corrective)', () => {
-  // Simulates the real client loop: the shopper types into the controlled input
-  // (mutating the draft immediately and emitting the full value), while the
-  // URL-backed `searchValue` prop arrives later from the server. The draft must
-  // keep every typed character and never be reverted by a stale response.
+describe('CategoryListing — controlled search draft', () => {
   function type(seq: string) {
     let draft = ''
     let prevSearchValue: string | undefined = ''
@@ -243,12 +333,8 @@ describe('CategoryFilter2 — controlled search draft (E2 task 8.2 corrective)',
       const before = draft
       draft += ch
       emitted.push(draft)
-      // A fast server round-trip can deliver the response to the PREVIOUS
-      // keystroke after the shopper has already typed past it; each delivery
-      // must leave the draft intact.
       deliver(before)
     }
-    // The final server response reflects the whole committed query.
     deliver(seq)
     return { draft, emitted }
   }
@@ -260,21 +346,21 @@ describe('CategoryFilter2 — controlled search draft (E2 task 8.2 corrective)',
   })
 
   it('ignores a stale (unchanged) response that would revert the draft', () => {
-    expect(
-      reconcileSearchDraft({ searchValue: 'al', prevSearchValue: 'al', draft: 'alp' }),
-    ).toBeNull()
+    expect(reconcileSearchDraft({ searchValue: 'al', prevSearchValue: 'al', draft: 'alp' })).toBeNull()
   })
 
   it('records a stale older response without reverting the draft', () => {
-    expect(
-      reconcileSearchDraft({ searchValue: 'a', prevSearchValue: 'al', draft: 'alp' }),
-    ).toEqual({ draft: 'alp', prevSearchValue: 'a' })
+    expect(reconcileSearchDraft({ searchValue: 'a', prevSearchValue: 'al', draft: 'alp' })).toEqual({
+      draft: 'alp',
+      prevSearchValue: 'a',
+    })
   })
 
   it('adopts an external navigation value when no local edit is pending', () => {
-    expect(
-      reconcileSearchDraft({ searchValue: 'beta', prevSearchValue: '', draft: '' }),
-    ).toEqual({ draft: 'beta', prevSearchValue: 'beta' })
+    expect(reconcileSearchDraft({ searchValue: 'beta', prevSearchValue: '', draft: '' })).toEqual({
+      draft: 'beta',
+      prevSearchValue: 'beta',
+    })
   })
 
   it('does not adopt while an uncommitted edit is pending', () => {
@@ -282,95 +368,76 @@ describe('CategoryFilter2 — controlled search draft (E2 task 8.2 corrective)',
       reconcileSearchDraft({ searchValue: 'other', prevSearchValue: 'alp', draft: 'alpha' }),
     ).toEqual({ draft: 'alpha', prevSearchValue: 'other' })
   })
-
-  it('is a no-op for an unchanged prop', () => {
-    expect(reconcileSearchDraft({ searchValue: 'q', prevSearchValue: 'q', draft: 'q' })).toBeNull()
-  })
 })
 
-describe('CategoryFilter2 — observable listing states (task 4.5)', () => {
+describe('CategoryListing — observable listing states', () => {
   it('shows skeleton placeholders while loading instead of products', () => {
-    const html = renderToStaticMarkup(<CategoryFilter2 products={products} status={{ state: 'loading' }} />)
+    const html = render({ status: { state: 'loading' } })
     expect(html).toContain('data-slot="skeleton"')
     expect(html).toContain('aria-busy="true"')
     expect(html).not.toContain('Pantalla Samsung Galaxy A54 OLED')
   })
 
   it('renders a clearable empty state, distinct from an error', () => {
-    const html = renderToStaticMarkup(
-      <CategoryFilter2 products={[]} status={{ state: 'empty' }} onClearFilters={() => {}} />,
-    )
+    const html = render({ products: [], status: { state: 'empty' }, onClearFilters: () => {} })
     expect(html).toContain('Sin resultados')
     expect(html).toContain('Limpiar filtros')
     expect(html).not.toContain('Reintentar')
   })
 
   it('renders an invalid-query repair state naming the invalid fields', () => {
-    const html = renderToStaticMarkup(
-      <CategoryFilter2
-        products={[]}
-        status={{ state: 'invalid-query', error: { code: 'invalid-query', fields: ['page'] } }}
-        onRepair={() => {}}
-      />,
-    )
+    const html = render({
+      products: [],
+      status: { state: 'invalid-query', error: { code: 'invalid-query', fields: ['page'] } },
+      onRepair: () => {},
+    })
     expect(html).toContain('Consulta no válida')
     expect(html).toContain('page')
     expect(html).toContain('Corregir búsqueda')
   })
 
   it('renders an unsupported-query repair state naming the unsupported fields', () => {
-    const html = renderToStaticMarkup(
-      <CategoryFilter2
-        products={[]}
-        status={{ state: 'unsupported-query', error: { code: 'unsupported-query', fields: ['priceMin'] } }}
-        onRepair={() => {}}
-      />,
-    )
+    const html = render({
+      products: [],
+      status: { state: 'unsupported-query', error: { code: 'unsupported-query', fields: ['priceMin'] } },
+      onRepair: () => {},
+    })
     expect(html).toContain('Filtro no disponible')
     expect(html).toContain('priceMin')
   })
 
   it('renders an unmounted-capability repair state naming the missing feature', () => {
-    const html = renderToStaticMarkup(
-      <CategoryFilter2
-        products={[]}
-        status={{
-          state: 'unmounted-capability',
-          error: { code: 'unmounted-capability', fields: ['q'], feature: 'catalog-search' },
-        }}
-        onRepair={() => {}}
-      />,
-    )
+    const html = render({
+      products: [],
+      status: {
+        state: 'unmounted-capability',
+        error: { code: 'unmounted-capability', fields: ['q'], feature: 'catalog-search' },
+      },
+      onRepair: () => {},
+    })
     expect(html).toContain('Función no disponible')
     expect(html).toContain('catalog-search')
   })
 
   it('renders an error state with a retry action and the failure message', () => {
-    const html = renderToStaticMarkup(
-      <CategoryFilter2 products={[]} status={{ state: 'error', message: 'Network down' }} onRetry={() => {}} />,
-    )
+    const html = render({ products: [], status: { state: 'error', message: 'Network down' }, onRetry: () => {} })
     expect(html).toContain('Network down')
     expect(html).toContain('Reintentar')
   })
 
   it('renders an accessible removable chip per active filter', () => {
-    const html = renderToStaticMarkup(<CategoryFilter2 products={products} activeFilters={activeChips} />)
+    const html = render({ activeFilters: activeChips })
     expect(html).toContain('aria-label="Filtros activos"')
     expect(html).toContain('pantalla')
     expect(html).toContain('Pantallas')
     expect(html).toContain('aria-label="Quitar filtro: Pantallas"')
   })
-
-  it('keeps the legacy ready surface when no status is supplied', () => {
-    const html = renderToStaticMarkup(<CategoryFilter2 products={products} sortOptions={advertisedSorts} />)
-    expect(html).toContain('Pantalla Samsung Galaxy A54 OLED')
-  })
 })
 
-describe('CategoryFilter2StatusView — state and chip interactions (task 4.5)', () => {
+describe('CategoryListingStatusView — state and chip interactions', () => {
   it('removes exactly the clicked chip and preserves the others', () => {
     const onRemoveFilter = vi.fn()
-    const tree = CategoryFilter2StatusView({
+    const tree = CategoryListingStatusView({
       status: { state: 'ready' },
       activeFilters: activeChips,
       onRemoveFilter,
@@ -388,7 +455,7 @@ describe('CategoryFilter2StatusView — state and chip interactions (task 4.5)',
 
   it('repairs by emitting the exact bad fields of the typed error', () => {
     const onRepair = vi.fn()
-    const tree = CategoryFilter2StatusView({
+    const tree = CategoryListingStatusView({
       status: {
         state: 'unsupported-query',
         error: { code: 'unsupported-query', fields: ['priceMin', 'inStock'], message: 'Unsupported' },
@@ -405,7 +472,7 @@ describe('CategoryFilter2StatusView — state and chip interactions (task 4.5)',
 
   it('retries through the callback without emitting any query mutation', () => {
     const onRetry = vi.fn()
-    const tree = CategoryFilter2StatusView({ status: { state: 'error' }, onRetry })
+    const tree = CategoryListingStatusView({ status: { state: 'error' }, onRetry })
 
     const retry = findAllByProp(tree, 'data-action', 'retry')
     retry[0].props.onClick?.()
@@ -416,7 +483,7 @@ describe('CategoryFilter2StatusView — state and chip interactions (task 4.5)',
 
   it('clears active filters from the empty state', () => {
     const onClearFilters = vi.fn()
-    const tree = CategoryFilter2StatusView({
+    const tree = CategoryListingStatusView({
       status: { state: 'empty' },
       activeFilters: activeChips,
       onClearFilters,
@@ -430,56 +497,44 @@ describe('CategoryFilter2StatusView — state and chip interactions (task 4.5)',
   })
 
   it('offers no repair/retry action when the host binds no callback', () => {
-    const tree = CategoryFilter2StatusView({
+    const tree = CategoryListingStatusView({
       status: { state: 'invalid-query', error: { code: 'invalid-query', fields: ['page'] } },
     })
     expect(findAllByProp(tree, 'data-action', 'repair')).toHaveLength(0)
   })
 })
 
-describe('CategoryFilter2 — keyboard, labels and mobile sheet (task 4.6)', () => {
-  it('renders pagination as native buttons (keyboard-operable) with aria-current, not href-less anchors', () => {
-    const html = renderToStaticMarkup(
-      <CategoryFilter2 products={products} pagination={[1, 2, 3]} selectedPage={2} sortOptions={advertisedSorts} />,
-    )
-    // A bare `<a>` without href is not focusable and not a link role; the control
-    // must be a native button so it is reachable and operable by keyboard.
+describe('CategoryListing — keyboard, labels and mobile controls', () => {
+  it('renders pagination as native buttons with aria-current, not href-less anchors', () => {
+    const html = render({ pagination: [1, 2, 3], selectedPage: 2 })
     expect(html).toMatch(/<button[^>]*data-slot="pagination-link"/)
     expect(html).not.toMatch(/<a[^>]*data-slot="pagination-link"/)
     expect(countOccurrences(html, 'data-slot="pagination-link"')).toBe(3)
     expect(countOccurrences(html, 'aria-current="page"')).toBe(1)
   })
 
-  it('shows no pagination and no product count when the backend supplies no total (task 7.6)', () => {
-    // `pagination` is derived by the runtime seam from the backend `total`; an
-    // absent total yields `[]`, and the block renders no page links and no
-    // manufactured count.
-    const html = renderToStaticMarkup(
-      <CategoryFilter2 products={products} pagination={[]} sortOptions={advertisedSorts} />,
-    )
+  it('shows no pagination and no product count when the backend supplies no total', () => {
+    const html = render({ pagination: [] })
     expect(countOccurrences(html, 'data-slot="pagination-link"')).toBe(0)
     expect(html).not.toContain('aria-label="Paginación"')
     expect(html).not.toMatch(/\d+\s*(producto|resultado)/i)
   })
 
   it('wires the mobile filter trigger as a dialog trigger so focus can return on close', () => {
-    const html = renderToStaticMarkup(<CategoryFilter2 products={products} />)
+    const html = render()
     expect(html).toContain('aria-haspopup="dialog"')
     expect(html).toContain('aria-expanded="false"')
     expect(html).toMatch(/<button[^>]*lg:hidden[^>]*>[\s\S]*Filtros/)
   })
 
   it('labels the search, sort, view and chip controls', () => {
-    const html = renderToStaticMarkup(
-      <CategoryFilter2
-        products={products}
-        sortOptions={advertisedSorts}
-        viewOptions={[10, 25]}
-        showSearch
-        searchValue='pantalla'
-        activeFilters={activeChips}
-      />,
-    )
+    const html = render({
+      sortOptions: advertisedSorts,
+      viewOptions: [10, 25],
+      showSearch: true,
+      searchValue: 'pantalla',
+      activeFilters: activeChips,
+    })
     expect(html).toContain('aria-label="Buscar"')
     expect(html).toContain('aria-label="Ordenar por"')
     expect(html).toContain('aria-label="Ver"')
@@ -488,14 +543,11 @@ describe('CategoryFilter2 — keyboard, labels and mobile sheet (task 4.6)', ()
   })
 
   it('labels the filter-panel inputs and checkboxes it renders', () => {
-    const html = renderToStaticMarkup(
-      <CategoryFilter2
-        products={products}
-        categories={[{ id: 'pantallas', label: 'Pantallas' }]}
-        collections={[{ id: 'ofertas', label: 'Ofertas' }]}
-        priceRange={{ min: 0, max: 100, step: 5 }}
-      />,
-    )
+    const html = render({
+      categories: [{ id: 'pantallas', label: 'Pantallas' }],
+      collections: [{ id: 'ofertas', label: 'Ofertas' }],
+      priceRange: { min: 0, max: 100, step: 5 },
+    })
     expect(html).toContain('>Mínimo</label>')
     expect(html).toContain('>Máximo</label>')
     expect(html).toMatch(/<label[^>]*for="[^"]*"[^>]*>\s*Pantallas\s*<\/label>/)
@@ -503,11 +555,47 @@ describe('CategoryFilter2 — keyboard, labels and mobile sheet (task 4.6)', ()
   })
 
   it('adds no positive tabindex and keeps search and pagination in the natural tab order', () => {
-    const html = renderToStaticMarkup(
-      <CategoryFilter2 products={products} sortOptions={advertisedSorts} pagination={[1, 2]} showSearch />,
-    )
+    const html = render({ sortOptions: advertisedSorts, pagination: [1, 2], showSearch: true })
     expect(html).not.toMatch(/tabindex="[1-9]/)
     expect(html).not.toMatch(/<input[^>]*type="search"[^>]*tabindex="-1"/)
     expect(html).not.toMatch(/<button[^>]*data-slot="pagination-link"[^>]*tabindex="-1"/)
   })
 })
+
+describe('CategoryListing — one contract, two sectors', () => {
+  it('renders home goods through the same contract with its own real facets and range', () => {
+    const homeGoods = render({
+      products: [
+        {
+          id: 'jarron',
+          title: 'Jarrón de cerámica',
+          price: { amount: '42.00', currencyCode: 'USD' },
+        },
+      ],
+      categories: [{ id: 'decoracion', label: 'Decoración' }],
+      collections: [{ id: 'hogar', label: 'Hogar' }],
+      priceRange: { min: 0, max: 200, step: 5 },
+      selectedPriceRange: [0, 200],
+      facets: [
+        {
+          id: 'material',
+          label: 'Material',
+          options: [
+            { value: 'ceramic', label: 'Cerámica', count: 2 },
+            { value: 'wood', label: 'Madera', count: 0 },
+          ],
+        },
+      ],
+      showSearch: false,
+    })
+
+    expect(homeGoods).toContain('Jarrón de cerámica')
+    expect(homeGoods).toContain('Decoración')
+    expect(homeGoods).toContain('Hogar')
+    expect(homeGoods).toContain('Material')
+    expect(homeGoods).toContain('Madera')
+    expect(homeGoods).toContain('data-slot="facet-count"')
+    expect(homeGoods).not.toContain('Auriculares')
+    expect(homeGoods).not.toContain('Condición')
+  })
+})