refactor(tests): Upgrade to cypress 10

e2e/cypress/component/1-store/setElements.cy.ts

@@ -0,0 +1,95 @@
+import { isEdge, isNode, useVueFlow } from '@braks/vue-flow'
+import { getElements } from '../../utils'
+
+const { nodes, edges } = getElements()
+
+describe('test 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)
+  })
+
+  context('elements pre-set', () => {
+    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.map((node) => node.type)
+      store.nodes.value.forEach((el) => expect(nodeTypes).to.include(el.type))
+      const edgeTypes = edges.map((edge) => edge.type)
+      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 = nodes.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)
+        })
+      })
+    })
+  })
+})

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

@@ -0,0 +1,81 @@
+import { isRef } from 'vue'
+import type { State } from '@braks/vue-flow'
+import { useVueFlow } from '@braks/vue-flow'
+
+describe('test store state', () => {
+  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')
+  })
+})

e2e/cypress/component/2-flow/container.cy.ts

@@ -0,0 +1,42 @@
+import { VueFlow } from '@braks/vue-flow'
+import { getElements } from '../../utils'
+
+const { nodes, edges } = getElements()
+
+describe('render Vue Flow', () => {
+  beforeEach(() => {
+    cy.mount(VueFlow, {
+      props: {
+        modelValue: [...nodes, ...edges],
+      },
+      attrs: {
+        key: 'flowy',
+        style: {
+          height: '100vh',
+          width: '100vw',
+        },
+      },
+    })
+  })
+
+  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,
+      ))
+})