feat(tests): add tests for add, find & remove actions

e2e/cypress/component/1-store/actions/edges/addEdges.cy.ts

@@ -0,0 +1,30 @@
+import { useVueFlow } from '@braks/vue-flow'
+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)
+  })
+})

e2e/cypress/component/1-store/actions/edges/findEdge.cy.ts

@@ -0,0 +1,29 @@
+import { useVueFlow } from '@braks/vue-flow'
+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)
+  })
+})

e2e/cypress/component/1-store/actions/edges/removeEdges.cy.ts

@@ -0,0 +1,29 @@
+import { useVueFlow } from '@braks/vue-flow'
+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)
+  })
+})

e2e/cypress/component/1-store/actions/nodes/addNodes.cy.ts

@@ -0,0 +1,28 @@
+import { useVueFlow } from '@braks/vue-flow'
+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)
+  })
+})

e2e/cypress/component/1-store/actions/nodes/findNode.cy.ts

@@ -0,0 +1,29 @@
+import { useVueFlow } from '@braks/vue-flow'
+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)
+  })
+})

e2e/cypress/component/1-store/actions/nodes/removeNodes.cy.ts

@@ -0,0 +1,32 @@
+import { useVueFlow } from '@braks/vue-flow'
+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)
+    })
+  })
+})

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

@@ -0,0 +1,93 @@
+import { isEdge, isNode, useVueFlow } from '@braks/vue-flow'
+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.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/actions/setState.cy.ts

@@ -2,7 +2,7 @@ import { isRef } from 'vue'
 import type { State } from '@braks/vue-flow'
 import { useVueFlow } from '@braks/vue-flow'
 
-describe('test store state', () => {
+describe('Store Action: `setState`', () => {
   let store = useVueFlow()
 
   const initial = useVueFlow({ id: 'initial' })

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

@@ -1,95 +0,0 @@
-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/2-flow/container.cy.ts

@@ -1,21 +1,11 @@
-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',
-        },
-      },
+    cy.vueFlow({
+      modelValue: [...nodes, ...edges],
     })
   })