@thorprovider/blocks 0.1.1 → 0.1.3

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

@@ -0,0 +1,513 @@
+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"/)
+  })
+})