refactor(tests): rename e2e to tests

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

tests/.eslintrc.js

@@ -0,0 +1,7 @@
+module.exports = {
+  extends: ['@vue-flow/eslint-config'],
+  plugins: ['chai-friendly'],
+  rules: {
+    'chai-friendly/no-unused-expressions': ['error', { allowShortCircuit: true, allowTernary: true }],
+  },
+}

tests/cypress.config.ts

@@ -0,0 +1,14 @@
+import { defineConfig } from 'cypress'
+
+export default defineConfig({
+  video: false,
+  screenshotOnRunFailure: false,
+  retries: 2,
+  defaultCommandTimeout: 1000,
+  component: {
+    devServer: {
+      framework: 'vue',
+      bundler: 'vite',
+    },
+  },
+})

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)
+  })
+})

tests/cypress/support/commands.js

@@ -0,0 +1,25 @@
+// ***********************************************
+// This example commands.js shows you how to
+// create various custom commands and overwrite
+// existing commands.
+//
+// For more comprehensive examples of custom
+// commands please read more here:
+// https://on.cypress.io/custom-commands
+// ***********************************************
+//
+//
+// -- This is a parent command --
+// Cypress.Commands.add('login', (email, password) => { ... })
+//
+//
+// -- This is a child command --
+// Cypress.Commands.add('drag', { prevSubject: 'element'}, (subject, options) => { ... })
+//
+//
+// -- This is a dual command --
+// Cypress.Commands.add('dismiss', { prevSubject: 'optional'}, (subject, options) => { ... })
+//
+//
+// -- This will overwrite an existing command --
+// Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })

tests/cypress/support/commands.ts

@@ -0,0 +1,37 @@
+/// <reference types="cypress" />
+// ***********************************************
+// This example commands.ts shows you how to
+// create various custom commands and overwrite
+// existing commands.
+//
+// For more comprehensive examples of custom
+// commands please read more here:
+// https://on.cypress.io/custom-commands
+// ***********************************************
+//
+//
+// -- This is a parent command --
+// Cypress.Commands.add('login', (email, password) => { ... })
+//
+//
+// -- This is a child command --
+// Cypress.Commands.add('drag', { prevSubject: 'element'}, (subject, options) => { ... })
+//
+//
+// -- This is a dual command --
+// Cypress.Commands.add('dismiss', { prevSubject: 'optional'}, (subject, options) => { ... })
+//
+//
+// -- This will overwrite an existing command --
+// Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })
+//
+// declare global {
+//   namespace Cypress {
+//     interface Chainable {
+//       login(email: string, password: string): Chainable<void>
+//       drag(subject: string, options?: Partial<TypeOptions>): Chainable<Element>
+//       dismiss(subject: string, options?: Partial<TypeOptions>): Chainable<Element>
+//       visit(originalFn: CommandOriginalFn, url: string, options: Partial<VisitOptions>): Chainable<Element>
+//     }
+//   }
+// }

tests/cypress/support/component-index.html

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <title>Components App</title>
+  </head>
+  <body>
+    <div data-cy-root></div>
+  </body>
+</html>

tests/cypress/support/component.ts

@@ -0,0 +1,97 @@
+// ***********************************************************
+// This example support/component.ts is processed and
+// loaded automatically before your test files.
+//
+// This is a great place to put global configuration and
+// behavior that modifies Cypress.
+//
+// You can change the location of this file or turn off
+// automatically serving support files with the
+// 'supportFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/configuration
+// ***********************************************************
+
+// Import necessary styles
+import '@vue-flow/core/dist/style.css'
+import '@vue-flow/core/dist/theme-default.css'
+
+// Import commands.js using ES2015 syntax:
+import './commands'
+
+// Alternatively you can use CommonJS syntax:
+// require('./commands')
+
+import { mount } from 'cypress/vue'
+import { VueFlow } from '@vue-flow/core'
+import type { FlowProps } from '@vue-flow/core'
+
+const mountVueFlow = (props?: FlowProps, attrs?: Record<string, any>) => {
+  cy.mount(VueFlow as any, {
+    props: {
+      id: 'test',
+      fitViewOnInit: true,
+      ...props,
+    } as FlowProps,
+    attrs: {
+      key: 'flowy',
+      style: {
+        height: '100vh',
+        width: '100vw',
+      },
+      ...attrs,
+    } as Record<string, any>,
+  })
+}
+
+const useViewPort = () => cy.get('.vue-flow__viewport')
+
+const useTransformationPane = () => cy.get('.vue-flow__transformationpane')
+
+const retry = (assertion: Function, { interval = 20, timeout = 1000 } = {}) => {
+  return new Promise((resolve, reject) => {
+    const startTime = Date.now()
+
+    const tryAgain = () => {
+      setTimeout(() => {
+        try {
+          resolve(assertion())
+        } catch (err) {
+          Date.now() - startTime > timeout ? reject(err) : tryAgain()
+        }
+      }, interval)
+    }
+
+    tryAgain()
+  })
+}
+
+// Augment the Cypress namespace to include type definitions for
+// your custom command.
+// Alternatively, can be defined in cypress/support/component.d.ts
+// with a <reference path="./component" /> at the top of your spec.
+declare global {
+  namespace Cypress {
+    interface Chainable {
+      mount: typeof mount
+      vueFlow: typeof mountVueFlow
+      viewPort: typeof useViewPort
+      transformationPane: typeof useTransformationPane
+      tryAssertion: typeof retry
+    }
+  }
+}
+
+Cypress.Commands.add('mount', mount)
+
+Cypress.Commands.add('vueFlow', mountVueFlow)
+
+Cypress.Commands.add('viewPort', useViewPort)
+
+Cypress.Commands.add('transformationPane', useTransformationPane)
+
+Cypress.Commands.add('tryAssertion', retry)
+
+// Example use:
+// cy.mount(MyComponent)

tests/cypress/utils/elements.ts

@@ -0,0 +1,50 @@
+import type { Edge, Node } from '@vue-flow/core'
+
+export function getElements(xElements = 10, yElements = 10) {
+  const initialNodes: Node[] = []
+  const initialEdges: Edge[] = []
+  let nodeId = 1
+  let recentNodeId = null
+
+  for (let y = 0; y < yElements; y++) {
+    for (let x = 0; x < xElements; x++) {
+      initialNodes.push({
+        id: nodeId.toString(),
+        label: `Node ${nodeId}`,
+        style: (node) => {
+          const style: Record<string, any> = { width: `50px`, fontSize: `11px`, zIndex: 1 }
+          if (node.selected) style.border = '1px solid red'
+          return style
+        },
+        type: 'default',
+        position: { x: x * 100, y: y * 50 },
+        data: {
+          randomData: Math.floor(Math.random() * 1e3),
+        },
+      })
+
+      if (recentNodeId && nodeId <= xElements * yElements) {
+        initialEdges.push({
+          id: `${x}-${y}`,
+          source: recentNodeId.toString(),
+          target: nodeId.toString(),
+          data: {
+            randomData: Math.floor(Math.random() * 1e3),
+          },
+          style: (edge) => {
+            if (edge.selected) return { stroke: '#10b981', strokeWidth: 3 }
+          },
+          animated: Math.random() > 0.5,
+        })
+      }
+
+      recentNodeId = nodeId
+      nodeId++
+    }
+  }
+
+  return {
+    nodes: initialNodes,
+    edges: initialEdges,
+  }
+}

tests/cypress/utils/index.ts

@@ -0,0 +1 @@
+export * from './elements'

tests/package.json

@@ -0,0 +1,21 @@
+{
+  "name": "@vue-flow/tests",
+  "version": "0.0.0",
+  "private": true,
+  "scripts": {
+    "test": "cypress run --component",
+    "open": "cypress open"
+  },
+  "dependencies": {
+    "@vue-flow/background": "workspace:*",
+    "@vue-flow/controls": "workspace:*",
+    "@vue-flow/core": "workspace:*",
+    "@vue-flow/eslint-config": "workspace:*",
+    "@vue-flow/minimap": "workspace:*"
+  },
+  "devDependencies": {
+    "cypress": "^12.3.0",
+    "eslint-plugin-chai-friendly": "^0.7.2",
+    "@vitejs/plugin-vue": "^4.0.0"
+  }
+}

tests/tsconfig.json

@@ -0,0 +1,25 @@
+{
+  "compilerOptions": {
+    "baseUrl": ".",
+    "module": "ESNext",
+    "target": "es2017",
+    "lib": [
+      "DOM",
+      "ESNext"
+    ],
+    "noEmit": true,
+    "declaration": false,
+    "strict": true,
+    "esModuleInterop": true,
+    "incremental": false,
+    "skipLibCheck": true,
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "noUnusedLocals": false,
+    "strictNullChecks": true,
+    "forceConsistentCasingInFileNames": true,
+    "types": [
+      "vite/client"
+    ],
+  },
+}

tests/vite.config.ts

@@ -0,0 +1,13 @@
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+
+export default defineConfig({
+  plugins: [vue({ reactivityTransform: true })],
+  server: {
+    fs: {
+      strict: false,
+      // Allow serving files from one level up to the project root
+      allow: ['..'],
+    },
+  },
+})