@asteby/metacore-runtime-react 22.0.0 → 23.1.0

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()
+    })
+})

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

@@ -169,14 +169,75 @@ describe('useDynamicFilters — facet upgrade + fallback (B)', () => {
             () => useDynamicFilters(meta(), { model: 'issue' }),
             { wrapper: wrapper(api) },
         )
+        const titleFacetCalls = () =>
+            (api.get as any).mock.calls.filter(
+                (c: any[]) =>
+                    String(c[0]).endsWith('/facets') &&
+                    c[1]?.params?.field === 'title' &&
+                    !c[1]?.params?.q,
+            ).length
+        // Let the prewarm settle first, then reopening (empty query) is cached.
+        await waitFor(() => expect(titleFacetCalls()).toBe(1))
         const load = result.current.columnFilterConfigs.get('title')!.loadOptions!
         await load('')
         await load('')
-        // Second call served from cache → only one network hit for that key.
+        expect(titleFacetCalls()).toBe(1)
+    })
+})
+
+describe('useDynamicFilters — facet prefetch', () => {
+    it('prewarms facet options on mount so the config carries them (no lazy open)', async () => {
+        const api = fakeApi()
+        const { result } = renderHook(
+            () => useDynamicFilters(meta(), { model: 'issue' }),
+            { wrapper: wrapper(api) },
+        )
+        // The prefetch burst fires an empty-query request per facet field.
+        await waitFor(() =>
+            expect(
+                (api.get as any).mock.calls.some(
+                    (c: any[]) =>
+                        String(c[0]) === '/data/issue/facets' &&
+                        c[1]?.params?.field === 'title' &&
+                        c[1]?.params?.q === undefined,
+                ),
+            ).toBe(true),
+        )
+        // …and those values land directly on the config (popover opens instantly).
+        await waitFor(() =>
+            expect(
+                result.current.columnFilterConfigs.get('title')?.options,
+            ).toEqual([
+                { value: 'ana', label: 'Ana', count: 3 },
+                { value: 'beto', label: 'Beto', count: 1 },
+            ]),
+        )
+    })
+
+    it('opening a prewarmed facet is a cache hit (no extra request)', async () => {
+        const api = fakeApi()
+        const { result } = renderHook(
+            () => useDynamicFilters(meta(), { model: 'issue' }),
+            { wrapper: wrapper(api) },
+        )
+        // wait for prefetch to settle
         await waitFor(() =>
-            expect((api.get as any).mock.calls.filter((c: any[]) =>
-                String(c[0]).endsWith('/facets'),
-            ).length).toBe(1),
+            expect(
+                result.current.columnFilterConfigs.get('title')?.options?.length,
+            ).toBe(2),
         )
+        const before = (api.get as any).mock.calls.filter(
+            (c: any[]) =>
+                String(c[0]).endsWith('/facets') &&
+                c[1]?.params?.field === 'title',
+        ).length
+        // the popover's empty-query load reuses the prewarmed cache
+        await result.current.columnFilterConfigs.get('title')!.loadOptions!('')
+        const after = (api.get as any).mock.calls.filter(
+            (c: any[]) =>
+                String(c[0]).endsWith('/facets') &&
+                c[1]?.params?.field === 'title',
+        ).length
+        expect(after).toBe(before)
     })
 })