Cypress test for actions on rectangle. (#2212)

* Cypress test for actions on rectangle.

* Apply comments

Rename "createShape" command to "createRectangle"
and remove "createTrack" (combining 2 commands into one).
Adaptation of tests.

Co-authored-by: Dmitry Kruchinin <dmitryx.kruchinin@intel.com>

tests/cypress/integration/case_8_rectangle_shape_track_label.js

@@ -0,0 +1,166 @@
+/*
+ * Copyright (C) 2020 Intel Corporation
+ *
+ * SPDX-License-Identifier: MIT
+ */
+
+/// <reference types="cypress" />
+
+context('Actions on rectangle', () => {
+
+    const caseId = '8'
+    const labelName = `Case ${caseId}`
+    const taskName = `New annotation task for ${labelName}`
+    const attrName = `Attr for ${labelName}`
+    const textDefaultValue = 'Some default value for type Text'
+    const imageFileName = `image_${labelName.replace(' ', '_').toLowerCase()}`
+    const image = `${imageFileName}.png`
+    const newLabelName = `New ${labelName}`
+    const width = 800
+    const height = 800
+    const posX = 10
+    const posY = 10
+    const color = 'gray'
+    const createRectangleShape2Points = {
+        points: 'By 2 Points',
+        type: 'Shape',
+        switchLabel: false,
+        firstX: 250,
+        firstY: 350,
+        secondX: 350,
+        secondY: 450
+    }
+    const createRectangleShape4Points = {
+        points: 'By 4 Points',
+        type: 'Shape',
+        switchLabel: false,
+        firstX: 400,
+        firstY: 350,
+        secondX: 500,
+        secondY: 350,
+        thirdX:  500,
+        thirdY: 450,
+        fourthX: 400,
+        fourthY: 450
+    }
+    const createRectangleTrack2Points = {
+        points: 'By 2 Points',
+        type: 'Track',
+        switchLabel: false,
+        firstX: createRectangleShape2Points.firstX,
+        firstY: createRectangleShape2Points.firstY - 150,
+        secondX: createRectangleShape2Points.secondX,
+        secondY: createRectangleShape2Points.secondY -150
+    }
+    const createRectangleTrack4Points = {
+        points: 'By 4 Points',
+        type: 'Track',
+        switchLabel: false,
+        firstX: createRectangleShape4Points.firstX,
+        firstY: createRectangleShape4Points.firstY - 150,
+        secondX: createRectangleShape4Points.secondX - 100,
+        secondY: createRectangleShape4Points.secondY - 50,
+        thirdX: createRectangleShape4Points.thirdX,
+        thirdY: createRectangleShape4Points.thirdY - 150,
+        fourthX: createRectangleShape4Points.fourthX,
+        fourthY: createRectangleShape4Points.fourthY - 150
+    }
+    const createRectangleShape2PointsNewLabel = {
+        labelName: newLabelName,
+        points: 'By 2 Points',
+        type: 'Shape',
+        switchLabel: true,
+        firstX: createRectangleShape2Points.firstX,
+        firstY: createRectangleShape2Points.firstY + 150,
+        secondX: createRectangleShape2Points.secondX,
+        secondY: createRectangleShape2Points.secondY + 150
+    }
+    const createRectangleShape4PointsNewLabel = {
+        labelName: newLabelName,
+        points: 'By 4 Points',
+        type: 'Shape',
+        switchLabel: true,
+        firstX: createRectangleShape4Points.firstX,
+        firstY: createRectangleShape4Points.firstY + 150,
+        secondX: createRectangleShape4Points.secondX,
+        secondY: createRectangleShape4Points.secondY + 150,
+        thirdX:  createRectangleShape4Points.thirdX,
+        thirdY: createRectangleShape4Points.thirdY + 150,
+        fourthX: createRectangleShape4Points.fourthX,
+        fourthY: createRectangleShape4Points.fourthY + 150
+    }
+
+    before(() => {
+        cy.visit('auth/login')
+        cy.login()
+        cy.imageGenerator('cypress/fixtures', image, width, height, color, posX, posY, labelName)
+        cy.createAnnotationTask(taskName, labelName, attrName, textDefaultValue, image)
+        cy.openTask(taskName)
+    })
+
+    describe(`Testing case "${caseId}"`, () => {
+        it('Add new label', () => {
+            cy.contains('button', 'Add label').click()
+            cy.get('[placeholder="Label name"]').type(newLabelName)
+            cy.contains('button', 'Done').click()
+        })
+        it('Open a job', () => {
+            cy.openJob()
+        })
+        it('Draw a rectangle shape in two ways (by 2 points, by 4 points)', () => {
+            cy.createRectangle(createRectangleShape2Points)
+            cy.get('#cvat_canvas_shape_1')
+            .should('exist').and('be.visible')
+            cy.get('#cvat-objects-sidebar-state-item-1')
+            .should('contain', '1').and('contain', 'RECTANGLE SHAPE').within(() => {
+                cy.get('.ant-select-selection-selected-value')
+                .should('contain', labelName)
+            })
+            cy.createRectangle(createRectangleShape4Points)
+            cy.get('#cvat_canvas_shape_2')
+            .should('exist').and('be.visible')
+            cy.get('#cvat-objects-sidebar-state-item-2')
+            .should('contain', '2').and('contain', 'RECTANGLE SHAPE').within(() => {
+                cy.get('.ant-select-selection-selected-value')
+                .should('contain', labelName)
+            })
+        })
+        it('Draw a rectangle track in two ways (by 2 points, by 4 points)', () => {
+            cy.createRectangle(createRectangleTrack2Points)
+            cy.get('#cvat_canvas_shape_3')
+            .should('exist').and('be.visible')
+            cy.get('#cvat-objects-sidebar-state-item-3')
+            .should('contain', '3').and('contain', 'RECTANGLE TRACK').within(() => {
+                cy.get('.ant-select-selection-selected-value')
+                .should('contain', labelName)
+            })
+            cy.createRectangle(createRectangleTrack4Points)
+            cy.get('#cvat_canvas_shape_4')
+            .should('exist').and('be.visible')
+            cy.get('#cvat-objects-sidebar-state-item-4')
+            .should('contain', '4').and('contain', 'RECTANGLE TRACK').within(() => {
+                cy.get('.ant-select-selection-selected-value')
+                .should('contain', labelName)
+            })
+        })
+        it('Draw a new rectangle shape in two ways (by 2 points, by 4 points) with second label', () => {
+            cy.createRectangle(createRectangleShape2PointsNewLabel)
+            cy.get('#cvat_canvas_shape_5')
+            .should('exist').and('be.visible')
+            cy.get('#cvat-objects-sidebar-state-item-5')
+            .should('contain', '5').and('contain', 'RECTANGLE SHAPE').within(() => {
+                cy.get('.ant-select-selection-selected-value')
+                .should('contain', newLabelName)
+            })
+            cy.createRectangle(createRectangleShape4PointsNewLabel)
+            cy.get('#cvat_canvas_shape_6')
+            .should('exist').and('be.visible')
+            cy.get('#cvat-objects-sidebar-state-item-6')
+            .should('contain', '6').and('contain', 'RECTANGLE SHAPE').within(() => {
+                cy.get('.ant-select-selection-selected-value')
+                .should('contain', newLabelName)
+            })
+
+        })
+    })
+})

tests/cypress/integration/issue_1216_Check_if_UI_not_fails_with_shape_dragging_over_sidebar.js

@@ -19,6 +19,24 @@ context('Check if UI not fails with shape dragging over sidebar', () => {
     const posX = 10
     const posY = 10
     const color = 'gray'
+    const createRectangleShape2Points = {
+        points: 'By 2 Points',
+        type: 'Shape',
+        switchLabel: false,
+        firstX: 250,
+        firstY: 350,
+        secondX: 350,
+        secondY: 450
+    }
+    const createRectangleShape2PointsSecond = {
+        points: 'By 2 Points',
+        type: 'Shape',
+        switchLabel: false,
+        firstX: createRectangleShape2Points.firstX,
+        firstY: createRectangleShape2Points.firstY - 150,
+        secondX: createRectangleShape2Points.secondX,
+        secondY: createRectangleShape2Points.secondY -150
+    }
 
     before(() => {
         cy.visit('auth/login')
@@ -32,8 +50,8 @@ context('Check if UI not fails with shape dragging over sidebar', () => {
         it('Create multiple objects', () => {
             /* The error was repeated when the number of
             objects was more than or equal to 2 */
-            cy.createShape(309, 431, 409, 531)
+            cy.createRectangle(createRectangleShape2Points)
-            cy.createShape(200, 300, 300, 400)
+            cy.createRectangle(createRectangleShape2PointsSecond)
         })
         it('Shape dragging over sidebar.', () => {
             /*To reproduce the error, move the any shape under any

tests/cypress/integration/issue_1425_highlighted_attribute_correspond_chosen_attribute.js

@@ -25,6 +25,15 @@ context('The highlighted attribute in AAM should correspond to the chosen attrib
         typeAttribute: 'Text'
     }
     let textValue = ''
+    const createRectangleShape2Points = {
+        points: 'By 2 Points',
+        type: 'Shape',
+        switchLabel: false,
+        firstX: 250,
+        firstY: 350,
+        secondX: 350,
+        secondY: 450
+    }
 
     before(() => {
         cy.visit('auth/login')
@@ -36,7 +45,7 @@ context('The highlighted attribute in AAM should correspond to the chosen attrib
         it('Create a task with multiple attributes, create a object', () => {
             cy.createAnnotationTask(taskName, labelName, attrName, textDefaultValue, image, multiAttrParams)
             cy.openTaskJob(taskName)
-            cy.createShape(309, 431, 616, 671)
+            cy.createRectangle(createRectangleShape2Points)
         })
         it('Go to AAM', () => {
             cy.changeAnnotationMode('Attribute annotation')

tests/cypress/integration/issue_1429_check_new_label.js

@@ -20,6 +20,15 @@ context('Check if the new label reflects in the options', () => {
     const posX = 10
     const posY = 10
     const color = 'gray'
+    const createRectangleShape2Points = {
+        points: 'By 2 Points',
+        type: 'Shape',
+        switchLabel: false,
+        firstX: 250,
+        firstY: 350,
+        secondX: 350,
+        secondY: 450
+    }
 
     before(() => {
         cy.visit('auth/login')
@@ -44,8 +53,8 @@ context('Check if the new label reflects in the options', () => {
         it('Open the job again', () => {
             cy.openJob()
         })
-        it('Create a shape', () => {
+        it('Create a rectangle shape', () => {
-            cy.createShape(309, 431, 616, 671)
+            cy.createRectangle(createRectangleShape2Points)
         })
         it('Checking for the new label', () => {
             cy.get('#cvat-objects-sidebar-state-item-1')

tests/cypress/integration/issue_1433_hide_functionality.js

@@ -19,6 +19,15 @@ context('Check hide functionality (H)', () => {
     const posX = 10
     const posY = 10
     const color = 'gray'
+    const createRectangleShape2Points = {
+        points: 'By 2 Points',
+        type: 'Shape',
+        switchLabel: false,
+        firstX: 250,
+        firstY: 350,
+        secondX: 350,
+        secondY: 450
+    }
 
     before(() => {
         cy.visit('auth/login')
@@ -26,7 +35,7 @@ context('Check hide functionality (H)', () => {
         cy.imageGenerator('cypress/fixtures', image, width, height, color, posX, posY, labelName)
         cy.createAnnotationTask(taskName, labelName, attrName, textDefaultValue, image)
         cy.openTaskJob(taskName)
-        cy.createShape(309, 431, 616, 671)
+        cy.createRectangle(createRectangleShape2Points)
     })
 
     describe(`Testing issue "${issueId}"`, () => {

tests/cypress/integration/issue_1438_cancel_multiple_paste_ui_not_lock.js

@@ -19,6 +19,15 @@ context('Cancel "multiple paste". UI is not locked.', () => {
     const posX = 10
     const posY = 10
     const color = 'gray'
+    const createRectangleShape2Points = {
+        points: 'By 2 Points',
+        type: 'Shape',
+        switchLabel: false,
+        firstX: 250,
+        firstY: 350,
+        secondX: 350,
+        secondY: 450
+    }
 
     before(() => {
         cy.visit('auth/login')
@@ -26,7 +35,7 @@ context('Cancel "multiple paste". UI is not locked.', () => {
         cy.imageGenerator('cypress/fixtures', image, width, height, color, posX, posY, labelName)
         cy.createAnnotationTask(taskName, labelName, attrName, textDefaultValue, image)
         cy.openTaskJob(taskName)
-        cy.createShape(309, 431, 616, 671)
+        cy.createRectangle(createRectangleShape2Points)
     })
 
     describe(`Testing issue "${issueId}"`, () => {

tests/cypress/integration/issue_1439_blocked_object_info.js

@@ -19,6 +19,24 @@ context('Information about a blocked object disappears if hover the cursor over
     const posX = 10
     const posY = 10
     const color = 'gray'
+    const createRectangleShape2Points = {
+        points: 'By 2 Points',
+        type: 'Shape',
+        switchLabel: false,
+        firstX: 250,
+        firstY: 350,
+        secondX: 350,
+        secondY: 450
+    }
+    const createRectangleShape2PointsSecond = {
+        points: 'By 2 Points',
+        type: 'Shape',
+        switchLabel: false,
+        firstX: createRectangleShape2Points.firstX,
+        firstY: createRectangleShape2Points.firstY - 150,
+        secondX: createRectangleShape2Points.secondX,
+        secondY: createRectangleShape2Points.secondY -150
+    }
 
     before(() => {
         cy.visit('auth/login')
@@ -30,8 +48,8 @@ context('Information about a blocked object disappears if hover the cursor over
 
     describe(`Testing issue "${issueId}"`, () => {
         it('Create multiple objects', () => {
-            cy.createShape(309, 431, 409, 531)
+            cy.createRectangle(createRectangleShape2Points)
-            cy.createShape(200, 300, 300, 400)
+            cy.createRectangle(createRectangleShape2PointsSecond)       
         })
         it('Lock all objects', () => {
             cy.get('.cvat-objects-sidebar-states-header')

tests/cypress/integration/issue_1444_filter_property_shape.js

@@ -19,6 +19,15 @@ context('Filter property "shape" work correctly', () => {
     const posX = 10
     const posY = 10
     const color = 'white'
+    const createRectangleShape2Points = {
+        points: 'By 2 Points',
+        type: 'Shape',
+        switchLabel: false,
+        firstX: 250,
+        firstY: 350,
+        secondX: 350,
+        secondY: 450
+    }
 
     before(() => {
         cy.visit('auth/login')
@@ -29,8 +38,8 @@ context('Filter property "shape" work correctly', () => {
     })
 
     describe(`Testing issue "${issueId}"`, () => {
-        it('Create a shape', () => {
+        it('Create a rectangle shape', () => {
-            cy.createShape(309, 431, 616, 671)
+            cy.createRectangle(createRectangleShape2Points)
             cy.get('#cvat-objects-sidebar-state-item-1')
             .should('contain', '1').and('contain', 'RECTANGLE SHAPE')
         })

tests/cypress/integration/issue_1750_err_aam_switch_frames.js

@@ -25,6 +25,24 @@ context('An error occurs in AAM when switching to 2 frames, if the frames have o
     const archivePath = `cypress/fixtures/${archiveName}`
     const imagesFolder = `cypress/fixtures/image_issue_${issueId}`
     const directoryToArchive = imagesFolder
+    const createRectangleShape2Points = {
+        points: 'By 2 Points',
+        type: 'Shape',
+        switchLabel: false,
+        firstX: 250,
+        firstY: 350,
+        secondX: 350,
+        secondY: 450
+    }
+    const createRectangleShape2PointsSecond = {
+        points: 'By 2 Points',
+        type: 'Shape',
+        switchLabel: false,
+        firstX: createRectangleShape2Points.firstX,
+        firstY: createRectangleShape2Points.firstY - 150,
+        secondX: createRectangleShape2Points.secondX,
+        secondY: createRectangleShape2Points.secondY -150
+    }
 
     before(() => {
         cy.visit('auth/login')
@@ -39,8 +57,8 @@ context('An error occurs in AAM when switching to 2 frames, if the frames have o
 
     describe(`Testing issue "${issueId}"`, () => {
         it('Create multiple objects', () => {
-            cy.createShape(309, 431, 409, 531)
+            cy.createRectangle(createRectangleShape2Points)
-            cy.createShape(200, 300, 300, 400)
+            cy.createRectangle(createRectangleShape2PointsSecond)
         })
         it('Go to AAM', () => {
             cy.get('.cvat-workspace-selector')

tests/cypress/integration/issue_1785_propagation_latest_frame.js

@@ -25,6 +25,15 @@ context('Check propagation work from the latest frame', () => {
     const archivePath = `cypress/fixtures/${archiveName}`
     const imagesFolder = `cypress/fixtures/image_issue_${issueId}`
     const directoryToArchive = imagesFolder
+    const createRectangleShape2Points = {
+        points: 'By 2 Points',
+        type: 'Shape',
+        switchLabel: false,
+        firstX: 250,
+        firstY: 350,
+        secondX: 350,
+        secondY: 450
+    }
 
     before(() => {
         cy.visit('auth/login')
@@ -46,8 +55,8 @@ context('Check propagation work from the latest frame', () => {
                 .should('have.value', '2')
             })
         })
-        it('Create a shape', () => {
+        it('Create a rectangle shape', () => {
-            cy.createShape(309, 431, 616, 671)
+            cy.createRectangle(createRectangleShape2Points)
         })
         it('Try to propagate', () => {
             cy.get('#cvat_canvas_shape_1').trigger('mousemove')

tests/cypress/integration/issue_1819_first_part_splitted_track_visible.js

@@ -25,6 +25,15 @@ context('First part of a splitted track is visible', () => {
     const archivePath = `cypress/fixtures/${archiveName}`
     const imagesFolder = `cypress/fixtures/image_issue_${issueId}`
     const directoryToArchive = imagesFolder
+    const createRectangleTrack2Points = {
+        points: 'By 2 Points',
+        type: 'Track',
+        switchLabel: false,
+        firstX: 250,
+        firstY: 350,
+        secondX: 350,
+        secondY: 450
+    }
 
     before(() => {
         cy.visit('auth/login')
@@ -38,8 +47,8 @@ context('First part of a splitted track is visible', () => {
     })
 
     describe(`Testing issue "${issueId}"`, () => {
-        it('Create a track', () => {
+        it('Create a rectangle track', () => {
-            cy.createTrack(309, 431, 616, 671)
+            cy.createRectangle(createRectangleTrack2Points)
         })
         it('Go next with a step', () => {
             cy.get('.cvat-player-forward-button')

tests/cypress/integration/issue_1870_cursor_not_jump_to_end.js

@@ -20,6 +20,15 @@ context('Checks that the cursor doesn\'t automatically jump to the end of a word
     const posX=10
     const posY=10
     const color='gray'
+    const createRectangleShape2Points = {
+        points: 'By 2 Points',
+        type: 'Shape',
+        switchLabel: false,
+        firstX: 250,
+        firstY: 350,
+        secondX: 350,
+        secondY: 450
+    }
 
     before(() => {
         cy.visit('auth/login')
@@ -27,7 +36,7 @@ context('Checks that the cursor doesn\'t automatically jump to the end of a word
         cy.imageGenerator('cypress/fixtures', image, width, height, color, posX, posY, labelName)
         cy.createAnnotationTask(taskName, labelName, attrName, textDefaultValue, image)
         cy.openTaskJob(taskName)
-        cy.createShape(309, 431, 616, 671)
+        cy.createRectangle(createRectangleShape2Points)
     })
 
     describe(`Testing issue "${issueId}"`, () => {

tests/cypress/integration/issue_1919_check_text_attr.js

@@ -20,6 +20,15 @@ context('Check label attribute changes', () => {
     const posX = 10
     const posY = 10
     const color = 'gray'
+    const createRectangleShape2Points = {
+        points: 'By 2 Points',
+        type: 'Shape',
+        switchLabel: false,
+        firstX: 250,
+        firstY: 350,
+        secondX: 350,
+        secondY: 450
+    }
 
     before(() => {
         cy.visit('auth/login')
@@ -27,7 +36,7 @@ context('Check label attribute changes', () => {
         cy.imageGenerator('cypress/fixtures', image, width, height, color, posX, posY, labelName)
         cy.createAnnotationTask(taskName, labelName, attrName, textDefaultValue, image)
         cy.openTaskJob(taskName)
-        cy.createShape(309, 431, 616, 671)
+        cy.createRectangle(createRectangleShape2Points)
     })
 
     describe(`Testing issue "${issueId}"`, () => {

tests/cypress/integration/pr_1370_check_UI_fail_with_object_dragging_and_go_next_frame.js

@@ -27,6 +27,15 @@ context('Check if the UI fails by moving to the next frame while dragging the ob
     const archivePath = `cypress/fixtures/${archiveName}`
     const imagesFolder = `cypress/fixtures/image_issue_${prId}`
     const directoryToArchive = imagesFolder
+    const createRectangleShape2Points = {
+        points: 'By 2 Points',
+        type: 'Shape',
+        switchLabel: false,
+        firstX: 250,
+        firstY: 350,
+        secondX: 350,
+        secondY: 450
+    }
 
     before(() => {
         cy.visit('auth/login')
@@ -41,7 +50,7 @@ context('Check if the UI fails by moving to the next frame while dragging the ob
 
     describe(`Testing PR "${prId}"`, () => {
         it('Create object', () => {
-            cy.createShape(200, 300, 300, 400)
+            cy.createRectangle(createRectangleShape2Points)
         })
         it('Start object dragging and go to next frame (F).', () => {
             cy.get('#cvat_canvas_shape_1')

tests/cypress/support/commands.js

@@ -88,28 +88,37 @@ Cypress.Commands.add('openTaskJob', (taskName, jobNumber=0) => {
     cy.openJob(jobNumber)
 })
 
-Cypress.Commands.add('createShape', (firstX, firstY, lastX, lastY) => {
+Cypress.Commands.add('createRectangle', (createRectangleParams) => {
     cy.get('.cvat-draw-rectangle-control').click()
+    if (createRectangleParams.switchLabel) {
+        cy.switchLabel(createRectangleParams.labelName)
+    }
+    cy.get('.cvat-draw-shape-popover-content')
+    .contains(createRectangleParams.points)
+    .click()
     cy.get('.cvat-draw-shape-popover-content')
     .find('button')
-    .contains('Shape')
+    .contains(createRectangleParams.type)
     .click({force: true})
     cy.get('.cvat-canvas-container')
-    .click(firstX, firstY)
+    .click(createRectangleParams.firstX, createRectangleParams.firstY)
     cy.get('.cvat-canvas-container')
-    .click(lastX, lastY)
+    .click(createRectangleParams.secondX, createRectangleParams.secondY)
+    if (createRectangleParams.points === 'By 4 Points') {
+        cy.get('.cvat-canvas-container')
+        .click(createRectangleParams.thirdX, createRectangleParams.thirdY)
+        cy.get('.cvat-canvas-container')
+        .click(createRectangleParams.fourthX, createRectangleParams.fourthY)
+    }
 })
 
-Cypress.Commands.add('createTrack', (firstX, firstY, lastX, lastY) => {
+Cypress.Commands.add('switchLabel', (labelName) => {
-    cy.get('.cvat-draw-rectangle-control').click()
     cy.get('.cvat-draw-shape-popover-content')
-    .find('button')
+    .find('.ant-select-selection-selected-value')
-    .contains('Track')
+    .click()
-    .click({force: true})
+    cy.get('.ant-select-dropdown-menu')
-    cy.get('.cvat-canvas-container')
+    .contains(labelName)
-    .click(firstX, firstY)
+    .click()
-    cy.get('.cvat-canvas-container')
-    .click(lastX, lastY)
 })
 
 Cypress.Commands.add('createPoint', (posX, posY, type='Shape') => {