@thorprovider/blocks 0.1.2 → 1.0.0

package/src/blocks/e-commerce/product-categories/product-category.test.tsx

@@ -0,0 +1,266 @@
+// @vitest-environment jsdom
+import { renderToStaticMarkup } from 'react-dom/server'
+import { beforeAll, describe, expect, it, vi } from 'vitest'
+import { render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { ProductCategory } from './product-category'
+import type { ProductCategoryItem } from '../../../lib/contracts'
+
+beforeAll(() => {
+  ;(globalThis as { IS_REACT_ACT_ENVIRONMENT?: boolean }).IS_REACT_ACT_ENVIRONMENT = true
+})
+
+const base: ProductCategoryItem = {
+  id: 'pcat_herramientas',
+  handle: 'herramientas',
+  name: 'Herramientas',
+  description: 'Taladros y accesorios',
+  image: '/products/drill.png',
+  trending: false,
+}
+
+const renderGrid = (category: ProductCategoryItem, extra: Record<string, unknown> = {}) =>
+  renderToStaticMarkup(<ProductCategory categories={[category]} {...extra} />)
+
+// The count is the only text node that ends in "items" (the `items-center`
+// utility lives in a class attribute and is never followed by `</span>`).
+const hasGridCount = (html: string) => html.includes('items</span>')
+
+describe('ProductCategory — optional itemCount (grid)', () => {
+  it('renders no count when itemCount is omitted (unknown projection)', () => {
+    const html = renderGrid(base, { itemsLabel: 'items' })
+    expect(hasGridCount(html)).toBe(false)
+    // The tile itself still renders.
+    expect(html).toContain('Herramientas')
+  })
+
+  it('preserves a real zero count', () => {
+    expect(renderGrid({ ...base, itemCount: 0 }, { itemsLabel: 'items' })).toContain('0 items</span>')
+  })
+
+  it('renders a positive count', () => {
+    expect(renderGrid({ ...base, itemCount: 7 }, { itemsLabel: 'items' })).toContain('7 items</span>')
+  })
+
+  it('renders the bare number when no items label is supplied', () => {
+    const html = renderGrid({ ...base, itemCount: 7 })
+    expect(html).toContain('>7<')
+    expect(html).not.toContain('items</span>')
+  })
+
+  it('omits a negative count', () => {
+    expect(hasGridCount(renderGrid({ ...base, itemCount: -1 }, { itemsLabel: 'items' }))).toBe(false)
+  })
+
+  it('omits a non-finite count', () => {
+    expect(hasGridCount(renderGrid({ ...base, itemCount: Number.NaN }, { itemsLabel: 'items' }))).toBe(false)
+    expect(hasGridCount(renderGrid({ ...base, itemCount: Number.POSITIVE_INFINITY }, { itemsLabel: 'items' }))).toBe(
+      false,
+    )
+  })
+})
+
+describe('ProductCategory — no demo defaults or hardcoded locale copy', () => {
+  it('ships no copy when the host supplies none', () => {
+    const html = renderGrid(base)
+    expect(html).toContain('Herramientas')
+    expect(html).not.toContain('Browse')
+    expect(html).not.toContain('Trending')
+    expect(html).not.toContain('items</span>')
+  })
+
+  it('renders the browse action only when a handler and label are supplied', () => {
+    expect(renderGrid({ ...base, trending: true })).not.toContain('Browse')
+    expect(renderGrid(base, { onBrowse: () => {}, browseLabel: 'Explorar' })).toContain('Explorar')
+  })
+
+  it('renders the trending badge only when a label is supplied', () => {
+    expect(renderGrid({ ...base, trending: true })).not.toContain('Trending')
+    expect(renderGrid({ ...base, trending: true }, { trendingLabel: 'Tendencia' })).toContain('Tendencia')
+  })
+})
+
+describe('ProductCategory — honest imagery', () => {
+  it('never emits src="" and falls back to a neutral placeholder', () => {
+    const html = renderGrid({ ...base, image: undefined })
+    expect(html).not.toContain('src=""')
+    expect(html).toContain('data:image/svg+xml')
+  })
+
+  it('treats a blank image as missing', () => {
+    expect(renderGrid({ ...base, image: '   ' })).toContain('data:image/svg+xml')
+  })
+})
+
+describe('ProductCategory — bounded presentations', () => {
+  it('icons presentation renders no image and a different structure than grid', () => {
+    const category: ProductCategoryItem = { id: 'pcat_x', name: 'Categoría', icon: 'shirt' }
+    const icons = renderToStaticMarkup(<ProductCategory categories={[category]} presentation='icons' />)
+    expect(icons).toContain('Categoría')
+    expect(icons).not.toContain('<img')
+    expect(icons).not.toContain('aspect-[5/4]')
+  })
+
+  it('icons presentation ignores category counts (no demo metrics)', () => {
+    const category: ProductCategoryItem = { id: 'pcat_x', name: 'Categoría', icon: 'shirt', itemCount: 42 }
+    const icons = renderToStaticMarkup(
+      <ProductCategory categories={[category]} presentation='icons' itemsLabel='items' />,
+    )
+    expect(icons).not.toContain('42')
+    expect(icons).not.toContain('items</span>')
+    expect(icons).not.toContain('items</div>')
+  })
+
+  it('falls back to a neutral icon for an unknown or absent key', () => {
+    const unknown = renderToStaticMarkup(
+      <ProductCategory categories={[{ id: 'pcat_x', name: 'X', icon: 'not-a-real-icon' }]} presentation='icons' />,
+    )
+    const absent = renderToStaticMarkup(
+      <ProductCategory categories={[{ id: 'pcat_y', name: 'Y' }]} presentation='icons' />,
+    )
+    expect(unknown).toContain('X')
+    expect(absent).toContain('Y')
+  })
+})
+
+describe('ProductCategory — icons: keyboard-operable interactive category', () => {
+  const category: ProductCategoryItem = { id: 'pcat_herramientas', name: 'Herramientas', icon: 'wrench' }
+
+  it('renders a native button whose accessible name is the category name', () => {
+    render(<ProductCategory categories={[category]} presentation='icons' onBrowse={() => {}} />)
+    const control = screen.getByRole('button', { name: 'Herramientas' })
+    expect(control.tagName).toBe('BUTTON')
+    expect(control.getAttribute('type')).toBe('button')
+  })
+
+  it('is focusable and activates with the Enter key, reporting onBrowse', async () => {
+    const user = userEvent.setup()
+    const onBrowse = vi.fn()
+    render(<ProductCategory categories={[category]} presentation='icons' onBrowse={onBrowse} />)
+    await user.tab()
+    const control = screen.getByRole('button', { name: 'Herramientas' })
+    expect(document.activeElement).toBe(control)
+    await user.keyboard('{Enter}')
+    expect(onBrowse).toHaveBeenCalledWith(category)
+  })
+
+  it('activates with the Space key, reporting onBrowse', async () => {
+    const user = userEvent.setup()
+    const onBrowse = vi.fn()
+    render(<ProductCategory categories={[category]} presentation='icons' onBrowse={onBrowse} />)
+    await user.tab()
+    await user.keyboard(' ')
+    expect(onBrowse).toHaveBeenCalledWith(category)
+  })
+
+  it('is not a focusable control when no browse handler is supplied', async () => {
+    const user = userEvent.setup()
+    render(<ProductCategory categories={[category]} presentation='icons' />)
+    expect(screen.queryByRole('button')).toBeNull()
+    await user.tab()
+    expect(document.activeElement).toBe(document.body)
+    expect(screen.getByText('Herramientas')).toBeTruthy()
+  })
+
+  it('uses an inset focus ring so the indicator is not clipped by the card', () => {
+    render(<ProductCategory categories={[category]} presentation='icons' onBrowse={() => {}} />)
+    const control = screen.getByRole('button', { name: 'Herramientas' })
+    expect(control.className).toContain('focus-visible:inset-ring-2')
+    expect(control.className).toContain('focus-visible:inset-ring-ring')
+    expect(control.className).not.toContain('focus-visible:ring-2')
+  })
+})
+
+describe('ProductCategory — grid/list browse controls expose the category name', () => {
+  const category: ProductCategoryItem = { id: 'pcat_herramientas', name: 'Herramientas', image: '/products/drill.png' }
+
+  it('names the grid browse control with the host label and the category name', () => {
+    render(
+      <ProductCategory categories={[category]} presentation='grid' onBrowse={() => {}} browseLabel='Explorar' />,
+    )
+    const control = screen.getByRole('button', { name: 'Explorar Herramientas' })
+    expect(control.textContent).toContain('Explorar')
+  })
+
+  it('names the list browse control with the host label and the category name', () => {
+    render(
+      <ProductCategory categories={[category]} presentation='list' onBrowse={() => {}} browseLabel='Explorar' />,
+    )
+    const control = screen.getByRole('button', { name: 'Explorar Herramientas' })
+    expect(control.textContent).toContain('Explorar')
+  })
+})
+
+describe('ProductCategory — list presentation owns no filtering', () => {
+  const categories: ProductCategoryItem[] = [
+    { id: 'pcat_shirts', name: 'Camisas', icon: 'shirt', subcategories: ['Manga larga', 'Manga corta'], itemCount: 12 },
+    { id: 'pcat_boots', name: 'Botas', icon: 'shirt', featured: true },
+  ]
+
+  it('renders only the categories the host supplies for the current query', () => {
+    const html = renderToStaticMarkup(
+      <ProductCategory categories={[categories[1]]} presentation='list' query='bot' onQueryChange={() => {}} />,
+    )
+    expect(html).toContain('Botas')
+    expect(html).not.toContain('Camisas')
+  })
+
+  it('renders subcategory chips and the count with the host label', () => {
+    const html = renderToStaticMarkup(
+      <ProductCategory categories={[categories[0]]} presentation='list' itemsLabel='productos' />,
+    )
+    expect(html).toContain('Manga larga')
+    expect(html).toContain('12 productos')
+  })
+
+  it('renders the featured badge only when a label is supplied', () => {
+    const without = renderToStaticMarkup(<ProductCategory categories={[categories[1]]} presentation='list' />)
+    const with_ = renderToStaticMarkup(
+      <ProductCategory categories={[categories[1]]} presentation='list' featuredLabel='Destacado' />,
+    )
+    expect(without).not.toContain('Destacado')
+    expect(with_).toContain('Destacado')
+  })
+
+  it('reflects the controlled query in the search input', () => {
+    const html = renderToStaticMarkup(
+      <ProductCategory categories={categories} presentation='list' query='cam' onQueryChange={() => {}} />,
+    )
+    expect(html).toContain('value="cam"')
+  })
+
+  it('shows the no-results copy for an empty searched list and the empty copy otherwise', () => {
+    const searched = renderToStaticMarkup(
+      <ProductCategory
+        categories={[]}
+        presentation='list'
+        query='zzz'
+        onQueryChange={() => {}}
+        noResultsLabel='Sin resultados'
+        emptyLabel='Sin categorías'
+      />,
+    )
+    const empty = renderToStaticMarkup(
+      <ProductCategory categories={[]} presentation='list' emptyLabel='Sin categorías' noResultsLabel='Sin resultados' />,
+    )
+    expect(searched).toContain('Sin resultados')
+    expect(empty).toContain('Sin categorías')
+  })
+})
+
+describe('ProductCategory — reusable across sectors without demo content', () => {
+  it('renders distinct sector datasets through the same component and contract', () => {
+    const fashion: ProductCategoryItem[] = [
+      { id: 'pcat_fashion_shirts', name: 'Camisas', icon: 'shirt' },
+    ]
+    const electronics: ProductCategoryItem[] = [
+      { id: 'pcat_electronics_laptops', name: 'Portátiles', icon: 'laptop' },
+    ]
+    const fashionHtml = renderToStaticMarkup(<ProductCategory categories={fashion} presentation='icons' />)
+    const electronicsHtml = renderToStaticMarkup(<ProductCategory categories={electronics} presentation='icons' />)
+    // Same component and contract; only the supplied data differs (no branch on sector).
+    expect(fashionHtml).toContain('Camisas')
+    expect(electronicsHtml).toContain('Portátiles')
+    expect(fashionHtml).not.toContain('Portátiles')
+  })
+})