diff --git a/cypress/e2e/functional/tile_tests/geometry_tool_spec.js b/cypress/e2e/functional/tile_tests/geometry_tool_spec.js index 5b31c70aa..333b11248 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,27 @@ 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'); - // Label the polygon + //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('contain.text', 'Polygon Label/Value'); + geometryToolTile.getModalTitle().should('include.text', 'Label'); geometryToolTile.chooseLabelOption('length'); geometryToolTile.getGraphPointLabel().contains('12.').should('exist'); clueCanvas.clickToolbarButton('geometry', 'label'); @@ -231,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 }); @@ -246,6 +255,77 @@ context('Geometry Tool', function () { geometryToolTile.chooseLabelOption('none'); geometryToolTile.getGraphPointLabel().contains('AB').should('not.exist'); geometryToolTile.getGraphPointLabel().contains('5').should('not.exist'); + geometryToolTile.clickGraphPosition(0, 0); // deselect the segment + + // Test keyboard functions to move the selected point(s) + cy.log('Test keyboard functions to move polygon points'); + + // 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) + clueCanvas.clickToolbarButton('geometry', 'select'); + geometryToolTile.clickGraphPosition(5, 5); + + // Verify that the point has been selected + geometryToolTile.getSelectedGraphPoint().should('have.length', 1); + + // Store the original coordinates for comparison + let originalXCoord, originalYCoord; + geometryToolTile.getSelectedGraphPoint().then(($point) => { + originalXCoord = parseFloat($point.attr('cx')); + originalYCoord = parseFloat($point.attr('cy')); + }); + + // 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 + 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 newXCoord = parseFloat($point.attr('cx')); + const newYCoord = parseFloat($point.attr('cy')); + + expect(newXCoord).to.be.greaterThan(originalXCoord); + expect(newYCoord).to.be.lessThan(originalYCoord); + }); + + // Also check that the angle label has changed from its original value + geometryToolTile.getAngleAdornment().should(($label) => { + const angleText = $label.text(); + expect(angleText).not.contains('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 newXCoord = parseFloat($point.attr('cx')); + const newYCoord = parseFloat($point.attr('cy')); + + expect(newXCoord).to.equal(originalXCoord); + expect(newYCoord).to.equal(originalYCoord); + }); + + // Verify that the angle label returns to its original value + geometryToolTile.getGraphPointLabel().contains('90°').should('exist'); + + // 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'); + geometryToolTile.toggleAngleCheckbox(); + geometryToolTile.getGraphPointLabel().should('not.contain', '90°'); // Change color of polygon geometryToolTile.selectGraphPoint(7, 6); // click middle of polygon to select it @@ -277,6 +357,125 @@ 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); + + // 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); + + // 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 a point with 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 + + // Store the original point coordinates for comparison + 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'); + }); + + // 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'); + 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 + 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 + 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 + geometryToolTile.getGraphPointLabel().contains('10.1').should('exist'); + geometryToolTile.getGraphPointLabel().contains('4.9').should('exist'); + + // 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 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 + geometryToolTile.getGraphPointLabel().contains('10.0').should('exist'); + geometryToolTile.getGraphPointLabel().contains('5.0').should('exist'); + + // Verify the point is still shared + geometryToolTile.getGraphPoint().should("have.length", 6); // New point added + + // 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 clueCanvas.clickToolbarButton('geometry', 'point'); geometryToolTile.clickGraphPosition(0, 0); @@ -339,6 +538,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); }); it('will test Geometry tile undo redo', () => {