@nocobase/client-v2 2.1.0-beta.22 → 2.1.0-beta.23

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

@@ -0,0 +1,474 @@
+/**
+ * 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 React from 'react';
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { MemoryRouter, Route, Routes } from 'react-router-dom';
+import { render, waitFor } from '@testing-library/react';
+import { FlowEngine, FlowEngineProvider, type FlowModel } from '@nocobase/flow-engine';
+import FlowRoute from '../components/FlowRoute';
+
+type MockAdminLayoutModel = FlowModel & {
+  registerRoutePage: ReturnType<typeof vi.fn>;
+  updateRoutePage: ReturnType<typeof vi.fn>;
+  unregisterRoutePage: ReturnType<typeof vi.fn>;
+};
+
+const { hookState } = vi.hoisted(() => {
+  return {
+    hookState: {
+      refresh: vi.fn(),
+    },
+  };
+});
+
+describe('FlowRoute', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    hookState.refresh = vi.fn();
+  });
+
+  it('should bridge page lifecycle to admin-layout-model', async () => {
+    const engine = new FlowEngine();
+    const routeRepository = {
+      refreshAccessible: hookState.refresh,
+      isAccessibleLoaded: () => true,
+      ensureAccessibleLoaded: vi.fn().mockResolvedValue([]),
+      getRouteBySchemaUid: vi.fn(() => ({ type: 'flowPage', schemaUid: 'test-page' })),
+    };
+    engine.context.defineProperty('route', {
+      value: {
+        params: { name: 'test-page' },
+        pathname: '/admin/test-page',
+      },
+    });
+    engine.context.defineProperty('routeRepository', {
+      value: routeRepository,
+    });
+    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(),
+      },
+    );
+
+    const { rerender, unmount } = render(
+      <FlowEngineProvider engine={engine}>
+        <MemoryRouter initialEntries={['/flow/test-page']}>
+          <Routes>
+            <Route path="/flow/:name" element={<FlowRoute />} />
+          </Routes>
+        </MemoryRouter>
+      </FlowEngineProvider>,
+    );
+
+    await waitFor(() => {
+      expect(adminLayoutModel.registerRoutePage).toHaveBeenCalledWith(
+        'test-page',
+        expect.objectContaining({
+          active: false,
+          refreshDesktopRoutes: expect.any(Function),
+          layoutContentElement: expect.any(HTMLDivElement),
+        }),
+      );
+    });
+
+    await adminLayoutModel.registerRoutePage.mock.calls[0][1].refreshDesktopRoutes();
+    expect(hookState.refresh).toHaveBeenCalledTimes(1);
+
+    await waitFor(() => {
+      expect(adminLayoutModel.updateRoutePage).toHaveBeenCalledWith(
+        'test-page',
+        expect.objectContaining({
+          refreshDesktopRoutes: expect.any(Function),
+          layoutContentElement: expect.any(HTMLDivElement),
+        }),
+      );
+    });
+
+    rerender(
+      <FlowEngineProvider engine={engine}>
+        <MemoryRouter initialEntries={['/flow/test-page']}>
+          <Routes>
+            <Route path="/flow/:name" element={<FlowRoute />} />
+          </Routes>
+        </MemoryRouter>
+      </FlowEngineProvider>,
+    );
+
+    unmount();
+    expect(adminLayoutModel.unregisterRoutePage).toHaveBeenCalledWith('test-page');
+  });
+
+  it('should fail fast when admin-layout-model is missing', () => {
+    const engine = new FlowEngine();
+    engine.context.defineProperty('route', {
+      value: {
+        params: { name: 'test-page' },
+        pathname: '/admin/test-page',
+      },
+    });
+    engine.context.defineProperty('routeRepository', {
+      value: {
+        refreshAccessible: hookState.refresh,
+        isAccessibleLoaded: () => true,
+        ensureAccessibleLoaded: vi.fn().mockResolvedValue([]),
+        getRouteBySchemaUid: vi.fn(() => ({ type: 'flowPage', schemaUid: 'test-page' })),
+      },
+    });
+    engine.context.defineProperty('app', {
+      value: {
+        getPublicPath: () => '/v2/',
+        router: {
+          getBasename: () => '/v2',
+        },
+      },
+    });
+    const consoleErrorSpy = vi.spyOn(console, 'error').mockImplementation(() => {});
+
+    try {
+      expect(() => {
+        render(
+          <FlowEngineProvider engine={engine}>
+            <MemoryRouter initialEntries={['/flow/test-page']}>
+              <Routes>
+                <Route path="/flow/:name" element={<FlowRoute />} />
+              </Routes>
+            </MemoryRouter>
+          </FlowEngineProvider>,
+        );
+      }).toThrowError(/admin-layout-model/);
+    } finally {
+      consoleErrorSpy.mockRestore();
+    }
+  });
+
+  it('should wait accessible routes before bridging page lifecycle', async () => {
+    const engine = new FlowEngine();
+    let resolveAccessible!: () => void;
+    const ensureAccessibleLoaded = vi.fn(
+      () =>
+        new Promise<void>((resolve) => {
+          resolveAccessible = resolve;
+        }),
+    );
+    const routeRepository = {
+      refreshAccessible: hookState.refresh,
+      isAccessibleLoaded: () => false,
+      ensureAccessibleLoaded,
+      getRouteBySchemaUid: vi.fn(() => ({ type: 'flowPage', schemaUid: 'test-page' })),
+    };
+    engine.context.defineProperty('routeRepository', {
+      value: routeRepository,
+    });
+    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/test-page']}>
+          <Routes>
+            <Route path="/flow/:name" element={<FlowRoute />} />
+          </Routes>
+        </MemoryRouter>
+      </FlowEngineProvider>,
+    );
+
+    expect(ensureAccessibleLoaded).toHaveBeenCalledTimes(1);
+    expect(adminLayoutModel.registerRoutePage).not.toHaveBeenCalled();
+
+    resolveAccessible();
+
+    await waitFor(() => {
+      expect(adminLayoutModel.registerRoutePage).toHaveBeenCalled();
+    });
+  });
+
+  it('should replace to legacy page when current route is page', 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',
+        search: '?from=direct',
+        hash: '#dialog',
+        replace,
+      },
+    });
+
+    try {
+      const engine = new FlowEngine();
+      engine.context.defineProperty('routeRepository', {
+        value: {
+          refreshAccessible: hookState.refresh,
+          isAccessibleLoaded: () => true,
+          ensureAccessibleLoaded: vi.fn().mockResolvedValue([]),
+          getRouteBySchemaUid: vi.fn(() => ({ type: 'page', schemaUid: 'test-page' })),
+        },
+      });
+      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/test-page']}>
+            <Routes>
+              <Route path="/flow/:name" element={<FlowRoute />} />
+            </Routes>
+          </MemoryRouter>
+        </FlowEngineProvider>,
+      );
+
+      await waitFor(() => {
+        expect(replace).toHaveBeenCalledWith('/admin/test-page/tabs/tab-1?from=direct#dialog');
+      });
+      expect(adminLayoutModel.registerRoutePage).not.toHaveBeenCalled();
+      expect(adminLayoutModel.updateRoutePage).not.toHaveBeenCalled();
+    } finally {
+      Object.defineProperty(window, 'location', {
+        configurable: true,
+        value: originalLocation,
+      });
+    }
+  });
+
+  it('should not redirect when route does not exist', async () => {
+    const originalLocation = window.location;
+    const replace = vi.fn();
+    Object.defineProperty(window, 'location', {
+      configurable: true,
+      value: {
+        ...originalLocation,
+        replace,
+      },
+    });
+
+    try {
+      const engine = new FlowEngine();
+      engine.context.defineProperty('routeRepository', {
+        value: {
+          refreshAccessible: hookState.refresh,
+          isAccessibleLoaded: () => true,
+          ensureAccessibleLoaded: vi.fn().mockResolvedValue([]),
+          getRouteBySchemaUid: vi.fn(() => undefined),
+        },
+      });
+      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/test-page']}>
+            <Routes>
+              <Route path="/flow/:name" element={<FlowRoute />} />
+            </Routes>
+          </MemoryRouter>
+        </FlowEngineProvider>,
+      );
+
+      await waitFor(() => {
+        expect(adminLayoutModel.registerRoutePage).toHaveBeenCalled();
+      });
+      expect(replace).not.toHaveBeenCalled();
+    } finally {
+      Object.defineProperty(window, 'location', {
+        configurable: true,
+        value: originalLocation,
+      });
+    }
+  });
+
+  it('should keep sub app page inside spa when basename does not include /v2/', async () => {
+    const originalLocation = window.location;
+    const replace = vi.fn();
+    Object.defineProperty(window, 'location', {
+      configurable: true,
+      value: {
+        ...originalLocation,
+        pathname: '/apps/demo/admin/test-page',
+        search: '?from=sub-app',
+        hash: '#panel',
+        replace,
+      },
+    });
+
+    try {
+      const engine = new FlowEngine();
+      engine.context.defineProperty('routeRepository', {
+        value: {
+          refreshAccessible: hookState.refresh,
+          isAccessibleLoaded: () => true,
+          ensureAccessibleLoaded: vi.fn().mockResolvedValue([]),
+          getRouteBySchemaUid: vi.fn(() => ({ type: 'page', schemaUid: 'test-page' })),
+        },
+      });
+      engine.context.defineProperty('app', {
+        value: {
+          getPublicPath: () => '/apps/demo/',
+          router: {
+            getBasename: () => '/apps/demo',
+          },
+        },
+      });
+
+      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/test-page']}>
+            <Routes>
+              <Route path="/flow/:name" element={<FlowRoute />} />
+            </Routes>
+          </MemoryRouter>
+        </FlowEngineProvider>,
+      );
+
+      await waitFor(() => {
+        expect(adminLayoutModel.registerRoutePage).toHaveBeenCalled();
+      });
+      expect(replace).not.toHaveBeenCalled();
+    } finally {
+      Object.defineProperty(window, 'location', {
+        configurable: true,
+        value: originalLocation,
+      });
+    }
+  });
+
+  it('should not redirect or loop when ensureAccessibleLoaded rejects', async () => {
+    const originalLocation = window.location;
+    const replace = vi.fn();
+    Object.defineProperty(window, 'location', {
+      configurable: true,
+      value: {
+        ...originalLocation,
+        replace,
+      },
+    });
+
+    try {
+      const engine = new FlowEngine();
+      const ensureAccessibleLoaded = vi.fn().mockRejectedValue(new Error('load failed'));
+      engine.context.defineProperty('routeRepository', {
+        value: {
+          refreshAccessible: hookState.refresh,
+          isAccessibleLoaded: () => false,
+          ensureAccessibleLoaded,
+          getRouteBySchemaUid: vi.fn(),
+        },
+      });
+      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/test-page']}>
+            <Routes>
+              <Route path="/flow/:name" element={<FlowRoute />} />
+            </Routes>
+          </MemoryRouter>
+        </FlowEngineProvider>,
+      );
+
+      await waitFor(() => {
+        expect(adminLayoutModel.registerRoutePage).toHaveBeenCalled();
+      });
+      expect(ensureAccessibleLoaded).toHaveBeenCalledTimes(1);
+      expect(replace).not.toHaveBeenCalled();
+    } finally {
+      Object.defineProperty(window, 'location', {
+        configurable: true,
+        value: originalLocation,
+      });
+    }
+  });
+});

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

@@ -0,0 +1,61 @@
+/**
+ * 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 { describe, expect, it } from 'vitest';
+import { ViewItem } from '../resolveViewParamsToViewList';
+import { observable } from '@nocobase/flow-engine';
+import { getKey } from '../getViewDiffAndUpdateHidden';
+
+const createViewItem = (params: any, index = 0): ViewItem => {
+  return {
+    params,
+    index,
+    hidden: observable.ref(false),
+  } as any;
+};
+
+describe('getKey', () => {
+  it('is stable for objects regardless of key order', () => {
+    const a = createViewItem({ viewUid: 'v', sourceId: { b: 2, a: 1 } }, 0);
+    const b = createViewItem({ viewUid: 'v', sourceId: { a: 1, b: 2 } }, 0);
+
+    expect(getKey(a)).toBe(getKey(b));
+  });
+
+  it('distinguishes different indices', () => {
+    const a = createViewItem({ viewUid: 'v', sourceId: 's' }, 0);
+    const b = createViewItem({ viewUid: 'v', sourceId: 's' }, 1);
+
+    expect(getKey(a)).not.toBe(getKey(b));
+  });
+
+  it('handles arrays and nested objects consistently', () => {
+    const params1 = { viewUid: 'v', filterByTk: { a: [2, 1], b: { y: 2, x: 1 } } };
+    const params2 = { viewUid: 'v', filterByTk: { b: { x: 1, y: 2 }, a: [2, 1] } };
+
+    const a = createViewItem(params1, 2);
+    const b = createViewItem(params2, 2);
+
+    expect(getKey(a)).toBe(getKey(b));
+  });
+
+  it('treats null and undefined as empty string for parts', () => {
+    const a = createViewItem({ viewUid: null, sourceId: undefined, filterByTk: undefined }, 0);
+    const b = createViewItem({}, 0);
+
+    expect(getKey(a)).toBe(getKey(b));
+  });
+
+  it('produces different keys for different primitive values', () => {
+    const a = createViewItem({ viewUid: 'v1', sourceId: 's' }, 0);
+    const b = createViewItem({ viewUid: 'v2', sourceId: 's' }, 0);
+
+    expect(getKey(a)).not.toBe(getKey(b));
+  });
+});

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

@@ -0,0 +1,180 @@
+/**
+ * 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 { FlowModel, observable } from '@nocobase/flow-engine';
+import { describe, expect, it, vi } from 'vitest';
+import { ViewItem } from '../resolveViewParamsToViewList';
+import { getViewDiffAndUpdateHidden } from '../getViewDiffAndUpdateHidden';
+
+// Mock FlowModel for testing
+const createMockModel = (uid: string): FlowModel => {
+  return {
+    uid,
+    dispatchEvent: vi.fn(),
+  } as any;
+};
+
+describe('getViewDiff', () => {
+  it('should return empty arrays when both lists are empty', () => {
+    const result = getViewDiffAndUpdateHidden([], []);
+    expect(result.viewsToClose).toEqual([]);
+    expect(result.viewsToOpen).toEqual([]);
+  });
+
+  it('should return all views as viewsToOpen when prevViewList is empty', () => {
+    const currentViewList: ViewItem[] = [
+      {
+        params: { viewUid: 'view1' },
+        model: createMockModel('view1'),
+        hidden: observable.ref(false),
+        index: 0,
+      },
+      {
+        params: { viewUid: 'view2' },
+        model: createMockModel('view2'),
+        hidden: observable.ref(false),
+        index: 1,
+      },
+    ];
+
+    const result = getViewDiffAndUpdateHidden([], currentViewList);
+    expect(result.viewsToClose).toEqual([]);
+    expect(result.viewsToOpen).toEqual(currentViewList);
+  });
+
+  it('should return all views as viewsToClose when currentViewList is empty', () => {
+    const prevViewList: ViewItem[] = [
+      {
+        params: { viewUid: 'view1' },
+        model: createMockModel('view1'),
+        hidden: observable.ref(false),
+        index: 0,
+      },
+      {
+        params: { viewUid: 'view2' },
+        model: createMockModel('view2'),
+        hidden: observable.ref(false),
+        index: 1,
+      },
+    ];
+
+    const result = getViewDiffAndUpdateHidden(prevViewList, []);
+    expect(result.viewsToClose).toEqual(prevViewList);
+    expect(result.viewsToOpen).toEqual([]);
+  });
+
+  it('should return empty arrays when both lists have same views', () => {
+    const view1: ViewItem = {
+      params: { viewUid: 'view1' },
+      model: createMockModel('view1'),
+      hidden: observable.ref(false),
+      index: 0,
+    };
+    const view2: ViewItem = {
+      params: { viewUid: 'view2' },
+      model: createMockModel('view2'),
+      hidden: observable.ref(false),
+      index: 1,
+    };
+
+    const prevViewList = [view1, view2];
+    const currentViewList = [
+      {
+        params: { viewUid: 'view1' },
+        model: createMockModel('view1'),
+        hidden: observable.ref(false),
+        index: 0,
+      },
+      {
+        params: { viewUid: 'view2' },
+        model: createMockModel('view2'),
+        hidden: observable.ref(false),
+        index: 1,
+      },
+    ];
+
+    const result = getViewDiffAndUpdateHidden(prevViewList, currentViewList);
+    expect(result.viewsToClose).toEqual([]);
+    expect(result.viewsToOpen).toEqual([]);
+  });
+
+  it('should correctly identify views to close and open', () => {
+    const view1: ViewItem = {
+      params: { viewUid: 'view1' },
+      model: createMockModel('view1'),
+      hidden: observable.ref(false),
+      index: 0,
+    };
+    const view2: ViewItem = {
+      params: { viewUid: 'view2' },
+      model: createMockModel('view2'),
+      hidden: observable.ref(false),
+      index: 1,
+    };
+    const view3: ViewItem = {
+      params: { viewUid: 'view3' },
+      model: createMockModel('view3'),
+      hidden: observable.ref(false),
+      index: 2,
+    };
+    const view4: ViewItem = {
+      params: { viewUid: 'view4' },
+      model: createMockModel('view4'),
+      hidden: observable.ref(false),
+      index: 3,
+    };
+
+    const prevViewList = [view1, view2]; // view1, view2 were open
+    const currentViewList = [view2, view3, view4]; // view2, view3, view4 should be open
+
+    const result = getViewDiffAndUpdateHidden(prevViewList, currentViewList);
+
+    // view1 should be closed (was in prev but not in current)
+    expect(result.viewsToClose).toHaveLength(1);
+    expect(result.viewsToClose[0].params.viewUid).toBe('view1');
+
+    // view3 and view4 should be opened (are in current but not in prev)
+    expect(result.viewsToOpen).toHaveLength(2);
+    expect(result.viewsToOpen.map((v) => v.params.viewUid)).toContain('view3');
+    expect(result.viewsToOpen.map((v) => v.params.viewUid)).toContain('view4');
+  });
+
+  it('should handle complex view parameters correctly', () => {
+    const view1: ViewItem = {
+      params: {
+        viewUid: 'view1',
+        tabUid: 'tab1',
+        filterByTk: 'filter1',
+        sourceId: 'source1',
+      },
+      model: createMockModel('view1'),
+      hidden: observable.ref(false),
+      index: 0,
+    };
+    const view2: ViewItem = {
+      params: {
+        viewUid: 'view1', // same viewUid but different params
+        tabUid: 'tab2',
+        filterByTk: 'filter2',
+      },
+      model: createMockModel('view1'),
+      hidden: observable.ref(false),
+      index: 1,
+    };
+
+    const prevViewList = [view1];
+    const currentViewList = [view2];
+
+    const result = getViewDiffAndUpdateHidden(prevViewList, currentViewList);
+
+    // Since viewUid is the same, no views should be closed or opened
+    expect(result.viewsToClose).toEqual([view1]);
+    expect(result.viewsToOpen).toEqual([view2]);
+  });
+});