@freighttech/ui 0.13.18

package/src/backend/dynamic-table/__tests__/GroupSummaryRow.render.test.tsx

@@ -0,0 +1,131 @@
+import * as React from 'react'
+import { render } from '@testing-library/react'
+import { I18nProvider } from '@open-mercato/shared/lib/i18n/context'
+import GroupSummaryRow from '../components/GroupSummaryRow'
+import { CellStoreContext } from '../hooks/index'
+import { createCellStore } from '../store/index'
+import type { ColumnDef } from '../types/index'
+import type { AggregationRule, GroupSummaryVisualRow } from '../types/grouping'
+
+/**
+ * The subtotal renderer went stale when `AggregationFn` widened: it formatted
+ * every value with SUM semantics and coalesced null to 0. A `count` of 3 read
+ * as "3,00" and a MIN over nothing read as "0,00" — the data was right, only
+ * the renderer lied.
+ */
+
+const columns: ColumnDef[] = [
+  { data: 'client', title: 'Client' },
+  { data: 'amount', title: 'Amount', type: 'numeric' },
+  { data: 'eta', title: 'ETA', type: 'date' },
+]
+
+function renderRow(
+  visualRow: GroupSummaryVisualRow,
+  aggregations: AggregationRule[],
+) {
+  const store = createCellStore([], columns)
+  render(
+    React.createElement(
+      I18nProvider as any,
+      { locale: 'en', dict: {} },
+      React.createElement(
+        CellStoreContext.Provider as any,
+        { value: store },
+        React.createElement(
+          'table',
+          null,
+          React.createElement(
+            'tbody',
+            null,
+            React.createElement(GroupSummaryRow as any, {
+              visualRow,
+              virtualItem: { index: 0, start: 0, size: 32, end: 32, key: 0, lane: 0 },
+              columns,
+              rowHeaders: false,
+              leftOffsets: [],
+              rightOffsets: [],
+              actionsColumnWidth: 80,
+              totalWidth: 600,
+              aggregations,
+              label: 'Sum',
+              locale: 'pl-PL',
+              storeRevision: 0,
+            }),
+          ),
+        ),
+      ),
+    ),
+  )
+}
+
+const cell = (field: string) =>
+  document.querySelector(`[data-group-summary-cell="${field}"]`) as HTMLElement
+
+function summaryRow(overrides: Partial<GroupSummaryVisualRow> = {}): GroupSummaryVisualRow {
+  return {
+    type: 'groupSummary',
+    groupKey: 'client:Acme',
+    depth: 0,
+    values: {},
+    fns: {},
+    scope: 'dataset',
+    rowsCovered: 3,
+    ...overrides,
+  }
+}
+
+describe('GroupSummaryRow', () => {
+  it('renders a count as a whole number, not as money', () => {
+    renderRow(
+      summaryRow({ values: { amount: 3 }, fns: { amount: 'count' } }),
+      [{ id: 'agg-amount', field: 'amount', fn: 'count' }],
+    )
+    expect(cell('amount').textContent).toBe('3')
+  })
+
+  it('renders "nothing to average" as an em dash, never as 0,00', () => {
+    renderRow(
+      summaryRow({ values: { amount: null }, fns: { amount: 'avg' } }),
+      [{ id: 'agg-amount', field: 'amount', fn: 'avg' }],
+    )
+    expect(cell('amount').textContent).toBe('—')
+  })
+
+  it('renders MIN on a date column as a date, not a 13-digit number', () => {
+    const t = Date.UTC(2026, 2, 4)
+    renderRow(
+      summaryRow({ values: { eta: t }, fns: { eta: 'min' } }),
+      [{ id: 'agg-eta', field: 'eta', fn: 'min' }],
+    )
+    expect(cell('eta').textContent).toMatch(/2026/)
+    expect(cell('eta').textContent).not.toMatch(/\d{10}/)
+  })
+
+  it('says so when the subtotal covers only the loaded page', () => {
+    renderRow(
+      summaryRow({ scope: 'page', values: { amount: 350 }, fns: { amount: 'sum' } }),
+      [{ id: 'agg-amount', field: 'amount', fn: 'sum' }],
+    )
+    const row = document.querySelector('[data-group-summary]') as HTMLElement
+    expect(row.getAttribute('data-group-scope')).toBe('page')
+    expect(row.getAttribute('data-group-rows-covered')).toBe('3')
+    expect(document.querySelector('[data-group-scope-label]')!.textContent).toContain('page')
+  })
+
+  it('adds no caveat when the subtotal really is the whole group', () => {
+    renderRow(
+      summaryRow({ values: { amount: 350 }, fns: { amount: 'sum' } }),
+      [{ id: 'agg-amount', field: 'amount', fn: 'sum' }],
+    )
+    expect(document.querySelector('[data-group-scope-label]')).toBeNull()
+  })
+
+  it('leaves un-aggregated columns blank', () => {
+    renderRow(
+      summaryRow({ values: { amount: 350 }, fns: { amount: 'sum' } }),
+      [{ id: 'agg-amount', field: 'amount', fn: 'sum' }],
+    )
+    expect(cell('client').textContent).toBe('')
+  })
+})

package/src/backend/dynamic-table/__tests__/LoadErrorState.test.tsx

@@ -0,0 +1,74 @@
+import * as React from 'react'
+import { render, screen, fireEvent } from '@testing-library/react'
+import { I18nProvider } from '@open-mercato/shared/lib/i18n/context'
+import LoadErrorState from '../components/LoadErrorState'
+import EmptyState from '../components/EmptyState'
+
+// HEDGE-119 — the failed-load state.
+//
+// The defect this guards: a list request that 500s and a list that genuinely
+// holds zero rows both reach the grid as `data: []`, and before this component
+// existed both rendered `EmptyState`. On fto-test that put the words "Nothing
+// here yet" in front of an accountant while 17 unpaid invoices sat in the
+// database behind an `InvalidFieldNameException`.
+//
+// So the assertions below are not really about wording. They are about the two
+// states being DISTINGUISHABLE — different role, different text, different
+// affordance — because the failure mode was that they were not.
+
+function renderWith(node: React.ReactElement) {
+  return render(
+    React.createElement(I18nProvider as any, { locale: 'en', dict: {} }, node),
+  )
+}
+
+describe('LoadErrorState (HEDGE-119)', () => {
+  it('says the rows could not be LOADED, not that there are none', () => {
+    renderWith(React.createElement(LoadErrorState, { tableName: 'Invoices' }))
+    expect(screen.getByText(/could not load/i)).toBeInTheDocument()
+    // The exact phrase the empty state uses must not appear here.
+    expect(screen.queryByText(/nothing here yet/i)).not.toBeInTheDocument()
+  })
+
+  it('states outright that the table is not known to be empty', () => {
+    renderWith(React.createElement(LoadErrorState, {}))
+    // The whole point: an accountant must not read this as "no work to do".
+    expect(screen.getByText(/does NOT mean the table is empty/i)).toBeInTheDocument()
+  })
+
+  it('names the table when the host supplies one', () => {
+    renderWith(React.createElement(LoadErrorState, { tableName: 'Invoices' }))
+    expect(screen.getByText(/Invoices/)).toBeInTheDocument()
+  })
+
+  it('announces as an alert, where the empty state announces as status', () => {
+    // A screen-reader user gets the same distinction a sighted user does.
+    const { unmount } = renderWith(React.createElement(LoadErrorState, {}))
+    expect(screen.getByRole('alert')).toBeInTheDocument()
+    unmount()
+
+    renderWith(React.createElement(EmptyState, { filterCount: 0 }))
+    expect(screen.queryByRole('alert')).not.toBeInTheDocument()
+    expect(screen.getByRole('status')).toBeInTheDocument()
+  })
+
+  it('offers retry, and fires it', () => {
+    const onRetry = jest.fn()
+    renderWith(React.createElement(LoadErrorState, { onRetry }))
+    fireEvent.click(screen.getByRole('button', { name: /try again/i }))
+    expect(onRetry).toHaveBeenCalledTimes(1)
+  })
+
+  it('omits the retry button when the host cannot refetch', () => {
+    renderWith(React.createElement(LoadErrorState, {}))
+    expect(screen.queryByRole('button', { name: /try again/i })).not.toBeInTheDocument()
+  })
+
+  it('never offers "clear search" / "clear filters" — the rows are not filtered away', () => {
+    // Offering an undo for something that did not cause the emptiness is the
+    // misdiagnosis this component exists to prevent.
+    renderWith(React.createElement(LoadErrorState, { onRetry: jest.fn() }))
+    expect(screen.queryByRole('button', { name: /clear search/i })).not.toBeInTheDocument()
+    expect(screen.queryByRole('button', { name: /clear filters/i })).not.toBeInTheDocument()
+  })
+})

package/src/backend/dynamic-table/__tests__/MentionPopup.search.test.tsx

@@ -0,0 +1,127 @@
+/**
+ * @mention user lookup — ledger 8.7.
+ *
+ * Typing "Daria" for the listed user "Daria Nowak" returned "No users found".
+ * The cause was not the popup at all: `/api/auth/users?search=` matches
+ * search_tokens (encrypted email), organization names and role names — never
+ * the user's own display name. `?name=` is the parameter that does. Verified
+ * against the live API before changing anything: `search=Daria` → 0 items,
+ * `name=Daria` → Daria Nowak.
+ *
+ * The route lives in `@open-mercato/core` and is read-only here, and the two
+ * params are ANDed when both are sent, so the popup has to pick one.
+ */
+import * as React from 'react'
+import { act, render, screen, waitFor } from '@testing-library/react'
+import MentionPopup from '../components/MentionPopup'
+
+jest.mock('../../utils/api', () => ({
+  apiFetch: jest.fn(),
+}))
+
+// eslint-disable-next-line @typescript-eslint/no-var-requires
+const { apiFetch } = require('../../utils/api') as { apiFetch: jest.Mock }
+
+const USERS = [
+  { id: 'u1', name: 'Łukasz Kowalski', email: 'seed-rep-1@offdock.test' },
+  { id: 'u2', name: 'Daria Nowak', email: 'seed-rep-2@offdock.test' },
+  { id: 'u3', name: 'Karol Wiśniewski', email: 'seed-rep-3@offdock.test' },
+]
+
+function ok(items: typeof USERS) {
+  return { ok: true, json: async () => ({ items }) }
+}
+
+/** Stands in for the upstream route: `name=` ILIKEs, `search=` never matches a name. */
+function serveLikeTheRealRoute(url: string) {
+  const q = new URL(url, 'http://localhost').searchParams
+  const name = q.get('name')
+  if (name) {
+    // Case-insensitive but NOT diacritic-insensitive — Postgres ILIKE.
+    const needle = name.toLowerCase()
+    return ok(USERS.filter((u) => u.name.toLowerCase().includes(needle)))
+  }
+  if (q.get('search')) return ok([])
+  return ok(USERS)
+}
+
+function renderPopup(query: string) {
+  const anchor = document.createElement('div')
+  document.body.appendChild(anchor)
+  return render(
+    <MentionPopup
+      query={query}
+      anchorEl={anchor}
+      visible
+      onSelect={() => {}}
+      onClose={() => {}}
+    />,
+  )
+}
+
+describe('MentionPopup — searching by a human name (8.7)', () => {
+  beforeEach(() => {
+    jest.useFakeTimers()
+    apiFetch.mockReset()
+    apiFetch.mockImplementation((url: string) => Promise.resolve(serveLikeTheRealRoute(url)))
+  })
+  afterEach(() => {
+    jest.runOnlyPendingTimers()
+    jest.useRealTimers()
+  })
+
+  // The popup debounces 250 ms and then resolves promises; both the timer and
+  // the microtask drain have to run inside `act` or React warns about the
+  // state updates that land after them.
+  const flush = async () => {
+    await act(async () => {
+      jest.advanceTimersByTime(300)
+      await Promise.resolve()
+      await Promise.resolve()
+      await Promise.resolve()
+    })
+    expect(apiFetch).toHaveBeenCalled()
+  }
+
+  it('queries `name=`, not `search=` — the param that matches a display name', async () => {
+    renderPopup('Daria')
+    await flush()
+    const url = apiFetch.mock.calls[0][0] as string
+    expect(url).toContain('name=Daria')
+    expect(url).not.toContain('search=')
+    await waitFor(() => expect(screen.getByText('Daria Nowak')).toBeTruthy())
+  })
+
+  it('matches a surname, not only the first name', async () => {
+    renderPopup('Kowal')
+    await flush()
+    await waitFor(() => expect(screen.getByText('Łukasz Kowalski')).toBeTruthy())
+  })
+
+  it('falls back to a diacritic-folded local match: "Lukasz" finds "Łukasz"', async () => {
+    renderPopup('Lukasz')
+    await flush()
+    // Server ILIKE misses it, so the popup pulls one page and folds locally.
+    await waitFor(() => expect(apiFetch).toHaveBeenCalledTimes(2))
+    await waitFor(() => expect(screen.getByText('Łukasz Kowalski')).toBeTruthy())
+  })
+
+  it('the fallback also matches an email, which `search=` did not', async () => {
+    renderPopup('seed-rep-3')
+    await flush()
+    await waitFor(() => expect(screen.getByText('Karol Wiśniewski')).toBeTruthy())
+  })
+
+  it('costs ONE request when the server already found someone', async () => {
+    renderPopup('Nowak')
+    await flush()
+    await waitFor(() => expect(screen.getByText('Daria Nowak')).toBeTruthy())
+    expect(apiFetch).toHaveBeenCalledTimes(1)
+  })
+
+  it('still says so when nobody matches at all', async () => {
+    renderPopup('Zzzz')
+    await flush()
+    await waitFor(() => expect(screen.getByText('No users found')).toBeTruthy())
+  })
+})

package/src/backend/dynamic-table/__tests__/PerspectiveTabs.test.tsx

@@ -0,0 +1,170 @@
+import * as React from 'react'
+import { render, screen, fireEvent } from '@testing-library/react'
+import { I18nProvider } from '@open-mercato/shared/lib/i18n/context'
+import PerspectiveTabs from '../components/PerspectiveTabs'
+import { PERSPECTIVE_NAME_MAX_LENGTH } from '../types/perspective'
+import type { PerspectiveConfig } from '../types/perspective'
+
+/**
+ * Workshop A6 — deleting a saved view used to be a bare `×` a few pixels from
+ * the tab label. "Zbyt łatwo go tu można usunąć": Agnieszka works fast, and
+ * losing a 60-column layout mid-shift is expensive.
+ *
+ * The contract these tests pin:
+ *   1. There is NO bare `×` on a tab.
+ *   2. Every view action lives behind one `⋯` menu.
+ *   3. Delete asks first, and the question NAMES the view.
+ *
+ * Point 1 is the one that must not silently regress, so it is asserted
+ * directly rather than implied by the others.
+ */
+
+const perspectives: PerspectiveConfig[] = [
+  {
+    id: 'persp-1',
+    name: 'Open transports',
+    color: 'blue',
+    columns: { visible: ['ref'], hidden: [] },
+    filters: [],
+    sorting: [],
+    grouping: [],
+  },
+]
+
+type Props = React.ComponentProps<typeof PerspectiveTabs>
+
+function renderTabs(props: Partial<Props> = {}) {
+  const handlers = {
+    onPerspectiveSelect: props.onPerspectiveSelect ?? jest.fn(),
+    onPerspectiveRename: props.onPerspectiveRename ?? jest.fn(),
+    onPerspectiveDelete: props.onPerspectiveDelete ?? jest.fn(),
+    onPerspectiveEdit: props.onPerspectiveEdit ?? jest.fn(),
+    onPerspectiveDuplicate: props.onPerspectiveDuplicate ?? jest.fn(),
+    onPerspectiveSetDefault: props.onPerspectiveSetDefault ?? jest.fn(),
+    onAddPerspective: props.onAddPerspective ?? jest.fn(),
+  }
+  const utils = render(
+    React.createElement(
+      I18nProvider as any,
+      { locale: 'en', dict: {} },
+      React.createElement(PerspectiveTabs, {
+        savedPerspectives: perspectives,
+        activePerspectiveId: null,
+        ...handlers,
+        ...props,
+      }),
+    ),
+  )
+  return { ...utils, ...handlers }
+}
+
+const openMenu = () => fireEvent.click(screen.getByRole('button', { name: /view options/i }))
+
+describe('PerspectiveTabs — the ⋯ menu (A6)', () => {
+  it('renders no bare delete control on the tab itself', () => {
+    renderTabs()
+    // The old affordance. Its absence IS the fix.
+    expect(screen.queryByRole('button', { name: /delete perspective/i })).toBeNull()
+    expect(screen.queryByText('×')).toBeNull()
+  })
+
+  it('offers rename, duplicate, set-as-default and delete behind one trigger', () => {
+    renderTabs()
+    expect(screen.queryByRole('menu')).toBeNull()
+    openMenu()
+    expect(screen.getByRole('menuitem', { name: /rename view/i })).toBeInTheDocument()
+    expect(screen.getByRole('menuitem', { name: /duplicate view/i })).toBeInTheDocument()
+    expect(screen.getByRole('menuitem', { name: /set as my default/i })).toBeInTheDocument()
+    expect(screen.getByRole('menuitem', { name: /delete view/i })).toBeInTheDocument()
+  })
+
+  it('hides duplicate and set-as-default when the host supplies no handler', () => {
+    renderTabs({ onPerspectiveDuplicate: undefined, onPerspectiveSetDefault: undefined })
+    openMenu()
+    expect(screen.queryByRole('menuitem', { name: /duplicate view/i })).toBeNull()
+    expect(screen.queryByRole('menuitem', { name: /set as my default/i })).toBeNull()
+  })
+
+  it('does not delete until the confirmation is accepted, and names the view in it', () => {
+    const { onPerspectiveDelete } = renderTabs()
+    openMenu()
+    fireEvent.click(screen.getByRole('menuitem', { name: /delete view/i }))
+    // The click that opened the dialog must not have deleted anything.
+    expect(onPerspectiveDelete).not.toHaveBeenCalled()
+    // The question names the view — that is what turns a reflex click into a read.
+    expect(screen.getByRole('dialog')).toHaveTextContent(/Open transports/)
+    fireEvent.click(screen.getByRole('button', { name: /^delete view$/i }))
+    expect(onPerspectiveDelete).toHaveBeenCalledWith('persp-1', true)
+  })
+
+  it('cancelling the confirmation leaves the view alone', () => {
+    const { onPerspectiveDelete } = renderTabs()
+    openMenu()
+    fireEvent.click(screen.getByRole('menuitem', { name: /delete view/i }))
+    fireEvent.click(screen.getByRole('button', { name: /cancel/i }))
+    expect(onPerspectiveDelete).not.toHaveBeenCalled()
+  })
+
+  it('duplicates under a non-colliding name and never as the default', () => {
+    const { onPerspectiveDuplicate } = renderTabs()
+    openMenu()
+    fireEvent.click(screen.getByRole('menuitem', { name: /duplicate view/i }))
+    expect(onPerspectiveDuplicate).toHaveBeenCalledWith('persp-1', 'Open transports (copy)')
+  })
+
+  it('sets this user’s default view', () => {
+    const { onPerspectiveSetDefault } = renderTabs()
+    openMenu()
+    fireEvent.click(screen.getByRole('menuitem', { name: /set as my default/i }))
+    expect(onPerspectiveSetDefault).toHaveBeenCalledWith('persp-1')
+  })
+
+  it('marks the view that is already this user’s default and disables the action', () => {
+    renderTabs({ defaultPerspectiveId: 'persp-1' })
+    expect(screen.getByLabelText(/this is my default view/i)).toBeInTheDocument()
+    openMenu()
+    expect(screen.getByRole('menuitem', { name: /this is my default view/i })).toBeDisabled()
+  })
+
+  it('opens Configure View from the menu without selecting a different tab', () => {
+    const { onPerspectiveEdit } = renderTabs()
+    openMenu()
+    fireEvent.click(screen.getByRole('menuitem', { name: /configure view/i }))
+    expect(onPerspectiveEdit).toHaveBeenCalledWith('persp-1')
+  })
+
+  it('opens the add-view flow without selecting it', () => {
+    const { onAddPerspective } = renderTabs()
+    fireEvent.click(screen.getByText(/add view/i))
+    expect(onAddPerspective).toHaveBeenCalledTimes(1)
+  })
+})
+
+/**
+ * Ledger 7.14 — a long view name was silently rejected: the save appeared to
+ * work and nothing was created. The API caps `name` at 120 characters
+ * (`z.string().min(1).max(120)` upstream) and answers a longer one with a bare
+ * 400, so the cap has to be visible on the way IN.
+ */
+describe('PerspectiveTabs — the 120-character name cap (7.14)', () => {
+  it('caps the inline rename input at the API limit', () => {
+    renderTabs()
+    fireEvent.doubleClick(screen.getByText('Open transports'))
+    const input = screen.getByDisplayValue('Open transports') as HTMLInputElement
+    expect(input.maxLength).toBe(PERSPECTIVE_NAME_MAX_LENGTH)
+  })
+
+  it('trims the BASE, never the suffix, when a copy name would overflow', () => {
+    const longName = 'x'.repeat(PERSPECTIVE_NAME_MAX_LENGTH)
+    const { onPerspectiveDuplicate } = renderTabs({
+      savedPerspectives: [{ ...perspectives[0], name: longName }],
+    })
+    openMenu()
+    fireEvent.click(screen.getByRole('menuitem', { name: /duplicate view/i }))
+
+    const [, newName] = onPerspectiveDuplicate.mock.calls[0]
+    expect(newName.length).toBeLessThanOrEqual(PERSPECTIVE_NAME_MAX_LENGTH)
+    // The suffix is what makes it a distinguishable copy — it must survive.
+    expect(newName.endsWith('(copy)')).toBe(true)
+  })
+})

package/src/backend/dynamic-table/__tests__/RowHeaderCell.selection.test.tsx

@@ -0,0 +1,80 @@
+import * as React from 'react'
+import { render, screen, fireEvent } from '@testing-library/react'
+import RowHeaderCell from '../components/RowHeaderCell'
+
+// The row-header cell is the per-row selection affordance behind grouped
+// selection: in v2 `selectable` mode it shows a checkbox (not the row number),
+// and clicking it must toggle selection without starting a grid row-range drag.
+
+function renderHeader(props: Partial<React.ComponentProps<typeof RowHeaderCell>> = {}) {
+  const onToggleSelect = props.onToggleSelect ?? jest.fn()
+  const onCancel = props.onCancel ?? jest.fn()
+  const onDoubleClick = props.onDoubleClick ?? jest.fn()
+  // Render inside a table so the <td> is valid markup.
+  const utils = render(
+    React.createElement(
+      'table',
+      null,
+      React.createElement(
+        'tbody',
+        null,
+        React.createElement(
+          'tr',
+          null,
+          React.createElement(RowHeaderCell, {
+            row: 0,
+            isNewRow: false,
+            isInRowRange: false,
+            rowRangeEdges: {},
+            onCancel,
+            onDoubleClick,
+            ...props,
+            onToggleSelect,
+          }),
+        ),
+      ),
+    ),
+  )
+  return { ...utils, onToggleSelect, onCancel }
+}
+
+describe('RowHeaderCell — grouped selection checkbox', () => {
+  it('renders the row number (1-based) when not selectable', () => {
+    renderHeader({ selectable: false })
+    expect(screen.getByText('1')).toBeInTheDocument()
+    expect(screen.queryByRole('checkbox')).toBeNull()
+  })
+
+  it('renders a selection checkbox in selectable mode', () => {
+    renderHeader({ selectable: true, selected: false })
+    expect(screen.getByRole('checkbox', { name: /select row/i })).toBeInTheDocument()
+  })
+
+  it('reflects the selected state', () => {
+    renderHeader({ selectable: true, selected: true })
+    expect((screen.getByRole('checkbox') as HTMLInputElement).checked).toBe(true)
+  })
+
+  it('toggles selection when the checkbox changes', () => {
+    const { onToggleSelect } = renderHeader({ selectable: true, selected: false })
+    fireEvent.click(screen.getByRole('checkbox'))
+    expect(onToggleSelect).toHaveBeenCalledTimes(1)
+  })
+
+  it('stops the checkbox mousedown from bubbling to the grid drag handler', () => {
+    const { container } = renderHeader({ selectable: true, selected: false })
+    const checkbox = container.querySelector('input[type="checkbox"]')!
+    const event = new MouseEvent('mousedown', { bubbles: true, cancelable: true })
+    const stop = jest.spyOn(event, 'stopPropagation')
+    checkbox.dispatchEvent(event)
+    expect(stop).toHaveBeenCalled()
+  })
+
+  it('shows the cancel (✕) button instead of a checkbox for a new row', () => {
+    const { onCancel } = renderHeader({ selectable: true, isNewRow: true })
+    expect(screen.queryByRole('checkbox')).toBeNull()
+    const cancelBtn = screen.getByTitle('Cancel')
+    fireEvent.click(cancelBtn)
+    expect(onCancel).toHaveBeenCalledTimes(1)
+  })
+})