Update cypress test. Canvas 3D functionality. Basic actions. (#3112)

* Rename, add css class

* Update cypress test.

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

@@ -1,4 +1,4 @@
-// Copyright (C) 2020 Intel Corporation
+// Copyright (C) 2020-2021 Intel Corporation
 //
 // SPDX-License-Identifier: MIT
 
@@ -56,7 +56,8 @@
 .cvat-issue-control,
 .cvat-tools-control,
 .cvat-extra-controls-control,
-.cvat-opencv-control {
+.cvat-opencv-control,
+.cvat-context-image-control {
     border-radius: 3.3px;
     transform: scale(0.65);
     padding: 2px;

cvat-ui/src/components/annotation-page/standard3D-workspace/controls-side-bar/photo-context.tsx

@@ -22,7 +22,7 @@ function PhotoContextControl(props: Props): JSX.Element {
     return (
         <CVATTooltip title='Photo context show/hide' placement='right'>
             <CameraIcon
-                className={`cvat-move-control
+                className={`cvat-context-image-control
     cvat-control-side-bar-icon-size ${
         activeControl === ActiveControl.PHOTO_CONTEXT ? 'cvat-active-canvas-control' : ''
         }`}

tests/cypress/integration/canvas3d_functionality/case_56_canvas3d_functionality_basic_actions.js

@@ -63,6 +63,13 @@ context('Canvas 3D functionality. Basic actions.', () => {
         cy.get('[data-icon="camera"]').click(); // Context image show
     }
 
+    function testControlButtonTooltip(button, expectedTooltipText) {
+        cy.get(button).trigger('mouseover');
+        cy.contains(expectedTooltipText).should('exist').and('be.visible'); // Check tooltip
+        cy.get(button).trigger('mouseout');
+        cy.contains(expectedTooltipText).should('not.exist');
+    }
+
     before(() => {
         cy.openTaskJob(taskName);
     });
@@ -97,6 +104,9 @@ context('Canvas 3D functionality. Basic actions.', () => {
             cy.get('.cvat-canvas3d-topview').should('exist').and('be.visible');
             cy.get('.cvat-canvas3d-sideview').should('exist').and('be.visible');
             cy.get('.cvat-canvas3d-frontview').should('exist').and('be.visible');
+            cy.get('.cvat-canvas-controls-sidebar').find('[role="img"]').then(($controlButtons) => {
+                expect($controlButtons.length).to.be.equal(4);
+            });
             cy.get('.cvat-canvas-controls-sidebar')
                 .should('exist')
                 .and('be.visible')
@@ -104,8 +114,15 @@ context('Canvas 3D functionality. Basic actions.', () => {
                     cy.get('.cvat-move-control').should('exist').and('be.visible');
                     cy.get('.cvat-cursor-control').should('exist').and('be.visible');
                     cy.get('.cvat-draw-cuboid-control').should('exist').and('be.visible');
-                    cy.get('[aria-label="camera"]').should('exist').and('be.visible');
+                    cy.get('.cvat-context-image-control').should('exist').and('be.visible');
                 });
+            [
+                ['.cvat-move-control', 'Move the image'],
+                ['.cvat-cursor-control', 'Cursor [Esc]'],
+                ['.cvat-context-image-control', 'Photo context show/hide']
+            ].forEach(([button, tooltip]) => {
+                testControlButtonTooltip(button, tooltip);
+            });
         });
 
         it('Check workspace selector.', () => {