diff --git a/cypress.json b/cypress.json new file mode 100644 index 0000000..0967ef4 --- /dev/null +++ b/cypress.json @@ -0,0 +1 @@ +{} diff --git a/cypress/integration/examples/actions.spec.js b/cypress/integration/examples/actions.spec.js deleted file mode 100644 index 4594336..0000000 --- a/cypress/integration/examples/actions.spec.js +++ /dev/null @@ -1,28 +0,0 @@ -/// - -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', () => { - - }) -}) \ No newline at end of file diff --git a/cypress/integration/examples/configuration.test.js b/cypress/integration/examples/configuration.test.js new file mode 100644 index 0000000..e2b329b --- /dev/null +++ b/cypress/integration/examples/configuration.test.js @@ -0,0 +1,45 @@ +/// + +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"`) + }) +}) \ No newline at end of file diff --git a/cypress/integration/examples/dataSave.spec.js b/cypress/integration/examples/dataSave.spec.js deleted file mode 100644 index 4594336..0000000 --- a/cypress/integration/examples/dataSave.spec.js +++ /dev/null @@ -1,28 +0,0 @@ -/// - -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', () => { - - }) -}) \ No newline at end of file diff --git a/cypress/integration/examples/element.test.js b/cypress/integration/examples/element.test.js new file mode 100644 index 0000000..6b48644 --- /dev/null +++ b/cypress/integration/examples/element.test.js @@ -0,0 +1,42 @@ +/// + +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}') + }) +}) \ No newline at end of file diff --git a/cypress/integration/examples/tools.test.js b/cypress/integration/examples/tools.test.js new file mode 100644 index 0000000..356d146 --- /dev/null +++ b/cypress/integration/examples/tools.test.js @@ -0,0 +1,100 @@ +/// + +// 工具栏测试 +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)) + }) +}) \ No newline at end of file