Skip to content

Commit

Permalink
Merge pull request #2360 from concord-consortium/187809206-automation…
Browse files Browse the repository at this point in the history 
…-polygon-points

Automation for Creating Polygons from Existing Points
  • Loading branch information
@nstclair-cc
nstclair-cc authored Sep 10, 2024
2 parents 72fee9a + 7316e78 commit 2a45ef4
Showing 1 changed file with 202 additions and 2 deletions.
204 changes: 202 additions & 2 deletions cypress/e2e/functional/tile_tests/geometry_tool_spec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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');
Expand Down Expand Up @@ -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');
Expand All @@ -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 });
Expand All @@ -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
Expand Down Expand Up @@ -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);
Expand Down Expand Up @@ -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', () => {
Expand Down

0 comments on commit 2a45ef4

Please sign in to comment.