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