253 lines
11 KiB
JavaScript
253 lines
11 KiB
JavaScript
// Copyright (C) 2020-2022 Intel Corporation
|
|
// Copyright (C) CVAT.ai Corporation
|
|
//
|
|
// SPDX-License-Identifier: MIT
|
|
|
|
/// <reference types="cypress" />
|
|
|
|
/* eslint-disable no-loop-func */
|
|
|
|
import { taskName, labelName } from '../../support/const';
|
|
|
|
context('Group features', () => {
|
|
const caseId = '15';
|
|
const createRectangleShape2Points = {
|
|
points: 'By 2 Points',
|
|
type: 'Shape',
|
|
labelName,
|
|
firstX: 250,
|
|
firstY: 350,
|
|
secondX: 350,
|
|
secondY: 450,
|
|
};
|
|
const createRectangleShape2PointsSecond = {
|
|
points: 'By 2 Points',
|
|
type: 'Shape',
|
|
labelName,
|
|
firstX: createRectangleShape2Points.firstX + 300,
|
|
firstY: createRectangleShape2Points.firstY,
|
|
secondX: createRectangleShape2Points.secondX + 300,
|
|
secondY: createRectangleShape2Points.secondY,
|
|
};
|
|
const createRectangleTrack2Points = {
|
|
points: 'By 2 Points',
|
|
type: 'Track',
|
|
labelName,
|
|
firstX: 250,
|
|
firstY: 600,
|
|
secondX: 350,
|
|
secondY: 700,
|
|
};
|
|
const createRectangleTrack2PointsSecond = {
|
|
points: 'By 2 Points',
|
|
type: 'Track',
|
|
labelName,
|
|
firstX: createRectangleTrack2Points.firstX + 300,
|
|
firstY: createRectangleTrack2Points.firstY,
|
|
secondX: createRectangleTrack2Points.secondX + 300,
|
|
secondY: createRectangleTrack2Points.secondY,
|
|
};
|
|
|
|
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.openTaskJob(taskName);
|
|
});
|
|
|
|
function testGroupObjects(objectsArray, cancelGrouping) {
|
|
cy.get('.cvat-group-control').click();
|
|
for (const shapeToGroup of objectsArray) {
|
|
cy.get(shapeToGroup).click();
|
|
cy.get(shapeToGroup).should('have.class', 'cvat_canvas_shape_selection');
|
|
}
|
|
if (cancelGrouping) {
|
|
cy.get('body').type('{Esc}');
|
|
} else {
|
|
cy.get('.cvat-group-control').click();
|
|
}
|
|
}
|
|
|
|
function testUnGroupObjects() {
|
|
cy.get('.cvat-group-control').click();
|
|
for (const shapeToGroup of shapeArray) {
|
|
cy.get(shapeToGroup).click();
|
|
cy.get(shapeToGroup).should('have.class', 'cvat_canvas_shape_selection');
|
|
}
|
|
cy.get('body').type('{Shift}g');
|
|
}
|
|
|
|
function changeGroupColor(object, color) {
|
|
cy.interactAnnotationObjectMenu(object, 'Change group color');
|
|
cy.changeColorViaBadge(color);
|
|
cy.get('.cvat-label-color-picker').should('not.exist');
|
|
}
|
|
|
|
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);
|
|
cy.createRectangle(createRectangleShape2PointsSecond);
|
|
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) => {
|
|
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(defaultGroupColorRgb.match(/\d+, \d+, \d+/));
|
|
});
|
|
}
|
|
});
|
|
});
|
|
|
|
it('With group button unite two shapes. They have corresponding colors.', () => {
|
|
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();
|
|
cy.get(shapeArray[0]).should('have.class', 'cvat_canvas_shape_selection');
|
|
cy.get(shapeArray[0]).click();
|
|
cy.get(shapeArray[0]).should('not.have.class', 'cvat_canvas_shape_selection');
|
|
cy.get('body').type('{Esc}'); // Cancel grouping
|
|
});
|
|
|
|
it('With group button unite two track. They have corresponding colors.', () => {
|
|
testGroupObjects(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;
|
|
});
|
|
}
|
|
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+/));
|
|
});
|
|
}
|
|
});
|
|
});
|
|
|
|
describe(`Testing case "${caseId}". Group color feature.`, () => {
|
|
before(() => {
|
|
cy.removeAnnotations();
|
|
cy.saveJob('PUT');
|
|
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;
|
|
});
|
|
}
|
|
});
|
|
testGroupObjects(shapeArray);
|
|
});
|
|
|
|
it('Change group color.', () => {
|
|
changeGroupColor('#cvat-objects-sidebar-state-item-1', yellowHex);
|
|
cy.checkCanvasSidebarColorEqualness(1);
|
|
});
|
|
|
|
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 object. 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+/));
|
|
});
|
|
});
|
|
});
|