@nocobase/client-v2 2.2.0-beta.1 → 2.2.0-beta.11

package/src/flow/components/__tests__/DynamicFlowsIcon.test.tsx

@@ -10,19 +10,24 @@
 import React from 'react';
 import { beforeEach, describe, expect, it, vi } from 'vitest';
 import { render, screen, userEvent, waitFor } from '@nocobase/test/client';
-import { ActionScene, FlowEngine, FlowModel, GLOBAL_EMBED_CONTAINER_ID } from '@nocobase/flow-engine';
+import { ActionScene, FlowEngine, FlowModel, GLOBAL_EMBED_CONTAINER_ID, useFlowContext } from '@nocobase/flow-engine';
 import { DynamicFlowsIcon } from '../DynamicFlowsIcon';
 
 const mockState = vi.hoisted(() => ({
   capturedSelectProps: [] as any[],
+  capturedTabsProps: [] as any[],
   flowContextValue: undefined as any,
 }));
 
 vi.mock('@nocobase/flow-engine', async (importOriginal) => {
   const actual = await importOriginal<typeof import('@nocobase/flow-engine')>();
+  const React = await import('react');
   return {
     ...actual,
-    useFlowContext: () => mockState.flowContextValue,
+    useFlowContext: () => {
+      const context = React.useContext(actual.FlowReactContext);
+      return context?.view ? context : mockState.flowContextValue;
+    },
   };
 });
 
@@ -62,6 +67,33 @@ vi.mock('antd', async (importOriginal) => {
       return <div data-testid={String(props.placeholder || 'select')} />;
     },
     Space: ({ children }: any) => <div>{children}</div>,
+    Tabs: (props: any) => {
+      mockState.capturedTabsProps.push(props);
+      const { items, activeKey, onChange, tabBarStyle } = props;
+      const currentKey = activeKey || items?.[0]?.key;
+      return (
+        <div data-testid="dynamic-flow-source-tabs">
+          <div role="tablist" style={tabBarStyle}>
+            {items?.map((item: any) => (
+              <button
+                key={item.key}
+                role="tab"
+                aria-selected={item.key === currentKey}
+                type="button"
+                onClick={() => onChange?.(item.key)}
+              >
+                {item.label}
+              </button>
+            ))}
+          </div>
+          {items?.map((item: any) => (
+            <div key={item.key} hidden={item.key !== currentKey}>
+              {item.children}
+            </div>
+          ))}
+        </div>
+      );
+    },
     Tooltip: ({ children }: any) => <>{children}</>,
   };
 });
@@ -83,6 +115,8 @@ const openDynamicFlowsEditor = async (model: FlowModel) => {
   expect(trigger).not.toBeNull();
   await userEvent.click(trigger as Element);
 
+  await waitFor(() => expect(model.context.viewer.embed).toHaveBeenCalled());
+
   const embedCall = (model.context.viewer.embed as any).mock.calls.at(-1)?.[0];
   expect(embedCall?.content).toBeTruthy();
 
@@ -163,6 +197,38 @@ const createModel = (options: { preventClose?: boolean; hiddenClose?: boolean; s
   return model;
 };
 
+const createPeerModel = (model: FlowModel, uid: string, saveStepParams = vi.fn(async () => undefined)) => {
+  const PeerModel = model.constructor as typeof FlowModel;
+  const peer = new PeerModel({
+    uid,
+    use: PeerModel,
+    flowEngine: model.flowEngine,
+    stepParams: {},
+    subModels: {},
+    flowRegistry: {
+      flow1: {
+        title: 'Template event flow',
+        on: 'click',
+        steps: {
+          notifyStep: {
+            use: 'notify',
+          },
+        },
+      },
+    },
+  } as any);
+
+  peer.context.defineProperty('message', {
+    value: {
+      error: vi.fn(),
+      success: vi.fn(),
+    },
+  });
+  vi.spyOn(peer, 'saveStepParams').mockImplementation(saveStepParams);
+
+  return peer;
+};
+
 const createView = () => {
   let destroyed = false;
   let closingPromise: Promise<boolean | void> | undefined;
@@ -189,6 +255,9 @@ const createView = () => {
       destroyed = true;
     }),
     beforeClose: undefined as any,
+    inputArgs: {
+      pageActive: true,
+    },
   };
   return view;
 };
@@ -196,6 +265,7 @@ const createView = () => {
 describe('DynamicFlowsIcon', () => {
   beforeEach(() => {
     mockState.capturedSelectProps.length = 0;
+    mockState.capturedTabsProps.length = 0;
     mockState.flowContextValue = {
       modal: {
         confirm: vi.fn(),
@@ -377,4 +447,80 @@ describe('DynamicFlowsIcon', () => {
     expect(view.destroy).toHaveBeenCalledTimes(1);
     expect(model.context.message.success).toHaveBeenCalledWith('Configuration saved');
   });
+
+  it('renders source tabs and closes the editor when saving one source', async () => {
+    const model = createModel();
+    const targetSaveStepParams = vi.fn(async () => undefined);
+    const target = createPeerModel(model, 'target-model', targetSaveStepParams);
+
+    model.flowEngine.flowSettings.registerDynamicFlowSourceProvider({
+      key: 'test-source-provider',
+      getSources: () => [{ key: 'referenced-template', label: 'Referenced template', model: target }],
+    });
+
+    const { view } = await openDynamicFlowsEditor(model);
+
+    expect(screen.getByRole('tab', { name: 'Current block' })).toHaveAttribute('aria-selected', 'true');
+    expect(mockState.capturedTabsProps.at(-1)?.tabBarStyle?.paddingLeft).toBeGreaterThan(0);
+    await userEvent.click(screen.getByRole('tab', { name: 'Referenced template' }));
+
+    await userEvent.click(screen.getByRole('button', { name: 'Add event flow' }));
+    await userEvent.click(screen.getByRole('button', { name: 'Save' }));
+
+    expect(targetSaveStepParams).toHaveBeenCalledTimes(1);
+    expect(target.flowRegistry.getFlows().size).toBe(2);
+    expect(view.destroy).toHaveBeenCalledTimes(1);
+    expect(target.context.message.success).toHaveBeenCalledWith('Configuration saved');
+  });
+
+  it('saves all dirty sources without discard confirmation', async () => {
+    const saveStepParams = vi.fn(async () => undefined);
+    const model = createModel({ saveStepParams });
+    const targetSaveStepParams = vi.fn(async () => undefined);
+    const target = createPeerModel(model, 'target-model', targetSaveStepParams);
+    mockState.flowContextValue.modal.confirm.mockResolvedValue(false);
+
+    model.flowEngine.flowSettings.registerDynamicFlowSourceProvider({
+      key: 'test-source-unsaved-provider',
+      getSources: () => [{ key: 'referenced-template', label: 'Referenced template', model: target }],
+    });
+
+    const { view } = await openDynamicFlowsEditor(model);
+
+    await userEvent.click(screen.getByRole('tab', { name: 'Referenced template' }));
+    await userEvent.click(screen.getByRole('button', { name: 'Add event flow' }));
+    await userEvent.click(screen.getByRole('tab', { name: 'Current block' }));
+    await userEvent.click(screen.getByRole('button', { name: 'Add event flow' }));
+    await userEvent.click(screen.getByRole('button', { name: 'Save' }));
+
+    expect(saveStepParams).toHaveBeenCalledTimes(1);
+    expect(targetSaveStepParams).toHaveBeenCalledTimes(1);
+    expect(mockState.flowContextValue.modal.confirm).not.toHaveBeenCalled();
+    expect(view.close).toHaveBeenCalledTimes(1);
+    expect(view.destroy).toHaveBeenCalledTimes(1);
+    expect(model.flowRegistry.getFlows().size).toBe(2);
+    expect(target.flowRegistry.getFlows().size).toBe(2);
+  });
+
+  it('provides the active source model context inside source tabs', async () => {
+    const model = createModel();
+    const target = createPeerModel(model, 'target-model');
+    const seenModelUids: string[] = [];
+    const ContextProbe = () => {
+      const ctx = useFlowContext<any>();
+      seenModelUids.push(ctx?.model?.uid);
+      return null;
+    };
+    model.flowEngine.flowSettings.renderStepForm = vi.fn(() => <ContextProbe />) as any;
+
+    model.flowEngine.flowSettings.registerDynamicFlowSourceProvider({
+      key: 'test-source-context-provider',
+      getSources: () => [{ key: 'referenced-template', label: 'Referenced template', model: target }],
+    });
+
+    await openDynamicFlowsEditor(model);
+    await userEvent.click(screen.getByRole('tab', { name: 'Referenced template' }));
+
+    await waitFor(() => expect(seenModelUids).toContain('target-model'));
+  });
 });