diff --git a/tests/cypress/integration/actions_tasks_objects/case_16_z_order_features.js b/tests/cypress/integration/actions_tasks_objects/case_16_z_order_features.js new file mode 100644 index 00000000..4b64e4e1 --- /dev/null +++ b/tests/cypress/integration/actions_tasks_objects/case_16_z_order_features.js @@ -0,0 +1,113 @@ +// Copyright (C) 2020 Intel Corporation +// +// SPDX-License-Identifier: MIT + +/// + +import { taskName } from '../../support/const'; + +context('Actions on polygon', () => { + const caseId = '16'; + let zLayer = 0; + const createPolygonShapeFirst = { + reDraw: false, + type: 'Shape', + switchLabel: false, + pointsMap: [ + { x: 340, y: 200 }, + { x: 590, y: 200 }, + { x: 590, y: 450 }, + ], + complete: true, + numberOfPoints: null, + }; + const createPolygonShapeSecond = { + reDraw: false, + type: 'Shape', + switchLabel: false, + pointsMap: [ + { x: 190, y: 210 }, + { x: 440, y: 210 }, + { x: 440, y: 460 }, + ], + complete: true, + numberOfPoints: null, + }; + before(() => { + cy.openTaskJob(taskName); + }); + + describe(`Testing case "${caseId}"`, () => { + + it('Create a first polygon shape', () => { + cy.createPolygon(createPolygonShapeFirst); + }); + + it('Increase z-layer with a special switcher', () => { + cy.get('.cvat-canvas-z-axis-wrapper').within(() => { + cy.get('[role="slider"]').should('have.attr', 'aria-valuenow').then($zLayer=> { + zLayer = Number($zLayer); + }); + cy.get('i[aria-label="icon: plus-circle"]').click(); + cy.get('[role="slider"]').should('have.attr', 'aria-valuenow', zLayer + 1); + }); + }); + + it('Create a second polygon shape', () => { + cy.createPolygon(createPolygonShapeSecond); + }); + + it('Deactivate all objects', () => { + cy.get('.cvat-canvas-container').click(); + }); + + it('Second shape is over the first shape', () => { + // The larger the index of an element in the array the closer it is to us + cy.get('.cvat_canvas_shape').then($canvasShape => { +                expect(Number($canvasShape[1].id.match(/\d+$/))).to.be.equal(2); + }); + }); + + it('Activate first shape', () => { + cy.get('#cvat_canvas_shape_1').trigger('mousemove').trigger('mouseover'); + }); + + it('First shape is over the second shape', () => { + // The larger the index of an element in the array the closer it is to us +            cy.get('.cvat_canvas_shape').then($canvasShape => { +                expect(Number($canvasShape[1].id.match(/\d+$/))).to.be.equal(1); + assert.isAbove(Number($canvasShape.eq(-1).attr('fill-opacity')), Number($canvasShape.eq(0).attr('fill-opacity'))); + }); + }); + + it('Deactivate all objects', () => { + cy.get('.cvat-canvas-container').click(); + }); + + it('Switch z-layer slider to zero position', () => { + cy.get('.cvat-canvas-z-axis-wrapper').within(() => { + cy.get('[role="slider"]').parent().click('top'); + cy.get('[role="slider"]').should('have.attr', 'aria-valuenow', zLayer); + }); + }); + + it('Second shape is invisible', () => { + cy.get('#cvat_canvas_shape_2').should('not.be.visible'); + }); + + it('Increase z-layer with a special switcher', () => { + cy.get('.cvat-canvas-z-axis-wrapper').within(() => { + cy.get('[role="slider"]').should('have.attr', 'aria-valuenow').then($zLayer=> { + zLayer = Number($zLayer); + }); + cy.get('i[aria-label="icon: plus-circle"]').click(); + cy.get('[role="slider"]').should('have.attr', 'aria-valuenow', zLayer + 2); + }); + }); + + it('First and second shapes are visible', () => { + cy.get('#cvat_canvas_shape_1').should('be.visible'); + cy.get('#cvat_canvas_shape_2').should('be.visible'); + }); + }); +});