@asteby/metacore-runtime-react 49.5.0 → 49.7.0

package/src/__tests__/document-editor-inline-selects.test.tsx

@@ -95,7 +95,8 @@ describe('DocumentLinesGrid — select de producto en la celda', () => {
         expect(cell.closest('tr')!.getAttribute('data-line-key')).toBe(free.key)
         fireEvent.change(cell, { target: { value: '205' } })
         const option = await waitFor(() => screen.getByRole('option', { name: /Llanta 205/ }), { timeout: 2000 })
-        fireEvent.click(within(option).getByRole('button'))
+        // La opción (role=option) es el elemento interactivo del RecordPicker.
+        fireEvent.click(option)
         expect(state()).toHaveLength(1)
         expect(state()[0]).toMatchObject({ key: free.key, product_id: 'p1', unit_price: 1500, sku: 'LL-205' })
     })

package/src/__tests__/document-form-dialog.test.tsx

@@ -169,7 +169,8 @@ describe('DocumentFormDialog: buscador de catálogo por defecto', () => {
         fireEvent.change(document.querySelectorAll('input')[0], { target: { value: 'ACME' } })
         fireEvent.click(screen.getByRole('button', { name: 'Siguiente' }))
         fireEvent.change(await screen.findByLabelText('Buscar producto'), { target: { value: query } })
-        fireEvent.click(await waitFor(() => screen.getByRole('button', { name }), { timeout: 2000 }))
+        // RecordPicker: la opción del producto es role="option" clicable (sin <button> anidado).
+        fireEvent.click(await waitFor(() => screen.getByRole('option', { name }), { timeout: 2000 }))
     }
 
     it('sin searchProducts del host busca en el catálogo y el renglón entra con precio, cantidad 1, unidad, SKU e IVA de la org', async () => {
@@ -234,9 +235,9 @@ describe('DocumentFormDialog: IVA de la org con el buscador del host', () => {
         fireEvent.click(screen.getByRole('button', { name: 'Siguiente' }))
         const search = await screen.findByLabelText('Buscar producto')
         fireEvent.change(search, { target: { value: 'host' } })
-        fireEvent.click(await waitFor(() => screen.getByRole('button', { name: /Llanta host/ }), { timeout: 2000 }))
+        fireEvent.click(await waitFor(() => screen.getByRole('option', { name: /Llanta host/ }), { timeout: 2000 }))
         fireEvent.change(await screen.findByLabelText('Buscar producto'), { target: { value: 'fron' } })
-        fireEvent.click(await waitFor(() => screen.getByRole('button', { name: /Frontera host/ }), { timeout: 2000 }))
+        fireEvent.click(await waitFor(() => screen.getByRole('option', { name: /Frontera host/ }), { timeout: 2000 }))
         fireEvent.click(screen.getByRole('button', { name: 'Crear' }))
         await waitFor(() => expect(post).toHaveBeenCalled())
         const body = post.mock.calls[0][1] as any

package/src/__tests__/document-lines-grid.test.tsx

@@ -49,7 +49,8 @@ describe('DocumentLinesGrid', () => {
         const search = vi.fn(async () => [tire])
         render(<Harness search={search} priceSource="cost" />)
         fireEvent.change(screen.getByLabelText('Buscar producto'), { target: { value: 'llan' } })
-        const option = await waitFor(() => screen.getByRole('button', { name: /Llanta X/ }), { timeout: 2000 })
+        // RecordPicker: la opción del producto es role="option" clicable (sin <button> anidado).
+        const option = await waitFor(() => screen.getByRole('option', { name: /Llanta X/ }), { timeout: 2000 })
         fireEvent.click(option)
         expect(state()[0]).toMatchObject({ description: 'Llanta X', sku: 'LX', quantity: 1, unit_price: 800, catalog_price: 800 })
         expect(screen.getByText(/Catálogo/)).toBeTruthy()

package/src/__tests__/edit-field-polish.test.tsx

@@ -153,7 +153,7 @@ describe('EditField — PART 2: FK select shows the resolved label', () => {
         expect(screen.queryByText('550e8400-e29b-41d4-a716-446655440000')).toBeNull()
     })
 
-    it('keeps the raw value as fallback when no sibling was injected', () => {
+    it('keeps the raw value as fallback when no sibling was injected and the host cannot resolve ids', async () => {
         render(
             <ApiProvider client={noopApi}>
                 <EditField
@@ -164,7 +164,10 @@ describe('EditField — PART 2: FK select shows the resolved label', () => {
                 />
             </ApiProvider>,
         )
-        // No sibling → existing behaviour: the raw value is shown on the trigger.
-        expect(screen.getByText('wh-xyz')).toBeTruthy()
+        // No sibling → an `?ids=` lookup runs first ("Cargando…", never the id);
+        // this host answers without resolving it, so the raw value is the
+        // fallback on the trigger, as before.
+        expect(screen.getByText('Cargando…')).toBeTruthy()
+        expect(await screen.findByText('wh-xyz')).toBeTruthy()
     })
 })

package/src/__tests__/option-ids.test.tsx

@@ -0,0 +1,181 @@
+// @vitest-environment happy-dom
+//
+// RecordPicker editing a saved value: the label comes from ONE `?ids=` lookup
+// (useResolveOptionIds) without opening the popover — batched per ref, shared
+// between pickers, skipped with a seed, "(registro eliminado)" for a gone id
+// and the raw value when the host predates `ids`.
+import { afterEach, describe, expect, it, vi } from 'vitest'
+import { cleanup, render, screen, waitFor } from '@testing-library/react'
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+
+vi.mock('react-i18next', () => {
+    const value = { t: (k: string, o?: Record<string, any>) => o?.defaultValue ?? k, i18n: { language: 'es' } }
+    return { useTranslation: () => value }
+})
+
+import { DynamicSelectField } from '../dynamic-select-field'
+import { DynamicMultiSelectField } from '../dynamic-multi-select-field'
+import { ApiProvider, type ApiClient } from '../api-context'
+import { invalidateOptionsCache } from '../use-options-resolver'
+import type { ActionFieldDef } from '../types'
+
+afterEach(() => {
+    cleanup()
+    invalidateOptionsCache()
+})
+
+let seq = 0
+/** Fresh ids per test: the id-label cache is module-wide on purpose. */
+const uid = (p: string) => `${p}-${++seq}-${Math.random().toString(36).slice(2, 8)}`
+
+type Row = { id: string; label: string }
+
+/** A host that understands `ids`: answers exactly the requested rows it has. */
+function idsHost(rows: Row[], page: Row[] = rows) {
+    const get = vi.fn(async (_url: string, config?: { params?: Record<string, unknown> }) => {
+        const ids = config?.params?.ids
+        if (typeof ids === 'string') {
+            const want = ids.split(',')
+            return { data: { success: true, data: rows.filter((r) => want.includes(r.id)), meta: { type: 'dynamic' } } }
+        }
+        return { data: { success: true, data: page, meta: { type: 'dynamic' } } }
+    })
+    // batch=false: no POST /q in these tests (ids reads bypass it anyway).
+    const api = { get, post: vi.fn(async () => ({ data: {} })), put: vi.fn(), delete: vi.fn() } as unknown as ApiClient
+    return { api, get, idsCalls: () => get.mock.calls.filter(([, c]) => typeof c?.params?.ids === 'string') }
+}
+
+const brand: ActionFieldDef = { key: 'brand_id', label: 'Marca', type: 'dynamic_select', ref: 'Brand' }
+
+describe('RecordPicker: etiqueta de un valor guardado por ?ids=', () => {
+    it('sin semilla → una sola petición ids y muestra el nombre sin abrir el popover', async () => {
+        const id = uid('b')
+        const host = idsHost([{ id, label: 'Michelin' }])
+        render(
+            <ApiProvider client={host.api}>
+                <DynamicSelectField field={brand} value={id} onChange={vi.fn()} />
+            </ApiProvider>,
+        )
+        // Mientras resuelve: "Cargando…", nunca el UUID.
+        expect(screen.getByText('Cargando…')).toBeTruthy()
+        expect(screen.queryByText(id)).toBeNull()
+        expect(await screen.findByText('Michelin')).toBeTruthy()
+        expect(host.get).toHaveBeenCalledTimes(1)
+        expect(host.get).toHaveBeenCalledWith('/options/Brand', { params: { field: 'id', ids: id } })
+        expect(document.querySelector('[data-slot="record-picker-content"]')).toBeNull()
+    })
+
+    it('dos pickers de la misma ref (y uno repetido) → UNA petición con todos los ids', async () => {
+        const a = uid('b')
+        const b = uid('b')
+        const host = idsHost([
+            { id: a, label: 'Michelin' },
+            { id: b, label: 'Pirelli' },
+        ])
+        render(
+            <ApiProvider client={host.api}>
+                <DynamicSelectField field={brand} value={a} onChange={vi.fn()} />
+                <DynamicSelectField field={{ ...brand, key: 'alt_brand_id' }} value={b} onChange={vi.fn()} />
+                <DynamicSelectField field={{ ...brand, key: 'other_brand_id' }} value={a} onChange={vi.fn()} />
+            </ApiProvider>,
+        )
+        await waitFor(() => expect(screen.getAllByText('Michelin')).toHaveLength(2))
+        expect(screen.getByText('Pirelli')).toBeTruthy()
+        expect(host.get).toHaveBeenCalledTimes(1)
+        const ids = String(host.idsCalls()[0][1].params.ids).split(',').sort()
+        expect(ids).toEqual([a, b].sort())
+    })
+
+    it('con semilla → cero peticiones', async () => {
+        const id = uid('b')
+        const host = idsHost([{ id, label: 'Michelin' }])
+        render(
+            <ApiProvider client={host.api}>
+                <DynamicSelectField
+                    field={brand}
+                    value={id}
+                    onChange={vi.fn()}
+                    seedOption={{ id, value: id, label: 'Bridgestone', name: 'Bridgestone' }}
+                />
+            </ApiProvider>,
+        )
+        expect(screen.getByText('Bridgestone')).toBeTruthy()
+        await new Promise((r) => setTimeout(r, 30))
+        expect(host.get).not.toHaveBeenCalled()
+    })
+
+    it('id que ya no existe → «(registro eliminado)» sutil, no el UUID', async () => {
+        const id = uid('b')
+        const host = idsHost([])
+        render(
+            <ApiProvider client={host.api}>
+                <DynamicSelectField field={brand} value={id} onChange={vi.fn()} />
+            </ApiProvider>,
+        )
+        const missing = await screen.findByText('(registro eliminado)')
+        expect(missing.getAttribute('data-slot')).toBe('record-picker-value-missing')
+        expect(screen.queryByText(id)).toBeNull()
+    })
+
+    it('host sin soporte de ids (responde una página): filtra por id; si no está, muestra el valor como antes', async () => {
+        const known = uid('b')
+        const unknown = uid('b')
+        const page = [
+            { id: known, label: 'Michelin' },
+            { id: uid('x'), label: 'Otra' },
+        ]
+        // Ignores `ids` entirely.
+        const get = vi.fn(async () => ({ data: { success: true, data: page } }))
+        const api = { get, post: vi.fn(async () => ({ data: {} })), put: vi.fn(), delete: vi.fn() } as unknown as ApiClient
+        render(
+            <ApiProvider client={api}>
+                <DynamicSelectField field={brand} value={known} onChange={vi.fn()} />
+                <DynamicSelectField field={{ ...brand, key: 'b2' }} value={unknown} onChange={vi.fn()} />
+            </ApiProvider>,
+        )
+        expect(await screen.findByText('Michelin')).toBeTruthy()
+        expect(await screen.findByText(unknown)).toBeTruthy()
+        expect(screen.queryByText('(registro eliminado)')).toBeNull()
+    })
+
+    it('usa el QueryClient del host cuando hay QueryClientProvider', async () => {
+        const id = uid('b')
+        const host = idsHost([{ id, label: 'Goodyear' }])
+        const client = new QueryClient()
+        render(
+            <QueryClientProvider client={client}>
+                <ApiProvider client={host.api}>
+                    <DynamicSelectField field={brand} value={id} onChange={vi.fn()} />
+                </ApiProvider>
+            </QueryClientProvider>,
+        )
+        expect(await screen.findByText('Goodyear')).toBeTruthy()
+        expect(client.getQueryCache().findAll({ queryKey: ['metacore-option-ids'] })).toHaveLength(1)
+    })
+
+    it('múltiple: los ids fuera de la página se resuelven en una petición; el borrado se marca', async () => {
+        const inPage = uid('t')
+        const outside = uid('t')
+        const gone = uid('t')
+        const host = idsHost(
+            [
+                { id: inPage, label: 'Mayoreo' },
+                { id: outside, label: 'Flotillas' },
+            ],
+            [{ id: inPage, label: 'Mayoreo' }],
+        )
+        const field: ActionFieldDef = { key: 'segment_ids', label: 'Segmentos', type: 'dynamic_select', ref: 'Segment', multiple: true }
+        render(
+            <ApiProvider client={host.api} batch={false}>
+                <DynamicMultiSelectField field={field} value={[inPage, outside, gone]} onChange={vi.fn()} />
+            </ApiProvider>,
+        )
+        expect(await screen.findByText('Flotillas')).toBeTruthy()
+        expect(screen.getByText('Mayoreo')).toBeTruthy()
+        expect(await screen.findByText('(registro eliminado)')).toBeTruthy()
+        expect(screen.queryByText(outside)).toBeNull()
+        const calls = host.idsCalls()
+        expect(calls).toHaveLength(1)
+        expect(String(calls[0][1].params.ids).split(',').sort()).toEqual([outside, gone].sort())
+    })
+})