itemengine-cypress-automation 1.0.200-23rdMayUpdates-264dc55.0 → 1.0.201-28thMayRepoUpdate-e720349.0

package/cypress/e2e/ILC/FillInTheGapsDragAndDropNew/dropzoneStyleAndLayoutCustomization.js

@@ -0,0 +1,337 @@
+import { dialogBoxBase, fillInTheGapsDragAndDropPage } from "../../../pages";
+import { colorPopupComponent } from "../../../pages/components";
+import abortEarlySetup from "../../../support/helpers/abortEarly";
+import utilities from "../../../support/helpers/utilities";
+const css = Cypress.env('css');
+const borderStyles = ["Dashed", "Dotted", "Solid", "None"];
+
+describe('Create item page - Fill in the gaps with drag and drop: Style and layout customization - Dropzone section', () => {
+    before(() => {
+        cy.loginAs('admin');
+    });
+
+    describe('Style and layout customization accordion', () => {
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsDragAndDropPage.steps.navigateToCreateQuestion('fill in the gaps with drag and drop');
+            cy.barsPreLoaderWait();
+        });
+
+        fillInTheGapsDragAndDropPage.tests.verifyStyleAndLayoutCustomizationAccordionProperties();
+    });
+
+    describe('Style and layout customization accordion : Dropzone section contents', () => {
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsDragAndDropPage.steps.navigateToCreateQuestion('fill in the gaps with drag and drop');
+            cy.barsPreLoaderWait();
+            fillInTheGapsDragAndDropPage.steps.expandStyleAndLayoutCustomizationAccordion();
+        });
+
+        it('"Dropzone" label should be displayed', () => {
+            utilities.verifyInnerText(fillInTheGapsDragAndDropPage.componentContainerLabel(), 'Dropzone');
+        });
+
+        fillInTheGapsDragAndDropPage.tests.verifyFillColorSectionContents();
+
+        fillInTheGapsDragAndDropPage.tests.verifyBorderColorSectionContents();
+
+        fillInTheGapsDragAndDropPage.tests.verifyBorderStyleSectionContents('Dashed');
+
+        fillInTheGapsDragAndDropPage.tests.verifyFillColorTooltips();
+
+        fillInTheGapsDragAndDropPage.tests.verifyBorderColorTooltips();
+
+        fillInTheGapsDragAndDropPage.tests.verifyStyleAndLayoutCustomizationAccordionContentsCSSAndA11y('Dashed');
+    });
+
+    describe('Fill color - Edit tab', () => {
+        const modifiedColor = 'rgb(121, 60, 60)'
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsDragAndDropPage.steps.navigateToCreateQuestion('fill in the gaps with drag and drop');
+            cy.barsPreLoaderWait();
+            fillInTheGapsDragAndDropPage.steps.expandStyleAndLayoutCustomizationAccordion();
+        });
+
+        it('When the default color block is in selected state in the "Fill color" section, then the background color of the dropzones in the question input field should be the default selected color', () => {
+            fillInTheGapsDragAndDropPage.steps.verifyResponseAreaFillColor(0, css.color.optionsBg);
+            fillInTheGapsDragAndDropPage.steps.verifyResponseAreaFillColor(1, css.color.optionsBg);
+        });
+
+        it('When the user selects the "None" color block, it should get in selected state and the no background color should be present for the dropzones in the question input field', () => {
+            fillInTheGapsDragAndDropPage.steps.selectColorBlock(1);
+            fillInTheGapsDragAndDropPage.steps.verifyResponseAreaFillColor(0, css.color.transparent);
+            fillInTheGapsDragAndDropPage.steps.verifyResponseAreaFillColor(1, css.color.transparent);
+        });
+
+        it('When the user clicks on the "Edit color" button, modifies color for the selected color block, then the background color of the dropzones in the question input field should be the modified selected color', () => {
+            fillInTheGapsDragAndDropPage.steps.editColor(0);
+            colorPopupComponent.steps.clickInColorSaturationPalette();
+            colorPopupComponent.steps.clickOnOkButton();
+            fillInTheGapsDragAndDropPage.steps.verifyResponseAreaFillColor(0, modifiedColor);
+            fillInTheGapsDragAndDropPage.steps.verifyResponseAreaFillColor(1, modifiedColor);
+        });
+
+        it('When the adds a new dropzone, then the background color of the newly added dropzone should be the modified selected color', () => {
+            fillInTheGapsDragAndDropPage.steps.addResponseArea();
+            fillInTheGapsDragAndDropPage.steps.verifyResponseAreaFillColor(0, modifiedColor);
+            fillInTheGapsDragAndDropPage.steps.verifyResponseAreaFillColor(1, modifiedColor);
+            fillInTheGapsDragAndDropPage.steps.verifyResponseAreaFillColor(2, modifiedColor);
+        });
+    });
+
+    describe('Fill color - Preview tab', () => {
+        const modifiedColor = 'rgb(121, 60, 60)'
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsDragAndDropPage.steps.navigateToCreateQuestion('fill in the gaps with drag and drop');
+            cy.barsPreLoaderWait();
+            fillInTheGapsDragAndDropPage.steps.expandStyleAndLayoutCustomizationAccordion();
+            fillInTheGapsDragAndDropPage.steps.switchToPreviewTab();
+        });
+
+        it('When the default color block is in selected state in the "Fill color" section, then the background color of the dropzones in the preview tab should be the default selected color', () => {
+            fillInTheGapsDragAndDropPage.steps.verifyDropzoneFillColor(0, css.color.optionsBg);
+            fillInTheGapsDragAndDropPage.steps.verifyDropzoneFillColor(1, css.color.optionsBg);
+        });
+
+        it('When the user selects the "None" color block, it should get in selected state and the no background color should be present for the dropzones in the preview tab', () => {
+            fillInTheGapsDragAndDropPage.steps.switchToEditTab();
+            fillInTheGapsDragAndDropPage.steps.selectColorBlock(1);
+            fillInTheGapsDragAndDropPage.steps.switchToPreviewTab();
+            fillInTheGapsDragAndDropPage.steps.verifyDropzoneFillColor(0, css.color.defaultBackground);
+            fillInTheGapsDragAndDropPage.steps.verifyDropzoneFillColor(1, css.color.defaultBackground);
+        });
+
+        it('When the user clicks on the "Edit color" button, modifies color for the selected color block, then the color block should get updated accordingly', () => {
+            fillInTheGapsDragAndDropPage.steps.switchToEditTab();
+            fillInTheGapsDragAndDropPage.steps.editColor(0);
+            colorPopupComponent.steps.clickInColorSaturationPalette();
+            colorPopupComponent.steps.clickOnOkButton();
+            fillInTheGapsDragAndDropPage.steps.switchToPreviewTab();
+            fillInTheGapsDragAndDropPage.steps.verifyDropzoneFillColor(0, modifiedColor);
+            fillInTheGapsDragAndDropPage.steps.verifyDropzoneFillColor(1, modifiedColor);
+        });
+
+        it('The background color of the dropzones in the preview tab should be the modified selected color', () => {
+            fillInTheGapsDragAndDropPage.steps.switchToEditTab();
+            fillInTheGapsDragAndDropPage.steps.addResponseArea();
+            fillInTheGapsDragAndDropPage.steps.switchToPreviewTab();
+            fillInTheGapsDragAndDropPage.steps.verifyDropzoneFillColor(0, modifiedColor);
+            fillInTheGapsDragAndDropPage.steps.verifyDropzoneFillColor(1, modifiedColor);
+            fillInTheGapsDragAndDropPage.steps.verifyDropzoneFillColor(2, modifiedColor);
+        });
+    });
+
+    describe('Border color - Edit tab', () => {
+        const modifiedColor = 'rgb(121, 60, 60)'
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsDragAndDropPage.steps.navigateToCreateQuestion('fill in the gaps with drag and drop');
+            cy.barsPreLoaderWait();
+            fillInTheGapsDragAndDropPage.steps.expandStyleAndLayoutCustomizationAccordion();
+        });
+
+        it('When the default color block is in selected state in the "Fill color" section, then the background color of the dropzones in the question input field should be the default selected color', () => {
+            fillInTheGapsDragAndDropPage.steps.verifyResponseAreaBorderColor(0, `2px dashed ${css.color.activeComponentBorder}`);
+            fillInTheGapsDragAndDropPage.steps.verifyResponseAreaBorderColor(1, `2px dashed ${css.color.activeComponentBorder}`);
+        });
+
+        it('When the user selects the "None" color block, it should get in selected state and the no background color should be present for the dropzones in the question input field', () => {
+            fillInTheGapsDragAndDropPage.steps.selectColorBlock(3);
+            fillInTheGapsDragAndDropPage.steps.verifyResponseAreaBorderColor(0, `2px dashed ${css.color.transparent}`);
+            fillInTheGapsDragAndDropPage.steps.verifyResponseAreaBorderColor(1, `2px dashed ${css.color.transparent}`);
+        });
+
+        it('When the user clicks on the "Edit color" button, modifies color for the selected color block, then the background color of the dropzones in the question input field should be the modified selected color', () => {
+            fillInTheGapsDragAndDropPage.steps.editColor(1);
+            colorPopupComponent.steps.clickInColorSaturationPalette();
+            colorPopupComponent.steps.clickOnOkButton();
+            fillInTheGapsDragAndDropPage.steps.verifyResponseAreaBorderColor(0, `2px dashed ${modifiedColor}`);
+            fillInTheGapsDragAndDropPage.steps.verifyResponseAreaBorderColor(1, `2px dashed ${modifiedColor}`);
+        });
+
+        it('When the adds a new dropzone, then the background color of the newly added dropzone should be the modified selected color', () => {
+            fillInTheGapsDragAndDropPage.steps.addResponseArea();
+            fillInTheGapsDragAndDropPage.steps.verifyResponseAreaBorderColor(0, `2px dashed ${modifiedColor}`);
+            fillInTheGapsDragAndDropPage.steps.verifyResponseAreaBorderColor(1, `2px dashed ${modifiedColor}`);
+            fillInTheGapsDragAndDropPage.steps.verifyResponseAreaBorderColor(2, `2px dashed ${modifiedColor}`);
+        });
+    });
+
+    describe('Border color - Preview tab', () => {
+        const modifiedColor = 'rgb(121, 60, 60)'
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsDragAndDropPage.steps.navigateToCreateQuestion('fill in the gaps with drag and drop');
+            cy.barsPreLoaderWait();
+            fillInTheGapsDragAndDropPage.steps.expandStyleAndLayoutCustomizationAccordion();
+            fillInTheGapsDragAndDropPage.steps.switchToPreviewTab();
+        });
+
+        it('When the default color block is in selected state in the "Fill color" section, then the background color of the dropzones in the preview tab should be the default selected color', () => {
+            fillInTheGapsDragAndDropPage.steps.verifyDropzoneBorderColor(0, `2px dashed ${css.color.activeComponentBorder}`);
+            fillInTheGapsDragAndDropPage.steps.verifyDropzoneBorderColor(1, `2px dashed ${css.color.activeComponentBorder}`);
+        });
+
+        it('When the user selects the "None" color block, it should get in selected state and the no background color should be present for the dropzones in the preview tab', () => {
+            fillInTheGapsDragAndDropPage.steps.switchToEditTab();
+            fillInTheGapsDragAndDropPage.steps.selectColorBlock(3);
+            fillInTheGapsDragAndDropPage.steps.switchToPreviewTab();
+            fillInTheGapsDragAndDropPage.steps.verifyDropzoneBorderColor(0, `2px dashed ${css.color.defaultBackground}`);
+            fillInTheGapsDragAndDropPage.steps.verifyDropzoneBorderColor(1, `2px dashed ${css.color.defaultBackground}`);
+        });
+
+        it('When the user clicks on the "Edit color" button, modifies color for the selected color block, then the color block should get updated accordingly', () => {
+            fillInTheGapsDragAndDropPage.steps.switchToEditTab();
+            fillInTheGapsDragAndDropPage.steps.editColor(1);
+            colorPopupComponent.steps.clickInColorSaturationPalette();
+            colorPopupComponent.steps.clickOnOkButton();
+            fillInTheGapsDragAndDropPage.steps.switchToPreviewTab();
+            fillInTheGapsDragAndDropPage.steps.verifyDropzoneBorderColor(0, `2px dashed ${modifiedColor}`);
+            fillInTheGapsDragAndDropPage.steps.verifyDropzoneBorderColor(1, `2px dashed ${modifiedColor}`);
+        });
+
+        it('The background color of the dropzones in the preview tab should be the modified selected color', () => {
+            fillInTheGapsDragAndDropPage.steps.switchToEditTab();
+            fillInTheGapsDragAndDropPage.steps.addResponseArea();
+            fillInTheGapsDragAndDropPage.steps.switchToPreviewTab();
+            fillInTheGapsDragAndDropPage.steps.verifyDropzoneBorderColor(0, `2px dashed ${modifiedColor}`);
+            fillInTheGapsDragAndDropPage.steps.verifyDropzoneBorderColor(1, `2px dashed ${modifiedColor}`);
+            fillInTheGapsDragAndDropPage.steps.verifyDropzoneBorderColor(2, `2px dashed ${modifiedColor}`);
+        });
+    });
+
+    describe('Color popup functionality', () => {
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsDragAndDropPage.steps.navigateToCreateQuestion('fill in the gaps with drag and drop');
+            cy.barsPreLoaderWait();
+            fillInTheGapsDragAndDropPage.steps.expandStyleAndLayoutCustomizationAccordion();
+        });
+
+        it('When the user clicks on the \'Edit color\' present in an \'Text color\' popup, then a select color popup should be displayed', () => {
+            fillInTheGapsDragAndDropPage.steps.editColor(0);
+            colorPopupComponent.steps.verifyColorPopupIsDisplayed();
+        });
+
+        colorPopupComponent.tests.verifyColorPopupSelectColorTitle();
+
+        colorPopupComponent.tests.verifySaturationAndOpacityGradientPalette('rgb(255, 255, 255)');
+
+        colorPopupComponent.tests.verifyColorHuePaletteAndHexInputField('rgb(255, 0, 0)', '#ffffff');
+
+        colorPopupComponent.tests.verifyColorPopupFunctionality();
+    });
+
+    describe('Color popup - Updating the selected color', () => {
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsDragAndDropPage.steps.navigateToCreateQuestion('fill in the gaps with drag and drop');
+            cy.barsPreLoaderWait();
+            fillInTheGapsDragAndDropPage.steps.expandStyleAndLayoutCustomizationAccordion();
+        });
+
+        it('When the user moves the color picker in the color saturation palette, color in the selected color block and the hex code should change, color in the hue color palette and the opacity value should not change', () => {
+            fillInTheGapsDragAndDropPage.steps.editColor(0);
+            colorPopupComponent.steps.clickInColorSaturationPalette();
+            colorPopupComponent.steps.verifySelectedColorBlock('rgb(121, 60, 60)');
+            colorPopupComponent.steps.verifySaturationPaletteColor('rgb(119, 60, 60)');
+            colorPopupComponent.steps.verifyHuePaletteColor('rgb(255, 0, 0)');
+            colorPopupComponent.steps.verifyHexValue('#793c3c');
+            colorPopupComponent.steps.verifyOpacityGradientPaletteColor('rgb(119, 60, 60)');
+        });
+
+        it('When the user moves the color picker in the color hue palette, color in the selected color block, the hex code and the saturation color palette should change and the opacity value should not change', () => {
+            colorPopupComponent.steps.clickInColorHuePalette();
+            colorPopupComponent.steps.verifySelectedColorBlock('rgb(60, 121, 121)');
+            colorPopupComponent.steps.verifyHuePaletteColor('rgb(0, 255, 255)');
+            colorPopupComponent.steps.verifyHexValue('#3c7979');
+            colorPopupComponent.steps.verifyOpacityGradientPaletteColor('rgb(60, 119, 119)');
+        });
+
+        it('When the user changes the color using hex code, the color in color saturation palette and color hue palette should change and the opacity value should not change', () => {
+            colorPopupComponent.steps.addInputToHexInputField('#ff0000');
+            colorPopupComponent.steps.verifyHexValue('#ff0000');
+            colorPopupComponent.steps.verifySaturationPaletteColor('rgb(255, 0, 0)');
+            colorPopupComponent.steps.verifyHuePaletteColor('rgb(255, 0, 0)');
+            colorPopupComponent.steps.verifyOpacityGradientPaletteColor('rgb(255, 0, 0)');
+        });
+    });
+
+    describe('Color popup - \'Cancel\' and \'Ok\' buttons', () => {
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsDragAndDropPage.steps.navigateToCreateQuestion('fill in the gaps with drag and drop');
+            cy.barsPreLoaderWait();
+            fillInTheGapsDragAndDropPage.steps.expandStyleAndLayoutCustomizationAccordion();
+        });
+
+        it('When the user modifies the selected color in the color popup and clicks on \'Cancel\' button, then the popup should close, the color block should not change and the modifications in the color popup should not persist', () => {
+            fillInTheGapsDragAndDropPage.steps.editColor(0);
+            colorPopupComponent.steps.addInputToHexInputField('#ff0000');
+            colorPopupComponent.steps.clickOnOpacityGradientHuePalette();
+            colorPopupComponent.steps.clickOnCancelButton();
+            utilities.verifyElementVisibilityState(dialogBoxBase.dialogBox(), 'notExist');
+            colorPopupComponent.steps.verifyColorBlockInOptionAccordion(0, 'rgb(245, 248, 255)');
+        });
+
+        it('When the user modifies the selected color in the color popup and clicks on \'Ok\' button, then the popup should close, the color block should change to the new selected color and the modifications in the color popup should persist', () => {
+            cy.log('Pre-step: clicking on the edit color button')
+            fillInTheGapsDragAndDropPage.steps.editColor(0);
+            colorPopupComponent.steps.addInputToHexInputField('#ff0000');
+            colorPopupComponent.steps.clickOnOpacityGradientHuePalette();
+            colorPopupComponent.steps.clickOnOkButton();
+            utilities.verifyElementVisibilityState(dialogBoxBase.dialogBox(), 'notExist');
+            colorPopupComponent.steps.verifyColorBlockInOptionAccordion(0, 'rgba(255, 0, 0, 0.5)');
+        });
+    });
+
+    describe('Border style - Edit tab', () => {
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsDragAndDropPage.steps.navigateToCreateQuestion('fill in the gaps with drag and drop');
+            cy.barsPreLoaderWait();
+            fillInTheGapsDragAndDropPage.steps.expandStyleAndLayoutCustomizationAccordion();
+        });
+
+        it('When the "Dashed" border style is in selected state, then the border style of the dropzones in the question input field should be "dashed"', () => {
+            fillInTheGapsDragAndDropPage.steps.verifyResponseAreaBorderStyle(0, 'dashed');
+            fillInTheGapsDragAndDropPage.steps.verifyResponseAreaBorderStyle(1, 'dashed');
+        });
+
+        borderStyles.forEach((style) => {
+            it(`When the user selects ${style}, then the border style of the dropzones in the question input field should update to ${style}`, () => {
+                fillInTheGapsDragAndDropPage.steps.selectBorderStyleToggleButton(style);
+                fillInTheGapsDragAndDropPage.steps.verifyResponseAreaBorderStyle(0, style);
+                fillInTheGapsDragAndDropPage.steps.verifyResponseAreaBorderStyle(1, style);
+            });
+        })
+    });
+
+    describe('Border style - Preview tab', () => {
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsDragAndDropPage.steps.navigateToCreateQuestion('fill in the gaps with drag and drop');
+            cy.barsPreLoaderWait();
+            fillInTheGapsDragAndDropPage.steps.expandStyleAndLayoutCustomizationAccordion();
+            fillInTheGapsDragAndDropPage.steps.switchToPreviewTab();
+        });
+
+        it('When the "Dashed" border style is in selected state, then the border style of the dropzones in the preview tab should be "dashed"', () => {
+            fillInTheGapsDragAndDropPage.steps.verifyDropzoneBorderStyle(0, 'dashed');
+            fillInTheGapsDragAndDropPage.steps.verifyDropzoneBorderStyle(1, 'dashed');
+        });
+
+        borderStyles.forEach((style) => {
+            it(`When the user selects ${style}, then the border style of the dropzones in the preview tab should update to ${style}`, () => {
+                fillInTheGapsDragAndDropPage.steps.switchToEditTab();
+                fillInTheGapsDragAndDropPage.steps.selectBorderStyleToggleButton(style);
+                fillInTheGapsDragAndDropPage.steps.switchToPreviewTab();
+                fillInTheGapsDragAndDropPage.steps.verifyDropzoneBorderStyle(0, style);
+                fillInTheGapsDragAndDropPage.steps.verifyDropzoneBorderStyle(1, style);
+            });
+        })
+    });
+});

package/cypress/e2e/ILC/FillInTheGapsDragAndDropNew/studentViewSettings.js

@@ -24,6 +24,8 @@ describe('Create Item page - Fill in the gaps with drag and drop: Student view s
 
         fillInTheGapsDragAndDropPage.tests.verifyStudentViewSettingsLabelAndCSS();
 
+        fillInTheGapsDragAndDropPage.tests.verifyAllowStudentsToCheckAnswerNotExist();
+
         it('\'Randomize options\' checkbox and label should be displayed and by default it should be unchecked', () => {
             utilities.verifyInnerText(fillInTheGapsDragAndDropPage.randomizeOptionsLabel(), 'Randomize options');
             utilities.verifyElementVisibilityState(fillInTheGapsDragAndDropPage.randomizeOptionsCheckbox(), 'exist');
@@ -255,7 +257,7 @@ describe('Create Item page - Fill in the gaps with drag and drop: Student view s
         });
     });
 
-    describe('Allow students to check answer: Edit tab', () => {
+    /*describe('Allow students to check answer: Edit tab', () => {
         abortEarlySetup();
         before(() => {
             fillInTheGapsDragAndDropPage.steps.navigateToCreateQuestion('fill in the gaps with drag and drop');
@@ -337,5 +339,5 @@ describe('Create Item page - Fill in the gaps with drag and drop: Student view s
             fillInTheGapsDragAndDropPage.steps.checkAnswer();
             fillInTheGapsDragAndDropPage.steps.verifyCheckAnswerButtonEnabled();
         });
-    });
+    });*/
 });

package/cypress/e2e/ILC/FillInTheGapsDragAndDropNew/toolSettings.js

@@ -0,0 +1,73 @@
+import { toolSettingsComponent } from "../../../pages/components";
+import abortEarlySetup from "../../../support/helpers/abortEarly";
+import utilities from "../../../support/helpers/utilities";
+import { dialogBoxBase, fillInTheGapsDragAndDropPage, rulerPage } from "../../../pages";
+
+const css = Cypress.env('css');
+
+describe('Create Item page: Tool settings', () => {
+    before(() => {
+        cy.loginAs('admin');
+    });
+
+    describe('Tool settings: Contents', () => {
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsDragAndDropPage.steps.navigateToCreateQuestion('fill in the gaps with drag and drop');
+        });
+
+        toolSettingsComponent.tests.verifyToolSettingsContent();
+    });
+
+    describe('Tool settings: Edit tool settings', () => {
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsDragAndDropPage.steps.navigateToCreateQuestion('fill in the gaps with text');
+            toolSettingsComponent.steps.expandToolSettingsAccordion();
+        });
+
+        it('When user clicks on edit icon for ruler tool, then popup for ruler tool settings should be displayed', () => {
+            toolSettingsComponent.steps.clickOnToolEditIcon(0);
+            utilities.verifyElementVisibilityState(dialogBoxBase.dialogBox(), 'visible');
+        });
+
+        it('When user modifies the settings for the ruler tool and clicks the \'Ok\' button, then ruler tool should enter selected state.', () => {
+            rulerPage.steps.expandUnitOfMeasurementDropdown();
+            rulerPage.steps.selectOptionFromUnitOfMeasurementDropdown('Inch');
+            rulerPage.steps.selectOptionFromLengthOfRulerOptions('12 in');
+            rulerPage.steps.selectColorBlock(1);
+            rulerPage.steps.expandRotationDropdown();
+            rulerPage.steps.selectOptionFromRotationDropdown('Allow rotation and display angle');
+            rulerPage.steps.enterInputToOpacityInputField(60);
+            rulerPage.steps.checkAddShowHideButtonCheckbox();
+            toolSettingsComponent.steps.clickOnOkButton();
+            utilities.verifyElementVisibilityState(dialogBoxBase.dialogBox(), 'notExist');
+            toolSettingsComponent.steps.verifyToolSelectedState(0);
+        });
+
+        it('When user has made changes for ruler tool in edit tab then changes should be reflected in the ruler tool in the preview tab', () => {
+            cy.log('Switching to Preview Tab');
+            rulerPage.steps.switchToPreviewTab();
+            rulerPage.steps.verifyPreviewTabRulerVisibilityButtonLabel('Show');
+            rulerPage.steps.clickOnRulerVisibilityButton();
+            utilities.verifyElementVisibilityState(rulerPage.rulerPreviewTab(), 'visible');
+            rulerPage.steps.verifyLengthOfRulerInPreview('12in');
+            rulerPage.steps.verifyColorOfRulerInPreview(1);
+            rulerPage.steps.verifyRulerOpacityInPreview('0.6');
+            rulerPage.steps.verifyRotationButtonWithDegreeVisible();
+        });
+
+        it('CSS of the \'Hide ruler\' button', { tags: 'css' }, () => {
+            utilities.verifyCSS(rulerPage.rulerVisibilityButtonPreviewTab(), {
+                'border': `1px solid ${css.color.activeButtons}`,
+                'background-color': css.color.defaultBackground,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.semibold
+            });
+        });
+
+        it('Accessibility of \'Hide ruler\' button', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(rulerPage.rulerVisibilityButtonPreviewTab().parents('[class*="ItemEnginestyles__MainWrapper"]'));
+        });
+    });
+});

package/cypress/e2e/ILC/FillInTheGapsDropdownNew/Scoring/allOrNothingAlternativePointsGreaterThanCorrectPoints.js

@@ -32,7 +32,7 @@ describe('Create item page - Fill in the gaps with dropdown: All or nothing with
             fillInTheGapsDropdownPage.steps.selectResponseFromDropdownSpecifyCorrectAnswerSection(1, alternateAnswerArray[1]);
             fillInTheGapsDropdownPage.steps.selectResponseFromDropdownSpecifyCorrectAnswerSection(2, alternateAnswerArray[2]);
             fillInTheGapsDropdownPage.steps.allotPoints(20);
-            fillInTheGapsDropdownPage.steps.checkAllowStudentToCheckAnswerCheckbox();
+             //fillInTheGapsDropdownPage.steps.checkAllowStudentToCheckAnswerCheckbox();
             fillInTheGapsDropdownPage.steps.switchToPreviewTab();
         });
 
@@ -53,13 +53,13 @@ describe('Create item page - Fill in the gaps with dropdown: All or nothing with
             fillInTheGapsDropdownPage.steps.verifyCorrectIncorrectAnswerLabel('correct');
             fillInTheGapsDropdownPage.steps.verifyCorrectAnswerSectionNotExists();
             fillInTheGapsDropdownPage.steps.verifyQuestionPreviewStateWhenSwitchingBackToStudentView();
-            cy.log('When the user has attempted the question with responses from the correct accordion and clicks on \'Check answer\' button, then correct icon should be displayed besides the correctly answered dropdowns, a status message with text \'Your answer is correct\' and correct answer section should not be displayed')
+            /*cy.log('When the user has attempted the question with responses from the correct accordion and clicks on \'Check answer\' button, then correct icon should be displayed besides the correctly answered dropdowns, a status message with text \'Your answer is correct\' and correct answer section should not be displayed')
             fillInTheGapsDropdownPage.steps.checkAnswer();
             fillInTheGapsDropdownPage.steps.verifyCorrectOptionIcon(0);
             fillInTheGapsDropdownPage.steps.verifyCorrectOptionIcon(1);
             fillInTheGapsDropdownPage.steps.verifyCorrectOptionIcon(2);
             fillInTheGapsDropdownPage.steps.verifyCorrectIncorrectAnswerLabel('correct');
-            fillInTheGapsDropdownPage.steps.verifyCorrectAnswerSectionNotExists();
+            fillInTheGapsDropdownPage.steps.verifyCorrectAnswerSectionNotExists();*/
         });
 
         it('When the user attempts the question with responses from the alternative accordion, then the user should be awarded with full points and on switching to \'Grading\' view, correct icons should be displayed beside all the correct dropdowns, a status message with text \'Your answer is correct\' and correct answer section should not be displayed', () => {
@@ -73,13 +73,13 @@ describe('Create item page - Fill in the gaps with dropdown: All or nothing with
             fillInTheGapsDropdownPage.steps.verifyCorrectIncorrectAnswerLabel('correct');
             fillInTheGapsDropdownPage.steps.verifyCorrectAnswerSectionNotExists();
             fillInTheGapsDropdownPage.steps.verifyQuestionPreviewStateWhenSwitchingBackToStudentView();
-            cy.log('When the user has attempted the question with responses from the alternative accordion and clicks on \'Check answer\' button, then correct icon should be displayed besides the correctly answered dropdowns, a status message with text \'Your answer is correct\' and correct answer section should not be displayed')
+            /*cy.log('When the user has attempted the question with responses from the alternative accordion and clicks on \'Check answer\' button, then correct icon should be displayed besides the correctly answered dropdowns, a status message with text \'Your answer is correct\' and correct answer section should not be displayed')
             fillInTheGapsDropdownPage.steps.checkAnswer();
             fillInTheGapsDropdownPage.steps.verifyCorrectOptionIcon(0);
             fillInTheGapsDropdownPage.steps.verifyCorrectOptionIcon(1);
             fillInTheGapsDropdownPage.steps.verifyCorrectOptionIcon(2);
             fillInTheGapsDropdownPage.steps.verifyCorrectIncorrectAnswerLabel('correct');
-            fillInTheGapsDropdownPage.steps.verifyCorrectAnswerSectionNotExists();
+            fillInTheGapsDropdownPage.steps.verifyCorrectAnswerSectionNotExists();*/
         });
 
         it('When the user attempts the question with partially correct options exclusively from the correct accordion, then the user should be awarded 0 points and on switching to \'Grading\' view, correct icon should be displayed besides the correctly answered dropdowns, no icon should be displayed beside unattempted dropdown, a status message with text \'Your answer is incorrect\' and correct answer section with all correct answers from the alternative accordion along with dropdown numeration should be displayed', () => {
@@ -93,13 +93,13 @@ describe('Create item page - Fill in the gaps with dropdown: All or nothing with
             fillInTheGapsDropdownPage.steps.verifyCorrectIncorrectAnswerLabel('incorrect');
             fillInTheGapsDropdownPage.steps.verifyCorrectAnswerResponsesInCorrectAnswerSectionAndCount(alternateAnswerArray);
             fillInTheGapsDropdownPage.steps.verifyQuestionPreviewStateWhenSwitchingBackToStudentView();
-            cy.log('When the user has attempted the question with partially correct options exclusively from the correct accordion and clicks on \'Check answer\' button, then correct icon should be displayed besides the correctly answered dropdowns, no icon should be displayed for unattempted dropdown, a status message with text \'Your answer is incorrect\' and correct answer section should not be displayed')
+            /*cy.log('When the user has attempted the question with partially correct options exclusively from the correct accordion and clicks on \'Check answer\' button, then correct icon should be displayed besides the correctly answered dropdowns, no icon should be displayed for unattempted dropdown, a status message with text \'Your answer is incorrect\' and correct answer section should not be displayed')
             fillInTheGapsDropdownPage.steps.checkAnswer();
             fillInTheGapsDropdownPage.steps.verifyCorrectOptionIcon(0);
             fillInTheGapsDropdownPage.steps.verifyCorrectIncorrectIconNotExist(1);
             fillInTheGapsDropdownPage.steps.verifyCorrectIncorrectIconNotExist(2);
             fillInTheGapsDropdownPage.steps.verifyCorrectIncorrectAnswerLabel('incorrect');
-            fillInTheGapsDropdownPage.steps.verifyCorrectAnswerSectionNotExists();
+            fillInTheGapsDropdownPage.steps.verifyCorrectAnswerSectionNotExists();*/
         });
 
         it('When the user attempts the question with partially correct options exclusively from the alternative accordion, then the user should be awarded 0 points and on switching to \'Grading\' view, correct icon should be displayed besides the correctly answered dropdowns, no icon should be displayed for unattempted dropdown, a status message with text \'Your answer is incorrect\' and correct answer section with all correct answers from the alternative accordion along with dropdown numeration should be displayed', () => {
@@ -113,13 +113,13 @@ describe('Create item page - Fill in the gaps with dropdown: All or nothing with
             fillInTheGapsDropdownPage.steps.verifyCorrectIncorrectAnswerLabel('incorrect');
             fillInTheGapsDropdownPage.steps.verifyCorrectAnswerResponsesInCorrectAnswerSectionAndCount(alternateAnswerArray);
             fillInTheGapsDropdownPage.steps.verifyQuestionPreviewStateWhenSwitchingBackToStudentView();
-            cy.log('When the user has attempted the question with partially correct options exclusively from the alternative accordion and clicks on \'Check answer\' button, then correct icon should be displayed besides the correctly answered dropdowns, no icon should be displayed for unattempted dropdown, a status message with text \'Your answer is incorrect\' and correct answer section should not be displayed')
+            /*cy.log('When the user has attempted the question with partially correct options exclusively from the alternative accordion and clicks on \'Check answer\' button, then correct icon should be displayed besides the correctly answered dropdowns, no icon should be displayed for unattempted dropdown, a status message with text \'Your answer is incorrect\' and correct answer section should not be displayed')
             fillInTheGapsDropdownPage.steps.checkAnswer();
             fillInTheGapsDropdownPage.steps.verifyCorrectOptionIcon(0);
             fillInTheGapsDropdownPage.steps.verifyCorrectIncorrectIconNotExist(1);
             fillInTheGapsDropdownPage.steps.verifyCorrectIncorrectIconNotExist(2);
             fillInTheGapsDropdownPage.steps.verifyCorrectIncorrectAnswerLabel('incorrect');
-            fillInTheGapsDropdownPage.steps.verifyCorrectAnswerSectionNotExists();
+            fillInTheGapsDropdownPage.steps.verifyCorrectAnswerSectionNotExists();*/
         });
 
         it('When the user attempts the question partially correct with all the responses correct as per the correct accordion but one response incomplete, then the user should be awarded 0 points and on switching to \'Grading\' view, correct icon should be displayed besides the response from the correct accordion and no icon should be displayed for unattempted dropdown, a status message with text \'Your answer is incorrect\' and correct answer section with all correct answers from the alternative accordion along with dropdown numeration should be displayed', () => {
@@ -133,13 +133,13 @@ describe('Create item page - Fill in the gaps with dropdown: All or nothing with
             fillInTheGapsDropdownPage.steps.verifyCorrectIncorrectAnswerLabel('incorrect');
             fillInTheGapsDropdownPage.steps.verifyCorrectAnswerResponsesInCorrectAnswerSectionAndCount(alternateAnswerArray);
             fillInTheGapsDropdownPage.steps.verifyQuestionPreviewStateWhenSwitchingBackToStudentView();
-            cy.log('When the user has attempted the question with partially correct with all the response correct as per the alternative accordion but one incomplete and clicks on \'Check answer\' button, then correct icon should be displayed besides the response from the correct accordion and no icon should be displayed for unattempted dropdown, a status message with text \'Your answer is incorrect\' and correct answer section should not be displayed')
+            /*cy.log('When the user has attempted the question with partially correct with all the response correct as per the alternative accordion but one incomplete and clicks on \'Check answer\' button, then correct icon should be displayed besides the response from the correct accordion and no icon should be displayed for unattempted dropdown, a status message with text \'Your answer is incorrect\' and correct answer section should not be displayed')
             fillInTheGapsDropdownPage.steps.checkAnswer();
             fillInTheGapsDropdownPage.steps.verifyCorrectOptionIcon(0);
             fillInTheGapsDropdownPage.steps.verifyCorrectOptionIcon(1);
             fillInTheGapsDropdownPage.steps.verifyCorrectIncorrectIconNotExist(2);
             fillInTheGapsDropdownPage.steps.verifyCorrectIncorrectAnswerLabel('incorrect');
-            fillInTheGapsDropdownPage.steps.verifyCorrectAnswerSectionNotExists();
+            fillInTheGapsDropdownPage.steps.verifyCorrectAnswerSectionNotExists();*/
         });
 
         it('When the user has attempted the question with equal number of correct responses from correct and alternative accordion, then the user should be awarded with 0 points and on switching to \'Grading\' view, correct icon should be displayed besides alternative accordion responses, incorrect icon should be displayed besides correct accordion responses, a status message with text \'Your answer is incorrect\' and correct answer section with all correct answers from the alternative accordion along with dropdown numeration should be displayed', () => {
@@ -153,13 +153,13 @@ describe('Create item page - Fill in the gaps with dropdown: All or nothing with
             fillInTheGapsDropdownPage.steps.verifyCorrectIncorrectAnswerLabel('incorrect');
             fillInTheGapsDropdownPage.steps.verifyCorrectAnswerResponsesInCorrectAnswerSectionAndCount(alternateAnswerArray);
             fillInTheGapsDropdownPage.steps.verifyQuestionPreviewStateWhenSwitchingBackToStudentView();
-            cy.log('When the user has attempted the question with equal number of correct responses from correct and alternative accordion and clicks on \'Check answer\' button, then correct icon should be displayed besides alternative accordion responses, incorrect icon should be displayed besides correct accordion responses a status message with text \'Your answer is incorrect\' and correct answer section should not be displayed')
+            /*cy.log('When the user has attempted the question with equal number of correct responses from correct and alternative accordion and clicks on \'Check answer\' button, then correct icon should be displayed besides alternative accordion responses, incorrect icon should be displayed besides correct accordion responses a status message with text \'Your answer is incorrect\' and correct answer section should not be displayed')
             fillInTheGapsDropdownPage.steps.checkAnswer();
             fillInTheGapsDropdownPage.steps.verifyIncorrectOptionIcon(0);
             fillInTheGapsDropdownPage.steps.verifyCorrectOptionIcon(1);
             fillInTheGapsDropdownPage.steps.verifyCorrectIncorrectIconNotExist(2);
             fillInTheGapsDropdownPage.steps.verifyCorrectIncorrectAnswerLabel('incorrect');
-            fillInTheGapsDropdownPage.steps.verifyCorrectAnswerSectionNotExists();
+            fillInTheGapsDropdownPage.steps.verifyCorrectAnswerSectionNotExists();*/
         });
 
         it('Race condition : When the user attempts the question with the common response between correct and alternative accordion, then the user should be awarded with 0 points and on switching to \'Grading\' view, correct icon should be besides the common response, no icon should be displayed for unattempted dropdown, \'Your answer is incorrect\' and correct answer section with all correct answers from the alternative accordion along with dropdown numeration should be displayed', () => {
@@ -173,13 +173,13 @@ describe('Create item page - Fill in the gaps with dropdown: All or nothing with
             fillInTheGapsDropdownPage.steps.verifyCorrectIncorrectAnswerLabel('incorrect');
             fillInTheGapsDropdownPage.steps.verifyCorrectAnswerResponsesInCorrectAnswerSectionAndCount(alternateAnswerArray);
             fillInTheGapsDropdownPage.steps.verifyQuestionPreviewStateWhenSwitchingBackToStudentView();
-            cy.log('When the user has attempted the question with common response between correct and alternative accordion and clicks on \'Check answer\' button, then correct icon should be displayed besides the correctly answered dropdowns, no icon should be displayed for unattempted dropdown, a status message with text \'Your answer is incorrect\' and correct answer section should not be displayed')
+            /*cy.log('When the user has attempted the question with common response between correct and alternative accordion and clicks on \'Check answer\' button, then correct icon should be displayed besides the correctly answered dropdowns, no icon should be displayed for unattempted dropdown, a status message with text \'Your answer is incorrect\' and correct answer section should not be displayed')
             fillInTheGapsDropdownPage.steps.checkAnswer();
             fillInTheGapsDropdownPage.steps.verifyCorrectIncorrectIconNotExist(0);
             fillInTheGapsDropdownPage.steps.verifyCorrectIncorrectIconNotExist(1);
             fillInTheGapsDropdownPage.steps.verifyCorrectOptionIcon(2);
             fillInTheGapsDropdownPage.steps.verifyCorrectIncorrectAnswerLabel('incorrect');
-            fillInTheGapsDropdownPage.steps.verifyCorrectAnswerSectionNotExists();
+            fillInTheGapsDropdownPage.steps.verifyCorrectAnswerSectionNotExists();*/
         });
 
         it('When the user attempts the question incorrectly, then the user should be awarded 0 points and on switching to \'Grading\' view, incorrect icons should be displayed besides all incorrect dropdowns, no icon should be displayed for unattempted dropdown, a status message with text \'Your answer is incorrect\' and correct answer section with all correct answers from the alternative accordion along with dropdown numeration should be displayed', () => {
@@ -193,13 +193,13 @@ describe('Create item page - Fill in the gaps with dropdown: All or nothing with
             fillInTheGapsDropdownPage.steps.verifyCorrectIncorrectAnswerLabel('incorrect');
             fillInTheGapsDropdownPage.steps.verifyCorrectAnswerResponsesInCorrectAnswerSectionAndCount(alternateAnswerArray);
             fillInTheGapsDropdownPage.steps.verifyQuestionPreviewStateWhenSwitchingBackToStudentView();
-            cy.log('When the user has attempted the question incorrectly and clicks on \'Check answer\' button, then incorrect icons should be displayed besides all incorrect dropdowns, no icon should be displayed for unattempted dropdown, a status message with text \'Your answer is incorrect\' and correct answer section should not be displayed')
+            /*cy.log('When the user has attempted the question incorrectly and clicks on \'Check answer\' button, then incorrect icons should be displayed besides all incorrect dropdowns, no icon should be displayed for unattempted dropdown, a status message with text \'Your answer is incorrect\' and correct answer section should not be displayed')
             fillInTheGapsDropdownPage.steps.checkAnswer();
             fillInTheGapsDropdownPage.steps.verifyIncorrectOptionIcon(0);
             fillInTheGapsDropdownPage.steps.verifyCorrectIncorrectIconNotExist(1);
             fillInTheGapsDropdownPage.steps.verifyCorrectIncorrectIconNotExist(2);
             fillInTheGapsDropdownPage.steps.verifyCorrectIncorrectAnswerLabel('incorrect');
-            fillInTheGapsDropdownPage.steps.verifyCorrectAnswerSectionNotExists();
+            fillInTheGapsDropdownPage.steps.verifyCorrectAnswerSectionNotExists();*/
         });
     });
 });