alighasami/vue-flow
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Test pipeline

Browse Source 
* Rename tests dir to e2e as tests gets ignored as "package" by turbo
This commit is contained in:
Braks
2022-04-10 23:54:46 +02:00
parent ca5033b272
commit 08204fdcbb
12 changed files with 2 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

88
tests/cypress/integration/1-store/setElements.spec.ts
View File

@@ -1,88 +0,0 @@
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))
})
})
})

60
tests/cypress/integration/1-store/setState.spec.ts
View File

@@ -1,60 +0,0 @@
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')
})
})

50
tests/cypress/integration/2-flow/container.spec.ts
View File

@@ -1,50 +0,0 @@
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,
))
})

16
tests/cypress/plugins/index.ts
View File

@@ -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

6
tests/cypress/plugins/vite.config.ts
View File

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

25
tests/cypress/support/commands.js
View File

@@ -1,25 +0,0 @@
// ***********************************************
// This example commands.js 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) => { ... })

19
tests/cypress/support/index.js
View File

@@ -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')