@nocobase/flow-engine 2.1.0-alpha.3 → 2.1.0-alpha.30

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();
@@ -995,6 +1055,56 @@ describe('AddSubModelButton - toggle interactions', () => {
     const subModels = ((parent.subModels as any).items as FlowModel[]) || [];
     expect(subModels).toHaveLength(1);
   });
+
+  it('updates toggle state after external sub model removal', async () => {
+    const engine = new FlowEngine();
+    await engine.flowSettings.forceEnable();
+
+    class ToggleParent extends FlowModel {}
+    class ToggleChild extends FlowModel {}
+
+    engine.registerModels({ ToggleParent, ToggleChild });
+    const parent = engine.createModel<ToggleParent>({ use: 'ToggleParent', uid: 'toggle-parent-external-remove' });
+    const existing = engine.createModel<ToggleChild>({ use: 'ToggleChild', uid: 'toggle-child-external-remove' });
+    parent.addSubModel('items', existing);
+
+    render(
+      <FlowEngineProvider engine={engine}>
+        <ConfigProvider>
+          <App>
+            <AddSubModelButton
+              model={parent}
+              subModelKey="items"
+              items={[
+                {
+                  key: 'toggle-child',
+                  label: 'Toggle Child',
+                  toggleable: true,
+                  useModel: 'ToggleChild',
+                  createModelOptions: { use: 'ToggleChild' },
+                },
+              ]}
+            >
+              Toggle Menu
+            </AddSubModelButton>
+          </App>
+        </ConfigProvider>
+      </FlowEngineProvider>,
+    );
+
+    await act(async () => {
+      await userEvent.click(screen.getByText('Toggle Menu'));
+    });
+
+    await waitFor(() => expect(screen.getByText('Toggle Child')).toBeInTheDocument());
+    await waitFor(() => expect(screen.getByRole('switch')).toHaveAttribute('aria-checked', 'true'));
+
+    await act(async () => {
+      await existing.destroy();
+    });
+
+    await waitFor(() => expect(screen.getByRole('switch')).toHaveAttribute('aria-checked', 'false'));
+  });
 });
 
 // ========================
@@ -1013,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());
 
@@ -1068,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);
@@ -1113,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);
@@ -1131,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 });
 
@@ -1213,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);
@@ -1272,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/index.ts

@@ -8,5 +8,6 @@
  */
 
 export * from './AddSubModelButton';
+export { default as LazyDropdown } from './LazyDropdown';
 export * from './utils';
 //

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';

package/src/data-source/__tests__/index.test.ts

@@ -7,7 +7,7 @@
  * For more information, please refer to: https://www.nocobase.com/agreement.
  */
 
-import { describe, expect, it } from 'vitest';
+import { describe, expect, it, vi } from 'vitest';
 import { DataSource, DataSourceManager } from '../index';
 import { FlowEngine } from '../../flowEngine';
 
@@ -79,4 +79,37 @@ describe('DataSource & Collection APIs', () => {
       ]),
     ).toThrow(/circular/);
   });
+
+  it('ensureLoaded, reload and data source events work for main loader', async () => {
+    const { m, engine } = makeManager();
+    const loadedListener = vi.fn();
+    const failedListener = vi.fn();
+    engine.context.app = { eventBus: new EventTarget() } as any;
+    engine.context.app.eventBus.addEventListener('dataSource:loaded', loadedListener);
+    engine.context.app.eventBus.addEventListener('dataSource:loadFailed', failedListener);
+
+    const loader = vi
+      .fn()
+      .mockResolvedValueOnce({
+        collections: [{ name: 'posts', fields: [{ name: 'title', type: 'string', interface: 'input' }] }],
+      })
+      .mockResolvedValueOnce({
+        collections: [{ name: 'users', fields: [{ name: 'nickname', type: 'string', interface: 'input' }] }],
+      });
+
+    m.registerLoader('main', loader);
+
+    await m.ensureLoaded();
+    expect(loader).toHaveBeenCalledTimes(1);
+    expect(m.getDataSource('main')?.status).toBe('loaded');
+    expect(m.getCollection('main', 'posts')?.name).toBe('posts');
+    expect(loadedListener).toHaveBeenCalledTimes(1);
+
+    await m.reloadDataSource('main');
+    expect(loader).toHaveBeenCalledTimes(2);
+    expect(m.getCollection('main', 'posts')).toBeUndefined();
+    expect(m.getCollection('main', 'users')?.name).toBe('users');
+    expect(m.getDataSource('main')?.reload).toBeTypeOf('function');
+    expect(failedListener).not.toHaveBeenCalled();
+  });
 });