Cypress test. Saving settings to local storage. (#3040)

* Cypress test. Saving setting to local storage.

* Add css classes

* Add cypress command

* Updating the test

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

@@ -39,6 +39,7 @@ const SettingsModal = (props: SettingsModalProps): JSX.Element => {
         localStorage.setItem('clientSettings', JSON.stringify(settingsForSaving));
         notification.success({
             message: 'Settings was successfully saved',
+            className: 'cvat-notification-notice-save-settings-success',
         });
     };
 
@@ -62,6 +63,7 @@ const SettingsModal = (props: SettingsModalProps): JSX.Element => {
         } catch {
             notification.error({
                 message: 'Failed to load settings from local storage',
+                className: 'cvat-notification-notice-load-settings-fail',
             });
         }
     }, []);

tests/cypress/integration/actions_tasks_objects/case_68_saving_settings_local_storage.js

@@ -0,0 +1,44 @@
+// Copyright (C) 2021 Intel Corporation
+//
+// SPDX-License-Identifier: MIT
+
+/// <reference types="cypress" />
+
+import { taskName } from '../../support/const';
+
+context('Saving setting to local storage.', () => {
+    const caseId = '68';
+
+    function testCheckedSettings(checked) {
+        cy.openSettings();
+        cy.contains('[role="tab"]', 'Workspace').click();
+        for (const ws of [
+            '.cvat-workspace-settings-show-interpolated',
+            '.cvat-workspace-settings-show-text-always',
+            '.cvat-workspace-settings-autoborders',
+        ]) {
+            checked
+                ? cy.get(ws).find('[type="checkbox"]').should('be.checked')
+                : cy.get(ws).find('[type="checkbox"]').should('not.be.checked').check().should('be.checked');
+        }
+    }
+
+    before(() => {
+        cy.openTaskJob(taskName);
+    });
+
+    describe(`Testing case "${caseId}"`, () => {
+        it('Check some settings. Reload a page. The settings are saved.', () => {
+            testCheckedSettings();
+            cy.saveSettings();
+            cy.get('.cvat-notification-notice-save-settings-success')
+                .should('exist')
+                .find('[data-icon="close"]')
+                .click();
+            cy.closeSettings();
+            cy.reload();
+            cy.closeModalUnsupportedPlatform(); // If the Firefox browser closes the modal window after reload
+            testCheckedSettings(true);
+        });
+    });
+});

tests/cypress/support/commands.js

@@ -17,6 +17,10 @@ Cypress.Commands.add('login', (username = Cypress.env('user'), password = Cypres
     cy.get('[placeholder="Password"]').type(password);
     cy.get('[type="submit"]').click();
     cy.url().should('match', /\/tasks$/);
+    cy.document().then((doc) => {
+        const loadSettingFailNotice = Array.from(doc.querySelectorAll('.cvat-notification-notice-load-settings-fail'));
+        loadSettingFailNotice.length > 0 ? cy.closeNotification('.cvat-notification-notice-load-settings-fail') : null;
+    });
 });
 
 Cypress.Commands.add('logout', (username = Cypress.env('user')) => {
@@ -322,6 +326,12 @@ Cypress.Commands.add('closeSettings', () => {
     cy.get('.cvat-settings-modal').should('not.be.visible');
 });
 
+Cypress.Commands.add('saveSettings', () => {
+    cy.get('.cvat-settings-modal').within(() => {
+        cy.contains('button', 'Save').click();
+    });
+});
+
 Cypress.Commands.add('changeWorkspace', (mode, labelName) => {
     cy.get('.cvat-workspace-selector').click();
     cy.get('.cvat-workspace-selector-dropdown').within(() => {