refactor(tests): rename e2e to tests

Signed-off-by: braks <78412429+bcakmakoglu@users.noreply.github.com>

tests/cypress/component/1-store/edges/addEdges.cy.ts

@@ -0,0 +1,30 @@
+import { useVueFlow } from '@vue-flow/core'
+import { getElements } from '../../../utils'
+
+const { nodes, edges } = getElements()
+
+const edgesFirstHalf = edges.slice(0, Math.floor(edges.length / 2))
+const edgesSecondHalf = edges.slice(Math.floor(edges.length / 2))
+
+describe('Store Action: `addEdges`', () => {
+  const store = useVueFlow({ id: 'test' })
+
+  beforeEach(() => {
+    cy.vueFlow({
+      nodes,
+      edges: edgesFirstHalf,
+    })
+  })
+
+  beforeEach(() => {
+    store.addEdges(edgesSecondHalf)
+  })
+
+  it('adds edges to store', () => {
+    expect(store.edges.value).to.have.length(edges.length)
+  })
+
+  it('adds edges to viewpane', () => {
+    cy.get('.vue-flow__edge').should('have.length', edges.length)
+  })
+})

tests/cypress/component/1-store/edges/addSelectedEdges.cy.ts

@@ -0,0 +1,44 @@
+import { isEdge, useVueFlow } from '@vue-flow/core'
+import { getElements } from '../../../utils'
+
+const { nodes, edges } = getElements()
+
+describe('Store Action: `addSelectedEdges`', () => {
+  const store = useVueFlow({ id: 'test' })
+  let randomNumber: number
+
+  beforeEach(() => {
+    cy.vueFlow({
+      nodes,
+      edges,
+    })
+  })
+
+  beforeEach(() => {
+    randomNumber = Math.floor(Math.random() * edges.length)
+    store.addSelectedEdges(Array.from({ length: randomNumber }, (_, i) => store.edges.value[i]))
+  })
+
+  it('adds selected edges to store', () => {
+    cy.tryAssertion(() => expect(store.getSelectedEdges.value).to.have.length(randomNumber))
+  })
+
+  it('adds `selected` class to edges', () => {
+    cy.get('.vue-flow__edge').then((els) => {
+      els.each((index, edge) => {
+        const edgeId = edge.getAttribute('data-id')
+        const storedEdge = store.findEdge(edgeId!)
+
+        expect(storedEdge && isEdge(storedEdge)).to.eq(true)
+
+        if (index < randomNumber) {
+          expect(!!storedEdge?.selected).to.eq(true)
+          cy.tryAssertion(() => expect(edge).to.have.class('selected'))
+        } else {
+          expect(!!storedEdge?.selected).to.eq(false)
+          cy.tryAssertion(() => expect(edge).to.not.have.class('selected'))
+        }
+      })
+    })
+  })
+})

tests/cypress/component/1-store/edges/connection.cy.ts

@@ -0,0 +1,51 @@
+import type { StartHandle } from '@vue-flow/core'
+import { useVueFlow } from '@vue-flow/core'
+import { getElements } from '../../../utils'
+
+const { nodes, edges } = getElements(2, 2)
+
+describe('Store Action: `startConnection`, `updateConnection`, `endConnection`', () => {
+  const store = useVueFlow({ id: 'test' })
+  const startHandle: StartHandle = { nodeId: nodes[0].id, type: 'source', handleId: null }
+
+  beforeEach(() => {
+    cy.vueFlow({
+      nodes,
+      edges,
+    })
+  })
+
+  it('starts connection', () => {
+    store.startConnection(startHandle, { x: 0, y: 0 })
+
+    const storedStartHandle = store.connectionStartHandle.value
+    expect(storedStartHandle?.handleId).to.equal(startHandle.handleId)
+    expect(storedStartHandle?.nodeId).to.equal(startHandle.nodeId)
+    expect(storedStartHandle?.type).to.equal(startHandle.type)
+    expect(store.connectionPosition.value).to.deep.equal({ x: 0, y: 0 })
+  })
+
+  it('updates connection', () => {
+    store.startConnection(startHandle, { x: 0, y: 0 })
+    store.updateConnection({ x: 100, y: 100 })
+
+    expect(store.connectionPosition.value).to.deep.equal({ x: 100, y: 100 })
+  })
+
+  it('shows connection line on viewpane', () => {
+    store.startConnection(startHandle, { x: 0, y: 0 })
+    store.updateConnection({ x: 100, y: 100 })
+
+    cy.viewPort().find('.vue-flow__connection').should('exist')
+  })
+
+  it('ends/cancels connection', () => {
+    store.startConnection(startHandle, { x: 0, y: 0 })
+    store.updateConnection({ x: 100, y: 100 })
+    store.endConnection()
+
+    expect(store.connectionStartHandle.value).to.equal(null)
+    expect(store.connectionPosition.value).to.deep.equal({ x: NaN, y: NaN })
+    cy.viewPort().find('.vue-flow__connection').should('not.exist')
+  })
+})

tests/cypress/component/1-store/edges/defaultEdgeOptions.cy.ts

@@ -0,0 +1,51 @@
+import type { DefaultEdgeOptions } from '@vue-flow/core'
+import { useVueFlow } from '@vue-flow/core'
+import { getElements } from '../../../utils'
+
+const { nodes, edges } = getElements(2, 2)
+
+const defaultEdgeOptions: DefaultEdgeOptions = {
+  class: 'custom-class',
+  type: 'custom-type',
+}
+
+describe('Default Edge Options', () => {
+  const store = useVueFlow({ id: 'test' })
+
+  beforeEach(() => {
+    cy.vueFlow({
+      nodes,
+      edges: [
+        {
+          id: 'customEdge',
+          source: nodes[0].id,
+          target: nodes[1].id,
+          type: 'custom',
+        },
+        ...edges,
+      ],
+      defaultEdgeOptions,
+    })
+  })
+
+  it('sets default edge options', () => {
+    store.edges.value.forEach((edge) => {
+      expect(edge.class).to.equal(defaultEdgeOptions.class)
+    })
+
+    cy.get('.vue-flow__edge').should('have.class', defaultEdgeOptions.class)
+  })
+
+  it('does not override edge values with defaults', () => {
+    store.edges.value.forEach((edge) => {
+      if (edge.id === 'customEdge') {
+        return expect(edge.type).to.equal('custom')
+      }
+
+      expect(edge.type).to.equal(defaultEdgeOptions.type)
+    })
+
+    // uses fallback default slot
+    cy.get('.vue-flow__edge').should('have.class', 'vue-flow__edge-default')
+  })
+})

tests/cypress/component/1-store/edges/findEdge.cy.ts

@@ -0,0 +1,29 @@
+import { useVueFlow } from '@vue-flow/core'
+import { getElements } from '../../../utils'
+
+const { nodes, edges } = getElements()
+
+describe('Store Action: `findEdge`', () => {
+  const store = useVueFlow({ id: 'test' })
+  let randomIndex: number
+
+  beforeEach(() => {
+    cy.vueFlow({
+      nodes,
+      edges,
+    })
+  })
+
+  beforeEach(() => {
+    randomIndex = Math.floor(Math.random() * edges.length)
+  })
+
+  it('finds edge in store', () => {
+    const storedEdge = store.findEdge(edges[randomIndex].id)
+    expect(storedEdge?.id).to.equal(edges[randomIndex].id)
+  })
+
+  it('does not find edge in store when passed invalid id', () => {
+    expect(store.findEdge('-123')).to.equal(undefined)
+  })
+})

tests/cypress/component/1-store/edges/removeEdges.cy.ts

@@ -0,0 +1,29 @@
+import { useVueFlow } from '@vue-flow/core'
+import { getElements } from '../../../utils'
+
+const { nodes, edges } = getElements()
+
+describe('Store Action: `removeEdges`', () => {
+  const store = useVueFlow({ id: 'test' })
+  let randomNumber: number
+
+  beforeEach(() => {
+    cy.vueFlow({
+      nodes,
+      edges,
+    })
+  })
+
+  beforeEach(() => {
+    randomNumber = Math.floor(Math.random() * edges.length)
+    store.removeEdges(Array.from({ length: randomNumber }, (_, i) => edges[i].id))
+  })
+
+  it('removes edges from store', () => {
+    expect(store.edges.value).to.have.length(edges.length - randomNumber)
+  })
+
+  it('removes edges from viewpane', () => {
+    cy.get('.vue-flow__edge').should('have.length', edges.length - randomNumber)
+  })
+})

tests/cypress/component/1-store/edges/removeSelectedEdges.cy.ts

@@ -0,0 +1,51 @@
+import { isEdge, useVueFlow } from '@vue-flow/core'
+import { getElements } from '../../../utils'
+
+const { nodes, edges } = getElements()
+
+describe('Store Action: `removeSelectedEdges`', () => {
+  const store = useVueFlow({ id: 'test' })
+  let randomNumber: number
+  let randomNumber2: number
+
+  beforeEach(() => {
+    cy.vueFlow({
+      nodes,
+      edges,
+    })
+  })
+
+  beforeEach(() => {
+    randomNumber = Math.floor(Math.random() * edges.length)
+    randomNumber2 = Math.floor(Math.random() * randomNumber)
+    store.addSelectedEdges(Array.from({ length: randomNumber }, (_, i) => store.edges.value[i]))
+    store.removeSelectedEdges(Array.from({ length: randomNumber2 }, (_, i) => store.edges.value[i]))
+  })
+
+  it('removes selected edges from store', () => {
+    expect(store.getSelectedEdges.value).to.have.length(randomNumber - randomNumber2)
+  })
+
+  it('removes `selected` class from edges', () => {
+    cy.get('.vue-flow__edge').then((els) => {
+      els.each((index, edge) => {
+        const edgeId = edge.getAttribute('data-id')
+        const storedEdge = store.findEdge(edgeId!)
+
+        expect(storedEdge && isEdge(storedEdge)).to.eq(true)
+
+        if (index >= randomNumber2 && index < randomNumber) {
+          expect(!!storedEdge?.selected).to.eq(true)
+          cy.tryAssertion(() => {
+            expect(edge).to.have.class('selected')
+          })
+        } else {
+          expect(!!storedEdge?.selected).to.eq(false)
+          cy.tryAssertion(() => {
+            expect(edge).to.not.have.class('selected')
+          })
+        }
+      })
+    })
+  })
+})

tests/cypress/component/1-store/edges/updateEdge.cy.ts

@@ -0,0 +1,34 @@
+import { useVueFlow } from '@vue-flow/core'
+import { getElements } from '../../../utils'
+
+const { nodes, edges } = getElements(2, 2)
+
+describe('Store Action: `updateEdge`', () => {
+  const store = useVueFlow({ id: 'test' })
+  let randomIndex: number
+
+  beforeEach(() => {
+    cy.vueFlow({
+      nodes,
+      edges,
+    })
+  })
+
+  beforeEach(() => {
+    randomIndex = Math.floor(Math.random() * edges.length)
+  })
+
+  it('updates edge', () => {
+    store.updateEdge(store.edges.value[randomIndex], {
+      sourceHandle: null,
+      targetHandle: null,
+      source: nodes[0].id,
+      target: nodes[1].id,
+    })
+
+    const storedEdge = store.edges.value[randomIndex]
+
+    expect(storedEdge.source).to.equal(nodes[0].id)
+    expect(storedEdge.target).to.equal(nodes[1].id)
+  })
+})

tests/cypress/component/1-store/elements/addSelectedElements.cy.ts

@@ -0,0 +1,25 @@
+import { useVueFlow } from '@vue-flow/core'
+import { getElements } from '../../../utils'
+
+const { nodes, edges } = getElements()
+
+describe('Store Action: `addSelectedElements`', () => {
+  const store = useVueFlow({ id: 'test' })
+  let randomNumber: number
+
+  beforeEach(() => {
+    cy.vueFlow({
+      nodes,
+      edges,
+    })
+  })
+
+  beforeEach(() => {
+    randomNumber = Math.floor(Math.random() * [...nodes, ...edges].length)
+    store.addSelectedElements(Array.from({ length: randomNumber }, (_, i) => store.getElements.value[i]))
+  })
+
+  it('adds selected elements to store', () => {
+    expect(store.getSelectedElements.value).to.have.length(randomNumber)
+  })
+})

tests/cypress/component/1-store/elements/removeSelectedElements.cy.ts

@@ -0,0 +1,49 @@
+import type { Elements } from '@vue-flow/core'
+import { isNode, useVueFlow } from '@vue-flow/core'
+import { getElements } from '../../../utils'
+
+const { nodes, edges } = getElements()
+
+describe('Store Action: `removeSelectedElements`', () => {
+  const store = useVueFlow({ id: 'test' })
+  let randomNumber: number
+  let randomNumber2: number
+
+  beforeEach(() => {
+    cy.vueFlow({
+      nodes,
+      edges,
+    })
+  })
+
+  it('removes passed elements from selected elements in store', async () => {
+    randomNumber = Math.floor(Math.random() * [...nodes, ...edges].length)
+    randomNumber2 = Math.floor(Math.random() * randomNumber)
+    store.addSelectedElements(Array.from({ length: randomNumber }, (_, i) => store.getElements.value[i]))
+    store.removeSelectedElements(
+      Array.from({ length: randomNumber2 }, (_, i) => store.getElements.value[i]).reduce((acc, curr) => {
+        if (isNode(curr)) {
+          acc.push(curr)
+        } else {
+          acc.push(curr)
+        }
+
+        return acc
+      }, [] as Elements),
+    )
+
+    await cy.tryAssertion(() => {
+      expect(store.getSelectedElements.value).to.have.length(randomNumber - randomNumber2)
+    })
+  })
+
+  it('resets all selected elements in store when no argument is passed', () => {
+    randomNumber = Math.floor(Math.random() * [...nodes, ...edges].length)
+    store.addSelectedElements(Array.from({ length: randomNumber }, (_, i) => store.getElements.value[i]))
+    store.removeSelectedElements()
+
+    cy.tryAssertion(() => {
+      expect(store.getSelectedElements.value).to.have.length(0)
+    })
+  })
+})

tests/cypress/component/1-store/elements/setElements.cy.ts

@@ -0,0 +1,102 @@
+import { defaultEdgeTypes, defaultNodeTypes, isEdge, isNode, useVueFlow } from '@vue-flow/core'
+import { getElements } from '../../../utils'
+
+const { nodes, edges } = getElements()
+
+describe('Store Action: `setElements`', () => {
+  const store = useVueFlow()
+
+  it('sets elements', () => {
+    store.setElements([...nodes, ...edges])
+
+    expect(store.nodes.value).to.have.length(nodes.length)
+    expect(store.edges.value).to.have.length(edges.length)
+  })
+
+  it('parses elements to flow-elements', () => {
+    store.getEdges.value.forEach((edge) => expect(isEdge(edge)).to.be.true)
+    store.getNodes.value.forEach((node) => expect(isNode(node)).to.be.true)
+  })
+
+  it('has correct element ids', () => {
+    const nodeIds = nodes.map((node) => node.id)
+    const edgeIds = edges.map((edge) => edge.id)
+
+    store.nodes.value.forEach((el) => expect(nodeIds).to.include(el.id))
+    store.edges.value.forEach((el) => expect(edgeIds).to.include(el.id))
+  })
+
+  it('has correct element types', () => {
+    const nodeTypes = nodes.reduce((types, node) => {
+      if (node.type && !types.includes(node.type)) types.push(node.type)
+      return types
+    }, Object.keys(defaultNodeTypes))
+
+    store.nodes.value.forEach((el) => expect(nodeTypes).to.include(el.type))
+
+    const edgeTypes = edges.reduce((types, edge) => {
+      if (edge.type && !types.includes(edge.type)) types.push(edge.type)
+      return types
+    }, Object.keys(defaultEdgeTypes))
+
+    store.edges.value.forEach((el) => expect(edgeTypes).to.include(el.type))
+  })
+
+  describe('test node properties', () => {
+    it('has correct label', () => {
+      store.getNodes.value.forEach((el) => {
+        const node = nodes.find((node) => node.id === el.id)
+        expect(el.label).to.eq(node?.label)
+      })
+    })
+
+    it('has correct position', () => {
+      store.getNodes.value.forEach((el) => {
+        const node = nodes.find((node) => node.id === el.id)
+        expect(JSON.stringify(el.position)).to.eq(JSON.stringify(node?.position || {}))
+      })
+    })
+
+    it('has correct random data', () => {
+      store.getNodes.value.forEach((el) => {
+        const node = nodes.find((node) => node.id === el.id)
+        expect(el.data.randomData).to.eq(node?.data.randomData)
+      })
+    })
+  })
+
+  describe('test edge properties', () => {
+    it('has correct target and source', () => {
+      store.getEdges.value.forEach((el) => {
+        const edge = edges.find((edge) => edge.id === el.id)
+
+        expect(el.source).to.eq(edge?.source)
+        expect(el.target).to.eq(edge?.target)
+      })
+    })
+
+    it('has correct target-node and source-node', () => {
+      store.getEdges.value.forEach((el) => {
+        const edge = edges.find((edge) => edge.id === el.id)
+
+        expect(el.sourceNode.id).to.eq(edge?.source)
+        expect(el.targetNode.id).to.eq(edge?.target)
+      })
+    })
+
+    it('has correct random data', () => {
+      store.getEdges.value.forEach((el) => {
+        const edge = edges.find((edge) => edge.id === el.id)
+        expect(el.data.randomData).to.eq(edge?.data.randomData)
+      })
+    })
+
+    it('is animated', () => {
+      store.getEdges.value.forEach((el) => {
+        const edge = edges.find((edge) => edge.id === el.id)
+
+        expect(el.animated).to.eq(edge?.animated)
+      })
+    })
+  })
+})

tests/cypress/component/1-store/nodes/addNodes.cy.ts

@@ -0,0 +1,28 @@
+import { useVueFlow } from '@vue-flow/core'
+import { getElements } from '../../../utils'
+
+const { nodes } = getElements()
+
+const initialNodes = [{ id: '1e3', position: { x: 0, y: 0 }, label: 'Node 1e3' }]
+
+describe('Store Action: `addNodes`', () => {
+  const store = useVueFlow({ id: 'test' })
+
+  beforeEach(() => {
+    cy.vueFlow({
+      nodes: initialNodes,
+    })
+  })
+
+  beforeEach(() => {
+    store.addNodes(nodes)
+  })
+
+  it('adds nodes to store', () => {
+    expect(store.nodes.value).to.have.length(nodes.length + initialNodes.length)
+  })
+
+  it('adds nodes to viewpane', () => {
+    cy.get('.vue-flow__node').should('have.length', nodes.length + initialNodes.length)
+  })
+})

tests/cypress/component/1-store/nodes/addSelectedNodes.cy.ts

@@ -0,0 +1,48 @@
+import { isNode, useVueFlow } from '@vue-flow/core'
+import { getElements } from '../../../utils'
+
+const { nodes, edges } = getElements()
+
+describe('Store Action: `addSelectedNodes`', () => {
+  const store = useVueFlow({ id: 'test' })
+  let randomNumber: number
+
+  beforeEach(() => {
+    cy.vueFlow({
+      nodes,
+      edges,
+    })
+  })
+
+  beforeEach(() => {
+    randomNumber = Math.floor(Math.random() * nodes.length)
+    store.addSelectedNodes(Array.from({ length: randomNumber }, (_, i) => store.nodes.value[i]))
+  })
+
+  it('adds selected nodes to store', () => {
+    expect(store.getSelectedNodes.value).to.have.length(randomNumber)
+  })
+
+  it('adds `selected` class to nodes', () => {
+    cy.get('.vue-flow__node').then((els) => {
+      els.each((index, node) => {
+        const nodeId = node.getAttribute('data-id')
+        const storedNode = store.findNode(nodeId!)
+
+        expect(storedNode && isNode(storedNode)).to.eq(true)
+
+        if (index < randomNumber) {
+          expect(!!storedNode?.selected).to.eq(true)
+          cy.tryAssertion(() => {
+            expect(node).to.have.class('selected')
+          })
+        } else {
+          expect(!!storedNode?.selected).to.eq(false)
+          cy.tryAssertion(() => {
+            expect(node).to.not.have.class('selected')
+          })
+        }
+      })
+    })
+  })
+})

tests/cypress/component/1-store/nodes/findNode.cy.ts

@@ -0,0 +1,29 @@
+import { useVueFlow } from '@vue-flow/core'
+import { getElements } from '../../../utils'
+
+const { nodes, edges } = getElements()
+
+describe('Store Action: `findNode`', () => {
+  const store = useVueFlow({ id: 'test' })
+  let randomIndex: number
+
+  beforeEach(() => {
+    cy.vueFlow({
+      nodes,
+      edges,
+    })
+  })
+
+  beforeEach(() => {
+    randomIndex = Math.floor(Math.random() * nodes.length)
+  })
+
+  it('finds node in store', () => {
+    const storedNode = store.findNode(nodes[randomIndex].id)
+    expect(storedNode?.id).to.equal(nodes[randomIndex].id)
+  })
+
+  it('does not find node in store when passed invalid id', () => {
+    expect(store.findNode('-123')).to.equal(undefined)
+  })
+})

tests/cypress/component/1-store/nodes/removeNodes.cy.ts

@@ -0,0 +1,32 @@
+import { useVueFlow } from '@vue-flow/core'
+import { getElements } from '../../../utils'
+
+const { nodes, edges } = getElements()
+
+describe('Store Action: `removeNodes`', () => {
+  const store = useVueFlow({ id: 'test' })
+  let randomNumber: number
+
+  beforeEach(() => {
+    cy.vueFlow({
+      nodes,
+      edges,
+    })
+  })
+
+  beforeEach(() => {
+    randomNumber = Math.floor(Math.random() * nodes.length)
+    store.removeNodes(Array.from({ length: randomNumber }, (_, i) => nodes[i].id))
+  })
+
+  it('removes nodes from store', () => {
+    expect(store.nodes.value).to.have.length(nodes.length - randomNumber)
+  })
+
+  it('removes nodes from viewpane', () => {
+    cy.get('.vue-flow__node').should('have.length', nodes.length - randomNumber)
+    cy.get('.vue-flow__node').each(($el, index) => {
+      expect($el).to.have.attr('data-id', nodes[index + randomNumber].id)
+    })
+  })
+})

tests/cypress/component/1-store/nodes/removeSelectedNodes.cy.ts

@@ -0,0 +1,51 @@
+import { isNode, useVueFlow } from '@vue-flow/core'
+import { getElements } from '../../../utils'
+
+const { nodes, edges } = getElements()
+
+describe('Store Action: `removeSelectedNodes`', () => {
+  const store = useVueFlow({ id: 'test' })
+  let randomNumber: number
+  let randomNumber2: number
+
+  beforeEach(() => {
+    cy.vueFlow({
+      nodes,
+      edges,
+    })
+  })
+
+  beforeEach(() => {
+    randomNumber = Math.floor(Math.random() * nodes.length)
+    randomNumber2 = Math.floor(Math.random() * randomNumber)
+    store.addSelectedNodes(Array.from({ length: randomNumber }, (_, i) => store.nodes.value[i]))
+    store.removeSelectedNodes(Array.from({ length: randomNumber2 }, (_, i) => store.nodes.value[i]))
+  })
+
+  it('removes selected nodes from store', () => {
+    expect(store.getSelectedNodes.value).to.have.length(randomNumber - randomNumber2)
+  })
+
+  it('removes `selected` class from nodes', () => {
+    cy.get('.vue-flow__node').then((els) => {
+      els.each((index, node) => {
+        const nodeId = node.getAttribute('data-id')
+        const storedNode = store.findNode(nodeId!)
+
+        expect(storedNode && isNode(storedNode)).to.eq(true)
+
+        if (index >= randomNumber2 && index < randomNumber) {
+          expect(!!storedNode?.selected).to.eq(true)
+          cy.tryAssertion(() => {
+            expect(node).to.have.class('selected')
+          })
+        } else {
+          expect(!!storedNode?.selected).to.eq(false)
+          cy.tryAssertion(() => {
+            expect(node).to.not.have.class('selected')
+          })
+        }
+      })
+    })
+  })
+})

tests/cypress/component/1-store/setState.cy.ts

@@ -0,0 +1,81 @@
+import { isRef } from 'vue'
+import type { State } from '@vue-flow/core'
+import { useVueFlow } from '@vue-flow/core'
+
+describe('Store Action: `setState`', () => {
+  let store = useVueFlow()
+
+  const initial = useVueFlow({ id: 'initial' })
+
+  beforeEach(() => (store = useVueFlow()))
+
+  it('has any initial state', () => expect(store).to.exist)
+
+  it('has default initial state', () => {
+    Object.keys(store).forEach((state) => {
+      const storedState = store[<keyof State>state]?.value
+      const initialVal = initial[<keyof State>state]?.value
+
+      if (state === 'initialized') return expect(storedState).to.be.true
+
+      if (state === 'getEdgeTypes' || state === 'getNodeTypes' || state === 'nodeTypes' || state === 'edgeTypes') return
+
+      if (Array.isArray(initialVal)) return expect((storedState as any[]).length).to.eq(initialVal.length)
+
+      if (!(initialVal instanceof Function) && !isRef(initialVal)) {
+        return expect(JSON.stringify(storedState)).to.eq(JSON.stringify(initialVal))
+      }
+    })
+  })
+
+  it('sets state', () => {
+    store.setState({
+      zoomOnScroll: false,
+    })
+    expect(store.zoomOnScroll.value).to.eq(false)
+  })
+
+  it('takes initial options', () => {
+    store = useVueFlow({
+      zoomOnScroll: false,
+    })
+    expect(store.zoomOnScroll.value).to.eq(false)
+  })
+
+  it('gets custom node types', () => {
+    store.setState({
+      nodes: [
+        {
+          id: '1',
+          position: { x: 0, y: 0 },
+          type: 'custom',
+        },
+      ],
+    })
+    expect(Object.keys(store.getNodeTypes.value)).to.contain('custom')
+  })
+
+  it('gets custom edge types', () => {
+    store.setState({
+      nodes: [
+        {
+          id: '1',
+          position: { x: 0, y: 0 },
+        },
+        {
+          id: '2',
+          position: { x: 50, y: 50 },
+        },
+      ],
+      edges: [
+        {
+          id: '1',
+          source: '1',
+          target: '2',
+          type: 'custom',
+        },
+      ],
+    })
+    expect(Object.keys(store.getEdgeTypes.value)).to.contain('custom')
+  })
+})

tests/cypress/component/1-store/viewpane/deleteKeyCode.cy.ts

@@ -0,0 +1,42 @@
+import { useVueFlow } from '@vue-flow/core'
+import { getElements } from '../../../utils'
+
+const { nodes, edges } = getElements()
+
+describe('Store State: `deleteKeyCode`', () => {
+  const store = useVueFlow({ id: 'test' })
+
+  beforeEach(() => {
+    cy.vueFlow({
+      nodes,
+      edges,
+    })
+  })
+
+  it('deletes node', () => {
+    cy.window().then(() => {
+      cy.get(`[data-id="${nodes[0].id}"]`).click()
+
+      cy.get('body').trigger('keydown', { key: 'Backspace' })
+
+      cy.tryAssertion(() => {
+        cy.get(`[data-id="${nodes[0].id}"]`).should('not.exist')
+        expect(store.nodes.value.some((node) => node.id === nodes[0].id)).to.equal(false)
+      })
+    })
+  })
+
+  it('changes key code', () => {
+    store.deleteKeyCode.value = 'Delete'
+    cy.window().then(() => {
+      cy.get(`[data-id="${nodes[0].id}"]`).click()
+
+      cy.get('body').trigger('keydown', { key: 'Delete' })
+
+      cy.tryAssertion(() => {
+        cy.get(`[data-id="${nodes[0].id}"]`).should('not.exist')
+        expect(store.nodes.value.some((node) => node.id === nodes[0].id)).to.equal(false)
+      })
+    })
+  })
+})

tests/cypress/component/1-store/viewpane/selectionKeyCode.cy.ts

@@ -0,0 +1,92 @@
+import { useVueFlow } from '@vue-flow/core'
+import { getElements } from '../../../utils'
+
+const { nodes, edges } = getElements()
+
+describe('Store State: `selectionKeyCode`', () => {
+  const store = useVueFlow({ id: 'test' })
+
+  beforeEach(() => {
+    cy.vueFlow({
+      nodes,
+      edges,
+    })
+  })
+
+  it('triggers selection', () => {
+    cy.window().then((win) => {
+      cy.get('body').trigger('keydown', { key: 'Shift', release: false })
+
+      cy.get('.vue-flow__pane')
+        .should('exist')
+        .trigger('mousedown', {
+          which: 1,
+          force: true,
+          view: win,
+        })
+        .trigger('mousemove', {
+          clientX: 100,
+          clientY: 100,
+          force: true,
+        })
+        .click()
+
+      cy.get('body').trigger('keyup', { key: 'Shift', release: true })
+
+      cy.tryAssertion(() => {
+        expect(store.getSelectedElements.value).to.not.have.length(0)
+      })
+    })
+  })
+
+  it('changes keycode', () => {
+    cy.window().then((win) => {
+      store.selectionKeyCode.value = 'Control'
+      cy.get('body').trigger('keydown', { key: 'Control', release: false })
+
+      cy.get('.vue-flow__pane')
+        .should('exist')
+        .trigger('mousedown', {
+          which: 1,
+          force: true,
+          view: win,
+        })
+        .trigger('mousemove', {
+          clientX: 100,
+          clientY: 100,
+          force: true,
+        })
+        .click()
+
+      cy.get('body').trigger('keyup', { key: 'Control', release: true })
+
+      cy.tryAssertion(() => {
+        expect(store.getSelectedElements.value).to.not.have.length(0)
+      })
+    })
+  })
+
+  it('allows `true` as keycode', () => {
+    cy.window().then((win) => {
+      store.selectionKeyCode.value = true
+
+      cy.get('.vue-flow__pane')
+        .should('exist')
+        .trigger('mousedown', {
+          which: 1,
+          force: true,
+          view: win,
+        })
+        .trigger('mousemove', {
+          clientX: 100,
+          clientY: 100,
+          force: true,
+        })
+        .click()
+
+      cy.tryAssertion(() => {
+        expect(store.getSelectedElements.value).to.not.have.length(0)
+      })
+    })
+  })
+})

tests/cypress/component/1-store/viewpane/setMaxZoom.cy.ts

@@ -0,0 +1,40 @@
+import { useVueFlow } from '@vue-flow/core'
+import { getElements } from '../../../utils'
+
+const { nodes } = getElements()
+
+describe('Store Action: `setMaxZoom`', () => {
+  const store = useVueFlow({ id: 'test' })
+
+  beforeEach(() => {
+    cy.vueFlow({
+      nodes,
+    })
+  })
+
+  beforeEach(() => {
+    store.setMaxZoom(2)
+  })
+
+  it('sets max-zoom in store', () => {
+    expect(store.maxZoom.value).to.eq(2)
+  })
+
+  it('sets max-zoom in viewpane', async () => {
+    cy.viewPort().trigger('wheel', {
+      deltaY: -10000,
+      wheelDelta: 0,
+      wheelDeltaX: 0,
+      wheelDeltaY: 0,
+      bubbles: true,
+    })
+
+    await cy.tryAssertion(() => {
+      cy.transformationPane().should(
+        'have.css',
+        'transform',
+        `matrix(${store.viewport.value.zoom}, 0, 0, ${store.viewport.value.zoom}, ${store.viewport.value.x}, ${store.viewport.value.y})`,
+      )
+    })
+  })
+})

tests/cypress/component/1-store/viewpane/setMinZoom.cy.ts

@@ -0,0 +1,38 @@
+import { useVueFlow } from '@vue-flow/core'
+import { getElements } from '../../../utils'
+
+const { nodes } = getElements()
+
+describe('Store Action: `setMinZoom`', () => {
+  const store = useVueFlow({ id: 'test' })
+
+  beforeEach(() => {
+    cy.vueFlow({
+      nodes,
+    })
+  })
+
+  beforeEach(() => {
+    store.setMinZoom(0.5)
+  })
+
+  it('sets min-zoom in store', () => {
+    expect(store.minZoom.value).to.eq(0.5)
+  })
+
+  it('sets min-zoom in viewpane', () => {
+    cy.viewPort().trigger('wheel', {
+      deltaY: 10000,
+      wheelDelta: 0,
+      wheelDeltaX: 0,
+      wheelDeltaY: 0,
+      bubbles: true,
+    })
+
+    cy.transformationPane().should(
+      'have.css',
+      'transform',
+      `matrix(${store.viewport.value.zoom}, 0, 0, ${store.viewport.value.zoom}, ${store.viewport.value.x}, ${store.viewport.value.y})`,
+    )
+  })
+})

tests/cypress/component/2-vue-flow/basic.cy.ts

@@ -0,0 +1,32 @@
+import { getElements } from '../../utils'
+
+const { nodes, edges } = getElements()
+
+describe('Render Basic Example', () => {
+  beforeEach(() => {
+    cy.vueFlow({
+      modelValue: [...nodes, ...edges],
+    })
+  })
+
+  it('renders a Vue Flow container', () => {
+    cy.get('.vue-flow').should('exist')
+  })
+
+  it('renders nodes', () => {
+    cy.get('.vue-flow__node').should('have.length', nodes.length)
+  })
+
+  it('renders edges', () => cy.get('.vue-flow__edge').should('have.length', edges.length))
+
+  it('renders correct node labels', () =>
+    cy.get('.vue-flow__node').each((node) => expect(nodes.some((el) => el.label === node.text())).to.be.true))
+
+  it('renders nodes at correct position', () =>
+    cy
+      .get('.vue-flow__node')
+      .each(
+        (node) =>
+          expect(nodes.some((el) => el.position.x === node.position().left && el.position.y === node.position().top)).to.be.true,
+      ))
+})

tests/cypress/component/2-vue-flow/connect.cy.ts

@@ -0,0 +1,68 @@
+import { useVueFlow } from '@vue-flow/core'
+
+describe('Check if nodes are connectable', () => {
+  const store = useVueFlow({ id: 'test' })
+
+  beforeEach(() => {
+    cy.vueFlow({
+      fitViewOnInit: false,
+      modelValue: [
+        {
+          id: '1',
+          label: 'Node 1',
+          position: { x: 0, y: 0 },
+        },
+        {
+          id: '2',
+          label: 'Node 2',
+          position: { x: 300, y: 300 },
+        },
+      ],
+      autoConnect: true,
+    })
+  })
+
+  it('creates connection by dragging', () => {
+    cy.window().then((win) => {
+      const sourceHandle = cy.get(`[data-nodeid="1"].source`)
+      const targetHandle = cy.get(`[data-nodeid="2"].target`)
+
+      targetHandle.then((handle) => {
+        const target = handle[0]
+        const { x, y } = target.getBoundingClientRect()
+
+        sourceHandle
+          .trigger('mousedown', {
+            button: 0,
+            force: true,
+            view: win,
+          })
+          .trigger('mousemove', {
+            clientX: x + 5,
+            clientY: y + 5,
+            force: true,
+          })
+          .trigger('mouseup', {
+            clientX: x + 5,
+            clientY: y + 5,
+            force: true,
+            view: win,
+          })
+
+        cy.get('.vue-flow__edge').should('have.length', 1)
+      })
+    })
+  })
+
+  it('creates connection by clicking', () => {
+    store.connectOnClick.value = true
+
+    const sourceHandle = cy.get(`[data-nodeid="1"].source`)
+    const targetHandle = cy.get(`[data-nodeid="2"].target`)
+
+    sourceHandle.click()
+    targetHandle.click()
+
+    cy.get('.vue-flow__edge').should('have.length', 1)
+  })
+})

tests/cypress/component/2-vue-flow/drag.cy.ts

@@ -0,0 +1,44 @@
+import { useVueFlow } from '@vue-flow/core'
+import { getElements } from '../../utils'
+
+const { nodes } = getElements(1, 1)
+
+describe('Check if nodes are draggable', () => {
+  const store = useVueFlow({ id: 'test' })
+
+  beforeEach(() => {
+    cy.vueFlow({
+      modelValue: [nodes[0]],
+      fitViewOnInit: false,
+    })
+  })
+
+  it('drags nodes', () => {
+    cy.window().then(async (win) => {
+      cy.get(`[data-id="${nodes[0].id}"]`)
+        .trigger('mousedown', {
+          which: 1,
+          force: true,
+          view: win,
+        })
+        .trigger('mousemove', {
+          clientX: 100,
+          clientY: 100,
+          force: true,
+        })
+        .trigger('mouseup', {
+          force: true,
+          view: win,
+        })
+      await cy.tryAssertion(() => {
+        cy.get(`[data-id="${nodes[0].id}"]`)
+          .should('be.visible')
+          .should(
+            'have.css',
+            'transform',
+            `matrix(1, 0, 0, 1, ${store.nodes.value[0].computedPosition.x}, ${store.nodes.value[0].computedPosition.y})`,
+          )
+      })
+    })
+  })
+})

tests/cypress/component/2-vue-flow/updateEdge.cy.ts

@@ -0,0 +1,73 @@
+import { useVueFlow } from '@vue-flow/core'
+
+describe('Check if edges are updatable', () => {
+  const store = useVueFlow({ id: 'test' })
+  store.onEdgeUpdate((params) => store.updateEdge(params.edge, params.connection))
+
+  beforeEach(() => {
+    cy.vueFlow({
+      fitViewOnInit: false,
+      edgesUpdatable: true,
+      modelValue: [
+        {
+          id: '1',
+          label: 'Node 1',
+          position: { x: 0, y: 0 },
+        },
+        {
+          id: '2',
+          label: 'Node 2',
+          position: { x: 300, y: 300 },
+        },
+        {
+          id: '3',
+          label: 'Node 3',
+          position: { x: 300, y: 0 },
+        },
+        {
+          id: 'e1-2',
+          source: '1',
+          target: '2',
+        },
+      ],
+      autoConnect: true,
+    })
+  })
+
+  it('updates edge', () => {
+    cy.window().then((win) => {
+      const edgeAnchor = cy.get('.vue-flow__edgeupdater[data-type="target"]')
+      const targetTargetHandle = cy.get(`[data-nodeid="3"].target`)
+
+      targetTargetHandle.then(async (handle) => {
+        const target = handle[0]
+        const { x, y } = target.getBoundingClientRect()
+
+        edgeAnchor
+          .trigger('mousedown', {
+            button: 0,
+            force: true,
+            view: win,
+          })
+          .trigger('mousemove', {
+            clientX: x + 5,
+            clientY: y + 5,
+            force: true,
+          })
+          .trigger('mouseup', {
+            clientX: x + 5,
+            clientY: y + 5,
+            force: true,
+            view: win,
+          })
+
+        await cy.tryAssertion(() => {
+          const storedEdges = store.edges.value
+          expect(storedEdges).to.have.length(1)
+          expect(storedEdges[0].target).to.equal('3')
+          expect(storedEdges[0].source).to.equal('1')
+        })
+      })
+    })
+  })
+})

tests/cypress/component/2-vue-flow/viewport.ts

@@ -0,0 +1,38 @@
+import { useVueFlow } from '@vue-flow/core'
+import { getElements } from '../../utils'
+
+const { nodes } = getElements()
+
+describe('Viewport drag / zoom', () => {
+  const store = useVueFlow({ id: 'test' })
+  beforeEach(() => {
+    cy.vueFlow({
+      nodes,
+    })
+  })
+
+  it('drags pane', () => {
+    cy.window().then(async (win) => {
+      cy.get('.vue-flow__pane')
+        .should('be.visible')
+        .trigger('mousedown', 'center', { force: true, view: win })
+        .trigger('mousemove', {
+          force: true,
+          clientX: -(store.dimensions.value.width / 10),
+          clientY: store.dimensions.value.height / 2,
+          view: win,
+        })
+        .trigger('mouseup', { force: true, view: win })
+
+      await cy.tryAssertion(() => {
+        cy.transformationPane()
+          .should('exist')
+          .should(
+            'have.css',
+            'transform',
+            `matrix(${store.viewport.value.zoom}, 0, 0, ${store.viewport.value.zoom}, ${store.viewport.value.x}, ${store.viewport.value.y})`,
+          )
+      })
+    })
+  })
+})

tests/cypress/component/3-additional-components/background/App.vue

@@ -0,0 +1,10 @@
+<script setup>
+import { VueFlow } from '@vue-flow/core'
+import { Background } from '@vue-flow/background'
+</script>
+
+<template>
+  <VueFlow>
+    <Background />
+  </VueFlow>
+</template>

tests/cypress/component/3-additional-components/background/background.cy.ts

@@ -0,0 +1,18 @@
+import App from './App.vue'
+
+describe('Render Background', () => {
+  beforeEach(() => {
+    cy.mount(App, {
+      attrs: {
+        style: {
+          width: '100vw',
+          height: '100vh',
+        },
+      },
+    })
+  })
+
+  it('renders background', () => {
+    cy.get('.vue-flow__background').should('exist')
+  })
+})

tests/cypress/component/3-additional-components/controls/App.vue

@@ -0,0 +1,10 @@
+<script setup>
+import { VueFlow } from '@vue-flow/core'
+import { Controls } from '@vue-flow/controls'
+</script>
+
+<template>
+  <VueFlow>
+    <Controls />
+  </VueFlow>
+</template>

tests/cypress/component/3-additional-components/controls/controls.cy.ts

@@ -0,0 +1,18 @@
+import App from './App.vue'
+
+describe('Render Controls', () => {
+  beforeEach(() => {
+    cy.mount(App, {
+      attrs: {
+        style: {
+          width: '100vw',
+          height: '100vh',
+        },
+      },
+    })
+  })
+
+  it('renders controls', () => {
+    cy.get('.vue-flow__controls').should('exist')
+  })
+})

tests/cypress/component/3-additional-components/minimap/App.vue

@@ -0,0 +1,21 @@
+<script setup>
+import { VueFlow } from '@vue-flow/core'
+import { MiniMap } from '@vue-flow/minimap'
+
+defineProps({
+  nodes: {
+    type: Array,
+    default: () => [],
+  },
+  edges: {
+    type: Array,
+    default: () => [],
+  },
+})
+</script>
+
+<template>
+  <VueFlow :nodes="nodes" :edges="edges">
+    <MiniMap />
+  </VueFlow>
+</template>

tests/cypress/component/3-additional-components/minimap/minimap.cy.ts

@@ -0,0 +1,29 @@
+import { getElements } from '../../../utils'
+import App from './App.vue'
+
+const { nodes, edges } = getElements()
+
+describe('Render MiniMap', () => {
+  beforeEach(() => {
+    cy.mount(App, {
+      props: {
+        nodes,
+        edges,
+      },
+      attrs: {
+        style: {
+          width: '100vw',
+          height: '100vh',
+        },
+      },
+    })
+  })
+
+  it('renders minimap', () => {
+    cy.get('.vue-flow__minimap').should('exist')
+  })
+
+  it('renders minimap nodes', () => {
+    cy.get('.vue-flow__minimap-node').should('have.length', nodes.length)
+  })
+})