Merge pull request #2512 from dvkruchinin/dkru/cypress-test-issue-2485

Cypress test. Issue 2485.

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 = (
-            <Icon className='cvat-player-previous-button' component={PreviousFilteredIcon} onClick={onPrevFrame} />
+            <Icon
+                className='cvat-player-previous-button-filtered'
+                component={PreviousFilteredIcon}
+                onClick={onPrevFrame}
+            />
         );
         prevButtonTooltipMessage = prevFilteredText;
     } else if (prevButtonType === 'empty') {
         prevButton = (
-            <Icon className='cvat-player-previous-button' component={PreviousEmptyIcon} onClick={onPrevFrame} />
+            <Icon className='cvat-player-previous-button-empty' component={PreviousEmptyIcon} onClick={onPrevFrame} />
         );
         prevButtonTooltipMessage = prevEmptyText;
     }
@@ -90,11 +94,11 @@ function PlayerButtons(props: Props): JSX.Element {
     let nextButtonTooltipMessage = nextRegularText;
     if (nextButtonType === 'filtered') {
         nextButton = (
-            <Icon className='cvat-player-previous-button' component={NextFilteredIcon} onClick={onNextFrame} />
+            <Icon className='cvat-player-next-button-filtered' component={NextFilteredIcon} onClick={onNextFrame} />
         );
         nextButtonTooltipMessage = nextFilteredText;
     } else if (nextButtonType === 'empty') {
-        nextButton = <Icon className='cvat-player-previous-button' component={NextEmptyIcon} onClick={onNextFrame} />;
+        nextButton = <Icon className='cvat-player-next-button-empty' component={NextEmptyIcon} onClick={onNextFrame} />;
         nextButtonTooltipMessage = nextEmptyText;
     }
 

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')

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

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