@asteby/metacore-runtime-react 23.7.1 → 23.9.0

package/src/__tests__/stage-layout.test.tsx

@@ -0,0 +1,210 @@
+// @vitest-environment happy-dom
+//
+// useStageLayout (per-org kanban lane-order persistence) + its non-intrusive
+// gating in DynamicKanban: the reset affordance only shows when a custom order
+// exists, and a missing `/stage-layout` endpoint leaves the board fully intact.
+import { afterEach, describe, expect, it, vi } from 'vitest'
+import {
+    cleanup,
+    fireEvent,
+    render,
+    renderHook,
+    screen,
+    waitFor,
+} from '@testing-library/react'
+import React from 'react'
+
+const I18N_T = (_k: string, opts?: { defaultValue?: string }) => opts?.defaultValue ?? _k
+const I18N = { language: 'es' }
+const USE_TRANSLATION = { t: I18N_T, i18n: I18N }
+vi.mock('react-i18next', () => ({
+    useTranslation: () => USE_TRANSLATION,
+}))
+vi.mock('@tanstack/react-router', () => ({
+    useNavigate: () => () => {},
+}))
+
+import { useStageLayout } from '../stage-layout'
+import { DynamicKanban } from '../dynamic-kanban'
+import { ApiProvider, type ApiClient } from '../api-context'
+import { useMetadataCache } from '../metadata-cache'
+import type { TableMetadata } from '../types'
+
+const STAGES = [
+    { key: 'backlog', label: 'Backlog', color: 'slate', order: 0 },
+    { key: 'in_progress', label: 'In Progress', color: 'blue', order: 1 },
+    { key: 'done', label: 'Done', color: 'green', order: 2 },
+]
+
+function meta(): 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, color: s.color })),
+            },
+        ],
+        actions: [],
+        perPageOptions: [50],
+        defaultPerPage: 50,
+        searchPlaceholder: 'Buscar...',
+        enableCRUDActions: true,
+        hasActions: false,
+    }
+}
+
+const CARDS = [{ id: 1, title: 'Fix login bug', stage: 'backlog' }]
+
+function fakeApi(over: Partial<ApiClient> = {}, stageLayoutData: any = { model: 'issue', stage_order: null }): ApiClient {
+    const ok = (data: unknown) => ({ data: { success: true, data } })
+    return {
+        get: vi.fn(async (url: string) => {
+            if (url.startsWith('/metadata/table/')) return ok(meta())
+            if (url.startsWith('/stage-layout')) return ok(stageLayoutData)
+            if (url.startsWith('/custom-stages')) return { data: { success: false } }
+            return ok(CARDS)
+        }),
+        post: vi.fn(async () => ok(null)),
+        put: vi.fn(async () => ok(null)),
+        delete: vi.fn(async () => ok(null)),
+        ...over,
+    }
+}
+
+const wrapper =
+    (client: ApiClient) =>
+    ({ children }: { children: React.ReactNode }) =>
+        <ApiProvider client={client}>{children}</ApiProvider>
+
+afterEach(cleanup)
+
+describe('useStageLayout', () => {
+    it('reports available + hasCustomLayout from the GET', async () => {
+        const api = fakeApi({}, { model: 'issue', stage_order: ['done', 'backlog', 'in_progress'] })
+        const { result } = renderHook(() => useStageLayout('issue'), {
+            wrapper: wrapper(api),
+        })
+        await waitFor(() => expect(result.current.available).toBe(true))
+        expect(result.current.hasCustomLayout).toBe(true)
+    })
+
+    it('is unavailable when the endpoint 404s (drag stays off)', async () => {
+        const api = fakeApi({
+            get: vi.fn(async (url: string) => {
+                if (url.startsWith('/stage-layout')) throw new Error('404')
+                return { data: { success: true, data: meta() } }
+            }),
+        })
+        const { result } = renderHook(() => useStageLayout('issue'), {
+            wrapper: wrapper(api),
+        })
+        // give the effect a tick
+        await waitFor(() => expect(api.get).toHaveBeenCalled())
+        await new Promise((r) => setTimeout(r, 0))
+        expect(result.current.available).toBe(false)
+        expect(result.current.hasCustomLayout).toBe(false)
+    })
+
+    it('save PUTs the full order and reset DELETEs', async () => {
+        const put = vi.fn(async () => ({ data: { success: true, data: null } }))
+        const del = vi.fn(async () => ({ data: { success: true, data: null } }))
+        const api = fakeApi({ put, delete: del })
+        const { result } = renderHook(() => useStageLayout('issue'), {
+            wrapper: wrapper(api),
+        })
+        await waitFor(() => expect(result.current.available).toBe(true))
+
+        await result.current.save(['done', 'backlog', 'in_progress'])
+        expect(put).toHaveBeenCalledWith('/stage-layout', {
+            model: 'issue',
+            stage_order: ['done', 'backlog', 'in_progress'],
+        })
+        await waitFor(() => expect(result.current.hasCustomLayout).toBe(true))
+
+        await result.current.reset()
+        expect(del).toHaveBeenCalledWith('/stage-layout?model=issue')
+    })
+
+    it('save re-throws on a {success:false} envelope', async () => {
+        const put = vi.fn(async () => ({ data: { success: false, message: 'nope' } }))
+        const api = fakeApi({ put })
+        const { result } = renderHook(() => useStageLayout('issue'), {
+            wrapper: wrapper(api),
+        })
+        await waitFor(() => expect(result.current.available).toBe(true))
+        await expect(result.current.save(['a', 'b'])).rejects.toThrow()
+    })
+})
+
+describe('DynamicKanban stage-layout gating', () => {
+    it('shows the reset-order affordance only when a custom order exists', async () => {
+        useMetadataCache.getState().setMetadata('issue', meta())
+        const api = fakeApi({}, { model: 'issue', stage_order: ['done', 'backlog', 'in_progress'] })
+        render(
+            <ApiProvider client={api}>
+                <DynamicKanban model="issue" />
+            </ApiProvider>,
+        )
+        await screen.findByText('Backlog')
+        expect(
+            await screen.findByTestId('kanban-reset-order'),
+        ).toBeTruthy()
+    })
+
+    it('resets the order: DELETE + metadata refetch', async () => {
+        useMetadataCache.getState().setMetadata('issue', meta())
+        const del = vi.fn(async () => ({ data: { success: true, data: null } }))
+        const api = fakeApi({ delete: del }, { model: 'issue', stage_order: ['done', 'backlog', 'in_progress'] })
+        render(
+            <ApiProvider client={api}>
+                <DynamicKanban model="issue" />
+            </ApiProvider>,
+        )
+        const btn = await screen.findByTestId('kanban-reset-order')
+        const metaCallsBefore = (api.get as any).mock.calls.filter((c: any[]) =>
+            String(c[0]).startsWith('/metadata/table/'),
+        ).length
+        fireEvent.click(btn)
+        await waitFor(() => expect(del).toHaveBeenCalledWith('/stage-layout?model=issue'))
+        // a fresh metadata GET followed the reset (falls back to declared order)
+        await waitFor(() => {
+            const after = (api.get as any).mock.calls.filter((c: any[]) =>
+                String(c[0]).startsWith('/metadata/table/'),
+            ).length
+            expect(after).toBeGreaterThan(metaCallsBefore)
+        })
+    })
+
+    it('a missing /stage-layout endpoint leaves the board intact (no reset, lanes + cards render)', async () => {
+        useMetadataCache.getState().setMetadata('issue', meta())
+        const api = fakeApi({
+            get: vi.fn(async (url: string) => {
+                if (url.startsWith('/metadata/table/')) return { data: { success: true, data: meta() } }
+                if (url.startsWith('/stage-layout')) throw new Error('404')
+                if (url.startsWith('/custom-stages')) return { data: { success: false } }
+                return { data: { success: true, data: CARDS } }
+            }),
+        })
+        render(
+            <ApiProvider client={api}>
+                <DynamicKanban model="issue" />
+            </ApiProvider>,
+        )
+        // board still paints every lane + a card
+        expect(await screen.findByText('Backlog')).toBeTruthy()
+        expect(screen.getByText('Done')).toBeTruthy()
+        expect(await screen.findByText('Fix login bug')).toBeTruthy()
+        // no reset affordance without a wired endpoint
+        expect(screen.queryByTestId('kanban-reset-order')).toBeNull()
+    })
+})

package/src/__tests__/stage-overrides.test.tsx

@@ -0,0 +1,293 @@
+// @vitest-environment happy-dom
+//
+// Stage overrides (the per-lane ⚙ gear) coverage:
+//   1. useStageOverrides: available flips on GET success/404; save PUTs the
+//      {model, stage_key, ...patch} body; reset DELETEs with model + stage_key.
+//   2. cardMatchesStageFilters: the client-side belt-and-suspenders over the
+//      unscoped initial board page (eq/neq/contains/in).
+//   3. StageConfigDialog: a DECLARED lane saves via onSaveOverride + resets when
+//      overridden; a CUSTOM lane saves via onUpdateCustom + deletes via onDelete.
+import { afterEach, describe, expect, it, vi } from 'vitest'
+import { cleanup, render, screen, fireEvent, waitFor } from '@testing-library/react'
+
+const I18N_T = (k: string, opts?: Record<string, any>) => {
+    let s = (opts?.defaultValue as string) ?? k
+    if (opts) {
+        for (const [ok, ov] of Object.entries(opts)) {
+            if (ok === 'defaultValue') continue
+            s = s.replace(new RegExp(`{{${ok}}}`, 'g'), String(ov))
+        }
+    }
+    return s
+}
+const USE_TRANSLATION = { t: I18N_T, i18n: { language: 'es' } }
+vi.mock('react-i18next', () => ({ useTranslation: () => USE_TRANSLATION }))
+vi.mock('sonner', () => ({ toast: { success: vi.fn(), error: vi.fn() } }))
+
+import React from 'react'
+import { cardMatchesStageFilters, StageConfigDialog, type CustomStage, type StageConfigTarget } from '../custom-stages'
+import { useStageOverrides } from '../stage-overrides'
+import { ApiProvider, type ApiClient } from '../api-context'
+import type { ColumnDefinition } from '../types'
+
+afterEach(cleanup)
+
+const COLUMNS: ColumnDefinition[] = [
+    { key: 'title', label: 'Title', type: 'text', sortable: true, filterable: false },
+    { key: 'priority', label: 'Priority', type: 'text', sortable: false, filterable: false },
+    { key: 'id', label: 'ID', type: 'text', sortable: false, filterable: false },
+]
+
+function fakeApi(over: Partial<ApiClient> = {}): ApiClient {
+    const ok = (data: unknown) => ({ data: { success: true, data } })
+    return {
+        get: vi.fn(async () => ok([])),
+        post: vi.fn(async () => ok(null)),
+        put: vi.fn(async () => ok(null)),
+        delete: vi.fn(async () => ok(null)),
+        ...over,
+    }
+}
+
+// ---------------------------------------------------------------------------
+// 1. useStageOverrides
+// ---------------------------------------------------------------------------
+
+function OverridesProbe({ model }: { model: string }) {
+    const o = useStageOverrides(model)
+    return (
+        <div>
+            <span data-testid="available">{String(o.available)}</span>
+            <button data-testid="save" onClick={() => void o.save('backlog', { label: 'Nuevo', color: 'blue', filters: [{ field: 'priority', op: 'eq', value: 'high' }] })} />
+            <button data-testid="reset" onClick={() => void o.reset('backlog')} />
+        </div>
+    )
+}
+
+describe('useStageOverrides', () => {
+    it('reports available after a successful GET and PUTs/DELETEs the right shape', async () => {
+        const api = fakeApi()
+        render(
+            <ApiProvider client={api}>
+                <OverridesProbe model="issue" />
+            </ApiProvider>,
+        )
+        await waitFor(() => expect(screen.getByTestId('available').textContent).toBe('true'))
+        expect(api.get).toHaveBeenCalledWith('/stage-overrides?model=issue')
+
+        fireEvent.click(screen.getByTestId('save'))
+        await waitFor(() =>
+            expect(api.put).toHaveBeenCalledWith('/stage-overrides', {
+                model: 'issue',
+                stage_key: 'backlog',
+                label: 'Nuevo',
+                color: 'blue',
+                filters: [{ field: 'priority', op: 'eq', value: 'high' }],
+            }),
+        )
+
+        fireEvent.click(screen.getByTestId('reset'))
+        await waitFor(() =>
+            expect(api.delete).toHaveBeenCalledWith(
+                '/stage-overrides?model=issue&stage_key=backlog',
+            ),
+        )
+    })
+
+    it('degrades to available=false when the endpoint 404s', async () => {
+        const api = fakeApi({ get: vi.fn(async () => Promise.reject(new Error('404'))) })
+        render(
+            <ApiProvider client={api}>
+                <OverridesProbe model="issue" />
+            </ApiProvider>,
+        )
+        await waitFor(() => expect(screen.getByTestId('available').textContent).toBe('false'))
+    })
+})
+
+// ---------------------------------------------------------------------------
+// 2. cardMatchesStageFilters
+// ---------------------------------------------------------------------------
+
+describe('cardMatchesStageFilters', () => {
+    it('applies eq / neq / contains (array + string) / in', () => {
+        expect(cardMatchesStageFilters({ priority: 'high' }, [{ field: 'priority', op: 'eq', value: 'high' }])).toBe(true)
+        expect(cardMatchesStageFilters({ priority: 'low' }, [{ field: 'priority', op: 'eq', value: 'high' }])).toBe(false)
+        expect(cardMatchesStageFilters({ priority: 'low' }, [{ field: 'priority', op: 'neq', value: 'high' }])).toBe(true)
+        // contains against a jsonb array membership + a string substring
+        expect(cardMatchesStageFilters({ tags: ['a', 'b'] }, [{ field: 'tags', op: 'contains', value: 'b' }])).toBe(true)
+        expect(cardMatchesStageFilters({ title: 'hello world' }, [{ field: 'title', op: 'contains', value: 'world' }])).toBe(true)
+        // in: comma-separated candidates
+        expect(cardMatchesStageFilters({ priority: 'mid' }, [{ field: 'priority', op: 'in', value: 'mid,high' }])).toBe(true)
+        expect(cardMatchesStageFilters({ priority: 'low' }, [{ field: 'priority', op: 'in', value: 'mid,high' }])).toBe(false)
+    })
+
+    it('AND-combines multiple conditions and passes empty/blank ones', () => {
+        expect(
+            cardMatchesStageFilters({ priority: 'high', assignee: 'ana' }, [
+                { field: 'priority', op: 'eq', value: 'high' },
+                { field: 'assignee', op: 'eq', value: 'ana' },
+            ]),
+        ).toBe(true)
+        expect(cardMatchesStageFilters({ priority: 'high' }, [])).toBe(true)
+        expect(cardMatchesStageFilters({ priority: 'high' }, [{ field: 'priority', op: 'eq', value: '  ' }])).toBe(true)
+    })
+})
+
+// ---------------------------------------------------------------------------
+// 3. StageConfigDialog
+// ---------------------------------------------------------------------------
+
+const DECLARED_TARGET: StageConfigTarget = {
+    kind: 'declared',
+    stageKey: 'backlog',
+    label: 'Backlog',
+    color: 'slate',
+    filters: [],
+    overridden: false,
+}
+
+const CUSTOM_STAGE: CustomStage = {
+    id: 42,
+    model: 'issue',
+    key: 'urgent',
+    label: 'Urgente',
+    color: 'red',
+    position: 5,
+    type: 'stage',
+    filters: [],
+    enabled: true,
+}
+
+function renderConfig(target: StageConfigTarget, handlers: Partial<React.ComponentProps<typeof StageConfigDialog>> = {}) {
+    const props = {
+        open: true,
+        onOpenChange: vi.fn(),
+        columns: COLUMNS,
+        target,
+        onSaveOverride: vi.fn(async () => {}),
+        onResetOverride: vi.fn(async () => {}),
+        onUpdateCustom: vi.fn(async () => {}),
+        onDeleteCustom: vi.fn(),
+        ...handlers,
+    }
+    render(<StageConfigDialog {...props} />)
+    return props
+}
+
+describe('StageConfigDialog', () => {
+    it('a DECLARED lane saves label/color/conditions via onSaveOverride', async () => {
+        const props = renderConfig(DECLARED_TARGET)
+        fireEvent.change(screen.getByTestId('stage-config-name'), { target: { value: 'Pendientes' } })
+        fireEvent.click(screen.getByTestId('stage-config-color-blue'))
+        // add a condition
+        fireEvent.click(screen.getByTestId('stage-config-add-first-condition'))
+        fireEvent.change(screen.getByTestId('custom-stage-condition-value-0'), { target: { value: 'high' } })
+        fireEvent.click(screen.getByTestId('stage-config-save'))
+        await waitFor(() => expect(props.onSaveOverride).toHaveBeenCalled())
+        const [stageKey, patch] = (props.onSaveOverride as any).mock.calls[0]
+        expect(stageKey).toBe('backlog')
+        expect(patch.label).toBe('Pendientes')
+        expect(patch.color).toBe('blue')
+        expect(patch.filters).toEqual([{ field: 'title', op: 'eq', value: 'high' }])
+    })
+
+    it('pre-populates the WHOLE form from the lane (label, color, existing conditions)', () => {
+        renderConfig({
+            ...DECLARED_TARGET,
+            label: 'En revisión',
+            color: 'amber',
+            filters: [{ field: 'priority', op: 'eq', value: 'high' }],
+        })
+        // Name + color pre-filled from the current lane state.
+        expect((screen.getByTestId('stage-config-name') as HTMLInputElement).value).toBe('En revisión')
+        expect(screen.getByTestId('stage-config-color-amber').getAttribute('aria-pressed')).toBe('true')
+        // The existing condition is loaded into the builder, editable.
+        expect((screen.getByTestId('custom-stage-condition-value-0') as HTMLInputElement).value).toBe('high')
+    })
+
+    it('renders the current-conditions chips: locked base chip, final chip, removable filter chips', () => {
+        renderConfig({
+            ...DECLARED_TARGET,
+            label: 'Hecho',
+            isFinal: true,
+            filters: [
+                { field: 'state', op: 'eq', value: 'open' },
+                { field: 'priority', op: 'neq', value: 'low' },
+            ],
+        })
+        // Base chip is always present and shows the stage scope.
+        const base = screen.getByTestId('stage-config-base-chip')
+        expect(base.textContent).toContain('Etapa = Hecho')
+        // Final chip renders for a terminal stage.
+        expect(screen.getByTestId('stage-config-final-chip')).toBeTruthy()
+        // One editable chip per extra condition, with legible operators.
+        expect(screen.getByTestId('stage-config-filter-chip-0').textContent).toContain('state')
+        expect(screen.getByTestId('stage-config-filter-chip-0').textContent).toContain('=')
+        expect(screen.getByTestId('stage-config-filter-chip-1').textContent).toContain('≠')
+    })
+
+    it('removing a condition chip drops it from the builder', () => {
+        renderConfig({
+            ...DECLARED_TARGET,
+            filters: [
+                { field: 'state', op: 'eq', value: 'open' },
+                { field: 'priority', op: 'neq', value: 'low' },
+            ],
+        })
+        expect(screen.getByTestId('stage-config-filter-chip-1')).toBeTruthy()
+        fireEvent.click(screen.getByTestId('stage-config-filter-chip-remove-1'))
+        expect(screen.queryByTestId('stage-config-filter-chip-1')).toBeNull()
+        // The first condition survives.
+        expect(screen.getByTestId('stage-config-filter-chip-0')).toBeTruthy()
+    })
+
+    it('shows the "Personalizada" badge and a reset confirm listing the original values', async () => {
+        renderConfig({ ...DECLARED_TARGET, overridden: false })
+        expect(screen.queryByTestId('stage-config-reset')).toBeNull()
+        cleanup()
+        const props = renderConfig({
+            ...DECLARED_TARGET,
+            overridden: true,
+            original: {
+                label: 'Backlog',
+                color: 'slate',
+                filters: [{ field: 'state', op: 'eq', value: 'todo' }],
+            },
+        })
+        expect(screen.getByTestId('stage-config-personalizada')).toBeTruthy()
+        // First click reveals the confirm panel spelling out what reverts.
+        fireEvent.click(screen.getByTestId('stage-config-reset'))
+        const panel = screen.getByTestId('stage-config-reset-confirm-panel')
+        expect(panel.textContent).toContain('Backlog')
+        expect(panel.textContent).toContain('slate')
+        expect(panel.textContent).toContain('state = todo')
+        expect(props.onResetOverride).not.toHaveBeenCalled()
+        // The confirm button actually drops the override.
+        fireEvent.click(screen.getByTestId('stage-config-reset-confirm'))
+        await waitFor(() => expect(props.onResetOverride).toHaveBeenCalledWith('backlog'))
+    })
+
+    it('a CUSTOM lane saves via onUpdateCustom and deletes via onDeleteCustom', async () => {
+        const target: StageConfigTarget = {
+            kind: 'custom',
+            stageKey: 'urgent',
+            id: 42,
+            label: 'Urgente',
+            color: 'red',
+            filters: [],
+            customStage: CUSTOM_STAGE,
+        }
+        const props = renderConfig(target)
+        expect(screen.queryByTestId('stage-config-reset')).toBeNull()
+        fireEvent.change(screen.getByTestId('stage-config-name'), { target: { value: 'Muy urgente' } })
+        fireEvent.click(screen.getByTestId('stage-config-save'))
+        await waitFor(() => expect(props.onUpdateCustom).toHaveBeenCalled())
+        const [id, patch] = (props.onUpdateCustom as any).mock.calls[0]
+        expect(id).toBe(42)
+        expect(patch.label).toBe('Muy urgente')
+
+        fireEvent.click(screen.getByTestId('stage-config-delete'))
+        expect(props.onDeleteCustom).toHaveBeenCalledWith(CUSTOM_STAGE)
+    })
+})