Browse Source

feat: add e2e test

master
yangpei 4 years ago
parent
commit
3571392515
  1. 1
      cypress.json
  2. 28
      cypress/integration/examples/actions.spec.js
  3. 45
      cypress/integration/examples/configuration.test.js
  4. 28
      cypress/integration/examples/dataSave.spec.js
  5. 42
      cypress/integration/examples/element.test.js
  6. 100
      cypress/integration/examples/tools.test.js

1
cypress.json

@ -0,0 +1 @@
{}

28
cypress/integration/examples/actions.spec.js

@ -1,28 +0,0 @@
/// <reference types="cypress" />
context('Actions', () => {
// 1. 打开http://localhost:8001/
beforeEach(() => {
cy.visit('http://localhost:8001/')
})
// 2. 测试是否能将左侧的组件拖动到画布中
it('the components on the left can be dragged into the canvas', () => {
})
// 3. 测试是否可修改节点的显示名称、逻辑触发名称、代码、投放配置schema、依赖
it('you can modify the display name, logical trigger name, code, delivery configuration schema, and dependencies of the node', () => {
})
// 4. 测试能够run起来一个最小流程(写好代码)
it('A minimal process can be run', () => {
})
// 5. 测试更改节点位置,输出结果不变
it('ensure that the node position is changed and the output result remains unchanged', () => {
})
})

45
cypress/integration/examples/configuration.test.js

@ -0,0 +1,45 @@
/// <reference types="cypress" />
context('Actions', () => {
beforeEach(() => {
cy.visit('http://localhost:8000/')
cy.get('div.ant-modal-confirm-btns > button:nth-child(1)').click({ force: true })
})
function moveNodeAndSelect() {
cy.get('svg > g > g.x6-graph-svg-stage > g:nth-child(1)').eq(0)
.trigger('mousedown', { which: 1, force: true })
.trigger('mousemove', { clientX: 400, clientY: 300, force: true })
.trigger('mouseup', { force: true })
cy.get('svg > g > g.x6-graph-svg-stage > g:nth-child(1)').eq(1).click({ force: true }) // 点击移动到画布中的节点
}
function assertEdit(nth, content) {
moveNodeAndSelect()
const ele = cy.get(`#rc-tabs-0-panel-basic > div > div:nth-child(${nth}) > button`).eq(0)
ele.should('have.text', '编 辑')
ele.click({ force: true })
cy.get('.ant-modal-content').should('exist')
cy.get('.ace_content').type(content)
cy.get('button.ant-btn.ant-btn-primary').eq(0).click({ force: true })
ele.click({ force: true })
cy.get('.ace_content').should('contain', content)
}
it('修改节点名称', () => {
moveNodeAndSelect()
const ele = cy.get('#rc-tabs-0-panel-basic > div > div:nth-child(1) > input').eq(0)
ele.clear({ force: true })
ele.type('新的开始')
ele.should('have.value', '新的开始')
})
it('修改节点代码', () => {
assertEdit(2, 'console.log(1)')
})
it('修改投放配置schema', () => {
assertEdit(3, `"a":1`)
})
it('修改npm依赖', () => {
assertEdit(4, `"@ant-design/icons": "^4.0.6"`)
})
})

28
cypress/integration/examples/dataSave.spec.js

@ -1,28 +0,0 @@
/// <reference types="cypress" />
context('Actions', () => {
// 1. 打开http://localhost:8001/
beforeEach(() => {
cy.visit('http://localhost:8001/')
})
// 2. 测试是否能将左侧的组件拖动到画布中
it('the components on the left can be dragged into the canvas', () => {
})
// 3. 测试是否可修改节点的显示名称、逻辑触发名称、代码、投放配置schema、依赖
it('you can modify the display name, logical trigger name, code, delivery configuration schema, and dependencies of the node', () => {
})
// 4. 测试能够run起来一个最小流程(写好代码)
it('A minimal process can be run', () => {
})
// 5. 测试更改节点位置,输出结果不变
it('ensure that the node position is changed and the output result remains unchanged', () => {
})
})

42
cypress/integration/examples/element.test.js

@ -0,0 +1,42 @@
/// <reference types="cypress" />
context('Actions', () => {
beforeEach(() => {
cy.visit('http://localhost:8000/')
cy.get('div.ant-modal-confirm-btns > button:nth-child(1)').click({ force: true })
})
function moveNode(selector, x, y) {
cy.get(selector).eq(0)
.trigger('mousedown', { which: 1, force: true })
.trigger('mousemove', { clientX: x, clientY: y, force: true })
.trigger('mouseup', { force: true })
}
// 节点/边操作测试
it('添加 开始/分支/处理 节点', () => {
const DEFAULT_COUNT = 1
moveNode('svg > g > g.x6-graph-svg-stage > g:nth-child(1) > circle', 300, 150)
moveNode('svg > g > g.x6-graph-svg-stage > g:nth-child(2) > polygon', 400, 150)
moveNode('svg > g > g.x6-graph-svg-stage > g:nth-child(3) > rect', 500, 150)
cy.get('svg> g > g.x6-graph-svg-stage circle').its('length').should('be.gt', DEFAULT_COUNT)
cy.get('svg> g > g.x6-graph-svg-stage polygon').its('length').should('be.gt', DEFAULT_COUNT)
cy.get('svg> g > g.x6-graph-svg-stage rect').its('length').should('be.gt', DEFAULT_COUNT)
})
it('边连线 & 删除节点/边', () => {
moveNode('svg > g > g.x6-graph-svg-stage > g:nth-child(1) > circle', 300, 150)
moveNode('svg > g > g.x6-graph-svg-stage > g:nth-child(2) > polygon', 400, 150)
moveNode('svg > g > g.x6-graph-svg-stage > g:nth-child(3) > rect', 500, 150)
const node1 = cy.get('svg > g > g.x6-graph-svg-stage > g:nth-child(1)').eq(1)
const node2 = cy.get('svg > g > g.x6-graph-svg-stage > g:nth-child(2)').eq(1)
const node3 = cy.get('svg > g > g.x6-graph-svg-stage > g:nth-child(3)').eq(1)
node1.click('right', { force: true }).trigger('mousemove', { clientX: node2.clientX, clientY: node2.clientY, force: true }).trigger('mouseup', { force: true })
node2.click('right', { force: true }).trigger('mousemove', { clientX: node3.clientX, clientY: node3.clientY, force: true }).trigger('mouseup', { force: true })
cy.get('svg path:nth-child(1)').should('exist')
cy.get('svg path:nth-child(1)').eq(1).click({ force: true })
cy.get('body').type('{del}')
cy.get('svg path:nth-child(1)').eq(1).click({ force: true })
cy.get('body').type('{del}')
})
})

100
cypress/integration/examples/tools.test.js

@ -0,0 +1,100 @@
/// <reference types="cypress" />
// 工具栏测试
context('Actions', () => {
const toolSelector = (i, j, k) => {
if (k) {
return `.index-module_container__1D841 > :nth-child(${i}) > :nth-child(${j})> :nth-child(${k})`
} else {
return `.index-module_container__1D841 > :nth-child(${i}) > :nth-child(${j})`
}
}
beforeEach(() => {
cy.visit('http://localhost:8000/')
cy.get('div.ant-modal-confirm-btns > button:nth-child(1)').click({ force: true })
})
function moveNode(selector, x, y) {
cy.get(selector).eq(0)
.trigger('mousedown', { which: 1, force: true })
.trigger('mousemove', { clientX: x, clientY: y, force: true })
.trigger('mouseup', { force: true })
}
// 第一组
it('保存', () => {
const save = cy.get(toolSelector(1, 1))
})
it('适配窗口', () => {
const fitWindow = cy.get(toolSelector(1, 2))
})
it('撤销', () => {
const undo = cy.get(toolSelector(1, 3))
const node = 'svg > g > g.x6-graph-svg-stage > g:nth-child(1)'
moveNode(node, 350, 300)
moveNode(node, 350, 300)
undo.click({ multiple: true, force: true })
undo.click({ multiple: true, force: true })
cy.get(node).should('have.length', 2)
})
it('重做', () => {
const redo = cy.get(toolSelector(1, 4))
const node = 'svg > g > g.x6-graph-svg-stage > g:nth-child(1)'
moveNode(node, 350, 300)
redo.click()
redo.click()
cy.get(node).should('have.length', 2)
})
// 第二组
it('缩小', () => {
const zoomOut = cy.get(toolSelector(2, 1, 1))
})
it('放大', () => {
const zoomIn = cy.get(toolSelector(2, 1, 2))
})
// 第三组
it('修改字号', () => {
const fontSize = cy.get(toolSelector(3, 1))
})
it('修改字重', () => {
const fontWeight = cy.get(toolSelector(3, 2))
})
it('修改斜体', () => {
const italic = cy.get(toolSelector(3, 3))
})
it('修改下划线', () => {
const underline = cy.get(toolSelector(3, 4))
})
// 第四组
it('修改文字颜色', () => {
const textColor = cy.get(toolSelector(4, 1))
})
it('修改背景颜色', () => {
const bgColor = cy.get(toolSelector(4, 2))
})
it('修改边框颜色', () => {
const borderColor = cy.get(toolSelector(4, 3))
})
it('修改线条样式', () => {
const lineStyle = cy.get(toolSelector(4, 4))
})
// 第五组
it('修改水平方向对齐', () => {
const align = cy.get(toolSelector(5, 1))
})
it('修改垂直方向对齐', () => {
const vertical = cy.get(toolSelector(5, 2))
})
// 第六组
it('修改层级置顶', () => {
const top = cy.get(toolSelector(6, 1))
})
it('修改层级置底', () => {
const bottom = cy.get(toolSelector(6, 2))
})
})
Loading…
Cancel
Save