From 68dfa5da64549044e8679a4f04c2601b0c2cc74c Mon Sep 17 00:00:00 2001
From: DmitriyOparin <35344996+DmitriyOparin@users.noreply.github.com>
Date: Tue, 22 Dec 2020 22:05:17 +0300
Subject: [PATCH] Cypress test. Attribute annotation mode zoom margin feature.
 (#2573)

* add test

* improvements test

* improvements other tests

* add cssSelectors

* small improvements

Co-authored-by: Dmitriy Oparin <dmitriyx.oparin@intel.com>
---
 .../attribute-editor.tsx                      |  2 +-
 .../attribute-switcher.tsx                    |  6 +-
 .../object-basics-edtior.tsx                  |  2 +-
 .../object-switcher.tsx                       |  6 +-
 .../styles.scss                               |  8 +--
 ...ute_annotation_mode_zoom_margin_feature.js | 65 +++++++++++++++++++
 ...d_attribute_correspond_chosen_attribute.js |  6 +-
 .../issue_1750_err_aam_switch_frames.js       |  7 +-
 tests/cypress/support/commands.js             |  5 +-
 9 files changed, 85 insertions(+), 22 deletions(-)
 create mode 100644 tests/cypress/integration/actions_tasks_objects/case_32_attribute_annotation_mode_zoom_margin_feature.js

diff --git a/cvat-ui/src/components/annotation-page/attribute-annotation-workspace/attribute-annotation-sidebar/attribute-editor.tsx b/cvat-ui/src/components/annotation-page/attribute-annotation-workspace/attribute-annotation-sidebar/attribute-editor.tsx
index 1816aed5..808cee83 100644
--- a/cvat-ui/src/components/annotation-page/attribute-annotation-workspace/attribute-annotation-sidebar/attribute-editor.tsx
+++ b/cvat-ui/src/components/annotation-page/attribute-annotation-workspace/attribute-annotation-sidebar/attribute-editor.tsx
@@ -122,7 +122,7 @@ function renderInputElement(parameters: InputElementParameters): JSX.Element {
         element = renderText();
     }
 
-    return <div className='attribute-annotation-sidebar-attr-editor'>{element}</div>;
+    return <div className='cvat-attribute-annotation-sidebar-attr-editor'>{element}</div>;
 }
 
 interface ListParameters {
diff --git a/cvat-ui/src/components/annotation-page/attribute-annotation-workspace/attribute-annotation-sidebar/attribute-switcher.tsx b/cvat-ui/src/components/annotation-page/attribute-annotation-workspace/attribute-annotation-sidebar/attribute-switcher.tsx
index 28fd8fd8..2632b6a6 100644
--- a/cvat-ui/src/components/annotation-page/attribute-annotation-workspace/attribute-annotation-sidebar/attribute-switcher.tsx
+++ b/cvat-ui/src/components/annotation-page/attribute-annotation-workspace/attribute-annotation-sidebar/attribute-switcher.tsx
@@ -23,9 +23,9 @@ function AttributeSwitcher(props: Props): JSX.Element {
 
     const title = `${currentAttribute} [${currentIndex + 1}/${attributesCount}]`;
     return (
-        <div className='attribute-annotation-sidebar-attribute-switcher'>
+        <div className='cvat-attribute-annotation-sidebar-attribute-switcher'>
             <Tooltip title={`Previous attribute ${normalizedKeyMap.PREVIOUS_ATTRIBUTE}`} mouseLeaveDelay={0}>
-                <Button disabled={attributesCount <= 1} onClick={() => nextAttribute(-1)}>
+                <Button className='cvat-attribute-annotation-sidebar-attribute-switcher-left' disabled={attributesCount <= 1} onClick={() => nextAttribute(-1)}>
                     <LeftOutlined />
                 </Button>
             </Tooltip>
@@ -34,7 +34,7 @@ function AttributeSwitcher(props: Props): JSX.Element {
                 <Text strong>{` [${currentIndex + 1}/${attributesCount}]`}</Text>
             </Tooltip>
             <Tooltip title={`Next attribute ${normalizedKeyMap.NEXT_ATTRIBUTE}`} mouseLeaveDelay={0}>
-                <Button disabled={attributesCount <= 1} onClick={() => nextAttribute(1)}>
+                <Button className='cvat-attribute-annotation-sidebar-attribute-switcher-right' disabled={attributesCount <= 1} onClick={() => nextAttribute(1)}>
                     <RightOutlined />
                 </Button>
             </Tooltip>
diff --git a/cvat-ui/src/components/annotation-page/attribute-annotation-workspace/attribute-annotation-sidebar/object-basics-edtior.tsx b/cvat-ui/src/components/annotation-page/attribute-annotation-workspace/attribute-annotation-sidebar/object-basics-edtior.tsx
index fafe22cd..48c3f13e 100644
--- a/cvat-ui/src/components/annotation-page/attribute-annotation-workspace/attribute-annotation-sidebar/object-basics-edtior.tsx
+++ b/cvat-ui/src/components/annotation-page/attribute-annotation-workspace/attribute-annotation-sidebar/object-basics-edtior.tsx
@@ -15,7 +15,7 @@ function ObjectBasicsEditor(props: Props): JSX.Element {
     const { currentLabel, labels, changeLabel } = props;
 
     return (
-        <div className='attribute-annotation-sidebar-basics-editor'>
+        <div className='cvat-attribute-annotation-sidebar-basics-editor'>
             <Select value={currentLabel} onChange={changeLabel} style={{ width: '50%' }}>
                 {labels.map(
                     (label: any): JSX.Element => (
diff --git a/cvat-ui/src/components/annotation-page/attribute-annotation-workspace/attribute-annotation-sidebar/object-switcher.tsx b/cvat-ui/src/components/annotation-page/attribute-annotation-workspace/attribute-annotation-sidebar/object-switcher.tsx
index e0f48d31..f371a287 100644
--- a/cvat-ui/src/components/annotation-page/attribute-annotation-workspace/attribute-annotation-sidebar/object-switcher.tsx
+++ b/cvat-ui/src/components/annotation-page/attribute-annotation-workspace/attribute-annotation-sidebar/object-switcher.tsx
@@ -25,9 +25,9 @@ function ObjectSwitcher(props: Props): JSX.Element {
 
     const title = `${currentLabel} ${clientID} [${currentIndex + 1}/${objectsCount}]`;
     return (
-        <div className='attribute-annotation-sidebar-object-switcher'>
+        <div className='cvat-attribute-annotation-sidebar-object-switcher'>
             <Tooltip title={`Previous object ${normalizedKeyMap.PREVIOUS_OBJECT}`} mouseLeaveDelay={0}>
-                <Button disabled={objectsCount <= 1} onClick={() => nextObject(-1)}>
+<Button className='cvat-attribute-annotation-sidebar-object-switcher-left' disabled={objectsCount <= 1} onClick={() => nextObject(-1)}>
                     <LeftOutlined />
                 </Button>
             </Tooltip>
@@ -37,7 +37,7 @@ function ObjectSwitcher(props: Props): JSX.Element {
                 <Text strong>{`[${currentIndex + 1}/${objectsCount}]`}</Text>
             </Tooltip>
             <Tooltip title={`Next object ${normalizedKeyMap.NEXT_OBJECT}`} mouseLeaveDelay={0}>
-                <Button disabled={objectsCount <= 1} onClick={() => nextObject(1)}>
+                <Button className='cvat-attribute-annotation-sidebar-object-switcher-right' disabled={objectsCount <= 1} onClick={() => nextObject(1)}>
                     <RightOutlined />
                 </Button>
             </Tooltip>
diff --git a/cvat-ui/src/components/annotation-page/attribute-annotation-workspace/styles.scss b/cvat-ui/src/components/annotation-page/attribute-annotation-workspace/styles.scss
index 908ab6e8..ce685436 100644
--- a/cvat-ui/src/components/annotation-page/attribute-annotation-workspace/styles.scss
+++ b/cvat-ui/src/components/annotation-page/attribute-annotation-workspace/styles.scss
@@ -13,8 +13,8 @@
     padding: 5px;
 }
 
-.attribute-annotation-sidebar-object-switcher,
-.attribute-annotation-sidebar-attribute-switcher {
+.cvat-attribute-annotation-sidebar-object-switcher,
+.cvat-attribute-annotation-sidebar-attribute-switcher {
     display: flex;
     align-items: center;
     justify-content: space-between;
@@ -32,7 +32,7 @@
     }
 }
 
-.attribute-annotation-sidebar-basics-editor {
+.cvat-attribute-annotation-sidebar-basics-editor {
     display: flex;
     align-items: center;
     justify-content: space-between;
@@ -58,7 +58,7 @@
     justify-content: space-around;
 }
 
-.attribute-annotation-sidebar-attr-editor {
+.cvat-attribute-annotation-sidebar-attr-editor {
     display: flex;
     align-items: center;
     justify-content: space-around;
diff --git a/tests/cypress/integration/actions_tasks_objects/case_32_attribute_annotation_mode_zoom_margin_feature.js b/tests/cypress/integration/actions_tasks_objects/case_32_attribute_annotation_mode_zoom_margin_feature.js
new file mode 100644
index 00000000..09a4fe11
--- /dev/null
+++ b/tests/cypress/integration/actions_tasks_objects/case_32_attribute_annotation_mode_zoom_margin_feature.js
@@ -0,0 +1,65 @@
+// Copyright (C) 2020 Intel Corporation
+//
+// SPDX-License-Identifier: MIT
+
+/// <reference types="cypress" />
+
+import { taskName, labelName } from '../../support/const';
+
+context('Attribute annotation mode (AAM) zoom margin feature', () => {
+    const caseId = '32';
+    const rectangleShape2Points = {
+        points: 'By 2 Points',
+        type: 'Shape',
+        labelName: labelName,
+        firstX: 100,
+        firstY: 100,
+        secondX: 150,
+        secondY: 150,
+    };
+
+    function changeSettingsZoomMargin(valueZoomMargin) {
+        cy.openSettings();
+        cy.get('.cvat-settings-modal').within(() => {
+            cy.contains('Workspace').click();
+            cy.get('.cvat-workspace-settings-aam-zoom-margin').within(() => {
+                cy.get('[role="spinbutton"]').clear().type(valueZoomMargin);
+            });
+        });
+        cy.closeSettings();
+    }
+
+    before(() => {
+        cy.openTaskJob(taskName);
+
+        // create object and tag
+        cy.createRectangle(rectangleShape2Points);
+        cy.createTag(labelName);
+
+        // go to AAM workspace
+        cy.changeWorkspace('Attribute annotation', labelName);
+    });
+
+    describe(`Testing case "${caseId}"`, () => {
+        it('Change AAM zoom margin on workspace with rectangle', () => {
+            cy.get('.cvat-attribute-annotation-sidebar-object-switcher').should('contain', `${labelName} 1 [1/2]`);
+            cy.getScaleValue().then((scaleBeforeChangeZoomMargin) => {
+                changeSettingsZoomMargin(150);
+                cy.getScaleValue().then((scaleAfterChangeZoomMargin) => {
+                    expect(scaleBeforeChangeZoomMargin).to.be.greaterThan(scaleAfterChangeZoomMargin);
+                });
+            });
+        });
+
+        it('Change AAM zoom margin on workspace with tag', () => {
+            cy.get('.cvat-attribute-annotation-sidebar-object-switcher-right').click();
+            cy.get('.cvat-attribute-annotation-sidebar-object-switcher').should('contain', `${labelName} 2 [2/2]`);
+            cy.getScaleValue().then((scaleBeforeChangeZoomMargin) => {
+                changeSettingsZoomMargin(200);
+                cy.getScaleValue().then((scaleAfterChangeZoomMargin) => {
+                    expect(scaleBeforeChangeZoomMargin).to.be.eq(scaleAfterChangeZoomMargin);
+                });
+            });
+        });
+    });
+});
diff --git a/tests/cypress/integration/actions_tasks_objects/issue_1425_highlighted_attribute_correspond_chosen_attribute.js b/tests/cypress/integration/actions_tasks_objects/issue_1425_highlighted_attribute_correspond_chosen_attribute.js
index 429e20e7..75641b9b 100644
--- a/tests/cypress/integration/actions_tasks_objects/issue_1425_highlighted_attribute_correspond_chosen_attribute.js
+++ b/tests/cypress/integration/actions_tasks_objects/issue_1425_highlighted_attribute_correspond_chosen_attribute.js
@@ -36,18 +36,18 @@ context('The highlighted attribute in AAM should correspond to the chosen attrib
                     textValue = $textValue.text().split(': ')[1];
                 });
             });
-            cy.get('.attribute-annotation-sidebar-attr-editor').within(() => {
+            cy.get('.cvat-attribute-annotation-sidebar-attr-editor').within(() => {
                 cy.get('[type="text"]').should('have.value', textValue);
             });
         });
         it('Go to next attribute and check again', () => {
-            cy.get('.attribute-annotation-sidebar-attribute-switcher').find('.anticon-right').click({ force: true });
+            cy.get('.cvat-attribute-annotation-sidebar-attribute-switcher-right').click();
             cy.get('.cvat_canvas_text').within(() => {
                 cy.get('[style="fill: red;"]').then(($textValue) => {
                     textValue = $textValue.text().split(': ')[1];
                 });
             });
-            cy.get('.attribute-annotation-sidebar-attr-editor').within(() => {
+            cy.get('.cvat-attribute-annotation-sidebar-attr-editor').within(() => {
                 cy.get('[type="text"]').should('have.value', textValue);
             });
         });
diff --git a/tests/cypress/integration/actions_tasks_objects/issue_1750_err_aam_switch_frames.js b/tests/cypress/integration/actions_tasks_objects/issue_1750_err_aam_switch_frames.js
index 28d4ae4a..5245e7e1 100644
--- a/tests/cypress/integration/actions_tasks_objects/issue_1750_err_aam_switch_frames.js
+++ b/tests/cypress/integration/actions_tasks_objects/issue_1750_err_aam_switch_frames.js
@@ -52,15 +52,12 @@ context('An error occurs in AAM when switching to 2 frames, if the frames have o
             });
         });
         it('Go to next object', () => {
-            cy.get('.attribute-annotation-sidebar-object-switcher')
-                .should('contain', `${labelName} 1 [1/2]`)
-                .find('.anticon-right')
-                .click({ force: true });
+            cy.get('.cvat-attribute-annotation-sidebar-object-switcher-right').click();
         });
         it('Page with the error is missing', () => {
             cy.contains('Oops, something went wrong', { timeout: 1000 }).should('not.exist');
             cy.changeLabelAAM(labelName);
-            cy.get('.attribute-annotation-sidebar-object-switcher').should('contain', `${labelName} 2 [2/2]`);
+            cy.get('.cvat-attribute-annotation-sidebar-object-switcher').should('contain', `${labelName} 2 [2/2]`);
         });
     });
 });
diff --git a/tests/cypress/support/commands.js b/tests/cypress/support/commands.js
index 33e97797..785af65d 100644
--- a/tests/cypress/support/commands.js
+++ b/tests/cypress/support/commands.js
@@ -272,10 +272,11 @@ Cypress.Commands.add('changeWorkspace', (mode, labelName) => {
 });
 
 Cypress.Commands.add('changeLabelAAM', (labelName) => {
+
     cy.get('.cvat-workspace-selector').then((value) => {
         const cvatWorkspaceSelectorValue = value.text();
-        if (cvatWorkspaceSelectorValue === 'Attribute annotation') {
-            cy.get('.attribute-annotation-sidebar-basics-editor').within(() => {
+        if (cvatWorkspaceSelectorValue.includes('Attribute annotation')) {
+            cy.get('.cvat-attribute-annotation-sidebar-basics-editor').within(() => {
                 cy.get('.ant-select-selector').click();
             });
             cy.get('.ant-select-dropdown')