diff --git a/tests/cypress/integration/actions_tasks_objects/case_17_lock_hide_features.js b/tests/cypress/integration/actions_tasks_objects/case_17_lock_hide_features.js new file mode 100644 index 00000000..bf0bc18e --- /dev/null +++ b/tests/cypress/integration/actions_tasks_objects/case_17_lock_hide_features.js @@ -0,0 +1,230 @@ +/* + * Copyright (C) 2020 Intel Corporation + * + * SPDX-License-Identifier: MIT + */ + +/// + +import { labelName, taskName } from '../../support/const'; + +context('Lock/hide features.', () => { + const caseId = '17'; + const newLabelName1 = `First label case ${caseId}`; + const newLabelName2 = `Second label case ${caseId}`; + const newLabelName3 = `Third label case ${caseId}`; + const newLabelName4 = `Fourth label case ${caseId}`; + const createPolygonShape = { + reDraw: false, + type: 'Shape', + switchLabel: false, + pointsMap: [ + { x: 200, y: 200 }, + { x: 250, y: 200 }, + { x: 250, y: 250 }, + ], + complete: true, + numberOfPoints: null, + }; + const createRectangleTrack2Points = { + points: 'By 2 Points', + type: 'Track', + switchLabel: false, + firstX: 260, + firstY: 200, + secondX: 360, + secondY: 250 + }; + const createCuboidShape4Points = { + points: 'By 4 Points', + type: 'Shape', + switchLabel: false, + firstX: 400, + firstY: 350, + secondX: 500, + secondY: 350, + thirdX: 500, + thirdY: 450, + fourthX: 400, + fourthY: 450, + }; + const createPolylinesShapeSwitchLabel = { + type: 'Shape', + switchLabel: true, + labelName: newLabelName1, + pointsMap: [ + { x: 600, y: 200 }, + { x: 650, y: 200 }, + { x: 650, y: 250 }, + ], + complete: true, + numberOfPoints: null, + }; + const createPointsShapeSwitchLabel = { + type: 'Shape', + switchLabel: true, + labelName: newLabelName2, + pointsMap: [ + { x: 700, y: 200 } + ], + complete: true, + numberOfPoints: null, + }; + const createRectangleShape4Points = { + points: 'By 4 Points', + type: 'Shape', + switchLabel: true, + labelName: newLabelName3, + firstX: 550, + firstY: 350, + secondX: 650, + secondY: 350, + thirdX: 650, + thirdY: 450, + fourthX: 550, + fourthY: 450, + }; + const createPolygonTrack = { + reDraw: false, + type: 'Track', + switchLabel: true, + labelName: newLabelName4, + pointsMap: [ + { x: 700, y: 350 }, + { x: 850, y: 350 }, + { x: 850, y: 450 }, + { x: 700, y: 450 }, + ], + numberOfPoints: 4, + }; + + let shapeWidth = 0; + + before(() => { + cy.openTask(taskName); + cy.addNewLabel(newLabelName1); + cy.addNewLabel(newLabelName2); + cy.addNewLabel(newLabelName3); + cy.addNewLabel(newLabelName4); + cy.openJob(); + }); + + describe(`Testing case "${caseId}"`, () => { + it('Draw several objects (different shapes, tracks, tags, labels)', () => { + cy.createPolygon(createPolygonShape); + cy.createRectangle(createRectangleTrack2Points); + cy.createCuboid(createCuboidShape4Points); + cy.createPolyline(createPolylinesShapeSwitchLabel); + cy.createPoint(createPointsShapeSwitchLabel); + cy.createRectangle(createRectangleShape4Points); + cy.createPolygon(createPolygonTrack); + cy.createTag(newLabelName4); + }); + it('Lock all the objects with a dedicated button (in side bar header). All the objects are locked.', () => { + cy.get('.cvat-objects-sidebar-states-header').within(() => { + cy.get('i[aria-label="icon: unlock"]').click(); + }); + cy.get('.cvat-objects-sidebar-state-item').each(item => { + cy.get(item).within(() => { + cy.get('.cvat-object-item-button-lock-enabled').should('exist'); + }); + }); + }); + it('Hide all the objects. Objects are still visible because they cannot be hidden while locked.', () => { + cy.get('.cvat-objects-sidebar-states-header').within(() => { + cy.get('i[aria-label="icon: eye-invisible"]').click(); + }); + cy.get('.cvat-objects-sidebar-state-item').each(item => { + cy.get(item).within(() => { + cy.get('.cvat-object-item-button-hidden-enabled').should('not.exist'); + }); + }); + cy.get('.cvat_canvas_shape').each(item => { + cy.get(item).should('be.visible'); + }); + }); + it('Unlock all objects and hide all objects. All the objects are hidden.', () => { + cy.get('.cvat-objects-sidebar-states-header').within(() => { + cy.get('i[aria-label="icon: lock"]').click(); + cy.get('i[aria-label="icon: eye"]').click(); + }); + cy.get('.cvat-objects-sidebar-state-item').each(item => { + cy.get(item).invoke('text').then($itemText => { + // Sidebar for "Tag" doesn't have "Switch hidden property" button. + if (!$itemText.match(/\d+TAG/)) { + cy.get(item).within(() => { + cy.get('.cvat-object-item-button-hidden-enabled').should('exist'); + }); + } + }); + }); + cy.get('.cvat_canvas_shape').each(item => { + cy.get(item).should('have.class', 'cvat_canvas_hidden'); + }); + }); + it('Set properties occluded & pinned to true for a shape. Shape is occluded is visualized (dashed contour) and the shape cannot be moved, but can be resized.', () => { + // Unhide rectangle shape. + cy.get('#cvat-objects-sidebar-state-item-6').within(() => { + cy.get('i[aria-label="icon: eye-invisible"]').click(); + }); + cy.get('#cvat_canvas_shape_6').should('be.visible'); + cy.get('#cvat-objects-sidebar-state-item-6').within(() => { + cy.get('.cvat-object-item-button-occluded').click().should('have.class', 'cvat-object-item-button-occluded-enabled'); + }); + cy.get('#cvat_canvas_shape_6').should('have.css', 'stroke-dasharray'); + cy.get('#cvat-objects-sidebar-state-item-6').within(() => { + cy.get('.cvat-object-item-button-pinned').click().should('have.class', 'cvat-object-item-button-pinned-enabled'); + }); + cy.get('#cvat_canvas_shape_6').should('not.have.class', 'cvat_canvas_shape_draggable'); + // Get cuttent values for "width" parameter. + cy.get('#cvat_canvas_shape_6').should('have.attr', 'width').then($shapeWidth => { + shapeWidth = $shapeWidth; + }); + // Resize rectangle shape. + cy.get('.cvat-canvas-container').trigger('mousedown', 650, 400, {button: 0}).trigger('mousemove', 660, 400).trigger('mouseup'); + cy.get('#cvat_canvas_shape_6').should('have.attr', 'width').then($shapeWidth => { + expect(Math.floor(shapeWidth)).to.be.lessThan(Math.floor($shapeWidth)); // expected 95 to be below 104 + }); + }); + it('Go to polygon. Pinned is set to true by default. Set it to false. Polygon can be moved.', () => { + cy.get('#cvat-objects-sidebar-state-item-1').within(() => { + cy.get('.cvat-object-item-button-pinned-enabled').should('exist'); + }); + cy.get('#cvat_canvas_shape_1').should('not.have.class', 'cvat_canvas_shape_draggable'); + cy.get('#cvat-objects-sidebar-state-item-1').within(() => { + cy.get('.cvat-object-item-button-pinned').click(); + cy.get('.cvat-object-item-button-pinned-enabled').should('not.exist'); + // Unhide polygon shape. + cy.get('.cvat-object-item-button-hidden').click().should('not.have.class', 'cvat-object-item-button-hidden-enabled'); + }); + cy.get('#cvat_canvas_shape_1').should('have.class', 'cvat_canvas_shape_draggable'); + }); + it('Go to "Labels" tab.', () => { + // Hide all objects for convenience of next testing. + cy.get('.cvat-objects-sidebar-states-header').within(() => { + cy.get('i[aria-label="icon: eye"]').click(); + }); + cy.get('.cvat-objects-sidebar').within(() => { + cy.contains('Labels').click(); + }); + }); + it('Repeat hide/lock for one of the labels. Objects with other labels weren’t affected.', () => { + const objectsSameLabel = ['cvat_canvas_shape_1', 'cvat_canvas_shape_2', 'cvat_canvas_shape_3']; + cy.get('.cvat-objects-sidebar-labels-list').within(() => { + // Unhide all object with "Main task" label (#cvat_canvas_shape_1-3). + cy.contains(labelName).parents('.cvat-objects-sidebar-label-item').within(() => { + cy.get('i[aria-label="icon: eye-invisible"]').click(); + cy.get('i[aria-label="icon: unlock"]').click(); + }); + }); + cy.get('.cvat_canvas_shape').then(objectList => { + for (let i=0; i { Cypress.Commands.add('createRectangle', (createRectangleParams) => { cy.get('.cvat-draw-rectangle-control').click(); if (createRectangleParams.switchLabel) { - cy.switchLabel(createRectangleParams.labelName); + cy.switchLabel(createRectangleParams.labelName, 'rectangle'); } cy.contains('Draw new rectangle') .parents('.cvat-draw-shape-popover-content').within(() => { @@ -116,9 +116,13 @@ Cypress.Commands.add('createRectangle', (createRectangleParams) => { cy.checkObjectParameters(createRectangleParams, 'RECTANGLE'); }); -Cypress.Commands.add('switchLabel', (labelName) => { - cy.get('.cvat-draw-shape-popover-content').find('.ant-select-selection-selected-value').click(); - cy.get('.ant-select-dropdown-menu').contains(labelName).click(); +Cypress.Commands.add('switchLabel', (labelName, objectType) => { + const pattern = `^(Draw new|Setup) ${objectType}$` + const regex = new RegExp(pattern, 'g'); + cy.contains(regex).parents('.cvat-draw-shape-popover-content').within(() => { + cy.get('.ant-select-selection-selected-value').click(); + }); + cy.get('.ant-select-dropdown-menu').last().contains(labelName).click(); }); Cypress.Commands.add('checkObjectParameters', (objectParameters, objectType) => { @@ -140,7 +144,7 @@ Cypress.Commands.add('checkObjectParameters', (objectParameters, objectType) => Cypress.Commands.add('createPoint', (createPointParams) => { cy.get('.cvat-draw-points-control').click(); if (createPointParams.switchLabel) { - cy.switchLabel(createPointParams.labelName); + cy.switchLabel(createPointParams.labelName, 'points'); } cy.contains('Draw new points') .parents('.cvat-draw-shape-popover-content') @@ -184,7 +188,7 @@ Cypress.Commands.add('createPolygon', (createPolygonParams) => { if (!createPolygonParams.reDraw) { cy.get('.cvat-draw-polygon-control').click(); if (createPolygonParams.switchLabel) { - cy.switchLabel(createPolygonParams.labelName); + cy.switchLabel(createPolygonParams.labelName, 'polygon'); } cy.contains('Draw new polygon') .parents('.cvat-draw-shape-popover-content') @@ -243,15 +247,15 @@ Cypress.Commands.add('changeLabelAAM', (labelName) => { Cypress.Commands.add('createCuboid', (createCuboidParams) => { cy.get('.cvat-draw-cuboid-control').click(); if (createCuboidParams.switchLabel) { - cy.switchLabel(createCuboidParams.labelName); + cy.switchLabel(createCuboidParams.labelName, 'cuboid'); } - 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); @@ -274,7 +278,7 @@ Cypress.Commands.add('updateAttributes', (multiAttrParams) => { Cypress.Commands.add('createPolyline', (createPolylineParams) => { cy.get('.cvat-draw-polyline-control').click(); if (createPolylineParams.switchLabel) { - cy.switchLabel(createPolylineParams.labelName); + cy.switchLabel(createPolylineParams.labelName, 'polyline'); } cy.contains('Draw new polyline') .parents('.cvat-draw-shape-popover-content') @@ -344,3 +348,26 @@ Cypress.Commands.add('removeAnnotations', () => { Cypress.Commands.add('goToTaskList', () => { cy.get('a[value="tasks"]').click(); }); + +Cypress.Commands.add('addNewLabel', (newLabelName) => { + let listCvatConstructorViewerItemText = []; + cy.document().then((doc) => { + const labels = Array.from(doc.querySelectorAll('.cvat-constructor-viewer-item')); + for (let i = 0; i < labels.length; i++) { + listCvatConstructorViewerItemText.push(labels[i].textContent); + } + if (listCvatConstructorViewerItemText.indexOf(newLabelName) === -1) { + cy.contains('button', 'Add label').click(); + cy.get('[placeholder="Label name"]').type(newLabelName); + cy.contains('button', 'Done').click(); + } + }); +}); + +Cypress.Commands.add('createTag', (labelName) => { + cy.get('.cvat-setup-tag-control').click(); + cy.switchLabel(labelName, 'tag'); + cy.contains('Setup tag').parents('.cvat-draw-shape-popover-content').within(() => { + cy.get('button').click(); + }); +});