wangchunlin
/
cvat
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Cypress test. Group color feature. (#2589)

Browse Source 
Co-authored-by: Kruchinin <dmitryx.kruchinin@intel.com>
main
Dmitry Kruchinin 5 years ago committed by GitHub
parent 68dfa5da64
commit 1398bd3390
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 167 additions and 52 deletions
Show Stats Download Patch File Download Diff File

191
tests/cypress/integration/actions_tasks_objects/case_15_group_features.js
Unescape Escape View File

@ -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+/));
});
});
});

19
tests/cypress/support/commands.js
Unescape Escape View File

@ -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');

6
tests/package-lock.json generated
Unescape Escape View File

@ -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",

3
tests/package.json
Unescape Escape View File

@ -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",

Write Preview
Loading…
Cancel
Save