From fc967d81d93d73add49700f761aefb86676f3e1d Mon Sep 17 00:00:00 2001 From: Jack Date: Wed, 22 Nov 2023 20:34:23 +0800 Subject: [PATCH] Update E2E tests --- e2e_tests/integration/viz.spec.ts | 443 ++++++++++++++---------------- 1 file changed, 210 insertions(+), 233 deletions(-) diff --git a/e2e_tests/integration/viz.spec.ts b/e2e_tests/integration/viz.spec.ts index 1c3ee6cb422..5fdb21d4355 100644 --- a/e2e_tests/integration/viz.spec.ts +++ b/e2e_tests/integration/viz.spec.ts @@ -33,216 +33,216 @@ describe('Viz rendering', () => { cy.ensureConnection() }) - // it('shows legend with rel types + node labels on first render', () => { - // cy.executeCommand(':clear') - // cy.executeCommand( - // 'CREATE (a:TestLabel)-[:CONNECTS]->(b:TestLabel) RETURN a, b' - // ) - // cy.get('[data-testid="vizInspector"]', { timeout: 5000 }).contains( - // 'CONNECTS' - // ) - // cy.get('[data-testid="vizInspector"]', { timeout: 5000 }).contains( - // 'TestLabel' - // ) - // cy.executeCommand('MATCH (a:TestLabel) DETACH DELETE a') - // }) - // it('can change default color of nodes', () => { - // const selectorNodeLabelAll = - // '[data-testid="property-details-overview-node-label-*"]' - // cy.executeCommand(':clear') - // cy.executeCommand(':style reset') - // cy.executeCommand( - // 'CREATE (a:TestLabel)-[:CONNECTS]->(b:TestLabel) RETURN a, b' - // ) - // // Check that default color is set - // cy.get(selectorNodeLabelAll, { timeout: 5000 }).should( - // 'have.css', - // 'background-color', - // GREY - // ) - - // // Change color and make sure color is changed - // cy.get(selectorNodeLabelAll, { timeout: 5000 }).click() - // cy.get('[data-testid="select-color-2"]').click() - // cy.get('[data-testid="cypherFrameSidebarVisualization"]').click() // Close grass editor - - // cy.get(selectorNodeLabelAll, { timeout: 5000 }).should( - // 'have.css', - // 'background-color', - // ORANGE - // ) - // }) - // it('can change default color of relationships', () => { - // const selectorRelationshipsAll = `[data-testid="property-details-overview-relationship-type-*"]` - - // cy.executeCommand(':clear') - // cy.executeCommand(':style reset') - // cy.executeCommand( - // 'CREATE (a:TestLabel)-[:CONNECTS]->(b:TestLabel) RETURN a, b' - // ) - // // Check that default color is set - // cy.get(selectorRelationshipsAll, { timeout: 5000 }).should( - // 'have.css', - // 'background-color', - // GREY - // ) - - // // Change color and make sure color is changed - // cy.get(selectorRelationshipsAll, { timeout: 5000 }).click() - // cy.get('[data-testid="select-color-2"]').click() - // cy.get('[data-testid="cypherFrameSidebarVisualization"]').click() // Close grass editor - - // cy.get(selectorRelationshipsAll, { timeout: 5000 }).should( - // 'have.css', - // 'background-color', - // ORANGE - // ) - // }) - // it('can change styling of nodes with certain label', () => { - // const selectorNodeLabel = - // '[data-testid="property-details-overview-node-label-TestLabel"]' - // cy.executeCommand(':clear') - // cy.executeCommand(':style reset') - // cy.executeCommand( - // 'CREATE (a:TestLabel)-[:CONNECTS]->(b:TestLabel) RETURN a, b' - // ) - // // Check that default color is set - // cy.get(selectorNodeLabel, { timeout: 5000 }).should( - // 'have.css', - // 'background-color', - // PURPLE - // ) - - // // Change color and make sure color is changed - // cy.get(selectorNodeLabel, { timeout: 5000 }).click() - // cy.get('[data-testid="select-color-2"]').click() - // cy.get('[data-testid="cypherFrameSidebarVisualization"]').click() // Close grass editor - - // cy.get(selectorNodeLabel, { timeout: 5000 }).should( - // 'have.css', - // 'background-color', - // ORANGE - // ) - // }) - // it('can change styling of relationship of certain type', () => { - // const selectorRelationshipType = - // '[data-testid="property-details-overview-relationship-type-CONNECTS"]' - // cy.executeCommand(':clear') - // cy.executeCommand(':style reset') - // cy.executeCommand( - // 'CREATE (a:TestLabel)-[:CONNECTS]->(b:TestLabel) RETURN a, b' - // ) - // // Check that default color is set - // cy.get(selectorRelationshipType, { timeout: 5000 }).should( - // 'have.css', - // 'background-color', - // GREY - // ) - - // // Change color and make sure color is changed - // cy.get(selectorRelationshipType, { timeout: 5000 }).click() - // cy.get('[data-testid="select-color-2"]').click() - // cy.get('[data-testid="cypherFrameSidebarVisualization"]').click() // Close grass editor - - // cy.get(selectorRelationshipType, { timeout: 5000 }).should( - // 'have.css', - // 'background-color', - // ORANGE - // ) - // }) - // it('can zoom in with button', () => { - // cy.executeCommand(':clear') - // cy.executeCommand(`CREATE (a:TestLabel {name: 'testNode'}) RETURN a`, { - // parseSpecialCharSequences: false - // }) - - // const zoomOutButton = cy.get(`[aria-label="zoom-out"]`) - // zoomOutButton.click({ force: true }) - // zoomOutButton.wait(3000) - - // // Check that zoom in button increases the size of the node in the graph view - // cy.get('svg') - // .find(`[aria-label^="graph-node"]`) - // .then($el => $el[0].getBoundingClientRect().width) - // .then(width => { - // const originalWidth = width - // expect(originalWidth).to.be.greaterThan(0) - - // const zoomInButton = cy.get(`[aria-label="zoom-in"]`) - // zoomInButton.click() - - // cy.get('svg') - // .find(`[aria-label^="graph-node"]`) - // .then($el => $el[0].getBoundingClientRect().width) - // .then(newWidth => { - // return expect(newWidth).to.be.greaterThan(originalWidth) - // }) - // }) - // }) - // it('disables zoom in button after limit is reached', () => { - // cy.executeCommand(':clear') - // cy.executeCommand(`CREATE (a:TestLabel {name: 'testNode'}) RETURN a`, { - // parseSpecialCharSequences: false - // }) - - // // Multiple zoom will result in zoom reaching scale limit and the button to be disabled - // const zoomInButton = cy.get(`[aria-label="zoom-in"]`) - // zoomInButton.click({ force: true }) - // zoomInButton.click({ force: true }) - // zoomInButton.click({ force: true }) - // zoomInButton.click({ force: true }) - // zoomInButton.click({ force: true }) - - // cy.get(`[aria-label="zoom-in"]`).should('be.disabled') - // }) - // it('can zoom out with just mouse wheel in fullscreen', () => { - // cy.executeCommand(':clear') - // cy.executeCommand(`CREATE (a:TestLabel {name: 'testNode'}) RETURN a`, { - // parseSpecialCharSequences: false - // }) - - // // Enter fullscreen - // cy.get('article').find(`[title='Fullscreen']`).click() - // cy.get(`#svg-vis`).trigger('wheel', { deltaY: 3000 }) - - // cy.get(`[aria-label="zoom-out"]`).should('be.disabled') - - // // Leave fullscreen - // cy.get('article').find(`[title='Close fullscreen']`).click() - // }) - // it('can not zoom out with just mouse wheel when not in fullscreen', () => { - // cy.executeCommand(':clear') - // cy.executeCommand(`CREATE (a:TestLabel {name: 'testNode'}) RETURN a`, { - // parseSpecialCharSequences: false - // }) - - // cy.get(`#svg-vis`).trigger('wheel', { deltaY: 3000 }) - - // cy.get(`[aria-label="zoom-out"]`).should('be.enabled') - // }) - // it('displays wheel zoom info message which can be closed', () => { - // cy.executeCommand(':clear') - // cy.executeCommand( - // 'CREATE (a:TestLabel)-[:CONNECTS]->(b:TestLabel) RETURN a, b' - // ) - - // cy.get(`#svg-vis`).trigger('wheel', { deltaY: 3000 }) - - // cy.get('[data-testid=wheelZoomInfoCheckbox]').should('exist') - - // cy.get('[data-testid=wheelZoomInfoCheckbox]').click() - - // cy.get('[data-testid=wheelZoomInfoCheckbox]').should('not.exist') - // }) - // it('can zoom out when holding down shift and scrolling', () => { - // cy.executeCommand(':clear') - // cy.executeCommand(`CREATE (a:TestLabel {name: 'testNode'}) RETURN a`, { - // parseSpecialCharSequences: false - // }) - - // cy.get('#svg-vis').trigger('wheel', { deltaY: 3000, shiftKey: true }) - // cy.get(`[aria-label="zoom-out"]`).should('be.disabled') - // }) + it('shows legend with rel types + node labels on first render', () => { + cy.executeCommand(':clear') + cy.executeCommand( + 'CREATE (a:TestLabel)-[:CONNECTS]->(b:TestLabel) RETURN a, b' + ) + cy.get('[data-testid="vizInspector"]', { timeout: 5000 }).contains( + 'CONNECTS' + ) + cy.get('[data-testid="vizInspector"]', { timeout: 5000 }).contains( + 'TestLabel' + ) + cy.executeCommand('MATCH (a:TestLabel) DETACH DELETE a') + }) + it('can change default color of nodes', () => { + const selectorNodeLabelAll = + '[data-testid="property-details-overview-node-label-*"]' + cy.executeCommand(':clear') + cy.executeCommand(':style reset') + cy.executeCommand( + 'CREATE (a:TestLabel)-[:CONNECTS]->(b:TestLabel) RETURN a, b' + ) + // Check that default color is set + cy.get(selectorNodeLabelAll, { timeout: 5000 }).should( + 'have.css', + 'background-color', + GREY + ) + + // Change color and make sure color is changed + cy.get(selectorNodeLabelAll, { timeout: 5000 }).click() + cy.get('[data-testid="select-color-2"]').click() + cy.get('[data-testid="cypherFrameSidebarVisualization"]').click() // Close grass editor + + cy.get(selectorNodeLabelAll, { timeout: 5000 }).should( + 'have.css', + 'background-color', + ORANGE + ) + }) + it('can change default color of relationships', () => { + const selectorRelationshipsAll = `[data-testid="property-details-overview-relationship-type-*"]` + + cy.executeCommand(':clear') + cy.executeCommand(':style reset') + cy.executeCommand( + 'CREATE (a:TestLabel)-[:CONNECTS]->(b:TestLabel) RETURN a, b' + ) + // Check that default color is set + cy.get(selectorRelationshipsAll, { timeout: 5000 }).should( + 'have.css', + 'background-color', + GREY + ) + + // Change color and make sure color is changed + cy.get(selectorRelationshipsAll, { timeout: 5000 }).click() + cy.get('[data-testid="select-color-2"]').click() + cy.get('[data-testid="cypherFrameSidebarVisualization"]').click() // Close grass editor + + cy.get(selectorRelationshipsAll, { timeout: 5000 }).should( + 'have.css', + 'background-color', + ORANGE + ) + }) + it('can change styling of nodes with certain label', () => { + const selectorNodeLabel = + '[data-testid="property-details-overview-node-label-TestLabel"]' + cy.executeCommand(':clear') + cy.executeCommand(':style reset') + cy.executeCommand( + 'CREATE (a:TestLabel)-[:CONNECTS]->(b:TestLabel) RETURN a, b' + ) + // Check that default color is set + cy.get(selectorNodeLabel, { timeout: 5000 }).should( + 'have.css', + 'background-color', + PURPLE + ) + + // Change color and make sure color is changed + cy.get(selectorNodeLabel, { timeout: 5000 }).click() + cy.get('[data-testid="select-color-2"]').click() + cy.get('[data-testid="cypherFrameSidebarVisualization"]').click() // Close grass editor + + cy.get(selectorNodeLabel, { timeout: 5000 }).should( + 'have.css', + 'background-color', + ORANGE + ) + }) + it('can change styling of relationship of certain type', () => { + const selectorRelationshipType = + '[data-testid="property-details-overview-relationship-type-CONNECTS"]' + cy.executeCommand(':clear') + cy.executeCommand(':style reset') + cy.executeCommand( + 'CREATE (a:TestLabel)-[:CONNECTS]->(b:TestLabel) RETURN a, b' + ) + // Check that default color is set + cy.get(selectorRelationshipType, { timeout: 5000 }).should( + 'have.css', + 'background-color', + GREY + ) + + // Change color and make sure color is changed + cy.get(selectorRelationshipType, { timeout: 5000 }).click() + cy.get('[data-testid="select-color-2"]').click() + cy.get('[data-testid="cypherFrameSidebarVisualization"]').click() // Close grass editor + + cy.get(selectorRelationshipType, { timeout: 5000 }).should( + 'have.css', + 'background-color', + ORANGE + ) + }) + it('can zoom in with button', () => { + cy.executeCommand(':clear') + cy.executeCommand(`CREATE (a:TestLabel {name: 'testNode'}) RETURN a`, { + parseSpecialCharSequences: false + }) + + const zoomOutButton = cy.get(`[aria-label="zoom-out"]`) + zoomOutButton.click({ force: true }) + zoomOutButton.wait(3000) + + // Check that zoom in button increases the size of the node in the graph view + cy.get('svg') + .find(`[aria-label^="graph-node"]`) + .then($el => $el[0].getBoundingClientRect().width) + .then(width => { + const originalWidth = width + expect(originalWidth).to.be.greaterThan(0) + + const zoomInButton = cy.get(`[aria-label="zoom-in"]`) + zoomInButton.click() + + cy.get('svg') + .find(`[aria-label^="graph-node"]`) + .then($el => $el[0].getBoundingClientRect().width) + .then(newWidth => { + return expect(newWidth).to.be.greaterThan(originalWidth) + }) + }) + }) + it('disables zoom in button after limit is reached', () => { + cy.executeCommand(':clear') + cy.executeCommand(`CREATE (a:TestLabel {name: 'testNode'}) RETURN a`, { + parseSpecialCharSequences: false + }) + + // Multiple zoom will result in zoom reaching scale limit and the button to be disabled + const zoomInButton = cy.get(`[aria-label="zoom-in"]`) + zoomInButton.click({ force: true }) + zoomInButton.click({ force: true }) + zoomInButton.click({ force: true }) + zoomInButton.click({ force: true }) + zoomInButton.click({ force: true }) + + cy.get(`[aria-label="zoom-in"]`).should('be.disabled') + }) + it('can zoom out with just mouse wheel in fullscreen', () => { + cy.executeCommand(':clear') + cy.executeCommand(`CREATE (a:TestLabel {name: 'testNode'}) RETURN a`, { + parseSpecialCharSequences: false + }) + + // Enter fullscreen + cy.get('article').find(`[title='Fullscreen']`).click() + cy.get(`#svg-vis`).trigger('wheel', { deltaY: 3000 }) + + cy.get(`[aria-label="zoom-out"]`).should('be.disabled') + + // Leave fullscreen + cy.get('article').find(`[title='Close fullscreen']`).click() + }) + it('can not zoom out with just mouse wheel when not in fullscreen', () => { + cy.executeCommand(':clear') + cy.executeCommand(`CREATE (a:TestLabel {name: 'testNode'}) RETURN a`, { + parseSpecialCharSequences: false + }) + + cy.get(`#svg-vis`).trigger('wheel', { deltaY: 3000 }) + + cy.get(`[aria-label="zoom-out"]`).should('be.enabled') + }) + it('displays wheel zoom info message which can be closed', () => { + cy.executeCommand(':clear') + cy.executeCommand( + 'CREATE (a:TestLabel)-[:CONNECTS]->(b:TestLabel) RETURN a, b' + ) + + cy.get(`#svg-vis`).trigger('wheel', { deltaY: 3000 }) + + cy.get('[data-testid=wheelZoomInfoCheckbox]').should('exist') + + cy.get('[data-testid=wheelZoomInfoCheckbox]').click() + + cy.get('[data-testid=wheelZoomInfoCheckbox]').should('not.exist') + }) + it('can zoom out when holding down shift and scrolling', () => { + cy.executeCommand(':clear') + cy.executeCommand(`CREATE (a:TestLabel {name: 'testNode'}) RETURN a`, { + parseSpecialCharSequences: false + }) + + cy.get('#svg-vis').trigger('wheel', { deltaY: 3000, shiftKey: true }) + cy.get(`[aria-label="zoom-out"]`).should('be.disabled') + }) it('can create a new node by double clicking the canvas and the new node has "description" and "name" property fields', () => { cy.executeCommand(':clear') @@ -253,16 +253,13 @@ describe('Viz rendering', () => { cy.get('[data-testid="graphCanvas"]') .trigger('click', 200, 200, { force: true }) .trigger('dblclick', 200, 200, { force: true }) - .wait(3000) .executeCommand( `MATCH (n:TestLabel {name: "testNode"}) DETACH DELETE n`, { parseSpecialCharSequences: false } ) - .wait(3000) .executeCommand(`MATCH (n) RETURN n`, { parseSpecialCharSequences: false }) - .wait(3000) .get('[data-testid="nodeGroups"]', { timeout: 10000 }) .contains('New Node') .trigger('mouseover', { force: true }) @@ -275,24 +272,4 @@ describe('Viz rendering', () => { cy.executeCommand('MATCH (n) DETACH DELETE n') }) - - // it('new node by double-clicking the canvas has "description" and "name" property fields', () => { - // cy.executeCommand(':clear') - // cy.executeCommand(`CREATE (a:TestLabel {name: 'testNode'}) RETURN a`, { - // parseSpecialCharSequences: false - // }) - - // cy.get('[data-testid="graphCanvas"]') - // .trigger('click', 200, 200, { force: true }) - // .trigger('dblclick', 200, 200, { force: true }) - // .get('[data-testid="nodeGroups"]', { timeout: 5000 }) - // .contains('New Node') - // .trigger('mouseover', { force: true }) - // .trigger('mouseenter', { force: true }) - // .get('[data-testid="viz-details-pane-properties-table"]') - // .find('td:nth-child(1)') - // .should('have.text', 'descriptionname') - - // cy.executeCommand('MATCH (n) DETACH DELETE n') - // }) })