Cypress. Test for "Switch text font size and position". (#4027)

* Add className

* Update the test.

* Some reworks.

* Fix typo

* Revert changes in the case 36

* Move to a different test. Added check a text position

* Rework calculate the shape height

* Enabling the test for Firefox

Co-authored-by: dvkruchinin <dvkruchinin@gmail.com>

cvat-ui/src/components/header/settings-modal/workspace-settings.tsx

@@ -145,13 +145,23 @@ function WorkspaceSettingsComponent(props: Props): JSX.Element {
                     <Text>Font size of a text</Text>
                 </Col>
                 <Col span={12}>
-                    <Select value={textPosition} onChange={onChangeTextPosition}>
+                    <Select
+                        className='cvat-workspace-settings-text-position'
+                        value={textPosition}
+                        onChange={onChangeTextPosition}
+                    >
                         <Select.Option value='auto'>Auto</Select.Option>
                         <Select.Option value='center'>Center</Select.Option>
                     </Select>
                 </Col>
                 <Col span={12}>
-                    <InputNumber onChange={onChangeTextFontSize} min={8} max={20} value={textFontSize} />
+                    <InputNumber
+                        className='cvat-workspace-settings-text-size'
+                        onChange={onChangeTextFontSize}
+                        min={8}
+                        max={20}
+                        value={textFontSize}
+                    />
                 </Col>
             </Row>
             <Row className='cvat-workspace-settings-autoborders'>

tests/cypress/integration/actions_tasks2/case_111_settings_text_size_position.js

@@ -0,0 +1,126 @@
+// Copyright (C) 2021 Intel Corporation
+//
+// SPDX-License-Identifier: MIT
+
+/// <reference types="cypress" />
+
+import { taskName, labelName } from '../../support/const';
+
+context('Settings. Text size/position.', () => {
+    const caseId = '111';
+    const rectangleShape2Points = {
+        points: 'By 2 Points',
+        type: 'Shape',
+        labelName,
+        firstX: 100,
+        firstY: 100,
+        secondX: 500,
+        secondY: 300,
+    };
+    const polygonTrack = {
+        reDraw: false,
+        type: 'Track',
+        labelName,
+        pointsMap: [
+            { x: 100, y: 400 },
+            { x: 550, y: 400 },
+            { x: 550, y: 700 },
+            { x: 100, y: 700 },
+        ],
+        complete: true,
+        numberOfPoints: null,
+    };
+
+    function testTextPosition(shape, expectedPosition) {
+        let shapeLeftPosition = 0;
+        let shapeTopPosition = 0;
+        let shapeWidth = 0;
+        let shapeHeight = 0;
+        let textLeftPosition = 0;
+        let textTopPosition = 0;
+        let getText;
+
+        cy.get(shape).then(($shape) => {
+            shapeLeftPosition = Math.trunc($shape.position().left);
+            shapeTopPosition = Math.trunc($shape.position().top);
+            if (shape === '#cvat_canvas_shape_1') {
+                shapeWidth = $shape.attr('width');
+                shapeHeight = $shape.attr('height');
+            } else {
+                const points = $shape.attr('points').split(' ');
+                shapeWidth = +points[1].split(',')[0] - +points[0].split(',')[0];
+                shapeHeight = +points[2].split(',')[1] - +points[0].split(',')[1];
+            }
+            if (shape === '#cvat_canvas_shape_1') {
+                getText = cy.get('.cvat_canvas_text').first();
+            } else {
+                getText = cy.get('.cvat_canvas_text').last();
+            }
+            getText.then(($text) => {
+                textLeftPosition = Math.trunc($text.position().left);
+                textTopPosition = Math.trunc($text.position().top);
+                if (expectedPosition === 'outside') {
+                    // Text outside the shape of the right. Slightly below the shape upper edge.
+                    expect(+shapeLeftPosition + +shapeWidth).lessThan(+textLeftPosition);
+                    expect(+textTopPosition).to.be.within(+shapeTopPosition, +shapeTopPosition + 10);
+                } else {
+                    // Text inside the shape
+                    expect(+shapeLeftPosition + +shapeWidth / 2).greaterThan(+textLeftPosition);
+                    expect(+shapeTopPosition + +shapeHeight / 2).greaterThan(+textTopPosition);
+                }
+            });
+        });
+    }
+
+    before(() => {
+        cy.openTaskJob(taskName);
+        cy.createRectangle(rectangleShape2Points);
+        cy.createPolygon(polygonTrack);
+
+        // Always show object details
+        cy.openSettings();
+        cy.get('.cvat-settings-modal').within(() => {
+            cy.contains('Workspace').click();
+            cy.get('.cvat-workspace-settings-show-text-always').within(() => {
+                cy.get('[type="checkbox"]').check();
+            });
+        });
+        cy.closeSettings();
+    });
+
+    describe(`Testing case "${caseId}"`, () => {
+        it('Text position.', () => {
+            testTextPosition('#cvat_canvas_shape_1', 'outside');
+            testTextPosition('#cvat_canvas_shape_2', 'outside');
+
+            // Change the text position
+            cy.openSettings();
+            cy.get('.cvat-workspace-settings-text-position')
+                .find('[title="Auto"]')
+                .click();
+            cy.get('.ant-select-dropdown')
+                .not('.ant-select-dropdown-hidden')
+                .find('[title="Center"]')
+                .click();
+            cy.closeSettings();
+
+            testTextPosition('#cvat_canvas_shape_1', 'inside');
+            testTextPosition('#cvat_canvas_shape_2', 'inside');
+        });
+
+        it('Text font size.', () => {
+            cy.get('.cvat_canvas_text').should('have.attr', 'style', 'font-size: 14px;');
+            cy.openSettings();
+
+            // Change the text size to 16
+            cy.get('.cvat-workspace-settings-text-size')
+                .find('input')
+                .should('have.attr', 'value', '14')
+                .clear()
+                .type('16')
+                .should('have.attr', 'value', '16');
+            cy.closeSettings();
+            cy.get('.cvat_canvas_text').should('have.attr', 'style', 'font-size: 16px;');
+        });
+    });
+});