@nocobase/flow-engine 2.1.0-alpha.1 → 2.1.0-alpha.11

package/src/components/settings/wrappers/contextual/__tests__/DefaultSettingsIcon.test.tsx

@@ -18,6 +18,7 @@ import { DefaultSettingsIcon } from '../DefaultSettingsIcon';
 
 // ---- Mock antd to capture Dropdown menu props ----
 const dropdownMenus: any[] = [];
+const mockColorTextTertiary = '#8c8c8c';
 vi.mock('antd', async (importOriginal) => {
   const messageApi = {
     success: vi.fn(),
@@ -35,6 +36,7 @@ vi.mock('antd', async (importOriginal) => {
   const Dropdown = (props: any) => {
     (globalThis as any).__lastDropdownMenu = props.menu;
     (globalThis as any).__lastDropdownOnOpenChange = props.onOpenChange;
+    (globalThis as any).__lastDropdownOpen = props.open;
     dropdownMenus.push(props.menu);
     return React.createElement('span', { 'data-testid': 'dropdown' }, props.children);
   };
@@ -71,6 +73,7 @@ vi.mock('antd', async (importOriginal) => {
   const Alert = (props: any) => React.createElement('div', { role: 'alert' }, props.message ?? 'Alert');
   const Button = (props: any) => React.createElement('button', props, props.children ?? 'Button');
   const Result = (props: any) => React.createElement('div', null, props.children ?? 'Result');
+  const Tooltip = ({ children }: any) => React.createElement('span', null, children);
 
   // Keep other components from original mock/default
   return {
@@ -89,15 +92,46 @@ vi.mock('antd', async (importOriginal) => {
     Alert,
     Button,
     Result,
-    theme: { useToken: () => ({}) },
+    Tooltip,
+    theme: { useToken: () => ({ token: { colorTextTertiary: mockColorTextTertiary } }) },
   };
 });
 
+const findElement = (node: any, predicate: (element: React.ReactElement) => boolean): React.ReactElement | null => {
+  if (!node) return null;
+
+  if (React.isValidElement(node)) {
+    if (predicate(node)) {
+      return node;
+    }
+
+    const children = React.Children.toArray(node.props?.children);
+    for (const child of children) {
+      const matched = findElement(child, predicate);
+      if (matched) {
+        return matched;
+      }
+    }
+  }
+
+  if (Array.isArray(node)) {
+    for (const child of node) {
+      const matched = findElement(child, predicate);
+      if (matched) {
+        return matched;
+      }
+    }
+  }
+
+  return null;
+};
+
 describe('DefaultSettingsIcon - only static flows are shown', () => {
   beforeEach(() => {
     dropdownMenus.length = 0;
     (globalThis as any).__lastDropdownMenu = undefined;
     (globalThis as any).__lastDropdownOnOpenChange = undefined;
+    (globalThis as any).__lastDropdownOpen = undefined;
   });
 
   afterEach(() => {
@@ -239,6 +273,67 @@ describe('DefaultSettingsIcon - only static flows are shown', () => {
     });
   });
 
+  it('keeps disabled legacy step visible with tooltip and blocks click', async () => {
+    class TestFlowModel extends FlowModel {}
+    const engine = new FlowEngine();
+    const model = new TestFlowModel({ uid: 'm-disabled', flowEngine: engine });
+    const openSpy = vi.spyOn(model, 'openFlowSettings').mockResolvedValue(undefined as any);
+    const disabledReason = 'This setting has been moved to: Form block settings > Field values';
+
+    TestFlowModel.registerFlow({
+      key: 'flowDisabled',
+      title: 'Flow Disabled',
+      steps: {
+        legacyDefault: {
+          title: 'Default value',
+          disabledInSettings: true,
+          disabledReasonInSettings: disabledReason,
+          uiSchema: { f: { type: 'string', 'x-component': 'Input' } },
+        },
+      },
+    });
+
+    render(
+      React.createElement(
+        ConfigProvider as any,
+        null,
+        React.createElement(App as any, null, React.createElement(DefaultSettingsIcon as any, { model })),
+      ),
+    );
+
+    let disabledItem: any;
+    await waitFor(() => {
+      const menu = (globalThis as any).__lastDropdownMenu;
+      const items = (menu?.items || []) as any[];
+      disabledItem = items.find((it) => String(it.key || '') === 'flowDisabled:legacyDefault');
+      expect(disabledItem).toBeTruthy();
+      expect(disabledItem.disabled).toBe(true);
+    });
+
+    const resolvedLabel =
+      React.isValidElement(disabledItem.label) && typeof disabledItem.label.type === 'function'
+        ? (disabledItem.label.type as any)(disabledItem.label.props)
+        : disabledItem.label;
+
+    const tooltipElement = findElement(
+      resolvedLabel,
+      (element) =>
+        Object.prototype.hasOwnProperty.call(element.props || {}, 'title') && element.props.title === disabledReason,
+    );
+    expect(tooltipElement).toBeTruthy();
+
+    const iconElement = React.isValidElement(tooltipElement) ? tooltipElement.props.children : null;
+    expect(React.isValidElement(iconElement)).toBe(true);
+    expect((iconElement as any).props?.style?.color).toBe(mockColorTextTertiary);
+
+    const menu = (globalThis as any).__lastDropdownMenu;
+    await act(async () => {
+      menu.onClick?.({ key: 'flowDisabled:legacyDefault' });
+    });
+
+    expect(openSpy).not.toHaveBeenCalled();
+  });
+
   it('clicking a step item opens flow settings with correct args', async () => {
     class TestFlowModel extends FlowModel {}
     const engine = new FlowEngine();
@@ -265,10 +360,60 @@ describe('DefaultSettingsIcon - only static flows are shown', () => {
       expect((globalThis as any).__lastDropdownMenu).toBeTruthy();
     });
     const menu = (globalThis as any).__lastDropdownMenu;
-    menu.onClick?.({ key: 'flowC:general' });
+    await act(async () => {
+      menu.onClick?.({ key: 'flowC:general' });
+    });
     expect(openSpy).toHaveBeenCalledWith({ flowKey: 'flowC', stepKey: 'general' });
   });
 
+  it('closes dropdown when opening flow settings modal', async () => {
+    class TestFlowModel extends FlowModel {}
+    const engine = new FlowEngine();
+    const model = new TestFlowModel({ uid: 'm-close', flowEngine: engine });
+    vi.spyOn(model, 'openFlowSettings').mockResolvedValue(undefined as any);
+
+    TestFlowModel.registerFlow({
+      key: 'flowClose',
+      title: 'Flow Close',
+      steps: {
+        general: { title: 'General', uiSchema: { f: { type: 'string', 'x-component': 'Input' } } },
+      },
+    });
+
+    render(
+      React.createElement(
+        ConfigProvider as any,
+        null,
+        React.createElement(App as any, null, React.createElement(DefaultSettingsIcon as any, { model })),
+      ),
+    );
+
+    await waitFor(() => {
+      expect((globalThis as any).__lastDropdownMenu).toBeTruthy();
+      expect((globalThis as any).__lastDropdownOnOpenChange).toBeTruthy();
+    });
+
+    // open dropdown
+    await act(async () => {
+      (globalThis as any).__lastDropdownOnOpenChange?.(true, { source: 'trigger' });
+    });
+
+    await waitFor(() => {
+      expect((globalThis as any).__lastDropdownOpen).toBe(true);
+    });
+
+    const menu = (globalThis as any).__lastDropdownMenu;
+
+    // click config item to open modal
+    await act(async () => {
+      menu.onClick?.({ key: 'flowClose:general' });
+    });
+
+    await waitFor(() => {
+      expect((globalThis as any).__lastDropdownOpen).toBe(false);
+    });
+  });
+
   it('copy UID action writes model uid to clipboard', async () => {
     class TestFlowModel extends FlowModel {}
     const engine = new FlowEngine();
@@ -298,7 +443,9 @@ describe('DefaultSettingsIcon - only static flows are shown', () => {
       expect((globalThis as any).__lastDropdownMenu).toBeTruthy();
     });
     const menu = (globalThis as any).__lastDropdownMenu;
-    menu.onClick?.({ key: 'copy-uid' });
+    await act(async () => {
+      menu.onClick?.({ key: 'copy-uid' });
+    });
     expect((navigator as any).clipboard.writeText).toHaveBeenCalledWith('m-copy');
   });
 
@@ -326,7 +473,9 @@ describe('DefaultSettingsIcon - only static flows are shown', () => {
       expect((globalThis as any).__lastDropdownMenu).toBeTruthy();
     });
     const menu = (globalThis as any).__lastDropdownMenu;
-    menu.onClick?.({ key: 'delete' });
+    await act(async () => {
+      menu.onClick?.({ key: 'delete' });
+    });
     expect(destroySpy).toHaveBeenCalled();
   });
 
@@ -556,8 +705,11 @@ describe('DefaultSettingsIcon - extra menu items', () => {
       });
 
       const menu = (globalThis as any).__lastDropdownMenu;
-      menu.onClick?.({ key: 'extra-action' });
+      await act(async () => {
+        menu.onClick?.({ key: 'extra-action' });
+      });
       expect(onClick).toHaveBeenCalled();
+      expect((globalThis as any).__lastDropdownOpen).toBe(false);
     } finally {
       dispose?.();
     }

package/src/components/subModel/AddSubModelButton.tsx

@@ -9,7 +9,7 @@
 
 import { Switch } from 'antd';
 import _ from 'lodash';
-import React, { useMemo } from 'react';
+import React, { useEffect, useMemo } from 'react';
 import { FlowModelContext } from '../../flowContext';
 import { FlowModel } from '../../models';
 import { CreateModelOptions, ModelConstructor } from '../../types';
@@ -542,6 +542,22 @@ const AddSubModelButtonCore = function AddSubModelButton({
     [model, subModelKey, subModelType],
   );
 
+  React.useEffect(() => {
+    const handleSubModelChanged = () => {
+      setRefreshTick((x) => x + 1);
+    };
+
+    model.emitter?.on('onSubModelAdded', handleSubModelChanged);
+    model.emitter?.on('onSubModelRemoved', handleSubModelChanged);
+    model.emitter?.on('onSubModelReplaced', handleSubModelChanged);
+
+    return () => {
+      model.emitter?.off('onSubModelAdded', handleSubModelChanged);
+      model.emitter?.off('onSubModelRemoved', handleSubModelChanged);
+      model.emitter?.off('onSubModelReplaced', handleSubModelChanged);
+    };
+  }, [model]);
+
   // 点击处理逻辑
   const onClick = async (info: any) => {
     const clickedItem = info.originalItem || info;
@@ -594,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,
@@ -651,6 +667,20 @@ const AddSubModelButtonCore = function AddSubModelButton({
     [finalItems, model, subModelKey, subModelType],
   );
 
+  useEffect(() => {
+    const handleSubModelChange = () => {
+      setRefreshTick((x) => x + 1);
+    };
+
+    model.emitter.on('onSubModelAdded', handleSubModelChange);
+    model.emitter.on('onSubModelRemoved', handleSubModelChange);
+
+    return () => {
+      model.emitter.off('onSubModelAdded', handleSubModelChange);
+      model.emitter.off('onSubModelRemoved', handleSubModelChange);
+    };
+  }, [model]);
+
   return (
     <LazyDropdown
       menu={{

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'));
+  });
 });
 
 // ========================
@@ -1007,15 +1117,16 @@ describe('AddSubModelButton toggleable behavior', () => {
   // Minimal fake repository for save/destroy
   class FakeRepo implements IFlowModelRepository<any> {
     findOne = vi.fn().mockResolvedValue(null);
+    ensure = vi.fn(async (values: any) => await this.findOne(values));
     save = vi.fn().mockResolvedValue({});
     destroy = vi.fn().mockResolvedValue(true);
     move = vi.fn().mockResolvedValue(undefined);
     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 +1179,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 +1224,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 +1242,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 +1324,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 +1383,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);