create-react-admin-template 0.0.0-stage → 0.1.0

package/template/tests/unit/components/TableComponent.test.tsx

@@ -0,0 +1,644 @@
+import { createRef, StrictMode } from 'react'
+import '@/styles/index.css'
+import { describe, expect, it, vi } from 'vitest'
+import { render } from 'vitest-browser-react'
+import { page, userEvent } from 'vitest/browser'
+import { Badge } from '@/components/ui/badge'
+import {
+  type TableCellContext,
+  type TableConfiguration,
+} from '@/components/AppTable'
+import {
+  createTableController,
+  type TableController,
+} from '@/components/AppTable/engine/table/controller/TableController'
+import { TableComponent } from '@/components/AppTable/table'
+
+interface ITestTableRow {
+  nId: number
+  strName: string
+  strStatus: string
+  strActions: string
+}
+
+function fnRenderStatusBadgeCell({
+  row: objRow,
+  value: objValue,
+}: TableCellContext<ITestTableRow>) {
+  const bIsOnline = objValue === 'online'
+
+  return (
+    <Badge
+      data-row-name={objRow.strName}
+      variant={bIsOnline ? 'default' : 'secondary'}
+    >
+      {bIsOnline ? '运行中' : '已停用'}
+    </Badge>
+  )
+}
+
+const objConfig = {
+  table: {
+    data: [
+      {
+        nId: 1,
+        strName: 'GPT Test',
+        strStatus: 'online',
+        strActions: '',
+      },
+      {
+        nId: 2,
+        strName: 'Claude Test',
+        strStatus: 'offline',
+        strActions: '',
+      },
+    ],
+    height: 240,
+    columns: [
+      { key: 'strName', label: '模型名称', readOnly: true },
+      {
+        key: 'strStatus',
+        label: '状态',
+        renderer: 'select',
+        readOnly: false,
+        options: [
+          { label: '运行中', value: 'online' },
+          { label: '维护中', value: 'maintenance' },
+          { label: '已停用', value: 'offline' },
+        ],
+      },
+    ],
+  },
+  search: false,
+  query: false,
+  toolbar: false,
+  pagination: false,
+  editing: { rowKey: 'nId' },
+  runtime: { licenseKey: 'non-commercial-and-evaluation' },
+} satisfies TableConfiguration<ITestTableRow>
+
+describe('TableComponent', () => {
+  it('reports explicit editing dirty transitions', async () => {
+    const fnOnDirtyChange = vi.fn<(bIsDirty: boolean) => void>()
+    const fnCommitChanges = vi.fn(async () => undefined)
+    const objController = createTableController<ITestTableRow>({
+      tableKey: 'table-dirty-state-test',
+      initialData: [...objConfig.table.data],
+      editing: {
+        rowKey: 'nId',
+        commitChanges: fnCommitChanges,
+      },
+    })
+
+    await render(
+      <TableComponent
+        tableKey='table-dirty-state-test'
+        controller={objController}
+        config={{
+          ...objConfig,
+          editing: {
+            rowKey: 'nId',
+            commitChanges: fnCommitChanges,
+          },
+        }}
+        onDirtyChange={fnOnDirtyChange}
+      />
+    )
+    await expect.poll(() => fnOnDirtyChange.mock.calls.at(-1)?.[0]).toBe(false)
+
+    objController.addRow({
+      nId: 3,
+      strName: 'Gemini Test',
+      strStatus: 'online',
+      strActions: '',
+    })
+    await expect.poll(() => fnOnDirtyChange.mock.calls.at(-1)?.[0]).toBe(true)
+
+    objController.discardChanges()
+    await expect.poll(() => fnOnDirtyChange.mock.calls.at(-1)?.[0]).toBe(false)
+    objController.destroy()
+  })
+
+  it('keeps the search button width stable while loading', async () => {
+    let fnResolveSearch: (() => void) | undefined
+    const objSearchGate = new Promise<void>((fnResolve) => {
+      fnResolveSearch = fnResolve
+    })
+    const fnQuery = vi
+      .fn()
+      .mockResolvedValueOnce({ list: objConfig.table.data, total: 2 })
+      .mockImplementationOnce(async () => {
+        await objSearchGate
+        return { list: objConfig.table.data, total: 2 }
+      })
+
+    await render(
+      <TableComponent
+        tableKey='stable-search-button-test'
+        config={{
+          ...objConfig,
+          search: {
+            conditions: [
+              {
+                key: 'strName',
+                label: '模型名称',
+                type: 'input',
+              },
+            ],
+          },
+          query: { handler: fnQuery },
+        }}
+      />
+    )
+
+    await expect.poll(() => fnQuery.mock.calls.length).toBe(1)
+    const objSearchButton = page.getByRole('button', { name: '搜索' })
+    await expect.element(objSearchButton).toBeEnabled()
+    const nIdleWidth = objSearchButton.element().getBoundingClientRect().width
+    expect(nIdleWidth).toBe(4 * 16)
+
+    await userEvent.click(objSearchButton)
+    await expect.element(objSearchButton).toBeDisabled()
+    expect(objSearchButton.element().getBoundingClientRect().width).toBe(
+      nIdleWidth
+    )
+    fnResolveSearch?.()
+  })
+
+  it('shows the complete column label when a header is truncated', async () => {
+    const strHeaderLabel = '这是一个无法完整展示的表头名称'
+    await render(
+      <TableComponent
+        tableKey='header-tooltip-test'
+        config={{
+          ...objConfig,
+          table: {
+            ...objConfig.table,
+            settings: { stretchH: 'none' },
+            columns: [
+              {
+                key: 'strName',
+                label: strHeaderLabel,
+                readOnly: true,
+                width: 72,
+              },
+            ],
+          },
+        }}
+      />
+    )
+    let objHeaderLabel: HTMLElement | null = null
+
+    await expect
+      .poll(() => {
+        objHeaderLabel =
+          Array.from(
+            document.querySelectorAll<HTMLElement>('.handsontable .colHeader')
+          ).find(
+            (objElement) =>
+              objElement.textContent === strHeaderLabel &&
+              getComputedStyle(objElement.closest('thead')!).visibility !==
+                'hidden'
+          ) ?? null
+        return Boolean(
+          objHeaderLabel &&
+          objHeaderLabel.scrollWidth > objHeaderLabel.clientWidth
+        )
+      })
+      .toBe(true)
+
+    objHeaderLabel!.dataset.testid = 'truncated-table-header'
+    await userEvent.hover(page.getByTestId('truncated-table-header'))
+    await expect
+      .poll(
+        () =>
+          document.querySelector<HTMLElement>('[data-slot="tooltip-content"]')
+            ?.textContent
+      )
+      .toBe(strHeaderLabel)
+  })
+
+  it('renders the toolbar without a bottom divider', async () => {
+    await render(
+      <TableComponent
+        tableKey='toolbar-divider-test'
+        config={{
+          ...objConfig,
+          toolbar: {
+            buttons: [
+              {
+                key: 'test-action',
+                label: '测试操作',
+                onClick: vi.fn(),
+              },
+            ],
+            columnEditor: false,
+            densityControl: false,
+          },
+        }}
+      />
+    )
+    const objToolbar = document.querySelector('[data-slot="table-toolbar"]')
+
+    expect(objToolbar).not.toBeNull()
+    expect(objToolbar).not.toHaveClass('border-b')
+  })
+
+  it('mounts Handsontable with configured columns and rows', async () => {
+    const objTableRef = createRef<TableController<ITestTableRow>>()
+
+    await render(
+      <TableComponent
+        ref={objTableRef}
+        tableKey='table-component-browser-test'
+        config={objConfig}
+      />
+    )
+
+    await expect
+      .poll(() => objTableRef.current?.tableKey)
+      .toBe('table-component-browser-test')
+
+    await expect
+      .poll(() =>
+        Array.from(
+          document.querySelectorAll(
+            '.handsontable .ht_master th, .handsontable .ht_master td'
+          )
+        ).map((objCell) => objCell.textContent?.trim())
+      )
+      .toEqual(expect.arrayContaining(['模型名称', 'GPT Test', 'Claude Test']))
+  })
+
+  it('renders shadcn components through cellComponent', async () => {
+    const objBadgeConfig = {
+      ...objConfig,
+      table: {
+        ...objConfig.table,
+        columns: [
+          { key: 'strName', label: '模型名称', readOnly: true },
+          {
+            key: 'strStatus',
+            label: '状态',
+            readOnly: true,
+            cellComponent: fnRenderStatusBadgeCell,
+          },
+        ],
+      },
+    } satisfies TableConfiguration<ITestTableRow>
+
+    await render(
+      <TableComponent tableKey='badge-cell-test' config={objBadgeConfig} />
+    )
+
+    await expect
+      .poll(() =>
+        Array.from(
+          document.querySelectorAll<HTMLElement>('[data-slot="badge"]')
+        ).map((objBadge) => ({
+          strLabel: objBadge.textContent?.trim(),
+          strRowName: objBadge.dataset.rowName,
+        }))
+      )
+      .toEqual(
+        expect.arrayContaining([
+          { strLabel: '运行中', strRowName: 'GPT Test' },
+          { strLabel: '已停用', strRowName: 'Claude Test' },
+        ])
+      )
+  })
+
+  it('uses the explicit table key as the stable preference identity', async () => {
+    const objTableRef = createRef<TableController<ITestTableRow>>()
+
+    await render(
+      <TableComponent
+        ref={objTableRef}
+        tableKey='model-price-history'
+        config={objConfig}
+      />
+    )
+
+    await expect
+      .poll(() => objTableRef.current?.tableKey)
+      .toBe('model-price-history')
+  })
+
+  it('pins trailing action columns and keeps their actions usable', async () => {
+    const strTableKey = 'action-column-defaults-test'
+    const objActionConfig = {
+      ...objConfig,
+      table: {
+        ...objConfig.table,
+        showIndex: false,
+        columns: [
+          {
+            key: 'strName',
+            label: '模型名称',
+            readOnly: true,
+            width: 1600,
+          },
+          {
+            key: 'strActions',
+            label: '操作',
+            renderer: 'button',
+            width: 120,
+            actions: [
+              {
+                key: 'edit',
+                label: '编辑',
+                onClick: () => undefined,
+              },
+              {
+                key: 'prices',
+                label: '价格',
+                onClick: () => undefined,
+              },
+              {
+                key: 'credentials',
+                label: 'API Key',
+                onClick: () => undefined,
+              },
+              {
+                key: 'test',
+                label: '网络测试',
+                onClick: () => undefined,
+              },
+            ],
+          },
+        ],
+      },
+    } satisfies TableConfiguration<ITestTableRow>
+    const objController = createTableController({
+      tableKey: strTableKey,
+      initialData: objActionConfig.table.data,
+    })
+
+    const objScreen = await render(
+      <StrictMode>
+        <TableComponent
+          tableKey={strTableKey}
+          controller={objController}
+          config={objActionConfig}
+        />
+      </StrictMode>
+    )
+
+    await expect
+      .poll(() => document.querySelector('.table-component__fixed-end-overlay'))
+      .not.toBeNull()
+    await expect
+      .element(
+        objScreen.getByRole('button', { name: '编辑', exact: true }).first()
+      )
+      .toBeVisible()
+    const objActionButton = document.querySelector<HTMLButtonElement>(
+      '.table-component__fixed-end-overlay [data-slot="table-action"]'
+    )
+    const objActionGroup = objActionButton?.closest<HTMLElement>(
+      '.table-component__actions'
+    )
+
+    expect(objActionButton).not.toBeNull()
+    expect(objActionButton).toHaveAttribute('data-variant', 'link')
+    expect(getComputedStyle(objActionGroup!).justifyContent).toBe('center')
+    const arrDirectActionLabels = Array.from(
+      document.querySelectorAll<HTMLElement>('[data-slot="table-action"]')
+    ).map((objAction) => objAction.textContent?.trim())
+    expect(arrDirectActionLabels).toEqual(
+      expect.arrayContaining(['编辑', '价格', '更多'])
+    )
+    expect(arrDirectActionLabels).not.toContain('API Key')
+    expect(arrDirectActionLabels).not.toContain('网络测试')
+
+    await userEvent.click(
+      objScreen.getByRole('button', { name: '更多' }).first()
+    )
+    await expect
+      .element(objScreen.getByRole('menuitem', { name: 'API Key' }))
+      .toBeVisible()
+    await expect
+      .element(objScreen.getByRole('menuitem', { name: '网络测试' }))
+      .toBeVisible()
+    await userEvent.keyboard('{Escape}')
+    objController.destroy()
+  })
+
+  it('keeps the column menu inside the viewport without growing the page', async () => {
+    const strTableKey = 'column-menu-viewport-test'
+    const objController = createTableController({
+      tableKey: strTableKey,
+      initialData: objConfig.table.data,
+    })
+
+    await render(
+      <TableComponent
+        tableKey={strTableKey}
+        controller={objController}
+        config={objConfig}
+      />
+    )
+
+    await expect.poll(() => objController.instance).toBeTruthy()
+    const nInitialDocumentHeight = document.documentElement.scrollHeight
+    const fnViewportHeightSpy = vi
+      .spyOn(window, 'innerHeight', 'get')
+      .mockReturnValue(480)
+    const objDropdownMenu = objController.instance!.getPlugin('dropdownMenu')
+
+    try {
+      objDropdownMenu.open({
+        top: window.innerHeight - 40,
+        left: Math.min(400, window.innerWidth - 320),
+      })
+
+      const objMenu = document.querySelector<HTMLElement>('.htDropdownMenu')
+      const objHolder = objMenu?.querySelector<HTMLElement>(
+        ':scope > .ht_master > .wtHolder'
+      )
+      await expect
+        .poll(() => objMenu?.getBoundingClientRect().bottom)
+        .toBeTruthy()
+      await expect
+        .poll(() => objMenu!.getBoundingClientRect().bottom)
+        .toBeLessThanOrEqual(window.innerHeight - 8)
+
+      expect(objHolder).not.toBeNull()
+      expect(objHolder!.scrollHeight).toBeGreaterThan(objHolder!.clientHeight)
+      expect(document.documentElement.scrollHeight).toBe(nInitialDocumentHeight)
+    } finally {
+      objDropdownMenu.close()
+      fnViewportHeightSpy.mockRestore()
+      objController.destroy()
+    }
+  })
+
+  it('publishes grid layout changes after a column resize', async () => {
+    const strTableKey = 'column-resize-height-test'
+    const objController = createTableController({
+      tableKey: strTableKey,
+      initialData: objConfig.table.data,
+    })
+    await render(
+      <TableComponent
+        tableKey={strTableKey}
+        controller={objController}
+        config={objConfig}
+      />
+    )
+
+    await expect.poll(() => objController.instance).toBeTruthy()
+    const fnCoreLayoutListener = vi.fn()
+    const fnUnsubscribeLayout =
+      objController.subscribeGridLayout(fnCoreLayoutListener)
+
+    try {
+      objController.instance!.runHooks('afterColumnResize', 80, 0, false)
+
+      expect(fnCoreLayoutListener).toHaveBeenCalled()
+      const nLayoutNotificationCount = fnCoreLayoutListener.mock.calls.length
+      fnUnsubscribeLayout()
+      objController.instance!.runHooks('afterColumnResize', 120, 0, false)
+      expect(fnCoreLayoutListener).toHaveBeenCalledTimes(
+        nLayoutNotificationCount
+      )
+    } finally {
+      objController.destroy()
+    }
+  })
+
+  it('opens the React cell layer from an editable table cell', async () => {
+    const objScreen = await render(
+      <TableComponent tableKey='editable-component-test' config={objConfig} />
+    )
+    let objStatusCell: HTMLTableCellElement | undefined
+
+    await expect
+      .poll(() => {
+        objStatusCell = Array.from(
+          document.querySelectorAll<HTMLTableCellElement>(
+            '.handsontable.ht_master tbody td'
+          )
+        ).find((objCell) => objCell.textContent?.trim() === '运行中')
+        return objStatusCell
+      })
+      .toBeDefined()
+
+    await userEvent.dblClick(objStatusCell!)
+    await expect.element(objScreen.getByRole('listbox')).toBeVisible()
+    await userEvent.click(objScreen.getByRole('option', { name: '维护中' }))
+
+    await expect
+      .poll(() =>
+        Array.from(
+          document.querySelectorAll<HTMLTableCellElement>(
+            '.handsontable.ht_master tbody td'
+          )
+        ).some((objCell) => objCell.textContent?.trim() === '维护中')
+      )
+      .toBe(true)
+  })
+
+  it('does not pin leading action columns unless explicitly configured', async () => {
+    const strTableKey = 'leading-action-column-defaults-test'
+    const objActionConfig = {
+      ...objConfig,
+      table: {
+        ...objConfig.table,
+        showIndex: false,
+        columns: [
+          {
+            key: 'strActions',
+            label: '操作',
+            renderer: 'button',
+            width: 120,
+            actions: [
+              {
+                key: 'edit',
+                label: '编辑',
+                onClick: () => undefined,
+              },
+            ],
+          },
+          {
+            key: 'strName',
+            label: '模型名称',
+            readOnly: true,
+            width: 1600,
+          },
+        ],
+      },
+    } satisfies TableConfiguration<ITestTableRow>
+    const objController = createTableController({
+      tableKey: strTableKey,
+      initialData: objActionConfig.table.data,
+    })
+
+    await render(
+      <TableComponent
+        tableKey={strTableKey}
+        controller={objController}
+        config={objActionConfig}
+      />
+    )
+
+    await expect
+      .poll(
+        () =>
+          Reflect.get(
+            objController.instance?.getSettings() ?? {},
+            'fixedColumnsStart'
+          ) === 0
+      )
+      .toBe(true)
+  })
+
+  it('allows leading action columns to be pinned explicitly', async () => {
+    const strTableKey = 'leading-action-column-opt-in-test'
+    const objActionConfig = {
+      ...objConfig,
+      table: {
+        ...objConfig.table,
+        showIndex: false,
+        autoFreezeStartActions: true,
+        columns: [
+          {
+            key: 'strActions',
+            label: '操作',
+            renderer: 'button',
+            actions: [
+              {
+                key: 'edit',
+                label: '编辑',
+                onClick: () => undefined,
+              },
+            ],
+          },
+          { key: 'strName', label: '模型名称', readOnly: true },
+        ],
+      },
+    } satisfies TableConfiguration<ITestTableRow>
+    const objController = createTableController({
+      tableKey: strTableKey,
+      initialData: objActionConfig.table.data,
+    })
+
+    await render(
+      <TableComponent
+        tableKey={strTableKey}
+        controller={objController}
+        config={objActionConfig}
+      />
+    )
+
+    await expect
+      .poll(
+        () =>
+          Reflect.get(
+            objController.instance?.getSettings() ?? {},
+            'fixedColumnsStart'
+          ) === 1
+      )
+      .toBe(true)
+  })
+})