@open-mercato/ui 0.8.1-develop.7296.1.2111d779db → 0.8.1-develop.7441.1.b42958b98c

package/src/backend/__tests__/AttachmentsSection.upload.test.tsx

@@ -0,0 +1,183 @@
+/** @jest-environment jsdom */
+
+import * as React from 'react'
+import { act, fireEvent, screen, waitFor } from '@testing-library/react'
+import { renderWithProviders } from '@open-mercato/shared/lib/testing/renderWithProviders'
+import { AttachmentsSection } from '../detail/AttachmentsSection'
+import { apiCall } from '@open-mercato/ui/backend/utils/apiCall'
+
+jest.mock('@open-mercato/ui/backend/utils/apiCall', () => ({
+  apiCall: jest.fn(),
+}))
+
+jest.mock('../injection/useRegisteredComponent', () => ({
+  useRegisteredComponent: <T,>(_handle: string, fallback?: React.ComponentType<T>) =>
+    fallback ?? ((() => null) as React.ComponentType<T>),
+}))
+
+jest.mock('../detail/AttachmentMetadataDialog', () => ({
+  AttachmentMetadataDialog: () => null,
+}))
+
+jest.mock('../detail/AttachmentDeleteDialog', () => ({
+  AttachmentDeleteDialog: () => null,
+}))
+
+const REJECTION = 'Executable file types are not allowed as attachments.'
+
+type StoredItem = { id: string; fileName: string; fileSize: number; mimeType: string }
+
+/**
+ * Emulates `/api/attachments` for one record: POST persists the file unless its
+ * name ends in `.exe` (the route's dangerous-executable 400), GET lists what was
+ * persisted. `holdUploads` parks each POST until `releaseUpload` is called so a
+ * test can interact with the section while an upload is in flight.
+ */
+function createServer({ holdUploads = false } = {}) {
+  const stored: StoredItem[] = []
+  const posted: string[] = []
+  const pending: Array<() => void> = []
+  let holding = holdUploads
+  let listCalls = 0
+  ;(apiCall as jest.Mock).mockImplementation(async (url: string, init?: { method?: string; body?: FormData }) => {
+    if (init?.method === 'POST') {
+      const file = init.body?.get('file') as File
+      posted.push(file.name)
+      if (holding) await new Promise<void>((resolve) => pending.push(resolve))
+      if (file.name.endsWith('.exe')) {
+        return { ok: false, status: 400, result: { error: REJECTION }, response: { status: 400 } }
+      }
+      const item = { id: `att-${stored.length + 1}`, fileName: file.name, fileSize: file.size, mimeType: 'text/plain' }
+      stored.push(item)
+      return { ok: true, status: 200, result: { ok: true, item }, response: { status: 200 } }
+    }
+    if (url.startsWith('/api/attachments?')) {
+      listCalls += 1
+      return { ok: true, status: 200, result: { items: [...stored], page: 1, pageSize: 24 }, response: { status: 200 } }
+    }
+    return { ok: true, status: 200, result: {}, response: { status: 200 } }
+  })
+  return {
+    stored,
+    posted,
+    listCalls: () => listCalls,
+    pendingUploads: () => pending.length,
+    releaseAll: () => {
+      holding = false
+      pending.splice(0).forEach((resolve) => resolve())
+    },
+  }
+}
+
+function textFile(name: string): File {
+  return new File([`harmless text for ${name}`], name, { type: 'text/plain' })
+}
+
+function fileInput(container: HTMLElement): HTMLInputElement {
+  const input = container.querySelector('input[type="file"]')
+  if (!input) throw new Error('file input not rendered')
+  return input as HTMLInputElement
+}
+
+function selectFiles(container: HTMLElement, names: string[]) {
+  fireEvent.change(fileInput(container), { target: { files: names.map(textFile) } })
+}
+
+async function renderSection(onChanged = jest.fn()) {
+  const view = renderWithProviders(
+    <AttachmentsSection entityId="customers:customer_entity" recordId="record-1" onChanged={onChanged} />,
+    { dict: {} },
+  )
+  await screen.findByText('No attachments found.')
+  return { ...view, onChanged }
+}
+
+async function waitForIdle() {
+  await waitFor(() => expect(screen.getByRole('button', { name: 'Choose files' })).toBeEnabled())
+}
+
+describe('AttachmentsSection multi-file upload (#6397)', () => {
+  beforeEach(() => {
+    jest.resetAllMocks()
+  })
+
+  it('uploads every file and refreshes the list when all succeed', async () => {
+    const server = createServer()
+    const { container, onChanged } = await renderSection()
+
+    selectFiles(container, ['ok-a.txt', 'ok-b.txt', 'ok-c.txt'])
+
+    expect(await screen.findByText('ok-c.txt')).toBeInTheDocument()
+    await waitForIdle()
+    expect(server.posted).toEqual(['ok-a.txt', 'ok-b.txt', 'ok-c.txt'])
+    expect(screen.getByText('ok-a.txt')).toBeInTheDocument()
+    expect(screen.getByText('ok-b.txt')).toBeInTheDocument()
+    expect(screen.queryByRole('alert')).toBeNull()
+    expect(onChanged).toHaveBeenCalledTimes(1)
+  })
+
+  it('stops at a rejected first file, announces the error and changes nothing', async () => {
+    const server = createServer()
+    const { container, onChanged } = await renderSection()
+
+    selectFiles(container, ['blocked.exe', 'ok-b.txt', 'ok-c.txt'])
+
+    expect(await screen.findByRole('alert')).toHaveTextContent(REJECTION)
+    await waitForIdle()
+    expect(server.posted).toEqual(['blocked.exe'])
+    expect(server.stored).toHaveLength(0)
+    expect(screen.getByText('No attachments found.')).toBeInTheDocument()
+    expect(onChanged).not.toHaveBeenCalled()
+  })
+
+  it('shows the files saved before a rejected middle file without a reload', async () => {
+    const server = createServer()
+    const { container, onChanged } = await renderSection()
+    const listCallsBefore = server.listCalls()
+
+    selectFiles(container, ['scout-first.txt', 'scout-blocked.exe', 'scout-last.txt'])
+
+    expect(await screen.findByText('scout-first.txt')).toBeInTheDocument()
+    await waitForIdle()
+    expect(server.posted).toEqual(['scout-first.txt', 'scout-blocked.exe'])
+    expect(server.listCalls()).toBeGreaterThan(listCallsBefore)
+    expect(screen.getByRole('alert')).toHaveTextContent(REJECTION)
+    expect(screen.queryByText('No attachments found.')).toBeNull()
+    expect(screen.queryByText('scout-last.txt')).toBeNull()
+    expect(onChanged).toHaveBeenCalledTimes(1)
+  })
+
+  it('shows every file saved before a rejected last file', async () => {
+    const server = createServer()
+    const { container } = await renderSection()
+
+    selectFiles(container, ['last-a.txt', 'last-b.txt', 'last-blocked.exe'])
+
+    expect(await screen.findByText('last-b.txt')).toBeInTheDocument()
+    await waitForIdle()
+    expect(server.posted).toEqual(['last-a.txt', 'last-b.txt', 'last-blocked.exe'])
+    expect(screen.getByText('last-a.txt')).toBeInTheDocument()
+    expect(screen.getByRole('alert')).toHaveTextContent(REJECTION)
+  })
+
+  it('ignores a second selection or drop while a batch is uploading', async () => {
+    const server = createServer({ holdUploads: true })
+    const { container } = await renderSection()
+
+    selectFiles(container, ['drop-a.txt', 'drop-b.txt'])
+    await waitFor(() => expect(server.pendingUploads()).toBe(1))
+
+    selectFiles(container, ['late-select.txt'])
+    const dropZone = container.querySelector('[role="presentation"]') as HTMLElement
+    fireEvent.drop(dropZone, { dataTransfer: { files: [textFile('late-drop.txt')] } })
+
+    await act(async () => {
+      server.releaseAll()
+    })
+    await waitForIdle()
+    await waitFor(() => expect(screen.getByText('drop-b.txt')).toBeInTheDocument())
+
+    expect(server.posted).toEqual(['drop-a.txt', 'drop-b.txt'])
+    expect(server.stored.map((item) => item.fileName)).toEqual(['drop-a.txt', 'drop-b.txt'])
+  })
+})

package/src/backend/__tests__/CrudForm.fieldInjection.test.tsx

@@ -16,7 +16,11 @@ jest.mock('../injection/InjectionSpot', () => ({
   __esModule: true,
   InjectionSpot: () => null,
   useInjectionWidgets: () => ({ widgets: [], loading: false, error: null }),
-  useInjectionSpotEvents: () => ({ triggerEvent: jest.fn(async () => ({ ok: true, data: {} })) }),
+  // Echo the payload so `transformFormData` is a no-op and submit assertions see
+  // exactly what CrudForm forwards to the host `onSubmit`.
+  useInjectionSpotEvents: () => ({
+    triggerEvent: jest.fn(async (_event: string, data: unknown) => ({ ok: true, data })),
+  }),
 }))
 jest.mock('../injection/useInjectionDataWidgets', () => ({
   __esModule: true,
@@ -31,7 +35,8 @@ jest.mock('../injection/useInjectionDataWidgets', () => ({
 }))
 
 import * as React from 'react'
-import { waitFor } from '@testing-library/react'
+import { fireEvent, waitFor } from '@testing-library/react'
+import { z } from 'zod'
 import { renderWithProviders } from '@open-mercato/shared/lib/testing/renderWithProviders'
 import { CrudForm, type CrudField, type CrudFormGroup } from '../CrudForm'
 import { InjectionPosition } from '@open-mercato/shared/modules/widgets/injection-position'
@@ -139,3 +144,135 @@ describe('CrudForm group field injection (#3047)', () => {
     expect(labelMatches).toHaveLength(1)
   })
 })
+
+describe('CrudForm injected field id collisions', () => {
+  afterEach(() => {
+    injectedFieldWidgets = []
+  })
+
+  function renderCollisionForm(options: {
+    fields: CrudField[]
+    initialValues: Record<string, unknown>
+    onSubmit: (values: unknown) => void
+    schema?: z.ZodTypeAny
+  }) {
+    return renderWithProviders(
+      React.createElement(CrudForm as any, {
+        title: 'Form',
+        entityId: 'catalog:catalog_product_price',
+        fields: options.fields,
+        groups: [{ id: 'scope', title: 'Scope', fields: options.fields.map((field) => field.id) }],
+        initialValues: options.initialValues,
+        schema: options.schema,
+        onSubmit: options.onSubmit,
+      }),
+    )
+  }
+
+  it('submits the value of an injected field that reuses a host field id', async () => {
+    injectedFieldWidgets = [
+      { fields: [{ id: 'customerGroupId', label: 'Customer group', type: 'text', group: 'scope' }] },
+    ]
+    const onSubmit = jest.fn()
+    const { container } = renderCollisionForm({
+      fields: [
+        { id: 'name', label: 'Name', type: 'text' },
+        { id: 'customerGroupId', label: 'Customer group id', type: 'text' },
+      ],
+      initialValues: { name: 'Retail', customerGroupId: 'group-1' },
+      onSubmit,
+    })
+
+    fireEvent.submit(container.querySelector('form') as HTMLFormElement)
+
+    await waitFor(() => expect(onSubmit).toHaveBeenCalled())
+    expect(onSubmit.mock.calls[0][0]).toEqual(
+      expect.objectContaining({ name: 'Retail', customerGroupId: 'group-1' }),
+    )
+  })
+
+  it('submits the value of an injected field that reuses a group-inline host field id', async () => {
+    injectedFieldWidgets = [
+      { fields: [{ id: 'customerGroupId', label: 'Customer group', type: 'text', group: 'scope' }] },
+    ]
+    const onSubmit = jest.fn()
+    const { container } = renderWithProviders(
+      React.createElement(CrudForm as any, {
+        title: 'Form',
+        entityId: 'catalog:catalog_product_price',
+        fields: [{ id: 'name', label: 'Name', type: 'text' }],
+        groups: [
+          {
+            id: 'scope',
+            title: 'Scope',
+            fields: ['name', { id: 'customerGroupId', label: 'Customer group id', type: 'text' }],
+          },
+        ],
+        initialValues: { name: 'Retail', customerGroupId: 'group-1' },
+        onSubmit,
+      }),
+    )
+
+    await waitFor(() => {
+      expect(container.querySelector('[data-crud-field-id="customerGroupId"]')).toBeTruthy()
+    })
+    fireEvent.submit(container.querySelector('form') as HTMLFormElement)
+
+    await waitFor(() => expect(onSubmit).toHaveBeenCalled())
+    expect(onSubmit.mock.calls[0][0]).toEqual(
+      expect.objectContaining({ name: 'Retail', customerGroupId: 'group-1' }),
+    )
+  })
+
+  it('still strips an injected-only field from the host payload', async () => {
+    injectedFieldWidgets = [
+      { fields: [{ id: 'widgetOnlyNote', label: 'Widget note', type: 'text', group: 'scope' }] },
+    ]
+    const onSubmit = jest.fn()
+    const { container } = renderCollisionForm({
+      fields: [{ id: 'name', label: 'Name', type: 'text' }],
+      initialValues: { name: 'Retail', widgetOnlyNote: 'extra' },
+      onSubmit,
+    })
+
+    await waitFor(() => {
+      expect(container.querySelector('[data-crud-field-id="widgetOnlyNote"]')).toBeTruthy()
+    })
+    fireEvent.submit(container.querySelector('form') as HTMLFormElement)
+
+    await waitFor(() => expect(onSubmit).toHaveBeenCalled())
+    const submitted = onSubmit.mock.calls[0][0] as Record<string, unknown>
+    expect(submitted.name).toBe('Retail')
+    expect(submitted).not.toHaveProperty('widgetOnlyNote')
+  })
+
+  it('collapses a dot-path host field that an injected field reuses into its nested shape', async () => {
+    injectedFieldWidgets = [
+      { fields: [{ id: 'metadata.channel', label: 'Channel', type: 'text', group: 'scope' }] },
+    ]
+    const onSubmit = jest.fn()
+    const { container } = renderCollisionForm({
+      fields: [
+        { id: 'name', label: 'Name', type: 'text' },
+        { id: 'metadata.channel', label: 'Channel', type: 'text' },
+      ],
+      initialValues: { name: 'Retail', metadata: { channel: 'web' } },
+      schema: z.object({
+        name: z.string(),
+        metadata: z.object({ channel: z.string() }).optional(),
+      }),
+      onSubmit,
+    })
+
+    await waitFor(() => {
+      expect(container.querySelector('[data-crud-field-id="metadata.channel"] input')).toBeTruthy()
+    })
+    const channelInput = container.querySelector('[data-crud-field-id="metadata.channel"] input') as HTMLInputElement
+    await waitFor(() => expect(channelInput.value).toBe('web'))
+    fireEvent.change(channelInput, { target: { value: 'store' } })
+    fireEvent.submit(container.querySelector('form') as HTMLFormElement)
+
+    await waitFor(() => expect(onSubmit).toHaveBeenCalled())
+    expect(onSubmit.mock.calls[0][0]).toEqual({ name: 'Retail', metadata: { channel: 'store' } })
+  })
+})

package/src/backend/__tests__/CrudForm.hiddenGroups.test.tsx

@@ -5,7 +5,7 @@ jest.setTimeout(15000)
 // stable id. Hiding is presentation-only — the fields of a hidden group keep their
 // values and are still submitted, so a smaller form can never silently clear data.
 let injectedGroupWidgets: unknown[] = []
-let injectedFieldWidgets: Array<{ fields: unknown[] }> = []
+let injectedFieldWidgets: Array<{ metadata: { id: string }; fields: unknown[] }> = []
 const fetchCustomFieldFormStructureMock = jest.fn()
 const buildFormFieldFromCustomFieldDefMock = jest.fn()
 

package/src/backend/__tests__/DataTable.extensions.test.tsx

@@ -9,6 +9,7 @@ import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 import { I18nProvider } from '@open-mercato/shared/lib/i18n/context'
 import { DataTable } from '../DataTable'
 import { APP_EVENT_DOM_NAME } from '../injection/useAppEvent'
+import { registerComponentOverrides } from '@open-mercato/shared/modules/widgets/component-registry'
 
 const mockRouterRefresh = jest.fn()
 
@@ -72,12 +73,41 @@ function renderTable(elementProps: Record<string, unknown>) {
 
 describe('DataTable extensions', () => {
   beforeEach(() => {
+    registerComponentOverrides([])
     ;(globalThis as typeof globalThis & { ResizeObserver?: typeof ResizeObserverMock }).ResizeObserver = ResizeObserverMock
     useInjectionDataWidgetsMock.mockImplementation(() => ({ widgets: [], isLoading: false, error: null }))
     flashMock.mockReset()
     mockRouterRefresh.mockReset()
   })
 
+  afterEach(() => {
+    registerComponentOverrides([])
+  })
+
+  it('executes transforms and wrappers at the derived DataTable handle', () => {
+    registerComponentOverrides([
+      {
+        target: { componentId: 'data-table:catalog.products.list' },
+        priority: 10,
+        propsTransform: (props: Record<string, unknown>) => ({ ...props, title: 'Transformed title' }),
+      },
+      {
+        target: { componentId: 'data-table:catalog.products.list' },
+        priority: 20,
+        wrapper: (Original: React.ComponentType<Record<string, unknown>>) => function Wrapped(props) {
+          return <section data-testid="registered-table-wrapper"><Original {...props} /></section>
+        },
+      },
+    ])
+    renderTable({
+      columns: [{ accessorKey: 'name', header: 'Name' }],
+      data: [{ id: 'r1', name: 'Product' }],
+      extensionTableId: 'catalog.products.list',
+    })
+    expect(screen.getByTestId('registered-table-wrapper')).toBeInTheDocument()
+    expect(screen.getByText('Transformed title')).toBeInTheDocument()
+  })
+
   it('renders injected columns from data-table extension surface', () => {
     useInjectionDataWidgetsMock.mockImplementation((spotId: string) => {
       if (spotId === 'data-table:customers.people:columns') {