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 db1bb4a8..c17c940a 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/tests/cypress/integration/actions_tasks_objects/case_13_merge_split_features.js b/tests/cypress/integration/actions_tasks_objects/case_13_merge_split_features.js index 2588b646..3a1fa29f 100644 --- a/tests/cypress/integration/actions_tasks_objects/case_13_merge_split_features.js +++ b/tests/cypress/integration/actions_tasks_objects/case_13_merge_split_features.js @@ -35,15 +35,9 @@ context('Merge/split features', () => { 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 61863a37..907df914 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); @@ -35,14 +43,13 @@ context('Canvas grid feature', () => { .contains(new RegExp(`^${gridColor}$`, 'g')) .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(() => { @@ -53,7 +60,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_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 824be82b..aa48a82f 100644 --- a/tests/cypress/support/commands.js +++ b/tests/cypress/support/commands.js @@ -491,6 +491,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);