alighasami/xyflow
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

tests: fix basics cypress test.

Browse Source
This commit is contained in:
Jack Fishwick
2022-11-22 10:55:07 +00:00
parent 44097c15c9
commit 28865d0e21
1 changed files with 111 additions and 111 deletions
Download Patch File Download Diff File Expand all files Collapse all files
examples/vite-app/cypress/e2e/basic.cy.ts
+111 -111
View File
@@ -11,86 +11,86 @@ describe('Basic Flow Rendering', () => {
cy.get('.react-flow__node').children('.react-flow__handle');
});
// it('renders a grid', () => {
// cy.get('.react-flow__background');
// });
it('renders a grid', () => {
cy.get('.react-flow__background');
});
// it('selects two nodes by clicks', () => {
// cy.get('body').type('{cmd}', { release: false });
// cy.get('.react-flow__node:first')
// .click()
// .should('have.class', 'selected')
// .get('.react-flow__node:last')
// .click()
// .should('have.class', 'selected')
// .get('.react-flow__node:first')
// .should('have.class', 'selected');
// cy.get('body').type('{cmd}', { release: true });
// });
it('selects two nodes by clicks', () => {
cy.get('body').type('{cmd}', { release: false });
cy.get('.react-flow__node:first')
.click()
.should('have.class', 'selected')
.get('.react-flow__node:last')
.click()
.should('have.class', 'selected')
.get('.react-flow__node:first')
.should('have.class', 'selected');
cy.get('body').type('{cmd}', { release: true });
});
// it('selects a node by click', () => {
// cy.get('.react-flow__node:first').click({ force: true }).should('have.class', 'selected');
// });
it('selects a node by click', () => {
cy.get('.react-flow__node:first').click({ force: true }).should('have.class', 'selected');
});
// it('deselects node', () => {
// cy.get('.react-flow__renderer').click('bottomLeft');
// cy.get('.react-flow__node:first').should('not.have.class', 'selected');
// });
it('deselects node', () => {
cy.get('.react-flow__renderer').click('bottomLeft');
cy.get('.react-flow__node:first').should('not.have.class', 'selected');
});
// it('selects an edge by click', () => {
// cy.get('.react-flow__edge:first').click({ force: true }).should('have.class', 'selected');
// });
it('selects an edge by click', () => {
cy.get('.react-flow__edge:first').click({ force: true }).should('have.class', 'selected');
});
// it('deselects edge', () => {
// cy.get('.react-flow__renderer').click('bottomLeft');
// cy.get('.react-flow__edge:first').should('not.have.class', 'selected');
// });
it('deselects edge', () => {
cy.get('.react-flow__renderer').click('bottomLeft');
cy.get('.react-flow__edge:first').should('not.have.class', 'selected');
});
// it('selects one node with a selection', () => {
// cy.get('body')
// .type('{shift}', { release: false })
// .wait(50)
// .get('.react-flow__pane')
// .trigger('mousedown', 1000, 50, { button: 0, force: true })
// .trigger('mousemove', 1, 400, { button: 0 })
// .wait(50)
// .trigger('mouseup', 1, 200, { force: true });
it('selects one node with a selection', () => {
cy.get('body')
.type('{shift}', { release: false })
.wait(50)
.get('.react-flow__pane')
.trigger('mousedown', 1000, 50, { button: 0, force: true })
.trigger('mousemove', 1, 400, { button: 0 })
.wait(50)
.trigger('mouseup', 1, 200, { force: true });
// cy.wait(100);
cy.wait(100);
// cy.get('.react-flow__node').eq(1).should('have.class', 'selected');
cy.get('.react-flow__node').eq(1).should('have.class', 'selected');
// cy.get('.react-flow__node').eq(0).should('have.not.class', 'selected');
cy.get('.react-flow__node').eq(0).should('have.not.class', 'selected');
// cy.get('.react-flow__nodesselection-rect');
cy.get('.react-flow__nodesselection-rect');
// cy.get('body').type('{shift}', { release: true, force: true });
// });
cy.get('body').type('{shift}', { release: true, force: true });
});
// it('selects all nodes', () => {
// cy.get('body')
// .type('{shift}', { release: false })
// .get('.react-flow__pane')
// .trigger('mousedown', 'topRight', { button: 0, force: true })
// .trigger('mousemove', 'bottomLeft', { button: 0 })
// .wait(50)
// .trigger('mouseup', 'bottomLeft', { force: true })
// .wait(50)
// .get('.react-flow__node')
// .should('have.class', 'selected')
// .get('.react-flow__nodesselection-rect');
it('selects all nodes', () => {
cy.get('body')
.type('{shift}', { release: false })
.get('.react-flow__pane')
.trigger('mousedown', 'topRight', { button: 0, force: true })
.trigger('mousemove', 'bottomLeft', { button: 0 })
.wait(50)
.trigger('mouseup', 'bottomLeft', { force: true })
.wait(50)
.get('.react-flow__node')
.should('have.class', 'selected')
.get('.react-flow__nodesselection-rect');
// cy.get('body').type('{shift}', { release: true });
// });
cy.get('body').type('{shift}', { release: true });
});
// it('removes selection', () => {
// cy.get('.react-flow__renderer').click('bottomLeft');
// cy.get('.react-flow__nodesselection-rect').should('not.exist');
// });
it('removes selection', () => {
cy.get('.react-flow__renderer').click('bottomLeft');
cy.get('.react-flow__nodesselection-rect').should('not.exist');
});
// it('selects an edge', () => {
// cy.get('.react-flow__edge:first').click({ force: true }).should('have.class', 'selected');
// });
it('selects an edge', () => {
cy.get('.react-flow__edge:first').click({ force: true }).should('have.class', 'selected');
});
it('drags a node', () => {
const styleBeforeDrag = Cypress.$('.react-flow__node:first').css('transform');
@@ -109,59 +109,59 @@ describe('Basic Flow Rendering', () => {
// cy.get('.react-flow__edge').should('have.length', 1);
// });
// it('connects nodes', () => {
// cy.get('.react-flow__node')
// .contains('Node 3')
// .find('.react-flow__handle.source')
// .trigger('mousedown', { button: 0 });
it('connects nodes', () => {
cy.get('.react-flow__node')
.contains('Node 3')
.find('.react-flow__handle.source')
.trigger('mousedown', { button: 0 });
// cy.get('.react-flow__node')
// .contains('Node 4')
// .find('.react-flow__handle.target')
// .trigger('mousemove', { force: true })
// .wait(50)
// .trigger('mouseup', { force: true });
cy.get('.react-flow__node')
.contains('Node 4')
.find('.react-flow__handle.target')
.trigger('mousemove', { force: true })
.wait(50)
.trigger('mouseup', { force: true });
// cy.get('.react-flow__edge').should('have.length', 3);
cy.get('.react-flow__edge').should('have.length', 3);
});
// @TODO: why does this fail since react18?
// it('removes an edge', () => {
// cy.get('.react-flow__edge:first').click();
// cy.get('body').type('{backspace}');
// cy.get('.react-flow__edge').should('have.length', 1);
// });
// // @TODO: why does this fail since react18?
// // it('removes an edge', () => {
// // cy.get('.react-flow__edge:first').click();
// // cy.get('body').type('{backspace}');
it('drags the pane', () => {
const styleBeforeDrag = Cypress.$('.react-flow__viewport').css('transform');
// // cy.get('.react-flow__edge').should('have.length', 1);
// // });
// for d3 we have to pass the window to the event
// https://github.com/cypress-io/cypress/issues/3441
cy.window().then((win) => {
cy.get('.react-flow__pane')
.trigger('mousedown', 'topLeft', { button: 0, view: win })
.trigger('mousemove', 'bottomLeft')
.wait(50)
.trigger('mouseup', { force: true, view: win })
.then(() => {
const styleAfterDrag = Cypress.$('.react-flow__viewport').css('transform');
expect(styleBeforeDrag).to.not.equal(styleAfterDrag);
});
});
});
// it('drags the pane', () => {
// const styleBeforeDrag = Cypress.$('.react-flow__viewport').css('transform');
it('zooms the pane', () => {
const styleBeforeZoom = Cypress.$('.react-flow__viewport').css('transform');
// // for d3 we have to pass the window to the event
// // https://github.com/cypress-io/cypress/issues/3441
// cy.window().then((win) => {
// cy.get('.react-flow__pane')
// .trigger('mousedown', 'topLeft', { button: 0, view: win })
// .trigger('mousemove', 'bottomLeft')
// .wait(50)
// .trigger('mouseup', { force: true, view: win })
// .then(() => {
// const styleAfterDrag = Cypress.$('.react-flow__viewport').css('transform');
// expect(styleBeforeDrag).to.not.equal(styleAfterDrag);
// });
// });
// });
// it('zooms the pane', () => {
// const styleBeforeZoom = Cypress.$('.react-flow__viewport').css('transform');
// cy.get('.react-flow__pane')
// .trigger('wheel', 'topLeft', { deltaY: -200 })
// .wait(50)
// .then(() => {
// const styleAfterZoom = Cypress.$('.react-flow__viewport').css('transform');
// expect(styleBeforeZoom).to.not.equal(styleAfterZoom);
// });
// });
cy.get('.react-flow__pane')
.trigger('wheel', 'topLeft', { deltaY: -200 })
.wait(50)
.then(() => {
const styleAfterZoom = Cypress.$('.react-flow__viewport').css('transform');
expect(styleBeforeZoom).to.not.equal(styleAfterZoom);
});
});
});
export {};