itemengine-cypress-automation 1.0.78 → 1.0.80

package/cypress/e2e/ILC/DrawingResponse/drawingResponseAdditionalSettings.js

@@ -0,0 +1,379 @@
+import { drawingResponsePage } from "../../../pages";
+import abortEarlySetup from "../../../support/helpers/abortEarly";
+import utilities from "../../../support/helpers/utilities";
+
+const css = Cypress.env('css');
+const defaultStrokeLineThicknessOptions = ['5px', '10px', '15px', '20px', '25px'];
+const thickness = ['5', '10', '15', '20', '25'];
+const lineTypeOptions = ['Line', 'Dashed', 'Dotted', 'Single Arrow', 'Double Arrow'];
+const fontSizeDropdownOptions = ['Tiny', 'Small', 'Default', 'Normal', 'Big', 'Huge'];
+const fontSizes = ['12px', '14px', '16px', '18px', '22px', '26px'];
+const lineTypeOptionsTooltip = ['Line', 'Dashed', 'Dotted', 'Single arrow', 'Double arrow'];
+
+describe('Drawing response - Additional settings', () => {
+    before(() => {
+        cy.loginAs('admin');
+    });
+
+    describe('Additional settings accordion', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigating to drawing response question type');
+            drawingResponsePage.steps.navigateToCreateQuestion('Drawing Response');
+            cy.barsPreLoaderWait();
+        });
+
+        drawingResponsePage.tests.verifyAdditonalSettingsAccordionProperties();
+    });
+
+    describe('Additional settings: Default stroke/line thickness - Contents', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigating to drawing response question type');
+            drawingResponsePage.steps.navigateToCreateQuestion('Drawing Response');
+            cy.barsPreLoaderWait();
+            drawingResponsePage.steps.expandAdditionalSettings();
+        });
+
+        it('\'Canvas style and layout\' label should be displayed', () => {
+            utilities.verifyInnerText(drawingResponsePage.canvasStyleLayoutLabel(), 'Canvas style and layout');
+            utilities.verifyElementVisibilityState(drawingResponsePage.canvasStyleLayoutLabel(), 'visible');
+        });
+
+        it(`A \'Default stroke/line thickness\' label along with the total of ${defaultStrokeLineThicknessOptions.length} options should be displayed in the \'Stroke/line thickness\' section - ${defaultStrokeLineThicknessOptions.join('')}.`, () => {
+            utilities.verifyInnerText(drawingResponsePage.defaultStrokeLineThicknessLabel(), 'Default stroke/line thickness');
+            utilities.verifyElementVisibilityState(drawingResponsePage.defaultStrokeLineThicknessLabel(), 'visible');
+            for (let index = 0; index < defaultStrokeLineThicknessOptions.length; index++) {
+                utilities.verifyElementVisibilityState(drawingResponsePage.defaultStrokeLineThicknessButton(defaultStrokeLineThicknessOptions[index]), 'visible');
+            }
+            thickness.forEach((thickness, index) => {
+                drawingResponsePage.steps.verifyStrokeThicknessInAdditionalSettings(thickness, index)
+            });
+        });
+
+        it('5px stroke/line thickness button should be selected by default', () => {
+            drawingResponsePage.steps.verifyStrokeLineThicknessOptionIsSelected(defaultStrokeLineThicknessOptions[0]);
+        });
+
+        for (let index = 0; index < defaultStrokeLineThicknessOptions.length; index++) {
+            it(`When the user hovers over the \'${defaultStrokeLineThicknessOptions[index]}\' thickness button, a tooltip \'${defaultStrokeLineThicknessOptions[index]}\' should be displayed and on moving away the focus, the tooltip should disappear`, () => {
+                drawingResponsePage.defaultStrokeLineThicknessButton(defaultStrokeLineThicknessOptions[index])
+                    .verifyTooltip((defaultStrokeLineThicknessOptions[index]));
+            });
+        };
+
+        it('When the user selects a stroke/line thickness button from \'Default stroke/line thickness\' section then the selected stroke/line thickness button should change and the selected icon should be displayed on the newly selected thickness button', () => {
+            drawingResponsePage.steps.selectStrokeLineThicknessTypeOption(defaultStrokeLineThicknessOptions[1]);
+            drawingResponsePage.steps.verifyStrokeLineThicknessOptionIsSelected(defaultStrokeLineThicknessOptions[1]);
+            drawingResponsePage.steps.verifySelectedIconIsDisplayedOnStrokeThicknessButton(defaultStrokeLineThicknessOptions[1]);
+        });
+
+        it('CSS of \'Default stroke/line thickness\' section', { tags: 'css' }, () => {
+            cy.log('Pre-step: Hover on element to get tooltip');
+            utilities.hoverOverElement(drawingResponsePage.defaultStrokeLineThicknessButton(defaultStrokeLineThicknessOptions[0]));
+            utilities.verifyCSS(drawingResponsePage.tooltipText(), {
+                'color': css.color.whiteText,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.regular,
+                'background-color': css.color.tooltipBg
+            });
+            cy.log('Post-step: Hover on element to get tooltip');
+            utilities.hoverAwayFromElement((drawingResponsePage.defaultStrokeLineThicknessButton(defaultStrokeLineThicknessOptions[0])));
+            utilities.verifyCSS(drawingResponsePage.canvasStyleLayoutLabel(), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.semibold
+            });
+            utilities.verifyCSS(drawingResponsePage.defaultStrokeLineThicknessLabel(), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.semibold
+            });
+            utilities.verifyCSS(drawingResponsePage.defaultStrokeLineThicknessButton().eq(0), {
+                'background-color': css.color.defaultBackground,
+                'border': `1px solid ${css.color.figDefaultComponentBorder}`
+            });
+            cy.log('Css of stroke color');
+            utilities.verifyCSS(drawingResponsePage.additionalSettingsStrokeImage().eq(0).find('[data-name="Stroke Thickness 5px]'), {
+                'fill': css.color.tooltipBg
+            });
+            cy.log('Css of selected icon');
+            utilities.verifyCSS(drawingResponsePage.defaultStrokeLineThicknessButton(defaultStrokeLineThicknessOptions[1]).find('[class*="SelectedIcon"] svg g g path').eq(1), {
+                'fill': css.color.activeButtons
+            });
+        });
+
+        it('Accessibility of newly selected stroke/line thickness button', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(drawingResponsePage.defaultStrokeLineThicknessButton(defaultStrokeLineThicknessOptions[1]).parents('[class*="DrawingResponsestyles__StrokeLineThicknessWrapper"]'));
+        });
+    });
+
+    //Failing due to https://redmine.zeuslearning.com/issues/555345
+    describe('Additional settings: Default stroke/line thickness - Preview tab', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigating to drawing response question type');
+            drawingResponsePage.steps.navigateToCreateQuestion('Drawing Response');
+            cy.barsPreLoaderWait();
+            drawingResponsePage.steps.switchToPreviewTab();
+            drawingResponsePage.steps.selectPreviewTabToolbarOption('Line');
+        });
+
+        it('When the stroke/line thickness is set to 5px by default then the stroke thickness in secondary toolbar should be also be set to 5px in the preview tab', () => {
+            drawingResponsePage.steps.selectPreviewTabSecondaryToolbarOption('Line thickness');
+            drawingResponsePage.steps.verifySelectedOptionFromSecondaryOptionPopup(0);
+        });
+
+        it('When the user changes stroke/line thickness value in the edit tab then the stroke thickness value in secondary toolbar should also change accordingly in the preview tab', () => {
+            drawingResponsePage.steps.switchToEditTab();
+            drawingResponsePage.steps.expandAdditionalSettings();
+            drawingResponsePage.steps.selectStrokeLineThicknessTypeOption(defaultStrokeLineThicknessOptions[1]);
+            drawingResponsePage.steps.switchToPreviewTab();
+            drawingResponsePage.steps.selectPreviewTabToolbarOption('Line');
+            drawingResponsePage.steps.selectPreviewTabSecondaryToolbarOption('Line thickness');
+            drawingResponsePage.steps.verifySelectedOptionFromSecondaryOptionPopup(1);
+        });
+    });
+
+    describe('Additional settings: Set line type - Contents', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigating to drawing response question type');
+            drawingResponsePage.steps.navigateToCreateQuestion('Drawing Response');
+            cy.barsPreLoaderWait();
+            drawingResponsePage.steps.expandAdditionalSettings();
+        });
+
+        it(`A \'Set line type\' label along with the ${lineTypeOptions.length} options should be displayed in the \'Set line type\' section - ${lineTypeOptions.join('')}.`, () => {
+            utilities.verifyInnerText(drawingResponsePage.setLineTypeLabel(), 'Set line type');
+            utilities.verifyElementVisibilityState(drawingResponsePage.setLineTypeLabel(), 'visible');
+            for (let index = 0; index < lineTypeOptions.length; index++) {
+                utilities.verifyElementVisibilityState(drawingResponsePage.setLineTypeButton(lineTypeOptions[index]), 'visible');
+            }
+        });
+
+        it('By default all line type buttons should be selected', () => {
+            for (let index = 0; index < lineTypeOptions.length; index++) {
+                drawingResponsePage.steps.verifyLineTypeOptionIsSelected(lineTypeOptions[index]);
+            }
+        });
+
+        for (let index = 0; index < lineTypeOptionsTooltip.length; index++) {
+            it(`When the user hovers over the \'${lineTypeOptionsTooltip[index]}\' button, a tooltip \'${lineTypeOptionsTooltip[index]}\' should be displayed and on moving away the focus, the tooltip should disappear`, () => {
+                drawingResponsePage.setLineTypeButton(lineTypeOptions[index])
+                    .verifyTooltip((lineTypeOptionsTooltip[index]));
+            });
+        };
+
+        it('User should be able to unselect line type option button and the selected icon should not be displayed on the unselected line type button', () => {
+            drawingResponsePage.steps.unselectSetLineTypeOption(lineTypeOptions[1]);
+            drawingResponsePage.steps.verifyLineTypeOptionIsNotSelected(lineTypeOptions[1]);
+            drawingResponsePage.steps.verifySelectedIconIsNotDisplayedOnLineTypeButton(lineTypeOptions[1]);
+        });
+
+        it('CSS of \'Set line type section\' section', { tags: 'css' }, () => {
+            cy.log('Pre-step: Hover on element to get tooltip');
+            utilities.hoverOverElement(drawingResponsePage.setLineTypeButton(lineTypeOptions[0]));
+            utilities.verifyCSS(drawingResponsePage.tooltipText(), {
+                'color': css.color.whiteText,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.regular,
+                'background-color': css.color.tooltipBg
+            });
+            cy.log('Post-step: Hover on element to get tooltip');
+            utilities.hoverAwayFromElement((drawingResponsePage.setLineTypeButton(lineTypeOptions[0])));
+            utilities.verifyCSS(drawingResponsePage.setLineTypeLabel(), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.semibold
+            });
+            utilities.verifyCSS(drawingResponsePage.setLineTypeButton().eq(0), {
+                'background-color': css.color.defaultBackground,
+                'border': `1px solid ${css.color.figDefaultComponentBorder}`
+            });
+            cy.log('Css of selected icon');
+            utilities.verifyCSS(drawingResponsePage.setLineTypeButton(lineTypeOptions[0]).find('[class*="SelectedIcon"] svg g path').eq(1), {
+                'fill': css.color.activeButtons
+            });
+        });
+
+        it('Accessibility of  unselected line type button', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(drawingResponsePage.setLineTypeButton(lineTypeOptions[1]).parents('[class*="DrawingResponsestyles__SetLineTypeWrapper"]'));
+        });
+    });
+
+    //Failing due to https://redmine.zeuslearning.com/issues/555345
+    describe('Additional settings: Set line type - Preview tab', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigating to drawing response question type');
+            drawingResponsePage.steps.navigateToCreateQuestion('Drawing Response');
+            cy.barsPreLoaderWait();
+            drawingResponsePage.steps.switchToPreviewTab();
+            drawingResponsePage.steps.selectPreviewTabToolbarOption('Line');
+        });
+
+        it('When all line type buttons are selected by default then all the line type options should be displayed in secondary toolbar in the preview tab', () => {
+            drawingResponsePage.steps.selectPreviewTabSecondaryToolbarOption('Line Type');
+            lineTypeOptions.forEach((lineType, index) => {
+                drawingResponsePage.steps.verifySecondaryPopupLineType(lineType, index)
+            });
+        });
+
+        it('When the user unselects a particular line type in the edit tab then that particular line type option in secondary toolbar should not be displayed in the preview tab', () => {
+            drawingResponsePage.steps.switchToEditTab();
+            drawingResponsePage.steps.expandAdditionalSettings();
+            drawingResponsePage.steps.unselectSetLineTypeOption(lineTypeOptions[1]);
+            drawingResponsePage.steps.switchToPreviewTab();
+            drawingResponsePage.steps.selectPreviewTabToolbarOption('Line');
+            drawingResponsePage.steps.selectPreviewTabSecondaryToolbarOption('Line Type');
+            //Need to add step once https://redmine.zeuslearning.com/issues/555345 is fixed 
+        });
+    });
+
+    describe('Additional settings: Spell check - Contents', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigating to drawing response question type');
+            drawingResponsePage.steps.navigateToCreateQuestion('Drawing Response');
+            cy.barsPreLoaderWait();
+            drawingResponsePage.steps.expandAdditonalSettings();
+        });
+
+        it('\'Spell check\' functionality label and checkbox should be displayed and by default it should be unchecked', () => {
+            utilities.verifyInnerText(drawingResponsePage.spellCheckCheckBoxLabel(), 'Spell check');
+            utilities.verifyElementVisibilityState(drawingResponsePage.spellCheckCheckBoxLabel(), 'visible');
+            drawingResponsePage.steps.verifySpellCheckCheckboxIsUnchecked();
+        });
+
+        it('CSS of \'Spell check\' section - unchecked state', { tags: 'css' }, () => {
+            utilities.verifyCSS(drawingResponsePage.spellCheckCheckBoxLabel(), {
+                'color': css.color.labelText,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.regular
+            });
+            utilities.verifyCSS(drawingResponsePage.spellCheckCheckBox().parent().find('svg'), {
+                'fill': css.color.uncheckedCheckbox
+            });
+        });
+
+        //a11y covered in Additional settings accordion
+
+        it('User should be able to check \'Spell check\' checkbox', () => {
+            drawingResponsePage.steps.checkSpellCheckCheckbox();
+        });
+
+        it('CSS of \'Spell check\' section - checked state', { tags: 'css' }, () => {
+            utilities.verifyCSS(drawingResponsePage.spellCheckCheckBox().parent('.icon-checkbox-selected').find('.checkbox-icon-border-rect'), {
+                'fill': css.color.activeButtons
+            });
+        });
+
+        it('Accessibility of \'Spell check\' section - checked state', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(drawingResponsePage.spellCheckCheckBoxLabel());
+        });
+
+        it('User should be able to uncheck \'Spell check\' checkbox', () => {
+            drawingResponsePage.steps.uncheckSpellCheckCheckbox();
+        });
+    });
+
+    describe('Additional settings: Font size dropdown- Contents', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigating to drawing response question type');
+            drawingResponsePage.steps.navigateToCreateQuestion('Drawing Response');
+            cy.barsPreLoaderWait();
+            drawingResponsePage.steps.expandAdditionalSettings();
+        });
+
+        drawingResponsePage.tests.verifyFontSizeSectionContents();
+    });
+
+    //Failing due to https://redmine.zeuslearning.com/issues/555412
+    describe('Additional settings: Font size dropdown - Functionality in preview tab', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigating to drawing response question type');
+            drawingResponsePage.steps.navigateToCreateQuestion('Drawing Response');
+            cy.barsPreLoaderWait();
+            drawingResponsePage.steps.addQuestionInstructions();
+            drawingResponsePage.steps.expandAdditionalSettings();
+        });
+
+        fontSizeDropdownOptions.forEach((option, fontsIndex) => {
+            it(`When the user selects \'${option}\' option from the Font Size dropdown, then font size of the preview tab should change to ${option} accordingly`, () => {
+                drawingResponsePage.steps.selectFontSizeOptionFromFontSizeDropdown(fontsIndex);
+                utilities.verifyInnerText(drawingResponsePage.fontSizeDropdown(), `${option}`);
+                drawingResponsePage.steps.switchToPreviewTab();
+                utilities.verifyCSS(drawingResponsePage.questionInstructionsText(), {
+                    'font-size': fontSizes[fontsIndex]
+                });
+                drawingResponsePage.steps.switchToEditTab();
+            });
+        });
+    });
+
+    describe('Additional settings: Accessibility - Contents', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigate to drawing response question type');
+        });
+
+        it('\'Accessibility\' label, \'Flag this question as non-accessible\' checkbox label and checkbox should be displayed and by default it should be unchecked', () => {
+            utilities.verifyInnerText(drawingResponsePage.accessibilityLabel(), 'Accessibility');
+            utilities.verifyElementVisibilityState(drawingResponsePage.accessibilityLabel(), 'visible');
+            utilities.verifyInnerText(drawingResponsePage.flagThisQuestionAsNonAccessibleCheckboxLabel(), 'Flag this question as non-accessible');
+            utilities.verifyElementVisibilityState(drawingResponsePage.flagThisQuestionAsNonAccessibleCheckboxLabel(), 'visible');
+            drawingResponsePage.steps.verifyFlagThisQuestionAsNonAccessibleCheckboxIsUnchecked();
+        });
+
+        it('CSS of \'Accessibility\' section - unchecked state', { tags: 'css' }, () => {
+            utilities.verifyCSS(drawingResponsePage.accessibilityLabel(), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.semibold
+            });
+            utilities.verifyCSS(drawingResponsePage.flagThisQuestionAsNonAccessibleCheckboxLabel(), {
+                'color': css.color.labelText,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.regular
+            });
+            utilities.verifyCSS(drawingResponsePage.flagThisQuestionAsNonAccessibleCheckbox().parent().find('svg'), {
+                'fill': css.color.uncheckedCheckbox
+            });
+        });
+
+        //a11y covered in Additional settings accordion
+
+        it('User should be able to check \'Flag this question as non-accessible\' checkbox', () => {
+            drawingResponsePage.steps.checkFlagThisQuestionAsNonAccessibleCheckbox();
+        });
+
+        it('CSS of \'Flag this question as non-accessible\' checkbox - checked state', { tags: 'css' }, () => {
+            utilities.verifyCSS(drawingResponsePage.flagThisQuestionAsNonAccessibleCheckbox().parent('.icon-checkbox-selected').find('.checkbox-icon-border-rect'), {
+                'fill': css.color.activeButtons
+            });
+        });
+
+        it('Accessibility of \'Flag this question as non-accessible\' checkbox - checked state', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(drawingResponsePage.flagThisQuestionAsNonAccessibleCheckbox().parents('[class*="DrawingResponsestyles__AccessibilityWrapper"]'));
+        });
+
+        it('User should be able to uncheck \'Flag this question as non-accessible\' checkbox', () => {
+            drawingResponsePage.steps.uncheckFlagThisQuestionAsNonAccessibleCheckbox();
+        });
+    });
+
+    describe('Additional settings: Details section', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigating to drawing response question type');
+            drawingResponsePage.steps.navigateToCreateQuestion('Drawing Response');
+            cy.barsPreLoaderWait();
+            drawingResponsePage.steps.expandAdditionalSettings();
+        });
+
+        drawingResponsePage.tests.verifyDetailsSection();
+    });
+});