w-flow-vue 1.0.21 → 1.0.23

package/test/unit-components-canvas.test.mjs

@@ -1,102 +1,104 @@
-import { mount } from '@vue/test-utils'
-import ViewportTransform from '../src/components/canvas/ViewportTransform.vue'
-import SelectionBox from '../src/components/canvas/SelectionBox.vue'
-import BackgroundLayer from '../src/components/canvas/BackgroundLayer.vue'
-import FlowCanvas from '../src/components/canvas/FlowCanvas.vue'
-
-describe('ViewportTransform', () => {
-    test('applies transform style', () => {
-        const wrapper = mount(ViewportTransform, {
-            propsData: { x: 100, y: 50, zoom: 1.5 },
-            slots: { default: '<div class="child">content</div>' },
-        })
-        expect(wrapper.attributes('style')).toContain('translate(100px, 50px) scale(1.5)')
-    })
-
-    test('default values produce identity transform', () => {
-        const wrapper = mount(ViewportTransform, {
-            slots: { default: '<div>content</div>' },
-        })
-        expect(wrapper.attributes('style')).toContain('translate(0px, 0px) scale(1)')
-    })
-
-    test('renders slot content', () => {
-        const wrapper = mount(ViewportTransform, {
-            slots: { default: '<div class="child">hello</div>' },
-        })
-        expect(wrapper.find('.child').text()).toBe('hello')
-    })
-})
-
-describe('SelectionBox', () => {
-    test('renders when box is provided', () => {
-        const wrapper = mount(SelectionBox, {
-            propsData: { box: { x: 10, y: 20, width: 100, height: 50 } },
-        })
-        const el = wrapper.find('.vue-flow__selection-box')
-        expect(el.exists()).toBe(true)
-        expect(el.attributes('style')).toContain('left: 10px')
-        expect(el.attributes('style')).toContain('top: 20px')
-        expect(el.attributes('style')).toContain('width: 100px')
-        expect(el.attributes('style')).toContain('height: 50px')
-    })
-
-    test('does not render when box is null', () => {
-        const wrapper = mount(SelectionBox, {
-            propsData: { box: null },
-        })
-        expect(wrapper.find('.vue-flow__selection-box').exists()).toBe(false)
-    })
-})
-
-describe('FlowCanvas', () => {
-    test('renders container with vue-flow class', () => {
-        const wrapper = mount(FlowCanvas, {
-            slots: { default: '<div>child</div>' },
-        })
-        expect(wrapper.classes()).toContain('vue-flow')
-    })
-
-    test('emits canvas-click on mousedown+mouseup', () => {
-        const wrapper = mount(FlowCanvas)
-        wrapper.trigger('mousedown', { clientX: 0, clientY: 0 })
-        wrapper.trigger('mouseup', { clientX: 0, clientY: 0 })
-        expect(wrapper.emitted('canvas-click')).toBeTruthy()
-    })
-
-    test('emits canvas-mousedown', () => {
-        const wrapper = mount(FlowCanvas)
-        wrapper.trigger('mousedown', { clientX: 0, clientY: 0 })
-        expect(wrapper.emitted('canvas-mousedown')).toBeTruthy()
-    })
-
-    test('renders slot content', () => {
-        const wrapper = mount(FlowCanvas, {
-            slots: { default: '<div class="test-child">hello</div>' },
-        })
-        expect(wrapper.find('.test-child').text()).toBe('hello')
-    })
-})
-
-describe('BackgroundLayer', () => {
-    test('renders svg with pattern', () => {
-        const wrapper = mount(BackgroundLayer)
-        expect(wrapper.find('svg').exists()).toBe(true)
-        expect(wrapper.find('pattern').exists()).toBe(true)
-    })
-
-    test('renders dots pattern by default', () => {
-        const wrapper = mount(BackgroundLayer, {
-            propsData: { variant: 'dots' },
-        })
-        expect(wrapper.find('circle').exists()).toBe(true)
-    })
-
-    test('renders lines pattern', () => {
-        const wrapper = mount(BackgroundLayer, {
-            propsData: { variant: 'lines' },
-        })
-        expect(wrapper.find('circle').exists()).toBe(false)
-        expect(wrapper.find('path').exists()).toBe(true)
-    })
-})
+import { mount } from '@vue/test-utils'
+import ViewportTransform from '../src/components/canvas/ViewportTransform.vue'
+import SelectionBox from '../src/components/canvas/SelectionBox.vue'
+import BackgroundLayer from '../src/components/canvas/BackgroundLayer.vue'
+import FlowCanvas from '../src/components/canvas/FlowCanvas.vue'
+
+describe('ViewportTransform', () => {
+    test('applies transform style', () => {
+        const wrapper = mount(ViewportTransform, {
+            //ViewportTransform 已改收單一 viewport 物件(取代 x/y/zoom 三個純量),
+            //目的為令宿主 render 僅讀取穩定物件參考; 斷言意圖(transform 樣式)不變
+            propsData: { viewport: { x: 100, y: 50, zoom: 1.5 } },
+            slots: { default: '<div class="child">content</div>' },
+        })
+        expect(wrapper.attributes('style')).toContain('translate(100px, 50px) scale(1.5)')
+    })
+
+    test('default values produce identity transform', () => {
+        const wrapper = mount(ViewportTransform, {
+            slots: { default: '<div>content</div>' },
+        })
+        expect(wrapper.attributes('style')).toContain('translate(0px, 0px) scale(1)')
+    })
+
+    test('renders slot content', () => {
+        const wrapper = mount(ViewportTransform, {
+            slots: { default: '<div class="child">hello</div>' },
+        })
+        expect(wrapper.find('.child').text()).toBe('hello')
+    })
+})
+
+describe('SelectionBox', () => {
+    test('renders when box is provided', () => {
+        const wrapper = mount(SelectionBox, {
+            propsData: { box: { x: 10, y: 20, width: 100, height: 50 } },
+        })
+        const el = wrapper.find('.vue-flow__selection-box')
+        expect(el.exists()).toBe(true)
+        expect(el.attributes('style')).toContain('left: 10px')
+        expect(el.attributes('style')).toContain('top: 20px')
+        expect(el.attributes('style')).toContain('width: 100px')
+        expect(el.attributes('style')).toContain('height: 50px')
+    })
+
+    test('does not render when box is null', () => {
+        const wrapper = mount(SelectionBox, {
+            propsData: { box: null },
+        })
+        expect(wrapper.find('.vue-flow__selection-box').exists()).toBe(false)
+    })
+})
+
+describe('FlowCanvas', () => {
+    test('renders container with vue-flow class', () => {
+        const wrapper = mount(FlowCanvas, {
+            slots: { default: '<div>child</div>' },
+        })
+        expect(wrapper.classes()).toContain('vue-flow')
+    })
+
+    test('emits canvas-click on mousedown+mouseup', () => {
+        const wrapper = mount(FlowCanvas)
+        wrapper.trigger('mousedown', { clientX: 0, clientY: 0 })
+        wrapper.trigger('mouseup', { clientX: 0, clientY: 0 })
+        expect(wrapper.emitted('canvas-click')).toBeTruthy()
+    })
+
+    test('emits canvas-mousedown', () => {
+        const wrapper = mount(FlowCanvas)
+        wrapper.trigger('mousedown', { clientX: 0, clientY: 0 })
+        expect(wrapper.emitted('canvas-mousedown')).toBeTruthy()
+    })
+
+    test('renders slot content', () => {
+        const wrapper = mount(FlowCanvas, {
+            slots: { default: '<div class="test-child">hello</div>' },
+        })
+        expect(wrapper.find('.test-child').text()).toBe('hello')
+    })
+})
+
+describe('BackgroundLayer', () => {
+    test('renders svg with pattern', () => {
+        const wrapper = mount(BackgroundLayer)
+        expect(wrapper.find('svg').exists()).toBe(true)
+        expect(wrapper.find('pattern').exists()).toBe(true)
+    })
+
+    test('renders dots pattern by default', () => {
+        const wrapper = mount(BackgroundLayer, {
+            propsData: { variant: 'dots' },
+        })
+        expect(wrapper.find('circle').exists()).toBe(true)
+    })
+
+    test('renders lines pattern', () => {
+        const wrapper = mount(BackgroundLayer, {
+            propsData: { variant: 'lines' },
+        })
+        expect(wrapper.find('circle').exists()).toBe(false)
+        expect(wrapper.find('path').exists()).toBe(true)
+    })
+})

package/test/unit-components-edge.test.mjs

@@ -1,147 +1,157 @@
-import { mount } from '@vue/test-utils'
-import EdgeWrapper from '../src/components/edges/EdgeWrapper.vue'
-import EdgeLabel from '../src/components/edges/EdgeLabel.vue'
-import EdgeMarkerDefs from '../src/components/edges/EdgeMarkerDefs.vue'
-
-describe('EdgeWrapper', () => {
-    const baseProps = {
-        conn: { id: 'e1-2', source: '1', target: '2', type: 'default' },
-        sourceX: 100,
-        sourceY: 50,
-        targetX: 300,
-        targetY: 250,
-        sourcePosition: 'bottom',
-        targetPosition: 'top',
-    }
-
-    test('renders svg group', () => {
-        const wrapper = mount(EdgeWrapper, {
-            propsData: baseProps,
-            stubs: { EdgeLabel: true },
-        })
-        expect(wrapper.element.tagName.toLowerCase()).toBe('g')
-    })
-
-    test('renders path with d attribute', () => {
-        const wrapper = mount(EdgeWrapper, {
-            propsData: baseProps,
-            stubs: { EdgeLabel: true },
-        })
-        const paths = wrapper.findAll('path')
-        expect(paths.length).toBeGreaterThanOrEqual(1)
-        const visiblePath = paths.wrappers.find(p => !p.classes().includes('vue-flow__edge-interaction'))
-        expect(visiblePath.attributes('d')).toMatch(/^M /)
-    })
-
-    test('applies selected class', () => {
-        const wrapper = mount(EdgeWrapper, {
-            propsData: { ...baseProps, selected: true },
-            stubs: { EdgeLabel: true },
-        })
-        expect(wrapper.classes()).toContain('vue-flow__edge--selected')
-    })
-
-    test('applies animated class', () => {
-        const wrapper = mount(EdgeWrapper, {
-            propsData: {
-                ...baseProps,
-                conn: { ...baseProps.conn, animated: true },
-            },
-            stubs: { EdgeLabel: true },
-        })
-        expect(wrapper.classes()).toContain('vue-flow__edge--animated')
-    })
-
-    test('renders name when provided', () => {
-        const wrapper = mount(EdgeWrapper, {
-            propsData: {
-                ...baseProps,
-                conn: { ...baseProps.conn, name: 'test label' },
-            },
-        })
-        expect(wrapper.find('.vue-flow__edge-label').exists()).toBe(true)
-    })
-
-    test('does not render name when not provided', () => {
-        const wrapper = mount(EdgeWrapper, {
-            propsData: baseProps,
-        })
-        expect(wrapper.find('.vue-flow__edge-label').exists()).toBe(false)
-    })
-
-    test('emits conn-click on click', () => {
-        const wrapper = mount(EdgeWrapper, {
-            propsData: baseProps,
-            stubs: { EdgeLabel: true },
-        })
-        const interactionPath = wrapper.find('.vue-flow__edge-interaction')
-        interactionPath.trigger('click')
-        expect(wrapper.emitted('conn-click')).toBeTruthy()
-        expect(wrapper.emitted('conn-click')[0][0].conn.id).toBe('e1-2')
-    })
-
-    test('renders different edge types', () => {
-        const types = ['default', 'straight', 'step', 'smoothstep']
-        const paths = types.map(type => {
-            const wrapper = mount(EdgeWrapper, {
-                propsData: {
-                    ...baseProps,
-                    conn: { ...baseProps.conn, type },
-                },
-                stubs: { EdgeLabel: true },
-            })
-            const visiblePath = wrapper.findAll('path').wrappers.find(
-                p => !p.classes().includes('vue-flow__edge-interaction')
-            )
-            return visiblePath.attributes('d')
-        })
-        // straight should differ from bezier
-        expect(paths[0]).not.toBe(paths[1])
-    })
-})
-
-describe('EdgeLabel', () => {
-    test('renders name text', () => {
-        const wrapper = mount(EdgeLabel, {
-            propsData: { name: 'hello', x: 100, y: 50 },
-        })
-        expect(wrapper.text()).toContain('hello')
-    })
-})
-
-describe('EdgeMarkerDefs', () => {
-    test('renders marker defs for conns with markers', () => {
-        const conns = [
-            { id: 'e1', source: '1', target: '2', markerEnd: 'arrowclosed' },
-            { id: 'e2', source: '2', target: '3', markerEnd: 'arrow' },
-        ]
-        const wrapper = mount(EdgeMarkerDefs, {
-            propsData: { conns },
-        })
-        const markers = wrapper.findAll('marker')
-        expect(markers.length).toBe(2)
-    })
-
-    test('deduplicates same marker type', () => {
-        const conns = [
-            { id: 'e1', source: '1', target: '2', markerEnd: 'arrowclosed' },
-            { id: 'e2', source: '2', target: '3', markerEnd: 'arrowclosed' },
-        ]
-        const wrapper = mount(EdgeMarkerDefs, {
-            propsData: { conns },
-        })
-        const markers = wrapper.findAll('marker')
-        expect(markers.length).toBe(1)
-    })
-
-    test('renders no markers when conns have none', () => {
-        const conns = [
-            { id: 'e1', source: '1', target: '2' },
-        ]
-        const wrapper = mount(EdgeMarkerDefs, {
-            propsData: { conns },
-        })
-        const markers = wrapper.findAll('marker')
-        expect(markers.length).toBe(0)
-    })
-})
+import { mount } from '@vue/test-utils'
+import EdgeWrapper from '../src/components/edges/EdgeWrapper.vue'
+import EdgeMarkerDefs from '../src/components/edges/EdgeMarkerDefs.vue'
+
+describe('EdgeWrapper', () => {
+    const baseProps = {
+        conn: { id: 'e1-2', source: '1', target: '2', type: 'default' },
+        sourceX: 100,
+        sourceY: 50,
+        targetX: 300,
+        targetY: 250,
+        sourcePosition: 'bottom',
+        targetPosition: 'top',
+    }
+
+    test('renders svg group', () => {
+        const wrapper = mount(EdgeWrapper, {
+            propsData: baseProps,
+        })
+        expect(wrapper.element.tagName.toLowerCase()).toBe('g')
+    })
+
+    test('renders path with d attribute', () => {
+        const wrapper = mount(EdgeWrapper, {
+            propsData: baseProps,
+        })
+        const paths = wrapper.findAll('path')
+        expect(paths.length).toBeGreaterThanOrEqual(1)
+        const visiblePath = paths.wrappers.find(p => !p.classes().includes('vue-flow__edge-interaction'))
+        expect(visiblePath.attributes('d')).toMatch(/^M /)
+    })
+
+    test('applies selected class', () => {
+        const wrapper = mount(EdgeWrapper, {
+            propsData: { ...baseProps, selected: true },
+        })
+        expect(wrapper.classes()).toContain('vue-flow__edge--selected')
+    })
+
+    test('applies animated class', () => {
+        const wrapper = mount(EdgeWrapper, {
+            propsData: {
+                ...baseProps,
+                conn: { ...baseProps.conn, animated: true },
+            },
+        })
+        expect(wrapper.classes()).toContain('vue-flow__edge--animated')
+    })
+
+    test('renders name when provided', () => {
+        const wrapper = mount(EdgeWrapper, {
+            propsData: {
+                ...baseProps,
+                conn: { ...baseProps.conn, name: 'test label' },
+            },
+        })
+        expect(wrapper.find('.vue-flow__edge-label').exists()).toBe(true)
+    })
+
+    test('does not render name when not provided', () => {
+        const wrapper = mount(EdgeWrapper, {
+            propsData: baseProps,
+        })
+        expect(wrapper.find('.vue-flow__edge-label').exists()).toBe(false)
+    })
+
+    test('emits conn-click on click', () => {
+        const wrapper = mount(EdgeWrapper, {
+            propsData: baseProps,
+        })
+        const interactionPath = wrapper.find('.vue-flow__edge-interaction')
+        interactionPath.trigger('click')
+        expect(wrapper.emitted('conn-click')).toBeTruthy()
+        expect(wrapper.emitted('conn-click')[0][0].conn.id).toBe('e1-2')
+    })
+
+    test('renders different edge types', () => {
+        const types = ['default', 'straight', 'step', 'smoothstep']
+        const paths = types.map(type => {
+            const wrapper = mount(EdgeWrapper, {
+                propsData: {
+                    ...baseProps,
+                    conn: { ...baseProps.conn, type },
+                },
+                })
+            const visiblePath = wrapper.findAll('path').wrappers.find(
+                p => !p.classes().includes('vue-flow__edge-interaction')
+            )
+            return visiblePath.attributes('d')
+        })
+        // straight should differ from bezier
+        expect(paths[0]).not.toBe(paths[1])
+    })
+})
+
+//EdgeLabel.vue 已併入 EdgeWrapper(以 .vue-flow__edge-label 直接渲染 conn.name),
+//故原「連線名稱有被渲染」之斷言改由 EdgeWrapper 驗證
+describe('連線名稱標籤', () => {
+    //baseProps 定義於 EdgeWrapper 之 describe 內, 此處自備一份
+    const props = {
+        sourceX: 100, sourceY: 50, targetX: 300, targetY: 250,
+        sourcePosition: 'bottom', targetPosition: 'top',
+    }
+
+    test('conn.name 渲染於 .vue-flow__edge-label', () => {
+        const wrapper = mount(EdgeWrapper, {
+            propsData: { ...props, conn: { id: 'e1', source: '1', target: '2', name: 'hello' } },
+        })
+        const label = wrapper.find('.vue-flow__edge-label')
+        expect(label.exists()).toBe(true)
+        expect(label.text()).toContain('hello')
+    })
+
+    test('無 conn.name 時不渲染標籤', () => {
+        const wrapper = mount(EdgeWrapper, {
+            propsData: { ...props, conn: { id: 'e1', source: '1', target: '2' } },
+        })
+        expect(wrapper.find('.vue-flow__edge-label').exists()).toBe(false)
+    })
+})
+
+describe('EdgeMarkerDefs', () => {
+    test('renders marker defs for conns with markers', () => {
+        const conns = [
+            { id: 'e1', source: '1', target: '2', markerEnd: 'arrowclosed' },
+            { id: 'e2', source: '2', target: '3', markerEnd: 'arrow' },
+        ]
+        const wrapper = mount(EdgeMarkerDefs, {
+            propsData: { conns },
+        })
+        const markers = wrapper.findAll('marker')
+        expect(markers.length).toBe(2)
+    })
+
+    test('deduplicates same marker type', () => {
+        const conns = [
+            { id: 'e1', source: '1', target: '2', markerEnd: 'arrowclosed' },
+            { id: 'e2', source: '2', target: '3', markerEnd: 'arrowclosed' },
+        ]
+        const wrapper = mount(EdgeMarkerDefs, {
+            propsData: { conns },
+        })
+        const markers = wrapper.findAll('marker')
+        expect(markers.length).toBe(1)
+    })
+
+    test('renders no markers when conns have none', () => {
+        const conns = [
+            { id: 'e1', source: '1', target: '2' },
+        ]
+        const wrapper = mount(EdgeMarkerDefs, {
+            propsData: { conns },
+        })
+        const markers = wrapper.findAll('marker')
+        expect(markers.length).toBe(0)
+    })
+})

package/test/unit-components-node.test.mjs

@@ -154,16 +154,38 @@ describe('NodeWrapper', () => {
         expect(wrapper.emitted('node-click')[0][0].node.id).toBe('1')
     })
 
-    test('emits drag-start on mousedown when draggable', () => {
+    //拖曳延後至跨越2px位移門檻才啟動: mousedown當下只發drag-prepare(供宿主先行選取),
+    //drag-start要有實際位移才發, 否則純點擊會走完endDrag→emit update:nodes而使宿主誤判有未儲存變更
+    test('emits drag-prepare (not drag-start) on mousedown when draggable', () => {
         const wrapper = mount(NodeWrapper, { propsData: { node, draggable: true } })
-        wrapper.trigger('mousedown')
-        expect(wrapper.emitted('drag-start')).toBeTruthy()
+        wrapper.trigger('mousedown', { clientX: 0, clientY: 0, button: 0 })
+        expect(wrapper.emitted('drag-prepare')).toBeTruthy()
+        expect(wrapper.emitted('drag-start')).toBeFalsy()
+        wrapper.destroy()
+    })
+
+    test('emits drag-start once movement crosses the threshold', async () => {
+        const wrapper = mount(NodeWrapper, { propsData: { node, draggable: true } })
+        wrapper.trigger('mousedown', { clientX: 0, clientY: 0, button: 0 })
+        document.dispatchEvent(new MouseEvent('mousemove', { clientX: 20, clientY: 0, buttons: 1 }))
+        await wrapper.vm.$nextTick()
+        expect(wrapper.emitted('drag-start')).toHaveLength(1)
+        wrapper.destroy()
     })
 
-    test('does not emit drag-start when not draggable', () => {
+    test('does not emit drag-prepare or drag-start when not draggable', () => {
         const wrapper = mount(NodeWrapper, { propsData: { node, draggable: false } })
-        wrapper.trigger('mousedown')
+        wrapper.trigger('mousedown', { clientX: 0, clientY: 0, button: 0 })
+        expect(wrapper.emitted('drag-prepare')).toBeFalsy()
         expect(wrapper.emitted('drag-start')).toBeFalsy()
+        wrapper.destroy()
+    })
+
+    test('does not emit drag-prepare on non-primary button', () => {
+        const wrapper = mount(NodeWrapper, { propsData: { node, draggable: true } })
+        wrapper.trigger('mousedown', { clientX: 0, clientY: 0, button: 2 })
+        expect(wrapper.emitted('drag-prepare')).toBeFalsy()
+        wrapper.destroy()
     })
 
     test('applies zIndex from node', () => {