@asteby/metacore-runtime-react 49.4.0 → 49.6.0

package/src/__tests__/business-pickers.test.tsx

@@ -1,7 +1,7 @@
 // @vitest-environment happy-dom
 // #1025 VehiclePicker, #1026 RelateDocuments, #1027 PrintSendDialog.
 import { afterEach, describe, expect, it, vi } from 'vitest'
-import { cleanup, fireEvent, render, screen, waitFor } from '@testing-library/react'
+import { cleanup, fireEvent, render, screen, waitFor, within } from '@testing-library/react'
 
 vi.mock('react-i18next', () => ({
     useTranslation: () => ({ t: (k: string, o?: any) => o?.defaultValue ?? k, i18n: { language: 'es' } }),
@@ -49,7 +49,9 @@ describe('VehiclePicker', () => {
         fireEvent.change(screen.getByPlaceholderText('Placa o VIN'), { target: { value: 'ABC' } })
         const opt = await screen.findByRole('option')
         expect(search.mock.calls[0][0]).toBe('ABC')
-        fireEvent.click(opt.querySelector('button')!)
+        // La opción misma es el elemento interactivo (RecordPicker: role=option
+        // sin <button> anidado, como pide ARIA para listbox).
+        fireEvent.click(opt)
         expect(onChange).toHaveBeenCalledWith(veh)
     })
 
@@ -102,7 +104,8 @@ describe('RelateDocuments', () => {
         const { rerender } = render(<RelateDocuments value={value} onChange={onChange} relationTypes={types} search={search} />)
         fireEvent.change(screen.getByPlaceholderText('Buscar por folio o UUID'), { target: { value: 'A-' } })
         const list = await screen.findByRole('listbox')
-        fireEvent.click(list.querySelectorAll('button')[0])
+        // RecordPicker: se elige la opción (role=option), no un <button> interno.
+        fireEvent.click((await within(list).findAllByRole('option'))[0]!)
         expect(onChange).toHaveBeenLastCalledWith([
             expect.objectContaining({ related_document_id: 'd1', relation_type: '01', uuid: 'UUID-1', folio: 'A-1' }),
         ])

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__/dynamic-table-bulk-actions.test.tsx

@@ -0,0 +1,140 @@
+// @vitest-environment happy-dom
+//
+// DynamicTable `extraBulkActions` / `hideBulkDelete`:
+//   1. Host actions render in the floating bar once rows are selected and
+//      receive the selected rows / ids.
+//   2. `clearSelection()` empties the selection.
+//   3. Changing page drops the selection (classic pagination) so a bulk
+//      action can never target rows that are no longer visible.
+//   4. `hideBulkDelete` removes the built-in "Eliminar".
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import { cleanup, fireEvent, 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 }) => {
+        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 { makeDefaultGetDynamicColumns } from '../dynamic-columns'
+import { ApiProvider, type ApiClient } from '../api-context'
+import { useMetadataCache } from '../metadata-cache'
+import type { TableMetadata } from '../types'
+
+afterEach(cleanup)
+
+const getDynamicColumns = makeDefaultGetDynamicColumns()
+
+function meta(): TableMetadata {
+    return {
+        title: 'Issues',
+        endpoint: '/data/issue',
+        columns: [
+            { key: 'title', label: 'Title', type: 'text', sortable: true, filterable: false, searchable: true },
+        ],
+        actions: [],
+        perPageOptions: [10, 20, 50],
+        defaultPerPage: 10,
+        searchPlaceholder: 'Buscar...',
+        enableCRUDActions: false,
+        hasActions: false,
+    }
+}
+
+function fakeApi(total: number): ApiClient {
+    const ok = (data: unknown) => ({ data: { success: true, data, meta: { total } } })
+    return {
+        get: vi.fn(async (url: string, cfg?: any) => {
+            if (url.startsWith('/metadata/table/')) return ok(meta())
+            if (url.endsWith('/facets')) return ok([])
+            const p = cfg?.params?.page ?? 1
+            const size = cfg?.params?.per_page ?? 10
+            const rows: Array<{ id: number; title: string }> = []
+            for (let i = (p - 1) * size; i < Math.min(p * size, total); i++) rows.push({ id: i + 1, title: `Issue ${i + 1}` })
+            return ok(rows)
+        }),
+        post: vi.fn(async () => ok(null)),
+        put: vi.fn(async () => ok(null)),
+        delete: vi.fn(async () => ok(null)),
+    }
+}
+
+async function selectFirstRow() {
+    await screen.findAllByText('Issue 1')
+    const boxes = screen.getAllByRole('checkbox')
+    fireEvent.click(boxes[1]) // [0] is the select-all header checkbox
+}
+
+describe('DynamicTable extraBulkActions', () => {
+    beforeEach(() => {
+        localStorage.clear()
+        sessionStorage.clear()
+        useMetadataCache.getState().setMetadata('issue', meta())
+    })
+
+    it('renders host actions with the selection and lets them clear it', async () => {
+        const seen: unknown[] = []
+        render(
+            <ApiProvider client={fakeApi(5)}>
+                <DynamicTable
+                    model="issue"
+                    enableUrlSync={false} getDynamicColumns={getDynamicColumns}
+                    extraBulkActions={({ selectedRows, selectedIds, clearSelection }) => (
+                        <button onClick={() => { seen.push({ rows: selectedRows.length, ids: selectedIds }); clearSelection() }}>
+                            Aprobar seleccionados
+                        </button>
+                    )}
+                />
+            </ApiProvider>,
+        )
+        expect(screen.queryByText('Aprobar seleccionados')).toBeNull()
+        await selectFirstRow()
+        fireEvent.click(await screen.findByText('Aprobar seleccionados'))
+        expect(seen).toEqual([{ rows: 1, ids: [1] }])
+        await waitFor(() => expect(screen.queryByText('Aprobar seleccionados')).toBeNull())
+    })
+
+    it('accepts a plain node and keeps the built-in delete by default', async () => {
+        render(
+            <ApiProvider client={fakeApi(5)}>
+                <DynamicTable model="issue" enableUrlSync={false} getDynamicColumns={getDynamicColumns} extraBulkActions={<button>Extra</button>} />
+            </ApiProvider>,
+        )
+        await selectFirstRow()
+        expect(await screen.findByText('Extra')).toBeTruthy()
+        expect(screen.getByText('Eliminar')).toBeTruthy()
+    })
+
+    it('hideBulkDelete removes the built-in delete', async () => {
+        render(
+            <ApiProvider client={fakeApi(5)}>
+                <DynamicTable model="issue" enableUrlSync={false} getDynamicColumns={getDynamicColumns} hideBulkDelete extraBulkActions={<button>Extra</button>} />
+            </ApiProvider>,
+        )
+        await selectFirstRow()
+        expect(await screen.findByText('Extra')).toBeTruthy()
+        expect(screen.queryByText('Eliminar')).toBeNull()
+    })
+
+    it('drops the selection when the page changes', async () => {
+        render(
+            <ApiProvider client={fakeApi(25)}>
+                <DynamicTable model="issue" enableUrlSync={false} getDynamicColumns={getDynamicColumns} extraBulkActions={<button>Extra</button>} />
+            </ApiProvider>,
+        )
+        await selectFirstRow()
+        expect(await screen.findByText('Extra')).toBeTruthy()
+        fireEvent.click(await screen.findByRole('button', { name: /siguiente|next/i }))
+        await screen.findAllByText('Issue 11')
+        await waitFor(() => expect(screen.queryByText('Extra')).toBeNull())
+    })
+})

package/src/__tests__/dynamic-table-load-error.test.tsx

@@ -0,0 +1,97 @@
+// @vitest-environment happy-dom
+//
+// Un fallo del endpoint de lista que NO es 403 (500, red, `success: false`)
+// no debe verse como "sin resultados": se muestra "No se pudieron cargar los
+// datos" con "Reintentar", que vuelve a pedir la lista. `emptyState` solo
+// reemplaza el vacío cuando la lista cargó bien y no hay filtros activos.
+import { afterEach, describe, expect, it, vi } from 'vitest'
+import { cleanup, fireEvent, render, screen, waitFor } from '@testing-library/react'
+
+vi.mock('@tanstack/react-router', () => ({ useNavigate: () => () => {} }))
+
+import { ApiProvider, type ApiClient } from '../api-context'
+import { useMetadataCache } from '../metadata-cache'
+import { DynamicTable } from '../dynamic-table'
+import type { TableMetadata } from '../types'
+
+afterEach(cleanup)
+
+const meta = {
+    title: 'Ajustes',
+    endpoint: '/data/load_err',
+    columns: [],
+    actions: [],
+    perPageOptions: [10],
+    defaultPerPage: 10,
+    searchPlaceholder: 'Buscar...',
+    enableCRUDActions: false,
+    hasActions: false,
+} as unknown as TableMetadata
+
+type ListResult = 'error500' | 'successFalse' | 'empty'
+
+function mount(results: ListResult[], model: string, extra: Record<string, unknown> = {}) {
+    useMetadataCache.getState().setMetadata(model, meta)
+    let listCalls = 0
+    const client: ApiClient = {
+        get: vi.fn(async (url: string) => {
+            if (url.startsWith('/metadata/table/')) return { data: { success: true, data: meta } }
+            if (url.endsWith('/facets')) return { data: { success: true, data: [] } }
+            const r = results[Math.min(listCalls, results.length - 1)]
+            listCalls++
+            if (r === 'error500') throw Object.assign(new Error('500'), { response: { status: 500 } })
+            if (r === 'successFalse') return { data: { success: false, message: 'boom' } }
+            return { data: { success: true, data: [], meta: { total: 0 } } }
+        }),
+        post: vi.fn(async () => ({ data: { success: true, data: null } })),
+        put: vi.fn(async () => ({ data: { success: true, data: null } })),
+        delete: vi.fn(async () => ({ data: { success: true, data: null } })),
+    }
+    render(
+        <ApiProvider client={client}>
+            <DynamicTable model={model} enableUrlSync={false} {...extra} />
+        </ApiProvider>,
+    )
+    return () => listCalls
+}
+
+describe('DynamicTable — fallo de la lista (no 403)', () => {
+    it('un 500 muestra error con Reintentar, no "No se encontraron resultados"', async () => {
+        vi.spyOn(console, 'error').mockImplementation(() => {})
+        mount(['error500'], 'lerr_a')
+        expect((await screen.findAllByText('No se pudieron cargar los datos')).length).toBeGreaterThan(0)
+        expect(screen.queryByText('No se encontraron resultados')).toBeNull()
+        expect(screen.queryByText('Sin permiso para ver este módulo')).toBeNull()
+    })
+
+    it('`success: false` también es un error de carga', async () => {
+        mount(['successFalse'], 'lerr_b')
+        expect((await screen.findAllByText('No se pudieron cargar los datos')).length).toBeGreaterThan(0)
+    })
+
+    it('Reintentar vuelve a pedir la lista y, si ahora carga, limpia el error', async () => {
+        vi.spyOn(console, 'error').mockImplementation(() => {})
+        const calls = mount(['error500', 'empty'], 'lerr_c')
+        const retry = (await screen.findAllByRole('button', { name: 'Reintentar' }))[0]
+        const before = calls()
+        fireEvent.click(retry)
+        await waitFor(() => expect(calls()).toBeGreaterThan(before))
+        await waitFor(() => expect(screen.queryByText('No se pudieron cargar los datos')).toBeNull())
+        expect((await screen.findAllByText('No se encontraron resultados')).length).toBeGreaterThan(0)
+    })
+})
+
+describe('DynamicTable — emptyState', () => {
+    it('reemplaza el vacío cuando la lista cargó bien y no hay filtros', async () => {
+        mount(['empty'], 'lerr_d', { emptyState: <p>Aún no hay registros</p> })
+        expect((await screen.findAllByText('Aún no hay registros')).length).toBeGreaterThan(0)
+        expect(screen.queryByText('No se encontraron resultados')).toBeNull()
+    })
+
+    it('no tapa un error de carga', async () => {
+        vi.spyOn(console, 'error').mockImplementation(() => {})
+        mount(['error500'], 'lerr_e', { emptyState: <p>Aún no hay registros</p> })
+        expect((await screen.findAllByText('No se pudieron cargar los datos')).length).toBeGreaterThan(0)
+        expect(screen.queryByText('Aún no hay registros')).toBeNull()
+    })
+})