@asteby/metacore-runtime-react 23.0.0 → 23.2.0

package/src/__tests__/dynamic-kanban-infinite-scroll.test.tsx

@@ -0,0 +1,210 @@
+// @vitest-environment happy-dom
+//
+// DynamicKanban incremental (per-lane) loading:
+//   1. applyLaneTotalsOnMove — the pure count adjustment that keeps a partial
+//      lane's `count/total` header truthful across an optimistic drag.
+//   2. A lane tops up its OWN stage on scroll: firing the sentinel issues
+//      `f_<group_by>=<stage>&page=1&per_page=25` (on top of the active filters)
+//      and appends the rows, with the header total taken from the response meta.
+//   3. Changing the filters re-fetches the initial board page (resets the
+//      per-lane pagination).
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import { cleanup, render, screen, waitFor } from '@testing-library/react'
+
+vi.mock('@tanstack/react-router', () => ({
+    useNavigate: () => () => {},
+}))
+const I18N = { t: (_k: string, o?: { defaultValue?: string }) => o?.defaultValue ?? _k, i18n: { language: 'es' } }
+vi.mock('react-i18next', () => ({ useTranslation: () => I18N }))
+
+import { applyLaneTotalsOnMove, DynamicKanban } from '../dynamic-kanban'
+import { ApiProvider, type ApiClient } from '../api-context'
+import { useMetadataCache } from '../metadata-cache'
+import type { TableMetadata } from '../types'
+
+afterEach(cleanup)
+
+// ---------------------------------------------------------------------------
+// 1. Pure count adjustment
+// ---------------------------------------------------------------------------
+
+describe('applyLaneTotalsOnMove', () => {
+    it('decrements the source total and increments the destination total', () => {
+        const out = applyLaneTotalsOnMove(
+            { backlog: { total: 5 }, done: { total: 2 } },
+            'backlog',
+            'done',
+        )
+        expect(out.backlog.total).toBe(4)
+        expect(out.done.total).toBe(3)
+    })
+
+    it('leaves lanes with an unknown (null) total alone', () => {
+        const out = applyLaneTotalsOnMove(
+            { backlog: { total: null }, done: { total: 2 } },
+            'backlog',
+            'done',
+        )
+        expect(out.backlog.total).toBeNull()
+        expect(out.done.total).toBe(3)
+    })
+
+    it('never drives a total below zero', () => {
+        const out = applyLaneTotalsOnMove(
+            { backlog: { total: 0 }, done: { total: 1 } },
+            'backlog',
+            'done',
+        )
+        expect(out.backlog.total).toBe(0)
+        expect(out.done.total).toBe(2)
+    })
+
+    it('does not mutate the input map', () => {
+        const input = { backlog: { total: 5 }, done: { total: 2 } }
+        applyLaneTotalsOnMove(input, 'backlog', 'done')
+        expect(input.backlog.total).toBe(5)
+        expect(input.done.total).toBe(2)
+    })
+})
+
+// ---------------------------------------------------------------------------
+// 2 + 3. Per-lane top-up + reset
+// ---------------------------------------------------------------------------
+
+const STAGES = [
+    { key: 'backlog', label: 'Backlog', color: 'slate', order: 0 },
+    { key: 'done', label: 'Done', color: 'green', order: 1 },
+]
+
+function meta(over: Partial<TableMetadata> = {}): TableMetadata {
+    return {
+        title: 'Issues',
+        endpoint: '/data/issue',
+        view_type: 'kanban',
+        group_by: 'stage',
+        stages: STAGES,
+        columns: [
+            { key: 'title', label: 'Title', type: 'text', sortable: true, filterable: false, searchable: true },
+            { key: 'stage', label: 'Stage', type: 'status', sortable: false, filterable: true, options: STAGES.map((s) => ({ value: s.key, label: s.label })) },
+        ],
+        actions: [],
+        perPageOptions: [50],
+        defaultPerPage: 50,
+        searchPlaceholder: 'Buscar...',
+        enableCRUDActions: false,
+        hasActions: false,
+        ...over,
+    }
+}
+
+// Initial global page: one backlog card. A backlog top-up (f_stage=backlog)
+// returns two more backlog cards with a server total of 5.
+function fakeApi(): ApiClient {
+    const ok = (data: unknown, meta?: Record<string, unknown>) => ({
+        data: { success: true, data, ...(meta ? { meta } : {}) },
+    })
+    return {
+        get: vi.fn(async (url: string, cfg?: any) => {
+            if (url.startsWith('/metadata/table/')) return ok(meta())
+            const stage = cfg?.params?.f_stage
+            if (stage === 'backlog') {
+                return ok(
+                    [
+                        { id: 2, title: 'Backlog Two', stage: 'backlog' },
+                        { id: 3, title: 'Backlog Three', stage: 'backlog' },
+                    ],
+                    { total: 5 },
+                )
+            }
+            if (stage === 'done') return ok([], { total: 0 })
+            // initial global board page
+            return ok([{ id: 1, title: 'Backlog One', stage: 'backlog' }])
+        }),
+        post: vi.fn(async () => ok(null)),
+        put: vi.fn(async () => ok(null)),
+        delete: vi.fn(async () => ok(null)),
+    }
+}
+
+function stageCalls(api: ApiClient, stage: string) {
+    return (api.get as any).mock.calls.filter(
+        (c: any[]) => c[1]?.params?.f_stage === stage,
+    )
+}
+function globalDataCalls(api: ApiClient) {
+    return (api.get as any).mock.calls.filter(
+        (c: any[]) =>
+            !String(c[0]).startsWith('/metadata/table/') &&
+            c[1]?.params?.f_stage === undefined,
+    )
+}
+
+// Controllable IntersectionObserver.
+type IOEntry = { isIntersecting: boolean }
+let observers: Array<{ fire: (v: boolean) => void }> = []
+class FakeIO {
+    cb: (e: IOEntry[]) => void
+    constructor(cb: (e: IOEntry[]) => void) {
+        this.cb = cb
+        observers.push({ fire: (v: boolean) => this.cb([{ isIntersecting: v }]) })
+    }
+    observe() {}
+    disconnect() {}
+}
+
+describe('DynamicKanban per-lane infinite scroll', () => {
+    beforeEach(() => {
+        observers = []
+        ;(globalThis as any).IntersectionObserver = FakeIO
+    })
+    afterEach(() => {
+        delete (globalThis as any).IntersectionObserver
+    })
+
+    it('tops up ONE lane by stage on scroll and shows the server total', async () => {
+        useMetadataCache.getState().setMetadata('issue', meta())
+        const api = fakeApi()
+        render(
+            <ApiProvider client={api}>
+                <DynamicKanban model="issue" />
+            </ApiProvider>,
+        )
+        // Initial board page painted its single backlog card.
+        expect(await screen.findByText('Backlog One')).toBeTruthy()
+        expect(stageCalls(api, 'backlog')).toHaveLength(0)
+
+        // Sentinels enter view → each declared lane tops up its OWN stage.
+        expect(observers.length).toBeGreaterThan(0)
+        observers.forEach((o) => o.fire(true))
+
+        // The backlog top-up ran with the right scoped params...
+        await waitFor(() => expect(stageCalls(api, 'backlog').length).toBeGreaterThan(0))
+        const call = stageCalls(api, 'backlog')[0]
+        expect(call[1].params).toMatchObject({ f_stage: 'backlog', page: 1, per_page: 25 })
+
+        // ...its rows were appended and the header shows count/serverTotal (3/5).
+        expect(await screen.findByText('Backlog Two')).toBeTruthy()
+        expect(await screen.findByText('3/5')).toBeTruthy()
+    })
+
+    it('re-fetches the initial board page when the filters change (reset)', async () => {
+        useMetadataCache.getState().setMetadata('issue', meta())
+        const api = fakeApi()
+        const { rerender } = render(
+            <ApiProvider client={api}>
+                <DynamicKanban model="issue" />
+            </ApiProvider>,
+        )
+        await screen.findByText('Backlog One')
+        const before = globalDataCalls(api).length
+
+        rerender(
+            <ApiProvider client={api}>
+                <DynamicKanban model="issue" defaultFilters={{ priority: 'high' }} />
+            </ApiProvider>,
+        )
+
+        // A fresh (un-scoped) board fetch fires — the per-lane pagination resets.
+        await waitFor(() => expect(globalDataCalls(api).length).toBeGreaterThan(before))
+    })
+})

package/src/__tests__/dynamic-kanban.test.tsx

@@ -40,6 +40,7 @@ import {
     selectCardColumns,
     cardMatchesLaneQuery,
     cardMatchesLaneFunnel,
+    laneFunnelCount,
     translateOptionLabels,
     summarizeFilterValues,
     UNASSIGNED_LANE,
@@ -283,6 +284,18 @@ describe('cardMatchesLaneFunnel', () => {
     })
 })
 
+describe('laneFunnelCount', () => {
+    it('counts picked values, else 1 for free text, else 0', () => {
+        expect(laneFunnelCount(undefined)).toBe(0)
+        expect(laneFunnelCount({})).toBe(0)
+        expect(laneFunnelCount({ values: ['a', 'b', 'c'] })).toBe(3)
+        expect(laneFunnelCount({ text: 'foo' })).toBe(1)
+        expect(laneFunnelCount({ text: '  ' })).toBe(0)
+        // picked values win over stray text
+        expect(laneFunnelCount({ values: ['a'], text: 'x' })).toBe(1)
+    })
+})
+
 describe('translateOptionLabels', () => {
     it('runs option labels through the translator (stage i18n keys → localized)', () => {
         const opts = [
@@ -528,4 +541,31 @@ describe('DynamicKanban lane funnel', () => {
         ).toBeTruthy()
         expect(screen.queryByPlaceholderText('Contiene...')).toBeNull()
     })
+
+    it('shows a count badge on the funnel with the number of picked values', async () => {
+        useMetadataCache.getState().setMetadata('issue', meta())
+        render(
+            <ApiProvider client={fakeApi()}>
+                <DynamicKanban model="issue" />
+            </ApiProvider>,
+        )
+        await screen.findByText('Fix login bug')
+        fireEvent.click(screen.getAllByLabelText('Filtrar columna')[0])
+        await screen.findByPlaceholderText('Buscar valores...')
+
+        // pick two stage values from the combobox
+        const options = screen.getAllByRole('option')
+        expect(options.length).toBeGreaterThanOrEqual(2)
+        fireEvent.click(options[0])
+        fireEvent.click(options[1])
+        // apply
+        fireEvent.click(screen.getByText(/Aplicar/))
+
+        // the first lane's funnel button now carries a "2" count badge
+        await waitFor(() =>
+            expect(
+                screen.getAllByLabelText('Filtrar columna')[0].textContent,
+            ).toContain('2'),
+        )
+    })
 })

package/src/__tests__/dynamic-table-filters.test.tsx

@@ -0,0 +1,102 @@
+// @vitest-environment happy-dom
+//
+// DynamicTable filter parity with the kanban:
+//   - Facet PREFETCH: on metadata resolve, the table warms every facet field in
+//     one burst (`/data/<model>/facets?field=<key>`), so a text-column header
+//     filter opens instantly.
+//   - Stage-select: the group_by/stage column with no options of its own becomes
+//     a select (NOT a facet) — so it must NOT trigger a facets prewarm.
+//   - Long-text columns stay plain text (no facet, no prewarm).
+import { afterEach, describe, expect, it, vi } from 'vitest'
+import { cleanup, render, screen, waitFor } from '@testing-library/react'
+
+vi.mock('@tanstack/react-router', () => ({
+    useNavigate: () => () => {},
+}))
+const I18N = { t: (_k: string, o?: { defaultValue?: string }) => o?.defaultValue ?? _k, i18n: { language: 'es' } }
+vi.mock('react-i18next', () => ({ useTranslation: () => I18N }))
+
+import { DynamicTable } from '../dynamic-table'
+import { ApiProvider, type ApiClient } from '../api-context'
+import { useMetadataCache } from '../metadata-cache'
+import type { TableMetadata } from '../types'
+
+afterEach(cleanup)
+
+const STAGES = [
+    { key: 'backlog', label: 'issue.stage.backlog', color: 'slate', order: 0 },
+    { key: 'done', label: 'issue.stage.done', color: 'green', order: 1 },
+]
+
+function meta(): TableMetadata {
+    return {
+        title: 'Issues',
+        endpoint: '/data/issue',
+        group_by: 'stage',
+        stages: STAGES,
+        columns: [
+            { key: 'title', label: 'Title', type: 'text', sortable: true, filterable: true, searchable: true },
+            { key: 'body', label: 'Body', type: 'text', sortable: false, filterable: true, cellStyle: 'truncate-text' },
+            { key: 'stage', label: 'Stage', type: 'status', sortable: false, filterable: true },
+        ],
+        actions: [],
+        perPageOptions: [50],
+        defaultPerPage: 50,
+        searchPlaceholder: 'Buscar...',
+        enableCRUDActions: true,
+        hasActions: false,
+    }
+}
+
+function fakeApi(): ApiClient {
+    const ok = (data: unknown) => ({ data: { success: true, data, meta: { total: 0 } } })
+    return {
+        get: vi.fn(async (url: string, cfg?: any) => {
+            if (url.startsWith('/metadata/table/')) return ok(meta())
+            if (url.endsWith('/facets')) {
+                const f = cfg?.params?.field
+                return ok([
+                    { value: `${f}-a`, label: `${f} A`, count: 2 },
+                    { value: `${f}-b`, label: `${f} B`, count: 1 },
+                ])
+            }
+            return ok([])
+        }),
+        post: vi.fn(async () => ok(null)),
+        put: vi.fn(async () => ok(null)),
+        delete: vi.fn(async () => ok(null)),
+    }
+}
+
+function facetFields(api: ApiClient): string[] {
+    return (api.get as any).mock.calls
+        .filter((c: any[]) => String(c[0]).endsWith('/facets'))
+        .map((c: any[]) => c[1]?.params?.field)
+}
+
+describe('DynamicTable facet prefetch + stage-select', () => {
+    it('prewarms the plain text column but NOT the stage (select) or long-text columns', async () => {
+        useMetadataCache.getState().setMetadata('issue', meta())
+        const api = fakeApi()
+        render(
+            <ApiProvider client={api}>
+                <DynamicTable model="issue" />
+            </ApiProvider>,
+        )
+        // 'title' is a facet → it gets prewarmed against the model-derived endpoint
+        await waitFor(() =>
+            expect(
+                (api.get as any).mock.calls.some(
+                    (c: any[]) =>
+                        String(c[0]) === '/data/issue/facets' &&
+                        c[1]?.params?.field === 'title',
+                ),
+            ).toBe(true),
+        )
+        const fields = facetFields(api)
+        // stage → select (from the pipeline stages), never faceted
+        expect(fields).not.toContain('stage')
+        // body → long-text, stays plain text, never faceted
+        expect(fields).not.toContain('body')
+    })
+})

package/src/__tests__/dynamic-table-infinite-scroll.test.tsx

@@ -0,0 +1,196 @@
+// @vitest-environment happy-dom
+//
+// DynamicTable infinite-scroll (opt-in) behaviour:
+//   1. With `infiniteScroll`, the classic pager is replaced by a "N de total"
+//      indicator; the first page loads with per_page=30 and the sentinel's
+//      intersection appends the next page, deduped by id.
+//   2. Changing the filters resets the accumulated list back to page 1.
+//   3. WITHOUT the prop (default), the classic pager renders and no sentinel /
+//      append path is engaged — existing hosts are untouched.
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import { cleanup, render, screen, waitFor } from '@testing-library/react'
+
+vi.mock('@tanstack/react-router', () => ({
+    useNavigate: () => () => {},
+}))
+const I18N = {
+    t: (_k: string, o?: { defaultValue?: string; count?: number; total?: number }) => {
+        // Mirror the "{{count}} de {{total}}" interpolation the footer uses.
+        if (o?.defaultValue && o.count != null && o.total != null) {
+            return o.defaultValue.replace('{{count}}', String(o.count)).replace('{{total}}', String(o.total))
+        }
+        return o?.defaultValue ?? _k
+    },
+    i18n: { language: 'es' },
+}
+vi.mock('react-i18next', () => ({ useTranslation: () => I18N }))
+
+import { DynamicTable } from '../dynamic-table'
+import { ApiProvider, type ApiClient } from '../api-context'
+import { useMetadataCache } from '../metadata-cache'
+import type { TableMetadata } from '../types'
+
+afterEach(cleanup)
+
+function meta(): TableMetadata {
+    return {
+        title: 'Issues',
+        endpoint: '/data/issue',
+        group_by: 'stage',
+        columns: [
+            { key: 'title', label: 'Title', type: 'text', sortable: true, filterable: false, searchable: true },
+        ],
+        actions: [],
+        perPageOptions: [50],
+        defaultPerPage: 50,
+        searchPlaceholder: 'Buscar...',
+        enableCRUDActions: false,
+        hasActions: false,
+    }
+}
+
+// A model with `total` rows. The data endpoint returns a page of {id,title};
+// page 2 deliberately re-includes the last id of page 1 to exercise dedup.
+function fakeApi(total: number, pageSize = 30): ApiClient {
+    const ok = (data: unknown, extra: Record<string, unknown> = {}) => ({
+        data: { success: true, data, meta: { total, ...extra } },
+    })
+    const page = (n: number) => {
+        const start = (n - 1) * pageSize
+        const rows: Array<{ id: number; title: string }> = []
+        // Overlap: page n>1 repeats the previous page's last row (a server that
+        // re-paginated) — dedupeById must drop it.
+        const from = n > 1 ? start - 1 : start
+        for (let i = from; i < Math.min(start + pageSize, total); i++) {
+            rows.push({ id: i + 1, title: `Issue ${i + 1}` })
+        }
+        return rows
+    }
+    return {
+        get: vi.fn(async (url: string, cfg?: any) => {
+            if (url.startsWith('/metadata/table/')) return ok(meta())
+            if (url.endsWith('/facets')) return ok([])
+            // data endpoint
+            const p = cfg?.params?.page ?? 1
+            return ok(page(p))
+        }),
+        post: vi.fn(async () => ok(null)),
+        put: vi.fn(async () => ok(null)),
+        delete: vi.fn(async () => ok(null)),
+    }
+}
+
+function dataCalls(api: ApiClient) {
+    return (api.get as any).mock.calls.filter(
+        (c: any[]) => c[0] === '/data/issue' || (c[0] === undefined),
+    )
+}
+
+// Controllable IntersectionObserver — captures the observers so the test can
+// fire the sentinel's intersection deterministically.
+type IOEntry = { isIntersecting: boolean }
+let observers: Array<{ fire: (v: boolean) => void }> = []
+class FakeIO {
+    cb: (e: IOEntry[]) => void
+    constructor(cb: (e: IOEntry[]) => void) {
+        this.cb = cb
+        observers.push({ fire: (v: boolean) => this.cb([{ isIntersecting: v }]) })
+    }
+    observe() {}
+    disconnect() {}
+}
+
+describe('DynamicTable infinite scroll', () => {
+    beforeEach(() => {
+        observers = []
+        ;(globalThis as any).IntersectionObserver = FakeIO
+    })
+    afterEach(() => {
+        delete (globalThis as any).IntersectionObserver
+    })
+
+    it('loads page 1 (per_page 30) then appends page 2 on intersect, deduped', async () => {
+        useMetadataCache.getState().setMetadata('issue', meta())
+        const api = fakeApi(45) // 45 rows → page1: 30, page2: 15 (+1 overlap dropped)
+        render(
+            <ApiProvider client={api}>
+                <DynamicTable model="issue" infiniteScroll enableUrlSync={false} />
+            </ApiProvider>,
+        )
+
+        // Page 1 request: page=1, per_page=30.
+        await waitFor(() => {
+            const first = dataCalls(api)[0]
+            expect(first?.[1]?.params).toMatchObject({ page: 1, per_page: 30 })
+        })
+        // Footer indicator reflects the loaded/total counts.
+        await waitFor(() => expect(screen.getByText('30 de 45')).toBeTruthy())
+
+        // Sentinel enters view → page 2 fetched and APPENDED.
+        expect(observers.length).toBeGreaterThan(0)
+        observers.forEach((o) => o.fire(true))
+
+        await waitFor(() => {
+            const pages = dataCalls(api).map((c: any[]) => c[1]?.params?.page)
+            expect(pages).toContain(2)
+        })
+        // 30 + 15 unique = 45 (NOT 46 — the overlap row was deduped).
+        await waitFor(() => expect(screen.getByText('45 de 45')).toBeTruthy())
+    })
+
+    it('resets to page 1 (replacing the accumulated rows) when filters change', async () => {
+        useMetadataCache.getState().setMetadata('issue', meta())
+        const api = fakeApi(45)
+        const { rerender } = render(
+            <ApiProvider client={api}>
+                <DynamicTable model="issue" infiniteScroll enableUrlSync={false} />
+            </ApiProvider>,
+        )
+        await waitFor(() => expect(screen.getByText('30 de 45')).toBeTruthy())
+        observers.forEach((o) => o.fire(true))
+        await waitFor(() => expect(screen.getByText('45 de 45')).toBeTruthy())
+
+        // Change the active filters via defaultFilters (part of buildFilterParams).
+        rerender(
+            <ApiProvider client={api}>
+                <DynamicTable
+                    model="issue"
+                    infiniteScroll
+                    enableUrlSync={false}
+                    defaultFilters={{ stage: 'done' }}
+                />
+            </ApiProvider>,
+        )
+
+        // A fresh page-1 request carrying the new filter, and the list collapses
+        // back to a single page (30 of 45) — the accumulated 45 were dropped.
+        await waitFor(() => {
+            const withFilter = dataCalls(api).filter(
+                (c: any[]) => c[1]?.params?.f_stage === 'done',
+            )
+            expect(withFilter.some((c: any[]) => c[1]?.params?.page === 1)).toBe(true)
+        })
+        await waitFor(() => expect(screen.getByText('30 de 45')).toBeTruthy())
+    })
+
+    it('default (no prop) keeps the classic pager and never appends', async () => {
+        useMetadataCache.getState().setMetadata('issue', meta())
+        const api = fakeApi(45)
+        render(
+            <ApiProvider client={api}>
+                <DynamicTable model="issue" enableUrlSync={false} />
+            </ApiProvider>,
+        )
+        // Classic pager renders its rows-per-page control; the infinite footer
+        // indicator ("N de N") is absent.
+        await waitFor(() => expect(dataCalls(api).length).toBeGreaterThan(0))
+        expect(screen.queryByText('30 de 45')).toBeNull()
+        expect(screen.queryByText('45 de 45')).toBeNull()
+
+        // Firing any (stray) sentinel must NOT trigger a page-2 append.
+        observers.forEach((o) => o.fire(true))
+        await new Promise((r) => setTimeout(r, 50))
+        const pages = dataCalls(api).map((c: any[]) => c[1]?.params?.page)
+        expect(pages).not.toContain(2)
+    })
+})

package/src/__tests__/filter-chips.test.tsx

@@ -0,0 +1,119 @@
+// @vitest-environment happy-dom
+//
+// FilterChipsRow — the removable active-filter chip row shared by DynamicTable
+// and DynamicKanban: one chip per active field (label + summarized value + a
+// value-color dot when the option carries a color), an X that clears that field,
+// and a trailing "Limpiar todo".
+import { afterEach, describe, expect, it, vi } from 'vitest'
+import { cleanup, render, screen, fireEvent } from '@testing-library/react'
+
+vi.mock('react-i18next', () => ({
+    useTranslation: () => ({
+        t: (_k: string, opts?: { defaultValue?: string }) => opts?.defaultValue ?? _k,
+    }),
+}))
+
+import {
+    FilterChipsRow,
+    summarizeFilterValues,
+    chipValueColor,
+    type FilterChipField,
+} from '../filter-chips'
+
+afterEach(cleanup)
+
+function field(over: Partial<FilterChipField> & { key: string }): FilterChipField {
+    return {
+        label: over.key,
+        config: {
+            selectedValues: [],
+            options: [],
+            filterKey: over.key,
+            onFilterChange: vi.fn(),
+            ...(over.config as any),
+        },
+        ...over,
+    }
+}
+
+describe('summarizeFilterValues / chipValueColor', () => {
+    const opts = [
+        { value: 'backlog', label: 'Pendiente', color: 'slate' },
+        { value: 'done', label: 'Hecho', color: 'green' },
+    ]
+    it('summarizes a single value to its (translated) option label', () => {
+        expect(summarizeFilterValues(['done'], opts)).toBe('Hecho')
+    })
+    it('resolves the option color for the chip dot', () => {
+        expect(chipValueColor({ selectedValues: ['done'], options: opts })).toBeTruthy()
+    })
+    it('has no dot for a free-text (ILIKE) value', () => {
+        expect(
+            chipValueColor({ selectedValues: ['ILIKE:foo'], options: opts }),
+        ).toBeUndefined()
+    })
+})
+
+describe('FilterChipsRow', () => {
+    const stageOptions = [
+        { value: 'backlog', label: 'Pendiente', color: 'slate' },
+        { value: 'done', label: 'Hecho', color: 'green' },
+    ]
+
+    it('renders nothing when there are no active fields', () => {
+        const { container } = render(
+            <FilterChipsRow fields={[]} onClearAll={() => {}} />,
+        )
+        expect(container.firstChild).toBeNull()
+    })
+
+    it('renders a chip per active field with its translated value summary', () => {
+        render(
+            <FilterChipsRow
+                fields={[
+                    field({
+                        key: 'stage',
+                        label: 'Etapa',
+                        config: {
+                            selectedValues: ['done'],
+                            options: stageOptions,
+                            filterKey: 'stage',
+                            onFilterChange: vi.fn(),
+                        },
+                    }),
+                ]}
+                onClearAll={() => {}}
+                data-testid="chips"
+            />,
+        )
+        expect(screen.getByText('Etapa:')).toBeTruthy()
+        // the value shows the TRANSLATED option label, not the raw key
+        expect(screen.getByText('Hecho')).toBeTruthy()
+    })
+
+    it('clears one field via its X and everything via "Limpiar todo"', () => {
+        const onFilterChange = vi.fn()
+        const onClearAll = vi.fn()
+        render(
+            <FilterChipsRow
+                fields={[
+                    field({
+                        key: 'stage',
+                        label: 'Etapa',
+                        config: {
+                            selectedValues: ['done'],
+                            options: stageOptions,
+                            filterKey: 'stage',
+                            onFilterChange,
+                        },
+                    }),
+                ]}
+                onClearAll={onClearAll}
+            />,
+        )
+        fireEvent.click(screen.getByLabelText('Quitar filtro'))
+        expect(onFilterChange).toHaveBeenCalledWith('stage', [])
+        fireEvent.click(screen.getByText('Limpiar todo'))
+        expect(onClearAll).toHaveBeenCalled()
+    })
+})