@thorprovider/blocks 1.0.0 → 3.0.0

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

@@ -1,513 +0,0 @@
-import type { ReactElement, ReactNode } from 'react'
-import { renderToStaticMarkup } from 'react-dom/server'
-import { describe, expect, it, vi } from 'vitest'
-import {
-  CategoryFilter2,
-  CategoryFilter2StatusView,
-  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' },
-]
-
-const advertisedSorts = [
-  { value: 'featured', label: 'Destacados' },
-  { value: 'name', label: 'Nombre' },
-  { value: 'newest', label: 'Más recientes' },
-]
-
-const activeChips: CategoryFilter2ActiveFilter[] = [
-  { 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
-
-/** Find every element whose prop `key` equals `value`, walking the returned
- *  element tree (no DOM needed — `CategoryFilter2StatusView` 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('CategoryFilter2 — 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}
-      />,
-    )
-
-    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} />)
-    expect(hidden).not.toContain('type="search"')
-
-    const shown = renderToStaticMarkup(<CategoryFilter2 products={products} sortOptions={advertisedSorts} showSearch />)
-    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']}
-      />,
-    )
-    expect(html).toContain('Colección')
-    expect(html).toContain('Ofertas')
-    expect(html).toContain('aria-checked="true"')
-  })
-})
-
-describe('CategoryFilter2 — 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')
-  })
-
-  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]} />,
-    )
-    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('renders no sort control when no options are advertised', () => {
-    const html = renderToStaticMarkup(<CategoryFilter2 products={products} />)
-    expect(html).not.toContain('Ordenar por')
-  })
-})
-
-describe('CategoryFilter2 — 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} />,
-    )
-    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.
-    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')
-  })
-
-  it('renders a neutral placeholder and no <img> when the image is absent', () => {
-    const html = renderToStaticMarkup(<CategoryFilter2 products={products} />)
-    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"/)
-  })
-})
-
-describe('CategoryFilter2 — 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', () => {
-    expect(
-      buildFilterChange({
-        categories: ['pantallas'],
-        collections: ['ofertas'],
-        priceRange: [10, 40],
-        size: null,
-        color: null,
-      }),
-    ).toEqual({
-      categories: ['pantallas'],
-      collections: ['ofertas'],
-      priceRange: [10, 40],
-      size: null,
-      color: null,
-    })
-  })
-})
-
-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.
-  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)
-      // 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 }
-  }
-
-  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' })
-  })
-
-  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)', () => {
-  it('shows skeleton placeholders while loading instead of products', () => {
-    const html = renderToStaticMarkup(<CategoryFilter2 products={products} 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={() => {}} />,
-    )
-    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={() => {}}
-      />,
-    )
-    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={() => {}}
-      />,
-    )
-    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={() => {}}
-      />,
-    )
-    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={() => {}} />,
-    )
-    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} />)
-    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)', () => {
-  it('removes exactly the clicked chip and preserves the others', () => {
-    const onRemoveFilter = vi.fn()
-    const tree = CategoryFilter2StatusView({
-      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 = CategoryFilter2StatusView({
-      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 = CategoryFilter2StatusView({ 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 = CategoryFilter2StatusView({
-      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 = CategoryFilter2StatusView({
-      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.
-    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} />,
-    )
-    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} />)
-    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}
-      />,
-    )
-    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 = renderToStaticMarkup(
-      <CategoryFilter2
-        products={products}
-        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 = renderToStaticMarkup(
-      <CategoryFilter2 products={products} sortOptions={advertisedSorts} pagination={[1, 2]} showSearch />,
-    )
-    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"/)
-  })
-})