From 4379642bb0f01fbeb71384b47edb4e6e5df1fea4 Mon Sep 17 00:00:00 2001
From: Kruchinin <dmitryx.kruchinin@intel.com>
Date: Mon, 30 Nov 2020 11:51:57 +0300
Subject: [PATCH] Cypress test. Canvas grid feature.

---
 .../case_23_canvas_grid_feature.js            | 53 +++++++++++++++++++
 1 file changed, 53 insertions(+)
 create mode 100644 tests/cypress/integration/actions_tasks_objects/case_23_canvas_grid_feature.js

diff --git a/tests/cypress/integration/actions_tasks_objects/case_23_canvas_grid_feature.js b/tests/cypress/integration/actions_tasks_objects/case_23_canvas_grid_feature.js
new file mode 100644
index 00000000..92e2d303
--- /dev/null
+++ b/tests/cypress/integration/actions_tasks_objects/case_23_canvas_grid_feature.js
@@ -0,0 +1,53 @@
+// Copyright (C) 2020 Intel Corporation
+//
+// SPDX-License-Identifier: MIT
+
+/// <reference types="cypress" />
+
+import { taskName } from '../../support/const';
+
+context('Canvas color feature', () => {
+    const caseId = '23';
+    const settingsGridSize = 50;
+    const gridColor = 'Black';
+    const gridOpacity = 49;
+
+    before(() => {
+        cy.openTaskJob(taskName);
+    });
+
+    describe(`Testing case "${caseId}"`, () => {
+        it('Go to settings.', () => {
+            cy.openSettings();
+        });
+        it('Set "Show grid" to true.', () => {
+            cy.get('.cvat-player-settings-grid').click();
+        });
+        it('Set "Grid size" to 50.', () => {
+            cy.get('.cvat-player-settings-grid-size-input').within(() => {
+                cy.get('[role="spinbutton"]').clear().type(settingsGridSize);
+            });
+        });
+        it('Set "Grid color" to black.', () => {
+            cy.get('.cvat-player-settings-grid-color-input').click();
+            cy.get('.ant-select-dropdown')
+                .not('.ant-select-dropdown-hidden')
+                .contains(new RegExp(`^${gridColor}$`, 'g'))
+                .click();
+        });
+        it('Set "Grid opacity" to 49%.', () => {
+            cy.get('.cvat-player-settings-grid-opacity-input')
+                .click()
+                .within(() => {
+                    cy.get('[role="slider"]').should('have.attr', 'aria-valuenow', gridOpacity);
+                });
+        });
+        it('Canvas has grid drawn, it is black, cells are 50x50px and it has 49% opacity.', () => {
+            cy.get('#cvat_canvas_grid_pattern')
+                .should('exist') // expected <pattern#cvat_canvas_grid_pattern> to exist in the DOM
+                .and('have.attr', 'width', settingsGridSize) // expected to have attribute width with the value '50'
+                .and('have.attr', 'height', settingsGridSize) // expected to have attribute height with the value '50'
+                .and('have.attr', 'style', `stroke: ${gridColor.toLowerCase()}; opacity: ${gridOpacity / 100};`); // expected to have attribute style with the value stroke: black; opacity: 0.49;
+        });
+    });
+});