diff --git a/tests/cypress/integration/actions_tasks_objects/case_59_edit_handler.js b/tests/cypress/integration/actions_tasks_objects/case_59_edit_handler.js new file mode 100644 index 00000000000..412a5a079ce --- /dev/null +++ b/tests/cypress/integration/actions_tasks_objects/case_59_edit_handler.js @@ -0,0 +1,224 @@ +// Copyright (C) 2021 Intel Corporation +// +// SPDX-License-Identifier: MIT + +/// + +import { taskName, labelName } from '../../support/const'; + +context('Edit handler.', () => { + const caseId = '59'; + const createPolygonShape = { + redraw: false, + type: 'Shape', + labelName: labelName, + pointsMap: [ + { x: 450, y: 350 }, + { x: 550, y: 350 }, + { x: 550, y: 450 }, + ], + complete: true, + numberOfPoints: null, + }; + const createPolylinesShape = { + type: 'Shape', + labelName: labelName, + pointsMap: [ + { x: 700, y: 350 }, + { x: 800, y: 350 }, + { x: 800, y: 450 }, + ], + complete: true, + numberOfPoints: null, + }; + const createPointsShape = { + type: 'Shape', + labelName: labelName, + pointsMap: [{ x: 200, y: 400 }], + complete: true, + numberOfPoints: null, + }; + + function testActivatingShape(x, y, expectedShape) { + cy.get('.cvat-canvas-container').trigger('mousemove', x, y); + cy.get(expectedShape).should('have.class', 'cvat_canvas_shape_activated'); + } + + before(() => { + cy.openTaskJob(taskName); + }); + + describe(`Testing case "${caseId}"`, () => { + it('Start editing handler and cancel.', () => { + cy.createPolygon(createPolygonShape); + testActivatingShape(520, 400, '#cvat_canvas_shape_1'); + cy.get('.cvat-canvas-container').click(550, 350, { shiftKey: true }); + cy.get('.cvat_canvas_shape_drawing').should('exist'); + cy.get('.cvat-canvas-container').click(650, 300); + cy.get('body').type('{Esc}'); + cy.get('.cvat_canvas_shape_drawing').should('not.exist'); + }); + + it('Edit handler for the polygon. Splitting.', () => { + cy.get('.cvat-canvas-container').trigger('mousemove', 520, 400); + cy.get('#cvat_canvas_shape_1') + .should('have.class', 'cvat_canvas_shape_activated') + .invoke('attr', 'points') + .then(($points) => { + const pointsCountBefore = $points.split(' ').filter(function (el) { + return el.length != 0; + }).length; + cy.get('.cvat-canvas-container') + .click(550, 350, { shiftKey: true }) + .then(() => { + //Click on the second polygon points to start of change + cy.get('.cvat_canvas_shape_drawing') + .should('exist') + .and('have.attr', 'data-origin-client-id', '1'); + }); + cy.get('.cvat-canvas-container').click(650, 300).click(550, 450); // Click on the third polygon points to finish the change + cy.get('.cvat_canvas_shape_drawing').should('not.exist'); + cy.get('#cvat_canvas_shape_1') + .invoke('attr', 'points') + .then(($points) => { + const pointsCountAfter = $points.split(' ').filter(function (el) { + return el.length != 0; + }).length; + expect(pointsCountBefore).not.equal(pointsCountAfter); // expected 3 to not equal 4 + }); + // Splitting polygon + testActivatingShape(520, 400, '#cvat_canvas_shape_1'); + cy.get('.cvat-canvas-container') + .click(650, 300, { shiftKey: true }) + .click(450, 350) + .trigger('mouseenter', 530, 340); + cy.get('.cvat_canvas_shape_splitting').should('exist'); + cy.get('.cvat-canvas-container').trigger('mouseleave', 530, 340); + cy.get('.cvat_canvas_shape_splitting').should('not.exist'); + cy.get('.cvat-canvas-container').click(530, 340); + // Cancel changes, repeat edit handler and select an another shape + cy.get('body').type('{Ctrl}z'); + testActivatingShape(520, 400, '#cvat_canvas_shape_1'); + cy.get('.cvat-canvas-container') + .click(650, 300, { shiftKey: true }) + .click(450, 350) + .click(530, 400); + // Cancel changes again, repeat edit handler dblclick to the last point + cy.get('body').type('{Ctrl}z'); + testActivatingShape(520, 400, '#cvat_canvas_shape_1'); + cy.get('.cvat-canvas-container') + .click(650, 300, { shiftKey: true }) + .click(630, 300) + .click(530, 300) + .click(450, 350) + .click(530, 400) + .click(450, 350) + .dblclick(530, 400); + cy.get('#cvat_canvas_shape_1') + .invoke('attr', 'points') + .then(($points) => { + const pointsCountAfterSplitting = $points.split(' ').filter(function (el) { + return el.length != 0; + }).length; + expect(pointsCountAfterSplitting).to.be.equal(5); // expected 3 to equal 3 + }); + }); + }); + + it('Edit handler for the polyline.', () => { + cy.createPolyline(createPolylinesShape); + cy.get('.cvat-canvas-container').trigger('mousemove', 800, 400); + cy.get('#cvat_canvas_shape_2') + .should('have.class', 'cvat_canvas_shape_activated') + .invoke('attr', 'points') + .then(($pointsCordsBefore) => { + cy.get('.cvat-canvas-container') + .click(800, 450, { shiftKey: true }) + .then(() => { + // Click on the third polyline points to start of change + cy.get('.cvat_canvas_shape_drawing') + .should('exist') + .and('have.attr', 'data-origin-client-id', '2'); + cy.get('body').type('{Ctrl}'); + cy.get('.cvat_canvas_autoborder_point') + .should('exist') + .and('be.visible') + .then(($autoborderPoints) => { + expect($autoborderPoints.length).to.be.equal(5); // Autoborder points on the polygon + }); + }); + cy.get('.cvat-canvas-container').click(750, 500).click(700, 350); // Click on the first polyline points to finish the change + cy.get('.cvat_canvas_shape_drawing').should('not.exist'); + cy.get('#cvat_canvas_shape_2') + .invoke('attr', 'points') + .then(($pointsCordsAfter) => { + // expected '10071.4287109375,9788.5712890625 ...' to not equal '10166.6669921875,9883.8095703125 ...' + expect($pointsCordsBefore).to.not.equal($pointsCordsAfter); + }); + }); + }); + + it('Edit handler for the points.', () => { + cy.createPoint(createPointsShape); + cy.get('.cvat-canvas-container').trigger('mousemove', 200, 400).trigger('mouseenter', 200, 400); + cy.get('.cvat-canvas-container') + .click(200, 400, { shiftKey: true }) + .then(() => { + // Click on the point shape to start of change + cy.get('.cvat_canvas_selected_point').should('exist'); + cy.get('.cvat_canvas_shape_drawing').should('exist').and('have.attr', 'data-origin-client-id', '3'); + }); + cy.get('.cvat-canvas-container') + .click(200, 300) + .find('circle') + .then(($circleEditHanlerProgress) => { + // rightclick() on canvas to check canceling draw a additional point + cy.get('.cvat-canvas-container') + .rightclick() + .find('circle') + .then(($circleEditHanlerProgressCancelDrawPoint) => { + expect($circleEditHanlerProgress.length).not.equal( + $circleEditHanlerProgressCancelDrawPoint.length, + ); // expected 4 to not equal 3 + }); + }); + cy.get('.cvat-canvas-container').click(200, 300).click(200, 400); // Click on the first points shape to finish the change + cy.get('#cvat_canvas_shape_3') + .find('circle') + .then(($circleCountAfterHanlerEditing) => { + expect($circleCountAfterHanlerEditing.length).to.be.equal(2); + }); + }); + + it('Combining polygon and points.', () => { + testActivatingShape(520, 400, '#cvat_canvas_shape_1'); + cy.get('.cvat-canvas-container') // Draw line with shift key held down + .click(550, 450, { shiftKey: true }) + .trigger('mousemove', 530, 450, { shiftKey: true }) + .trigger('mousemove', 500, 450, { shiftKey: true }) + .trigger('mousemove', 200, 400, { shiftKey: true }); + // Coverage "!pointsCriteria && !lengthCriteria" + cy.get('.cvat-canvas-container').click(200, 400).click(200, 300); + cy.get('.cvat_canvas_autoborder_point_direction').should('exist'); + cy.get('.cvat-canvas-container').dblclick(200, 300); + cy.get('.cvat_canvas_autoborder_point_direction').should('not.exist'); + cy.get('.cvat-canvas-container').click(450, 350); + cy.get('#cvat_canvas_shape_1') + .invoke('attr', 'points') + .then(($points) => { + expect( + $points.split(' ').filter(function (el) { + return el.length != 0; + }).length, + ).to.be.equal(11); + }); + testActivatingShape(750, 500, '#cvat_canvas_shape_2'); + // Coverage "circle.on('mousedown', (e: MouseEvent): void => {" + cy.get('.cvat-canvas-container') + .click(750, 500, { shiftKey: true }) + .click(450, 350) + .trigger('mousemove', 450, 370) + .click(450, 350); + }); + }); +});