@nocobase/client-v2 2.3.0-alpha.1 → 2.3.0-beta.10

package/src/components/form/table/__tests__/Table.columnWidth.test.tsx

@@ -0,0 +1,433 @@
+/**
+ * This file is part of the NocoBase (R) project.
+ * Copyright (c) 2020-2024 NocoBase Co., Ltd.
+ * Authors: NocoBase Team.
+ *
+ * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License.
+ * For more information, please refer to: https://www.nocobase.com/agreement.
+ */
+
+import { fireEvent, render } from '@testing-library/react';
+import { css } from '@emotion/css';
+import { ConfigProvider, Table as AntdTable } from 'antd';
+import type { ColumnsType } from 'antd/es/table/interface';
+import type { RenderedCell } from 'rc-table/lib/interface';
+import React from 'react';
+import { describe, expect, it, vi } from 'vitest';
+import { Table, type TableProps } from '../Table';
+
+type Row = {
+  id: number;
+  name: string;
+  note: string;
+};
+
+const row: Row = {
+  id: 1,
+  name: 'Long unbroken content',
+  note: 'Secondary content',
+};
+
+const defaultColumnMaxWidth = 400;
+const defaultColumnContentClassName = 'nb-table-default-column-content';
+
+function getMatchingStyleValues(element: Element, property: string) {
+  return Array.from(document.styleSheets).flatMap((styleSheet) => {
+    try {
+      return Array.from(styleSheet.cssRules).flatMap((rule) => {
+        if (!(rule instanceof CSSStyleRule)) return [];
+        try {
+          return element.matches(rule.selectorText) ? [rule.style.getPropertyValue(property)] : [];
+        } catch {
+          return [];
+        }
+      });
+    } catch {
+      return [];
+    }
+  });
+}
+
+function renderTable(columns: ColumnsType<Row>, props: Partial<TableProps<Row>> = {}) {
+  return render(
+    <ConfigProvider
+      theme={{
+        token: {
+          screenXS: 500,
+          paddingXL: 40,
+          padding: 10,
+        },
+      }}
+    >
+      <Table<Row> rowKey="id" columns={columns} dataSource={[row]} pagination={false} {...props} />
+    </ConfigProvider>,
+  );
+}
+
+function getResolvedMaxWidth(element: HTMLElement) {
+  const style = window.getComputedStyle(element);
+  const variableName = style.maxWidth.match(/^var\((--[^)]+)\)$/)?.[1];
+  return variableName ? style.getPropertyValue(variableName).trim() : style.maxWidth;
+}
+
+function expectDefaultWrappingStyle(element: Element | null) {
+  expect(element).not.toBeNull();
+  const htmlElement = element as HTMLElement;
+  const style = window.getComputedStyle(htmlElement);
+  expect(htmlElement.classList).toContain(defaultColumnContentClassName);
+  expect(getResolvedMaxWidth(htmlElement)).toBe(`${defaultColumnMaxWidth}px`);
+  expect(style.whiteSpace).toBe('normal');
+  expect(style.overflowWrap).toBe('break-word');
+  expect(style.wordBreak).toBe('break-word');
+}
+
+function expectNoDefaultWrappingStyle(element: Element | null) {
+  expect(element).not.toBeNull();
+  const htmlElement = element as HTMLElement;
+  expect(htmlElement.classList).not.toContain(defaultColumnContentClassName);
+  expect(getResolvedMaxWidth(htmlElement)).not.toBe(`${defaultColumnMaxWidth}px`);
+}
+
+describe('Table default column content width', () => {
+  it('adds token-derived wrapping styles to unconstrained leaf headers and cells', () => {
+    const { getByRole } = renderTable([{ title: 'Name', dataIndex: 'name' }]);
+
+    expectDefaultWrappingStyle(getByRole('columnheader', { name: 'Name' }));
+    expectDefaultWrappingStyle(getByRole('cell', { name: row.name }));
+  });
+
+  it('leaves columns with explicit width, ellipsis, or fixed positioning unchanged', () => {
+    const columns: ColumnsType<Row> = [
+      { title: 'Width', dataIndex: 'name', width: 240 },
+      { title: 'Ellipsis', dataIndex: 'note', ellipsis: true },
+      { title: 'Fixed', dataIndex: 'id', fixed: 'left' },
+    ];
+    const { getByRole } = renderTable(columns, { scroll: { x: 800 } });
+
+    for (const title of ['Width', 'Ellipsis', 'Fixed']) {
+      expectNoDefaultWrappingStyle(getByRole('columnheader', { name: title }));
+    }
+
+    const widthCell = getByRole('cell', { name: row.name });
+    const ellipsisCell = getByRole('cell', { name: row.note });
+    const fixedCell = getByRole('cell', { name: String(row.id) });
+    for (const cell of [widthCell, ellipsisCell, fixedCell]) {
+      expectNoDefaultWrappingStyle(cell);
+    }
+    expect(ellipsisCell.classList).toContain('ant-table-cell-ellipsis');
+    expect(window.getComputedStyle(ellipsisCell).whiteSpace).toBe('nowrap');
+  });
+
+  it('preserves cell callbacks and lets caller styles override the defaults', () => {
+    const handleClick = vi.fn();
+    const onCell = vi.fn(() => ({
+      colSpan: 2,
+      className: 'custom-body-cell',
+      onClick: handleClick,
+      style: {
+        maxWidth: 120,
+        whiteSpace: 'pre' as const,
+      },
+    }));
+    const onHeaderCell = vi.fn(() => ({
+      colSpan: 2,
+      className: 'custom-header-cell',
+      style: {
+        maxWidth: 180,
+        overflowWrap: 'normal' as const,
+      },
+    }));
+    const columns: ColumnsType<Row> = [
+      { title: 'Name', dataIndex: 'name', onCell, onHeaderCell },
+      { title: 'Note', dataIndex: 'note', width: 100 },
+    ];
+    const { container } = renderTable(columns);
+
+    const header = container.querySelector<HTMLElement>('th.custom-header-cell');
+    expect(header?.getAttribute('colspan')).toBe('2');
+    const headerStyle = window.getComputedStyle(header as HTMLElement);
+    expect(headerStyle.maxWidth).toBe('180px');
+    expect(headerStyle.whiteSpace).toBe('normal');
+    expect(headerStyle.overflowWrap).toBe('normal');
+    expect(headerStyle.wordBreak).toBe('break-word');
+
+    const cell = container.querySelector<HTMLElement>('td.custom-body-cell');
+    expect(cell?.getAttribute('colspan')).toBe('2');
+    const cellStyle = window.getComputedStyle(cell as HTMLElement);
+    expect(cellStyle.maxWidth).toBe('120px');
+    expect(cellStyle.whiteSpace).toBe('pre');
+    expect(cellStyle.overflowWrap).toBe('break-word');
+    expect(cellStyle.wordBreak).toBe('break-word');
+
+    fireEvent.click(cell as HTMLElement);
+    expect(handleClick).toHaveBeenCalledTimes(1);
+    expect(onCell).toHaveBeenCalledWith(row, 0);
+    expect(onHeaderCell).toHaveBeenCalledWith(expect.objectContaining({ title: 'Name' }));
+  });
+
+  it('keeps the default wrapping behavior when caller classNames have no styles', () => {
+    const columns: ColumnsType<Row> = [
+      {
+        title: 'Name',
+        dataIndex: 'name',
+        className: 'column-marker',
+        onCell: () => ({ className: 'body-marker' }),
+        onHeaderCell: () => ({ className: 'header-marker' }),
+      },
+      {
+        title: 'Note',
+        dataIndex: 'note',
+        render: () => ({ children: 'Rendered marker', props: { className: 'render-marker' } }),
+      },
+    ];
+    const { getByRole } = renderTable(columns);
+
+    const nameHeader = getByRole('columnheader', { name: 'Name' });
+    const nameCell = getByRole('cell', { name: row.name });
+    const renderedCell = getByRole('cell', { name: 'Rendered marker' });
+    expect(nameHeader.classList).toContain('column-marker');
+    expect(nameHeader.classList).toContain('header-marker');
+    expect(nameCell.classList).toContain('column-marker');
+    expect(nameCell.classList).toContain('body-marker');
+    expect(renderedCell.classList).toContain('render-marker');
+    for (const element of [nameHeader, nameCell, renderedCell]) {
+      expectDefaultWrappingStyle(element);
+    }
+  });
+
+  it('lets caller className styles override the defaults', () => {
+    const callerClassName = css`
+      max-width: 135px;
+      white-space: pre;
+      overflow-wrap: normal;
+      word-break: normal;
+    `;
+    const columns: ColumnsType<Row> = [
+      {
+        title: 'Name',
+        dataIndex: 'name',
+        onCell: () => ({ className: callerClassName }),
+        onHeaderCell: () => ({ className: callerClassName }),
+      },
+      { title: 'Note', dataIndex: 'note', className: callerClassName },
+    ];
+    // Use a distinct token value so this render creates its default Emotion class after the caller class. This
+    // catches source-order regressions that would be hidden if a previous test had already inserted the default rule.
+    const { getByRole } = render(
+      <ConfigProvider theme={{ token: { screenXS: 501, paddingXL: 40, padding: 10 } }}>
+        <Table<Row> rowKey="id" columns={columns} dataSource={[row]} pagination={false} />
+      </ConfigProvider>,
+    );
+
+    for (const element of [
+      getByRole('columnheader', { name: 'Name' }),
+      getByRole('columnheader', { name: 'Note' }),
+      getByRole('cell', { name: row.name }),
+      getByRole('cell', { name: row.note }),
+    ]) {
+      const style = window.getComputedStyle(element);
+      expect(getResolvedMaxWidth(element)).toBe('135px');
+      expect(style.whiteSpace).toBe('pre');
+      expect(style.overflowWrap).not.toBe('anywhere');
+      expect(getMatchingStyleValues(element, 'overflow-wrap')).toContain('normal');
+      expect(style.wordBreak).toBe('normal');
+    }
+  });
+
+  it('lets className returned from render override the defaults on first mount', () => {
+    const callerClassName = css`
+      max-width: 136px;
+      white-space: pre;
+      overflow-wrap: normal;
+      word-break: normal;
+    `;
+    const renderedCell: RenderedCell<Row> = {
+      props: { className: callerClassName },
+    };
+    const { container } = render(
+      <ConfigProvider theme={{ token: { screenXS: 502, paddingXL: 40, padding: 10 } }}>
+        <Table<Row>
+          rowKey="id"
+          columns={[{ title: 'Name', dataIndex: 'name', render: () => renderedCell }]}
+          dataSource={[row]}
+          pagination={false}
+        />
+      </ConfigProvider>,
+    );
+
+    const cell = container.querySelector<HTMLElement>('.ant-table-tbody td');
+    expect(cell).not.toBeNull();
+    const htmlCell = cell as HTMLElement;
+    const style = window.getComputedStyle(htmlCell);
+    expect(getResolvedMaxWidth(htmlCell)).toBe('136px');
+    expect(style.whiteSpace).toBe('pre');
+    expect(style.overflowWrap).not.toBe('anywhere');
+    expect(getMatchingStyleValues(cell as HTMLElement, 'overflow-wrap')).toContain('normal');
+    expect(style.wordBreak).toBe('normal');
+  });
+
+  it('lets static caller className styles override defaults inserted later', () => {
+    const callerClassName = 'caller-static-table-column';
+    const callerStyle = document.createElement('style');
+    callerStyle.textContent = `
+      .${callerClassName} {
+        max-width: 137px;
+        white-space: pre;
+        overflow-wrap: normal;
+        word-break: normal;
+      }
+    `;
+    document.head.prepend(callerStyle);
+
+    try {
+      const columns: ColumnsType<Row> = [
+        {
+          title: 'Name',
+          dataIndex: 'name',
+          onCell: () => ({ className: callerClassName }),
+          onHeaderCell: () => ({ className: callerClassName }),
+        },
+        { title: 'Note', dataIndex: 'note', className: callerClassName },
+        {
+          title: 'Rendered',
+          dataIndex: 'id',
+          render: () => ({ props: { className: callerClassName } }),
+        },
+      ];
+      const { container, getByRole } = render(
+        <ConfigProvider theme={{ token: { screenXS: 503, paddingXL: 40, padding: 10 } }}>
+          <Table<Row> rowKey="id" columns={columns} dataSource={[row]} pagination={false} />
+        </ConfigProvider>,
+      );
+      const cells = Array.from(container.querySelectorAll<HTMLElement>('.ant-table-tbody td'));
+
+      for (const element of [
+        getByRole('columnheader', { name: 'Name' }),
+        getByRole('columnheader', { name: 'Note' }),
+        cells[0],
+        cells[1],
+        cells[2],
+      ]) {
+        expect(element).toBeDefined();
+        const htmlElement = element as HTMLElement;
+        const style = window.getComputedStyle(htmlElement);
+        expect(getResolvedMaxWidth(htmlElement)).toBe('137px');
+        expect(style.whiteSpace).toBe('pre');
+        expect(style.overflowWrap).not.toBe('anywhere');
+        expect(getMatchingStyleValues(htmlElement, 'overflow-wrap')).toContain('normal');
+        expect(style.wordBreak).toBe('normal');
+      }
+    } finally {
+      callerStyle.remove();
+    }
+  });
+
+  it('lets styles returned from render override the defaults', () => {
+    const renderedCell: RenderedCell<Row> = {
+      children: 'Rendered cell',
+      props: {
+        className: 'rendered-cell',
+        style: {
+          maxWidth: 123,
+          whiteSpace: 'pre',
+          overflowWrap: 'normal',
+          wordBreak: 'normal',
+        },
+      },
+    };
+    const { getByRole } = renderTable([{ title: 'Name', dataIndex: 'name', render: () => renderedCell }]);
+
+    const style = window.getComputedStyle(getByRole('cell', { name: 'Rendered cell' }));
+    expect(style.maxWidth).toBe('123px');
+    expect(style.whiteSpace).toBe('pre');
+    expect(style.overflowWrap).toBe('normal');
+    expect(style.wordBreak).toBe('normal');
+  });
+
+  it('processes only leaves in nested columns without mutating the input', () => {
+    const nameColumn = { title: 'Name', dataIndex: 'name' as const };
+    const noteColumn = { title: 'Note', dataIndex: 'note' as const };
+    const children = [nameColumn, noteColumn];
+    const groupColumn = { title: 'Details', children };
+    const columns: ColumnsType<Row> = [groupColumn];
+
+    const { getByRole } = renderTable(columns);
+
+    expectNoDefaultWrappingStyle(getByRole('columnheader', { name: 'Details' }));
+    expectDefaultWrappingStyle(getByRole('columnheader', { name: 'Name' }));
+    expectDefaultWrappingStyle(getByRole('columnheader', { name: 'Note' }));
+    expectDefaultWrappingStyle(getByRole('cell', { name: row.name }));
+    expectDefaultWrappingStyle(getByRole('cell', { name: row.note }));
+
+    expect(columns[0]).toBe(groupColumn);
+    expect(groupColumn.children).toBe(children);
+    expect(children[0]).toBe(nameColumn);
+    expect(children[1]).toBe(noteColumn);
+    expect(nameColumn).not.toHaveProperty('onCell');
+    expect(nameColumn).not.toHaveProperty('onHeaderCell');
+    expect(noteColumn).not.toHaveProperty('onCell');
+    expect(noteColumn).not.toHaveProperty('onHeaderCell');
+  });
+
+  it('does not apply the default boundary to selection or drag-handle columns', () => {
+    const columns: ColumnsType<Row> = [{ title: 'Name', dataIndex: 'name' }];
+    const selectionTable = renderTable(columns, { rowSelection: {} });
+
+    expectNoDefaultWrappingStyle(selectionTable.container.querySelector<HTMLElement>('th.ant-table-selection-column'));
+    expectNoDefaultWrappingStyle(selectionTable.container.querySelector<HTMLElement>('td.ant-table-selection-column'));
+    expectDefaultWrappingStyle(selectionTable.getByRole('columnheader', { name: 'Name' }));
+    selectionTable.unmount();
+
+    const dragTable = renderTable(columns, { isDraggable: true, onSortEnd: vi.fn() });
+    const dragHeader = dragTable.container.querySelector<HTMLElement>('.ant-table-thead th:first-child');
+    const dragCell = dragTable.container.querySelector<HTMLElement>('.ant-table-tbody td:first-child');
+
+    expectNoDefaultWrappingStyle(dragHeader);
+    expectNoDefaultWrappingStyle(dragCell);
+    expectDefaultWrappingStyle(dragTable.getByRole('columnheader', { name: 'Name' }));
+  });
+
+  it('preserves Ant Design sentinels used to position expand and selection columns', () => {
+    const columns: ColumnsType<Row> = [
+      { title: 'Name', dataIndex: 'name' },
+      AntdTable.EXPAND_COLUMN,
+      AntdTable.SELECTION_COLUMN,
+      { title: 'Note', dataIndex: 'note' },
+    ];
+    const { container } = renderTable(columns, {
+      expandable: { expandedRowRender: (record) => <span>{record.note}</span> },
+      rowSelection: {},
+    });
+
+    const headers = Array.from(container.querySelectorAll<HTMLElement>('.ant-table-thead th'));
+    expect(headers).toHaveLength(4);
+    expect(headers[0].textContent).toBe('Name');
+    expect(headers[1].classList).toContain('ant-table-row-expand-icon-cell');
+    expect(headers[2].classList).toContain('ant-table-selection-column');
+    expect(headers[3].textContent).toBe('Note');
+    expectNoDefaultWrappingStyle(headers[1]);
+    expectNoDefaultWrappingStyle(headers[2]);
+  });
+
+  it('treats empty, undefined, or null children as leaves like antd', () => {
+    const columns = [
+      { title: 'Empty children', dataIndex: 'name', children: [] },
+      { title: 'Undefined children', dataIndex: 'note', children: undefined },
+      { title: 'Null children', dataIndex: 'id', children: null },
+    ] as unknown as ColumnsType<Row>;
+    const { getByRole } = renderTable(columns);
+
+    expectDefaultWrappingStyle(getByRole('columnheader', { name: 'Empty children' }));
+    expectDefaultWrappingStyle(getByRole('columnheader', { name: 'Undefined children' }));
+    expectDefaultWrappingStyle(getByRole('columnheader', { name: 'Null children' }));
+    expectDefaultWrappingStyle(getByRole('cell', { name: row.name }));
+    expectDefaultWrappingStyle(getByRole('cell', { name: row.note }));
+    expectDefaultWrappingStyle(getByRole('cell', { name: String(row.id) }));
+  });
+
+  it('does not force fixed table layout', () => {
+    const { container } = renderTable([{ title: 'Name', dataIndex: 'name' }]);
+
+    expect(container.querySelector<HTMLTableElement>('table')?.style.tableLayout).not.toBe('fixed');
+  });
+});

package/src/flow/__tests__/FlowRoute.test.tsx

@@ -116,6 +116,7 @@ describe('FlowRoute', () => {
         }),
       );
     });
+    expect(engine.context.deviceType).toBe('computer');
 
     rerender(
       <FlowEngineProvider engine={engine}>
@@ -581,14 +582,14 @@ describe('FlowRoute', () => {
     expect(getRouteBySchemaUid).toHaveBeenCalledTimes(1);
   });
 
-  it('should show 404 when current route is a legacy page in v2 runtime', async () => {
+  it('should explain how to open a legacy page outside the v2 runtime', async () => {
     const originalLocation = window.location;
     const replace = vi.fn();
     Object.defineProperty(window, 'location', {
       configurable: true,
       value: {
         ...originalLocation,
-        pathname: '/v2/admin/test-page/tab/tab-1',
+        pathname: '/nocobase/v2/apps/jhb20/admin/test-page/tab/tab-1',
         search: '?from=direct',
         hash: '#dialog',
         replace,
@@ -607,9 +608,9 @@ describe('FlowRoute', () => {
       });
       engine.context.defineProperty('app', {
         value: {
-          getPublicPath: () => '/v2/',
+          getPublicPath: () => '/nocobase/v2/',
           router: {
-            getBasename: () => '/v2',
+            getBasename: () => '/nocobase/v2',
           },
         },
       });
@@ -625,15 +626,25 @@ describe('FlowRoute', () => {
 
       render(
         <FlowEngineProvider engine={engine}>
-          <MemoryRouter initialEntries={['/flow/test-page']}>
+          <MemoryRouter initialEntries={['/nocobase/v2/apps/jhb20/admin/test-page/tab/tab-1?from=direct#dialog']}>
             <Routes>
-              <Route path="/flow/:name" element={<FlowRoute />} />
+              <Route path="/nocobase/v2/apps/jhb20/admin/:name/*" element={<FlowRoute />} />
             </Routes>
           </MemoryRouter>
         </FlowEngineProvider>,
       );
 
-      expect(await screen.findByText('404')).toBeInTheDocument();
+      expect(await screen.findByText('This page is not supported in the /v2/ branch')).toBeInTheDocument();
+      expect(
+        screen.getByText(
+          'The /v2/ branch only supports new pages. This page is a legacy page. Please open it from the original entry.',
+        ),
+      ).toBeInTheDocument();
+      expect(screen.queryByText('404')).not.toBeInTheDocument();
+      expect(screen.getByRole('link', { name: 'Open from the original entry' })).toHaveAttribute(
+        'href',
+        '/nocobase/apps/jhb20/admin/test-page/tab/tab-1?from=direct#dialog',
+      );
       expect(replace).not.toHaveBeenCalled();
       expect(adminLayoutModel.registerRoutePage).not.toHaveBeenCalled();
       expect(adminLayoutModel.updateRoutePage).not.toHaveBeenCalled();
@@ -706,6 +717,113 @@ describe('FlowRoute', () => {
     }
   });
 
+  it('should render 404 for missing FlowModel in notFound mode without routeRepository', async () => {
+    const engine = new FlowEngine();
+    engine.context.defineProperty('app', {
+      value: {
+        getPublicPath: () => '/v2/',
+        router: {
+          getBasename: () => '/v2',
+        },
+      },
+    });
+
+    const adminLayoutModel: MockAdminLayoutModel = Object.assign(
+      engine.createModel({ uid: 'admin-layout-model', use: 'FlowModel' }),
+      {
+        registerRoutePage: vi.fn(),
+        updateRoutePage: vi.fn(),
+        unregisterRoutePage: vi.fn(),
+      },
+    );
+
+    render(
+      <FlowEngineProvider engine={engine}>
+        <MemoryRouter initialEntries={['/embed/missing-page']}>
+          <Routes>
+            <Route path="/embed/:name" element={<FlowRoute legacyPageBehavior="notFound" />} />
+          </Routes>
+        </MemoryRouter>
+      </FlowEngineProvider>,
+    );
+
+    expect(await screen.findByText('404')).toBeInTheDocument();
+    expect(adminLayoutModel.registerRoutePage).not.toHaveBeenCalled();
+  });
+
+  it('should bridge by default when routeRepository does not exist', async () => {
+    const engine = new FlowEngine();
+    engine.context.defineProperty('app', {
+      value: {
+        getPublicPath: () => '/v2/',
+        router: {
+          getBasename: () => '/v2',
+        },
+      },
+    });
+
+    const adminLayoutModel: MockAdminLayoutModel = Object.assign(
+      engine.createModel({ uid: 'admin-layout-model', use: 'FlowModel' }),
+      {
+        registerRoutePage: vi.fn(),
+        updateRoutePage: vi.fn(),
+        unregisterRoutePage: vi.fn(),
+      },
+    );
+
+    render(
+      <FlowEngineProvider engine={engine}>
+        <MemoryRouter initialEntries={['/flow/missing-page']}>
+          <Routes>
+            <Route path="/flow/:name" element={<FlowRoute />} />
+          </Routes>
+        </MemoryRouter>
+      </FlowEngineProvider>,
+    );
+
+    await waitFor(() => {
+      expect(adminLayoutModel.registerRoutePage).toHaveBeenCalledWith('missing-page', expect.any(Object));
+    });
+    expect(screen.queryByText('404')).not.toBeInTheDocument();
+  });
+
+  it('should bridge existing FlowModel in notFound mode without routeRepository', async () => {
+    const engine = new FlowEngine();
+    engine.createModel({ uid: 'test-page', use: 'FlowModel' });
+    engine.context.defineProperty('app', {
+      value: {
+        getPublicPath: () => '/v2/',
+        router: {
+          getBasename: () => '/v2',
+        },
+      },
+    });
+
+    const adminLayoutModel: MockAdminLayoutModel = Object.assign(
+      engine.createModel({ uid: 'admin-layout-model', use: 'FlowModel' }),
+      {
+        registerRoutePage: vi.fn(),
+        updateRoutePage: vi.fn(),
+        unregisterRoutePage: vi.fn(),
+      },
+    );
+
+    render(
+      <FlowEngineProvider engine={engine}>
+        <MemoryRouter initialEntries={['/embed/test-page']}>
+          <Routes>
+            <Route path="/embed/:name" element={<FlowRoute legacyPageBehavior="notFound" />} />
+          </Routes>
+        </MemoryRouter>
+      </FlowEngineProvider>,
+    );
+
+    await waitFor(() => {
+      expect(adminLayoutModel.registerRoutePage).toHaveBeenCalledWith('test-page', expect.any(Object));
+    });
+    expect(screen.queryByText('404')).not.toBeInTheDocument();
+  });
+
   it('should bridge existing FlowModel when behavior is notFound and routeRepository has no route', async () => {
     const engine = new FlowEngine();
     engine.setModelRepository({
@@ -1801,7 +1919,7 @@ describe('FlowRoute', () => {
     }
   });
 
-  it('should render not found without redirecting when admin route does not exist', async () => {
+  it('should render 404 when route and FlowModel do not exist', async () => {
     const originalLocation = window.location;
     const replace = vi.fn();
     Object.defineProperty(window, 'location', {

package/src/flow/__tests__/PluginFlowEngine.test.ts

@@ -0,0 +1,58 @@
+/**
+ * This file is part of the NocoBase (R) project.
+ * Copyright (c) 2020-2024 NocoBase Co., Ltd.
+ * Authors: NocoBase Team.
+ *
+ * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License.
+ * For more information, please refer to: https://www.nocobase.com/agreement.
+ */
+
+import { createMockClient, PluginFlowEngine } from '@nocobase/client-v2';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+
+const { detectedDeviceType } = vi.hoisted(() => ({
+  detectedDeviceType: { value: 'mobile' },
+}));
+
+vi.mock('react-device-detect', () => ({
+  get deviceType() {
+    return detectedDeviceType.value;
+  },
+}));
+
+describe('PluginFlowEngine', () => {
+  beforeEach(() => {
+    detectedDeviceType.value = 'mobile';
+  });
+
+  it('should register the current device type before shared flow components', async () => {
+    const app = createMockClient({
+      router: {
+        type: 'memory',
+        initialEntries: ['/'],
+      },
+    });
+    const plugin = new PluginFlowEngine({}, app);
+    const addComponents = app.addComponents.bind(app);
+    const deviceTypesBeforeComponentRegistration: string[] = [];
+    vi.spyOn(app, 'addComponents').mockImplementation((components) => {
+      deviceTypesBeforeComponentRegistration.push(app.flowEngine.context.deviceType);
+      return addComponents(components);
+    });
+
+    await plugin.load();
+
+    expect(app.flowEngine.context.deviceType).toBe('mobile');
+    expect(deviceTypesBeforeComponentRegistration).toEqual(['mobile']);
+  });
+
+  it('should normalize the browser device type to computer', async () => {
+    detectedDeviceType.value = 'browser';
+    const app = createMockClient();
+    const plugin = new PluginFlowEngine({}, app);
+
+    await plugin.load();
+
+    expect(app.flowEngine.context.deviceType).toBe('computer');
+  });
+});