|
|
|
|
@ -11,6 +11,7 @@ context('Appearance features', () => {
|
|
|
|
|
let ariaValuenow = 0;
|
|
|
|
|
const strokeColor = 'ff0000';
|
|
|
|
|
let fill = '';
|
|
|
|
|
let fillOpacity = '';
|
|
|
|
|
const createRectangleShape2Points = {
|
|
|
|
|
points: 'By 2 Points',
|
|
|
|
|
type: 'Shape',
|
|
|
|
|
@ -68,8 +69,9 @@ context('Appearance features', () => {
|
|
|
|
|
describe(`Testing case "${caseId}"`, () => {
|
|
|
|
|
it('Create a rectangle, a polygon, a polyline, a cuboid and points.', () => {
|
|
|
|
|
cy.createRectangle(createRectangleShape2Points);
|
|
|
|
|
cy.get('#cvat_canvas_shape_1').should('have.attr', 'fill').then($fill => {
|
|
|
|
|
fill = $fill;
|
|
|
|
|
cy.get('#cvat_canvas_shape_1').then($rectangleShape => {
|
|
|
|
|
fill = $rectangleShape.css('fill');
|
|
|
|
|
fillOpacity = $rectangleShape.css('fill-opacity');
|
|
|
|
|
});
|
|
|
|
|
cy.createPolygon(createPolygonShape);
|
|
|
|
|
cy.createPolyline(createPolylinesShape);
|
|
|
|
|
@ -77,43 +79,37 @@ context('Appearance features', () => {
|
|
|
|
|
cy.createPoint(createPointsShape);
|
|
|
|
|
});
|
|
|
|
|
it('Set opacity level for shapes to 100. All shapes are filled.', () => {
|
|
|
|
|
cy.get('.cvat-objects-appearance-content').within(() => {
|
|
|
|
|
cy.contains('Opacity').next().within(() => {
|
|
|
|
|
cy.get('.ant-slider-step').click('right');
|
|
|
|
|
cy.get('[role="slider"]').should('have.attr', 'aria-valuemax').then(($ariaValuemax) => {
|
|
|
|
|
ariaValuenow = $ariaValuemax;
|
|
|
|
|
cy.get('[role="slider"]').should('have.attr', 'aria-valuenow', ariaValuenow);
|
|
|
|
|
});
|
|
|
|
|
cy.get('.cvat-appearance-opacity-slider').click('right').within(() => {
|
|
|
|
|
cy.get('[role="slider"]').should('have.attr', 'aria-valuemax').then(($ariaValuemax) => {
|
|
|
|
|
ariaValuenow = $ariaValuemax;
|
|
|
|
|
cy.get('[role="slider"]').should('have.attr', 'aria-valuenow', ariaValuenow);
|
|
|
|
|
});
|
|
|
|
|
});
|
|
|
|
|
cy.get('.cvat_canvas_shape').each(object => {
|
|
|
|
|
cy.get(object).should('have.prop', 'tagName').then($tagName => {
|
|
|
|
|
if ($tagName !== 'polyline') {
|
|
|
|
|
cy.get(object).should('have.css', 'fill-opacity', '1');
|
|
|
|
|
expect(Number(object.css('fill-opacity'))).to.be.gt(Number(fillOpacity)); // expected 1 to be above 0.03
|
|
|
|
|
} else {
|
|
|
|
|
cy.get(object).should('have.css', 'fill-opacity', '0');
|
|
|
|
|
expect(Number(object.css('fill-opacity'))).to.be.lt(Number(fillOpacity)); // expected 0 to be below 0.03
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
});
|
|
|
|
|
});
|
|
|
|
|
it('Set selected opacity to 0.', () => {
|
|
|
|
|
cy.get('.cvat-objects-appearance-content').within(() => {
|
|
|
|
|
cy.contains('Selected opacity').next().within(() => {
|
|
|
|
|
cy.get('.ant-slider-step').click('left');
|
|
|
|
|
cy.get('[role="slider"]').should('have.attr', 'aria-valuemin').then(($ariaValuemin) => {
|
|
|
|
|
ariaValuenow = $ariaValuemin;
|
|
|
|
|
cy.get('[role="slider"]').should('have.attr', 'aria-valuenow', ariaValuenow);
|
|
|
|
|
});
|
|
|
|
|
cy.get('.cvat-appearance-selected-opacity-slider').click('left').within(() => {
|
|
|
|
|
cy.get('[role="slider"]').should('have.attr', 'aria-valuemin').then(($ariaValuemin) => {
|
|
|
|
|
ariaValuenow = $ariaValuemin;
|
|
|
|
|
cy.get('[role="slider"]').should('have.attr', 'aria-valuenow', ariaValuenow);
|
|
|
|
|
});
|
|
|
|
|
});
|
|
|
|
|
});
|
|
|
|
|
it('Activate the box, the polygon and the cuboid. Boxes are transparent during activated.', () => {
|
|
|
|
|
for (let i of ['#cvat_canvas_shape_1', '#cvat_canvas_shape_2', '#cvat_canvas_shape_4']) {
|
|
|
|
|
for (const i of ['#cvat_canvas_shape_1', '#cvat_canvas_shape_2', '#cvat_canvas_shape_4']) {
|
|
|
|
|
cy.get(i).trigger('mousemove').should('have.class', 'cvat_canvas_shape_activated').and('have.css', 'fill-opacity', ariaValuenow);
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
it('Activate checkbox "show projections".', () => {
|
|
|
|
|
cy.contains('Show projections').click();
|
|
|
|
|
cy.get('.cvat-appearance-cuboid-projections-checkbox').click();
|
|
|
|
|
});
|
|
|
|
|
it('Activated the cuboid. Projection lines are visible.', () => {
|
|
|
|
|
cy.get('#cvat_canvas_shape_4').trigger('mousemove', {force: true})
|
|
|
|
|
@ -123,11 +119,8 @@ context('Appearance features', () => {
|
|
|
|
|
cy.get('.cvat-canvas-container').click();
|
|
|
|
|
});
|
|
|
|
|
it('Activate checkbox "outlined borders" with a red color. The borders are red on the objects.', () => {
|
|
|
|
|
cy.get('.cvat-objects-appearance-content').within(() => {
|
|
|
|
|
cy.contains('Outlined borders').click().within(() => {
|
|
|
|
|
cy.get('button').click();
|
|
|
|
|
});
|
|
|
|
|
});
|
|
|
|
|
cy.get('.cvat-appearance-outlinded-borders-checkbox').click();
|
|
|
|
|
cy.get('.cvat-appearance-outlined-borders-button').click();
|
|
|
|
|
cy.get('.cvat-label-color-picker').within(() => {
|
|
|
|
|
cy.contains('hex').prev().clear().type(strokeColor);
|
|
|
|
|
cy.contains('Ok').click();
|
|
|
|
|
@ -147,12 +140,14 @@ context('Appearance features', () => {
|
|
|
|
|
cy.get('.cvat_canvas_shape').each(object => {
|
|
|
|
|
cy.get(object).should('have.prop', 'tagName').then($tagName => {
|
|
|
|
|
if ($tagName !== 'polyline') {
|
|
|
|
|
cy.get(object).should('have.css', 'fill-opacity', '1').and('have.css', 'fill', 'rgb(224, 224, 224)');
|
|
|
|
|
} else {
|
|
|
|
|
cy.get(object).should('have.css', 'fill-opacity', '0');
|
|
|
|
|
expect(Number(object.css('fill-opacity'))).to.be.gt(Number(fillOpacity)); // expected 1 to be above 0.03
|
|
|
|
|
expect(object.css('fill')).to.be.equal('rgb(224, 224, 224)'); // expected rgb(224, 224, 224) to equal rgb(224, 224, 224)
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
});
|
|
|
|
|
// Disable "Outlined borders" and check css "stroke" for polyline.
|
|
|
|
|
cy.get('.cvat-appearance-outlinded-borders-checkbox').click();
|
|
|
|
|
cy.get('#cvat_canvas_shape_3').should('have.css', 'stroke', 'rgb(224, 224, 224)') // have CSS property stroke with the value rgb(224, 224, 224)
|
|
|
|
|
});
|
|
|
|
|
});
|
|
|
|
|
});
|
|
|
|
|
|