Update Cypress test. Group features. (#2950)

* Update case 15. Added ungroup action.

* Reset grouping via type Esc.

* Add check fill attr

* Add ungroup via Shift+G

* Apply comments

tests/cypress/integration/actions_tasks_objects/case_15_group_features.js

@@ -1,4 +1,4 @@
-// Copyright (C) 2020 Intel Corporation
+// Copyright (C) 2020-2021 Intel Corporation
 //
 // SPDX-License-Identifier: MIT
 
@@ -70,12 +70,20 @@ context('Group features', () => {
         cy.saveLocalStorage();
     });
 
-    function groupObjects(objectsArray) {
+    function testGroupObjects(objectsArray, cancelGrouping) {
         cy.get('.cvat-group-control').click();
         for (const shapeToGroup of objectsArray) {
-            cy.get(shapeToGroup).click();
+            cy.get(shapeToGroup).click().should('have.class', 'cvat_canvas_shape_grouping');
         }
+        cancelGrouping ? cy.get('body').type('{Esc}') : cy.get('.cvat-group-control').click();
+    }
+
+    function testUnGroupObjects() {
         cy.get('.cvat-group-control').click();
+        for (const shapeToGroup of shapeArray) {
+            cy.get(shapeToGroup).click().should('have.class', 'cvat_canvas_shape_grouping');
+        }
+        cy.get('body').type('{Shift}g');
     }
 
     function changeGroupColor(object, color) {
@@ -91,6 +99,34 @@ context('Group features', () => {
         cy.changeColorViaBadge(color);
     }
 
+    function testShapesFillEquality(equal) {
+        for (const groupedShape of shapeArray) {
+            cy.get(groupedShape)
+                .should('have.css', 'fill')
+                .then(($shapesGroupColor) => {
+                    if (equal) {
+                        expect($shapesGroupColor).to.be.equal(defaultGroupColorRgb);
+                    } else {
+                        expect($shapesGroupColor).to.not.equal(defaultGroupColorRgb);
+                        shapesGroupColor = $shapesGroupColor;
+                    }
+                });
+        }
+    }
+
+    function testSidebarItemsBackgroundColorEquality() {
+        for (const objectSideBarShape of shapeSidebarItemArray) {
+            cy.get(objectSideBarShape)
+                .should('have.css', 'background-color')
+                .then(($bColorobjectSideBarShape) => {
+                    // expected rgba(250, 50, 83, 0.533) to not include [ 224, 224, 224, index: 4, input: 'rgb(224, 224, 224)', groups: undefined ]
+                    expect($bColorobjectSideBarShape).to.not.contain(defaultGroupColorRgb.match(/\d+, \d+, \d+/));
+                    // expected rgba(250, 50, 83, 0.533) to include [ 250, 50, 83, index: 4, input: 'rgb(250, 50, 83)', groups: undefined ]
+                    expect($bColorobjectSideBarShape).to.be.contain(shapesGroupColor.match(/\d+, \d+, \d+/));
+                });
+        }
+    }
+
     describe(`Testing case "${caseId}"`, () => {
         it('Create two shapes and two tracks.', () => {
             cy.createRectangle(createRectangleShape2Points);
@@ -123,30 +159,25 @@ context('Group features', () => {
         });
 
         it('With group button unite two shapes. They have corresponding colors.', () => {
-            groupObjects(shapeArray);
-            for (const groupedShape of shapeArray) {
-                cy.get(groupedShape)
-                    .should('have.css', 'fill')
-                    .then(($shapesGroupColor) => {
-                        // expected rgb(250, 50, 83) to not equal rgb(224, 224, 224)
-                        expect($shapesGroupColor).to.not.equal(defaultGroupColorRgb);
-                        shapesGroupColor = $shapesGroupColor;
-                    });
-            }
-            for (const objectSideBarShape of shapeSidebarItemArray) {
-                cy.get(objectSideBarShape)
-                    .should('have.css', 'background-color')
-                    .then(($bColorobjectSideBarShape) => {
-                        // expected rgba(250, 50, 83, 0.533) to not include [ 224, 224, 224, index: 4, input: 'rgb(224, 224, 224)', groups: undefined ]
-                        expect($bColorobjectSideBarShape).to.not.contain(defaultGroupColorRgb.match(/\d+, \d+, \d+/));
-                        // expected rgba(250, 50, 83, 0.533) to include [ 250, 50, 83, index: 4, input: 'rgb(250, 50, 83)', groups: undefined ]
-                        expect($bColorobjectSideBarShape).to.be.contain(shapesGroupColor.match(/\d+, \d+, \d+/));
-                    });
-            }
+            testGroupObjects(shapeArray, true); // Reset grouping
+            testShapesFillEquality(true);
+            testGroupObjects(shapeArray); // Group
+            testShapesFillEquality(false);
+            testSidebarItemsBackgroundColorEquality();
+            testUnGroupObjects(); // Ungroup
+            testShapesFillEquality(true);
+            // Start grouping. Cancel grouping via click to the same shape.
+            cy.get('.cvat-group-control').click();
+            cy.get(shapeArray[0])
+                .click()
+                .should('have.class', 'cvat_canvas_shape_grouping')
+                .click()
+                .should('not.have.class', 'cvat_canvas_shape_grouping');
+            cy.get('body').type('{Esc}'); // Cancel grouping
         });
 
         it('With group button unite two track. They have corresponding colors.', () => {
-            groupObjects(trackArray);
+            testGroupObjects(trackArray);
             for (const groupedTrack of trackArray) {
                 cy.get(groupedTrack)
                     .should('have.css', 'fill')
@@ -195,7 +226,7 @@ context('Group features', () => {
                         });
                 }
             });
-            groupObjects(shapeArray);
+            testGroupObjects(shapeArray);
         });
 
         it('Change group color.', () => {