refactor(tests): rename e2e to tests

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

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