@open-mercato/ui 0.4.11-develop.1971.0f53c78f63 → 0.4.11-develop.1980.243750a91b

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@open-mercato/ui",
-  "version": "0.4.11-develop.1971.0f53c78f63",
+  "version": "0.4.11-develop.1980.243750a91b",
   "type": "module",
   "main": "./dist/index.js",
   "scripts": {
@@ -132,12 +132,12 @@
     "recharts": "^2.15.0"
   },
   "peerDependencies": {
-    "@open-mercato/shared": "0.4.11-develop.1971.0f53c78f63",
+    "@open-mercato/shared": "0.4.11-develop.1980.243750a91b",
     "react": ">=18.0.0",
     "react-dom": ">=18.0.0"
   },
   "devDependencies": {
-    "@open-mercato/shared": "0.4.11-develop.1971.0f53c78f63",
+    "@open-mercato/shared": "0.4.11-develop.1980.243750a91b",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.1",

package/src/backend/__tests__/AppShell.test.tsx

@@ -37,10 +37,29 @@ jest.mock('../injection/InjectionSpot', () => ({
   },
 }))
 
+jest.mock('../injection/useInjectedMenuItems', () => ({
+  useInjectedMenuItems: () => ({
+    items: [],
+    isLoading: false,
+  }),
+}))
+
+jest.mock('../injection/eventBridge', () => ({
+  useEventBridge: jest.fn(),
+}))
+
+jest.mock('../injection/StatusBadgeInjectionSpot', () => ({
+  StatusBadgeInjectionSpot: () => <div data-testid="status-badge-injection-spot" />,
+}))
+
 jest.mock('../operations/LastOperationBanner', () => ({
   LastOperationBanner: () => <div data-testid="last-operation-banner" />,
 }))
 
+jest.mock('../progress/ProgressTopBar', () => ({
+  ProgressTopBar: () => <div data-testid="progress-top-bar" />,
+}))
+
 jest.mock('../indexes/PartialIndexBanner', () => ({
   PartialIndexBanner: () => <div data-testid="partial-index-banner" />,
 }))
@@ -57,6 +76,10 @@ jest.mock('../upgrades/UpgradeActionBanner', () => ({
   UpgradeActionBanner: () => <div data-testid="upgrade-action-banner" />,
 }))
 
+jest.mock('../devtools', () => ({
+  UmesDevToolsPanel: () => null,
+}))
+
 const dict = {
   'appShell.productName': 'Mercato',
   'appShell.menu': 'Menu',

package/src/backend/__tests__/CrudForm.custom-fields.test.tsx

@@ -1,7 +1,12 @@
 /** @jest-environment jsdom */
+jest.setTimeout(15000)
 
 const fetchCustomFieldFormStructureMock = jest.fn()
 const buildFormFieldFromCustomFieldDefMock = jest.fn()
+const triggerInjectionEventMock = jest.fn(async (_event: string, data: Record<string, unknown>) => ({
+  ok: true,
+  data,
+}))
 
 jest.mock('next/navigation', () => ({
   useRouter: () => ({ push: jest.fn() }),
@@ -16,6 +21,16 @@ jest.mock('../confirm-dialog', () => ({
     ConfirmDialogElement: null,
   }),
 }))
+jest.mock('../injection/InjectionSpot', () => ({
+  __esModule: true,
+  InjectionSpot: () => null,
+  useInjectionWidgets: () => ({ widgets: [], loading: false, error: null }),
+  useInjectionSpotEvents: () => ({ triggerEvent: triggerInjectionEventMock }),
+}))
+jest.mock('../injection/useInjectionDataWidgets', () => ({
+  __esModule: true,
+  useInjectionDataWidgets: () => ({ widgets: [], isLoading: false, error: null }),
+}))
 jest.mock('../custom-fields/FieldDefinitionsManager', () => {
   const React = require('react')
   return {
@@ -31,7 +46,7 @@ jest.mock('../utils/customFieldForms', () => ({
 }))
 
 import * as React from 'react'
-import { act, fireEvent, screen } from '@testing-library/react'
+import { act, fireEvent, screen, waitFor } from '@testing-library/react'
 import { renderWithProviders } from '@open-mercato/shared/lib/testing/renderWithProviders'
 import { CrudForm, type CrudField, type CrudFormGroup } from '../CrudForm'
 
@@ -53,6 +68,7 @@ describe('CrudForm custom field loading', () => {
   beforeEach(() => {
     fetchCustomFieldFormStructureMock.mockReset()
     buildFormFieldFromCustomFieldDefMock.mockReset()
+    triggerInjectionEventMock.mockClear()
     buildFormFieldFromCustomFieldDefMock.mockReturnValue(null)
     fetchCustomFieldFormStructureMock.mockResolvedValue({
       fields: [],
@@ -149,9 +165,14 @@ describe('CrudForm custom field loading', () => {
       },
     )
 
-    const manageButton = await screen.findByRole('button', { name: 'Manage fields' })
+    await waitFor(() => {
+      expect(fetchCustomFieldFormStructureMock).toHaveBeenCalledTimes(1)
+    })
+    const manageButton = await screen.findByRole('button', { name: 'Manage fields' }, { timeout: 3000 })
 
-    fireEvent.click(manageButton)
+    await act(async () => {
+      fireEvent.click(manageButton)
+    })
 
     expect(handleSubmit).not.toHaveBeenCalled()
     expect(await screen.findByText('Edit custom fields')).toBeInTheDocument()

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

@@ -1,4 +1,11 @@
 /** @jest-environment jsdom */
+jest.setTimeout(15000)
+
+const triggerInjectionEventMock = jest.fn(async (_event: string, data: Record<string, unknown>) => ({
+  ok: true,
+  data,
+}))
+
 jest.mock('next/navigation', () => ({
   useRouter: () => ({ push: () => {} }),
   usePathname: () => '/',
@@ -6,6 +13,16 @@ jest.mock('next/navigation', () => ({
 }))
 jest.mock('remark-gfm', () => ({ __esModule: true, default: {} }))
 jest.mock('@uiw/react-md-editor', () => ({ __esModule: true, default: () => null }))
+jest.mock('../injection/InjectionSpot', () => ({
+  __esModule: true,
+  InjectionSpot: () => null,
+  useInjectionWidgets: () => ({ widgets: [], loading: false, error: null }),
+  useInjectionSpotEvents: () => ({ triggerEvent: triggerInjectionEventMock }),
+}))
+jest.mock('../injection/useInjectionDataWidgets', () => ({
+  __esModule: true,
+  useInjectionDataWidgets: () => ({ widgets: [], isLoading: false, error: null }),
+}))
 
 import * as React from 'react'
 import { renderToString } from 'react-dom/server'
@@ -39,6 +56,10 @@ describe('CrudForm SSR render', () => {
 describe('CrudForm initialValues', () => {
   const fields: CrudField[] = [{ id: 'name', label: 'Name', type: 'text' }]
 
+  beforeEach(() => {
+    triggerInjectionEventMock.mockClear()
+  })
+
   function getInput(container: HTMLElement): HTMLInputElement {
     return container.querySelector('[data-crud-field-id="name"] input[type="text"]') as HTMLInputElement
   }

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

@@ -1,4 +1,5 @@
 /** @jest-environment jsdom */
+jest.setTimeout(15000)
 
 const pushMock = jest.fn()
 const confirmDialogMock = jest.fn()

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

@@ -1,4 +1,6 @@
 /** @jest-environment jsdom */
+jest.setTimeout(15000)
+
 const pushMock = jest.fn()
 const confirmDialogMock = jest.fn()
 
@@ -15,6 +17,16 @@ jest.mock('../confirm-dialog', () => ({
     ConfirmDialogElement: null,
   }),
 }))
+jest.mock('../injection/InjectionSpot', () => ({
+  __esModule: true,
+  InjectionSpot: () => null,
+  useInjectionWidgets: () => ({ widgets: [], loading: false, error: null }),
+  useInjectionSpotEvents: () => ({ triggerEvent: jest.fn() }),
+}))
+jest.mock('../injection/useInjectionDataWidgets', () => ({
+  __esModule: true,
+  useInjectionDataWidgets: () => ({ widgets: [], isLoading: false, error: null }),
+}))
 
 import * as React from 'react'
 import { act, fireEvent } from '@testing-library/react'

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

@@ -1,4 +1,6 @@
 /** @jest-environment jsdom */
+jest.setTimeout(15000)
+
 jest.mock('next/navigation', () => ({
   useRouter: () => ({ push: () => {} }),
   usePathname: () => '/',
@@ -6,9 +8,19 @@ jest.mock('next/navigation', () => ({
 }))
 jest.mock('remark-gfm', () => ({ __esModule: true, default: {} }))
 jest.mock('@uiw/react-md-editor', () => ({ __esModule: true, default: () => null }))
+jest.mock('../injection/InjectionSpot', () => ({
+  __esModule: true,
+  InjectionSpot: () => null,
+  useInjectionWidgets: () => ({ widgets: [], loading: false, error: null }),
+  useInjectionSpotEvents: () => ({ triggerEvent: jest.fn() }),
+}))
+jest.mock('../injection/useInjectionDataWidgets', () => ({
+  __esModule: true,
+  useInjectionDataWidgets: () => ({ widgets: [], isLoading: false, error: null }),
+}))
 
 import * as React from 'react'
-import { act, fireEvent } from '@testing-library/react'
+import { act, fireEvent, waitFor } from '@testing-library/react'
 import { z } from 'zod'
 import { renderWithProviders } from '@open-mercato/shared/lib/testing/renderWithProviders'
 import { CrudForm, type CrudField } from '../CrudForm'
@@ -38,22 +50,32 @@ describe('CrudForm validation state', () => {
     )
 
     const form = container.querySelector('form')
+    const nameField = container.querySelector('[data-crud-field-id="name"]')
+    const gatewayField = container.querySelector('[data-crud-field-id="gatewayProviderKey"]')
     const nameInput = container.querySelector('[data-crud-field-id="name"] input[type="text"]')
 
     expect(form).not.toBeNull()
+    expect(nameField).not.toBeNull()
+    expect(gatewayField).not.toBeNull()
     expect(nameInput).not.toBeNull()
 
     await act(async () => {
       fireEvent.submit(form as HTMLFormElement)
     })
 
-    expect(container.querySelectorAll('.text-xs.text-red-600')).toHaveLength(2)
+    await waitFor(() => {
+      expect(nameField?.querySelector('.text-xs.text-red-600')).toHaveTextContent('This field is required')
+      expect(gatewayField?.querySelector('.text-xs.text-red-600')).toHaveTextContent('This field is required')
+    })
 
     await act(async () => {
       fireEvent.change(nameInput as HTMLInputElement, { target: { value: 'QA test link' } })
     })
 
-    expect(container.querySelectorAll('.text-xs.text-red-600')).toHaveLength(1)
+    await waitFor(() => {
+      expect(nameField?.querySelector('.text-xs.text-red-600')).toBeNull()
+      expect(gatewayField?.querySelector('.text-xs.text-red-600')).toHaveTextContent('This field is required')
+    })
     expect(container.textContent).toContain('Gateway provider')
   })
 
@@ -97,7 +119,9 @@ describe('CrudForm validation state', () => {
       fireEvent.submit(form as HTMLFormElement)
     })
 
-    expect(getByText('Use camelCase starting with a letter.')).toBeInTheDocument()
+    await waitFor(() => {
+      expect(getByText('Use camelCase starting with a letter.')).toBeInTheDocument()
+    })
   })
 
   it('validates number fields on blur', async () => {