Cypress test. Collapse sidebar/apperance. (#2549)

* add test

* add className for hide/unhide appearance

* change version cvat-ui

* change version cvat-ui

* step get value moved to before method

* small fix

* small improvements

Co-authored-by: Dmitriy Oparin <dmitriyx.oparin@intel.com>

cvat-ui/package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "cvat-ui",
-  "version": "1.13.1",
+  "version": "1.13.2",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {

cvat-ui/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cvat-ui",
-  "version": "1.13.1",
+  "version": "1.13.2",
   "description": "CVAT single-page application",
   "main": "src/index.tsx",
   "scripts": {

cvat-ui/src/components/annotation-page/appearance-block.tsx

@@ -152,7 +152,7 @@ function AppearanceBlock(props: Props): JSX.Element {
             activeKey={appearanceCollapsed ? [] : ['appearance']}
             className='cvat-objects-appearance-collapse'
         >
-            <Collapse.Panel header={<Text strong>Appearance</Text>} key='appearance'>
+            <Collapse.Panel header={<Text strong className='cvat-objects-appearance-collapse-header'>Appearance</Text>} key='appearance'>
                 <div className='cvat-objects-appearance-content'>
                     <Text type='secondary'>Color by</Text>
                     <Radio.Group

tests/cypress/integration/actions_tasks_objects/case_30_collapse_sidebar_apperance.js

@@ -0,0 +1,66 @@
+// Copyright (C) 2020 Intel Corporation
+//
+// SPDX-License-Identifier: MIT
+
+/// <reference types="cypress" />
+
+import { taskName } from '../../support/const';
+
+context('Collapse sidebar/apperance', () => {
+    const caseId = '30';
+    let defaultValueLeftBackground;
+
+    function checkEqualBackground() {
+        cy.get('#cvat_canvas_background')
+            .should('have.css', 'left')
+            .and((currentValueLeftBackground) => {
+                currentValueLeftBackground = Number(currentValueLeftBackground.match(/\d+/));
+                expect(currentValueLeftBackground).to.be.eq(defaultValueLeftBackground);
+            });
+    }
+
+    before(() => {
+        cy.openTaskJob(taskName);
+
+        // get default left value from background
+        cy.get('#cvat_canvas_background')
+            .should('have.css', 'left')
+            .then((currentValueLeftBackground) => {
+                defaultValueLeftBackground = Number(currentValueLeftBackground.match(/\d+/));
+            });
+    });
+
+    describe(`Testing case "${caseId}"`, () => {
+        it('Collapse sidebar', () => {
+            // hide
+            cy.get('.cvat-objects-sidebar-sider').click();
+            cy.get('.cvat-objects-sidebar').should('not.be.visible');
+            cy.get('#cvat_canvas_background')
+                .should('have.css', 'left')
+                .and((currentValueLeftBackground) => {
+                    currentValueLeftBackground = Number(currentValueLeftBackground.match(/\d+/));
+                    expect(currentValueLeftBackground).to.be.greaterThan(defaultValueLeftBackground);
+                });
+
+            // wait when background fitted
+            cy.wait(500);
+
+            // unhide
+            cy.get('.cvat-objects-sidebar-sider').click();
+            cy.get('.cvat-objects-sidebar').should('be.visible');
+            checkEqualBackground();
+        });
+
+        it('Collapse apperance', () => {
+            // hide
+            cy.get('.cvat-objects-appearance-collapse-header').click();
+            cy.get('.cvat-objects-appearance-content').should('not.be.visible');
+            checkEqualBackground();
+
+            // unhide
+            cy.get('.cvat-objects-appearance-collapse-header').click();
+            cy.get('.cvat-objects-appearance-content').should('be.visible');
+            checkEqualBackground();
+        });
+    });
+});