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'); cy.get('.react-flow__node').children('.react-flow__handle');
}); });
// it('renders a grid', () => { it('renders a grid', () => {
// cy.get('.react-flow__background'); cy.get('.react-flow__background');
// }); });
// it('selects two nodes by clicks', () => { it('selects two nodes by clicks', () => {
// cy.get('body').type('{cmd}', { release: false }); cy.get('body').type('{cmd}', { release: false });
// cy.get('.react-flow__node:first') cy.get('.react-flow__node:first')
// .click() .click()
// .should('have.class', 'selected') .should('have.class', 'selected')
// .get('.react-flow__node:last') .get('.react-flow__node:last')
// .click() .click()
// .should('have.class', 'selected') .should('have.class', 'selected')
// .get('.react-flow__node:first') .get('.react-flow__node:first')
// .should('have.class', 'selected'); .should('have.class', 'selected');
// cy.get('body').type('{cmd}', { release: true }); cy.get('body').type('{cmd}', { release: true });
// }); });
// it('selects a node by click', () => { it('selects a node by click', () => {
// cy.get('.react-flow__node:first').click({ force: true }).should('have.class', 'selected'); cy.get('.react-flow__node:first').click({ force: true }).should('have.class', 'selected');
// }); });
// it('deselects node', () => { it('deselects node', () => {
// cy.get('.react-flow__renderer').click('bottomLeft'); cy.get('.react-flow__renderer').click('bottomLeft');
// cy.get('.react-flow__node:first').should('not.have.class', 'selected'); cy.get('.react-flow__node:first').should('not.have.class', 'selected');
// }); });
// it('selects an edge by click', () => { it('selects an edge by click', () => {
// cy.get('.react-flow__edge:first').click({ force: true }).should('have.class', 'selected'); cy.get('.react-flow__edge:first').click({ force: true }).should('have.class', 'selected');
// }); });
// it('deselects edge', () => { it('deselects edge', () => {
// cy.get('.react-flow__renderer').click('bottomLeft'); cy.get('.react-flow__renderer').click('bottomLeft');
// cy.get('.react-flow__edge:first').should('not.have.class', 'selected'); cy.get('.react-flow__edge:first').should('not.have.class', 'selected');
// }); });
// it('selects one node with a selection', () => { it('selects one node with a selection', () => {
// cy.get('body') cy.get('body')
// .type('{shift}', { release: false }) .type('{shift}', { release: false })
// .wait(50) .wait(50)
// .get('.react-flow__pane') .get('.react-flow__pane')
// .trigger('mousedown', 1000, 50, { button: 0, force: true }) .trigger('mousedown', 1000, 50, { button: 0, force: true })
// .trigger('mousemove', 1, 400, { button: 0 }) .trigger('mousemove', 1, 400, { button: 0 })
// .wait(50) .wait(50)
// .trigger('mouseup', 1, 200, { force: true }); .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', () => { it('selects all nodes', () => {
// cy.get('body') cy.get('body')
// .type('{shift}', { release: false }) .type('{shift}', { release: false })
// .get('.react-flow__pane') .get('.react-flow__pane')
// .trigger('mousedown', 'topRight', { button: 0, force: true }) .trigger('mousedown', 'topRight', { button: 0, force: true })
// .trigger('mousemove', 'bottomLeft', { button: 0 }) .trigger('mousemove', 'bottomLeft', { button: 0 })
// .wait(50) .wait(50)
// .trigger('mouseup', 'bottomLeft', { force: true }) .trigger('mouseup', 'bottomLeft', { force: true })
// .wait(50) .wait(50)
// .get('.react-flow__node') .get('.react-flow__node')
// .should('have.class', 'selected') .should('have.class', 'selected')
// .get('.react-flow__nodesselection-rect'); .get('.react-flow__nodesselection-rect');
// cy.get('body').type('{shift}', { release: true }); cy.get('body').type('{shift}', { release: true });
// }); });
// it('removes selection', () => { it('removes selection', () => {
// cy.get('.react-flow__renderer').click('bottomLeft'); cy.get('.react-flow__renderer').click('bottomLeft');
// cy.get('.react-flow__nodesselection-rect').should('not.exist'); cy.get('.react-flow__nodesselection-rect').should('not.exist');
// }); });
// it('selects an edge', () => { it('selects an edge', () => {
// cy.get('.react-flow__edge:first').click({ force: true }).should('have.class', 'selected'); cy.get('.react-flow__edge:first').click({ force: true }).should('have.class', 'selected');
// }); });
it('drags a node', () => { it('drags a node', () => {
const styleBeforeDrag = Cypress.$('.react-flow__node:first').css('transform'); 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); // cy.get('.react-flow__edge').should('have.length', 1);
// }); // });
// it('connects nodes', () => { it('connects nodes', () => {
// cy.get('.react-flow__node') cy.get('.react-flow__node')
// .contains('Node 3') .contains('Node 3')
// .find('.react-flow__handle.source') .find('.react-flow__handle.source')
// .trigger('mousedown', { button: 0 }); .trigger('mousedown', { button: 0 });
// cy.get('.react-flow__node') cy.get('.react-flow__node')
// .contains('Node 4') .contains('Node 4')
// .find('.react-flow__handle.target') .find('.react-flow__handle.target')
// .trigger('mousemove', { force: true }) .trigger('mousemove', { force: true })
// .wait(50) .wait(50)
// .trigger('mouseup', { force: true }); .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('drags the pane', () => {
// // it('removes an edge', () => { const styleBeforeDrag = Cypress.$('.react-flow__viewport').css('transform');
// // cy.get('.react-flow__edge:first').click();
// // cy.get('body').type('{backspace}');
// // 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', () => { it('zooms the pane', () => {
// const styleBeforeDrag = Cypress.$('.react-flow__viewport').css('transform'); const styleBeforeZoom = Cypress.$('.react-flow__viewport').css('transform');
// // for d3 we have to pass the window to the event cy.get('.react-flow__pane')
// // https://github.com/cypress-io/cypress/issues/3441 .trigger('wheel', 'topLeft', { deltaY: -200 })
// cy.window().then((win) => { .wait(50)
// cy.get('.react-flow__pane') .then(() => {
// .trigger('mousedown', 'topLeft', { button: 0, view: win }) const styleAfterZoom = Cypress.$('.react-flow__viewport').css('transform');
// .trigger('mousemove', 'bottomLeft') expect(styleBeforeZoom).to.not.equal(styleAfterZoom);
// .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);
// });
// });
}); });
export {}; export {};