From ab50c2cdd537a03f94b64d321d8b619234dd46fe Mon Sep 17 00:00:00 2001 From: Kruchinin Date: Fri, 30 Oct 2020 08:49:44 +0300 Subject: [PATCH 1/5] Cypress test for case 14. Appearance features. --- .../case_14_appearance_features.js | 93 +++++++++++++++++++ tests/cypress/support/commands.js | 2 +- 2 files changed, 94 insertions(+), 1 deletion(-) create mode 100644 tests/cypress/integration/actions_tasks_objects/case_14_appearance_features.js diff --git a/tests/cypress/integration/actions_tasks_objects/case_14_appearance_features.js b/tests/cypress/integration/actions_tasks_objects/case_14_appearance_features.js new file mode 100644 index 00000000..039b16f0 --- /dev/null +++ b/tests/cypress/integration/actions_tasks_objects/case_14_appearance_features.js @@ -0,0 +1,93 @@ +/* + * Copyright (C) 2020 Intel Corporation + * + * SPDX-License-Identifier: MIT + */ + +/// + +import { taskName } from '../../support/const'; + +context('Appearance features', () => { + const caseId = '14'; + let ariaValuenow = 0; + const createRectangleShape2Points = { + points: 'By 2 Points', + type: 'Shape', + switchLabel: false, + firstX: 100, + firstY: 350, + secondX: 200, + secondY: 450, + }; + const createPolygonShape = { + reDraw: false, + type: 'Shape', + switchLabel: false, + pointsMap: [ + { x: 250, y: 350 }, + { x: 300, y: 300 }, + { x: 300, y: 450 }, + ], + complete: true, + numberOfPoints: null, + }; + const createPolylinesShape = { + type: 'Shape', + switchLabel: false, + pointsMap: [ + { x: 350, y: 350 }, + { x: 400, y: 300 }, + { x: 400, y: 450 }, + { x: 350, y: 350 }, + ], + complete: true, + numberOfPoints: null, + }; + const createCuboidShape2Points = { + points: 'From rectangle', + type: 'Shape', + switchLabel: false, + firstX: 450, + firstY: 350, + secondX: 550, + secondY: 450, + }; + const createPointsShape = { + type: 'Shape', + switchLabel: false, + pointsMap: [{ x: 650, y: 350 }], + complete: true, + numberOfPoints: null, + }; + + before(() => { + cy.openTaskJob(taskName); + }); + + describe(`Testing case "${caseId}"`, () => { + it('Create a rectangle, a polygon, a polyline, a cuboid and points.', () => { + cy.createRectangle(createRectangleShape2Points); + cy.createPolygon(createPolygonShape); + cy.createPolyline(createPolylinesShape); + cy.createCuboid(createCuboidShape2Points); + cy.createPoint(createPointsShape); + // Just in case, deactivate all objects + cy.get('.cvat-canvas-container').click('bottom'); + }); + 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_canvas_shape').each(object => { + cy.get(object).should('have.attr', 'fill-opacity', ariaValuenow / 100); + }); + }); + }); +}); diff --git a/tests/cypress/support/commands.js b/tests/cypress/support/commands.js index 889551c4..27a104ce 100644 --- a/tests/cypress/support/commands.js +++ b/tests/cypress/support/commands.js @@ -228,13 +228,13 @@ Cypress.Commands.add('createCuboid', (createCuboidParams) => { if (createCuboidParams.switchLabel) { cy.switchLabel(createCuboidParams.labelName); } - cy.get('.cvat-draw-shape-popover-content').contains(createCuboidParams.points).click(); cy.contains('Draw new cuboid') .parents('.cvat-draw-shape-popover-content') .within(() => { cy.get('.ant-select-selection-selected-value').then(($labelValue) => { selectedValueGlobal = $labelValue.text(); }); + cy.contains(createCuboidParams.points).click(); cy.get('button').contains(createCuboidParams.type).click({ force: true }); }); cy.get('.cvat-canvas-container').click(createCuboidParams.firstX, createCuboidParams.firstY); From e73aec20f12f01a343b15e793cb24606e9cea1d4 Mon Sep 17 00:00:00 2001 From: Kruchinin Date: Thu, 5 Nov 2020 12:53:57 +0300 Subject: [PATCH 2/5] Cypress test for check "Appearance features". --- .../case_14_appearance_features.js | 75 ++++++++++++++++++- 1 file changed, 71 insertions(+), 4 deletions(-) diff --git a/tests/cypress/integration/actions_tasks_objects/case_14_appearance_features.js b/tests/cypress/integration/actions_tasks_objects/case_14_appearance_features.js index 039b16f0..5192ee95 100644 --- a/tests/cypress/integration/actions_tasks_objects/case_14_appearance_features.js +++ b/tests/cypress/integration/actions_tasks_objects/case_14_appearance_features.js @@ -11,6 +11,8 @@ import { taskName } from '../../support/const'; context('Appearance features', () => { const caseId = '14'; let ariaValuenow = 0; + const strokeColor = 'ff0000'; + let fill = ''; const createRectangleShape2Points = { points: 'By 2 Points', type: 'Shape', @@ -39,7 +41,7 @@ context('Appearance features', () => { { x: 350, y: 350 }, { x: 400, y: 300 }, { x: 400, y: 450 }, - { x: 350, y: 350 }, + { x: 350, y: 450 }, ], complete: true, numberOfPoints: null, @@ -68,12 +70,13 @@ 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.createPolygon(createPolygonShape); cy.createPolyline(createPolylinesShape); cy.createCuboid(createCuboidShape2Points); cy.createPoint(createPointsShape); - // Just in case, deactivate all objects - cy.get('.cvat-canvas-container').click('bottom'); }); it('Set opacity level for shapes to 100. All shapes are filled.', () => { cy.get('.cvat-objects-appearance-content').within(() => { @@ -86,7 +89,71 @@ context('Appearance features', () => { }); }); cy.get('.cvat_canvas_shape').each(object => { - cy.get(object).should('have.attr', 'fill-opacity', ariaValuenow / 100); + cy.get(object).should('have.prop', 'tagName').then($tagName => { + if ($tagName !== 'polyline') { + cy.get(object).should('have.css', 'fill-opacity', '1'); + } else { + cy.get(object).should('have.css', 'fill-opacity', '0'); + } + }); + }); + }); + 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); + }); + }); + }); + }); + 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']) { + 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(); + }); + it('Activated the cuboid. Projection lines are visible.', () => { + cy.get('#cvat_canvas_shape_4').trigger('mousemove', {force: true}) + .should('have.attr', 'projections', 'true'); + cy.get('.cvat_canvas_cuboid_projections').should('be.visible'); + // Deactivate all objects + 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-label-color-picker').within(() => { + cy.contains('hex').prev().clear().type(strokeColor); + cy.contains('Ok').click(); + }); + cy.get('.cvat_canvas_shape').each(object => { + cy.get(object).should('have.attr', 'stroke', `#${strokeColor}`); + }); + }); + it('Set "Color by" to instance. The shapes changed a color.', () => { + cy.changeAppearance('Instance'); + cy.get('.cvat_canvas_shape').each(object => { + cy.get(object).should('have.css', 'fill').and('not.equal', fill); + }); + }); + it('Set "Color by" to group. The shapes are white.', () => { + cy.changeAppearance('Group'); + 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'); + } + }); }); }); }); From 952a7109a2c8ec03e5257780eca468e96a6b4d59 Mon Sep 17 00:00:00 2001 From: Kruchinin Date: Thu, 12 Nov 2020 12:54:30 +0300 Subject: [PATCH 3/5] Apply comments. --- .../actions_tasks_objects/case_14_appearance_features.js | 8 +++----- 1 file changed, 3 insertions(+), 5 deletions(-) diff --git a/tests/cypress/integration/actions_tasks_objects/case_14_appearance_features.js b/tests/cypress/integration/actions_tasks_objects/case_14_appearance_features.js index 5192ee95..2f1a0f36 100644 --- a/tests/cypress/integration/actions_tasks_objects/case_14_appearance_features.js +++ b/tests/cypress/integration/actions_tasks_objects/case_14_appearance_features.js @@ -1,8 +1,6 @@ -/* - * Copyright (C) 2020 Intel Corporation - * - * SPDX-License-Identifier: MIT - */ +// Copyright (C) 2020 Intel Corporation +// +// SPDX-License-Identifier: MIT /// From 5b9ab1248fd965510a6949d4d6cea2c8f60ca742 Mon Sep 17 00:00:00 2001 From: Kruchinin Date: Thu, 12 Nov 2020 15:21:39 +0300 Subject: [PATCH 4/5] Apply comments. --- .../case_14_appearance_features.js | 51 +++++++++---------- tests/cypress/support/commands.js | 2 +- 2 files changed, 24 insertions(+), 29 deletions(-) diff --git a/tests/cypress/integration/actions_tasks_objects/case_14_appearance_features.js b/tests/cypress/integration/actions_tasks_objects/case_14_appearance_features.js index 2f1a0f36..49da0a6b 100644 --- a/tests/cypress/integration/actions_tasks_objects/case_14_appearance_features.js +++ b/tests/cypress/integration/actions_tasks_objects/case_14_appearance_features.js @@ -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) }); }); }); diff --git a/tests/cypress/support/commands.js b/tests/cypress/support/commands.js index b5d8fa5a..5e873f11 100644 --- a/tests/cypress/support/commands.js +++ b/tests/cypress/support/commands.js @@ -167,7 +167,7 @@ Cypress.Commands.add('createPoint', (createPointParams) => { }); Cypress.Commands.add('changeAppearance', (colorBy) => { - cy.get('.cvat-objects-appearance-content').within(() => { + cy.get('.cvat-appearance-color-by-radio-group').within(() => { cy.get('[type="radio"]').check(colorBy, { force: true }); }); }); From 276278f4f12f0893543e6bcf04b2f40a6d88539a Mon Sep 17 00:00:00 2001 From: Kruchinin Date: Thu, 12 Nov 2020 15:47:36 +0300 Subject: [PATCH 5/5] Minor fix. --- .../actions_tasks_objects/case_14_appearance_features.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/tests/cypress/integration/actions_tasks_objects/case_14_appearance_features.js b/tests/cypress/integration/actions_tasks_objects/case_14_appearance_features.js index 49da0a6b..640730a8 100644 --- a/tests/cypress/integration/actions_tasks_objects/case_14_appearance_features.js +++ b/tests/cypress/integration/actions_tasks_objects/case_14_appearance_features.js @@ -147,7 +147,7 @@ context('Appearance features', () => { }); // 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) + 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) }); }); });