Cypress test. Object propagate. (#2867)

* Add css classes

* Cypress test. Propagate object.

* Cypress test. Object propagation no on last frame.

* Try fix eslint "Unable to resolve path to module"

* Apply comments.

cvat-ui/.eslintrc.js

@@ -59,7 +59,7 @@ module.exports = {
     settings: {
         'import/resolver': {
             node: {
-                paths: ['src'],
+                paths: ['src', `${__dirname}/src`],
             },
         },
     },

cvat-ui/src/components/annotation-page/standard-workspace/propagate-confirm.tsx

@@ -1,4 +1,4 @@
-// Copyright (C) 2020 Intel Corporation
+// Copyright (C) 2020-2021 Intel Corporation
 //
 // SPDX-License-Identifier: MIT
 
@@ -49,6 +49,7 @@ export default function PropagateConfirmComponent(props: Props): JSX.Element {
             <div className='cvat-propagate-confirm'>
                 <Text>Do you want to make a copy of the object on</Text>
                 <InputNumber
+                    className='cvat-propagate-confirm-object-on-frames'
                     size='small'
                     min={minPropagateFrames}
                     value={propagateFrames}
@@ -63,6 +64,7 @@ export default function PropagateConfirmComponent(props: Props): JSX.Element {
                 {propagateFrames > 1 ? <Text> frames </Text> : <Text> frame </Text>}
                 <Text>up to the </Text>
                 <InputNumber
+                    className='cvat-propagate-confirm-object-up-to-frame'
                     size='small'
                     value={propagateUpToFrame}
                     min={frameNumber + 1}

tests/cypress/integration/actions_tasks_objects/case_53_object_propagate.js

@@ -0,0 +1,88 @@
+// Copyright (C) 2021 Intel Corporation
+//
+// SPDX-License-Identifier: MIT
+
+/// <reference types="cypress" />
+
+import { taskName, labelName } from '../../support/const';
+
+context('Object propagate.', () => {
+    const caseId = '53';
+    const createCuboidShape2Points = {
+        points: 'From rectangle',
+        type: 'Shape',
+        labelName: labelName,
+        firstX: 250,
+        firstY: 350,
+        secondX: 350,
+        secondY: 450,
+    };
+    const propagateOnOneFrame = 1;
+    const propagateOnTwoFrames = 2;
+
+    function startPropagation() {
+        cy.get('#cvat-objects-sidebar-state-item-1').find('[aria-label="more"]').trigger('mouseover');
+        cy.get('.cvat-object-item-menu').within(() => {
+            cy.contains('button', 'Propagate').click();
+        });
+    }
+
+    before(() => {
+        cy.openTaskJob(taskName);
+        cy.createCuboid(createCuboidShape2Points);
+    });
+
+    describe(`Testing case "${caseId}"`, () => {
+        it('On the 1st frame propagate object on 1 frame.', () => {
+            startPropagation();
+            cy.get('.cvat-propagate-confirm-object-on-frames') // Change value in the "copy of the object on frame" field
+                .find('input')
+                .clear()
+                .type(propagateOnOneFrame);
+            cy.get('.cvat-propagate-confirm-object-up-to-frame') // Value of "up to the frame" field should be same
+                .find('input')
+                .should('have.attr', 'value', propagateOnOneFrame);
+            cy.contains('button', 'Yes').click();
+        });
+
+        it('On the 1st and 2nd frames, the number of objects is equal to 1. On the 3rd frame is 0.', () => {
+            cy.get('.cvat_canvas_shape_cuboid').then(($cuboidCountFirstFrame) => {
+                cy.goCheckFrameNumber(1); // Go to 2nd frame
+                cy.get('.cvat_canvas_shape_cuboid').then(($cuboidCountSecondFrame) => {
+                    expect($cuboidCountFirstFrame.length).to.be.equal($cuboidCountSecondFrame.length);
+                });
+            });
+            cy.goCheckFrameNumber(2); // Go to 3rd frame
+            cy.get('.cvat_canvas_shape_cuboid').should('not.exist');
+            cy.get('.cvat-player-first-button').click();
+        });
+
+        it('From the 1st frame propagate again on 2 frames.', () => {
+            startPropagation();
+            cy.get('.cvat-propagate-confirm-object-up-to-frame') // Change value in the "up to the frame" field
+                .find('input')
+                .clear()
+                .type(propagateOnTwoFrames)
+                .should('have.attr', 'value', propagateOnTwoFrames);
+            cy.get('.cvat-propagate-confirm-object-on-frames') // Value of "copy of the object on frames" field should be same
+                .find('input')
+                .should('have.attr', 'value', propagateOnTwoFrames);
+            cy.contains('button', 'Yes').click();
+        });
+
+        it('On the 1st and 3rd frames the number of objects is equal to 1. On the 2nd frame equal to 2. On the 4th frame equal to 0', () => {
+            cy.get('.cvat_canvas_shape_cuboid').then(($cuboidCountFirstFrame) => {
+                cy.goCheckFrameNumber(2); // Go to 3rd frame
+                cy.get('.cvat_canvas_shape_cuboid').then(($cuboidCountThirdFrame) => {
+                    expect($cuboidCountFirstFrame.length).to.be.equal($cuboidCountThirdFrame.length);
+                });
+            });
+            cy.goCheckFrameNumber(1); // Go to 2nd frame
+            cy.get('.cvat_canvas_shape_cuboid').then(($cuboidCountSecondFrame) => {
+                expect($cuboidCountSecondFrame.length).to.be.equal(2);
+            });
+            cy.goCheckFrameNumber(3); // Go to 4th frame
+            cy.get('.cvat_canvas_shape_cuboid').should('not.exist');
+        });
+    });
+});