tests: check all nodes/edges for selected class

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

@@ -1,4 +1,4 @@
-import { useVueFlow } from '@braks/vue-flow'
+import { isEdge, useVueFlow } from '@braks/vue-flow'
 import { getElements } from '../../../utils'
 
 const { nodes, edges } = getElements()
@@ -24,8 +24,25 @@ describe('Store Action: `addSelectedEdges`', () => {
   })
 
   it('adds `selected` class to edges', () => {
-    cy.get('.vue-flow__edge').then((edges) => {
-      expect(edges[randomNumber - 1]).to.have.class('selected')
+    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.wait(1).then(() => {
+            expect(edge).to.have.class('selected')
+          })
+        } else {
+          expect(!!storedEdge?.selected).to.eq(false)
+          cy.wait(1).then(() => {
+            expect(edge).to.not.have.class('selected')
+          })
+        }
+      })
     })
   })
 })

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

@@ -1,4 +1,4 @@
-import { useVueFlow } from '@braks/vue-flow'
+import { isEdge, useVueFlow } from '@braks/vue-flow'
 import { getElements } from '../../../utils'
 
 const { nodes, edges } = getElements()
@@ -27,8 +27,25 @@ describe('Store Action: `removeSelectedEdges`', () => {
   })
 
   it('removes `selected` class from edges', () => {
-    cy.get('.vue-flow__edge').then((edges) => {
-      expect(edges[randomNumber2 - 1]).to.not.have.class('selected')
+    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.wait(1).then(() => {
+            expect(edge).to.have.class('selected')
+          })
+        } else {
+          expect(!!storedEdge?.selected).to.eq(false)
+          cy.wait(1).then(() => {
+            expect(edge).to.not.have.class('selected')
+          })
+        }
+      })
     })
   })
 })

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

@@ -1,4 +1,4 @@
-import { useVueFlow } from '@braks/vue-flow'
+import { isEdge, isNode, useVueFlow } from '@braks/vue-flow'
 import { getElements } from '../../../utils'
 
 const { nodes, edges } = getElements()
@@ -24,8 +24,25 @@ describe('Store Action: `addSelectedNodes`', () => {
   })
 
   it('adds `selected` class to nodes', () => {
-    cy.get('.vue-flow__node').then((nodes) => {
-      expect(nodes[randomNumber - 1]).to.have.class('selected')
+    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.wait(1).then(() => {
+            expect(node).to.have.class('selected')
+          })
+        } else {
+          expect(!!storedNode?.selected).to.eq(false)
+          cy.wait(1).then(() => {
+            expect(node).to.not.have.class('selected')
+          })
+        }
+      })
     })
   })
 })

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

@@ -1,4 +1,4 @@
-import { useVueFlow } from '@braks/vue-flow'
+import { isNode, useVueFlow } from '@braks/vue-flow'
 import { getElements } from '../../../utils'
 
 const { nodes, edges } = getElements()
@@ -27,8 +27,25 @@ describe('Store Action: `removeSelectedNodes`', () => {
   })
 
   it('removes `selected` class from nodes', () => {
-    cy.get('.vue-flow__node').then((nodes) => {
-      expect(nodes[randomNumber2 - 1]).to.not.have.class('selected')
+    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.wait(1).then(() => {
+            expect(node).to.have.class('selected')
+          })
+        } else {
+          expect(!!storedNode?.selected).to.eq(false)
+          cy.wait(1).then(() => {
+            expect(node).to.not.have.class('selected')
+          })
+        }
+      })
     })
   })
 })