diff --git a/cvat-ui/package-lock.json b/cvat-ui/package-lock.json index a9e51e29..d2f77121 100644 --- a/cvat-ui/package-lock.json +++ b/cvat-ui/package-lock.json @@ -1,6 +1,6 @@ { "name": "cvat-ui", - "version": "1.11.5", + "version": "1.11.6", "lockfileVersion": 1, "requires": true, "dependencies": { diff --git a/cvat-ui/package.json b/cvat-ui/package.json index 3a249347..cd48af57 100644 --- a/cvat-ui/package.json +++ b/cvat-ui/package.json @@ -1,6 +1,6 @@ { "name": "cvat-ui", - "version": "1.11.5", + "version": "1.11.6", "description": "CVAT single-page application", "main": "src/index.tsx", "scripts": { diff --git a/cvat-ui/src/components/annotation-page/standard-workspace/objects-side-bar/object-item-menu.tsx b/cvat-ui/src/components/annotation-page/standard-workspace/objects-side-bar/object-item-menu.tsx index ca71ee40..0ab045b9 100644 --- a/cvat-ui/src/components/annotation-page/standard-workspace/objects-side-bar/object-item-menu.tsx +++ b/cvat-ui/src/components/annotation-page/standard-workspace/objects-side-bar/object-item-menu.tsx @@ -200,6 +200,7 @@ function RemoveItem(props: ItemProps): JSX.Element { onClick={(): void => { if (locked) { Modal.confirm({ + className: 'cvat-modal-confirm', title: 'Object is locked', content: 'Are you sure you want to remove it?', onOk() { diff --git a/cvat-ui/src/components/annotation-page/top-bar/player-buttons.tsx b/cvat-ui/src/components/annotation-page/top-bar/player-buttons.tsx index 8716831e..22ca7c97 100644 --- a/cvat-ui/src/components/annotation-page/top-bar/player-buttons.tsx +++ b/cvat-ui/src/components/annotation-page/top-bar/player-buttons.tsx @@ -76,12 +76,16 @@ function PlayerButtons(props: Props): JSX.Element { let prevButtonTooltipMessage = prevRegularText; if (prevButtonType === 'filtered') { prevButton = ( - + ); prevButtonTooltipMessage = prevFilteredText; } else if (prevButtonType === 'empty') { prevButton = ( - + ); prevButtonTooltipMessage = prevEmptyText; } @@ -90,11 +94,11 @@ function PlayerButtons(props: Props): JSX.Element { let nextButtonTooltipMessage = nextRegularText; if (nextButtonType === 'filtered') { nextButton = ( - + ); nextButtonTooltipMessage = nextFilteredText; } else if (nextButtonType === 'empty') { - nextButton = ; + nextButton = ; nextButtonTooltipMessage = nextEmptyText; } diff --git a/cvat-ui/src/components/cvat-app.tsx b/cvat-ui/src/components/cvat-app.tsx index b3c742cd..7e361bdf 100644 --- a/cvat-ui/src/components/cvat-app.tsx +++ b/cvat-ui/src/components/cvat-app.tsx @@ -187,9 +187,11 @@ class CVATApplication extends React.PureComponent { cy.openTaskJob(taskName); }); - function goCheckFrameNumber(frameNum) { - cy.get('.cvat-player-frame-selector').within(() => { - cy.get('input[role="spinbutton"]').clear().type(`${frameNum}{Enter}`).should('have.value', frameNum); - }); - } - describe(`Testing case "${caseId}"`, () => { it('Create rectangle shape on first frame', () => { - goCheckFrameNumber(frameNum); + cy.goCheckFrameNumber(frameNum); cy.createRectangle(createRectangleShape2Points); cy.get('#cvat_canvas_shape_1') .should('have.attr', 'x') @@ -52,7 +46,7 @@ context('Merge/split features', () => { }); }); it('Create rectangle shape on third frame with another position', () => { - goCheckFrameNumber(frameNum + 2); + cy.goCheckFrameNumber(frameNum + 2); cy.createRectangle(createRectangleShape2PointsSecond); cy.get('#cvat_canvas_shape_2') .should('have.attr', 'x') @@ -63,7 +57,7 @@ context('Merge/split features', () => { it('Merge the objects with "Merge button"', () => { cy.get('.cvat-merge-control').click(); cy.get('#cvat_canvas_shape_2').click(); - goCheckFrameNumber(frameNum); + cy.goCheckFrameNumber(frameNum); cy.get('#cvat_canvas_shape_1').click(); cy.get('.cvat-merge-control').click(); }); @@ -75,7 +69,7 @@ context('Merge/split features', () => { .within(() => { cy.get('.cvat-object-item-button-keyframe-enabled').should('exist'); }); - goCheckFrameNumber(frameNum + 2); + cy.goCheckFrameNumber(frameNum + 2); cy.get('#cvat_canvas_shape_3').should('exist').and('be.visible'); cy.get('#cvat-objects-sidebar-state-item-3') .should('contain', '3') @@ -85,13 +79,13 @@ context('Merge/split features', () => { }); }); it('On the second frame and on the fourth frame the track is invisible', () => { - goCheckFrameNumber(frameNum + 1); + cy.goCheckFrameNumber(frameNum + 1); cy.get('#cvat_canvas_shape_3').should('exist').and('be.hidden'); - goCheckFrameNumber(frameNum + 3); + cy.goCheckFrameNumber(frameNum + 3); cy.get('#cvat_canvas_shape_3').should('exist').and('be.hidden'); }); it('Go to the second frame and remove "outside" flag from the track. The track now visible.', () => { - goCheckFrameNumber(frameNum + 1); + cy.goCheckFrameNumber(frameNum + 1); cy.get('#cvat-objects-sidebar-state-item-3') .should('contain', '3') .and('contain', 'RECTANGLE TRACK') @@ -120,7 +114,7 @@ context('Merge/split features', () => { }); }); it('On the fourth frame remove "keyframe" flag from the track. The track now visible and "outside" flag is disabled.', () => { - goCheckFrameNumber(frameNum + 3); + cy.goCheckFrameNumber(frameNum + 3); cy.get('#cvat-objects-sidebar-state-item-3') .should('contain', '3') .and('contain', 'RECTANGLE TRACK') diff --git a/tests/cypress/integration/actions_tasks_objects/case_23_canvas_grid_feature.js b/tests/cypress/integration/actions_tasks_objects/case_23_canvas_grid_feature.js index 53eceb01..8c24dc46 100644 --- a/tests/cypress/integration/actions_tasks_objects/case_23_canvas_grid_feature.js +++ b/tests/cypress/integration/actions_tasks_objects/case_23_canvas_grid_feature.js @@ -10,7 +10,15 @@ context('Canvas grid feature', () => { const caseId = '23'; const settingsGridSize = 50; const gridColor = 'Black'; - const gridOpacity = 49; + const gridOpacity = 80; + + function generateString(countPointsToMove) { + let action = ''; + for (let i = 0; i < countPointsToMove; i++) { + action += '{leftarrow}'; + } + return action; + } before(() => { cy.openTaskJob(taskName); @@ -36,14 +44,13 @@ context('Canvas grid feature', () => { cy.get(`.ant-select-item-option[title="${gridColor}"]`).click(); }); }); - it('Set "Grid opacity" to 49%.', () => { - cy.get('.cvat-player-settings-grid-opacity-input') - .click() - .within(() => { - cy.get('[role="slider"]').should('have.attr', 'aria-valuenow', gridOpacity); - }); + it('Set "Grid opacity" to 80%.', () => { + cy.get('.cvat-player-settings-grid-opacity-input').within(() => { + cy.get('[role="slider"]').type(generateString(20)); // Moving the slider to the left up to 80. + cy.get('[role="slider"]').should('have.attr', 'aria-valuenow', gridOpacity); + }); }); - it('Canvas has grid drawn, it is black, cells are 50x50px and it has 49% opacity.', () => { + it('Canvas has grid drawn, it is black, cells are 50x50px and it has 80% opacity.', () => { cy.get('#cvat_canvas_grid') .should('be.visible') // expected to be visible .within(() => { @@ -54,7 +61,7 @@ context('Canvas grid feature', () => { 'have.attr', 'style', `stroke: ${gridColor.toLowerCase()}; opacity: ${gridOpacity / 100};`, - ); // expected to have attribute style with the value stroke: black; opacity: 0.49; + ); // expected to have attribute style with the value stroke: black; opacity: 0.8; }); }); }); diff --git a/tests/cypress/integration/actions_tasks_objects/case_24_delete_unlock_lock_object.js b/tests/cypress/integration/actions_tasks_objects/case_24_delete_unlock_lock_object.js new file mode 100644 index 00000000..6b8d148d --- /dev/null +++ b/tests/cypress/integration/actions_tasks_objects/case_24_delete_unlock_lock_object.js @@ -0,0 +1,128 @@ +// Copyright (C) 2020 Intel Corporation +// +// SPDX-License-Identifier: MIT + +/// + +import { taskName, labelName } from '../../support/const'; + +context('Delete unlock/lock object', () => { + const caseId = '24'; + + const createRectangleShape2Points = { + points: 'By 2 Points', + type: 'Shape', + labelName: labelName, + firstX: 100, + firstY: 100, + secondX: 300, + secondY: 300, + }; + + function lockObject() { + cy.get('.cvat-objects-sidebar-state-item').within(() => { + cy.get('.cvat-object-item-button-lock').click(); + }); + }; + + function deleteObjectViaShortcut(shortcut, stateLockObject) { + if (stateLockObject == 'unlock') { + cy.get('.cvat-canvas-container').within(() => { + cy.get('.cvat_canvas_shape') + .trigger('mousemove') + .should('have.class', 'cvat_canvas_shape_activated'); + }); + }; + cy.get('body') + .type(shortcut); + }; + + function clickRemoveOnDropdownMenu() { + cy.get('.cvat-object-item-menu') + .contains(new RegExp('^Remove$', 'g')) + .click({ force: true }); + }; + + function deleteObjectViaGUIFromSidebar() { + cy.get('.cvat-objects-sidebar-states-list').within(() => { + cy.get('.cvat-objects-sidebar-state-item').within(() => { + cy.get('[aria-label="icon: more"]').click(); + }); + }); + clickRemoveOnDropdownMenu(); + }; + + function deleteObjectViaGUIFromObject() { + cy.get('.cvat-canvas-container').within(() => { + cy.get('.cvat_canvas_shape') + .trigger('mousemove') + .rightclick(); + }); + cy.get('.cvat-canvas-context-menu').within(() => { + cy.get('.cvat-objects-sidebar-state-item').within(() => { + cy.get('[aria-label="icon: more"]').click(); + }); + }); + clickRemoveOnDropdownMenu(); + }; + + function actionOnConfirmWindow(textBuntton) { + cy.get('.cvat-modal-confirm').within(() => { + cy.contains(new RegExp(`^${textBuntton}$`, 'g')) + .click(); + }); + }; + + function checkFailDeleteLockObject(shortcut) { + deleteObjectViaShortcut(shortcut, 'lock'); + checkExistObject('exist'); + cy.get('.cvat-notification-notice-remove-object-failed').should('exist'); + }; + + function checkExistObject(state) { + cy.get('.cvat_canvas_shape').should(state); + cy.get('.cvat-objects-sidebar-state-item').should(state); + }; + + before(() => { + cy.openTaskJob(taskName); + }); + + describe(`Testing case "${caseId}"`, () => { + it('Create and delete object via "Delete" shortcut', () => { + cy.createRectangle(createRectangleShape2Points); + deleteObjectViaShortcut('{del}', 'unlock'); + checkExistObject('not.exist'); + }); + + it('Create and delete object via GUI from sidebar', () => { + cy.createRectangle(createRectangleShape2Points); + deleteObjectViaGUIFromSidebar(); + checkExistObject('not.exist'); + }); + + it('Create, lock and delete object via "Shift+Delete" shortcuts', () => { + cy.createRectangle(createRectangleShape2Points); + lockObject(); + checkFailDeleteLockObject('{del}'); + deleteObjectViaShortcut('{shift}{del}', 'lock'); + checkExistObject('not.exist'); + }); + + it('Create, lock and delete object via GUI from sidebar', () => { + cy.createRectangle(createRectangleShape2Points); + lockObject(); + deleteObjectViaGUIFromSidebar(); + actionOnConfirmWindow('OK'); + checkExistObject('not.exist'); + }); + + it('Create, lock and cancel delete object via GUI from object', () => { + cy.createRectangle(createRectangleShape2Points); + lockObject(); + deleteObjectViaGUIFromObject(); + actionOnConfirmWindow('Cancel'); + checkExistObject('exist'); + }); + }); +}); diff --git a/tests/cypress/integration/actions_tasks_objects/case_25_canvas_bitmap_feature.js b/tests/cypress/integration/actions_tasks_objects/case_25_canvas_bitmap_feature.js new file mode 100644 index 00000000..f463c769 --- /dev/null +++ b/tests/cypress/integration/actions_tasks_objects/case_25_canvas_bitmap_feature.js @@ -0,0 +1,25 @@ +// Copyright (C) 2020 Intel Corporation +// +// SPDX-License-Identifier: MIT + +/// + +import { taskName } from '../../support/const'; + +context('Canvas bitmap feature', () => { + const caseId = '25'; + + before(() => { + cy.openTaskJob(taskName); + }); + + describe(`Testing case "${caseId}"`, () => { + it('Bitmap not visible.', () => { + cy.get('#cvat_canvas_bitmap').should('not.be.visible'); + }); + it('Activate bitmap.', () => { + cy.get('.cvat-appearance-bitmap-checkbox').click(); + cy.get('#cvat_canvas_bitmap').should('be.visible').and('have.css', 'background-color', 'rgb(0, 0, 0)'); + }); + }); +}); diff --git a/tests/cypress/integration/actions_tasks_objects/issue_2485_navigation_empty_frames.js b/tests/cypress/integration/actions_tasks_objects/issue_2485_navigation_empty_frames.js new file mode 100644 index 00000000..c29e0dd4 --- /dev/null +++ b/tests/cypress/integration/actions_tasks_objects/issue_2485_navigation_empty_frames.js @@ -0,0 +1,88 @@ +// Copyright (C) 2020 Intel Corporation +// +// SPDX-License-Identifier: MIT + +/// + +import { taskName, labelName } from '../../support/const'; + +context('Navigation to empty frames', () => { + const issueId = '2485'; + const createRectangleShape2Points = { + points: 'By 2 Points', + type: 'Shape', + labelName: labelName, + firstX: 250, + firstY: 350, + secondX: 350, + secondY: 450, + }; + + before(() => { + cy.openTaskJob(taskName); + }); + + describe(`Testing issue "${issueId}"`, () => { + it('Go to 2nd frame. Create a shape.', () => { + cy.goCheckFrameNumber(2); + cy.createRectangle(createRectangleShape2Points); + }); + + it('Go to 4th frame. Create a shape.', () => { + cy.goCheckFrameNumber(4); + cy.createRectangle(createRectangleShape2Points); + }); + + it('Input a filter to see the created objects.', () => { + cy.writeFilterValue(false, 'shape=="rectangle"'); + cy.get('#cvat_canvas_shape_2').should('exist'); + }); + + it('Go to 3rd frame.', () => { + cy.goCheckFrameNumber(3); + }); + + it('Right click to navigation buttons: Previous, Next. Switch their mode to: Go next/previous with a filter.', () => { + cy.goCheckFrameNumber(3); + for (const i of ['previous', 'next']) { + cy.get(`.cvat-player-${i}-button`).rightclick(); + cy.get(`.cvat-player-${i}-filtered-inlined-button`).click(); + } + }); + + it("Press go previous with a filter. CVAT get 2nd frame. Press again. Frame wasn't changed.", () => { + for (let i = 1; i <= 2; i++) { + cy.get('.cvat-player-previous-button-filtered').click({ force: true }); + cy.checkFrameNum(2); + cy.get('#cvat_canvas_shape_1').should('exist'); + } + }); + + it("Press go next with a filter. CVAT get 4th frame. Press again. Frame wasn't changed.", () => { + for (let i = 1; i <= 2; i++) { + cy.get('.cvat-player-next-button-filtered').click({ force: true }); + cy.checkFrameNum(4); + cy.get('#cvat_canvas_shape_2').should('exist'); + } + }); + + it('Change navigation buttons mode to "Go next/previous to an empty frame".', () => { + for (const i of ['previous', 'next']) { + cy.get(`.cvat-player-${i}-button-filtered`).rightclick({ force: true }); + cy.get(`.cvat-player-${i}-empty-inlined-button`).click({ force: true }); + } + }); + + it('Go previous to an empty frame. CVAT get 3rd frame.', () => { + cy.get('.cvat-player-previous-button-empty').click({ force: true }); + cy.checkFrameNum(3); + cy.get('.cvat_canvas_shape').should('not.exist'); + }); + + it('Go next to an empty frame. CVAT get 5th frame.', () => { + cy.get('.cvat-player-next-button-empty').click({ force: true }); + cy.checkFrameNum(5); + cy.get('.cvat_canvas_shape').should('not.exist'); + }); + }); +}); diff --git a/tests/cypress/integration/actions_tasks_objects/issue_2486_not_edit_object_aam.js b/tests/cypress/integration/actions_tasks_objects/issue_2486_not_edit_object_aam.js new file mode 100644 index 00000000..ace8fa9a --- /dev/null +++ b/tests/cypress/integration/actions_tasks_objects/issue_2486_not_edit_object_aam.js @@ -0,0 +1,63 @@ +// Copyright (C) 2020 Intel Corporation +// +// SPDX-License-Identifier: MIT + +/// + +import { taskName, labelName } from '../../support/const'; + +context("Object can't be draggable/resizable in AAM", () => { + const issueId = '2486'; + const createRectangleShape2Points = { + points: 'By 2 Points', + type: 'Shape', + labelName: labelName, + firstX: 250, + firstY: 350, + secondX: 350, + secondY: 450, + }; + + let shapeXPos = 0; + + before(() => { + cy.openTaskJob(taskName); + }); + + describe(`Testing issue "${issueId}"`, () => { + it('Create, acttivate a object', () => { + cy.createRectangle(createRectangleShape2Points); + cy.get('#cvat_canvas_shape_1') + .should('not.have.class', 'cvat_canvas_shape_activated') + .trigger('mousemove') + .should('have.class', 'cvat_canvas_shape_activated'); + }); + + it('Go to AAM', () => { + cy.changeWorkspace('Attribute annotation', labelName); + cy.get('#cvat_canvas_shape_1') + .then((shape) => { + shapeXPos = Math.floor(shape.attr('x')); + }) + .trigger('mousemove') + .should('not.have.class', 'cvat_canvas_shape_activated'); + cy.get('circle').then((circle) => { + for (let i = 0; i < circle.length; i++) { + if (circle[i].id.match(/^SvgjsCircle\d+$/)) { + cy.get(circle[i]).should('not.exist'); // id='SvgjsCircleNNNN' should not exist. Because of this can't change the object size. + } + } + }); + }); + + it('Try to move/resize the object', () => { + cy.get('.cvat-canvas-container') + .trigger('mousedown', { button: 0 }) + .trigger('mousemove', 550, 251) + .trigger('mouseup'); + cy.get('#cvat_canvas_shape_1').then((shapeAam) => { + expect(shapeXPos).to.be.equal(Math.floor(shapeAam.attr('x'))); // The object didn't move. + }); + }); + }); +}); diff --git a/tests/cypress/support/commands.js b/tests/cypress/support/commands.js index b2b32607..22132e1f 100644 --- a/tests/cypress/support/commands.js +++ b/tests/cypress/support/commands.js @@ -499,6 +499,12 @@ Cypress.Commands.add('writeFilterValue', (clear, filterValue) => { }); }); +Cypress.Commands.add('goCheckFrameNumber', (frameNum) => { + cy.get('.cvat-player-frame-selector').within(() => { + cy.get('input[role="spinbutton"]').clear().type(`${frameNum}{Enter}`).should('have.value', frameNum); + }); +}); + Cypress.Commands.add('checkFrameNum', (frameNum) => { cy.get('.cvat-player-frame-selector').within(() => { cy.get('input[role="spinbutton"]').should('have.value', frameNum);