feat: Test pipeline

* Rename tests dir to e2e as tests gets ignored as "package" by turbo

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

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

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

@@ -0,0 +1,60 @@
+import { useVueFlow, State, Store } from '@braks/vue-flow'
+
+describe('test store state', () => {
+  let store: Store
+
+  const { store: initial } = useVueFlow()
+  beforeEach(() => ({ store } = useVueFlow()))
+
+  it('has any initial state', () => expect(store).to.exist)
+
+  it('has default initial state', () => {
+    Object.keys(store).forEach((state) => {
+      const storedState = store[<keyof State>state]
+      const initialVal = initial[<keyof State>state]
+      if (state === 'initialized') return expect(storedState).to.be.true
+      expect(JSON.stringify(storedState)).to.eq(JSON.stringify(initialVal))
+    })
+  })
+
+  it('sets state', () => {
+    store.setState({
+      zoomOnScroll: false,
+    })
+    expect(store.zoomOnScroll).to.eq(false)
+  })
+
+  it('takes initial options', () => {
+    const { store } = useVueFlow({
+      zoomOnScroll: false,
+    })
+    expect(store.zoomOnScroll).to.eq(false)
+  })
+
+  it('gets custom node types', () => {
+    store.setState({
+      nodes: [
+        {
+          id: '1',
+          position: { x: 0, y: 0 },
+          type: 'custom',
+        },
+      ],
+    })
+    expect(Object.keys(store.getNodeTypes)).to.contain('custom')
+  })
+
+  it('gets custom edge types', () => {
+    store.setState({
+      edges: [
+        {
+          id: '1',
+          source: '1',
+          target: '2',
+          type: 'custom',
+        },
+      ],
+    })
+    expect(Object.keys(store.getEdgeTypes)).to.contain('custom')
+  })
+})

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

@@ -0,0 +1,50 @@
+import { mount } from '@cypress/vue'
+import { VueFlow, isEdge, isNode, Elements } 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,
+      ))
+})