Cypress. Add test for OpenCV TrackerMIL tool (#4301)

* init

* added test

* added comment

* fix typo

* fix linter error

* applied comments

cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/opencv-control.tsx

@@ -686,7 +686,7 @@ class OpenCVControlComponent extends React.PureComponent<Props & DispatchToProps
                 <Row justify='center'>
                     <Col span={24}>
                         <LabelSelector
-                            className='cvat-opencv-tracker-select'
+                            className='cvat-opencv-tracking-label-select'
                             labels={labels}
                             value={activeLabelID}
                             onChange={(value: any) => this.setState({ activeLabelID: value.id })}

cvat-ui/src/components/annotation-page/standard-workspace/styles.scss

@@ -260,6 +260,10 @@
     width: 100%;
 }
 
+.cvat-opencv-tracking-label-select {
+    @extend .cvat-opencv-tracker-select;
+}
+
 .cvat-opencv-tracker-content {
     margin-top: $grid-unit-size;
 }

tests/cypress/integration/actions_tasks2/case_101_opencv_basic_actions.js

@@ -1,14 +1,14 @@
-// Copyright (C) 2021 Intel Corporation
+// Copyright (C) 2021-2022 Intel Corporation
 //
 // SPDX-License-Identifier: MIT
 
 /// <reference types="cypress" />
 
-import { taskName, labelName } from '../../support/const';
 import { generateString } from '../../support/utils';
 
-context('OpenCV. Intelligent scissors. Histogram Equalization.', () => {
+context('OpenCV. Intelligent scissors. Histogram Equalization. TrackerMIL.', () => {
     const caseId = '101';
+    const labelName = `Case ${caseId}`;
     const newLabel = `Case ${caseId}`;
     const createOpencvShape = {
         labelName,
@@ -31,6 +31,15 @@ context('OpenCV. Intelligent scissors. Histogram Equalization.', () => {
         ],
         finishWithButton: true,
     };
+    const createOpencvTrackerShape = {
+        labelName,
+        tracker: 'TrackerMIL',
+        pointsMap: [
+            { x: 440, y: 45 },
+            { x: 650, y: 150 },
+        ],
+    };
+
     const keyCodeN = 78;
     const pointsMap = [
         { x: 300, y: 400 },
@@ -40,10 +49,32 @@ context('OpenCV. Intelligent scissors. Histogram Equalization.', () => {
         { x: 400, y: 550 },
     ];
 
+    const taskName = `New annotation task for ${labelName}`;
+    const attrName = `Attr for ${labelName}`;
+    const textDefaultValue = 'Some default value for type Text';
+    const imagesCount = 5;
+    const imageFileName = `image_${labelName.replace(' ', '_').toLowerCase()}`;
+    const width = 400;
+    const height = 400;
+    const posX = 10;
+    const posY = 10;
+    const color = 'gray';
+    const archiveName = `${imageFileName}.zip`;
+    const archivePath = `cypress/fixtures/${archiveName}`;
+    const imagesFolder = `cypress/fixtures/${imageFileName}`;
+    const directoryToArchive = imagesFolder;
+    const extension = 'jpg';
+
     before(() => {
-        cy.openTask(taskName);
-        cy.addNewLabel(newLabel);
-        cy.openJob();
+        cy.visit('auth/login');
+        cy.login();
+        for (let i = 0; i < imagesCount; i++) {
+            cy.imageGenerator(imagesFolder, imageFileName + i, width, height, color, posX + i * 5,
+                posY + i * 5, labelName, 1, extension);
+        }
+        cy.createZipArchive(directoryToArchive, archivePath);
+        cy.createAnnotationTask(taskName, labelName, attrName, textDefaultValue, archiveName);
+        cy.openTaskJob(taskName);
     });
 
     describe(`Testing case "${caseId}"`, () => {
@@ -142,6 +173,8 @@ context('OpenCV. Intelligent scissors. Histogram Equalization.', () => {
             cy.get('.cvat-notification-notice-opencv-processing-error').should('not.exist');
             cy.get('.cvat-opencv-image-tool').click();
             cy.get('.cvat-opencv-image-tool').should('not.have.class', 'cvat-opencv-image-tool-active');
+            cy.get('.cvat-opencv-image-tool').trigger('mouseleave').trigger('mouseout');
+            cy.get('.cvat-tools-control').click();
         });
 
         // Waiting for fix https://github.com/openvinotoolkit/cvat/issues/3474
@@ -159,5 +192,34 @@ context('OpenCV. Intelligent scissors. Histogram Equalization.', () => {
             });
             cy.get('body').trigger('keydown', { keyCode: keyCodeN, code: 'KeyN' }).trigger('keyup');
         });
+
+        it('Create a shape with "TrackerMIL". Track it for several frames.', () => {
+            // Track shape and move from 0 to 1 frame to init tracker
+            // We will start testing tracking from 2 frame because it's a bit unstable on inintialization
+            cy.createOpenCVTrack(createOpencvTrackerShape);
+            cy.goToNextFrame(1);
+            cy.get('#cvat_canvas_shape_3')
+                .then((shape) => {
+                    const x = Math.round(shape.attr('x'));
+                    const y = Math.round(shape.attr('y'));
+                    for (let i = 2; i < imagesCount; i++) {
+                        cy.goToNextFrame(i);
+                        // In the beginning of this test we created images with text
+                        // On each frame text is moved by 5px on x and y axis,
+                        // so we expect shape to be close to real text positions
+                        cy.get('#cvat_canvas_shape_3').invoke('attr', 'x').then((xVal) => {
+                            expect(parseFloat(xVal)).to.be.closeTo(x + (i - 1) * 5, 1.0);
+                        });
+                        cy.get('#cvat_canvas_shape_3').invoke('attr', 'y').then((yVal) => {
+                            expect(parseFloat(yVal)).to.be.closeTo(y + (i - 1) * 5, 1.0);
+                        });
+                        cy.get('#cvat-objects-sidebar-state-item-3')
+                            .should('contain', 'RECTANGLE TRACK')
+                            .within(() => {
+                                cy.get('.cvat-object-item-button-keyframe-enabled').should('exist');
+                            });
+                    }
+                });
+        });
     });
 });

tests/cypress/support/commands_opencv.js

@@ -1,4 +1,4 @@
-// Copyright (C) 2021 Intel Corporation
+// Copyright (C) 2022 Intel Corporation
 //
 // SPDX-License-Identifier: MIT
 
@@ -59,3 +59,32 @@ Cypress.Commands.add('opencvCheckObjectParameters', (objectType) => {
             });
     });
 });
+
+Cypress.Commands.add('opencvOpenTab', (tabName) => {
+    cy.checkPopoverHidden('opencv-control');
+    cy.interactOpenCVControlButton();
+    cy.get('.cvat-opencv-control-popover')
+        .contains('[role="tab"]', tabName)
+        .click()
+        .parents('.ant-tabs-tab')
+        .should('have.class', 'ant-tabs-tab-active');
+});
+
+Cypress.Commands.add('createOpenCVTrack', (trackParams) => {
+    cy.opencvOpenTab('Tracking');
+    cy.get('.cvat-opencv-tracking-label-select').find('.ant-select-selection-item').click();
+    cy.get('.ant-select-dropdown')
+        .not('.ant-select-dropdown-hidden')
+        .find(`.ant-select-item-option[title="${trackParams.labelName}"]`)
+        .click();
+    cy.get('.cvat-opencv-tracker-select').find('.ant-select-selection-item').click();
+    cy.get('.ant-select-dropdown')
+        .not('.ant-select-dropdown-hidden')
+        .find('.ant-select-item-option-content')
+        .contains(trackParams.tracker)
+        .click();
+    cy.get('.cvat-tools-track-button').click();
+    trackParams.pointsMap.forEach((point) => {
+        cy.get('.cvat-canvas-container').click(point.x, point.y);
+    });
+});