@thorprovider/blocks 2.0.0 → 3.0.0

package/src/blocks/e-commerce/category-filters/category-listing.test.tsx

@@ -1,601 +0,0 @@
-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 {
-  CategoryListing,
-  CategoryListingStatusView,
-  buildFilterChange,
-  reconcileSearchDraft,
-  toggleFilterValue,
-  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 = [
-  { value: 'featured', label: 'Destacados' },
-  { value: 'name', label: 'Nombre' },
-  { value: 'newest', label: 'Más recientes' },
-]
-
-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'] },
-]
-
-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 — `CategoryListingStatusView` is hooks-free). */
-function findAllByProp(
-  node: ReactNode,
-  key: string,
-  value: string,
-): ReactElement<{ children?: ReactNode; onClick?: () => void; [prop: string]: unknown }>[] {
-  const found: ReactElement<{
-    children?: ReactNode
-    onClick?: () => void
-    [prop: string]: unknown
-  }>[] = []
-  const walk = (current: ReactNode): void => {
-    if (current === null || current === undefined) return
-    if (Array.isArray(current)) {
-      current.forEach(walk)
-      return
-    }
-    if (typeof current !== 'object') return
-    const element = current as ReactElement<{
-      children?: ReactNode
-      onClick?: () => void
-      [prop: string]: unknown
-    }>
-    if (element.props && element.props[key] === value) found.push(element)
-    walk(element.props?.children)
-  }
-  walk(node)
-  return found
-}
-
-describe('CategoryListing — controlled canonical query', () => {
-  it('renders the query-selected search, category, sort and page values', () => {
-    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"')
-    expect(html).toContain('aria-label="Ordenar por"')
-    expect(html).toContain('aria-checked="true"')
-    expect(html).toContain('aria-current="page"')
-    expect(countOccurrences(html, 'aria-current="page"')).toBe(1)
-  })
-
-  it('hides the search control by default and shows it when requested', () => {
-    const hidden = render()
-    expect(hidden).not.toContain('type="search"')
-
-    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 = 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('CategoryListing — no fabricated price or sort choices', () => {
-  it('omits the price control without a real backend range', () => {
-    expect(render({ sortOptions: advertisedSorts })).not.toContain('Rango de precio')
-  })
-
-  it('shows the price control only from a real range', () => {
-    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('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 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('CategoryListing — provider-paged products are not re-paginated', () => {
-  it('renders exactly the supplied page of products with backend page links', () => {
-    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)
-    expect(html).not.toContain('src=""')
-  })
-})
-
-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')
-    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 = render()
-    expect(html).toContain('data-slot="product-image-placeholder"')
-    expect(html).not.toContain('src=""')
-    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('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 absolute canonical filter change including facets and price', () => {
-    expect(
-      buildFilterChange({
-        categories: ['pantallas'],
-        collections: ['ofertas'],
-        priceRange: [10, 40],
-        facets: { connectivity: ['wifi'] },
-      }),
-    ).toEqual({
-      categories: ['pantallas'],
-      collections: ['ofertas'],
-      priceRange: [10, 40],
-      facets: { connectivity: ['wifi'] },
-    })
-  })
-
-  it('omits price and facets when the host supplied none', () => {
-    expect(buildFilterChange({ categories: [], collections: [] })).toEqual({
-      categories: [],
-      collections: [],
-    })
-  })
-})
-
-describe('CategoryListing — controlled search draft', () => {
-  function type(seq: string) {
-    let draft = ''
-    let prevSearchValue: string | undefined = ''
-    const emitted: string[] = []
-    const deliver = (searchValue: string) => {
-      const next = reconcileSearchDraft({ searchValue, prevSearchValue, draft })
-      if (next) {
-        draft = next.draft
-        prevSearchValue = next.prevSearchValue
-      }
-    }
-    for (const ch of seq) {
-      const before = draft
-      draft += ch
-      emitted.push(draft)
-      deliver(before)
-    }
-    deliver(seq)
-    return { draft, emitted }
-  }
-
-  it('keeps the full multi-character query under fast typing', () => {
-    const { draft, emitted } = type('alpha-001')
-    expect(emitted.at(-1)).toBe('alpha-001')
-    expect(draft).toBe('alpha-001')
-  })
-
-  it('ignores a stale (unchanged) response that would revert the draft', () => {
-    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',
-    })
-  })
-
-  it('adopts an external navigation value when no local edit is pending', () => {
-    expect(reconcileSearchDraft({ searchValue: 'beta', prevSearchValue: '', draft: '' })).toEqual({
-      draft: 'beta',
-      prevSearchValue: 'beta',
-    })
-  })
-
-  it('does not adopt while an uncommitted edit is pending', () => {
-    expect(
-      reconcileSearchDraft({ searchValue: 'other', prevSearchValue: 'alp', draft: 'alpha' }),
-    ).toEqual({ draft: 'alpha', prevSearchValue: 'other' })
-  })
-})
-
-describe('CategoryListing — observable listing states', () => {
-  it('shows skeleton placeholders while loading instead of products', () => {
-    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 = 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 = 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 = 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 = 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 = 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 = 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"')
-  })
-})
-
-describe('CategoryListingStatusView — state and chip interactions', () => {
-  it('removes exactly the clicked chip and preserves the others', () => {
-    const onRemoveFilter = vi.fn()
-    const tree = CategoryListingStatusView({
-      status: { state: 'ready' },
-      activeFilters: activeChips,
-      onRemoveFilter,
-    })
-
-    const removeButtons = findAllByProp(tree, 'data-action', 'remove-filter')
-    expect(removeButtons).toHaveLength(3)
-
-    const categoryButton = removeButtons.find(button => button.props['data-filter-id'] === 'category:pantallas')
-    categoryButton?.props.onClick?.()
-
-    expect(onRemoveFilter).toHaveBeenCalledTimes(1)
-    expect(onRemoveFilter).toHaveBeenCalledWith(activeChips[1])
-  })
-
-  it('repairs by emitting the exact bad fields of the typed error', () => {
-    const onRepair = vi.fn()
-    const tree = CategoryListingStatusView({
-      status: {
-        state: 'unsupported-query',
-        error: { code: 'unsupported-query', fields: ['priceMin', 'inStock'], message: 'Unsupported' },
-      },
-      onRepair,
-    })
-
-    const repair = findAllByProp(tree, 'data-action', 'repair')
-    expect(repair).toHaveLength(1)
-    repair[0].props.onClick?.()
-
-    expect(onRepair).toHaveBeenCalledWith(['priceMin', 'inStock'])
-  })
-
-  it('retries through the callback without emitting any query mutation', () => {
-    const onRetry = vi.fn()
-    const tree = CategoryListingStatusView({ status: { state: 'error' }, onRetry })
-
-    const retry = findAllByProp(tree, 'data-action', 'retry')
-    retry[0].props.onClick?.()
-
-    expect(onRetry).toHaveBeenCalledTimes(1)
-    expect(onRetry).toHaveBeenCalledWith()
-  })
-
-  it('clears active filters from the empty state', () => {
-    const onClearFilters = vi.fn()
-    const tree = CategoryListingStatusView({
-      status: { state: 'empty' },
-      activeFilters: activeChips,
-      onClearFilters,
-    })
-
-    const clear = findAllByProp(tree, 'data-action', 'clear-filters')
-    expect(clear).toHaveLength(1)
-    clear[0].props.onClick?.()
-
-    expect(onClearFilters).toHaveBeenCalledTimes(1)
-  })
-
-  it('offers no repair/retry action when the host binds no callback', () => {
-    const tree = CategoryListingStatusView({
-      status: { state: 'invalid-query', error: { code: 'invalid-query', fields: ['page'] } },
-    })
-    expect(findAllByProp(tree, 'data-action', 'repair')).toHaveLength(0)
-  })
-})
-
-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', () => {
-    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 = 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 = 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"')
-    expect(html).toContain('aria-label="Filtros activos"')
-    expect(html).toContain('aria-label="Quitar filtro: Pantallas"')
-  })
-
-  it('labels the filter-panel inputs and checkboxes it renders', () => {
-    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>/)
-    expect(html).toMatch(/<label[^>]*for="[^"]*"[^>]*>\s*Ofertas\s*<\/label>/)
-  })
-
-  it('adds no positive tabindex and keeps search and pagination in the natural tab order', () => {
-    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')
-  })
-})