Merge pull request #2508 from DmitriyOparin/upstream/do/cypress_test_case_22_tag_annotation_mode

Cypress test. Tag annotation mode

cvat-ui/package-lock.json

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

cvat-ui/package.json

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

cvat-ui/src/components/annotation-page/tag-annotation-workspace/styles.scss

@@ -33,7 +33,7 @@
 }
 
 .cvat-tag-annotation-sidebar-buttons,
-.cvat-tag-anntation-sidebar-checkbox-skip-frame {
+.cvat-tag-annotation-sidebar-checkbox-skip-frame {
     padding-bottom: 15px;
 }
 

cvat-ui/src/components/annotation-page/tag-annotation-workspace/tag-annotation-sidebar/tag-annotation-sidebar.tsx

@@ -227,7 +227,7 @@ function TagAnnotationSidebar(props: StateToProps & DispatchToProps): JSX.Elemen
                         <Button onClick={onChangeFrame}>Skip frame</Button>
                     </Col>
                 </Row>
-                <Row type='flex' className='cvat-tag-anntation-sidebar-checkbox-skip-frame'>
+                <Row type='flex' className='cvat-tag-annotation-sidebar-checkbox-skip-frame'>
                     <Col>
                         <Checkbox
                             checked={skipFrame}
@@ -239,11 +239,12 @@ function TagAnnotationSidebar(props: StateToProps & DispatchToProps): JSX.Elemen
                         </Checkbox>
                     </Col>
                 </Row>
-                <Row type='flex' justify='start'>
+                <Row type='flex' justify='start' className='cvat-tag-annotation-sidebar-frame-tags'>
                     <Col>
                         <Text strong>Frame tags:&nbsp;</Text>
                         {frameTags.map((tag: any) => (
                             <Tag
+                                className={'cvat-tag-annotation-sidebar-frame-tag-label'}
                                 color={tag.label.color}
                                 onClose={() => {
                                     onRemoveState(tag);

tests/cypress/integration/actions_tasks_objects/case_22_tag_annotation_mode.js

@@ -0,0 +1,80 @@
+// Copyright (C) 2020 Intel Corporation
+//
+// SPDX-License-Identifier: MIT
+
+/// <reference types="cypress" />
+
+import { taskName, labelName } from '../../support/const';
+
+context('Tag annotation mode.', () => {
+    const caseId = '22';
+
+    function checkCountFrameTags(countTags) {
+        if (countTags == 0) {
+            cy.get('span.cvat-tag-annotation-sidebar-frame-tag-label').should('not.exist');
+        } else {
+            cy.get('span.cvat-tag-annotation-sidebar-frame-tag-label').should('have.length', countTags);
+        };
+    };
+
+    function checkPresenceFrameTags(labelName) {
+        cy.get('.cvat-tag-annotation-sidebar-frame-tags').within(() => {
+            cy.get('span.cvat-tag-annotation-sidebar-frame-tag-label').contains(labelName).should('exist');
+        });
+    };
+
+    function addTag() {
+        cy.get('.cvat-tag-annotation-sidebar-buttons').contains('Add tag').click();
+    };
+
+    function skipFrame() {
+        cy.get('.cvat-tag-annotation-sidebar-buttons').contains('Skip frame').click();
+    };
+
+    function changeCheckboxAutomaticallyGoToNextFrame(value) {
+        cy.get('.cvat-tag-annotation-sidebar-checkbox-skip-frame').within(() => {
+            if (value == "check") {
+                cy.get('[type="checkbox"]').check();
+            } else if (value == "uncheck") {
+                cy.get('[type="checkbox"]').uncheck();
+            };
+        });
+    };
+
+    before(() => {
+        cy.openTaskJob(taskName);
+    });
+
+    describe(`Testing case "${caseId}"`, () => {
+        it('Go to tag annotation', () => {
+            cy.changeWorkspace('Tag annotation', labelName);
+            checkCountFrameTags(0);
+        });
+
+        it('Skip frame', () => {
+            skipFrame();
+            cy.checkFrameNum(1);
+            checkCountFrameTags(0);
+            cy.goToPreviousFrame(0);
+            checkCountFrameTags(0);
+        });
+
+        it('Add tag', () => {
+            addTag();
+            checkCountFrameTags(1);
+            checkPresenceFrameTags(labelName);
+        });
+
+        it('Set "Automatically go to the next frame" to true and add tag', () => {
+            cy.goToNextFrame(1);
+            checkCountFrameTags(0);
+            changeCheckboxAutomaticallyGoToNextFrame("check");
+            addTag();
+            cy.checkFrameNum(2);
+            checkCountFrameTags(0);
+            cy.goToPreviousFrame(1);
+            checkCountFrameTags(1);
+            checkPresenceFrameTags(labelName);
+        });
+    });
+});

tests/cypress/support/commands.js

@@ -490,3 +490,19 @@ Cypress.Commands.add('writeFilterValue', (clear, filterValue) => {
             cy.get('.ant-select-selection__choice__content').should('have.text', filterValue);
         });
 });
+
+Cypress.Commands.add('checkFrameNum', (frameNum) => {
+    cy.get('.cvat-player-frame-selector').within(() => {
+        cy.get('input[role="spinbutton"]').should('have.value', frameNum);
+    });
+});
+
+Cypress.Commands.add('goToNextFrame', (expectedFrameNum) => {
+    cy.get('.cvat-player-next-button').click();
+    cy.checkFrameNum(expectedFrameNum);
+});
+
+Cypress.Commands.add('goToPreviousFrame', (expectedFrameNum) => {
+    cy.get('.cvat-player-previous-button').click();
+    cy.checkFrameNum(expectedFrameNum);
+});