Update geometry_tool_spec.js

concord-consortium · Sep 11, 2024 · a48ba9e · a48ba9e
1 parent c6daab6
commit a48ba9e
Showing 1 changed file with 80 additions and 17 deletions.
diff --git a/cypress/e2e/functional/tile_tests/geometry_tool_spec.js b/cypress/e2e/functional/tile_tests/geometry_tool_spec.js
@@ -204,47 +204,110 @@ context('Geometry Tool', function () {
     geometryToolTile.getPhantomGraphPoint().should("have.length", 1);
 
     // Create vertex angle
+    cy.log('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');
+    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');
-    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
+    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 });
-    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(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