MoritzandGitHub
873fb50b19
* feat(props): add isInteractive * refactor(selection): dont allow if not interactive * feat(renderer): add class if is interactive * chore(inactive): add tests * refactor(inactive): no connection line, no edge selection closes #49
72 lines
1.9 KiB
JavaScript
72 lines
1.9 KiB
JavaScript
describe('Inactive Graph Rendering', () => {
|
|
it('renders a graph', () => {
|
|
cy.visit('/inactive');
|
|
|
|
cy.get('.react-flow__renderer');
|
|
cy.get('.react-flow__node').should('have.length', 4);
|
|
cy.get('.react-flow__edge').should('have.length', 2);
|
|
cy.get('.react-flow__node')
|
|
.children('div')
|
|
.children('.react-flow__handle');
|
|
});
|
|
|
|
it('tries to select a node by click', () => {
|
|
cy.get('.react-flow__node:first')
|
|
.click()
|
|
.should('have.not.class', 'selected');
|
|
});
|
|
|
|
it('tries to select an edge by click', () => {
|
|
cy.get('.react-flow__edge:first')
|
|
.click()
|
|
.should('have.not.class', 'selected');
|
|
});
|
|
|
|
it('tries to do a selection', () => {
|
|
cy.get('body')
|
|
.type('{shift}', { release: false })
|
|
.get('.react-flow__selectionpane')
|
|
.should('not.exist');
|
|
});
|
|
|
|
it('tries to drag a node', () => {
|
|
const styleBeforeDrag = Cypress.$('.react-flow__node:first').css('transform');
|
|
|
|
cy.drag('.react-flow__node:first', { x: 500, y: 25 }).then($el => {
|
|
const styleAfterDrag = $el.css('transform');
|
|
expect(styleBeforeDrag).to.equal(styleAfterDrag);
|
|
});
|
|
});
|
|
|
|
it('tries to connect nodes', () => {
|
|
cy.get('.react-flow__node')
|
|
.contains('Node 3')
|
|
.find('.react-flow__handle.source')
|
|
.trigger('mousedown', { which: 1 });
|
|
|
|
cy.get('.react-flow__node')
|
|
.contains('Node 4')
|
|
.find('.react-flow__handle.target')
|
|
.trigger('mousemove')
|
|
.trigger('mouseup', { force: true });
|
|
|
|
cy.get('.react-flow__edge').should('have.length', 2);
|
|
});
|
|
|
|
it('toggles interactive mode', () => {
|
|
cy.get('.react-flow__interactive').click();
|
|
});
|
|
|
|
it('selects a node by click', () => {
|
|
cy.get('.react-flow__node:first')
|
|
.click()
|
|
.should('have.class', 'selected');
|
|
});
|
|
|
|
it('selects an edge by click', () => {
|
|
cy.get('.react-flow__edge:first')
|
|
.click()
|
|
.should('have.class', 'selected');
|
|
});
|
|
});
|