refactor(tests): Upgrade to cypress 10

e2e/cypress.config.ts

@@ -0,0 +1,13 @@
+import { defineConfig } from 'cypress'
+
+export default defineConfig({
+  video: false,
+  screenshotOnRunFailure: false,
+  retries: 2,
+  component: {
+    devServer: {
+      framework: 'vue',
+      bundler: 'vite',
+    },
+  },
+})

e2e/cypress.json

@@ -1,7 +0,0 @@
-{
-  "testFiles": "cypress/**/*.spec.ts",
-  "componentFolder": ".",
-  "video": false,
-  "screenshotOnRunFailure": false,
-  "retries": 2
-}

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

e2e/cypress/integration/1-store/setElements.spec.ts

@@ -1,88 +0,0 @@
-import type { Edge, Node, SetState, VueFlowStore } from '@braks/vue-flow'
-import { isEdge, isNode, useVueFlow } from '@braks/vue-flow'
-import { getElements } from '../../../../examples/vite/src/Stress/utils'
-
-describe('test store action setElements', () => {
-  const setElements = async (setState: SetState) => {
-    const nodes: Node[] = [
-      { id: '1', type: 'input', data: { label: 'Node 1' }, position: { x: 250, y: 5 } },
-      { id: '2', data: { label: 'Node 2' }, position: { x: 100, y: 100 } },
-    ]
-    const edges: Edge[] = [{ id: 'e1-2', source: '1', target: '2', animated: true }]
-    setState({
-      nodes,
-      edges,
-    })
-  }
-
-  it('sets elements', async () => {
-    const { setState, nodes, edges } = useVueFlow()
-    await setElements(setState)
-    expect(nodes.value).to.have.length(2)
-    expect(edges.value).to.have.length(1)
-  })
-
-  context('elements pre-set', () => {
-    let store: VueFlowStore
-    beforeEach(async () => {
-      store = useVueFlow()
-      await setElements(store.setState)
-    })
-
-    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('parses elements to flow-elements (199 elements - stress test)', async () => {
-      const { nodes, edges } = getElements()
-      store.setState({
-        nodes,
-        edges,
-      })
-      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', () => {
-      store.nodes.value.forEach((el) => expect(['1', '2']).to.include(el.id))
-      store.edges.value.forEach((el) => expect(['e1-2']).to.include(el.id))
-    })
-
-    it('has correct element types', () => {
-      store.nodes.value.forEach((el) => expect(['input', 'default']).to.include(el.type))
-    })
-
-    it('nodes have correct label', () => {
-      store.getNodes.value.forEach((el) => {
-        if (el.id === '1') expect(el.data.label).to.eq('Node 1')
-        else expect(el.data.label).to.eq('Node 2')
-      })
-    })
-
-    it('nodes have correct position', () => {
-      store.getNodes.value.forEach((el) => {
-        if (el.id === '1') expect(JSON.stringify(el.position)).to.eq(JSON.stringify({ x: 250, y: 5 }))
-        else expect(JSON.stringify(el.position)).to.eq(JSON.stringify({ x: 100, y: 100 }))
-      })
-    })
-
-    it('edge has correct target and source', () => {
-      store.getEdges.value.forEach((el) => {
-        expect(el.source).to.eq('1')
-        expect(el.target).to.eq('2')
-      })
-    })
-
-    it('edge has correct targetnode and sourceNode', () => {
-      store.getEdges.value.forEach((el) => {
-        expect(el.sourceNode.id).to.eq('1')
-        expect(el.targetNode.id).to.eq('2')
-      })
-    })
-
-    it('edge is animated', () => {
-      store.getEdges.value.forEach((el) => expect(el.animated).to.eq(true))
-    })
-  })
-})

e2e/cypress/integration/2-flow/container.spec.ts

@@ -1,51 +0,0 @@
-import { mount } from '@cypress/vue'
-import type { Elements } from '@braks/vue-flow'
-import { VueFlow, isEdge, isNode } from '@braks/vue-flow'
-import '@braks/vue-flow/dist/style.css'
-import '@braks/vue-flow/dist/theme-default.css'
-
-describe('Render VueFlow', () => {
-  const elements: Elements = [
-    { id: '1', type: 'input', label: 'Node 1', position: { x: 250, y: 5 } },
-    { id: '2', label: 'Node 2', position: { x: 100, y: 100 } },
-    { id: 'e1-2', source: '1', target: '2', animated: true },
-  ]
-
-  beforeEach(() => {
-    mount(VueFlow, {
-      props: {
-        modelValue: elements,
-      },
-      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', elements.filter(isNode).length)
-  })
-
-  it('renders edges', () => cy.get('.vue-flow__edge').should('have.length', elements.filter(isEdge).length))
-
-  it('renders correct node labels', () =>
-    cy.get('.vue-flow__node').each((node) => expect(elements.some((el) => el.label === node.text())).to.be.true))
-
-  it('renders nodes at correct position', () =>
-    cy
-      .get('.vue-flow__node')
-      .each(
-        (node) =>
-          expect(
-            elements.filter(isNode).some((el) => el.position.x === node.position().left && el.position.y === node.position().top),
-          ).to.be.true,
-      ))
-})

e2e/cypress/plugins/index.ts

@@ -1,16 +0,0 @@
-import { resolve } from 'path'
-import { startDevServer } from '@cypress/vite-dev-server'
-
-export default ((on, config) => {
-  on('dev-server:start', async (options) =>
-    startDevServer({
-      options,
-      viteConfig: {
-        mode: 'test',
-        configFile: resolve(__dirname, 'vite.config.ts'),
-      },
-    }),
-  )
-
-  return config
-}) as Cypress.PluginConfig

e2e/cypress/support/commands.ts

@@ -0,0 +1,37 @@
+/// <reference types="cypress" />
+// ***********************************************
+// This example commands.ts shows you how to
+// create various custom commands and overwrite
+// existing commands.
+//
+// For more comprehensive examples of custom
+// commands please read more here:
+// https://on.cypress.io/custom-commands
+// ***********************************************
+//
+//
+// -- This is a parent command --
+// Cypress.Commands.add('login', (email, password) => { ... })
+//
+//
+// -- This is a child command --
+// Cypress.Commands.add('drag', { prevSubject: 'element'}, (subject, options) => { ... })
+//
+//
+// -- This is a dual command --
+// Cypress.Commands.add('dismiss', { prevSubject: 'optional'}, (subject, options) => { ... })
+//
+//
+// -- This will overwrite an existing command --
+// Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })
+//
+// declare global {
+//   namespace Cypress {
+//     interface Chainable {
+//       login(email: string, password: string): Chainable<void>
+//       drag(subject: string, options?: Partial<TypeOptions>): Chainable<Element>
+//       dismiss(subject: string, options?: Partial<TypeOptions>): Chainable<Element>
+//       visit(originalFn: CommandOriginalFn, url: string, options: Partial<VisitOptions>): Chainable<Element>
+//     }
+//   }
+// }

e2e/cypress/support/component-index.html

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <title>Components App</title>
+  </head>
+  <body>
+    <div data-cy-root></div>
+  </body>
+</html>

e2e/cypress/support/component.ts

@@ -0,0 +1,43 @@
+// ***********************************************************
+// This example support/component.ts is processed and
+// loaded automatically before your test files.
+//
+// This is a great place to put global configuration and
+// behavior that modifies Cypress.
+//
+// You can change the location of this file or turn off
+// automatically serving support files with the
+// 'supportFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/configuration
+// ***********************************************************
+
+// Import necessary styles
+import '@braks/vue-flow/dist/style.css'
+import '@braks/vue-flow/dist/theme-default.css'
+
+// Import commands.js using ES2015 syntax:
+import './commands'
+
+// Alternatively you can use CommonJS syntax:
+// require('./commands')
+
+import { mount } from 'cypress/vue'
+
+// Augment the Cypress namespace to include type definitions for
+// your custom command.
+// Alternatively, can be defined in cypress/support/component.d.ts
+// with a <reference path="./component" /> at the top of your spec.
+declare global {
+  namespace Cypress {
+    interface Chainable {
+      mount: typeof mount
+    }
+  }
+}
+
+Cypress.Commands.add('mount', mount)
+
+// Example use:
+// cy.mount(MyComponent)

e2e/cypress/support/index.js

@@ -1,19 +0,0 @@
-// ***********************************************************
-// This example support/index.js is processed and
-// loaded automatically before your test files.
-//
-// This is a great place to put global configuration and
-// behavior that modifies Cypress.
-//
-// You can change the location of this file or turn off
-// automatically serving support files with the
-// 'supportFile' configuration option.
-//
-// You can read more here:
-// https://on.cypress.io/configuration
-// ***********************************************************
-
-// Import commands.js using ES2015 syntax:
-
-// Alternatively you can use CommonJS syntax:
-// require('./commands')

e2e/cypress/utils/elements.ts

@@ -0,0 +1,45 @@
+import type { Edge, Node } from '@braks/vue-flow'
+
+export function getElements(xElements = 10, yElements = 10) {
+  const initialNodes: Node[] = []
+  const initialEdges: Edge[] = []
+  let nodeId = 1
+  let recentNodeId = null
+
+  for (let y = 0; y < yElements; y++) {
+    for (let x = 0; x < xElements; x++) {
+      const position = { x: x * 100, y: y * 50 }
+      const node = {
+        id: nodeId.toString(),
+        style: { width: 50, fontSize: 11 },
+        label: `Node ${nodeId}`,
+        type: '',
+        position,
+        data: {
+          randomData: Math.floor(Math.random() * 1e3),
+        },
+      }
+      initialNodes.push(node)
+
+      if (recentNodeId && nodeId <= xElements * yElements) {
+        initialEdges.push({
+          id: `${x}-${y}`,
+          source: recentNodeId.toString(),
+          target: nodeId.toString(),
+          data: {
+            randomData: Math.floor(Math.random() * 1e3),
+          },
+          animated: Math.random() > 0.5,
+        })
+      }
+
+      recentNodeId = nodeId
+      nodeId++
+    }
+  }
+
+  return {
+    nodes: initialNodes,
+    edges: initialEdges,
+  }
+}

e2e/cypress/utils/index.ts

@@ -0,0 +1 @@
+export * from './elements'

e2e/package.json

@@ -10,9 +10,6 @@
     "@braks/vue-flow": "workspace:*"
   },
   "devDependencies": {
-    "@cypress/vite-dev-server": "^2.2.3",
-    "@cypress/vue": "^3.1.2",
-    "@vitejs/plugin-vue": "^2.3.3",
-    "cypress": "8.5.0"
+    "cypress": "^10.9.0"
   }
 }

e2e/tsconfig.json

@@ -3,7 +3,10 @@
     "baseUrl": ".",
     "module": "ESNext",
     "target": "es2017",
-    "lib": ["DOM", "ESNext"],
+    "lib": [
+      "DOM",
+      "ESNext"
+    ],
     "noEmit": true,
     "declaration": false,
     "strict": true,
@@ -15,8 +18,8 @@
     "noUnusedLocals": false,
     "strictNullChecks": true,
     "forceConsistentCasingInFileNames": true,
-    "types": ["vite/client"]
+    "types": [
+      "vite/client"
+    ],
   },
-  "include": ["cypress"],
-  "exclude": ["node_modules"]
 }

e2e/vite.config.ts

@@ -1,6 +1,5 @@
 import { defineConfig } from 'vite'
-import vue from '@vitejs/plugin-vue'
 
 export default defineConfig({
-  plugins: [vue()],
+  base: '.',
 })