Added e2e test to check export hash (#6532)

<!-- Raise an issue to propose your change
(https://github.com/opencv/cvat/issues).
It helps to avoid duplication of efforts from multiple independent
contributors.
Discuss your ideas with maintainers to be sure that changes will be
approved and merged.
Read the [Contribution
guide](https://opencv.github.io/cvat/docs/contributing/). -->

<!-- Provide a general summary of your changes in the Title above -->

### Motivation and context
Depends on #6529

### How has this been tested?
<!-- Please describe in detail how you tested your changes.
Include details of your testing environment, and the tests you ran to
see how your change affects other areas of the code, etc. -->

### Checklist
<!-- Go over all the following points, and put an `x` in all the boxes
that apply.
If an item isn't applicable for some reason, then ~~explicitly
strikethrough~~ the whole
line. If you don't do that, GitHub will show incorrect progress for the
pull request.
If you're unsure about any of these, don't hesitate to ask. We're here
to help! -->
- [x] I submit my changes into the `develop` branch
- [ ] I have added a description of my changes into the
[CHANGELOG](https://github.com/opencv/cvat/blob/develop/CHANGELOG.md)
file
- [ ] I have updated the documentation accordingly
- [x] I have added tests to cover my changes
- [ ] I have linked related issues (see [GitHub docs](

https://help.github.com/en/github/managing-your-work-on-github/linking-a-pull-request-to-an-issue#linking-a-pull-request-to-an-issue-using-a-keyword))
- [ ] I have increased versions of npm packages if it is necessary

([cvat-canvas](https://github.com/opencv/cvat/tree/develop/cvat-canvas#versioning),

[cvat-core](https://github.com/opencv/cvat/tree/develop/cvat-core#versioning),

[cvat-data](https://github.com/opencv/cvat/tree/develop/cvat-data#versioning)
and

[cvat-ui](https://github.com/opencv/cvat/tree/develop/cvat-ui#versioning))

### License

- [x] I submit _my code changes_ under the same [MIT License](
https://github.com/opencv/cvat/blob/develop/LICENSE) that covers the
project.
  Feel free to contact the maintainers if that's a concern.

tests/cypress/e2e/actions_objects/case_37_object_make_copy.js

@@ -59,10 +59,10 @@ context('Object make a copy.', () => {
     const createEllipseShape = {
         type: 'Shape',
         labelName,
-        cx: 550,
-        cy: 100,
-        rightX: 600,
-        topY: 150,
+        firstX: 550,
+        firstY: 100,
+        secondX: 600,
+        secondY: 150,
     };
     const countObject = 6;
 

tests/cypress/e2e/actions_objects2/case_115_ellipse_shape_track_label.js

@@ -14,34 +14,34 @@ context('Actions on ellipse.', () => {
     const createEllipseShape = {
         type: 'Shape',
         labelName,
-        cx: 250,
-        cy: 350,
-        rightX: 450,
-        topY: 280,
+        firstX: 250,
+        firstY: 350,
+        secondX: 450,
+        secondY: 280,
     };
     const createEllipseTrack = {
         type: 'Track',
         labelName,
-        cx: createEllipseShape.cx,
-        cy: createEllipseShape.cy - 150,
-        rightX: createEllipseShape.rightX,
-        topY: createEllipseShape.topY - 150,
+        firstX: createEllipseShape.firstX,
+        firstY: createEllipseShape.firstY - 150,
+        secondX: createEllipseShape.secondX,
+        secondY: createEllipseShape.secondY - 150,
     };
     const createEllipseShapeSwitchLabel = {
         type: 'Shape',
         labelName: newLabelName,
-        cx: createEllipseShape.cx + 250,
-        cy: createEllipseShape.cy,
-        rightX: createEllipseShape.rightX + 250,
-        topY: createEllipseShape.topY,
+        firstX: createEllipseShape.firstX + 250,
+        firstY: createEllipseShape.firstY,
+        secondX: createEllipseShape.secondX + 250,
+        secondY: createEllipseShape.secondY,
     };
     const createEllipseTrackSwitchLabel = {
         type: 'Track',
         labelName: newLabelName,
-        cx: createEllipseShape.cx + 250,
-        cy: createEllipseShape.cy - 150,
-        rightX: createEllipseShape.rightX + 250,
-        topY: createEllipseShape.topY - 150,
+        firstX: createEllipseShape.firstX + 250,
+        firstY: createEllipseShape.firstY - 150,
+        secondX: createEllipseShape.secondX + 250,
+        secondY: createEllipseShape.secondY - 150,
     };
 
     function testCompareRotate(shape, toFrame) {

tests/cypress/e2e/actions_tasks2/test_annotations_export_hash.js

+// Copyright (C) 2023 CVAT.ai Corporation
+//
+// SPDX-License-Identifier: MIT
+
+/// <reference types="cypress" />
+
+context('Test export hash when saving annotations', () => {
+    const taskName = 'Test export hash when saving annotations';
+    const serverFiles = {
+        images: ['image_1.jpg', 'image_2.jpg', 'image_3.jpg'],
+    };
+
+    const generalLabel = {
+        name: 'test label',
+    };
+
+    const skeletonLabel = {
+        name: 'skeleton',
+        points: [
+            { x: 0.55, y: 0.15 },
+            { x: 0.20, y: 0.35 },
+            { x: 0.43, y: 0.55 },
+            { x: 0.63, y: 0.38 },
+            { x: 0.27, y: 0.15 },
+        ],
+    };
+
+    let taskID = null;
+    let jobID = null;
+
+    before(() => {
+        cy.headlessLogin();
+        cy.visit('/tasks/create');
+        cy.get('#name').type(taskName);
+        cy.addNewLabel({ name: generalLabel.name });
+        cy.addNewSkeletonLabel(skeletonLabel);
+        cy.selectFilesFromShare(serverFiles);
+        cy.intercept('POST', '/api/tasks**').as('createTaskRequest');
+        cy.intercept('GET', '/api/jobs**').as('getJobsRequest');
+        cy.contains('button', 'Submit & Continue').click();
+        cy.wait('@createTaskRequest').then((interception) => {
+            expect(interception.response.statusCode).to.equal(201);
+            taskID = interception.response.body.id;
+        });
+        cy.wait('@getJobsRequest').then((interception) => {
+            expect(interception.response.statusCode).to.equal(200);
+            jobID = interception.response.body.results[0].id;
+        });
+    });
+
+    describe('Check saving twice', () => {
+        it('Saving twice different shapes', () => {
+            cy.visit(`/tasks/${taskID}/jobs/${jobID}`);
+            cy.get('.cvat-canvas-container').should('exist').and('be.visible');
+
+            cy.createRectangle({
+                points: 'By 2 Points',
+                type: 'Shape',
+                labelName: generalLabel.name,
+                firstX: 150,
+                firstY: 350,
+                secondX: 200,
+                secondY: 400,
+            });
+
+            cy.createRectangle({
+                points: 'By 2 Points',
+                type: 'Track',
+                labelName: generalLabel.name,
+                firstX: 200,
+                firstY: 400,
+                secondX: 250,
+                secondY: 450,
+            });
+
+            cy.createEllipse({
+                type: 'Shape',
+                labelName: generalLabel.name,
+                firstX: 150,
+                firstY: 350,
+                secondX: 200,
+                secondY: 400,
+            });
+
+            cy.createEllipse({
+                type: 'Track',
+                labelName: generalLabel.name,
+                firstX: 200,
+                firstY: 400,
+                secondX: 250,
+                secondY: 450,
+            });
+
+            cy.createPolygon({
+                reDraw: false,
+                type: 'Shape',
+                labelName: generalLabel.name,
+                pointsMap: [
+                    { x: 200, y: 350 },
+                    { x: 250, y: 350 },
+                    { x: 250, y: 400 },
+                    { x: 200, y: 400 },
+                ],
+                complete: true,
+                numberOfPoints: null,
+            });
+
+            cy.createPolygon({
+                reDraw: false,
+                type: 'Track',
+                labelName: generalLabel.name,
+                pointsMap: [
+                    { x: 150, y: 400 },
+                    { x: 200, y: 400 },
+                    { x: 200, y: 450 },
+                    { x: 150, y: 450 },
+                ],
+                complete: true,
+                numberOfPoints: null,
+            });
+
+            cy.createSkeleton({
+                xtl: 150,
+                ytl: 350,
+                xbr: 200,
+                ybr: 400,
+                labelName: skeletonLabel.name,
+                type: 'Shape',
+            });
+
+            cy.createSkeleton({
+                xtl: 200,
+                ytl: 400,
+                xbr: 250,
+                ybr: 450,
+                labelName: skeletonLabel.name,
+                type: 'Track',
+            });
+
+            cy.createTag(generalLabel.name);
+
+            cy.intercept('PATCH', `/api/jobs/${jobID}/annotations**action=create**`).as('createJobAnnotations');
+            cy.intercept('PATCH', `/api/jobs/${jobID}/annotations**action=update`).as('updateJobAnnotations');
+            cy.intercept('PATCH', `/api/jobs/${jobID}/annotations**action=delete`).as('deleteJobAnnotations');
+
+            cy.saveJob();
+            cy.wait('@createJobAnnotations').then((interception) => {
+                const { shapes, tags, tracks } = interception.response.body;
+                expect(tracks.length).to.be.equal(4);
+                expect(shapes.length).to.be.equal(4);
+                expect(tags.length).to.be.equal(1);
+            });
+
+            cy.wait('@updateJobAnnotations').then((interception) => {
+                const { shapes, tags, tracks } = interception.response.body;
+                expect(tracks.length).to.be.equal(0);
+                expect(shapes.length).to.be.equal(0);
+                expect(tags.length).to.be.equal(0);
+            });
+
+            cy.wait('@deleteJobAnnotations').then((interception) => {
+                const { shapes, tags, tracks } = interception.response.body;
+                expect(tracks.length).to.be.equal(0);
+                expect(shapes.length).to.be.equal(0);
+                expect(tags.length).to.be.equal(0);
+            });
+
+            cy.saveJob();
+            cy.wait('@createJobAnnotations').then((interception) => {
+                const { shapes, tags, tracks } = interception.response.body;
+                expect(tracks.length).to.be.equal(0);
+                expect(shapes.length).to.be.equal(0);
+                expect(tags.length).to.be.equal(0);
+            });
+
+            cy.wait('@updateJobAnnotations').then((interception) => {
+                const { shapes, tags, tracks } = interception.response.body;
+                expect(tracks.length).to.be.equal(0);
+                expect(shapes.length).to.be.equal(0);
+                expect(tags.length).to.be.equal(0);
+            });
+
+            cy.wait('@deleteJobAnnotations').then((interception) => {
+                const { shapes, tags, tracks } = interception.response.body;
+                expect(tracks.length).to.be.equal(0);
+                expect(shapes.length).to.be.equal(0);
+                expect(tags.length).to.be.equal(0);
+            });
+        });
+    });
+
+    after(() => {
+        cy.logout();
+        cy.getAuthKey().then((response) => {
+            const authKey = response.body.key;
+            cy.request({
+                method: 'DELETE',
+                url: `/api/tasks/${taskID}`,
+                headers: {
+                    Authorization: `Token ${authKey}`,
+                },
+            });
+        });
+    });
+});

tests/cypress/e2e/actions_tasks3/case_18_filters_functionality.js

@@ -71,10 +71,10 @@ context('Filters functionality.', () => {
     const createEllipseTrack = {
         type: 'Track',
         labelName: labelTrack,
-        cx: 250,
-        cy: 350,
-        rightX: 450,
-        topY: 280,
+        firstX: 250,
+        firstY: 350,
+        secondX: 450,
+        secondY: 280,
     };
 
     const cvatCanvasShapeList = [];

tests/cypress/e2e/actions_tasks3/case_48_issue_2663_annotations_statistics.js

@@ -30,18 +30,18 @@ context('Annotations statistics.', () => {
     const createEllipseShape = {
         type: 'Shape',
         labelName,
-        cx: 400,
-        cy: 400,
-        rightX: 500,
-        topY: 350,
+        firstX: 400,
+        firstY: 400,
+        secondX: 500,
+        secondY: 350,
     };
     const createEllipseTrack = {
         type: 'Track',
         labelName,
-        cx: createEllipseShape.cx,
-        cy: createEllipseShape.cy - 150,
-        rightX: createEllipseShape.rightX,
-        topY: createEllipseShape.topY - 150,
+        firstX: createEllipseShape.firstX,
+        firstY: createEllipseShape.firstY - 150,
+        secondX: createEllipseShape.secondX,
+        secondY: createEllipseShape.secondY - 150,
     };
     const createCuboidShape2Points = {
         points: 'From rectangle',

tests/cypress/e2e/skeletons/skeletons_pipeline.js

@@ -6,7 +6,16 @@
 
 context('Manipulations with skeletons', { scrollBehavior: false }, () => {
     const skeletonSize = 5;
-    const labelName = 'skeleton';
+    const skeleton = {
+        name: 'skeleton',
+        points: [
+            { x: 0.55, y: 0.15 },
+            { x: 0.20, y: 0.35 },
+            { x: 0.43, y: 0.55 },
+            { x: 0.63, y: 0.38 },
+            { x: 0.27, y: 0.15 },
+        ],
+    };
     const taskName = 'skeletons main pipeline';
     const imagesFolder = `cypress/fixtures/${taskName}`;
     const archiveName = `${taskName}.zip`;
@@ -64,79 +73,18 @@ context('Manipulations with skeletons', { scrollBehavior: false }, () => {
         it('Create a simple task', () => {
             cy.visit('/tasks/create');
             cy.get('#name').type(taskName);
-            cy.get('.cvat-constructor-viewer-new-skeleton-item').click();
-            cy.get('.cvat-skeleton-configurator').should('exist').and('be.visible');
-
-            cy.get('.cvat-label-constructor-creator').within(() => {
-                cy.get('#name').type(labelName);
-                cy.get('.ant-radio-button-checked').within(() => {
-                    cy.get('.ant-radio-button-input').should('have.attr', 'value', 'point');
-                });
-            });
-
-            const pointsOffset = [
-                { x: 0.55, y: 0.15 },
-                { x: 0.20, y: 0.35 },
-                { x: 0.43, y: 0.55 },
-                { x: 0.63, y: 0.38 },
-                { x: 0.27, y: 0.15 },
-            ];
-            expect(skeletonSize).to.be.equal(pointsOffset.length);
-
-            cy.get('.cvat-skeleton-configurator-svg').then(($canvas) => {
-                const canvas = $canvas[0];
-
-                canvas.scrollIntoView();
-                const rect = canvas.getBoundingClientRect();
-                const { width, height } = rect;
-                pointsOffset.forEach(({ x: xOffset, y: yOffset }) => {
-                    canvas.dispatchEvent(new MouseEvent('mousedown', {
-                        clientX: rect.x + width * xOffset,
-                        clientY: rect.y + height * yOffset,
-                        button: 0,
-                        bubbles: true,
-                    }));
-                });
-
-                cy.get('.ant-radio-button-wrapper:nth-child(3)').click().within(() => {
-                    cy.get('.ant-radio-button-input').should('have.attr', 'value', 'join');
-                });
-
-                cy.get('.cvat-skeleton-configurator-svg').within(() => {
-                    cy.get('circle').then(($circles) => {
-                        expect($circles.length).to.be.equal(5);
-                        $circles.each(function (i) {
-                            const circle1 = this;
-                            $circles.each(function (j) {
-                                const circle2 = this;
-                                if (i === j) return;
-                                circle1.dispatchEvent(new MouseEvent('mouseover', { bubbles: true }));
-                                circle1.dispatchEvent(new MouseEvent('click', { button: 0, bubbles: true }));
-                                circle1.dispatchEvent(new MouseEvent('mouseout', { bubbles: true }));
-
-                                circle2.dispatchEvent(new MouseEvent('mouseover', { bubbles: true }));
-                                circle2.dispatchEvent(new MouseEvent('click', { button: 0, bubbles: true }));
-                                circle2.dispatchEvent(new MouseEvent('mouseout', { bubbles: true }));
-                            });
-                        });
-                    });
-                });
-
-                cy.contains('Continue').scrollIntoView().click();
-                cy.contains('Continue').scrollIntoView().click();
-                cy.get('input[type="file"]').attachFile(archiveName, { subjectType: 'drag-n-drop' });
-
-                cy.intercept('/api/tasks?**').as('taskPost');
-                cy.contains('Submit & Open').scrollIntoView().click();
-
-                cy.wait('@taskPost').then((interception) => {
-                    taskID = interception.response.body.id;
-                    expect(interception.response.statusCode).to.be.equal(201);
-                    cy.intercept(`/api/tasks/${taskID}`).as('getTask');
-                    cy.wait('@getTask', { timeout: 10000 });
-                    cy.get('.cvat-job-item').should('exist').and('be.visible');
-                    cy.openJob();
-                });
+            cy.addNewSkeletonLabel(skeleton);
+            expect(skeletonSize).to.be.equal(skeleton.points.length);
+            cy.get('input[type="file"]').attachFile(archiveName, { subjectType: 'drag-n-drop' });
+            cy.intercept('/api/tasks?**').as('taskPost');
+            cy.contains('Submit & Open').scrollIntoView().click();
+            cy.wait('@taskPost').then((interception) => {
+                taskID = interception.response.body.id;
+                expect(interception.response.statusCode).to.be.equal(201);
+                cy.intercept(`/api/tasks/${taskID}`).as('getTask');
+                cy.wait('@getTask', { timeout: 10000 });
+                cy.get('.cvat-job-item').should('exist').and('be.visible');
+                cy.openJob();
             });
         });
     });
@@ -145,7 +93,7 @@ context('Manipulations with skeletons', { scrollBehavior: false }, () => {
         function createSkeletonObject(shapeType) {
             cy.createSkeleton({
                 ...skeletonPosition,
-                labelName,
+                labelName: skeleton.name,
                 type: `${shapeType[0].toUpperCase()}${shapeType.slice(1).toLowerCase()}`,
             });
             cy.get('#cvat_canvas_shape_1').should('exist').and('be.visible');

tests/cypress/support/commands.js

@@ -493,8 +493,8 @@ Cypress.Commands.add('createEllipse', (createEllipseParams) => {
         cy.contains('button', createEllipseParams.type).click();
     });
     cy.get('.cvat-canvas-container')
-        .click(createEllipseParams.cx, createEllipseParams.cy)
-        .click(createEllipseParams.rightX, createEllipseParams.topY);
+        .click(createEllipseParams.firstX, createEllipseParams.firstY)
+        .click(createEllipseParams.secondX, createEllipseParams.secondY);
     cy.checkPopoverHidden('draw-ellipse');
     cy.checkObjectParameters(createEllipseParams, 'ELLIPSE');
 });
@@ -932,6 +932,60 @@ Cypress.Commands.add('addNewLabel', ({ name, color }, additionalAttrs) => {
     cy.contains('.cvat-constructor-viewer-item', new RegExp(`^${name}$`)).should('exist');
 });
 
+Cypress.Commands.add('addNewSkeletonLabel', ({ name, points }) => {
+    cy.get('.cvat-constructor-viewer-new-skeleton-item').click();
+    cy.get('.cvat-skeleton-configurator').should('exist').and('be.visible');
+
+    cy.get('.cvat-label-constructor-creator').within(() => {
+        cy.get('#name').type(name);
+        cy.get('.ant-radio-button-checked').within(() => {
+            cy.get('.ant-radio-button-input').should('have.attr', 'value', 'point');
+        });
+    });
+
+    cy.get('.cvat-skeleton-configurator-svg').then(($canvas) => {
+        const canvas = $canvas[0];
+        canvas.scrollIntoView();
+        const rect = canvas.getBoundingClientRect();
+        const { width, height } = rect;
+        points.forEach(({ x: xOffset, y: yOffset }) => {
+            canvas.dispatchEvent(new MouseEvent('mousedown', {
+                clientX: rect.x + width * xOffset,
+                clientY: rect.y + height * yOffset,
+                button: 0,
+                bubbles: true,
+            }));
+        });
+
+        cy.get('.ant-radio-button-wrapper:nth-child(3)').click().within(() => {
+            cy.get('.ant-radio-button-input').should('have.attr', 'value', 'join');
+        });
+
+        cy.get('.cvat-skeleton-configurator-svg').within(() => {
+            cy.get('circle').then(($circles) => {
+                expect($circles.length).to.be.equal(5);
+                $circles.each(function (i) {
+                    const circle1 = this;
+                    $circles.each(function (j) {
+                        const circle2 = this;
+                        if (i === j) return;
+                        circle1.dispatchEvent(new MouseEvent('mouseover', { bubbles: true }));
+                        circle1.dispatchEvent(new MouseEvent('click', { button: 0, bubbles: true }));
+                        circle1.dispatchEvent(new MouseEvent('mouseout', { bubbles: true }));
+
+                        circle2.dispatchEvent(new MouseEvent('mouseover', { bubbles: true }));
+                        circle2.dispatchEvent(new MouseEvent('click', { button: 0, bubbles: true }));
+                        circle2.dispatchEvent(new MouseEvent('mouseout', { bubbles: true }));
+                    });
+                });
+            });
+        });
+
+        cy.contains('Continue').scrollIntoView().click();
+        cy.contains('Continue').scrollIntoView().click();
+    });
+});
+
 Cypress.Commands.add('checkCanvasSidebarColorEqualness', (id) => {
     cy.get(`#cvat-objects-sidebar-state-item-${id}`).then(($el) => {
         const labelColor = $el.css('backgroundColor');