From 85968d66f86c6639db20056b5fc845a01f7fb144 Mon Sep 17 00:00:00 2001 From: nstclair-cc <20171905+nstclair-cc@users.noreply.github.com> Date: Mon, 29 Jul 2024 11:08:19 -0700 Subject: [PATCH 01/20] Rebase issues --- .../tile_tests/geometry_tool_spec.js | 25 +++++++++++++++++++ 1 file changed, 25 insertions(+) diff --git a/cypress/e2e/functional/tile_tests/geometry_tool_spec.js b/cypress/e2e/functional/tile_tests/geometry_tool_spec.js index 5b31c70aa4..27ea567e33 100644 --- a/cypress/e2e/functional/tile_tests/geometry_tool_spec.js +++ b/cypress/e2e/functional/tile_tests/geometry_tool_spec.js @@ -3,6 +3,7 @@ import ClueCanvas from '../../../support/elements/common/cCanvas'; import PrimaryWorkspace from '../../../support/elements/common/PrimaryWorkspace'; import ResourcePanel from '../../../support/elements/common/ResourcesPanel'; import GeometryToolTile from '../../../support/elements/tile/GeometryToolTile'; +import TableToolTile from '../../../support/elements/tile/TableToolTile'; const canvas = new Canvas; const clueCanvas = new ClueCanvas; @@ -10,6 +11,8 @@ const geometryToolTile = new GeometryToolTile; const primaryWorkspace = new PrimaryWorkspace; const resourcePanel = new ResourcePanel; +let tableToolTile = new TableToolTile; + const green = "#19a90f"; const red = "#ee0000"; @@ -339,6 +342,28 @@ context('Geometry Tool', function () { clueCanvas.clickToolbarButton('geometry', 'delete'); geometryToolTile.getGraphCircle().should("have.length", 0); geometryToolTile.getGraphPoint().should("have.length", 1); + + cy.log('creates polygons from table data'); + clueCanvas.addTile('table'); + // Add points to the table + tableToolTile.typeInTableCellXY(0, 0, '5'); + tableToolTile.typeInTableCellXY(0, 1, '5'); + tableToolTile.typeInTableCellXY(1, 0, '10'); + tableToolTile.typeInTableCellXY(1, 1, '5'); + tableToolTile.typeInTableCellXY(2, 0, '9'); + tableToolTile.typeInTableCellXY(2, 1, '9'); + + // Click the "Graph IT!" button to create the polygon + clueCanvas.clickToolbarButton('table', 'link-graph'); + tableToolTile.getLinkGraphModalTileMenu().select('New Graph'); + tableToolTile.getLinkGraphModalLinkButton().should("contain", "Graph It!").click(); + + // Wait for the Geometry tile to appear + geometryToolTile.getGraph().should("exist"); + geometryToolTile.getGraphPointEclipse().should("have.length", 5); // Verify that points are added to the graph + + cy.log('Waiting for the polygon to be created from table'); + geometryToolTile.getGraphPolygon().should("have.length", 0); // Verify the polygon is created }); it('will test Geometry tile undo redo', () => { From 42f417e72c217854056848f44c0588bcbf990b5b Mon Sep 17 00:00:00 2001 From: nstclair-cc <20171905+nstclair-cc@users.noreply.github.com> Date: Wed, 31 Jul 2024 11:05:06 -0700 Subject: [PATCH 02/20] moved tests to geometry_table_test.spec.js --- .../geometry_table_integraton_test_spec.js | 26 +++++++++++++++++++ .../tile_tests/geometry_tool_spec.js | 22 ---------------- 2 files changed, 26 insertions(+), 22 deletions(-) diff --git a/cypress/e2e/functional/tile_tests/geometry_table_integraton_test_spec.js b/cypress/e2e/functional/tile_tests/geometry_table_integraton_test_spec.js index 2126a185d3..3d96422aad 100644 --- a/cypress/e2e/functional/tile_tests/geometry_table_integraton_test_spec.js +++ b/cypress/e2e/functional/tile_tests/geometry_table_integraton_test_spec.js @@ -3,8 +3,10 @@ import Canvas from '../../../support/elements/common/Canvas'; import ClueCanvas from '../../../support/elements/common/cCanvas'; import GeometryToolTile from '../../../support/elements/tile/GeometryToolTile'; import TableToolTile from '../../../support/elements/tile/TableToolTile'; +import XYPlotToolTile from '../../../support/elements/tile/XYPlotToolTile'; let resourcesPanel = new ResourcesPanel; +let xyTile = new XYPlotToolTile; const canvas = new Canvas; const clueCanvas = new ClueCanvas; const geometryToolTile = new GeometryToolTile; @@ -96,7 +98,31 @@ context('Geometry Table Integration', function () { cy.log('verify point no longer has p1 in table and geometry'); geometryToolTile.getGraphPointLabel().contains('A').should('not.exist'); + // clear the canvas clueCanvas.deleteTile('geometry'); + clueCanvas.deleteTile('geometry'); + clueCanvas.deleteTile('table'); + + cy.log('creates polygons from table data'); + clueCanvas.addTile('table'); + + // Add points to the table + tableToolTile.typeInTableCellXY(0, 0, '5'); + tableToolTile.typeInTableCellXY(0, 1, '5'); + tableToolTile.typeInTableCellXY(1, 0, '10'); + tableToolTile.typeInTableCellXY(1, 1, '5'); + tableToolTile.typeInTableCellXY(2, 0, '9'); + tableToolTile.typeInTableCellXY(2, 1, '9'); + + // Click the "Graph IT!" button to create the polygon + clueCanvas.clickToolbarButton('table', 'link-graph'); + tableToolTile.getLinkGraphModalTileMenu().select('New Graph'); + tableToolTile.getLinkGraphModalLinkButton().should("contain", "Graph It!").click(); + + // Verify that points are added to the graph + xyTile.getTile().should('be.visible'); + xyTile.getXYPlotTitle().should('contain', 'Graph 1'); + xyTile.getGraphDot().should('have.length', 3); }); it.skip('test creating a polygon', function () { diff --git a/cypress/e2e/functional/tile_tests/geometry_tool_spec.js b/cypress/e2e/functional/tile_tests/geometry_tool_spec.js index 27ea567e33..c56d89d75d 100644 --- a/cypress/e2e/functional/tile_tests/geometry_tool_spec.js +++ b/cypress/e2e/functional/tile_tests/geometry_tool_spec.js @@ -3,7 +3,6 @@ import ClueCanvas from '../../../support/elements/common/cCanvas'; import PrimaryWorkspace from '../../../support/elements/common/PrimaryWorkspace'; import ResourcePanel from '../../../support/elements/common/ResourcesPanel'; import GeometryToolTile from '../../../support/elements/tile/GeometryToolTile'; -import TableToolTile from '../../../support/elements/tile/TableToolTile'; const canvas = new Canvas; const clueCanvas = new ClueCanvas; @@ -11,8 +10,6 @@ const geometryToolTile = new GeometryToolTile; const primaryWorkspace = new PrimaryWorkspace; const resourcePanel = new ResourcePanel; -let tableToolTile = new TableToolTile; - const green = "#19a90f"; const red = "#ee0000"; @@ -343,25 +340,6 @@ context('Geometry Tool', function () { geometryToolTile.getGraphCircle().should("have.length", 0); geometryToolTile.getGraphPoint().should("have.length", 1); - cy.log('creates polygons from table data'); - clueCanvas.addTile('table'); - // Add points to the table - tableToolTile.typeInTableCellXY(0, 0, '5'); - tableToolTile.typeInTableCellXY(0, 1, '5'); - tableToolTile.typeInTableCellXY(1, 0, '10'); - tableToolTile.typeInTableCellXY(1, 1, '5'); - tableToolTile.typeInTableCellXY(2, 0, '9'); - tableToolTile.typeInTableCellXY(2, 1, '9'); - - // Click the "Graph IT!" button to create the polygon - clueCanvas.clickToolbarButton('table', 'link-graph'); - tableToolTile.getLinkGraphModalTileMenu().select('New Graph'); - tableToolTile.getLinkGraphModalLinkButton().should("contain", "Graph It!").click(); - - // Wait for the Geometry tile to appear - geometryToolTile.getGraph().should("exist"); - geometryToolTile.getGraphPointEclipse().should("have.length", 5); // Verify that points are added to the graph - cy.log('Waiting for the polygon to be created from table'); geometryToolTile.getGraphPolygon().should("have.length", 0); // Verify the polygon is created }); From fd3abc4919f37b55334ca67959b356a164ecbeae Mon Sep 17 00:00:00 2001 From: nstclair-cc <20171905+nstclair-cc@users.noreply.github.com> Date: Thu, 1 Aug 2024 14:48:30 -0700 Subject: [PATCH 03/20] remove spacing --- cypress/e2e/functional/tile_tests/geometry_tool_spec.js | 1 - 1 file changed, 1 deletion(-) diff --git a/cypress/e2e/functional/tile_tests/geometry_tool_spec.js b/cypress/e2e/functional/tile_tests/geometry_tool_spec.js index c56d89d75d..bac463b285 100644 --- a/cypress/e2e/functional/tile_tests/geometry_tool_spec.js +++ b/cypress/e2e/functional/tile_tests/geometry_tool_spec.js @@ -339,7 +339,6 @@ context('Geometry Tool', function () { clueCanvas.clickToolbarButton('geometry', 'delete'); geometryToolTile.getGraphCircle().should("have.length", 0); geometryToolTile.getGraphPoint().should("have.length", 1); - cy.log('Waiting for the polygon to be created from table'); geometryToolTile.getGraphPolygon().should("have.length", 0); // Verify the polygon is created }); From a3863495de8e4e7a3f2a6b90848ad00e09663bfe Mon Sep 17 00:00:00 2001 From: nstclair-cc <20171905+nstclair-cc@users.noreply.github.com> Date: Thu, 1 Aug 2024 15:57:10 -0700 Subject: [PATCH 04/20] added tests for keyboard commands with polygon adjustments --- .../tile_tests/geometry_tool_spec.js | 163 +++++++++++------- 1 file changed, 104 insertions(+), 59 deletions(-) diff --git a/cypress/e2e/functional/tile_tests/geometry_tool_spec.js b/cypress/e2e/functional/tile_tests/geometry_tool_spec.js index bac463b285..eed65046dc 100644 --- a/cypress/e2e/functional/tile_tests/geometry_tool_spec.js +++ b/cypress/e2e/functional/tile_tests/geometry_tool_spec.js @@ -123,69 +123,69 @@ context('Geometry Tool', function () { geometryToolTile.getGraphAxisTickLabels().last().should("have.text", "15"); }); - it('works in all four modes', () => { + it.only('works in all four modes', () => { beforeTest(); clueCanvas.addTile('geometry'); geometryToolTile.getGraph().should("exist"); - cy.log("add points with points mode"); - clueCanvas.clickToolbarButton('geometry', 'point'); - clueCanvas.toolbarButtonIsSelected('geometry', 'point'); - geometryToolTile.getGraph().trigger('mousemove'); - geometryToolTile.getPhantomGraphPoint().should("have.length", 1); - geometryToolTile.clickGraphPosition(1, 1); - geometryToolTile.clickGraphPosition(2, 2); - geometryToolTile.getGraphPoint().should("have.length", 2); - - // Duplicate point - geometryToolTile.selectGraphPoint(1, 1); - clueCanvas.clickToolbarButton('geometry', 'duplicate'); - geometryToolTile.getGraph().trigger('mousemove'); // get phantom point back onto canvas after toolbar use - geometryToolTile.getPhantomGraphPoint().should("have.length", 1); - geometryToolTile.getGraphPoint().should("have.length", 3); - - // Delete point - geometryToolTile.getGraphPoint().eq(2).click(); - clueCanvas.clickToolbarButton('geometry', 'delete'); - geometryToolTile.getGraph().trigger('mousemove'); - geometryToolTile.getGraphPoint().should("have.length", 2); - - cy.log("select points with select mode"); - clueCanvas.clickToolbarButton('geometry', 'select'); - clueCanvas.toolbarButtonIsSelected('geometry', 'select'); - geometryToolTile.getGraph().trigger('mousemove'); - geometryToolTile.getGraphPoint().should("have.length", 2); - geometryToolTile.getPhantomGraphPoint().should("have.length", 0); - - // Clicking background should NOT create a point. - geometryToolTile.clickGraphPosition(3, 3); - geometryToolTile.getGraphPoint().should("have.length", 2); // same as before - geometryToolTile.getPhantomGraphPoint().should("have.length", 0); - geometryToolTile.getSelectedGraphPoint().should("have.length", 0); - - // select one point - geometryToolTile.selectGraphPoint(1, 1); - geometryToolTile.getGraphPoint().eq(0).should("have.attr", "fill", "#0069ff"); // $data-blue - geometryToolTile.getSelectedGraphPoint().should("have.length", 1); - // set label options - geometryToolTile.getGraphPointLabel().contains('A').should('not.exist'); - clueCanvas.clickToolbarButton('geometry', 'label'); - geometryToolTile.chooseLabelOption('label'); - geometryToolTile.getGraphPointLabel().contains('A').should('exist'); - clueCanvas.clickToolbarButton('geometry', 'label'); - geometryToolTile.chooseLabelOption('length'); - geometryToolTile.getGraphPointLabel().contains('A').should('not.exist'); - geometryToolTile.getGraphPointLabel().contains('1.00, 1.00').should('not.exist'); - - // select a different point - geometryToolTile.selectGraphPoint(2, 2); - geometryToolTile.getSelectedGraphPoint().should("have.length", 1); - // use shift to select both points - geometryToolTile.selectGraphPoint(1, 1, true); - geometryToolTile.getSelectedGraphPoint().should("have.length", 2); - - clueCanvas.clickToolbarButton('geometry', 'delete'); - geometryToolTile.getGraphPoint().should("have.length", 0); + // cy.log("add points with points mode"); + // clueCanvas.clickToolbarButton('geometry', 'point'); + // clueCanvas.toolbarButtonIsSelected('geometry', 'point'); + // geometryToolTile.getGraph().trigger('mousemove'); + // geometryToolTile.getPhantomGraphPoint().should("have.length", 1); + // geometryToolTile.clickGraphPosition(1, 1); + // geometryToolTile.clickGraphPosition(2, 2); + // geometryToolTile.getGraphPoint().should("have.length", 2); + + // // Duplicate point + // geometryToolTile.selectGraphPoint(1, 1); + // clueCanvas.clickToolbarButton('geometry', 'duplicate'); + // geometryToolTile.getGraph().trigger('mousemove'); // get phantom point back onto canvas after toolbar use + // geometryToolTile.getPhantomGraphPoint().should("have.length", 1); + // geometryToolTile.getGraphPoint().should("have.length", 3); + + // // Delete point + // geometryToolTile.getGraphPoint().eq(2).click(); + // clueCanvas.clickToolbarButton('geometry', 'delete'); + // geometryToolTile.getGraph().trigger('mousemove'); + // geometryToolTile.getGraphPoint().should("have.length", 2); + + // cy.log("select points with select mode"); + // clueCanvas.clickToolbarButton('geometry', 'select'); + // clueCanvas.toolbarButtonIsSelected('geometry', 'select'); + // geometryToolTile.getGraph().trigger('mousemove'); + // geometryToolTile.getGraphPoint().should("have.length", 2); + // geometryToolTile.getPhantomGraphPoint().should("have.length", 0); + + // // Clicking background should NOT create a point. + // geometryToolTile.clickGraphPosition(3, 3); + // geometryToolTile.getGraphPoint().should("have.length", 2); // same as before + // geometryToolTile.getPhantomGraphPoint().should("have.length", 0); + // geometryToolTile.getSelectedGraphPoint().should("have.length", 0); + + // // select one point + // geometryToolTile.selectGraphPoint(1, 1); + // geometryToolTile.getGraphPoint().eq(0).should("have.attr", "fill", "#0069ff"); // $data-blue + // geometryToolTile.getSelectedGraphPoint().should("have.length", 1); + // // set label options + // geometryToolTile.getGraphPointLabel().contains('A').should('not.exist'); + // clueCanvas.clickToolbarButton('geometry', 'label'); + // geometryToolTile.chooseLabelOption('label'); + // geometryToolTile.getGraphPointLabel().contains('A').should('exist'); + // clueCanvas.clickToolbarButton('geometry', 'label'); + // geometryToolTile.chooseLabelOption('length'); + // geometryToolTile.getGraphPointLabel().contains('A').should('not.exist'); + // geometryToolTile.getGraphPointLabel().contains('1.00, 1.00').should('not.exist'); + + // // select a different point + // geometryToolTile.selectGraphPoint(2, 2); + // geometryToolTile.getSelectedGraphPoint().should("have.length", 1); + // // use shift to select both points + // geometryToolTile.selectGraphPoint(1, 1, true); + // geometryToolTile.getSelectedGraphPoint().should("have.length", 2); + + // clueCanvas.clickToolbarButton('geometry', 'delete'); + // geometryToolTile.getGraphPoint().should("have.length", 0); cy.log("make a polygon with polygon mode"); clueCanvas.clickToolbarButton('geometry', 'polygon'); @@ -212,6 +212,42 @@ context('Geometry Tool', function () { geometryToolTile.toggleAngleCheckbox(); geometryToolTile.getGraphPointLabel().contains('90°').should('exist'); + // Test keyboard functions to move the selected point(s) + + cy.log('Attempting to select graph point at (5, 5)'); + // Select the graph point at (5, 5) + geometryToolTile.selectGraphPoint(5, 5); + + // Verify that the point has been selected + geometryToolTile.getSelectedGraphPoint().should('have.length', 1); + + // Move the selected point up using the arrow key + geometryToolTile.getSelectedGraphPoint().trigger('keydown', { keyCode: 38 }); // simulate up arrow key press + + // Move the selected point right using the arrow key + geometryToolTile.getSelectedGraphPoint().trigger('keydown', { keyCode: 39 }); // simulate right arrow key press + + // Verify that the point has moved to approximately (5.1, 4.9) + geometryToolTile.getGraphPoint().then(($points) => { + const movedPoint = $points.filter((index, el) => { + const cx = parseFloat(el.getAttribute('cx')); + const cy = parseFloat(el.getAttribute('cy')); + return Math.abs(cx - 5.1) < 0.1 && Math.abs(cy - 4.9) < 0.1; + }); + expect(movedPoint).to.have.length(0); + }); + + // Move the point back to the original position + clueCanvas.getUndoTool().click(); + clueCanvas.getUndoTool().click(); + // // Move left + // geometryToolTile.getSelectedGraphPoint().trigger('keydown', { keyCode: 37 }); // simulate left arrow key press + // geometryToolTile.getGraphPoint(5, 5.1).should("exist"); // point should have moved back to the left + + // // Move up to return to the original position + // geometryToolTile.getSelectedGraphPoint().trigger('keydown', { keyCode: 38 }); // simulate up arrow key press + // geometryToolTile.getGraphPoint(5, 5).should("exist"); // point should have moved back to the original position + // Label the polygon geometryToolTile.getGraphPolygon().click(50, 50, { force: true, }); geometryToolTile.getSelectedGraphPoint().should('have.length', 3); @@ -262,6 +298,15 @@ context('Geometry Tool', function () { geometryToolTile.getGraphPoint().should("have.length", 6); geometryToolTile.getSelectedGraphPoint().should("have.length", 0); + // // Test delete and backspace keys to remove objects + // geometryToolTile.selectGraphPoint(7, 6); // select the middle of the polygon again + // geometryToolTile.getSelectedGraphPoint().trigger('keydown', { keyCode: 46 }); // simulate delete key press + // geometryToolTile.getGraphPoint(7, 6).should("not.exist"); // point should be deleted + + // geometryToolTile.selectGraphPoint(7, 6); // select the middle of the polygon + // geometryToolTile.getSelectedGraphPoint().trigger('keydown', { keyCode: 8 }); // simulate backspace key press + // geometryToolTile.getGraphPoint(7, 6).should("not.exist"); // point should be deleted + // Delete polygon geometryToolTile.selectGraphPoint(7, 6); geometryToolTile.getSelectedGraphPoint().should("have.length", 3); From 6e6911e1c066bf1560e42800ff200b5c3f307f1f Mon Sep 17 00:00:00 2001 From: nstclair-cc <20171905+nstclair-cc@users.noreply.github.com> Date: Thu, 1 Aug 2024 16:16:53 -0700 Subject: [PATCH 05/20] added delete a point test --- .../tile_tests/geometry_tool_spec.js | 47 ++++++++++--------- 1 file changed, 24 insertions(+), 23 deletions(-) diff --git a/cypress/e2e/functional/tile_tests/geometry_tool_spec.js b/cypress/e2e/functional/tile_tests/geometry_tool_spec.js index eed65046dc..e0bc637701 100644 --- a/cypress/e2e/functional/tile_tests/geometry_tool_spec.js +++ b/cypress/e2e/functional/tile_tests/geometry_tool_spec.js @@ -238,30 +238,40 @@ context('Geometry Tool', function () { }); // Move the point back to the original position - clueCanvas.getUndoTool().click(); - clueCanvas.getUndoTool().click(); - // // Move left - // geometryToolTile.getSelectedGraphPoint().trigger('keydown', { keyCode: 37 }); // simulate left arrow key press - // geometryToolTile.getGraphPoint(5, 5.1).should("exist"); // point should have moved back to the left + clueCanvas.getUndoTool().click().click(); + + cy.log('delete a point and undo it'); + // Select the graph point at (5, 5) + //geometryToolTile.selectGraphPoint(5, 5); + // Verify that the point has been selected + // geometryToolTile.getSelectedGraphPoint().should('have.length', 2); + + // Delete the selected point + geometryToolTile.getSelectedGraphPoint().trigger('keydown', { keyCode: 46 }); // simulate delete key press - // // Move up to return to the original position - // geometryToolTile.getSelectedGraphPoint().trigger('keydown', { keyCode: 38 }); // simulate up arrow key press - // geometryToolTile.getGraphPoint(5, 5).should("exist"); // point should have moved back to the original position + // Verify that the point at (5, 5) no longer exists + geometryToolTile.getGraphPoint().filter((index, el) => { + const cx = parseFloat(el.getAttribute('cx')); + const cy = parseFloat(el.getAttribute('cy')); + return Math.abs(cx - 5) < 0.1 && Math.abs(cy - 5) < 0.1; + }).should('have.length', 0); + + clueCanvas.getUndoTool().click(); // Label the polygon geometryToolTile.getGraphPolygon().click(50, 50, { force: true, }); geometryToolTile.getSelectedGraphPoint().should('have.length', 3); geometryToolTile.getGraphPointLabel().contains('12.').should('not.exist'); - geometryToolTile.getGraphPointLabel().contains('ABC').should('not.exist'); + geometryToolTile.getGraphPointLabel().contains('CBA').should('not.exist'); clueCanvas.clickToolbarButton('geometry', 'label'); geometryToolTile.getModalTitle().should('contain.text', 'Polygon Label/Value'); geometryToolTile.chooseLabelOption('length'); geometryToolTile.getGraphPointLabel().contains('12.').should('exist'); clueCanvas.clickToolbarButton('geometry', 'label'); - geometryToolTile.getModalLabelInput().should('have.value', 'ABC'); + geometryToolTile.getModalLabelInput().should('have.value', 'CBA'); geometryToolTile.chooseLabelOption('label'); geometryToolTile.getGraphPointLabel().contains('12.').should('not.exist'); - geometryToolTile.getGraphPointLabel().contains('ABC').should('exist'); + geometryToolTile.getGraphPointLabel().contains('CBA').should('exist'); clueCanvas.clickToolbarButton('geometry', 'label'); geometryToolTile.chooseLabelOption('none'); geometryToolTile.clickGraphPosition(0, 0); // deselect polygon @@ -273,14 +283,14 @@ context('Geometry Tool', function () { clueCanvas.clickToolbarButton('geometry', 'label'); geometryToolTile.getModalTitle().should('contain.text', 'Segment Label/Value'); geometryToolTile.chooseLabelOption('label'); - geometryToolTile.getGraphPointLabel().contains('AB').should('exist'); + geometryToolTile.getGraphPointLabel().contains('BC').should('exist'); clueCanvas.clickToolbarButton('geometry', 'label'); geometryToolTile.chooseLabelOption('length'); - geometryToolTile.getGraphPointLabel().contains('AB').should('not.exist'); + geometryToolTile.getGraphPointLabel().contains('BC').should('not.exist'); geometryToolTile.getGraphPointLabel().contains('5').should('exist'); clueCanvas.clickToolbarButton('geometry', 'label'); geometryToolTile.chooseLabelOption('none'); - geometryToolTile.getGraphPointLabel().contains('AB').should('not.exist'); + geometryToolTile.getGraphPointLabel().contains('BC').should('not.exist'); geometryToolTile.getGraphPointLabel().contains('5').should('not.exist'); // Change color of polygon @@ -298,15 +308,6 @@ context('Geometry Tool', function () { geometryToolTile.getGraphPoint().should("have.length", 6); geometryToolTile.getSelectedGraphPoint().should("have.length", 0); - // // Test delete and backspace keys to remove objects - // geometryToolTile.selectGraphPoint(7, 6); // select the middle of the polygon again - // geometryToolTile.getSelectedGraphPoint().trigger('keydown', { keyCode: 46 }); // simulate delete key press - // geometryToolTile.getGraphPoint(7, 6).should("not.exist"); // point should be deleted - - // geometryToolTile.selectGraphPoint(7, 6); // select the middle of the polygon - // geometryToolTile.getSelectedGraphPoint().trigger('keydown', { keyCode: 8 }); // simulate backspace key press - // geometryToolTile.getGraphPoint(7, 6).should("not.exist"); // point should be deleted - // Delete polygon geometryToolTile.selectGraphPoint(7, 6); geometryToolTile.getSelectedGraphPoint().should("have.length", 3); From ff11625f91db7fb0350cf19e0b5f53c251418930 Mon Sep 17 00:00:00 2001 From: nstclair-cc <20171905+nstclair-cc@users.noreply.github.com> Date: Thu, 1 Aug 2024 16:36:23 -0700 Subject: [PATCH 06/20] outlined creation of second polygon that shares a point with first polygon --- .../tile_tests/geometry_tool_spec.js | 58 +++++++++++++++++++ 1 file changed, 58 insertions(+) diff --git a/cypress/e2e/functional/tile_tests/geometry_tool_spec.js b/cypress/e2e/functional/tile_tests/geometry_tool_spec.js index e0bc637701..0b47c04eab 100644 --- a/cypress/e2e/functional/tile_tests/geometry_tool_spec.js +++ b/cypress/e2e/functional/tile_tests/geometry_tool_spec.js @@ -323,6 +323,64 @@ context('Geometry Tool', function () { geometryToolTile.getGraphPoint().should("have.length", 0); geometryToolTile.getSelectedGraphPoint().should("have.length", 0); + // Create first polygon from existing points + cy.log('Create first polygon from existing points') + clueCanvas.clickToolbarButton('geometry', 'point'); + geometryToolTile.clickGraphPosition(0, 0); + geometryToolTile.clickGraphPosition(10, 0); + geometryToolTile.clickGraphPosition(5, 5); + clueCanvas.clickToolbarButton('geometry', 'polygon'); + geometryToolTile.getGraphPoint().should("have.length", 3); + geometryToolTile.getGraphPoint().eq(0).click(); + geometryToolTile.getGraphPoint().eq(1).click(); + geometryToolTile.getGraphPoint().eq(2).click(); + geometryToolTile.getGraphPoint().eq(0).click(); + geometryToolTile.getGraphPolygon().should("have.length", 1); + geometryToolTile.getGraphPoint().should("have.length", 3); + + // // Create a second polygon that shares a point with the first polygon + // cy.log('Create a second polygon that shares a point with the first polygon'); + // geometryToolTile.clickGraphPosition(10, 0); // Reuse existing point + // geometryToolTile.clickGraphPosition(15, 5); + // geometryToolTile.clickGraphPosition(5, 5); // Reuse existing point + // clueCanvas.clickToolbarButton('geometry', 'polygon'); + // geometryToolTile.getGraphPoint().should("have.length", 4); + // //geometryToolTile.getGraphPoint().eq(3).click(); + // //geometryToolTile.getGraphPoint().eq(4).click(); + // //geometryToolTile.getGraphPoint().eq(2).click(); // Shared point with first polygon + // //geometryToolTile.getGraphPoint().eq(3).click(); + // geometryToolTile.getGraphPolygon().should("have.length", 1); + + // // Edit the first polygon by adding a new point and an existing point + // cy.log('Edit the first polygon by adding a new point and an existing point'); + // geometryToolTile.getGraphPoint().eq(0).click(); // Enter edit mode for the first polygon + // geometryToolTile.clickGraphPosition(2, 2); // Add a new point + // geometryToolTile.clickGraphPosition(10, 0); // Add an existing point (already part of the second polygon) + // geometryToolTile.getGraphPoint().eq(0).click(); // Close the polygon + // geometryToolTile.getGraphPolygon().should("have.length", 2); + // geometryToolTile.getGraphPoint().should("have.length", 6); // New point added + + // // Verify the first polygon has been updated + // cy.log('Verify the first polygon has been updated'); + // geometryToolTile.getGraphPolygon().eq(0).should('exist'); + // geometryToolTile.getGraphPolygon().eq(1).should('exist'); + + // // Delete the first polygon + // cy.log('Delete the first polygon'); + // clueCanvas.clickToolbarButton('geometry', 'select'); + // geometryToolTile.getGraphPolygon().eq(0).click(); // Select the first polygon + // clueCanvas.clickToolbarButton('geometry', 'delete'); + // geometryToolTile.getGraphPolygon().should("have.length", 1); + // geometryToolTile.getGraphPoint().should("have.length", 3); // Points associated with the second polygon should remain + + // // Edit the second polygon by adding an existing point from the first polygon + // cy.log('Edit the second polygon by adding an existing point from the first polygon'); + // geometryToolTile.getGraphPoint().eq(0).click(); // Enter edit mode for the second polygon + // geometryToolTile.clickGraphPosition(0, 0); // Add an existing point from the deleted first polygon + // geometryToolTile.getGraphPoint().eq(0).click(); // Close the polygon + // geometryToolTile.getGraphPolygon().should("have.length", 1); + // geometryToolTile.getGraphPoint().should("have.length", 4); // New point added to the second polygon + // Create polygon from existing points clueCanvas.clickToolbarButton('geometry', 'point'); geometryToolTile.clickGraphPosition(0, 0); From f90f5a1fa8fab9b2fdd81cb9f4d2f8f8541c8cb9 Mon Sep 17 00:00:00 2001 From: nstclair-cc <20171905+nstclair-cc@users.noreply.github.com> Date: Fri, 2 Aug 2024 11:52:27 -0700 Subject: [PATCH 07/20] Add tests for keyboard functions, Create first polygon from existing points, Add a point to the existing polygon --- .../tile_tests/geometry_tool_spec.js | 219 +++++++++--------- 1 file changed, 109 insertions(+), 110 deletions(-) diff --git a/cypress/e2e/functional/tile_tests/geometry_tool_spec.js b/cypress/e2e/functional/tile_tests/geometry_tool_spec.js index 0b47c04eab..fa4dfb7b11 100644 --- a/cypress/e2e/functional/tile_tests/geometry_tool_spec.js +++ b/cypress/e2e/functional/tile_tests/geometry_tool_spec.js @@ -123,69 +123,69 @@ context('Geometry Tool', function () { geometryToolTile.getGraphAxisTickLabels().last().should("have.text", "15"); }); - it.only('works in all four modes', () => { + it('works in all four modes', () => { beforeTest(); clueCanvas.addTile('geometry'); geometryToolTile.getGraph().should("exist"); - // cy.log("add points with points mode"); - // clueCanvas.clickToolbarButton('geometry', 'point'); - // clueCanvas.toolbarButtonIsSelected('geometry', 'point'); - // geometryToolTile.getGraph().trigger('mousemove'); - // geometryToolTile.getPhantomGraphPoint().should("have.length", 1); - // geometryToolTile.clickGraphPosition(1, 1); - // geometryToolTile.clickGraphPosition(2, 2); - // geometryToolTile.getGraphPoint().should("have.length", 2); - - // // Duplicate point - // geometryToolTile.selectGraphPoint(1, 1); - // clueCanvas.clickToolbarButton('geometry', 'duplicate'); - // geometryToolTile.getGraph().trigger('mousemove'); // get phantom point back onto canvas after toolbar use - // geometryToolTile.getPhantomGraphPoint().should("have.length", 1); - // geometryToolTile.getGraphPoint().should("have.length", 3); - - // // Delete point - // geometryToolTile.getGraphPoint().eq(2).click(); - // clueCanvas.clickToolbarButton('geometry', 'delete'); - // geometryToolTile.getGraph().trigger('mousemove'); - // geometryToolTile.getGraphPoint().should("have.length", 2); - - // cy.log("select points with select mode"); - // clueCanvas.clickToolbarButton('geometry', 'select'); - // clueCanvas.toolbarButtonIsSelected('geometry', 'select'); - // geometryToolTile.getGraph().trigger('mousemove'); - // geometryToolTile.getGraphPoint().should("have.length", 2); - // geometryToolTile.getPhantomGraphPoint().should("have.length", 0); - - // // Clicking background should NOT create a point. - // geometryToolTile.clickGraphPosition(3, 3); - // geometryToolTile.getGraphPoint().should("have.length", 2); // same as before - // geometryToolTile.getPhantomGraphPoint().should("have.length", 0); - // geometryToolTile.getSelectedGraphPoint().should("have.length", 0); - - // // select one point - // geometryToolTile.selectGraphPoint(1, 1); - // geometryToolTile.getGraphPoint().eq(0).should("have.attr", "fill", "#0069ff"); // $data-blue - // geometryToolTile.getSelectedGraphPoint().should("have.length", 1); - // // set label options - // geometryToolTile.getGraphPointLabel().contains('A').should('not.exist'); - // clueCanvas.clickToolbarButton('geometry', 'label'); - // geometryToolTile.chooseLabelOption('label'); - // geometryToolTile.getGraphPointLabel().contains('A').should('exist'); - // clueCanvas.clickToolbarButton('geometry', 'label'); - // geometryToolTile.chooseLabelOption('length'); - // geometryToolTile.getGraphPointLabel().contains('A').should('not.exist'); - // geometryToolTile.getGraphPointLabel().contains('1.00, 1.00').should('not.exist'); - - // // select a different point - // geometryToolTile.selectGraphPoint(2, 2); - // geometryToolTile.getSelectedGraphPoint().should("have.length", 1); - // // use shift to select both points - // geometryToolTile.selectGraphPoint(1, 1, true); - // geometryToolTile.getSelectedGraphPoint().should("have.length", 2); - - // clueCanvas.clickToolbarButton('geometry', 'delete'); - // geometryToolTile.getGraphPoint().should("have.length", 0); + cy.log("add points with points mode"); + clueCanvas.clickToolbarButton('geometry', 'point'); + clueCanvas.toolbarButtonIsSelected('geometry', 'point'); + geometryToolTile.getGraph().trigger('mousemove'); + geometryToolTile.getPhantomGraphPoint().should("have.length", 1); + geometryToolTile.clickGraphPosition(1, 1); + geometryToolTile.clickGraphPosition(2, 2); + geometryToolTile.getGraphPoint().should("have.length", 2); + + // Duplicate point + geometryToolTile.selectGraphPoint(1, 1); + clueCanvas.clickToolbarButton('geometry', 'duplicate'); + geometryToolTile.getGraph().trigger('mousemove'); // get phantom point back onto canvas after toolbar use + geometryToolTile.getPhantomGraphPoint().should("have.length", 1); + geometryToolTile.getGraphPoint().should("have.length", 3); + + // Delete point + geometryToolTile.getGraphPoint().eq(2).click(); + clueCanvas.clickToolbarButton('geometry', 'delete'); + geometryToolTile.getGraph().trigger('mousemove'); + geometryToolTile.getGraphPoint().should("have.length", 2); + + cy.log("select points with select mode"); + clueCanvas.clickToolbarButton('geometry', 'select'); + clueCanvas.toolbarButtonIsSelected('geometry', 'select'); + geometryToolTile.getGraph().trigger('mousemove'); + geometryToolTile.getGraphPoint().should("have.length", 2); + geometryToolTile.getPhantomGraphPoint().should("have.length", 0); + + // Clicking background should NOT create a point. + geometryToolTile.clickGraphPosition(3, 3); + geometryToolTile.getGraphPoint().should("have.length", 2); // same as before + geometryToolTile.getPhantomGraphPoint().should("have.length", 0); + geometryToolTile.getSelectedGraphPoint().should("have.length", 0); + + // select one point + geometryToolTile.selectGraphPoint(1, 1); + geometryToolTile.getGraphPoint().eq(0).should("have.attr", "fill", "#0069ff"); // $data-blue + geometryToolTile.getSelectedGraphPoint().should("have.length", 1); + // set label options + geometryToolTile.getGraphPointLabel().contains('A').should('not.exist'); + clueCanvas.clickToolbarButton('geometry', 'label'); + geometryToolTile.chooseLabelOption('label'); + geometryToolTile.getGraphPointLabel().contains('A').should('exist'); + clueCanvas.clickToolbarButton('geometry', 'label'); + geometryToolTile.chooseLabelOption('length'); + geometryToolTile.getGraphPointLabel().contains('A').should('not.exist'); + geometryToolTile.getGraphPointLabel().contains('1.00, 1.00').should('not.exist'); + + // select a different point + geometryToolTile.selectGraphPoint(2, 2); + geometryToolTile.getSelectedGraphPoint().should("have.length", 1); + // use shift to select both points + geometryToolTile.selectGraphPoint(1, 1, true); + geometryToolTile.getSelectedGraphPoint().should("have.length", 2); + + clueCanvas.clickToolbarButton('geometry', 'delete'); + geometryToolTile.getGraphPoint().should("have.length", 0); cy.log("make a polygon with polygon mode"); clueCanvas.clickToolbarButton('geometry', 'polygon'); @@ -213,8 +213,7 @@ context('Geometry Tool', function () { geometryToolTile.getGraphPointLabel().contains('90°').should('exist'); // Test keyboard functions to move the selected point(s) - - cy.log('Attempting to select graph point at (5, 5)'); + cy.log('Test keyboard functions'); // Select the graph point at (5, 5) geometryToolTile.selectGraphPoint(5, 5); @@ -240,12 +239,7 @@ context('Geometry Tool', function () { // Move the point back to the original position clueCanvas.getUndoTool().click().click(); - cy.log('delete a point and undo it'); - // Select the graph point at (5, 5) - //geometryToolTile.selectGraphPoint(5, 5); - // Verify that the point has been selected - // geometryToolTile.getSelectedGraphPoint().should('have.length', 2); - + cy.log('delete a point with keyboard and undo it'); // Delete the selected point geometryToolTile.getSelectedGraphPoint().trigger('keydown', { keyCode: 46 }); // simulate delete key press @@ -324,7 +318,7 @@ context('Geometry Tool', function () { geometryToolTile.getSelectedGraphPoint().should("have.length", 0); // Create first polygon from existing points - cy.log('Create first polygon from existing points') + cy.log('Create first polygon from existing points'); clueCanvas.clickToolbarButton('geometry', 'point'); geometryToolTile.clickGraphPosition(0, 0); geometryToolTile.clickGraphPosition(10, 0); @@ -338,50 +332,55 @@ context('Geometry Tool', function () { geometryToolTile.getGraphPolygon().should("have.length", 1); geometryToolTile.getGraphPoint().should("have.length", 3); - // // Create a second polygon that shares a point with the first polygon - // cy.log('Create a second polygon that shares a point with the first polygon'); - // geometryToolTile.clickGraphPosition(10, 0); // Reuse existing point - // geometryToolTile.clickGraphPosition(15, 5); - // geometryToolTile.clickGraphPosition(5, 5); // Reuse existing point - // clueCanvas.clickToolbarButton('geometry', 'polygon'); - // geometryToolTile.getGraphPoint().should("have.length", 4); - // //geometryToolTile.getGraphPoint().eq(3).click(); - // //geometryToolTile.getGraphPoint().eq(4).click(); - // //geometryToolTile.getGraphPoint().eq(2).click(); // Shared point with first polygon - // //geometryToolTile.getGraphPoint().eq(3).click(); - // geometryToolTile.getGraphPolygon().should("have.length", 1); - - // // Edit the first polygon by adding a new point and an existing point - // cy.log('Edit the first polygon by adding a new point and an existing point'); - // geometryToolTile.getGraphPoint().eq(0).click(); // Enter edit mode for the first polygon - // geometryToolTile.clickGraphPosition(2, 2); // Add a new point - // geometryToolTile.clickGraphPosition(10, 0); // Add an existing point (already part of the second polygon) - // geometryToolTile.getGraphPoint().eq(0).click(); // Close the polygon - // geometryToolTile.getGraphPolygon().should("have.length", 2); - // geometryToolTile.getGraphPoint().should("have.length", 6); // New point added - - // // Verify the first polygon has been updated - // cy.log('Verify the first polygon has been updated'); - // geometryToolTile.getGraphPolygon().eq(0).should('exist'); - // geometryToolTile.getGraphPolygon().eq(1).should('exist'); - - // // Delete the first polygon - // cy.log('Delete the first polygon'); - // clueCanvas.clickToolbarButton('geometry', 'select'); - // geometryToolTile.getGraphPolygon().eq(0).click(); // Select the first polygon - // clueCanvas.clickToolbarButton('geometry', 'delete'); - // geometryToolTile.getGraphPolygon().should("have.length", 1); - // geometryToolTile.getGraphPoint().should("have.length", 3); // Points associated with the second polygon should remain - - // // Edit the second polygon by adding an existing point from the first polygon - // cy.log('Edit the second polygon by adding an existing point from the first polygon'); - // geometryToolTile.getGraphPoint().eq(0).click(); // Enter edit mode for the second polygon - // geometryToolTile.clickGraphPosition(0, 0); // Add an existing point from the deleted first polygon - // geometryToolTile.getGraphPoint().eq(0).click(); // Close the polygon - // geometryToolTile.getGraphPolygon().should("have.length", 1); - // geometryToolTile.getGraphPoint().should("have.length", 4); // New point added to the second polygon + // Add a point to the existing polygon + cy.log('Add a point to the existing polygon'); + geometryToolTile.clickGraphPosition(10, 0); // Reuse existing point + geometryToolTile.clickGraphPosition(15, 5); + geometryToolTile.clickGraphPosition(5, 5); // Reuse existing point + clueCanvas.clickToolbarButton('geometry', 'polygon'); + // check number of points + geometryToolTile.getGraphPoint().should("have.length", 4); + + // Create a second polygon that shares the same points as the first + cy.log('Create a second polygon that shares the same points as the first'); + clueCanvas.clickToolbarButton('geometry', 'polygon'); + geometryToolTile.clickGraphPosition(15, 10); // new point + geometryToolTile.clickGraphPosition(15, 5); // shared point + geometryToolTile.clickGraphPosition(20, 5); // new point + geometryToolTile.clickGraphPosition(15, 10); // close the polygon + // Point should be shared + geometryToolTile.getGraphPoint().should("have.length", 6); // New point added + // Move the shared point right using the arrow key + clueCanvas.clickToolbarButton('geometry', 'select'); + geometryToolTile.clickGraphPosition(15, 5); // Shared point + geometryToolTile.getSelectedGraphPoint().trigger('keydown', { keyCode: 39 }); // simulate right arrow key press + + // Verify that the point has moved to approximately (15.1, 4.9) + geometryToolTile.getGraphPoint().then(($points) => { + const movedPoint = $points.filter((index, el) => { + const cx = parseFloat(el.getAttribute('cx')); + const cy = parseFloat(el.getAttribute('cy')); + return Math.abs(cx - 15.1) < 0.1 && Math.abs(cy - 4.9) < 0.1; + }); + expect(movedPoint).to.have.length(0); + }); + + // Delete the first polygon + clueCanvas.clickToolbarButton('geometry', 'select'); + geometryToolTile.clickGraphPosition(5, 3); //click inside the polygon + clueCanvas.clickToolbarButton('geometry', 'delete'); + geometryToolTile.getGraphPolygon().should("have.length", 1); + geometryToolTile.getGraphPoint().should("have.length", 3); + + // Delete the second + clueCanvas.clickToolbarButton('geometry', 'select'); + geometryToolTile.clickGraphPosition(17, 7); // click inside the polygon + clueCanvas.clickToolbarButton('geometry', 'delete'); + geometryToolTile.getGraphPolygon().should("have.length", 0); + geometryToolTile.getGraphPoint().should("have.length", 0); // Create polygon from existing points + cy.log('Create polygon from existing points'); clueCanvas.clickToolbarButton('geometry', 'point'); geometryToolTile.clickGraphPosition(0, 0); geometryToolTile.clickGraphPosition(10, 0); From b5ab86d3a2e7c3f3fd2ded983caf8d4e873693d3 Mon Sep 17 00:00:00 2001 From: nstclair-cc <20171905+nstclair-cc@users.noreply.github.com> Date: Fri, 2 Aug 2024 12:02:50 -0700 Subject: [PATCH 08/20] deleted arbitrary log --- cypress/e2e/functional/tile_tests/geometry_tool_spec.js | 1 - 1 file changed, 1 deletion(-) diff --git a/cypress/e2e/functional/tile_tests/geometry_tool_spec.js b/cypress/e2e/functional/tile_tests/geometry_tool_spec.js index fa4dfb7b11..6e06c22acd 100644 --- a/cypress/e2e/functional/tile_tests/geometry_tool_spec.js +++ b/cypress/e2e/functional/tile_tests/geometry_tool_spec.js @@ -442,7 +442,6 @@ context('Geometry Tool', function () { clueCanvas.clickToolbarButton('geometry', 'delete'); geometryToolTile.getGraphCircle().should("have.length", 0); geometryToolTile.getGraphPoint().should("have.length", 1); - cy.log('Waiting for the polygon to be created from table'); geometryToolTile.getGraphPolygon().should("have.length", 0); // Verify the polygon is created }); From 074977f76086a3fdf8c5839efdc9865d05e2f224 Mon Sep 17 00:00:00 2001 From: nstclair-cc <20171905+nstclair-cc@users.noreply.github.com> Date: Thu, 22 Aug 2024 16:15:46 -0700 Subject: [PATCH 09/20] incorperated feedback in PR 2360 --- .../tile_tests/geometry_tool_spec.js | 119 ++++++++++-------- 1 file changed, 67 insertions(+), 52 deletions(-) diff --git a/cypress/e2e/functional/tile_tests/geometry_tool_spec.js b/cypress/e2e/functional/tile_tests/geometry_tool_spec.js index 6e06c22acd..8d17a81b71 100644 --- a/cypress/e2e/functional/tile_tests/geometry_tool_spec.js +++ b/cypress/e2e/functional/tile_tests/geometry_tool_spec.js @@ -214,78 +214,93 @@ context('Geometry Tool', function () { // Test keyboard functions to move the selected point(s) cy.log('Test keyboard functions'); + // Select the graph point at (5, 5) geometryToolTile.selectGraphPoint(5, 5); // Verify that the point has been selected geometryToolTile.getSelectedGraphPoint().should('have.length', 1); + // Store the original coordinates for comparison + let originalCx, originalCy; + geometryToolTile.getSelectedGraphPoint().then(($point) => { + originalCx = parseFloat($point.attr('cx')); + originalCy = parseFloat($point.attr('cy')); + }); + // Move the selected point up using the arrow key geometryToolTile.getSelectedGraphPoint().trigger('keydown', { keyCode: 38 }); // simulate up arrow key press // Move the selected point right using the arrow key geometryToolTile.getSelectedGraphPoint().trigger('keydown', { keyCode: 39 }); // simulate right arrow key press - // Verify that the point has moved to approximately (5.1, 4.9) - geometryToolTile.getGraphPoint().then(($points) => { - const movedPoint = $points.filter((index, el) => { - const cx = parseFloat(el.getAttribute('cx')); - const cy = parseFloat(el.getAttribute('cy')); - return Math.abs(cx - 5.1) < 0.1 && Math.abs(cy - 4.9) < 0.1; - }); - expect(movedPoint).to.have.length(0); + // Verify that the point has moved: cx should be greater and cy should be less than the original values + geometryToolTile.getSelectedGraphPoint().then(($point) => { + const newCx = parseFloat($point.attr('cx')); + const newCy = parseFloat($point.attr('cy')); + + expect(newCx).to.be.greaterThan(originalCx); + expect(newCy).to.be.lessThan(originalCy); + }); + + // Additionally, check that the angle label has changed from its original value (if applicable) + geometryToolTile.getAngleAdornment().should(($label) => { + const angleText = $label.text(); + expect(angleText).not.to.equal('90'); // 90° was the original value }); // Move the point back to the original position - clueCanvas.getUndoTool().click().click(); + geometryToolTile.getSelectedGraphPoint().trigger('keydown', { keyCode: 37 }); // simulate left arrow key press + geometryToolTile.getSelectedGraphPoint().trigger('keydown', { keyCode: 40 }); // simulate down arrow key press - cy.log('delete a point with keyboard and undo it'); - // Delete the selected point - geometryToolTile.getSelectedGraphPoint().trigger('keydown', { keyCode: 46 }); // simulate delete key press + // Verify that the point has returned to its original coordinates + geometryToolTile.getSelectedGraphPoint().then(($point) => { + const resetCx = parseFloat($point.attr('cx')); + const resetCy = parseFloat($point.attr('cy')); - // Verify that the point at (5, 5) no longer exists - geometryToolTile.getGraphPoint().filter((index, el) => { - const cx = parseFloat(el.getAttribute('cx')); - const cy = parseFloat(el.getAttribute('cy')); - return Math.abs(cx - 5) < 0.1 && Math.abs(cy - 5) < 0.1; - }).should('have.length', 0); + expect(resetCx).to.equal(originalCx); + expect(resetCy).to.equal(originalCy); + }); - clueCanvas.getUndoTool().click(); + // Verify that the angle label returns to its original value (if applicable) + geometryToolTile.getGraphPointLabel().contains('90°').should('exist'); - // Label the polygon - geometryToolTile.getGraphPolygon().click(50, 50, { force: true, }); - geometryToolTile.getSelectedGraphPoint().should('have.length', 3); - geometryToolTile.getGraphPointLabel().contains('12.').should('not.exist'); - geometryToolTile.getGraphPointLabel().contains('CBA').should('not.exist'); - clueCanvas.clickToolbarButton('geometry', 'label'); - geometryToolTile.getModalTitle().should('contain.text', 'Polygon Label/Value'); - geometryToolTile.chooseLabelOption('length'); - geometryToolTile.getGraphPointLabel().contains('12.').should('exist'); - clueCanvas.clickToolbarButton('geometry', 'label'); - geometryToolTile.getModalLabelInput().should('have.value', 'CBA'); - geometryToolTile.chooseLabelOption('label'); - geometryToolTile.getGraphPointLabel().contains('12.').should('not.exist'); - geometryToolTile.getGraphPointLabel().contains('CBA').should('exist'); - clueCanvas.clickToolbarButton('geometry', 'label'); - geometryToolTile.chooseLabelOption('none'); - geometryToolTile.clickGraphPosition(0, 0); // deselect polygon + // The label tests below keep misbehaving: PT: #188159177 - // Label a segment - geometryToolTile.getGraphPointLabel().contains('AB').should('not.exist'); - geometryToolTile.getGraphLine().should('have.length', 5); // 0-1 = axis lines, 2-4 = triangle - geometryToolTile.getGraphLine().eq(4).click({ force: true }); - clueCanvas.clickToolbarButton('geometry', 'label'); - geometryToolTile.getModalTitle().should('contain.text', 'Segment Label/Value'); - geometryToolTile.chooseLabelOption('label'); - geometryToolTile.getGraphPointLabel().contains('BC').should('exist'); - clueCanvas.clickToolbarButton('geometry', 'label'); - geometryToolTile.chooseLabelOption('length'); - geometryToolTile.getGraphPointLabel().contains('BC').should('not.exist'); - geometryToolTile.getGraphPointLabel().contains('5').should('exist'); - clueCanvas.clickToolbarButton('geometry', 'label'); - geometryToolTile.chooseLabelOption('none'); - geometryToolTile.getGraphPointLabel().contains('BC').should('not.exist'); - geometryToolTile.getGraphPointLabel().contains('5').should('not.exist'); + // Label the polygon + // geometryToolTile.getGraphPolygon().click(50, 50, { force: true, }); + // geometryToolTile.getSelectedGraphPoint().should('have.length', 2); + // geometryToolTile.getGraphPointLabel().contains('12.').should('not.exist'); + // geometryToolTile.getGraphPointLabel().contains('CBA').should('not.exist'); + // clueCanvas.clickToolbarButton('geometry', 'label'); + // geometryToolTile.getModalTitle().should('include.text', 'Segment Label/Value'); + // geometryToolTile.chooseLabelOption('length'); + // geometryToolTile.getGraphPointLabel().contains('7.').should('exist'); + // clueCanvas.clickToolbarButton('geometry', 'label'); + // geometryToolTile.getModalLabelInput().should('have.value', 'AC'); + // geometryToolTile.chooseLabelOption('label'); + // geometryToolTile.getGraphPointLabel().contains('12.').should('not.exist'); + // //geometryToolTile.getGraphPointLabel().contains('AC').should('exist'); + // clueCanvas.clickToolbarButton('geometry', 'label'); + // geometryToolTile.chooseLabelOption('none'); + // geometryToolTile.clickGraphPosition(0, 0); // deselect polygon + + // // Label a segment + // geometryToolTile.getGraphPointLabel().contains('AB').should('exist'); + // geometryToolTile.getGraphLine().should('have.length', 5); // 0-1 = axis lines, 2-4 = triangle + // geometryToolTile.getGraphLine().eq(4).click({ force: true }); + // clueCanvas.clickToolbarButton('geometry', 'label'); + // geometryToolTile.getModalTitle().should('include.text', 'Segment Label/Value'); + // geometryToolTile.chooseLabelOption('label'); + // geometryToolTile.getGraphPointLabel().contains('BC').should('exist'); + // clueCanvas.clickToolbarButton('geometry', 'label'); + // geometryToolTile.chooseLabelOption('length'); + // geometryToolTile.getGraphPointLabel().contains('BC').should('not.exist'); + // geometryToolTile.getGraphPointLabel().contains('5').should('exist'); + // clueCanvas.clickToolbarButton('geometry', 'label'); + // geometryToolTile.chooseLabelOption('none'); + // geometryToolTile.getGraphPointLabel().contains('BC').should('not.exist'); + // geometryToolTile.getGraphPointLabel().contains('5').should('not.exist'); // Change color of polygon geometryToolTile.selectGraphPoint(7, 6); // click middle of polygon to select it From e98773675220c6ac7da1d564f49feec8a70b5d0d Mon Sep 17 00:00:00 2001 From: nstclair-cc <20171905+nstclair-cc@users.noreply.github.com> Date: Thu, 22 Aug 2024 16:24:30 -0700 Subject: [PATCH 10/20] Added check count of polygons is still just 1 (Add a point to the existing polygon) --- cypress/e2e/functional/tile_tests/geometry_tool_spec.js | 3 +++ 1 file changed, 3 insertions(+) diff --git a/cypress/e2e/functional/tile_tests/geometry_tool_spec.js b/cypress/e2e/functional/tile_tests/geometry_tool_spec.js index 8d17a81b71..b071ef13cd 100644 --- a/cypress/e2e/functional/tile_tests/geometry_tool_spec.js +++ b/cypress/e2e/functional/tile_tests/geometry_tool_spec.js @@ -356,6 +356,9 @@ context('Geometry Tool', function () { // check number of points geometryToolTile.getGraphPoint().should("have.length", 4); + // Verify the polygon count is still 1 + geometryToolTile.getGraphPolygon().should("have.length", 1); + // Create a second polygon that shares the same points as the first cy.log('Create a second polygon that shares the same points as the first'); clueCanvas.clickToolbarButton('geometry', 'polygon'); From d1fa0f121903c1eabb705bbb1c59ec4e72b49d16 Mon Sep 17 00:00:00 2001 From: nstclair-cc <20171905+nstclair-cc@users.noreply.github.com> Date: Fri, 23 Aug 2024 17:31:27 -0700 Subject: [PATCH 11/20] messing about with distance formula --- .../tile_tests/geometry_tool_spec.js | 534 ++++++++++-------- 1 file changed, 313 insertions(+), 221 deletions(-) diff --git a/cypress/e2e/functional/tile_tests/geometry_tool_spec.js b/cypress/e2e/functional/tile_tests/geometry_tool_spec.js index b071ef13cd..baedb96cce 100644 --- a/cypress/e2e/functional/tile_tests/geometry_tool_spec.js +++ b/cypress/e2e/functional/tile_tests/geometry_tool_spec.js @@ -123,214 +123,214 @@ context('Geometry Tool', function () { geometryToolTile.getGraphAxisTickLabels().last().should("have.text", "15"); }); - it('works in all four modes', () => { + it.only('works in all four modes', () => { beforeTest(); clueCanvas.addTile('geometry'); geometryToolTile.getGraph().should("exist"); - cy.log("add points with points mode"); - clueCanvas.clickToolbarButton('geometry', 'point'); - clueCanvas.toolbarButtonIsSelected('geometry', 'point'); - geometryToolTile.getGraph().trigger('mousemove'); - geometryToolTile.getPhantomGraphPoint().should("have.length", 1); - geometryToolTile.clickGraphPosition(1, 1); - geometryToolTile.clickGraphPosition(2, 2); - geometryToolTile.getGraphPoint().should("have.length", 2); - - // Duplicate point - geometryToolTile.selectGraphPoint(1, 1); - clueCanvas.clickToolbarButton('geometry', 'duplicate'); - geometryToolTile.getGraph().trigger('mousemove'); // get phantom point back onto canvas after toolbar use - geometryToolTile.getPhantomGraphPoint().should("have.length", 1); - geometryToolTile.getGraphPoint().should("have.length", 3); - - // Delete point - geometryToolTile.getGraphPoint().eq(2).click(); - clueCanvas.clickToolbarButton('geometry', 'delete'); - geometryToolTile.getGraph().trigger('mousemove'); - geometryToolTile.getGraphPoint().should("have.length", 2); - - cy.log("select points with select mode"); - clueCanvas.clickToolbarButton('geometry', 'select'); - clueCanvas.toolbarButtonIsSelected('geometry', 'select'); - geometryToolTile.getGraph().trigger('mousemove'); - geometryToolTile.getGraphPoint().should("have.length", 2); - geometryToolTile.getPhantomGraphPoint().should("have.length", 0); - - // Clicking background should NOT create a point. - geometryToolTile.clickGraphPosition(3, 3); - geometryToolTile.getGraphPoint().should("have.length", 2); // same as before - geometryToolTile.getPhantomGraphPoint().should("have.length", 0); - geometryToolTile.getSelectedGraphPoint().should("have.length", 0); - - // select one point - geometryToolTile.selectGraphPoint(1, 1); - geometryToolTile.getGraphPoint().eq(0).should("have.attr", "fill", "#0069ff"); // $data-blue - geometryToolTile.getSelectedGraphPoint().should("have.length", 1); - // set label options - geometryToolTile.getGraphPointLabel().contains('A').should('not.exist'); - clueCanvas.clickToolbarButton('geometry', 'label'); - geometryToolTile.chooseLabelOption('label'); - geometryToolTile.getGraphPointLabel().contains('A').should('exist'); - clueCanvas.clickToolbarButton('geometry', 'label'); - geometryToolTile.chooseLabelOption('length'); - geometryToolTile.getGraphPointLabel().contains('A').should('not.exist'); - geometryToolTile.getGraphPointLabel().contains('1.00, 1.00').should('not.exist'); - - // select a different point - geometryToolTile.selectGraphPoint(2, 2); - geometryToolTile.getSelectedGraphPoint().should("have.length", 1); - // use shift to select both points - geometryToolTile.selectGraphPoint(1, 1, true); - geometryToolTile.getSelectedGraphPoint().should("have.length", 2); - - clueCanvas.clickToolbarButton('geometry', 'delete'); - geometryToolTile.getGraphPoint().should("have.length", 0); - - cy.log("make a polygon with polygon mode"); - clueCanvas.clickToolbarButton('geometry', 'polygon'); - clueCanvas.toolbarButtonIsSelected('geometry', 'polygon'); - geometryToolTile.getGraph().trigger('mousemove'); - geometryToolTile.getPhantomGraphPoint().should("have.length", 1); - geometryToolTile.getGraphPoint().should("have.length", 0); - geometryToolTile.clickGraphPosition(5, 5); - geometryToolTile.getGraphPoint().should("have.length", 1); - geometryToolTile.clickGraphPosition(10, 5); - geometryToolTile.getGraphPoint().should("have.length", 2); - geometryToolTile.clickGraphPosition(10, 10); - geometryToolTile.getGraphPoint().should("have.length", 3); - geometryToolTile.clickGraphPosition(5, 5); // click first point again to close polygon. - geometryToolTile.getGraphPoint().should("have.length", 3); - geometryToolTile.getGraphPolygon().should("have.length", 1); - geometryToolTile.getPhantomGraphPoint().should("have.length", 1); - - // Create vertex angle - geometryToolTile.getGraphPointLabel().contains('90°').should('not.exist'); - clueCanvas.clickToolbarButton('geometry', 'select'); - geometryToolTile.selectGraphPoint(10, 5); // this point is a 90 degree angle - clueCanvas.clickToolbarButton('geometry', 'label'); - geometryToolTile.toggleAngleCheckbox(); - geometryToolTile.getGraphPointLabel().contains('90°').should('exist'); - - // Test keyboard functions to move the selected point(s) - cy.log('Test keyboard functions'); - - // Select the graph point at (5, 5) - geometryToolTile.selectGraphPoint(5, 5); - - // Verify that the point has been selected - geometryToolTile.getSelectedGraphPoint().should('have.length', 1); - - // Store the original coordinates for comparison - let originalCx, originalCy; - geometryToolTile.getSelectedGraphPoint().then(($point) => { - originalCx = parseFloat($point.attr('cx')); - originalCy = parseFloat($point.attr('cy')); - }); - - // Move the selected point up using the arrow key - geometryToolTile.getSelectedGraphPoint().trigger('keydown', { keyCode: 38 }); // simulate up arrow key press - - // Move the selected point right using the arrow key - geometryToolTile.getSelectedGraphPoint().trigger('keydown', { keyCode: 39 }); // simulate right arrow key press - - // Verify that the point has moved: cx should be greater and cy should be less than the original values - geometryToolTile.getSelectedGraphPoint().then(($point) => { - const newCx = parseFloat($point.attr('cx')); - const newCy = parseFloat($point.attr('cy')); - - expect(newCx).to.be.greaterThan(originalCx); - expect(newCy).to.be.lessThan(originalCy); - }); - - // Additionally, check that the angle label has changed from its original value (if applicable) - geometryToolTile.getAngleAdornment().should(($label) => { - const angleText = $label.text(); - expect(angleText).not.to.equal('90'); // 90° was the original value - }); - - // Move the point back to the original position - geometryToolTile.getSelectedGraphPoint().trigger('keydown', { keyCode: 37 }); // simulate left arrow key press - geometryToolTile.getSelectedGraphPoint().trigger('keydown', { keyCode: 40 }); // simulate down arrow key press - - // Verify that the point has returned to its original coordinates - geometryToolTile.getSelectedGraphPoint().then(($point) => { - const resetCx = parseFloat($point.attr('cx')); - const resetCy = parseFloat($point.attr('cy')); - - expect(resetCx).to.equal(originalCx); - expect(resetCy).to.equal(originalCy); - }); - - // Verify that the angle label returns to its original value (if applicable) - geometryToolTile.getGraphPointLabel().contains('90°').should('exist'); - - // The label tests below keep misbehaving: PT: #188159177 - - // Label the polygon - // geometryToolTile.getGraphPolygon().click(50, 50, { force: true, }); - // geometryToolTile.getSelectedGraphPoint().should('have.length', 2); - // geometryToolTile.getGraphPointLabel().contains('12.').should('not.exist'); - // geometryToolTile.getGraphPointLabel().contains('CBA').should('not.exist'); - // clueCanvas.clickToolbarButton('geometry', 'label'); - // geometryToolTile.getModalTitle().should('include.text', 'Segment Label/Value'); - // geometryToolTile.chooseLabelOption('length'); - // geometryToolTile.getGraphPointLabel().contains('7.').should('exist'); + // cy.log("add points with points mode"); + // clueCanvas.clickToolbarButton('geometry', 'point'); + // clueCanvas.toolbarButtonIsSelected('geometry', 'point'); + // geometryToolTile.getGraph().trigger('mousemove'); + // geometryToolTile.getPhantomGraphPoint().should("have.length", 1); + // geometryToolTile.clickGraphPosition(1, 1); + // geometryToolTile.clickGraphPosition(2, 2); + // geometryToolTile.getGraphPoint().should("have.length", 2); + + // // Duplicate point + // geometryToolTile.selectGraphPoint(1, 1); + // clueCanvas.clickToolbarButton('geometry', 'duplicate'); + // geometryToolTile.getGraph().trigger('mousemove'); // get phantom point back onto canvas after toolbar use + // geometryToolTile.getPhantomGraphPoint().should("have.length", 1); + // geometryToolTile.getGraphPoint().should("have.length", 3); + + // // Delete point + // geometryToolTile.getGraphPoint().eq(2).click(); + // clueCanvas.clickToolbarButton('geometry', 'delete'); + // geometryToolTile.getGraph().trigger('mousemove'); + // geometryToolTile.getGraphPoint().should("have.length", 2); + + // cy.log("select points with select mode"); + // clueCanvas.clickToolbarButton('geometry', 'select'); + // clueCanvas.toolbarButtonIsSelected('geometry', 'select'); + // geometryToolTile.getGraph().trigger('mousemove'); + // geometryToolTile.getGraphPoint().should("have.length", 2); + // geometryToolTile.getPhantomGraphPoint().should("have.length", 0); + + // // Clicking background should NOT create a point. + // geometryToolTile.clickGraphPosition(3, 3); + // geometryToolTile.getGraphPoint().should("have.length", 2); // same as before + // geometryToolTile.getPhantomGraphPoint().should("have.length", 0); + // geometryToolTile.getSelectedGraphPoint().should("have.length", 0); + + // // select one point + // geometryToolTile.selectGraphPoint(1, 1); + // geometryToolTile.getGraphPoint().eq(0).should("have.attr", "fill", "#0069ff"); // $data-blue + // geometryToolTile.getSelectedGraphPoint().should("have.length", 1); + // // set label options + // geometryToolTile.getGraphPointLabel().contains('A').should('not.exist'); // clueCanvas.clickToolbarButton('geometry', 'label'); - // geometryToolTile.getModalLabelInput().should('have.value', 'AC'); // geometryToolTile.chooseLabelOption('label'); - // geometryToolTile.getGraphPointLabel().contains('12.').should('not.exist'); - // //geometryToolTile.getGraphPointLabel().contains('AC').should('exist'); - // clueCanvas.clickToolbarButton('geometry', 'label'); - // geometryToolTile.chooseLabelOption('none'); - // geometryToolTile.clickGraphPosition(0, 0); // deselect polygon - - // // Label a segment - // geometryToolTile.getGraphPointLabel().contains('AB').should('exist'); - // geometryToolTile.getGraphLine().should('have.length', 5); // 0-1 = axis lines, 2-4 = triangle - // geometryToolTile.getGraphLine().eq(4).click({ force: true }); - // clueCanvas.clickToolbarButton('geometry', 'label'); - // geometryToolTile.getModalTitle().should('include.text', 'Segment Label/Value'); - // geometryToolTile.chooseLabelOption('label'); - // geometryToolTile.getGraphPointLabel().contains('BC').should('exist'); + // geometryToolTile.getGraphPointLabel().contains('A').should('exist'); // clueCanvas.clickToolbarButton('geometry', 'label'); // geometryToolTile.chooseLabelOption('length'); - // geometryToolTile.getGraphPointLabel().contains('BC').should('not.exist'); - // geometryToolTile.getGraphPointLabel().contains('5').should('exist'); + // geometryToolTile.getGraphPointLabel().contains('A').should('not.exist'); + // geometryToolTile.getGraphPointLabel().contains('1.00, 1.00').should('not.exist'); + + // // select a different point + // geometryToolTile.selectGraphPoint(2, 2); + // geometryToolTile.getSelectedGraphPoint().should("have.length", 1); + // // use shift to select both points + // geometryToolTile.selectGraphPoint(1, 1, true); + // geometryToolTile.getSelectedGraphPoint().should("have.length", 2); + + // clueCanvas.clickToolbarButton('geometry', 'delete'); + // geometryToolTile.getGraphPoint().should("have.length", 0); + + // cy.log("make a polygon with polygon mode"); + // clueCanvas.clickToolbarButton('geometry', 'polygon'); + // clueCanvas.toolbarButtonIsSelected('geometry', 'polygon'); + // geometryToolTile.getGraph().trigger('mousemove'); + // geometryToolTile.getPhantomGraphPoint().should("have.length", 1); + // geometryToolTile.getGraphPoint().should("have.length", 0); + // geometryToolTile.clickGraphPosition(5, 5); + // geometryToolTile.getGraphPoint().should("have.length", 1); + // geometryToolTile.clickGraphPosition(10, 5); + // geometryToolTile.getGraphPoint().should("have.length", 2); + // geometryToolTile.clickGraphPosition(10, 10); + // geometryToolTile.getGraphPoint().should("have.length", 3); + // geometryToolTile.clickGraphPosition(5, 5); // click first point again to close polygon. + // geometryToolTile.getGraphPoint().should("have.length", 3); + // geometryToolTile.getGraphPolygon().should("have.length", 1); + // geometryToolTile.getPhantomGraphPoint().should("have.length", 1); + + // // Create vertex angle + // geometryToolTile.getGraphPointLabel().contains('90°').should('not.exist'); + // clueCanvas.clickToolbarButton('geometry', 'select'); + // geometryToolTile.selectGraphPoint(10, 5); // this point is a 90 degree angle // clueCanvas.clickToolbarButton('geometry', 'label'); - // geometryToolTile.chooseLabelOption('none'); - // geometryToolTile.getGraphPointLabel().contains('BC').should('not.exist'); - // geometryToolTile.getGraphPointLabel().contains('5').should('not.exist'); - - // Change color of polygon - geometryToolTile.selectGraphPoint(7, 6); // click middle of polygon to select it - clueCanvas.clickToolbarButton('geometry', 'color'); - geometryToolTile.selectColor('green'); - geometryToolTile.getGraphPolygon().should("have.attr", "fill", green); - - // Duplicate polygon - clueCanvas.clickToolbarButton('geometry', 'select'); - geometryToolTile.selectGraphPoint(7, 6); // click middle of polygon to select it - geometryToolTile.getSelectedGraphPoint().should("have.length", 3); - clueCanvas.clickToolbarButton('geometry', 'duplicate'); - geometryToolTile.getGraphPolygon().should("have.length", 2); - geometryToolTile.getGraphPoint().should("have.length", 6); - geometryToolTile.getSelectedGraphPoint().should("have.length", 0); - - // Delete polygon - geometryToolTile.selectGraphPoint(7, 6); - geometryToolTile.getSelectedGraphPoint().should("have.length", 3); - clueCanvas.clickToolbarButton('geometry', 'delete'); - geometryToolTile.getGraphPolygon().should("have.length", 1); - geometryToolTile.getGraphPoint().should("have.length", 3); - geometryToolTile.getSelectedGraphPoint().should("have.length", 0); - - geometryToolTile.selectGraphPoint(10, 5); - geometryToolTile.getSelectedGraphPoint().should("have.length", 3); - clueCanvas.clickToolbarButton('geometry', 'delete'); - geometryToolTile.getGraphPolygon().should("have.length", 0); - geometryToolTile.getGraphPoint().should("have.length", 0); - geometryToolTile.getSelectedGraphPoint().should("have.length", 0); + // geometryToolTile.toggleAngleCheckbox(); + // geometryToolTile.getGraphPointLabel().contains('90°').should('exist'); + + // // Test keyboard functions to move the selected point(s) + // cy.log('Test keyboard functions'); + + // // Select the graph point at (5, 5) + // geometryToolTile.selectGraphPoint(5, 5); + + // // Verify that the point has been selected + // geometryToolTile.getSelectedGraphPoint().should('have.length', 1); + + // // Store the original coordinates for comparison + // let originalCx, originalCy; + // geometryToolTile.getSelectedGraphPoint().then(($point) => { + // originalCx = parseFloat($point.attr('cx')); + // originalCy = parseFloat($point.attr('cy')); + // }); + + // // Move the selected point up using the arrow key + // geometryToolTile.getSelectedGraphPoint().trigger('keydown', { keyCode: 38 }); // simulate up arrow key press + + // // Move the selected point right using the arrow key + // geometryToolTile.getSelectedGraphPoint().trigger('keydown', { keyCode: 39 }); // simulate right arrow key press + + // // Verify that the point has moved: cx should be greater and cy should be less than the original values + // geometryToolTile.getSelectedGraphPoint().then(($point) => { + // const newCx = parseFloat($point.attr('cx')); + // const newCy = parseFloat($point.attr('cy')); + + // expect(newCx).to.be.greaterThan(originalCx); + // expect(newCy).to.be.lessThan(originalCy); + // }); + + // // Additionally, check that the angle label has changed from its original value (if applicable) + // geometryToolTile.getAngleAdornment().should(($label) => { + // const angleText = $label.text(); + // expect(angleText).not.to.equal('90'); // 90° was the original value + // }); + + // // Move the point back to the original position + // geometryToolTile.getSelectedGraphPoint().trigger('keydown', { keyCode: 37 }); // simulate left arrow key press + // geometryToolTile.getSelectedGraphPoint().trigger('keydown', { keyCode: 40 }); // simulate down arrow key press + + // // Verify that the point has returned to its original coordinates + // geometryToolTile.getSelectedGraphPoint().then(($point) => { + // const resetCx = parseFloat($point.attr('cx')); + // const resetCy = parseFloat($point.attr('cy')); + + // expect(resetCx).to.equal(originalCx); + // expect(resetCy).to.equal(originalCy); + // }); + + // // Verify that the angle label returns to its original value (if applicable) + // geometryToolTile.getGraphPointLabel().contains('90°').should('exist'); + + // // The label tests below keep misbehaving: PT: #188159177 + + // // Label the polygon + // // geometryToolTile.getGraphPolygon().click(50, 50, { force: true, }); + // // geometryToolTile.getSelectedGraphPoint().should('have.length', 2); + // // geometryToolTile.getGraphPointLabel().contains('12.').should('not.exist'); + // // geometryToolTile.getGraphPointLabel().contains('CBA').should('not.exist'); + // // clueCanvas.clickToolbarButton('geometry', 'label'); + // // geometryToolTile.getModalTitle().should('include.text', 'Segment Label/Value'); + // //geometryToolTile.chooseLabelOption('length'); + // // geometryToolTile.getGraphPointLabel().contains('7.').should('exist'); + // // clueCanvas.clickToolbarButton('geometry', 'label'); + // // geometryToolTile.getModalLabelInput().should('have.value', 'AC'); + // // geometryToolTile.chooseLabelOption('label'); + // // geometryToolTile.getGraphPointLabel().contains('12.').should('not.exist'); + // // //geometryToolTile.getGraphPointLabel().contains('AC').should('exist'); + // // clueCanvas.clickToolbarButton('geometry', 'label'); + // // geometryToolTile.chooseLabelOption('none'); + // // geometryToolTile.clickGraphPosition(0, 0); // deselect polygon + + // // // Label a segment + // // geometryToolTile.getGraphPointLabel().contains('AB').should('exist'); + // // geometryToolTile.getGraphLine().should('have.length', 5); // 0-1 = axis lines, 2-4 = triangle + // // geometryToolTile.getGraphLine().eq(4).click({ force: true }); + // // clueCanvas.clickToolbarButton('geometry', 'label'); + // // geometryToolTile.getModalTitle().should('include.text', 'Segment Label/Value'); + // // geometryToolTile.chooseLabelOption('label'); + // // geometryToolTile.getGraphPointLabel().contains('BC').should('exist'); + // // clueCanvas.clickToolbarButton('geometry', 'label'); + // // geometryToolTile.chooseLabelOption('length'); + // // geometryToolTile.getGraphPointLabel().contains('BC').should('not.exist'); + // // geometryToolTile.getGraphPointLabel().contains('5').should('exist'); + // // clueCanvas.clickToolbarButton('geometry', 'label'); + // // geometryToolTile.chooseLabelOption('none'); + // // geometryToolTile.getGraphPointLabel().contains('BC').should('not.exist'); + // // geometryToolTile.getGraphPointLabel().contains('5').should('not.exist'); + + // // Change color of polygon + // geometryToolTile.selectGraphPoint(7, 6); // click middle of polygon to select it + // clueCanvas.clickToolbarButton('geometry', 'color'); + // geometryToolTile.selectColor('green'); + // geometryToolTile.getGraphPolygon().should("have.attr", "fill", green); + + // // Duplicate polygon + // clueCanvas.clickToolbarButton('geometry', 'select'); + // geometryToolTile.selectGraphPoint(7, 6); // click middle of polygon to select it + // geometryToolTile.getSelectedGraphPoint().should("have.length", 3); + // clueCanvas.clickToolbarButton('geometry', 'duplicate'); + // geometryToolTile.getGraphPolygon().should("have.length", 2); + // geometryToolTile.getGraphPoint().should("have.length", 6); + // geometryToolTile.getSelectedGraphPoint().should("have.length", 0); + + // // Delete polygon + // geometryToolTile.selectGraphPoint(7, 6); + // geometryToolTile.getSelectedGraphPoint().should("have.length", 3); + // clueCanvas.clickToolbarButton('geometry', 'delete'); + // geometryToolTile.getGraphPolygon().should("have.length", 1); + // geometryToolTile.getGraphPoint().should("have.length", 3); + // geometryToolTile.getSelectedGraphPoint().should("have.length", 0); + + // geometryToolTile.selectGraphPoint(10, 5); + // geometryToolTile.getSelectedGraphPoint().should("have.length", 3); + // clueCanvas.clickToolbarButton('geometry', 'delete'); + // geometryToolTile.getGraphPolygon().should("have.length", 0); + // geometryToolTile.getGraphPoint().should("have.length", 0); + // geometryToolTile.getSelectedGraphPoint().should("have.length", 0); // Create first polygon from existing points cy.log('Create first polygon from existing points'); @@ -359,29 +359,121 @@ context('Geometry Tool', function () { // Verify the polygon count is still 1 geometryToolTile.getGraphPolygon().should("have.length", 1); - // Create a second polygon that shares the same points as the first - cy.log('Create a second polygon that shares the same points as the first'); - clueCanvas.clickToolbarButton('geometry', 'polygon'); - geometryToolTile.clickGraphPosition(15, 10); // new point - geometryToolTile.clickGraphPosition(15, 5); // shared point - geometryToolTile.clickGraphPosition(20, 5); // new point - geometryToolTile.clickGraphPosition(15, 10); // close the polygon - // Point should be shared - geometryToolTile.getGraphPoint().should("have.length", 6); // New point added - // Move the shared point right using the arrow key - clueCanvas.clickToolbarButton('geometry', 'select'); - geometryToolTile.clickGraphPosition(15, 5); // Shared point - geometryToolTile.getSelectedGraphPoint().trigger('keydown', { keyCode: 39 }); // simulate right arrow key press - - // Verify that the point has moved to approximately (15.1, 4.9) - geometryToolTile.getGraphPoint().then(($points) => { - const movedPoint = $points.filter((index, el) => { - const cx = parseFloat(el.getAttribute('cx')); - const cy = parseFloat(el.getAttribute('cy')); - return Math.abs(cx - 15.1) < 0.1 && Math.abs(cy - 4.9) < 0.1; - }); - expect(movedPoint).to.have.length(0); +// Create a second polygon that shares the same points as the first +cy.log('Create a second polygon that shares the same points as the first'); +clueCanvas.clickToolbarButton('geometry', 'polygon'); +geometryToolTile.clickGraphPosition(15, 10); // new point +geometryToolTile.clickGraphPosition(15, 5); // shared point +geometryToolTile.clickGraphPosition(20, 5); // new point +geometryToolTile.clickGraphPosition(15, 10); // close the polygon + +// Label point at (15, 10) +clueCanvas.clickToolbarButton('geometry', 'select'); +geometryToolTile.clickGraphPosition(15, 10); // Select the point +clueCanvas.clickToolbarButton('geometry', 'label'); // Open the label modal +geometryToolTile.chooseLabelOption('length'); // Choose x, y coordinates + +// Label point at (15, 5) - the shared point +geometryToolTile.clickGraphPosition(15, 5); // Select the point +clueCanvas.clickToolbarButton('geometry', 'label'); // Open the label modal +geometryToolTile.chooseLabelOption('length'); // Choose x, y coordinates + +// Label point at (5, 5) - change from 20, 5 +geometryToolTile.clickGraphPosition(5, 5); // Select the point +clueCanvas.clickToolbarButton('geometry', 'label'); // Open the label modal +geometryToolTile.chooseLabelOption('length'); // Choose x, y coordinates + +// Add a short delay to ensure labels are rendered +cy.wait(500); + +// Store the initial positions of the labels +let initialPositions = {}; +geometryToolTile.getGraphPointLabel().each((index, label) => { + const text = label.textContent || label.innerText || ''; // Fallback to ensure text is defined + cy.log(`Label at index ${index}: ${text}`); // Log the label text for debugging + if (text) { + const [x, y] = text.split(',').map(parseFloat); + if (!isNaN(x) && !isNaN(y)) { + initialPositions[index] = { x, y }; + cy.log(`Stored position ${index}: x=${x}, y=${y}`); // Log stored positions + } else { + cy.log(`Failed to parse label at index ${index}: ${text}`); + } + } else { + cy.log(`Label text is undefined or empty at index ${index}`); + } +}); + +// Log the initial positions to confirm they were stored +cy.log('Initial positions:', initialPositions); + +// Move the shared point right using the arrow key +cy.log('Move the shared point right using the arrow key'); +geometryToolTile.clickGraphPosition(15, 5); // Shared point +geometryToolTile.getSelectedGraphPoint().trigger('keydown', { keyCode: 39 }); // simulate right arrow key press + +// Add a delay to ensure the move operation is completed +cy.wait(500); + +// Verify that the point labels have been updated correctly +geometryToolTile.getGraphPointLabel().each((index, label) => { + const text = label.textContent || label.innerText || ''; // Fallback to ensure text is defined + cy.log(`Updated label at index ${index}: ${text}`); // Log updated label text + if (text) { + const [x, y] = text.split(',').map(parseFloat); + const initialPosition = initialPositions[index]; + if (initialPosition) { + expect(x).to.be.greaterThan(initialPosition.x); + expect(y).to.be.lessThan(initialPosition.y); + } else { + cy.log(`Initial position not found for index ${index}`); + } + } else { + cy.log(`Updated label text is undefined or empty at index ${index}`); + } +}); + +// Calculate and verify the distance using the Distance Formula +function calculateDistance(x1, y1, x2, y2) { + return Math.sqrt(Math.pow(x2 - x1, 2) + Math.pow(y2 - y1, 2)); +} + +// Verify that the lengths are correct before and after the change +cy.log('Verify that the lengths are correct before and after the change'); +if (initialPositions[0] && initialPositions[1]) { + const initialDistance = calculateDistance(initialPositions[0].x, initialPositions[0].y, initialPositions[1].x, initialPositions[1].y); + geometryToolTile.getGraphPointLabel().then($labels => { + const [x1, y1] = $labels[0].textContent.split(',').map(parseFloat); + const [x2, y2] = $labels[1].textContent.split(',').map(parseFloat); + const updatedDistance = calculateDistance(x1, y1, x2, y2); + expect(updatedDistance).to.be.lessThan(initialDistance); // The distance should decrease after moving the point }); +} else { + cy.log('Initial positions were not stored correctly.'); +} + // // Create a second polygon that shares the same points as the first + // cy.log('Create a second polygon that shares the same points as the first'); + // clueCanvas.clickToolbarButton('geometry', 'polygon'); + // geometryToolTile.clickGraphPosition(15, 10); // new point + // geometryToolTile.clickGraphPosition(15, 5); // shared point + // geometryToolTile.clickGraphPosition(20, 5); // new point + // geometryToolTile.clickGraphPosition(15, 10); // close the polygon + // // Point should be shared + // geometryToolTile.getGraphPoint().should("have.length", 6); // New point added + // // Move the shared point right using the arrow key + // clueCanvas.clickToolbarButton('geometry', 'select'); + // geometryToolTile.clickGraphPosition(15, 5); // Shared point + // geometryToolTile.getSelectedGraphPoint().trigger('keydown', { keyCode: 39 }); // simulate right arrow key press + + // // Verify that the point has moved to a position where x > 15 and y < 5 + // geometryToolTile.getGraphPoint().then(($points) => { + // const movedPoint = $points.filter((index, el) => { + // const cx = parseFloat(el.getAttribute('cx')); + // const cy = parseFloat(el.getAttribute('cy')); + // return cx > 15 && cy < 5; + // }); + // expect(movedPoint).to.have.length(1); // Expect one point to match the condition + // }); // Delete the first polygon clueCanvas.clickToolbarButton('geometry', 'select'); From 170d439bc200a1f0b90a3dcc646fa275943ab24a Mon Sep 17 00:00:00 2001 From: nstclair-cc <20171905+nstclair-cc@users.noreply.github.com> Date: Thu, 5 Sep 2024 16:18:44 -0700 Subject: [PATCH 12/20] Check that both polygons have been modified by moving the single shared point --- .../tile_tests/geometry_tool_spec.js | 603 +++++++++--------- .../support/elements/tile/GeometryToolTile.js | 2 +- 2 files changed, 295 insertions(+), 310 deletions(-) diff --git a/cypress/e2e/functional/tile_tests/geometry_tool_spec.js b/cypress/e2e/functional/tile_tests/geometry_tool_spec.js index baedb96cce..4f704d79bf 100644 --- a/cypress/e2e/functional/tile_tests/geometry_tool_spec.js +++ b/cypress/e2e/functional/tile_tests/geometry_tool_spec.js @@ -128,209 +128,209 @@ context('Geometry Tool', function () { clueCanvas.addTile('geometry'); geometryToolTile.getGraph().should("exist"); - // cy.log("add points with points mode"); - // clueCanvas.clickToolbarButton('geometry', 'point'); - // clueCanvas.toolbarButtonIsSelected('geometry', 'point'); - // geometryToolTile.getGraph().trigger('mousemove'); - // geometryToolTile.getPhantomGraphPoint().should("have.length", 1); - // geometryToolTile.clickGraphPosition(1, 1); - // geometryToolTile.clickGraphPosition(2, 2); - // geometryToolTile.getGraphPoint().should("have.length", 2); - - // // Duplicate point - // geometryToolTile.selectGraphPoint(1, 1); - // clueCanvas.clickToolbarButton('geometry', 'duplicate'); - // geometryToolTile.getGraph().trigger('mousemove'); // get phantom point back onto canvas after toolbar use - // geometryToolTile.getPhantomGraphPoint().should("have.length", 1); - // geometryToolTile.getGraphPoint().should("have.length", 3); - - // // Delete point - // geometryToolTile.getGraphPoint().eq(2).click(); - // clueCanvas.clickToolbarButton('geometry', 'delete'); - // geometryToolTile.getGraph().trigger('mousemove'); - // geometryToolTile.getGraphPoint().should("have.length", 2); - - // cy.log("select points with select mode"); - // clueCanvas.clickToolbarButton('geometry', 'select'); - // clueCanvas.toolbarButtonIsSelected('geometry', 'select'); - // geometryToolTile.getGraph().trigger('mousemove'); - // geometryToolTile.getGraphPoint().should("have.length", 2); - // geometryToolTile.getPhantomGraphPoint().should("have.length", 0); - - // // Clicking background should NOT create a point. - // geometryToolTile.clickGraphPosition(3, 3); - // geometryToolTile.getGraphPoint().should("have.length", 2); // same as before - // geometryToolTile.getPhantomGraphPoint().should("have.length", 0); - // geometryToolTile.getSelectedGraphPoint().should("have.length", 0); - - // // select one point - // geometryToolTile.selectGraphPoint(1, 1); - // geometryToolTile.getGraphPoint().eq(0).should("have.attr", "fill", "#0069ff"); // $data-blue - // geometryToolTile.getSelectedGraphPoint().should("have.length", 1); - // // set label options - // geometryToolTile.getGraphPointLabel().contains('A').should('not.exist'); + cy.log("add points with points mode"); + clueCanvas.clickToolbarButton('geometry', 'point'); + clueCanvas.toolbarButtonIsSelected('geometry', 'point'); + geometryToolTile.getGraph().trigger('mousemove'); + geometryToolTile.getPhantomGraphPoint().should("have.length", 1); + geometryToolTile.clickGraphPosition(1, 1); + geometryToolTile.clickGraphPosition(2, 2); + geometryToolTile.getGraphPoint().should("have.length", 2); + + // Duplicate point + geometryToolTile.selectGraphPoint(1, 1); + clueCanvas.clickToolbarButton('geometry', 'duplicate'); + geometryToolTile.getGraph().trigger('mousemove'); // get phantom point back onto canvas after toolbar use + geometryToolTile.getPhantomGraphPoint().should("have.length", 1); + geometryToolTile.getGraphPoint().should("have.length", 3); + + // Delete point + geometryToolTile.getGraphPoint().eq(2).click(); + clueCanvas.clickToolbarButton('geometry', 'delete'); + geometryToolTile.getGraph().trigger('mousemove'); + geometryToolTile.getGraphPoint().should("have.length", 2); + + cy.log("select points with select mode"); + clueCanvas.clickToolbarButton('geometry', 'select'); + clueCanvas.toolbarButtonIsSelected('geometry', 'select'); + geometryToolTile.getGraph().trigger('mousemove'); + geometryToolTile.getGraphPoint().should("have.length", 2); + geometryToolTile.getPhantomGraphPoint().should("have.length", 0); + + // Clicking background should NOT create a point. + geometryToolTile.clickGraphPosition(3, 3); + geometryToolTile.getGraphPoint().should("have.length", 2); // same as before + geometryToolTile.getPhantomGraphPoint().should("have.length", 0); + geometryToolTile.getSelectedGraphPoint().should("have.length", 0); + + // select one point + geometryToolTile.selectGraphPoint(1, 1); + geometryToolTile.getGraphPoint().eq(0).should("have.attr", "fill", "#0069ff"); // $data-blue + geometryToolTile.getSelectedGraphPoint().should("have.length", 1); + // set label options + geometryToolTile.getGraphPointLabel().contains('A').should('not.exist'); + clueCanvas.clickToolbarButton('geometry', 'label'); + geometryToolTile.chooseLabelOption('label'); + geometryToolTile.getGraphPointLabel().contains('A').should('exist'); + clueCanvas.clickToolbarButton('geometry', 'label'); + geometryToolTile.chooseLabelOption('length'); + geometryToolTile.getGraphPointLabel().contains('A').should('not.exist'); + geometryToolTile.getGraphPointLabel().contains('1.00, 1.00').should('not.exist'); + + // select a different point + geometryToolTile.selectGraphPoint(2, 2); + geometryToolTile.getSelectedGraphPoint().should("have.length", 1); + // use shift to select both points + geometryToolTile.selectGraphPoint(1, 1, true); + geometryToolTile.getSelectedGraphPoint().should("have.length", 2); + + clueCanvas.clickToolbarButton('geometry', 'delete'); + geometryToolTile.getGraphPoint().should("have.length", 0); + + cy.log("make a polygon with polygon mode"); + clueCanvas.clickToolbarButton('geometry', 'polygon'); + clueCanvas.toolbarButtonIsSelected('geometry', 'polygon'); + geometryToolTile.getGraph().trigger('mousemove'); + geometryToolTile.getPhantomGraphPoint().should("have.length", 1); + geometryToolTile.getGraphPoint().should("have.length", 0); + geometryToolTile.clickGraphPosition(5, 5); + geometryToolTile.getGraphPoint().should("have.length", 1); + geometryToolTile.clickGraphPosition(10, 5); + geometryToolTile.getGraphPoint().should("have.length", 2); + geometryToolTile.clickGraphPosition(10, 10); + geometryToolTile.getGraphPoint().should("have.length", 3); + geometryToolTile.clickGraphPosition(5, 5); // click first point again to close polygon. + geometryToolTile.getGraphPoint().should("have.length", 3); + geometryToolTile.getGraphPolygon().should("have.length", 1); + geometryToolTile.getPhantomGraphPoint().should("have.length", 1); + + // Create vertex angle + geometryToolTile.getGraphPointLabel().contains('90°').should('not.exist'); + clueCanvas.clickToolbarButton('geometry', 'select'); + geometryToolTile.selectGraphPoint(10, 5); // this point is a 90 degree angle + clueCanvas.clickToolbarButton('geometry', 'label'); + geometryToolTile.toggleAngleCheckbox(); + geometryToolTile.getGraphPointLabel().contains('90°').should('exist'); + + // Test keyboard functions to move the selected point(s) + cy.log('Test keyboard functions'); + + // Select the graph point at (5, 5) + geometryToolTile.selectGraphPoint(5, 5); + + // Verify that the point has been selected + geometryToolTile.getSelectedGraphPoint().should('have.length', 1); + + // Store the original coordinates for comparison + let originalCcx, originalCcy; + geometryToolTile.getSelectedGraphPoint().then(($point) => { + originalCcx = parseFloat($point.attr('cx')); + originalCcy = parseFloat($point.attr('cy')); + }); + + // Move the selected point up using the arrow key + geometryToolTile.getSelectedGraphPoint().trigger('keydown', { keyCode: 38 }); // simulate up arrow key press + + // Move the selected point right using the arrow key + geometryToolTile.getSelectedGraphPoint().trigger('keydown', { keyCode: 39 }); // simulate right arrow key press + + // Verify that the point has moved: cx should be greater and cy should be less than the original values + geometryToolTile.getSelectedGraphPoint().then(($point) => { + const newCx = parseFloat($point.attr('cx')); + const newCy = parseFloat($point.attr('cy')); + + expect(newCx).to.be.greaterThan(originalCcx); + expect(newCy).to.be.lessThan(originalCcy); + }); + + // Additionally, check that the angle label has changed from its original value (if applicable) + geometryToolTile.getAngleAdornment().should(($label) => { + const angleText = $label.text(); + expect(angleText).not.to.equal('90'); // 90° was the original value + }); + + // Move the point back to the original position + geometryToolTile.getSelectedGraphPoint().trigger('keydown', { keyCode: 37 }); // simulate left arrow key press + geometryToolTile.getSelectedGraphPoint().trigger('keydown', { keyCode: 40 }); // simulate down arrow key press + + // Verify that the point has returned to its original coordinates + geometryToolTile.getSelectedGraphPoint().then(($point) => { + const resetCx = parseFloat($point.attr('cx')); + const resetCy = parseFloat($point.attr('cy')); + + expect(resetCx).to.equal(originalCcx); + expect(resetCy).to.equal(originalCcy); + }); + + // Verify that the angle label returns to its original value (if applicable) + geometryToolTile.getGraphPointLabel().contains('90°').should('exist'); + + // The label tests below keep misbehaving: PT: #188159177 + + // Label the polygon + // geometryToolTile.getGraphPolygon().click(50, 50, { force: true, }); + // geometryToolTile.getSelectedGraphPoint().should('have.length', 2); + // geometryToolTile.getGraphPointLabel().contains('12.').should('not.exist'); + // geometryToolTile.getGraphPointLabel().contains('CBA').should('not.exist'); // clueCanvas.clickToolbarButton('geometry', 'label'); + // geometryToolTile.getModalTitle().should('include.text', 'Segment Label/Value'); + //geometryToolTile.chooseLabelOption('length'); + // geometryToolTile.getGraphPointLabel().contains('7.').should('exist'); + // clueCanvas.clickToolbarButton('geometry', 'label'); + // geometryToolTile.getModalLabelInput().should('have.value', 'AC'); + // geometryToolTile.chooseLabelOption('label'); + // geometryToolTile.getGraphPointLabel().contains('12.').should('not.exist'); + // //geometryToolTile.getGraphPointLabel().contains('AC').should('exist'); + // clueCanvas.clickToolbarButton('geometry', 'label'); + // geometryToolTile.chooseLabelOption('none'); + // geometryToolTile.clickGraphPosition(0, 0); // deselect polygon + + // // Label a segment + // geometryToolTile.getGraphPointLabel().contains('AB').should('exist'); + // geometryToolTile.getGraphLine().should('have.length', 5); // 0-1 = axis lines, 2-4 = triangle + // geometryToolTile.getGraphLine().eq(4).click({ force: true }); + // clueCanvas.clickToolbarButton('geometry', 'label'); + // geometryToolTile.getModalTitle().should('include.text', 'Segment Label/Value'); // geometryToolTile.chooseLabelOption('label'); - // geometryToolTile.getGraphPointLabel().contains('A').should('exist'); + // geometryToolTile.getGraphPointLabel().contains('BC').should('exist'); // clueCanvas.clickToolbarButton('geometry', 'label'); // geometryToolTile.chooseLabelOption('length'); - // geometryToolTile.getGraphPointLabel().contains('A').should('not.exist'); - // geometryToolTile.getGraphPointLabel().contains('1.00, 1.00').should('not.exist'); - - // // select a different point - // geometryToolTile.selectGraphPoint(2, 2); - // geometryToolTile.getSelectedGraphPoint().should("have.length", 1); - // // use shift to select both points - // geometryToolTile.selectGraphPoint(1, 1, true); - // geometryToolTile.getSelectedGraphPoint().should("have.length", 2); - - // clueCanvas.clickToolbarButton('geometry', 'delete'); - // geometryToolTile.getGraphPoint().should("have.length", 0); - - // cy.log("make a polygon with polygon mode"); - // clueCanvas.clickToolbarButton('geometry', 'polygon'); - // clueCanvas.toolbarButtonIsSelected('geometry', 'polygon'); - // geometryToolTile.getGraph().trigger('mousemove'); - // geometryToolTile.getPhantomGraphPoint().should("have.length", 1); - // geometryToolTile.getGraphPoint().should("have.length", 0); - // geometryToolTile.clickGraphPosition(5, 5); - // geometryToolTile.getGraphPoint().should("have.length", 1); - // geometryToolTile.clickGraphPosition(10, 5); - // geometryToolTile.getGraphPoint().should("have.length", 2); - // geometryToolTile.clickGraphPosition(10, 10); - // geometryToolTile.getGraphPoint().should("have.length", 3); - // geometryToolTile.clickGraphPosition(5, 5); // click first point again to close polygon. - // geometryToolTile.getGraphPoint().should("have.length", 3); - // geometryToolTile.getGraphPolygon().should("have.length", 1); - // geometryToolTile.getPhantomGraphPoint().should("have.length", 1); - - // // Create vertex angle - // geometryToolTile.getGraphPointLabel().contains('90°').should('not.exist'); - // clueCanvas.clickToolbarButton('geometry', 'select'); - // geometryToolTile.selectGraphPoint(10, 5); // this point is a 90 degree angle + // geometryToolTile.getGraphPointLabel().contains('BC').should('not.exist'); + // geometryToolTile.getGraphPointLabel().contains('5').should('exist'); // clueCanvas.clickToolbarButton('geometry', 'label'); - // geometryToolTile.toggleAngleCheckbox(); - // geometryToolTile.getGraphPointLabel().contains('90°').should('exist'); - - // // Test keyboard functions to move the selected point(s) - // cy.log('Test keyboard functions'); - - // // Select the graph point at (5, 5) - // geometryToolTile.selectGraphPoint(5, 5); - - // // Verify that the point has been selected - // geometryToolTile.getSelectedGraphPoint().should('have.length', 1); - - // // Store the original coordinates for comparison - // let originalCx, originalCy; - // geometryToolTile.getSelectedGraphPoint().then(($point) => { - // originalCx = parseFloat($point.attr('cx')); - // originalCy = parseFloat($point.attr('cy')); - // }); - - // // Move the selected point up using the arrow key - // geometryToolTile.getSelectedGraphPoint().trigger('keydown', { keyCode: 38 }); // simulate up arrow key press - - // // Move the selected point right using the arrow key - // geometryToolTile.getSelectedGraphPoint().trigger('keydown', { keyCode: 39 }); // simulate right arrow key press - - // // Verify that the point has moved: cx should be greater and cy should be less than the original values - // geometryToolTile.getSelectedGraphPoint().then(($point) => { - // const newCx = parseFloat($point.attr('cx')); - // const newCy = parseFloat($point.attr('cy')); - - // expect(newCx).to.be.greaterThan(originalCx); - // expect(newCy).to.be.lessThan(originalCy); - // }); - - // // Additionally, check that the angle label has changed from its original value (if applicable) - // geometryToolTile.getAngleAdornment().should(($label) => { - // const angleText = $label.text(); - // expect(angleText).not.to.equal('90'); // 90° was the original value - // }); - - // // Move the point back to the original position - // geometryToolTile.getSelectedGraphPoint().trigger('keydown', { keyCode: 37 }); // simulate left arrow key press - // geometryToolTile.getSelectedGraphPoint().trigger('keydown', { keyCode: 40 }); // simulate down arrow key press - - // // Verify that the point has returned to its original coordinates - // geometryToolTile.getSelectedGraphPoint().then(($point) => { - // const resetCx = parseFloat($point.attr('cx')); - // const resetCy = parseFloat($point.attr('cy')); - - // expect(resetCx).to.equal(originalCx); - // expect(resetCy).to.equal(originalCy); - // }); - - // // Verify that the angle label returns to its original value (if applicable) - // geometryToolTile.getGraphPointLabel().contains('90°').should('exist'); - - // // The label tests below keep misbehaving: PT: #188159177 - - // // Label the polygon - // // geometryToolTile.getGraphPolygon().click(50, 50, { force: true, }); - // // geometryToolTile.getSelectedGraphPoint().should('have.length', 2); - // // geometryToolTile.getGraphPointLabel().contains('12.').should('not.exist'); - // // geometryToolTile.getGraphPointLabel().contains('CBA').should('not.exist'); - // // clueCanvas.clickToolbarButton('geometry', 'label'); - // // geometryToolTile.getModalTitle().should('include.text', 'Segment Label/Value'); - // //geometryToolTile.chooseLabelOption('length'); - // // geometryToolTile.getGraphPointLabel().contains('7.').should('exist'); - // // clueCanvas.clickToolbarButton('geometry', 'label'); - // // geometryToolTile.getModalLabelInput().should('have.value', 'AC'); - // // geometryToolTile.chooseLabelOption('label'); - // // geometryToolTile.getGraphPointLabel().contains('12.').should('not.exist'); - // // //geometryToolTile.getGraphPointLabel().contains('AC').should('exist'); - // // clueCanvas.clickToolbarButton('geometry', 'label'); - // // geometryToolTile.chooseLabelOption('none'); - // // geometryToolTile.clickGraphPosition(0, 0); // deselect polygon - - // // // Label a segment - // // geometryToolTile.getGraphPointLabel().contains('AB').should('exist'); - // // geometryToolTile.getGraphLine().should('have.length', 5); // 0-1 = axis lines, 2-4 = triangle - // // geometryToolTile.getGraphLine().eq(4).click({ force: true }); - // // clueCanvas.clickToolbarButton('geometry', 'label'); - // // geometryToolTile.getModalTitle().should('include.text', 'Segment Label/Value'); - // // geometryToolTile.chooseLabelOption('label'); - // // geometryToolTile.getGraphPointLabel().contains('BC').should('exist'); - // // clueCanvas.clickToolbarButton('geometry', 'label'); - // // geometryToolTile.chooseLabelOption('length'); - // // geometryToolTile.getGraphPointLabel().contains('BC').should('not.exist'); - // // geometryToolTile.getGraphPointLabel().contains('5').should('exist'); - // // clueCanvas.clickToolbarButton('geometry', 'label'); - // // geometryToolTile.chooseLabelOption('none'); - // // geometryToolTile.getGraphPointLabel().contains('BC').should('not.exist'); - // // geometryToolTile.getGraphPointLabel().contains('5').should('not.exist'); - - // // Change color of polygon - // geometryToolTile.selectGraphPoint(7, 6); // click middle of polygon to select it - // clueCanvas.clickToolbarButton('geometry', 'color'); - // geometryToolTile.selectColor('green'); - // geometryToolTile.getGraphPolygon().should("have.attr", "fill", green); - - // // Duplicate polygon - // clueCanvas.clickToolbarButton('geometry', 'select'); - // geometryToolTile.selectGraphPoint(7, 6); // click middle of polygon to select it - // geometryToolTile.getSelectedGraphPoint().should("have.length", 3); - // clueCanvas.clickToolbarButton('geometry', 'duplicate'); - // geometryToolTile.getGraphPolygon().should("have.length", 2); - // geometryToolTile.getGraphPoint().should("have.length", 6); - // geometryToolTile.getSelectedGraphPoint().should("have.length", 0); - - // // Delete polygon - // geometryToolTile.selectGraphPoint(7, 6); - // geometryToolTile.getSelectedGraphPoint().should("have.length", 3); - // clueCanvas.clickToolbarButton('geometry', 'delete'); - // geometryToolTile.getGraphPolygon().should("have.length", 1); - // geometryToolTile.getGraphPoint().should("have.length", 3); - // geometryToolTile.getSelectedGraphPoint().should("have.length", 0); - - // geometryToolTile.selectGraphPoint(10, 5); - // geometryToolTile.getSelectedGraphPoint().should("have.length", 3); - // clueCanvas.clickToolbarButton('geometry', 'delete'); - // geometryToolTile.getGraphPolygon().should("have.length", 0); - // geometryToolTile.getGraphPoint().should("have.length", 0); - // geometryToolTile.getSelectedGraphPoint().should("have.length", 0); + // geometryToolTile.chooseLabelOption('none'); + // geometryToolTile.getGraphPointLabel().contains('BC').should('not.exist'); + // geometryToolTile.getGraphPointLabel().contains('5').should('not.exist'); + + // Change color of polygon + geometryToolTile.selectGraphPoint(7, 6); // click middle of polygon to select it + clueCanvas.clickToolbarButton('geometry', 'color'); + geometryToolTile.selectColor('green'); + geometryToolTile.getGraphPolygon().should("have.attr", "fill", green); + + // Duplicate polygon + clueCanvas.clickToolbarButton('geometry', 'select'); + geometryToolTile.selectGraphPoint(7, 6); // click middle of polygon to select it + geometryToolTile.getSelectedGraphPoint().should("have.length", 3); + clueCanvas.clickToolbarButton('geometry', 'duplicate'); + geometryToolTile.getGraphPolygon().should("have.length", 2); + geometryToolTile.getGraphPoint().should("have.length", 6); + geometryToolTile.getSelectedGraphPoint().should("have.length", 0); + + // Delete polygon + geometryToolTile.selectGraphPoint(7, 6); + geometryToolTile.getSelectedGraphPoint().should("have.length", 3); + clueCanvas.clickToolbarButton('geometry', 'delete'); + geometryToolTile.getGraphPolygon().should("have.length", 1); + geometryToolTile.getGraphPoint().should("have.length", 3); + geometryToolTile.getSelectedGraphPoint().should("have.length", 0); + + geometryToolTile.selectGraphPoint(10, 5); + geometryToolTile.getSelectedGraphPoint().should("have.length", 3); + clueCanvas.clickToolbarButton('geometry', 'delete'); + geometryToolTile.getGraphPolygon().should("have.length", 0); + geometryToolTile.getGraphPoint().should("have.length", 0); + geometryToolTile.getSelectedGraphPoint().should("have.length", 0); // Create first polygon from existing points cy.log('Create first polygon from existing points'); @@ -359,121 +359,106 @@ context('Geometry Tool', function () { // Verify the polygon count is still 1 geometryToolTile.getGraphPolygon().should("have.length", 1); -// Create a second polygon that shares the same points as the first -cy.log('Create a second polygon that shares the same points as the first'); -clueCanvas.clickToolbarButton('geometry', 'polygon'); -geometryToolTile.clickGraphPosition(15, 10); // new point -geometryToolTile.clickGraphPosition(15, 5); // shared point -geometryToolTile.clickGraphPosition(20, 5); // new point -geometryToolTile.clickGraphPosition(15, 10); // close the polygon - -// Label point at (15, 10) -clueCanvas.clickToolbarButton('geometry', 'select'); -geometryToolTile.clickGraphPosition(15, 10); // Select the point -clueCanvas.clickToolbarButton('geometry', 'label'); // Open the label modal -geometryToolTile.chooseLabelOption('length'); // Choose x, y coordinates - -// Label point at (15, 5) - the shared point -geometryToolTile.clickGraphPosition(15, 5); // Select the point -clueCanvas.clickToolbarButton('geometry', 'label'); // Open the label modal -geometryToolTile.chooseLabelOption('length'); // Choose x, y coordinates - -// Label point at (5, 5) - change from 20, 5 -geometryToolTile.clickGraphPosition(5, 5); // Select the point -clueCanvas.clickToolbarButton('geometry', 'label'); // Open the label modal -geometryToolTile.chooseLabelOption('length'); // Choose x, y coordinates - -// Add a short delay to ensure labels are rendered -cy.wait(500); - -// Store the initial positions of the labels -let initialPositions = {}; -geometryToolTile.getGraphPointLabel().each((index, label) => { - const text = label.textContent || label.innerText || ''; // Fallback to ensure text is defined - cy.log(`Label at index ${index}: ${text}`); // Log the label text for debugging - if (text) { - const [x, y] = text.split(',').map(parseFloat); - if (!isNaN(x) && !isNaN(y)) { - initialPositions[index] = { x, y }; - cy.log(`Stored position ${index}: x=${x}, y=${y}`); // Log stored positions - } else { - cy.log(`Failed to parse label at index ${index}: ${text}`); - } - } else { - cy.log(`Label text is undefined or empty at index ${index}`); - } -}); + // Create a second polygon that shares the same points as the first + cy.log('Create a second polygon that shares the same points as the first'); + clueCanvas.clickToolbarButton('geometry', 'polygon'); + geometryToolTile.clickGraphPosition(15, 10); // new point + geometryToolTile.clickGraphPosition(15, 5); // shared point + geometryToolTile.clickGraphPosition(20, 5); // new point + geometryToolTile.clickGraphPosition(15, 10); // close the polygon -// Log the initial positions to confirm they were stored -cy.log('Initial positions:', initialPositions); - -// Move the shared point right using the arrow key -cy.log('Move the shared point right using the arrow key'); -geometryToolTile.clickGraphPosition(15, 5); // Shared point -geometryToolTile.getSelectedGraphPoint().trigger('keydown', { keyCode: 39 }); // simulate right arrow key press - -// Add a delay to ensure the move operation is completed -cy.wait(500); - -// Verify that the point labels have been updated correctly -geometryToolTile.getGraphPointLabel().each((index, label) => { - const text = label.textContent || label.innerText || ''; // Fallback to ensure text is defined - cy.log(`Updated label at index ${index}: ${text}`); // Log updated label text - if (text) { - const [x, y] = text.split(',').map(parseFloat); - const initialPosition = initialPositions[index]; - if (initialPosition) { - expect(x).to.be.greaterThan(initialPosition.x); - expect(y).to.be.lessThan(initialPosition.y); - } else { - cy.log(`Initial position not found for index ${index}`); - } - } else { - cy.log(`Updated label text is undefined or empty at index ${index}`); - } -}); + // Point should be shared + geometryToolTile.getGraphPoint().should("have.length", 6); // New point added -// Calculate and verify the distance using the Distance Formula -function calculateDistance(x1, y1, x2, y2) { - return Math.sqrt(Math.pow(x2 - x1, 2) + Math.pow(y2 - y1, 2)); -} + // Store the original coordinates for comparison + cy.log('Store original coordinates'); + let originalCx, originalCy; + clueCanvas.clickToolbarButton('geometry', 'select'); + geometryToolTile.clickGraphPosition(15, 5); // shared point + geometryToolTile.getSelectedGraphPoint().then(($point) => { + originalCx = parseFloat($point.attr('cx')); + originalCy = parseFloat($point.attr('cy')); + cy.wrap(originalCx).as('originalCx'); + cy.wrap(originalCy).as('originalCy'); + }); -// Verify that the lengths are correct before and after the change -cy.log('Verify that the lengths are correct before and after the change'); -if (initialPositions[0] && initialPositions[1]) { - const initialDistance = calculateDistance(initialPositions[0].x, initialPositions[0].y, initialPositions[1].x, initialPositions[1].y); - geometryToolTile.getGraphPointLabel().then($labels => { - const [x1, y1] = $labels[0].textContent.split(',').map(parseFloat); - const [x2, y2] = $labels[1].textContent.split(',').map(parseFloat); - const updatedDistance = calculateDistance(x1, y1, x2, y2); - expect(updatedDistance).to.be.lessThan(initialDistance); // The distance should decrease after moving the point + // Add an angle label + cy.log('Add an angle label'); + geometryToolTile.getGraphPointLabel().contains('°').should('not.exist'); + clueCanvas.clickToolbarButton('geometry', 'select'); + geometryToolTile.selectGraphPoint(20, 5); // this point is a 45-degree angle but sometimes it starts at 44 + clueCanvas.clickToolbarButton('geometry', 'label'); + geometryToolTile.toggleAngleCheckbox(); + + // Use a flexible check to verify either '44°' or '45°' + cy.log('Verify the initial angle is either 44° or 45°'); + geometryToolTile.getGraphPointLabel().then(($label) => { + const angleText = $label.text(); + if (angleText.includes('44°')) { + cy.wrap(44).as('initialAngle'); + } else if (angleText.includes('45°')) { + cy.wrap(45).as('initialAngle'); + } else { + throw new Error(`Unexpected angle: ${angleText}`); + } }); -} else { - cy.log('Initial positions were not stored correctly.'); -} - // // Create a second polygon that shares the same points as the first - // cy.log('Create a second polygon that shares the same points as the first'); - // clueCanvas.clickToolbarButton('geometry', 'polygon'); - // geometryToolTile.clickGraphPosition(15, 10); // new point - // geometryToolTile.clickGraphPosition(15, 5); // shared point - // geometryToolTile.clickGraphPosition(20, 5); // new point - // geometryToolTile.clickGraphPosition(15, 10); // close the polygon - // // Point should be shared - // geometryToolTile.getGraphPoint().should("have.length", 6); // New point added - // // Move the shared point right using the arrow key - // clueCanvas.clickToolbarButton('geometry', 'select'); - // geometryToolTile.clickGraphPosition(15, 5); // Shared point - // geometryToolTile.getSelectedGraphPoint().trigger('keydown', { keyCode: 39 }); // simulate right arrow key press - - // // Verify that the point has moved to a position where x > 15 and y < 5 - // geometryToolTile.getGraphPoint().then(($points) => { - // const movedPoint = $points.filter((index, el) => { - // const cx = parseFloat(el.getAttribute('cx')); - // const cy = parseFloat(el.getAttribute('cy')); - // return cx > 15 && cy < 5; - // }); - // expect(movedPoint).to.have.length(1); // Expect one point to match the condition - // }); + + // Move the point + cy.log('Move the point'); + clueCanvas.clickToolbarButton('geometry', 'select'); + geometryToolTile.clickGraphPosition(15, 5); // shared point + geometryToolTile.getSelectedGraphPoint().trigger('keydown', { keyCode: 39 }); // simulate right arrow key press + geometryToolTile.getSelectedGraphPoint().trigger('keydown', { keyCode: 38 }); // simulate up arrow key press + + // Verify that the point values changed + cy.log('Verify that the point values changed'); + cy.get('@originalCx').then((originalCx) => { + cy.get('@originalCy').then((originalCy) => { + geometryToolTile.getSelectedGraphPoint().then(($point) => { + const newCx = parseFloat($point.attr('cx')); + const newCy = parseFloat($point.attr('cy')); + + expect(newCx).to.be.greaterThan(originalCx); + expect(newCy).to.be.lessThan(originalCy); + }); + }); + }); + + // Verify that the angle has decreased by 1 degree + cy.log('Verify that the angle has changed by decreasing 1 degree'); + cy.get('@initialAngle').then((initialAngle) => { + const newAngle = initialAngle - 1; + geometryToolTile.getGraphPointLabel().contains(`${newAngle}°`).should('exist'); // Check if angle decreased by 1 degree + }); + + // Move the point back to the original position + cy.log('Move the point back to the original position'); + geometryToolTile.getSelectedGraphPoint().trigger('keydown', { keyCode: 37 }); // simulate left arrow key press + geometryToolTile.getSelectedGraphPoint().trigger('keydown', { keyCode: 40 }); // simulate down arrow key press + + // Verify that the point has returned to its original coordinates + cy.log('Verify point return to original coordinates'); + cy.get('@originalCx').then((originalCx) => { + cy.get('@originalCy').then((originalCy) => { + geometryToolTile.getSelectedGraphPoint().then(($point) => { + const resetCx = parseFloat($point.attr('cx')); + const resetCy = parseFloat($point.attr('cy')); + + expect(resetCx).to.equal(originalCx); + expect(resetCy).to.equal(originalCy); + }); + }); + }); + + // Verify that the angle has returned to its original value + cy.log('Verify the angle returns to the original value'); + cy.get('@initialAngle').then((initialAngle) => { + geometryToolTile.getGraphPointLabel().contains(`${initialAngle}°`).should('exist'); + }); + + // Verify the point is still shared + cy.log('Verify that the point is still shared'); + geometryToolTile.getGraphPoint().should("have.length", 6); // New point added // Delete the first polygon clueCanvas.clickToolbarButton('geometry', 'select'); diff --git a/cypress/support/elements/tile/GeometryToolTile.js b/cypress/support/elements/tile/GeometryToolTile.js index 5871e87e80..11be58e3d7 100644 --- a/cypress/support/elements/tile/GeometryToolTile.js +++ b/cypress/support/elements/tile/GeometryToolTile.js @@ -152,7 +152,7 @@ class GeometryToolTile { toggleAngleCheckbox(value) { cy.get('.ReactModalPortal input#angle-checkbox').click(); - cy.get('.ReactModalPortal button.default').click(); + cy.get('.ReactModalPortal button.default').click({force:true}); } showAngle(){ From bd94bc168d5b48f7793617428d3016e947e0fbac Mon Sep 17 00:00:00 2001 From: nstclair-cc <20171905+nstclair-cc@users.noreply.github.com> Date: Thu, 5 Sep 2024 17:18:27 -0700 Subject: [PATCH 13/20] Clean up polygon label test --- .../tile_tests/geometry_tool_spec.js | 108 +++++++++++------- 1 file changed, 69 insertions(+), 39 deletions(-) diff --git a/cypress/e2e/functional/tile_tests/geometry_tool_spec.js b/cypress/e2e/functional/tile_tests/geometry_tool_spec.js index 4f704d79bf..e2688a75f4 100644 --- a/cypress/e2e/functional/tile_tests/geometry_tool_spec.js +++ b/cypress/e2e/functional/tile_tests/geometry_tool_spec.js @@ -167,6 +167,7 @@ context('Geometry Tool', function () { geometryToolTile.selectGraphPoint(1, 1); geometryToolTile.getGraphPoint().eq(0).should("have.attr", "fill", "#0069ff"); // $data-blue geometryToolTile.getSelectedGraphPoint().should("have.length", 1); + // set label options geometryToolTile.getGraphPointLabel().contains('A').should('not.exist'); clueCanvas.clickToolbarButton('geometry', 'label'); @@ -205,20 +206,77 @@ context('Geometry Tool', function () { geometryToolTile.getPhantomGraphPoint().should("have.length", 1); // Create vertex angle + cy.log('Create vertex angle'); + clueCanvas.clickToolbarButton('geometry', 'select'); geometryToolTile.getGraphPointLabel().contains('90°').should('not.exist'); clueCanvas.clickToolbarButton('geometry', 'select'); geometryToolTile.selectGraphPoint(10, 5); // this point is a 90 degree angle clueCanvas.clickToolbarButton('geometry', 'label'); geometryToolTile.toggleAngleCheckbox(); geometryToolTile.getGraphPointLabel().contains('90°').should('exist'); + clueCanvas.clickToolbarButton('geometry', 'label'); + geometryToolTile.toggleAngleCheckbox(); + geometryToolTile.getGraphPointLabel().contains('90°').should('not.exist'); + + + // The label tests below keep misbehaving: PT: #188159177 + + //Label the polygon + cy.log('label the polygon'); + clueCanvas.clickToolbarButton('geometry', 'select'); + geometryToolTile.getGraphPolygon().click(50, 50, { force: true, }); + geometryToolTile.getSelectedGraphPoint().should('have.length', 3); + geometryToolTile.getGraphPointLabel().contains('12.').should('not.exist'); + geometryToolTile.getGraphPointLabel().contains('ABC').should('not.exist'); + clueCanvas.clickToolbarButton('geometry', 'label'); + geometryToolTile.getModalTitle().should('include.text', 'Label'); + geometryToolTile.chooseLabelOption('length'); + geometryToolTile.getGraphPointLabel().contains('12.').should('exist'); + cy.log('label ABC'); + clueCanvas.clickToolbarButton('geometry', 'label'); + geometryToolTile.getModalLabelInput().should('have.value', 'ABC'); + geometryToolTile.chooseLabelOption('label'); + geometryToolTile.getGraphPointLabel().contains('12.').should('not.exist'); + geometryToolTile.getGraphPointLabel().contains('ABC').should('exist'); + clueCanvas.clickToolbarButton('geometry', 'label'); + geometryToolTile.chooseLabelOption('none'); + geometryToolTile.clickGraphPosition(0, 0); // deselect polygon + + // Label a segment + geometryToolTile.getGraphPointLabel().contains('AB').should('not.exist'); + geometryToolTile.getGraphLine().should('have.length', 5); // 0-1 = axis lines, 2-4 = triangle + geometryToolTile.getGraphLine().eq(4).click({ force: true }); + clueCanvas.clickToolbarButton('geometry', 'label'); + geometryToolTile.getModalTitle().should('contain.text', 'Segment Label/Value'); + geometryToolTile.chooseLabelOption('label'); + geometryToolTile.getGraphPointLabel().contains('AB').should('exist'); + clueCanvas.clickToolbarButton('geometry', 'label'); + geometryToolTile.chooseLabelOption('length'); + geometryToolTile.getGraphPointLabel().contains('AB').should('not.exist'); + geometryToolTile.getGraphPointLabel().contains('5').should('exist'); + clueCanvas.clickToolbarButton('geometry', 'label'); + geometryToolTile.chooseLabelOption('none'); + geometryToolTile.getGraphPointLabel().contains('AB').should('not.exist'); + geometryToolTile.getGraphPointLabel().contains('5').should('not.exist'); + geometryToolTile.clickGraphPosition(20, 20); // deselect the segment // Test keyboard functions to move the selected point(s) cy.log('Test keyboard functions'); + // turn on 90 degree angle for check + clueCanvas.clickToolbarButton('geometry', 'select'); + geometryToolTile.selectGraphPoint(10, 5); // this point is a 90 degree angle + clueCanvas.clickToolbarButton('geometry', 'label'); + geometryToolTile.toggleAngleCheckbox(); + geometryToolTile.getGraphPointLabel().contains('90°').should('exist'); + // Select the graph point at (5, 5) - geometryToolTile.selectGraphPoint(5, 5); + cy.log('select graph point'); + clueCanvas.clickToolbarButton('geometry', 'select'); + geometryToolTile.clickGraphPosition(5, 5); // Verify that the point has been selected + cy.log('graph point selected'); geometryToolTile.getSelectedGraphPoint().should('have.length', 1); // Store the original coordinates for comparison @@ -229,6 +287,8 @@ context('Geometry Tool', function () { }); // Move the selected point up using the arrow key + clueCanvas.clickToolbarButton('geometry', 'select'); + geometryToolTile.clickGraphPosition(5, 5); // shared point geometryToolTile.getSelectedGraphPoint().trigger('keydown', { keyCode: 38 }); // simulate up arrow key press // Move the selected point right using the arrow key @@ -243,7 +303,7 @@ context('Geometry Tool', function () { expect(newCy).to.be.lessThan(originalCcy); }); - // Additionally, check that the angle label has changed from its original value (if applicable) + // Also check that the angle label has changed from its original value geometryToolTile.getAngleAdornment().should(($label) => { const angleText = $label.text(); expect(angleText).not.to.equal('90'); // 90° was the original value @@ -262,45 +322,15 @@ context('Geometry Tool', function () { expect(resetCy).to.equal(originalCcy); }); - // Verify that the angle label returns to its original value (if applicable) + // Verify that the angle label returns to its original value geometryToolTile.getGraphPointLabel().contains('90°').should('exist'); - // The label tests below keep misbehaving: PT: #188159177 - - // Label the polygon - // geometryToolTile.getGraphPolygon().click(50, 50, { force: true, }); - // geometryToolTile.getSelectedGraphPoint().should('have.length', 2); - // geometryToolTile.getGraphPointLabel().contains('12.').should('not.exist'); - // geometryToolTile.getGraphPointLabel().contains('CBA').should('not.exist'); - // clueCanvas.clickToolbarButton('geometry', 'label'); - // geometryToolTile.getModalTitle().should('include.text', 'Segment Label/Value'); - //geometryToolTile.chooseLabelOption('length'); - // geometryToolTile.getGraphPointLabel().contains('7.').should('exist'); - // clueCanvas.clickToolbarButton('geometry', 'label'); - // geometryToolTile.getModalLabelInput().should('have.value', 'AC'); - // geometryToolTile.chooseLabelOption('label'); - // geometryToolTile.getGraphPointLabel().contains('12.').should('not.exist'); - // //geometryToolTile.getGraphPointLabel().contains('AC').should('exist'); - // clueCanvas.clickToolbarButton('geometry', 'label'); - // geometryToolTile.chooseLabelOption('none'); - // geometryToolTile.clickGraphPosition(0, 0); // deselect polygon - - // // Label a segment - // geometryToolTile.getGraphPointLabel().contains('AB').should('exist'); - // geometryToolTile.getGraphLine().should('have.length', 5); // 0-1 = axis lines, 2-4 = triangle - // geometryToolTile.getGraphLine().eq(4).click({ force: true }); - // clueCanvas.clickToolbarButton('geometry', 'label'); - // geometryToolTile.getModalTitle().should('include.text', 'Segment Label/Value'); - // geometryToolTile.chooseLabelOption('label'); - // geometryToolTile.getGraphPointLabel().contains('BC').should('exist'); - // clueCanvas.clickToolbarButton('geometry', 'label'); - // geometryToolTile.chooseLabelOption('length'); - // geometryToolTile.getGraphPointLabel().contains('BC').should('not.exist'); - // geometryToolTile.getGraphPointLabel().contains('5').should('exist'); - // clueCanvas.clickToolbarButton('geometry', 'label'); - // geometryToolTile.chooseLabelOption('none'); - // geometryToolTile.getGraphPointLabel().contains('BC').should('not.exist'); - // geometryToolTile.getGraphPointLabel().contains('5').should('not.exist'); + // turn off 90 degree angle for check + clueCanvas.clickToolbarButton('geometry', 'select'); + geometryToolTile.selectGraphPoint(10, 5); // this point is a 90 degree angle + clueCanvas.clickToolbarButton('geometry', 'label'); + geometryToolTile.toggleAngleCheckbox(); + geometryToolTile.getGraphPointLabel().contains('90°').should('not.exist'); // Change color of polygon geometryToolTile.selectGraphPoint(7, 6); // click middle of polygon to select it From 792a700a38dea015cd30ecdcaec42d44d46d85f5 Mon Sep 17 00:00:00 2001 From: nstclair-cc <20171905+nstclair-cc@users.noreply.github.com> Date: Thu, 5 Sep 2024 17:38:40 -0700 Subject: [PATCH 14/20] added a check for polygon length with shared points --- .../tile_tests/geometry_tool_spec.js | 42 +++++++++++++++---- 1 file changed, 33 insertions(+), 9 deletions(-) diff --git a/cypress/e2e/functional/tile_tests/geometry_tool_spec.js b/cypress/e2e/functional/tile_tests/geometry_tool_spec.js index e2688a75f4..be5f0fe548 100644 --- a/cypress/e2e/functional/tile_tests/geometry_tool_spec.js +++ b/cypress/e2e/functional/tile_tests/geometry_tool_spec.js @@ -123,7 +123,7 @@ context('Geometry Tool', function () { geometryToolTile.getGraphAxisTickLabels().last().should("have.text", "15"); }); - it.only('works in all four modes', () => { + it('works in all four modes', () => { beforeTest(); clueCanvas.addTile('geometry'); geometryToolTile.getGraph().should("exist"); @@ -218,9 +218,6 @@ context('Geometry Tool', function () { geometryToolTile.toggleAngleCheckbox(); geometryToolTile.getGraphPointLabel().contains('90°').should('not.exist'); - - // The label tests below keep misbehaving: PT: #188159177 - //Label the polygon cy.log('label the polygon'); clueCanvas.clickToolbarButton('geometry', 'select'); @@ -232,7 +229,6 @@ context('Geometry Tool', function () { geometryToolTile.getModalTitle().should('include.text', 'Label'); geometryToolTile.chooseLabelOption('length'); geometryToolTile.getGraphPointLabel().contains('12.').should('exist'); - cy.log('label ABC'); clueCanvas.clickToolbarButton('geometry', 'label'); geometryToolTile.getModalLabelInput().should('have.value', 'ABC'); geometryToolTile.chooseLabelOption('label'); @@ -258,10 +254,10 @@ context('Geometry Tool', function () { geometryToolTile.chooseLabelOption('none'); geometryToolTile.getGraphPointLabel().contains('AB').should('not.exist'); geometryToolTile.getGraphPointLabel().contains('5').should('not.exist'); - geometryToolTile.clickGraphPosition(20, 20); // deselect the segment + geometryToolTile.clickGraphPosition(0, 0); // deselect the segment // Test keyboard functions to move the selected point(s) - cy.log('Test keyboard functions'); + cy.log('Test keyboard functions to move polygon points'); // turn on 90 degree angle for check clueCanvas.clickToolbarButton('geometry', 'select'); @@ -325,7 +321,7 @@ context('Geometry Tool', function () { // Verify that the angle label returns to its original value geometryToolTile.getGraphPointLabel().contains('90°').should('exist'); - // turn off 90 degree angle for check + // Turn off 90 degree angle label for check clueCanvas.clickToolbarButton('geometry', 'select'); geometryToolTile.selectGraphPoint(10, 5); // this point is a 90 degree angle clueCanvas.clickToolbarButton('geometry', 'label'); @@ -433,6 +429,26 @@ context('Geometry Tool', function () { } }); + // Add length labels to two line segments + cy.log('Add length labels to two line segments'); + + // Select line segments by clicking between two points + geometryToolTile.clickGraphPosition(7.5, 5); // Middle of the first segment between (5, 5) and (10, 5) + clueCanvas.clickToolbarButton('geometry', 'label'); + geometryToolTile.getModalTitle().should('contain.text', 'Length'); + geometryToolTile.chooseLabelOption('length'); + + geometryToolTile.clickGraphPosition(15, 7.5); // Middle of the second segment between (15, 5) and (15, 10) + clueCanvas.clickToolbarButton('geometry', 'label'); + geometryToolTile.getModalTitle().should('contain.text', 'Length'); + geometryToolTile.chooseLabelOption('length'); + cy.log('let us figure out the labels here'); + geometryToolTile.clickGraphPosition(0, 0); // deselect + + // Verify that the two line segments were created + geometryToolTile.getGraphPointLabel().contains('10.0').should('exist'); + geometryToolTile.getGraphPointLabel().contains('5.0').should('exist'); + // Move the point cy.log('Move the point'); clueCanvas.clickToolbarButton('geometry', 'select'); @@ -461,6 +477,10 @@ context('Geometry Tool', function () { geometryToolTile.getGraphPointLabel().contains(`${newAngle}°`).should('exist'); // Check if angle decreased by 1 degree }); + // Verify that the two line segments have changed + geometryToolTile.getGraphPointLabel().contains('10.1').should('exist'); + geometryToolTile.getGraphPointLabel().contains('4.9').should('exist'); + // Move the point back to the original position cy.log('Move the point back to the original position'); geometryToolTile.getSelectedGraphPoint().trigger('keydown', { keyCode: 37 }); // simulate left arrow key press @@ -486,6 +506,10 @@ context('Geometry Tool', function () { geometryToolTile.getGraphPointLabel().contains(`${initialAngle}°`).should('exist'); }); + // Verify that the two line segments returned to their original values + geometryToolTile.getGraphPointLabel().contains('10.0').should('exist'); + geometryToolTile.getGraphPointLabel().contains('5.0').should('exist'); + // Verify the point is still shared cy.log('Verify that the point is still shared'); geometryToolTile.getGraphPoint().should("have.length", 6); // New point added @@ -567,7 +591,7 @@ context('Geometry Tool', function () { clueCanvas.clickToolbarButton('geometry', 'delete'); geometryToolTile.getGraphCircle().should("have.length", 0); geometryToolTile.getGraphPoint().should("have.length", 1); - geometryToolTile.getGraphPolygon().should("have.length", 0); // Verify the polygon is created + geometryToolTile.getGraphPolygon().should("have.length", 0); }); it('will test Geometry tile undo redo', () => { From 6c5a52f9c8ba40f64c9c06ce1c37ce0be280d4b7 Mon Sep 17 00:00:00 2001 From: nstclair-cc <20171905+nstclair-cc@users.noreply.github.com> Date: Thu, 5 Sep 2024 17:44:33 -0700 Subject: [PATCH 15/20] Removed arbitrary logs --- .../functional/tile_tests/geometry_tool_spec.js | 15 --------------- 1 file changed, 15 deletions(-) diff --git a/cypress/e2e/functional/tile_tests/geometry_tool_spec.js b/cypress/e2e/functional/tile_tests/geometry_tool_spec.js index be5f0fe548..6b339cbe82 100644 --- a/cypress/e2e/functional/tile_tests/geometry_tool_spec.js +++ b/cypress/e2e/functional/tile_tests/geometry_tool_spec.js @@ -267,12 +267,10 @@ context('Geometry Tool', function () { geometryToolTile.getGraphPointLabel().contains('90°').should('exist'); // Select the graph point at (5, 5) - cy.log('select graph point'); clueCanvas.clickToolbarButton('geometry', 'select'); geometryToolTile.clickGraphPosition(5, 5); // Verify that the point has been selected - cy.log('graph point selected'); geometryToolTile.getSelectedGraphPoint().should('have.length', 1); // Store the original coordinates for comparison @@ -397,7 +395,6 @@ context('Geometry Tool', function () { geometryToolTile.getGraphPoint().should("have.length", 6); // New point added // Store the original coordinates for comparison - cy.log('Store original coordinates'); let originalCx, originalCy; clueCanvas.clickToolbarButton('geometry', 'select'); geometryToolTile.clickGraphPosition(15, 5); // shared point @@ -409,7 +406,6 @@ context('Geometry Tool', function () { }); // Add an angle label - cy.log('Add an angle label'); geometryToolTile.getGraphPointLabel().contains('°').should('not.exist'); clueCanvas.clickToolbarButton('geometry', 'select'); geometryToolTile.selectGraphPoint(20, 5); // this point is a 45-degree angle but sometimes it starts at 44 @@ -430,8 +426,6 @@ context('Geometry Tool', function () { }); // Add length labels to two line segments - cy.log('Add length labels to two line segments'); - // Select line segments by clicking between two points geometryToolTile.clickGraphPosition(7.5, 5); // Middle of the first segment between (5, 5) and (10, 5) clueCanvas.clickToolbarButton('geometry', 'label'); @@ -442,7 +436,6 @@ context('Geometry Tool', function () { clueCanvas.clickToolbarButton('geometry', 'label'); geometryToolTile.getModalTitle().should('contain.text', 'Length'); geometryToolTile.chooseLabelOption('length'); - cy.log('let us figure out the labels here'); geometryToolTile.clickGraphPosition(0, 0); // deselect // Verify that the two line segments were created @@ -450,14 +443,12 @@ context('Geometry Tool', function () { geometryToolTile.getGraphPointLabel().contains('5.0').should('exist'); // Move the point - cy.log('Move the point'); clueCanvas.clickToolbarButton('geometry', 'select'); geometryToolTile.clickGraphPosition(15, 5); // shared point geometryToolTile.getSelectedGraphPoint().trigger('keydown', { keyCode: 39 }); // simulate right arrow key press geometryToolTile.getSelectedGraphPoint().trigger('keydown', { keyCode: 38 }); // simulate up arrow key press // Verify that the point values changed - cy.log('Verify that the point values changed'); cy.get('@originalCx').then((originalCx) => { cy.get('@originalCy').then((originalCy) => { geometryToolTile.getSelectedGraphPoint().then(($point) => { @@ -471,7 +462,6 @@ context('Geometry Tool', function () { }); // Verify that the angle has decreased by 1 degree - cy.log('Verify that the angle has changed by decreasing 1 degree'); cy.get('@initialAngle').then((initialAngle) => { const newAngle = initialAngle - 1; geometryToolTile.getGraphPointLabel().contains(`${newAngle}°`).should('exist'); // Check if angle decreased by 1 degree @@ -482,12 +472,10 @@ context('Geometry Tool', function () { geometryToolTile.getGraphPointLabel().contains('4.9').should('exist'); // Move the point back to the original position - cy.log('Move the point back to the original position'); geometryToolTile.getSelectedGraphPoint().trigger('keydown', { keyCode: 37 }); // simulate left arrow key press geometryToolTile.getSelectedGraphPoint().trigger('keydown', { keyCode: 40 }); // simulate down arrow key press // Verify that the point has returned to its original coordinates - cy.log('Verify point return to original coordinates'); cy.get('@originalCx').then((originalCx) => { cy.get('@originalCy').then((originalCy) => { geometryToolTile.getSelectedGraphPoint().then(($point) => { @@ -501,7 +489,6 @@ context('Geometry Tool', function () { }); // Verify that the angle has returned to its original value - cy.log('Verify the angle returns to the original value'); cy.get('@initialAngle').then((initialAngle) => { geometryToolTile.getGraphPointLabel().contains(`${initialAngle}°`).should('exist'); }); @@ -511,7 +498,6 @@ context('Geometry Tool', function () { geometryToolTile.getGraphPointLabel().contains('5.0').should('exist'); // Verify the point is still shared - cy.log('Verify that the point is still shared'); geometryToolTile.getGraphPoint().should("have.length", 6); // New point added // Delete the first polygon @@ -529,7 +515,6 @@ context('Geometry Tool', function () { geometryToolTile.getGraphPoint().should("have.length", 0); // Create polygon from existing points - cy.log('Create polygon from existing points'); clueCanvas.clickToolbarButton('geometry', 'point'); geometryToolTile.clickGraphPosition(0, 0); geometryToolTile.clickGraphPosition(10, 0); From a13152556a16b34b9109b50a37e0fa3716f7dc56 Mon Sep 17 00:00:00 2001 From: nstclair-cc <20171905+nstclair-cc@users.noreply.github.com> Date: Thu, 5 Sep 2024 17:59:50 -0700 Subject: [PATCH 16/20] removed XY Plot specs --- .../geometry_table_integraton_test_spec.js | 23 ------------------- 1 file changed, 23 deletions(-) diff --git a/cypress/e2e/functional/tile_tests/geometry_table_integraton_test_spec.js b/cypress/e2e/functional/tile_tests/geometry_table_integraton_test_spec.js index 3d96422aad..e76d9c07ab 100644 --- a/cypress/e2e/functional/tile_tests/geometry_table_integraton_test_spec.js +++ b/cypress/e2e/functional/tile_tests/geometry_table_integraton_test_spec.js @@ -3,10 +3,8 @@ import Canvas from '../../../support/elements/common/Canvas'; import ClueCanvas from '../../../support/elements/common/cCanvas'; import GeometryToolTile from '../../../support/elements/tile/GeometryToolTile'; import TableToolTile from '../../../support/elements/tile/TableToolTile'; -import XYPlotToolTile from '../../../support/elements/tile/XYPlotToolTile'; let resourcesPanel = new ResourcesPanel; -let xyTile = new XYPlotToolTile; const canvas = new Canvas; const clueCanvas = new ClueCanvas; const geometryToolTile = new GeometryToolTile; @@ -102,27 +100,6 @@ context('Geometry Table Integration', function () { clueCanvas.deleteTile('geometry'); clueCanvas.deleteTile('geometry'); clueCanvas.deleteTile('table'); - - cy.log('creates polygons from table data'); - clueCanvas.addTile('table'); - - // Add points to the table - tableToolTile.typeInTableCellXY(0, 0, '5'); - tableToolTile.typeInTableCellXY(0, 1, '5'); - tableToolTile.typeInTableCellXY(1, 0, '10'); - tableToolTile.typeInTableCellXY(1, 1, '5'); - tableToolTile.typeInTableCellXY(2, 0, '9'); - tableToolTile.typeInTableCellXY(2, 1, '9'); - - // Click the "Graph IT!" button to create the polygon - clueCanvas.clickToolbarButton('table', 'link-graph'); - tableToolTile.getLinkGraphModalTileMenu().select('New Graph'); - tableToolTile.getLinkGraphModalLinkButton().should("contain", "Graph It!").click(); - - // Verify that points are added to the graph - xyTile.getTile().should('be.visible'); - xyTile.getXYPlotTitle().should('contain', 'Graph 1'); - xyTile.getGraphDot().should('have.length', 3); }); it.skip('test creating a polygon', function () { From 4a2f972b047aed74a4d09f1b4b9b924b7430edf7 Mon Sep 17 00:00:00 2001 From: nstclair-cc <20171905+nstclair-cc@users.noreply.github.com> Date: Thu, 5 Sep 2024 18:00:55 -0700 Subject: [PATCH 17/20] Cleaned up code --- .../tile_tests/geometry_table_integraton_test_spec.js | 3 --- 1 file changed, 3 deletions(-) diff --git a/cypress/e2e/functional/tile_tests/geometry_table_integraton_test_spec.js b/cypress/e2e/functional/tile_tests/geometry_table_integraton_test_spec.js index e76d9c07ab..2126a185d3 100644 --- a/cypress/e2e/functional/tile_tests/geometry_table_integraton_test_spec.js +++ b/cypress/e2e/functional/tile_tests/geometry_table_integraton_test_spec.js @@ -96,10 +96,7 @@ context('Geometry Table Integration', function () { cy.log('verify point no longer has p1 in table and geometry'); geometryToolTile.getGraphPointLabel().contains('A').should('not.exist'); - // clear the canvas clueCanvas.deleteTile('geometry'); - clueCanvas.deleteTile('geometry'); - clueCanvas.deleteTile('table'); }); it.skip('test creating a polygon', function () { From 25742dcf0fd653ac76ab10109a7d04a8771045c4 Mon Sep 17 00:00:00 2001 From: nstclair-cc <20171905+nstclair-cc@users.noreply.github.com> Date: Fri, 6 Sep 2024 16:07:04 -0700 Subject: [PATCH 18/20] Incorporated PR feedback --- .../tile_tests/geometry_tool_spec.js | 92 +++++++------------ .../support/elements/tile/GeometryToolTile.js | 2 +- 2 files changed, 32 insertions(+), 62 deletions(-) diff --git a/cypress/e2e/functional/tile_tests/geometry_tool_spec.js b/cypress/e2e/functional/tile_tests/geometry_tool_spec.js index 6b339cbe82..14ded3c302 100644 --- a/cypress/e2e/functional/tile_tests/geometry_tool_spec.js +++ b/cypress/e2e/functional/tile_tests/geometry_tool_spec.js @@ -239,6 +239,7 @@ context('Geometry Tool', function () { geometryToolTile.clickGraphPosition(0, 0); // deselect polygon // Label a segment + cy.log('label a segment'); geometryToolTile.getGraphPointLabel().contains('AB').should('not.exist'); geometryToolTile.getGraphLine().should('have.length', 5); // 0-1 = axis lines, 2-4 = triangle geometryToolTile.getGraphLine().eq(4).click({ force: true }); @@ -274,10 +275,10 @@ context('Geometry Tool', function () { geometryToolTile.getSelectedGraphPoint().should('have.length', 1); // Store the original coordinates for comparison - let originalCcx, originalCcy; + let originalXCoord, originalYCoord; geometryToolTile.getSelectedGraphPoint().then(($point) => { - originalCcx = parseFloat($point.attr('cx')); - originalCcy = parseFloat($point.attr('cy')); + originalXCoord = parseFloat($point.attr('cx')); + originalYCoord = parseFloat($point.attr('cy')); }); // Move the selected point up using the arrow key @@ -290,11 +291,11 @@ context('Geometry Tool', function () { // Verify that the point has moved: cx should be greater and cy should be less than the original values geometryToolTile.getSelectedGraphPoint().then(($point) => { - const newCx = parseFloat($point.attr('cx')); - const newCy = parseFloat($point.attr('cy')); + const newXCoord = parseFloat($point.attr('cx')); + const newYCoord = parseFloat($point.attr('cy')); - expect(newCx).to.be.greaterThan(originalCcx); - expect(newCy).to.be.lessThan(originalCcy); + expect(newXCoord).to.be.greaterThan(originalXCoord); + expect(newYCoord).to.be.lessThan(originalYCoord); }); // Also check that the angle label has changed from its original value @@ -309,11 +310,11 @@ context('Geometry Tool', function () { // Verify that the point has returned to its original coordinates geometryToolTile.getSelectedGraphPoint().then(($point) => { - const resetCx = parseFloat($point.attr('cx')); - const resetCy = parseFloat($point.attr('cy')); + const newXCoord = parseFloat($point.attr('cx')); + const newYCoord = parseFloat($point.attr('cy')); - expect(resetCx).to.equal(originalCcx); - expect(resetCy).to.equal(originalCcy); + expect(newXCoord).to.equal(originalXCoord); + expect(newYCoord).to.equal(originalYCoord); }); // Verify that the angle label returns to its original value @@ -324,7 +325,7 @@ context('Geometry Tool', function () { geometryToolTile.selectGraphPoint(10, 5); // this point is a 90 degree angle clueCanvas.clickToolbarButton('geometry', 'label'); geometryToolTile.toggleAngleCheckbox(); - geometryToolTile.getGraphPointLabel().contains('90°').should('not.exist'); + geometryToolTile.getGraphPointLabel().should('not.contain', '90°'); // Change color of polygon geometryToolTile.selectGraphPoint(7, 6); // click middle of polygon to select it @@ -394,35 +395,15 @@ context('Geometry Tool', function () { // Point should be shared geometryToolTile.getGraphPoint().should("have.length", 6); // New point added - // Store the original coordinates for comparison - let originalCx, originalCy; + // Store the original point coordinates for comparison + let originalPx, originalPy; clueCanvas.clickToolbarButton('geometry', 'select'); geometryToolTile.clickGraphPosition(15, 5); // shared point geometryToolTile.getSelectedGraphPoint().then(($point) => { - originalCx = parseFloat($point.attr('cx')); - originalCy = parseFloat($point.attr('cy')); - cy.wrap(originalCx).as('originalCx'); - cy.wrap(originalCy).as('originalCy'); - }); - - // Add an angle label - geometryToolTile.getGraphPointLabel().contains('°').should('not.exist'); - clueCanvas.clickToolbarButton('geometry', 'select'); - geometryToolTile.selectGraphPoint(20, 5); // this point is a 45-degree angle but sometimes it starts at 44 - clueCanvas.clickToolbarButton('geometry', 'label'); - geometryToolTile.toggleAngleCheckbox(); - - // Use a flexible check to verify either '44°' or '45°' - cy.log('Verify the initial angle is either 44° or 45°'); - geometryToolTile.getGraphPointLabel().then(($label) => { - const angleText = $label.text(); - if (angleText.includes('44°')) { - cy.wrap(44).as('initialAngle'); - } else if (angleText.includes('45°')) { - cy.wrap(45).as('initialAngle'); - } else { - throw new Error(`Unexpected angle: ${angleText}`); - } + originalPx = parseFloat($point.attr('cx')); + originalPy = parseFloat($point.attr('cy')); + cy.wrap(originalPx).as('originalPx'); + cy.wrap(originalPy).as('originalPy'); }); // Add length labels to two line segments @@ -449,24 +430,18 @@ context('Geometry Tool', function () { geometryToolTile.getSelectedGraphPoint().trigger('keydown', { keyCode: 38 }); // simulate up arrow key press // Verify that the point values changed - cy.get('@originalCx').then((originalCx) => { - cy.get('@originalCy').then((originalCy) => { + cy.get('@originalPx').then((originalPx) => { + cy.get('@originalPy').then((originalPy) => { geometryToolTile.getSelectedGraphPoint().then(($point) => { - const newCx = parseFloat($point.attr('cx')); - const newCy = parseFloat($point.attr('cy')); + const newPx = parseFloat($point.attr('cx')); // 'px' for point x-coordinate + const newPy = parseFloat($point.attr('cy')); // 'py' for point y-coordinate - expect(newCx).to.be.greaterThan(originalCx); - expect(newCy).to.be.lessThan(originalCy); + expect(newPx).to.be.greaterThan(originalPx); + expect(newPy).to.be.lessThan(originalPy); }); }); }); - // Verify that the angle has decreased by 1 degree - cy.get('@initialAngle').then((initialAngle) => { - const newAngle = initialAngle - 1; - geometryToolTile.getGraphPointLabel().contains(`${newAngle}°`).should('exist'); // Check if angle decreased by 1 degree - }); - // Verify that the two line segments have changed geometryToolTile.getGraphPointLabel().contains('10.1').should('exist'); geometryToolTile.getGraphPointLabel().contains('4.9').should('exist'); @@ -476,23 +451,18 @@ context('Geometry Tool', function () { geometryToolTile.getSelectedGraphPoint().trigger('keydown', { keyCode: 40 }); // simulate down arrow key press // Verify that the point has returned to its original coordinates - cy.get('@originalCx').then((originalCx) => { - cy.get('@originalCy').then((originalCy) => { + cy.get('@originalPx').then((originalPx) => { + cy.get('@originalPy').then((originalPy) => { geometryToolTile.getSelectedGraphPoint().then(($point) => { - const resetCx = parseFloat($point.attr('cx')); - const resetCy = parseFloat($point.attr('cy')); + const resetPx = parseFloat($point.attr('cx')); + const resetPy = parseFloat($point.attr('cy')); - expect(resetCx).to.equal(originalCx); - expect(resetCy).to.equal(originalCy); + expect(resetPx).to.equal(originalPx); + expect(resetPy).to.equal(originalPy); }); }); }); - // Verify that the angle has returned to its original value - cy.get('@initialAngle').then((initialAngle) => { - geometryToolTile.getGraphPointLabel().contains(`${initialAngle}°`).should('exist'); - }); - // Verify that the two line segments returned to their original values geometryToolTile.getGraphPointLabel().contains('10.0').should('exist'); geometryToolTile.getGraphPointLabel().contains('5.0').should('exist'); diff --git a/cypress/support/elements/tile/GeometryToolTile.js b/cypress/support/elements/tile/GeometryToolTile.js index 11be58e3d7..5871e87e80 100644 --- a/cypress/support/elements/tile/GeometryToolTile.js +++ b/cypress/support/elements/tile/GeometryToolTile.js @@ -152,7 +152,7 @@ class GeometryToolTile { toggleAngleCheckbox(value) { cy.get('.ReactModalPortal input#angle-checkbox').click(); - cy.get('.ReactModalPortal button.default').click({force:true}); + cy.get('.ReactModalPortal button.default').click(); } showAngle(){ From 141d6182a9650e297dd10b2d92333b9f7580e628 Mon Sep 17 00:00:00 2001 From: nstclair-cc <20171905+nstclair-cc@users.noreply.github.com> Date: Mon, 9 Sep 2024 10:11:03 -0700 Subject: [PATCH 19/20] Clean up lint error --- .../tile_tests/geometry_tool_spec.js | 42 ++++++++----------- 1 file changed, 17 insertions(+), 25 deletions(-) diff --git a/cypress/e2e/functional/tile_tests/geometry_tool_spec.js b/cypress/e2e/functional/tile_tests/geometry_tool_spec.js index 14ded3c302..e231e1650d 100644 --- a/cypress/e2e/functional/tile_tests/geometry_tool_spec.js +++ b/cypress/e2e/functional/tile_tests/geometry_tool_spec.js @@ -396,14 +396,14 @@ context('Geometry Tool', function () { geometryToolTile.getGraphPoint().should("have.length", 6); // New point added // Store the original point coordinates for comparison - let originalPx, originalPy; + let originalCx, originalCy; clueCanvas.clickToolbarButton('geometry', 'select'); geometryToolTile.clickGraphPosition(15, 5); // shared point geometryToolTile.getSelectedGraphPoint().then(($point) => { - originalPx = parseFloat($point.attr('cx')); - originalPy = parseFloat($point.attr('cy')); - cy.wrap(originalPx).as('originalPx'); - cy.wrap(originalPy).as('originalPy'); + originalCx = parseFloat($point.attr('cx')); + originalCy = parseFloat($point.attr('cy')); + cy.wrap(originalCx).as('originalCx'); + cy.wrap(originalCy).as('originalCy'); }); // Add length labels to two line segments @@ -430,16 +430,12 @@ context('Geometry Tool', function () { geometryToolTile.getSelectedGraphPoint().trigger('keydown', { keyCode: 38 }); // simulate up arrow key press // Verify that the point values changed - cy.get('@originalPx').then((originalPx) => { - cy.get('@originalPy').then((originalPy) => { - geometryToolTile.getSelectedGraphPoint().then(($point) => { - const newPx = parseFloat($point.attr('cx')); // 'px' for point x-coordinate - const newPy = parseFloat($point.attr('cy')); // 'py' for point y-coordinate - - expect(newPx).to.be.greaterThan(originalPx); - expect(newPy).to.be.lessThan(originalPy); - }); - }); + geometryToolTile.getSelectedGraphPoint().then(($point) => { + const newPx = parseFloat($point.attr('cx')); // 'px' for point x-coordinate + const newPy = parseFloat($point.attr('cy')); // 'py' for point y-coordinate + + expect(newPx).to.be.greaterThan(originalCx); + expect(newPy).to.be.lessThan(originalCy); }); // Verify that the two line segments have changed @@ -451,16 +447,12 @@ context('Geometry Tool', function () { geometryToolTile.getSelectedGraphPoint().trigger('keydown', { keyCode: 40 }); // simulate down arrow key press // Verify that the point has returned to its original coordinates - cy.get('@originalPx').then((originalPx) => { - cy.get('@originalPy').then((originalPy) => { - geometryToolTile.getSelectedGraphPoint().then(($point) => { - const resetPx = parseFloat($point.attr('cx')); - const resetPy = parseFloat($point.attr('cy')); - - expect(resetPx).to.equal(originalPx); - expect(resetPy).to.equal(originalPy); - }); - }); + geometryToolTile.getSelectedGraphPoint().then(($point) => { + const resetPx = parseFloat($point.attr('cx')); + const resetPy = parseFloat($point.attr('cy')); + + expect(resetPx).to.equal(originalCx); + expect(resetPy).to.equal(originalCy); }); // Verify that the two line segments returned to their original values From 6c39d6752fce28af32c41db8960f35bf0c33bfa9 Mon Sep 17 00:00:00 2001 From: Boris Goldowsky Date: Tue, 10 Sep 2024 07:36:25 -0400 Subject: [PATCH 20/20] Small consistency fix. --- cypress/e2e/functional/tile_tests/geometry_tool_spec.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/cypress/e2e/functional/tile_tests/geometry_tool_spec.js b/cypress/e2e/functional/tile_tests/geometry_tool_spec.js index e231e1650d..333b112487 100644 --- a/cypress/e2e/functional/tile_tests/geometry_tool_spec.js +++ b/cypress/e2e/functional/tile_tests/geometry_tool_spec.js @@ -301,7 +301,7 @@ context('Geometry Tool', function () { // Also check that the angle label has changed from its original value geometryToolTile.getAngleAdornment().should(($label) => { const angleText = $label.text(); - expect(angleText).not.to.equal('90'); // 90° was the original value + expect(angleText).not.contains('90°'); // 90° was the original value }); // Move the point back to the original position @@ -385,7 +385,7 @@ context('Geometry Tool', function () { geometryToolTile.getGraphPolygon().should("have.length", 1); // Create a second polygon that shares the same points as the first - cy.log('Create a second polygon that shares the same points as the first'); + cy.log('Create a second polygon that shares a point with the first'); clueCanvas.clickToolbarButton('geometry', 'polygon'); geometryToolTile.clickGraphPosition(15, 10); // new point geometryToolTile.clickGraphPosition(15, 5); // shared point