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/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/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);