diff --git a/tests/cypress/integration/actions_tasks_objects/case_15_group_features.js b/tests/cypress/integration/actions_tasks_objects/case_15_group_features.js index 9fa5191e..cf919cc4 100644 --- a/tests/cypress/integration/actions_tasks_objects/case_15_group_features.js +++ b/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 => { - for (let i=0; i<$listCanvasShapes.length; i++) { - cy.get($listCanvasShapes[i]).should('have.css', 'fill').then($fill => { - defaultGroupColor = $fill; - }); + cy.get('.cvat_canvas_shape').then(($listCanvasShapes) => { + for (let i = 0; i < $listCanvasShapes.length; i++) { + cy.get($listCanvasShapes[i]) + .should('have.css', 'fill') + .then(($fill) => { + defaultGroupColorRgb = $fill; + }); } }); - cy.get('.cvat-objects-sidebar-state-item').then($listObjectsSidebarStateItem => { - for (let i=0; i<$listObjectsSidebarStateItem.length; i++) { - 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+/)); - }); + cy.get('.cvat-objects-sidebar-state-item').then(($listObjectsSidebarStateItem) => { + for (let i = 0; i < $listObjectsSidebarStateItem.length; i++) { + 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(defaultGroupColorRgb.match(/\d+, \d+, \d+/)); + }); } }); }); + it('With group button unite two shapes. They have corresponding colors.', () => { - cy.get('.cvat-group-control').click(); - for (const shapeToGroup of ['#cvat_canvas_shape_1', '#cvat_canvas_shape_2']) { - cy.get(shapeToGroup).click(); - } - cy.get('.cvat-group-control').click(); - 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); - shapesGroupColor = $shapesGroupColor; - }); + 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 ['#cvat-objects-sidebar-state-item-1', '#cvat-objects-sidebar-state-item-2']) { - 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+/)); - // 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+/)); - }); + 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+/)); + }); } }); + it('With group button unite two track. They have corresponding colors.', () => { - cy.get('.cvat-group-control').click(); - for (const trackToGroup of ['#cvat_canvas_shape_3', '#cvat_canvas_shape_4']) { - cy.get(trackToGroup).click(); + groupObjects(trackArray); + for (const groupedTrack of trackArray) { + 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(defaultGroupColorRgb); + tracksGroupColor = $tracksGroupColor; + }); } - cy.get('.cvat-group-control').click(); - 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); - tracksGroupColor = $tracksGroupColor; - }); + for (const objectSideBarTrack of trackSidebarItemArray) { + 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(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+/)); + }); } - for (const objectSideBarTrack of ['#cvat-objects-sidebar-state-item-3', '#cvat-objects-sidebar-state-item-4']) { - 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+/)); - // 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+/)); + }); }); }); diff --git a/tests/cypress/support/commands.js b/tests/cypress/support/commands.js index 785af65d..88169576 100644 --- a/tests/cypress/support/commands.js +++ b/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,10 +257,9 @@ Cypress.Commands.add('openSettings', () => { }); Cypress.Commands.add('closeSettings', () => { - cy.get('.cvat-settings-modal') - .within(() => { - cy.contains('button', 'Close').click(); - }); + cy.get('.cvat-settings-modal').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'); diff --git a/tests/package-lock.json b/tests/package-lock.json index 7c566475..0b1bc537 100644 --- a/tests/package-lock.json +++ b/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", diff --git a/tests/package.json b/tests/package.json index 746be871..f86d2c39 100644 --- a/tests/package.json +++ b/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",