Cypress test. Group color feature. (#2589)

Co-authored-by: Kruchinin <dmitryx.kruchinin@intel.com>

tests/cypress/integration/actions_tasks_objects/case_15_group_features.js

@@ -45,14 +45,52 @@ context('Group features', () => {
         secondY: createRectangleTrack2Points.secondY,
     };
 
-    let defaultGroupColor = '';
+    let defaultGroupColorRgb = '';
+    let defaultGroupColorHex = '';
     let shapesGroupColor = '';
     let tracksGroupColor = '';
+    const yellowHex = 'fcbe03';
+    const yellowRgb = '252, 190, 3';
+
+    const shapeArray = ['#cvat_canvas_shape_1', '#cvat_canvas_shape_2'];
+    const shapeSidebarItemArray = ['#cvat-objects-sidebar-state-item-1', '#cvat-objects-sidebar-state-item-2'];
+    const trackArray = ['#cvat_canvas_shape_3', '#cvat_canvas_shape_4'];
+    const trackSidebarItemArray = ['#cvat-objects-sidebar-state-item-3', '#cvat-objects-sidebar-state-item-4'];
 
     before(() => {
+        cy.clearLocalStorageSnapshot();
         cy.openTaskJob(taskName);
     });
 
+    beforeEach(() => {
+        cy.restoreLocalStorage();
+    });
+
+    afterEach(() => {
+        cy.saveLocalStorage();
+    });
+
+    function groupObjects(objectsArray) {
+        cy.get('.cvat-group-control').click();
+        for (const shapeToGroup of objectsArray) {
+            cy.get(shapeToGroup).click();
+        }
+        cy.get('.cvat-group-control').click();
+    }
+
+    function changeGroupColor(object, color) {
+        cy.get(object).within(() => {
+            cy.get('[aria-label="more"]').click();
+        });
+        cy.wait(300);
+        cy.get('.ant-dropdown')
+            .not('.ant-dropdown-hidden')
+            .within(() => {
+                cy.contains('Change group color').click();
+            });
+        cy.changeColorViaBadge(color);
+    }
+
     describe(`Testing case "${caseId}"`, () => {
         it('Create two shapes and two tracks.', () => {
             cy.createRectangle(createRectangleShape2Points);
@@ -60,67 +98,126 @@ context('Group features', () => {
             cy.createRectangle(createRectangleTrack2Points);
             cy.createRectangle(createRectangleTrack2PointsSecond);
         });
+
         it('Set option "Color by" to "Group".', () => {
             cy.changeAppearance('Group');
-            cy.get('.cvat_canvas_shape').then($listCanvasShapes => {
+            cy.get('.cvat_canvas_shape').then(($listCanvasShapes) => {
-                for (let i=0; i<$listCanvasShapes.length; i++) {
+                for (let i = 0; i < $listCanvasShapes.length; i++) {
-                    cy.get($listCanvasShapes[i]).should('have.css', 'fill').then($fill => {
+                    cy.get($listCanvasShapes[i])
-                        defaultGroupColor = $fill;
+                        .should('have.css', 'fill')
+                        .then(($fill) => {
+                            defaultGroupColorRgb = $fill;
                         });
                 }
             });
-            cy.get('.cvat-objects-sidebar-state-item').then($listObjectsSidebarStateItem => {
+            cy.get('.cvat-objects-sidebar-state-item').then(($listObjectsSidebarStateItem) => {
-                for (let i=0; i<$listObjectsSidebarStateItem.length; i++) {
+                for (let i = 0; i < $listObjectsSidebarStateItem.length; i++) {
-                    cy.get($listObjectsSidebarStateItem[i]).should('have.css', 'background-color').then($bColorObjectsSidebarStateItem => {
+                    cy.get($listObjectsSidebarStateItem[i])
+                        .should('have.css', 'background-color')
+                        .then(($bColorObjectsSidebarStateItem) => {
                             // expected rgba(224, 224, 224, 0.533) to include [ 224, 224, 224, index: 4, input: 'rgb(224, 224, 224)', groups: undefined ]
-                        expect($bColorObjectsSidebarStateItem).contain(defaultGroupColor.match(/\d+, \d+, \d+/));
+                            expect($bColorObjectsSidebarStateItem).contain(defaultGroupColorRgb.match(/\d+, \d+, \d+/));
                         });
                 }
             });
         });
+
         it('With group button unite two shapes. They have corresponding colors.', () => {
-            cy.get('.cvat-group-control').click();
+            groupObjects(shapeArray);
-            for (const shapeToGroup of ['#cvat_canvas_shape_1', '#cvat_canvas_shape_2']) {
+            for (const groupedShape of shapeArray) {
-                cy.get(shapeToGroup).click();
+                cy.get(groupedShape)
-            }
+                    .should('have.css', 'fill')
-            cy.get('.cvat-group-control').click();
+                    .then(($shapesGroupColor) => {
-            for (const groupedShape of ['#cvat_canvas_shape_1', '#cvat_canvas_shape_2']) {
-                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(defaultGroupColor);
+                        expect($shapesGroupColor).to.not.equal(defaultGroupColorRgb);
                         shapesGroupColor = $shapesGroupColor;
                     });
             }
-            for (const objectSideBarShape of ['#cvat-objects-sidebar-state-item-1', '#cvat-objects-sidebar-state-item-2']) {
+            for (const objectSideBarShape of shapeSidebarItemArray) {
-                cy.get(objectSideBarShape).should('have.css', 'background-color').then($bColorobjectSideBarShape => {
+                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(defaultGroupColor.match(/\d+, \d+, \d+/));
+                        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+/));
                     });
             }
         });
+
         it('With group button unite two track. They have corresponding colors.', () => {
-            cy.get('.cvat-group-control').click();
+            groupObjects(trackArray);
-            for (const trackToGroup of ['#cvat_canvas_shape_3', '#cvat_canvas_shape_4']) {
+            for (const groupedTrack of trackArray) {
-                cy.get(trackToGroup).click();
+                cy.get(groupedTrack)
-            }
+                    .should('have.css', 'fill')
-            cy.get('.cvat-group-control').click();
+                    .then(($tracksGroupColor) => {
-            for (const groupedTrack of ['#cvat_canvas_shape_3', '#cvat_canvas_shape_4']) {
-                cy.get(groupedTrack).should('have.css', 'fill').then($tracksGroupColor => {
                         // expected rgb(250, 50, 83) to not equal rgb(224, 224, 224)
-                    expect($tracksGroupColor).to.not.equal(defaultGroupColor);
+                        expect($tracksGroupColor).to.not.equal(defaultGroupColorRgb);
                         tracksGroupColor = $tracksGroupColor;
                     });
             }
-            for (const objectSideBarTrack of ['#cvat-objects-sidebar-state-item-3', '#cvat-objects-sidebar-state-item-4']) {
+            for (const objectSideBarTrack of trackSidebarItemArray) {
-                cy.get(objectSideBarTrack).should('have.css', 'background-color').then($bColorobjectSideBarTrack => {
+                cy.get(objectSideBarTrack)
+                    .should('have.css', 'background-color')
+                    .then(($bColorobjectSideBarTrack) => {
                         // expected rgba(52, 209, 183, 0.533) to not include [ 224, 224, 224, index: 4, input: 'rgb(224, 224, 224)', groups: undefined ]
-                    expect($bColorobjectSideBarTrack).to.not.contain(defaultGroupColor.match(/\d+, \d+, \d+/));
+                        expect($bColorobjectSideBarTrack).to.not.contain(defaultGroupColorRgb.match(/\d+, \d+, \d+/));
                         // expected rgba(52, 209, 183, 0.533) to include [ 52, 209, 183, index: 4, input: 'rgb(52, 209, 183)', groups: undefined ]
                         expect($bColorobjectSideBarTrack).to.be.contain(tracksGroupColor.match(/\d+, \d+, \d+/));
                     });
             }
         });
     });
+
+    describe(`Testing case "${caseId}". Group color feature.`, () => {
+        before(() => {
+            cy.removeAnnotations();
+            cy.saveJob();
+            cy.reload();
+            cy.get('.cvat-canvas-container').should('exist');
+        });
+
+        it('Create 3 objects.', () => {
+            cy.createRectangle(createRectangleShape2Points);
+            cy.createRectangle(createRectangleShape2PointsSecond);
+            cy.createRectangle(createRectangleTrack2Points);
+        });
+
+        it('Set option "Color by" to "Group". With group button unite two shapes. They have corresponding colors.', () => {
+            cy.changeAppearance('Group');
+            cy.get('.cvat_canvas_shape').then(($listCanvasShapes) => {
+                for (let i = 0; i < $listCanvasShapes.length; i++) {
+                    cy.get($listCanvasShapes[i])
+                        .should('have.attr', 'fill')
+                        .then(($fill) => {
+                            defaultGroupColorHex = $fill;
+                        });
+                }
+            });
+            groupObjects(shapeArray);
+        });
+
+        it('Change group color.', () => {
+            changeGroupColor('#cvat-objects-sidebar-state-item-1', yellowHex);
+        });
+
+        it('For these objects, the fill and stroke parameters took the corresponding color values.', () => {
+            for (const groupedShape of shapeArray) {
+                cy.get(groupedShape).should('have.attr', 'stroke', `#${yellowHex}`);
+            }
+            for (const groupedSidebarItemShape of shapeSidebarItemArray) {
+                cy.get(groupedSidebarItemShape)
+                    .should('have.attr', 'style')
+                    .and('contain', `background-color: rgba(${yellowRgb}`);
+            }
+        });
+
+        it('Try to change color group for third onject. Color not changed.', () => {
+            changeGroupColor('#cvat-objects-sidebar-state-item-3', yellowHex);
+            cy.get('#cvat_canvas_shape_3').should('have.attr', 'stroke', defaultGroupColorHex);
+            cy.get('#cvat-objects-sidebar-state-item-3')
+                .should('have.css', 'background-color')
+                .and('contain', defaultGroupColorRgb.match(/\d+, \d+, \d+/));
+        });
+    });
 });

tests/cypress/support/commands.js

@@ -7,6 +7,7 @@
 require('cypress-file-upload');
 require('../plugins/imageGenerator/imageGeneratorCommand');
 require('../plugins/createZipArchive/createZipArchiveCommand');
+require('cypress-localstorage-commands');
 
 let selectedValueGlobal = '';
 
@@ -102,7 +103,9 @@ Cypress.Commands.add('openTask', (taskName) => {
 });
 
 Cypress.Commands.add('saveJob', () => {
+    cy.server().route('POST', '/api/v1/server/logs').as('sendLogs');
     cy.get('button').contains('Save').click({ force: true });
+    cy.wait('@sendLogs').its('status').should('equal', 201);
 });
 
 Cypress.Commands.add('openJob', (jobNumber = 0) => {
@@ -254,8 +257,7 @@ Cypress.Commands.add('openSettings', () => {
 });
 
 Cypress.Commands.add('closeSettings', () => {
-    cy.get('.cvat-settings-modal')
+    cy.get('.cvat-settings-modal').within(() => {
-        .within(() => {
         cy.contains('button', 'Close').click();
     });
     cy.get('.cvat-settings-modal').should('not.be.visible');
@@ -427,6 +429,15 @@ Cypress.Commands.add('goToTaskList', () => {
     cy.url().should('include', '/tasks');
 });
 
+Cypress.Commands.add('changeColorViaBadge', (labelColor) => {
+    cy.get('.cvat-label-color-picker')
+        .not('.ant-popover-hidden')
+        .within(() => {
+            cy.contains('hex').prev().clear().type(labelColor);
+            cy.contains('button', 'Ok').click();
+        });
+});
+
 Cypress.Commands.add('addNewLabel', (newLabelName, additionalAttrs) => {
     let listCvatConstructorViewerItemText = [];
     cy.get('.cvat-constructor-viewer').should('exist');

tests/package-lock.json

@@ -2869,6 +2869,12 @@
         }
       }
     },
+    "cypress-localstorage-commands": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/cypress-localstorage-commands/-/cypress-localstorage-commands-1.3.1.tgz",
+      "integrity": "sha512-ILj+3MJliP5p+wHyJaJoOfADu7vmjDg9OshMXJbqSzg3hTTjYU3X0/vANykbl5XmkOFa5G8Fl1RNSeBUu41KJQ==",
+      "dev": true
+    },
     "dash-ast": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/dash-ast/-/dash-ast-1.0.0.tgz",

tests/package.json

@@ -6,7 +6,8 @@
   "devDependencies": {
     "@cypress/code-coverage": "^3.8.1",
     "cypress": "^5.0.0",
-    "cypress-file-upload": "^4.1.1"
+    "cypress-file-upload": "^4.1.1",
+    "cypress-localstorage-commands": "^1.3.1"
   },
   "dependencies": {
     "archiver": "^5.0.0",