Cypress test. Navigation to empty frames.

Added some classes requared for test.
Updated version.

cvat-ui/package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "cvat-ui",
-  "version": "1.11.1",
+  "version": "1.11.2",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {

cvat-ui/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cvat-ui",
-  "version": "1.11.1",
+  "version": "1.11.2",
   "description": "CVAT single-page application",
   "main": "src/index.tsx",
   "scripts": {

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/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.checkFrameNumber(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.checkFrameNumber(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.checkFrameNumber(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.checkFrameNumber(5);
+            cy.get('.cvat_canvas_shape').should('not.exist');
+        });
+    });
+});

tests/cypress/support/commands.js

@@ -490,3 +490,15 @@ Cypress.Commands.add('writeFilterValue', (clear, filterValue) => {
             cy.get('.ant-select-selection__choice__content').should('have.text', 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('checkFrameNumber', (frameNum) => {
+    cy.get('.cvat-player-frame-selector').within(() => {
+        cy.get('[role="spinbutton"]').should('have.value', frameNum);
+    });
+});