From 9f59be7afaaba718633de4db3cb6275c514d8c8e Mon Sep 17 00:00:00 2001 From: braks <78412429+bcakmakoglu@users.noreply.github.com> Date: Fri, 7 Oct 2022 18:30:46 +0200 Subject: [PATCH] feat(tests): add tests for add, find & remove actions --- .../1-store/actions/edges/addEdges.cy.ts | 30 ++++++ .../1-store/actions/edges/findEdge.cy.ts | 29 ++++++ .../1-store/actions/edges/removeEdges.cy.ts | 29 ++++++ .../1-store/actions/nodes/addNodes.cy.ts | 28 ++++++ .../1-store/actions/nodes/findNode.cy.ts | 29 ++++++ .../1-store/actions/nodes/removeNodes.cy.ts | 32 +++++++ .../1-store/actions/setElements.cy.ts | 93 ++++++++++++++++++ .../1-store/{ => actions}/setState.cy.ts | 2 +- .../component/1-store/setElements.cy.ts | 95 ------------------- e2e/cypress/component/2-flow/container.cy.ts | 14 +-- 10 files changed, 273 insertions(+), 108 deletions(-) create mode 100644 e2e/cypress/component/1-store/actions/edges/addEdges.cy.ts create mode 100644 e2e/cypress/component/1-store/actions/edges/findEdge.cy.ts create mode 100644 e2e/cypress/component/1-store/actions/edges/removeEdges.cy.ts create mode 100644 e2e/cypress/component/1-store/actions/nodes/addNodes.cy.ts create mode 100644 e2e/cypress/component/1-store/actions/nodes/findNode.cy.ts create mode 100644 e2e/cypress/component/1-store/actions/nodes/removeNodes.cy.ts create mode 100644 e2e/cypress/component/1-store/actions/setElements.cy.ts rename e2e/cypress/component/1-store/{ => actions}/setState.cy.ts (97%) delete mode 100644 e2e/cypress/component/1-store/setElements.cy.ts diff --git a/e2e/cypress/component/1-store/actions/edges/addEdges.cy.ts b/e2e/cypress/component/1-store/actions/edges/addEdges.cy.ts new file mode 100644 index 00000000..2cf665bb --- /dev/null +++ b/e2e/cypress/component/1-store/actions/edges/addEdges.cy.ts @@ -0,0 +1,30 @@ +import { useVueFlow } from '@braks/vue-flow' +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) + }) +}) diff --git a/e2e/cypress/component/1-store/actions/edges/findEdge.cy.ts b/e2e/cypress/component/1-store/actions/edges/findEdge.cy.ts new file mode 100644 index 00000000..b74dc17d --- /dev/null +++ b/e2e/cypress/component/1-store/actions/edges/findEdge.cy.ts @@ -0,0 +1,29 @@ +import { useVueFlow } from '@braks/vue-flow' +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) + }) +}) diff --git a/e2e/cypress/component/1-store/actions/edges/removeEdges.cy.ts b/e2e/cypress/component/1-store/actions/edges/removeEdges.cy.ts new file mode 100644 index 00000000..417f640e --- /dev/null +++ b/e2e/cypress/component/1-store/actions/edges/removeEdges.cy.ts @@ -0,0 +1,29 @@ +import { useVueFlow } from '@braks/vue-flow' +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) + }) +}) diff --git a/e2e/cypress/component/1-store/actions/nodes/addNodes.cy.ts b/e2e/cypress/component/1-store/actions/nodes/addNodes.cy.ts new file mode 100644 index 00000000..31397bfa --- /dev/null +++ b/e2e/cypress/component/1-store/actions/nodes/addNodes.cy.ts @@ -0,0 +1,28 @@ +import { useVueFlow } from '@braks/vue-flow' +import { getElements } from '../../../../utils' + +const { nodes } = getElements() + +const initialNodes = [{ id: '1e3', position: { x: 0, y: 0 }, label: 'Node 1e3' }] + +describe('Store Action: `addNodes`', () => { + const store = useVueFlow({ id: 'test' }) + + beforeEach(() => { + cy.vueFlow({ + nodes: initialNodes, + }) + }) + + beforeEach(() => { + store.addNodes(nodes) + }) + + it('adds nodes to store', () => { + expect(store.nodes.value).to.have.length(nodes.length + initialNodes.length) + }) + + it('adds nodes to viewpane', () => { + cy.get('.vue-flow__node').should('have.length', nodes.length + initialNodes.length) + }) +}) diff --git a/e2e/cypress/component/1-store/actions/nodes/findNode.cy.ts b/e2e/cypress/component/1-store/actions/nodes/findNode.cy.ts new file mode 100644 index 00000000..d7250558 --- /dev/null +++ b/e2e/cypress/component/1-store/actions/nodes/findNode.cy.ts @@ -0,0 +1,29 @@ +import { useVueFlow } from '@braks/vue-flow' +import { getElements } from '../../../../utils' + +const { nodes, edges } = getElements() + +describe('Store Action: `findNode`', () => { + const store = useVueFlow({ id: 'test' }) + let randomIndex: number + + beforeEach(() => { + cy.vueFlow({ + nodes, + edges, + }) + }) + + beforeEach(() => { + randomIndex = Math.floor(Math.random() * nodes.length) + }) + + it('finds node in store', () => { + const storedNode = store.findNode(nodes[randomIndex].id) + expect(storedNode?.id).to.equal(nodes[randomIndex].id) + }) + + it('does not find node in store when passed invalid id', () => { + expect(store.findNode('-123')).to.equal(undefined) + }) +}) diff --git a/e2e/cypress/component/1-store/actions/nodes/removeNodes.cy.ts b/e2e/cypress/component/1-store/actions/nodes/removeNodes.cy.ts new file mode 100644 index 00000000..4b9e0110 --- /dev/null +++ b/e2e/cypress/component/1-store/actions/nodes/removeNodes.cy.ts @@ -0,0 +1,32 @@ +import { useVueFlow } from '@braks/vue-flow' +import { getElements } from '../../../../utils' + +const { nodes, edges } = getElements() + +describe('Store Action: `removeNodes`', () => { + const store = useVueFlow({ id: 'test' }) + let randomNumber: number + + beforeEach(() => { + cy.vueFlow({ + nodes, + edges, + }) + }) + + beforeEach(() => { + randomNumber = Math.floor(Math.random() * nodes.length) + store.removeNodes(Array.from({ length: randomNumber }, (_, i) => nodes[i].id)) + }) + + it('removes nodes from store', () => { + expect(store.nodes.value).to.have.length(nodes.length - randomNumber) + }) + + it('removes nodes from viewpane', () => { + cy.get('.vue-flow__node').should('have.length', nodes.length - randomNumber) + cy.get('.vue-flow__node').each(($el, index) => { + expect($el).to.have.attr('data-id', nodes[index + randomNumber].id) + }) + }) +}) diff --git a/e2e/cypress/component/1-store/actions/setElements.cy.ts b/e2e/cypress/component/1-store/actions/setElements.cy.ts new file mode 100644 index 00000000..911b54e7 --- /dev/null +++ b/e2e/cypress/component/1-store/actions/setElements.cy.ts @@ -0,0 +1,93 @@ +import { isEdge, isNode, useVueFlow } from '@braks/vue-flow' +import { getElements } from '../../../utils' + +const { nodes, edges } = getElements() + +describe('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) + }) + + 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) + }) + }) + }) +}) diff --git a/e2e/cypress/component/1-store/setState.cy.ts b/e2e/cypress/component/1-store/actions/setState.cy.ts similarity index 97% rename from e2e/cypress/component/1-store/setState.cy.ts rename to e2e/cypress/component/1-store/actions/setState.cy.ts index 7a593623..8278ec86 100644 --- a/e2e/cypress/component/1-store/setState.cy.ts +++ b/e2e/cypress/component/1-store/actions/setState.cy.ts @@ -2,7 +2,7 @@ import { isRef } from 'vue' import type { State } from '@braks/vue-flow' import { useVueFlow } from '@braks/vue-flow' -describe('test store state', () => { +describe('Store Action: `setState`', () => { let store = useVueFlow() const initial = useVueFlow({ id: 'initial' }) diff --git a/e2e/cypress/component/1-store/setElements.cy.ts b/e2e/cypress/component/1-store/setElements.cy.ts deleted file mode 100644 index 2d258819..00000000 --- a/e2e/cypress/component/1-store/setElements.cy.ts +++ /dev/null @@ -1,95 +0,0 @@ -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) - }) - }) - }) - }) -}) diff --git a/e2e/cypress/component/2-flow/container.cy.ts b/e2e/cypress/component/2-flow/container.cy.ts index 47cf3062..934eeafa 100644 --- a/e2e/cypress/component/2-flow/container.cy.ts +++ b/e2e/cypress/component/2-flow/container.cy.ts @@ -1,21 +1,11 @@ -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', - }, - }, + cy.vueFlow({ + modelValue: [...nodes, ...edges], }) })