@thorprovider/blocks 2.0.0 → 3.0.0

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

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