20260923230500

code/fms/fms-vue/tests/unit/workflow-canvas-layout.spec.js

@@ -77,3 +77,99 @@ describe('画布一键整理（@logicflow/layout 的 dagre 插件）', () => {
     wrapper.unmount()
   })
 })
+
+/** 派发一个带 ctrl 的按键（LogicFlow 内置快捷键没有剪切，这条我们自己监听） */
+function pressCtrl(target, key) {
+  target.dispatchEvent(new KeyboardEvent('keydown', { key, ctrlKey: true, bubbles: true, cancelable: true }))
+}
+
+/** 派发一个不带修饰键的按键（删除） */
+function pressKey(target, key) {
+  target.dispatchEvent(new KeyboardEvent('keydown', { key, bubbles: true, cancelable: true }))
+}
+
+describe('画布快捷键：剪切（ctrl+x）', () => {
+  it('删掉选中节点，与它相连的边一并消失', async () => {
+    const wrapper = mount(WorkflowCanvas, {
+      props: { draft: messyDraft() },
+      attachTo: document.body,
+    })
+    await nextTick()
+
+    wrapper.vm.focusNode('user_task_1')
+    await nextTick()
+    pressCtrl(wrapper.find('.workflow-canvas').element, 'x')
+    await nextTick()
+
+    const graph = wrapper.emitted('graph-change').at(-1)[0]
+    expect(graph.nodes.map((item) => item.id)).toEqual(['start', 'end'])
+    expect(graph.edges).toEqual([])
+
+    wrapper.unmount()
+  })
+
+  it('没有选中元素时不动画布', async () => {
+    const wrapper = mount(WorkflowCanvas, {
+      props: { draft: messyDraft() },
+      attachTo: document.body,
+    })
+    await nextTick()
+
+    pressCtrl(wrapper.find('.workflow-canvas').element, 'x')
+    await nextTick()
+
+    expect(wrapper.emitted('graph-change')).toBeUndefined()
+
+    wrapper.unmount()
+  })
+
+  it('焦点不在画布上也能连着剪（删完一次不用再点画布）', async () => {
+    const wrapper = mount(WorkflowCanvas, {
+      props: { draft: messyDraft() },
+      attachTo: document.body,
+    })
+    await nextTick()
+
+    // 事件从 body 冒泡：快捷键监听在 document 上，不受画布焦点影响
+    wrapper.vm.focusNode('user_task_1')
+    await nextTick()
+    pressCtrl(document.body, 'x')
+    await nextTick()
+
+    wrapper.vm.focusNode('end')
+    await nextTick()
+    pressCtrl(document.body, 'x')
+    await nextTick()
+
+    const graph = wrapper.emitted('graph-change').at(-1)[0]
+    expect(graph.nodes.map((item) => item.id)).toEqual(['start'])
+
+    wrapper.unmount()
+  })
+
+  it('焦点不在画布上时，内置的复制/粘贴/删除照样能用', async () => {
+    const wrapper = mount(WorkflowCanvas, {
+      props: { draft: messyDraft() },
+      attachTo: document.body,
+    })
+    await nextTick()
+
+    wrapper.vm.focusNode('user_task_1')
+    await nextTick()
+    pressCtrl(document.body, 'c')
+    await nextTick()
+    pressCtrl(document.body, 'v')
+    await nextTick()
+
+    let graph = wrapper.emitted('graph-change').at(-1)[0]
+    expect(graph.nodes.length).toBe(4)
+
+    pressKey(document.body, 'Backspace')
+    await nextTick()
+
+    graph = wrapper.emitted('graph-change').at(-1)[0]
+    expect(graph.nodes.length).toBe(3)
+
+    wrapper.unmount()
+  })
+})