@nocobase/flow-engine 2.0.22 → 2.1.0-alpha.10

package/src/__tests__/flowSettings.test.ts

@@ -8,6 +8,10 @@
  */
 
 import { describe, test, expect, beforeEach, afterEach, vi } from 'vitest';
+import React from 'react';
+import { createForm } from '@formily/core';
+import { createSchemaField, FormProvider } from '@formily/react';
+import { render, screen } from '@testing-library/react';
 import { FlowSettings } from '../flowSettings';
 import { DefaultSettingsIcon } from '../components/settings/wrappers/contextual/DefaultSettingsIcon';
 import { FlowModel } from '../models';
@@ -142,10 +146,10 @@ describe('FlowSettings', () => {
       expect(settingsItem?.sort).toBe(0);
     });
 
-    test('should set up observable properties', () => {
+    test('should set up observable properties', async () => {
       // Test that enabled property is reactive
       const initialEnabled = flowSettings.enabled;
-      flowSettings.enable();
+      await flowSettings.enable();
       expect(flowSettings.enabled).not.toBe(initialEnabled);
       expect(flowSettings.enabled).toBe(true);
     });
@@ -186,6 +190,43 @@ describe('FlowSettings', () => {
       flowSettings.registerComponents({});
       expect(Object.keys(flowSettings.components)).toHaveLength(0);
     });
+
+    test('should register component loaders and load component on render', async () => {
+      const loader = vi.fn(async () => ({
+        default: () => React.createElement('div', null, 'Lazy Flow Settings Component'),
+      }));
+
+      flowSettings.registerComponentLoaders({
+        DemoFlowSettingsLazyField: loader,
+      });
+
+      expect(loader).not.toHaveBeenCalled();
+
+      const SchemaField = createSchemaField();
+      const form = createForm();
+
+      render(
+        React.createElement(
+          FormProvider,
+          { form },
+          React.createElement(SchemaField, {
+            schema: {
+              type: 'object',
+              properties: {
+                demo: {
+                  type: 'void',
+                  'x-component': 'DemoFlowSettingsLazyField',
+                },
+              },
+            },
+            components: flowSettings.components,
+          }),
+        ),
+      );
+
+      expect(await screen.findByText('Lazy Flow Settings Component')).toBeInTheDocument();
+      expect(loader).toHaveBeenCalledTimes(1);
+    });
   });
 
   describe('Scope Registration', () => {
@@ -228,30 +269,68 @@ describe('FlowSettings', () => {
   });
 
   describe('Enable/Disable Functionality', () => {
-    test('should enable flow settings', () => {
+    test('should enable flow settings', async () => {
       expect(flowSettings.enabled).toBe(false);
 
-      flowSettings.enable();
+      await flowSettings.enable();
 
       expect(flowSettings.enabled).toBe(true);
     });
 
-    test('should disable flow settings', () => {
-      flowSettings.enable();
+    test('should preload model loaders before enabling flow settings', async () => {
+      const preloadSpy = vi.spyOn(engine, 'preloadModelLoaders').mockResolvedValue({
+        requested: [],
+        loaded: [],
+        failed: [],
+      });
+
+      await flowSettings.enable();
+
+      expect(preloadSpy).toHaveBeenCalledTimes(1);
       expect(flowSettings.enabled).toBe(true);
+    });
 
-      flowSettings.disable();
+    test('should preload model loaders before force enabling flow settings', async () => {
+      const preloadSpy = vi.spyOn(engine, 'preloadModelLoaders').mockResolvedValue({
+        requested: [],
+        loaded: [],
+        failed: [],
+      });
+
+      await flowSettings.forceEnable();
+
+      expect(preloadSpy).toHaveBeenCalledTimes(1);
+      expect(flowSettings.enabled).toBe(true);
+    });
+
+    test('should disable flow settings', async () => {
+      await flowSettings.enable();
+      expect(flowSettings.enabled).toBe(true);
+
+      await flowSettings.disable();
 
       expect(flowSettings.enabled).toBe(false);
     });
 
-    test('should handle multiple enable/disable calls', () => {
-      flowSettings.enable();
-      flowSettings.enable();
+    test('should handle multiple enable/disable calls', async () => {
+      await flowSettings.enable();
+      await flowSettings.enable();
       expect(flowSettings.enabled).toBe(true);
 
-      flowSettings.disable();
-      flowSettings.disable();
+      await flowSettings.disable();
+      await flowSettings.disable();
+      expect(flowSettings.enabled).toBe(false);
+    });
+
+    test('forceDisable should clear force-enabled state and disable flow settings', async () => {
+      await flowSettings.forceEnable();
+      expect(flowSettings.enabled).toBe(true);
+
+      await flowSettings.forceDisable();
+
+      expect(flowSettings.enabled).toBe(false);
+
+      await flowSettings.disable();
       expect(flowSettings.enabled).toBe(false);
     });
   });
@@ -512,7 +591,7 @@ describe('FlowSettings', () => {
   });
 
   describe('Complex Integration Scenarios', () => {
-    test('should maintain state consistency during multiple operations', () => {
+    test('should maintain state consistency during multiple operations', async () => {
       // Initialize with components and scopes
       const TestComponent = () => 'TestComponent';
       const testScope = () => 'testScope';
@@ -528,7 +607,7 @@ describe('FlowSettings', () => {
       });
 
       // Enable/disable
-      flowSettings.enable();
+      await flowSettings.enable();
       expect(flowSettings.enabled).toBe(true);
 
       // Verify all state is maintained
@@ -536,7 +615,7 @@ describe('FlowSettings', () => {
       expect(flowSettings.scopes.testScope).toBe(testScope);
       expect(flowSettings.getToolbarItems().find((item) => item.key === 'integration-test')).toBeDefined();
 
-      flowSettings.disable();
+      await flowSettings.disable();
       expect(flowSettings.enabled).toBe(false);
 
       // State should still be maintained after disable

package/src/__tests__/renderHiddenInConfig.test.tsx

@@ -14,7 +14,7 @@ import { FlowEngine } from '../flowEngine';
 import { FlowModel, ModelRenderMode } from '../models/flowModel';
 
 describe('FlowModel.renderHiddenInConfig', () => {
-  it('renders via renderHiddenInConfig when hidden and config enabled (React element mode, mounted)', () => {
+  it('renders via renderHiddenInConfig when hidden and config enabled (React element mode, mounted)', async () => {
     class ElemModel extends FlowModel {
       render() {
         return <div data-testid="content">Content</div>;
@@ -28,14 +28,14 @@ describe('FlowModel.renderHiddenInConfig', () => {
     const model = new ElemModel({ uid: 'elem-1', flowEngine: engine });
 
     // runtime hidden => mounted result should be empty (no content/hidden)
-    engine.flowSettings.disable();
+    await engine.flowSettings.disable();
     model.setHidden(true);
     const { container, unmount, rerender } = render(model.render() as React.ReactElement);
     expect(screen.queryByTestId('content')).toBeNull();
     expect(screen.queryByTestId('hidden')).toBeNull();
 
     // config enabled + hidden => should show renderHiddenInConfig result
-    engine.flowSettings.enable();
+    await engine.flowSettings.enable();
     rerender(model.render() as React.ReactElement);
     expect(screen.getByTestId('hidden').textContent).toBe('HiddenViaAPI');
 
@@ -46,7 +46,7 @@ describe('FlowModel.renderHiddenInConfig', () => {
     unmount();
     cleanup();
   });
-  it('returns a render function when hidden and config enabled (RenderFunction mode)', () => {
+  it('returns a render function when hidden and config enabled (RenderFunction mode)', async () => {
     class FuncModel extends FlowModel {
       static override renderMode = ModelRenderMode.RenderFunction;
       render() {
@@ -63,13 +63,13 @@ describe('FlowModel.renderHiddenInConfig', () => {
     const model = engine.createModel({ use: 'FuncModel' }) as FuncModel;
 
     // runtime hidden => null
-    engine.flowSettings.disable();
+    await engine.flowSettings.disable();
     model.setHidden(true);
     const runtimeHidden = model.render();
     expect(runtimeHidden).toBeNull();
 
     // config enabled + hidden => renderHiddenInConfig (function)
-    engine.flowSettings.enable();
+    await engine.flowSettings.enable();
     const cfgHidden = model.render();
     expect(typeof cfgHidden).toBe('function');
     const cellNode = (cfgHidden as any)();

package/src/__tests__/viewScopedFlowEngine.test.ts

@@ -256,11 +256,11 @@ describe('ViewScopedFlowEngine', () => {
 
     // Both children should return null from hydration because parent has flowSettingsEnabled
     // This is the bug fix: previously only children with their own flowSettingsEnabled would return null
-    const result1 = (scoped as any).hydrateModelFromPreviousEngines({
+    const result1 = await (scoped as any).hydrateModelFromPreviousEngines({
       parentId: 'parent-with-settings',
       subKey: 'popup',
     });
-    const result2 = (scoped as any).hydrateModelFromPreviousEngines({
+    const result2 = await (scoped as any).hydrateModelFromPreviousEngines({
       parentId: 'parent-with-settings',
       subKey: 'items',
     });
@@ -298,7 +298,7 @@ describe('ViewScopedFlowEngine', () => {
     const scoped = createViewScopedEngine(root);
 
     // Call the private method hydrateModelFromPreviousEngines directly
-    const result = (scoped as any).hydrateModelFromPreviousEngines({
+    const result = await (scoped as any).hydrateModelFromPreviousEngines({
       parentId: 'parent-normal',
       subKey: 'content',
     });

package/src/components/MobilePopup.tsx

@@ -8,11 +8,13 @@
  */
 
 import { ConfigProvider } from 'antd';
-import { Popup } from 'antd-mobile';
 import React, { FC, ReactNode, useMemo } from 'react';
-import { CloseOutline } from 'antd-mobile-icons';
 import { useMobileActionDrawerStyle } from './MobilePopup.style';
 import { useTranslation } from 'react-i18next';
+import { lazy } from '../lazy-helper';
+
+const { Popup } = lazy(() => import('antd-mobile'), 'Popup');
+const { CloseOutline } = lazy(() => import('antd-mobile-icons'), 'CloseOutline');
 
 interface MobilePopupProps {
   title?: string;

package/src/components/__tests__/flow-model-render-error-fallback.test.tsx

@@ -114,7 +114,7 @@ describe('Delete problematic model via FlowSettings menu', () => {
     }
 
     const engine = new FlowEngine();
-    engine.flowSettings.forceEnable();
+    await engine.flowSettings.forceEnable();
     engine.registerModels({ BrokenModel });
     const model = engine.createModel({ use: 'BrokenModel', uid: 'broken-top-2' }) as BrokenModel;
     // satisfy FlowsFloatContextMenu styles
@@ -154,7 +154,7 @@ describe('Delete problematic model via FlowSettings menu', () => {
     }
 
     const engine = new FlowEngine();
-    engine.flowSettings.forceEnable();
+    await engine.flowSettings.forceEnable();
     engine.registerModels({ ParentModel, BrokenChild });
     const parent = engine.createModel({ use: 'ParentModel', uid: 'parent-3' }) as ParentModel;
     const child = engine.createModel({ use: 'BrokenChild', uid: 'child-3' }) as BrokenChild;
@@ -200,7 +200,7 @@ describe('Delete problematic model via FlowSettings menu', () => {
     }
 
     const engine = new FlowEngine();
-    engine.flowSettings.forceEnable();
+    await engine.flowSettings.forceEnable();
     engine.registerModels({ ParentModel, RenderFnChild });
     const parent = engine.createModel({ use: 'ParentModel', uid: 'parent-4' }) as ParentModel;
     const child = engine.createModel({ use: 'RenderFnChild', uid: 'cell-4' }) as RenderFnChild;

package/src/components/subModel/AddSubModelButton.tsx

@@ -610,7 +610,7 @@ const AddSubModelButtonCore = function AddSubModelButton({
     let addedModel: FlowModel | undefined;
 
     try {
-      addedModel = model.flowEngine.createModel({
+      addedModel = await model.flowEngine.createModelAsync({
         ..._.cloneDeep(createOpts),
         parentId: model.uid,
         subKey: subModelKey,

package/src/components/subModel/__tests__/AddSubModelButton.test.tsx

@@ -25,7 +25,7 @@ describe('AddSubModelButton - preset settings open on add', () => {
   test('calls openFlowSettings with preset=true for subModel with preset steps', async () => {
     // Arrange: set up engine and models
     const engine = new FlowEngine();
-    engine.flowSettings.forceEnable();
+    await engine.flowSettings.forceEnable();
 
     class ParentModel extends FlowModel {}
 
@@ -99,12 +99,70 @@ describe('AddSubModelButton - preset settings open on add', () => {
   });
 });
 
+describe('AddSubModelButton - model loader integration', () => {
+  test('resolves model loaders before creating sub models', async () => {
+    const engine = new FlowEngine();
+    await engine.flowSettings.forceEnable();
+
+    class ParentModel extends FlowModel {}
+    class ChildModel extends FlowModel {}
+
+    const childLoader = vi.fn(async () => ({ ChildModel }));
+
+    engine.registerModels({ ParentModel });
+    engine.registerModelLoaders({
+      ChildModel: {
+        loader: childLoader,
+      },
+    });
+
+    const parent = engine.createModel<ParentModel>({ use: 'ParentModel', uid: 'parent-loader' });
+
+    render(
+      <FlowEngineProvider engine={engine}>
+        <ConfigProvider>
+          <App>
+            <AddSubModelButton
+              model={parent}
+              subModelKey="items"
+              items={[
+                {
+                  key: 'child',
+                  label: 'Add Child',
+                  createModelOptions: { use: 'ChildModel' },
+                },
+              ]}
+            >
+              Add SubModel
+            </AddSubModelButton>
+          </App>
+        </ConfigProvider>
+      </FlowEngineProvider>,
+    );
+
+    await act(async () => {
+      await userEvent.click(screen.getByText('Add SubModel'));
+    });
+
+    await waitFor(() => expect(screen.getByText('Add Child')).toBeInTheDocument());
+
+    await act(async () => {
+      await userEvent.click(screen.getByText('Add Child'));
+    });
+
+    await waitFor(() => expect(childLoader).toHaveBeenCalledTimes(1));
+    const items = parent.subModels.items as FlowModel[];
+    expect(Array.isArray(items)).toBe(true);
+    expect(items[0]).toBeInstanceOf(ChildModel);
+  });
+});
+
 describe('AddSubModelButton - async group children (nested)', () => {
   const sleep = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms));
 
   it('renders group and nested async group leaf items', async () => {
     const engine = new FlowEngine();
-    engine.flowSettings.forceEnable();
+    await engine.flowSettings.forceEnable();
     class Parent extends FlowModel {}
     engine.registerModels({ Parent });
     const parent = engine.createModel<FlowModel>({ use: 'Parent', uid: 'p1' });
@@ -162,7 +220,7 @@ describe('AddSubModelButton - async group children (nested)', () => {
 describe('transformItems - searchable flags', () => {
   it('preserves searchable + placeholder on non-group submenu items', async () => {
     const engine = new FlowEngine();
-    engine.flowSettings.forceEnable();
+    await engine.flowSettings.forceEnable();
     class Parent extends FlowModel {}
     engine.registerModels({ Parent });
     const parent = engine.createModel<FlowModel>({ use: 'Parent' });
@@ -193,7 +251,7 @@ describe('transformItems - searchable flags', () => {
 describe('transformItems - hide', () => {
   it('filters items by hide flag/function recursively', async () => {
     const engine = new FlowEngine();
-    engine.flowSettings.forceEnable();
+    await engine.flowSettings.forceEnable();
     class Parent extends FlowModel {}
     engine.registerModels({ Parent });
     const parent = engine.createModel<FlowModel>({ use: 'Parent', uid: 'p-hide' });
@@ -239,7 +297,7 @@ describe('transformItems - hide', () => {
 
   it('removes group when all children are hidden (even with async hide)', async () => {
     const engine = new FlowEngine();
-    engine.flowSettings.forceEnable();
+    await engine.flowSettings.forceEnable();
     class Parent extends FlowModel {}
     engine.registerModels({ Parent });
     const parent = engine.createModel<FlowModel>({ use: 'Parent', uid: 'p-empty-group' });
@@ -272,7 +330,7 @@ describe('transformItems - hide', () => {
 
   it('supports async hide functions and disables cache', async () => {
     const engine = new FlowEngine();
-    engine.flowSettings.forceEnable();
+    await engine.flowSettings.forceEnable();
     class Parent extends FlowModel {}
     engine.registerModels({ Parent });
     const parent = engine.createModel<FlowModel>({ use: 'Parent', uid: 'p-async-hide' });
@@ -300,7 +358,7 @@ describe('transformItems - hide', () => {
 
   it('shows items when hide function throws (conservative fallback)', async () => {
     const engine = new FlowEngine();
-    engine.flowSettings.forceEnable();
+    await engine.flowSettings.forceEnable();
     class Parent extends FlowModel {}
     engine.registerModels({ Parent });
     const parent = engine.createModel<FlowModel>({ use: 'Parent', uid: 'p-hide-throws' });
@@ -331,15 +389,15 @@ describe('transformItems - toggleable items', () => {
   class ToggleParent extends FlowModel {}
   class ToggleChild extends FlowModel {}
 
-  const setupEngine = () => {
+  const setupEngine = async () => {
     const engine = new FlowEngine();
-    engine.flowSettings.forceEnable();
+    await engine.flowSettings.forceEnable();
     engine.registerModels({ ToggleParent, ToggleChild });
     return engine;
   };
 
   it('marks toggleable item as active when matching sub model exists', async () => {
-    const engine = setupEngine();
+    const engine = await setupEngine();
     const parent = engine.createModel<ToggleParent>({ use: 'ToggleParent', uid: 'toggle-parent-on' });
     const child = engine.createModel<ToggleChild>({ use: 'ToggleChild', uid: 'toggle-child-on' });
     parent.addSubModel('items', child);
@@ -371,7 +429,7 @@ describe('transformItems - toggleable items', () => {
   });
 
   it('infers useModel from createModelOptions when toggleable is enabled', async () => {
-    const engine = setupEngine();
+    const engine = await setupEngine();
     const parent = engine.createModel<ToggleParent>({ use: 'ToggleParent', uid: 'toggle-parent-infer' });
     const child = engine.createModel<ToggleChild>({ use: 'ToggleChild', uid: 'toggle-child-infer' });
     parent.addSubModel('items', child);
@@ -397,7 +455,7 @@ describe('transformItems - toggleable items', () => {
   });
 
   it('keeps toggleable item off when sub model missing', async () => {
-    const engine = setupEngine();
+    const engine = await setupEngine();
     const parent = engine.createModel<ToggleParent>({ use: 'ToggleParent', uid: 'toggle-parent-off' });
 
     const definition: SubModelItem[] = [
@@ -420,7 +478,7 @@ describe('transformItems - toggleable items', () => {
   });
 
   it('respects keepDropdownOpen override on toggleable items', async () => {
-    const engine = setupEngine();
+    const engine = await setupEngine();
     const parent = engine.createModel<ToggleParent>({ use: 'ToggleParent', uid: 'toggle-parent-keep' });
 
     const definition: SubModelItem[] = [
@@ -443,7 +501,7 @@ describe('transformItems - toggleable items', () => {
 
   it('removes object sub model via default remove handler when toggleDetector provided', async () => {
     const engine = new FlowEngine();
-    engine.flowSettings.forceEnable();
+    await engine.flowSettings.forceEnable();
 
     class ObjectParent extends FlowModel {}
     class ObjectChild extends FlowModel {}
@@ -481,6 +539,8 @@ describe('transformItems - toggleable items', () => {
       </FlowEngineProvider>,
     );
 
+    await waitFor(() => expect(screen.getByText('Toggle Menu')).toBeInTheDocument());
+
     await act(async () => {
       await userEvent.click(screen.getByText('Toggle Menu'));
     });
@@ -519,16 +579,16 @@ describe('transformItems - caching behaviour', () => {
   class CacheParent extends FlowModel {}
   class CacheChild extends FlowModel {}
 
-  const setupEngine = () => {
+  const setupEngine = async () => {
     const engine = new FlowEngine();
-    engine.flowSettings.forceEnable();
+    await engine.flowSettings.forceEnable();
     engine.registerModels({ CacheParent, CacheChild });
     const parent = engine.createModel<CacheParent>({ use: 'CacheParent', uid: 'cache-parent' });
     return { engine, parent };
   };
 
   it('reuses cached result when no toggleable items exist', async () => {
-    const { parent } = setupEngine();
+    const { parent } = await setupEngine();
     const definition: SubModelItem[] = [{ key: 'basic', label: 'Basic', createModelOptions: { use: 'CacheChild' } }];
 
     const factory = transformItems(definition, parent, 'items', 'array');
@@ -541,7 +601,7 @@ describe('transformItems - caching behaviour', () => {
   });
 
   it('refreshes toggle state after new sub model is added', async () => {
-    const { parent, engine } = setupEngine();
+    const { parent, engine } = await setupEngine();
     const createDefinition = (): SubModelItem[] => [
       {
         key: 'toggleable',
@@ -570,7 +630,7 @@ describe('transformItems - caching behaviour', () => {
 describe('AddSubModelButton - refreshTargets linkage', () => {
   it('clicking an item with refreshTargets triggers toggle recomputation on target branch', async () => {
     const engine = new FlowEngine();
-    engine.flowSettings.forceEnable();
+    await engine.flowSettings.forceEnable();
 
     class Parent extends FlowModel {}
     class ToggleModel extends FlowModel {}
@@ -642,7 +702,7 @@ describe('AddSubModelButton - base class menu groups', () => {
 
   it('renders async children provided by subModelBaseClasses', async () => {
     const engine = new FlowEngine();
-    engine.flowSettings.forceEnable();
+    await engine.flowSettings.forceEnable();
 
     class Parent extends FlowModel {}
     class AsyncLeaf extends FlowModel {}
@@ -687,7 +747,7 @@ describe('AddSubModelButton - base class menu groups', () => {
 
   it('skips base class groups whose children resolve to empty', async () => {
     const engine = new FlowEngine();
-    engine.flowSettings.forceEnable();
+    await engine.flowSettings.forceEnable();
 
     class Parent extends FlowModel {}
     class EmptyLeaf extends FlowModel {}
@@ -739,7 +799,7 @@ describe('AddSubModelButton - base class menu groups', () => {
 
   it('renders submenu base class with children and respects meta.sort', async () => {
     const engine = new FlowEngine();
-    engine.flowSettings.forceEnable();
+    await engine.flowSettings.forceEnable();
 
     class Parent extends FlowModel {}
     class Leaf extends FlowModel {}
@@ -803,7 +863,7 @@ describe('AddSubModelButton - base class menu groups', () => {
 
   it('merges explicit items with base class and grouped sources', async () => {
     const engine = new FlowEngine();
-    engine.flowSettings.forceEnable();
+    await engine.flowSettings.forceEnable();
 
     class Parent extends FlowModel {}
     class BaseChild extends FlowModel {}
@@ -862,7 +922,7 @@ describe('AddSubModelButton - base class menu groups', () => {
 describe('AddSubModelButton - toggle interactions', () => {
   it('removes existing toggleable sub model and triggers callbacks', async () => {
     const engine = new FlowEngine();
-    engine.flowSettings.forceEnable();
+    await engine.flowSettings.forceEnable();
 
     class ToggleParent extends FlowModel {}
     const destroySpy = vi.fn();
@@ -926,7 +986,7 @@ describe('AddSubModelButton - toggle interactions', () => {
 
   it('creates toggleable sub model and runs lifecycle callbacks', async () => {
     const engine = new FlowEngine();
-    engine.flowSettings.forceEnable();
+    await engine.flowSettings.forceEnable();
 
     class ToggleParent extends FlowModel {}
     const saveSpy = vi.fn();
@@ -998,7 +1058,7 @@ describe('AddSubModelButton - toggle interactions', () => {
 
   it('updates toggle state after external sub model removal', async () => {
     const engine = new FlowEngine();
-    engine.flowSettings.forceEnable();
+    await engine.flowSettings.forceEnable();
 
     class ToggleParent extends FlowModel {}
     class ToggleChild extends FlowModel {}
@@ -1063,9 +1123,9 @@ describe('AddSubModelButton toggleable behavior', () => {
     duplicate = vi.fn().mockResolvedValue(null);
   }
 
-  function setup() {
+  async function setup() {
     const engine = new FlowEngine();
-    engine.flowSettings.forceEnable();
+    await engine.flowSettings.forceEnable();
     engine.registerModels({ ToggleModel });
     engine.setModelRepository(new FakeRepo());
 
@@ -1118,7 +1178,7 @@ describe('AddSubModelButton toggleable behavior', () => {
   });
 
   test('keeps dropdown open and preserves loaded children on toggle add/remove', async () => {
-    const { engine, ui } = setup();
+    const { engine, ui } = await setup();
     const user = userEvent.setup();
 
     render(ui);
@@ -1163,7 +1223,7 @@ describe('AddSubModelButton toggleable behavior', () => {
   });
 
   test('toggle state updates without menu closing', async () => {
-    const { ui } = setup();
+    const { ui } = await setup();
     const user = userEvent.setup();
 
     render(ui);
@@ -1181,7 +1241,7 @@ describe('AddSubModelButton toggleable behavior', () => {
 
   test('nested submenu (static items) toggle keeps menu open and reflects state', async () => {
     const engine = new FlowEngine();
-    engine.flowSettings.forceEnable();
+    await engine.flowSettings.forceEnable();
     engine.registerModels({ ToggleModel });
     const parent = engine.createModel<FlowModel>({ use: FlowModel });
 
@@ -1263,7 +1323,7 @@ describe('AddSubModelButton toggleable behavior', () => {
 
   test('submenu (second-level) toggleable stays open and updates state', async () => {
     const engine = new FlowEngine();
-    engine.flowSettings.forceEnable();
+    await engine.flowSettings.forceEnable();
     engine.registerModels({ ToggleModel });
     engine.setModelRepository(new FakeRepo());
     vi.spyOn(engine.flowSettings, 'open').mockResolvedValue(false as any);
@@ -1322,7 +1382,7 @@ describe('AddSubModelButton toggleable behavior', () => {
 
   test('top-level toggle updates after opening a second-level branch', async () => {
     const engine = new FlowEngine();
-    engine.flowSettings.forceEnable();
+    await engine.flowSettings.forceEnable();
     engine.registerModels({ ToggleModel });
     engine.setModelRepository(new FakeRepo());
     vi.spyOn(engine.flowSettings, 'open').mockResolvedValue(false as any);

package/src/components/subModel/utils.ts

@@ -7,7 +7,7 @@
  * For more information, please refer to: https://www.nocobase.com/agreement.
  */
 
-import * as _ from 'lodash';
+import _ from 'lodash';
 import type { Collection } from '../../data-source';
 import { FlowModelContext } from '../../flowContext';
 import { FlowModelMeta, ModelConstructor } from '../../types';