Merge pull request #2408 from DmitriyOparin/do/cypress_test_case16_z_order_features

Cypress test. Z-order feature.

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
+
+/// <reference types="cypress" />
+
+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');
+        });
+    });
+});