itemengine-cypress-automation 1.0.211 → 1.0.212

package/cypress/e2e/ILC/FillInTheGapsOverImageDragAndDrop/styleAndLayoutCustomizationDraggableOptionsPanel.js

@@ -0,0 +1,127 @@
+import { fillInTheGapsOverImageDragAndDropPage } from "../../../pages";
+import abortEarlySetup from "../../../support/helpers/abortEarly";
+import utilities from "../../../support/helpers/utilities";
+
+const panelPlacement = ['Bottom', 'Top', 'Left', 'Right'];
+const optionAlignment = ['Left', 'Center', 'Right'];
+
+describe('Drag and drop into categories - Style and layout customization', () => {
+    before(() => {
+        cy.loginAs('admin');
+    });
+
+    describe('Style and Layout customization accordion: Draggable options panel placement specify correct answer', () => {
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsOverImageDragAndDropPage.steps.navigateToCreateQuestion('fill in the gaps over image with drag and drop');
+            cy.barsPreLoaderWait();
+            fillInTheGapsOverImageDragAndDropPage.steps.expandStyleAndLayoutCustomizationAccordion();
+            fillInTheGapsOverImageDragAndDropPage.steps.uploadFile('highlightImage.jpg');
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyImageIsUploaded();
+            fillInTheGapsOverImageDragAndDropPage.steps.insertResponseArea(10);
+            fillInTheGapsOverImageDragAndDropPage.steps.selectResponseArea(0);
+            fillInTheGapsOverImageDragAndDropPage.steps.addInputToOptionsInputField(['Leaves', 'Flower']);
+        });
+
+        it('\'Draggable option panel\' label should be displayed', () => {
+            utilities.verifyInnerText(fillInTheGapsOverImageDragAndDropPage.draggableOptionPanelPlacementLabel(), 'Draggable option panel');
+        });
+
+        it(`\'Panel placement\' label should be displayed along with ${panelPlacement} options should be displayed and by default \'Bottom\' should be selected`, () => {
+            utilities.verifyInnerText(fillInTheGapsOverImageDragAndDropPage.panelPlacementLabel(), 'Panel placement');
+            panelPlacement.forEach((option) => {
+                utilities.verifyElementVisibilityState(fillInTheGapsOverImageDragAndDropPage.panelPlacementOptions(option), 'exist');
+            });
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyPanelPlacementOptionSelected('Bottom');
+        });
+    });
+
+    describe('Style and Layout customization accordion: Draggable options panel placement preview tab', () => {
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsOverImageDragAndDropPage.steps.navigateToCreateQuestion('fill in the gaps over image with drag and drop');
+            cy.barsPreLoaderWait();
+            fillInTheGapsOverImageDragAndDropPage.steps.expandStyleAndLayoutCustomizationAccordion();
+            fillInTheGapsOverImageDragAndDropPage.steps.uploadFile('highlightImage.jpg');
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyImageIsUploaded();
+            fillInTheGapsOverImageDragAndDropPage.steps.insertResponseArea(10);
+            fillInTheGapsOverImageDragAndDropPage.steps.selectResponseArea(0);
+            fillInTheGapsOverImageDragAndDropPage.steps.addInputToOptionsInputField(['Leaves', 'Flower']);
+            fillInTheGapsOverImageDragAndDropPage.steps.switchToPreviewTab();
+        });
+
+        it('By default the option panel placement should be at the bottom', () => {
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyPanelPlacementPreviewTab('Bottom');
+        });
+
+        panelPlacement.forEach((option) => {
+            it(`When user selects ${option} option from the Panel placement options then panel placement should be at the ${option} in preview tab`, () => {
+                fillInTheGapsOverImageDragAndDropPage.steps.switchToEditTab();
+                fillInTheGapsOverImageDragAndDropPage.steps.selectPanelPlacementOption(option)
+                fillInTheGapsOverImageDragAndDropPage.steps.switchToPreviewTab();
+                fillInTheGapsOverImageDragAndDropPage.steps.verifyPanelPlacementPreviewTab(option);
+            });
+        });
+    });
+
+    describe('Style and Layout customization accordion: Draggable Option alignment in panel specify correct answer', () => {
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsOverImageDragAndDropPage.steps.navigateToCreateQuestion('fill in the gaps over image with drag and drop');
+            cy.barsPreLoaderWait();
+            fillInTheGapsOverImageDragAndDropPage.steps.expandStyleAndLayoutCustomizationAccordion();
+            fillInTheGapsOverImageDragAndDropPage.steps.uploadFile('highlightImage.jpg');
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyImageIsUploaded();
+            fillInTheGapsOverImageDragAndDropPage.steps.insertResponseArea(10);
+            fillInTheGapsOverImageDragAndDropPage.steps.selectResponseArea(0);
+            fillInTheGapsOverImageDragAndDropPage.steps.addInputToOptionsInputField(['Leaves', 'Flower']);
+        });
+
+        it(`\'Option alignment in panel\' label should be displayed along with ${optionAlignment} options should be displayed and by default \'Left\' should be selected`, () => {
+            utilities.verifyInnerText(fillInTheGapsOverImageDragAndDropPage.optionAlignmentInPanelLabel(), 'Option alignment in panel');
+            optionAlignment.forEach((option) => {
+                utilities.verifyElementVisibilityState(fillInTheGapsOverImageDragAndDropPage.optionAlignmentInPanelOptions(option.toLowerCase()), 'exist');
+            });
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyOptionAlignmentInPanelOptionSelected('left');
+        });
+
+        it('By default the option alignment in panel placement should be at the left', () => {
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyOptionAlignmentInPanelInSpecifyCorrectAnswer('Left');
+        });
+
+        optionAlignment.forEach((option) => {
+            it(`When user selects ${option} option from the option alignment in panel placement options then option alignment placement should be at the ${option} in specify correct answer section`, () => {
+                fillInTheGapsOverImageDragAndDropPage.steps.selectOptionAlignmentInPanelOption(option.toLowerCase());
+                fillInTheGapsOverImageDragAndDropPage.steps.verifyOptionAlignmentInPanelInSpecifyCorrectAnswer(option);
+            });
+        });
+    });
+
+    describe('Style and Layout customization accordion: Draggable Option alignment in panel preview tab', () => {
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsOverImageDragAndDropPage.steps.navigateToCreateQuestion('fill in the gaps over image with drag and drop');
+            cy.barsPreLoaderWait();
+            fillInTheGapsOverImageDragAndDropPage.steps.expandStyleAndLayoutCustomizationAccordion();
+            fillInTheGapsOverImageDragAndDropPage.steps.uploadFile('highlightImage.jpg');
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyImageIsUploaded();
+            fillInTheGapsOverImageDragAndDropPage.steps.insertResponseArea(10);
+            fillInTheGapsOverImageDragAndDropPage.steps.selectResponseArea(0);
+            fillInTheGapsOverImageDragAndDropPage.steps.addInputToOptionsInputField(['Leaves', 'Flower']);
+            fillInTheGapsOverImageDragAndDropPage.steps.switchToPreviewTab();
+        });
+
+        it('By default the option alignment in panel placement should be at the left', () => {
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyOptionAlignmentInPanelInPreviewTab('Left');
+        });
+
+        optionAlignment.forEach((option) => {
+            it(`When user selects ${option} option from the option alignment in panel placement options then option alignment placement should be at the ${option} in preview tab`, () => {
+                fillInTheGapsOverImageDragAndDropPage.steps.switchToEditTab();
+                fillInTheGapsOverImageDragAndDropPage.steps.selectOptionAlignmentInPanelOption(option.toLowerCase());
+                fillInTheGapsOverImageDragAndDropPage.steps.switchToPreviewTab();
+                fillInTheGapsOverImageDragAndDropPage.steps.verifyOptionAlignmentInPanelInPreviewTab(option);
+            });
+        });
+    });
+});

package/cypress/e2e/ILC/FillInTheGapsOverImageDragAndDrop/styleAndLayoutCutomizationDraggableOptionProperties.js

@@ -0,0 +1,253 @@
+import { fillInTheGapsOverImageDragAndDropPage } 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 modifiedColor = 'rgb(121, 60, 60)'
+
+describe('Drag and drop into categories - Style and layout customization', () => {
+    before(() => {
+        cy.loginAs('admin');
+    });
+
+    describe('Style and Layout customization accordion: Draggable options drag icon handle', () => {
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsOverImageDragAndDropPage.steps.navigateToCreateQuestion('fill in the gaps over image with drag and drop');
+            cy.barsPreLoaderWait();
+            fillInTheGapsOverImageDragAndDropPage.steps.expandStyleAndLayoutCustomizationAccordion();
+            fillInTheGapsOverImageDragAndDropPage.steps.uploadFile('highlightImage.jpg');
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyImageIsUploaded();
+            fillInTheGapsOverImageDragAndDropPage.steps.insertResponseArea(10);
+            fillInTheGapsOverImageDragAndDropPage.steps.selectResponseArea(0);
+            fillInTheGapsOverImageDragAndDropPage.steps.addInputToOptionsInputField(['Leaves', 'Flower']);
+        });
+
+        it('Draggable options label should be displayed', () => {
+            utilities.verifyInnerText(fillInTheGapsOverImageDragAndDropPage.draggableOptionsLabel(), 'Draggable options');
+        });
+
+        it('Drag handle icon label should be displayed with 3 options and by default the first option should be selected draggable options', () => {
+            utilities.verifyInnerText(fillInTheGapsOverImageDragAndDropPage.dragHandleIconLabel(), 'Drag handle icon');
+            utilities.verifyElementCount(fillInTheGapsOverImageDragAndDropPage.dragHandleOptions(), 3);
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyDragHandleOptionSelected(0);
+        });
+
+        it('By default, the default selected drag handle should be displayed in the specify correct answer section draggable options', () => {
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyDragHandleIconSpecifyCorrectAnswer('drag icon');
+        });
+
+        it('When user selects arrows drag handle icon then arrow icons should be displayed the specify correct answer section draggable options', () => {
+            fillInTheGapsOverImageDragAndDropPage.steps.selectDragHandleOption(1);
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyDragHandleIconSpecifyCorrectAnswer('arrow icon');
+        });
+
+        it('When user selects none option then drag handles should not be displayed for the specify correct answer section draggable options', () => {
+            fillInTheGapsOverImageDragAndDropPage.steps.selectDragHandleOption(2);
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyDragHandleIconSpecifyCorrectAnswer('none');
+        });
+    });
+
+    describe('Style and Layout customization accordion: Draggable options drag icon handle', () => {
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsOverImageDragAndDropPage.steps.navigateToCreateQuestion('fill in the gaps over image with drag and drop');
+            cy.barsPreLoaderWait();
+            fillInTheGapsOverImageDragAndDropPage.steps.expandStyleAndLayoutCustomizationAccordion();
+            fillInTheGapsOverImageDragAndDropPage.steps.uploadFile('highlightImage.jpg');
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyImageIsUploaded();
+            fillInTheGapsOverImageDragAndDropPage.steps.insertResponseArea(10);
+            fillInTheGapsOverImageDragAndDropPage.steps.selectResponseArea(0);
+            fillInTheGapsOverImageDragAndDropPage.steps.addInputToOptionsInputField(['Leaves', 'Flower']);
+            fillInTheGapsOverImageDragAndDropPage.steps.switchToPreviewTab();
+        });
+
+        it('By default, the default selected drag handle should be displayed in the preview tab draggable options', () => {
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyDragHandleIconPreviewTab('drag icon');
+        });
+
+        it('When user selects arrows drag handle icon then arrow icons should be displayed the preview tab draggable options', () => {
+            fillInTheGapsOverImageDragAndDropPage.steps.switchToEditTab();
+            fillInTheGapsOverImageDragAndDropPage.steps.selectDragHandleOption(1);
+            fillInTheGapsOverImageDragAndDropPage.steps.switchToPreviewTab();
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyDragHandleIconPreviewTab('arrow icon');
+        });
+
+        it('When user selects none option then drag handles should not be displayed for the preview tab draggable options', () => {
+            fillInTheGapsOverImageDragAndDropPage.steps.switchToEditTab();
+            fillInTheGapsOverImageDragAndDropPage.steps.selectDragHandleOption(2);
+            fillInTheGapsOverImageDragAndDropPage.steps.switchToPreviewTab();
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyDragHandleIconPreviewTab('none');
+        });
+    });
+
+    describe('Style and Layout customization accordion: Draggable options Fill color edit tab contents and functionality', () => {
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsOverImageDragAndDropPage.steps.navigateToCreateQuestion('fill in the gaps over image with drag and drop');
+            cy.barsPreLoaderWait();
+            fillInTheGapsOverImageDragAndDropPage.steps.expandStyleAndLayoutCustomizationAccordion();
+            fillInTheGapsOverImageDragAndDropPage.steps.uploadFile('highlightImage.jpg');
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyImageIsUploaded();
+            fillInTheGapsOverImageDragAndDropPage.steps.insertResponseArea(10);
+            fillInTheGapsOverImageDragAndDropPage.steps.selectResponseArea(0);
+            fillInTheGapsOverImageDragAndDropPage.steps.addInputToOptionsInputField(['Leaves', 'Flower']);
+        });
+
+        it('\'Fill color\' label and two color blocks and an \'Edit color\' button should be displayed. The selected color block should be of color \'rgb(245, 248, 255)\' and the other color block should have \'No color\'', () => {
+            utilities.verifyInnerText(fillInTheGapsOverImageDragAndDropPage.draggableOptionsFillColorLabel(), 'Fill color');
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyColorBlockColor(4, css.color.defaultBackground);
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyColorBlockSelectedState(0);
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyColorBlockColor(5, css.color.none);
+            utilities.verifyInnerText(utilities.getNthElement(fillInTheGapsOverImageDragAndDropPage.editColorButton(), 2), 'Edit color');
+            utilities.verifyElementVisibilityState(fillInTheGapsOverImageDragAndDropPage.editColorButton(), 'visible');
+        });
+
+        it('When the user hovers over the color blocks in the \'Fill color\' section, hex code of the selected color should be displayed in a tooltip', () => {
+            utilities.getNthElement(fillInTheGapsOverImageDragAndDropPage.colorBlock(), 4)
+                .verifyTooltip('#FFFFFF');
+            utilities.getNthElement(fillInTheGapsOverImageDragAndDropPage.colorBlock(), 5)
+                .verifyTooltip('None');
+        });
+
+        it('By default, the first color option should be in selected state', () => {
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyColorBlockSelectedState(4);
+        });
+
+        it('When the default color block is in selected state in the \'Fill color\' section, then the background color of the grid in the specify correct answer section should be the default selected color', () => {
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyDraggableOptionsFillColorSpecifyCorrectAnswerSection(css.color.defaultBackground);
+        });
+
+        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 grid in the specify correct answer section', () => {
+            fillInTheGapsOverImageDragAndDropPage.steps.selectColorBlock(5);
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyDraggableOptionsFillColorSpecifyCorrectAnswerSection(css.color.defaultBackground);
+        });
+
+        it('When the user clicks on the \'Edit color\' button, modifies color for the selected color block, then the background color of the grid in the specify correct answer section should be the modified selected color', () => {
+            fillInTheGapsOverImageDragAndDropPage.steps.editColor(2);
+            colorPopupComponent.steps.clickInColorSaturationPalette();
+            colorPopupComponent.steps.clickOnOkButton();
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyDraggableOptionsFillColorSpecifyCorrectAnswerSection(modifiedColor);
+        });
+    });
+
+    describe('Style and Layout customization accordion: Draggable options Fill color preview tab functionality', () => {
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsOverImageDragAndDropPage.steps.navigateToCreateQuestion('fill in the gaps over image with drag and drop');
+            cy.barsPreLoaderWait();
+            fillInTheGapsOverImageDragAndDropPage.steps.expandStyleAndLayoutCustomizationAccordion();
+            fillInTheGapsOverImageDragAndDropPage.steps.uploadFile('highlightImage.jpg');
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyImageIsUploaded();
+            fillInTheGapsOverImageDragAndDropPage.steps.insertResponseArea(10);
+            fillInTheGapsOverImageDragAndDropPage.steps.selectResponseArea(0);
+            fillInTheGapsOverImageDragAndDropPage.steps.addInputToOptionsInputField(['Leaves', 'Flower']);
+        });
+
+        it('When the default color block is in selected state in the \'Fill color\' section, then the background color of the grid in the preview tab should be the default selected color', () => {
+            fillInTheGapsOverImageDragAndDropPage.steps.switchToPreviewTab();
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyDraggableOptionsFillColorPreviewTab(css.color.defaultBackground);
+        });
+
+        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 grid in the preview tab', () => {
+            fillInTheGapsOverImageDragAndDropPage.steps.switchToEditTab();
+            fillInTheGapsOverImageDragAndDropPage.steps.selectColorBlock(5);
+            fillInTheGapsOverImageDragAndDropPage.steps.switchToPreviewTab();
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyDraggableOptionsFillColorPreviewTab(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', () => {
+            fillInTheGapsOverImageDragAndDropPage.steps.switchToEditTab();
+            fillInTheGapsOverImageDragAndDropPage.steps.editColor(2);
+            colorPopupComponent.steps.clickInColorSaturationPalette();
+            colorPopupComponent.steps.clickOnOkButton();
+            fillInTheGapsOverImageDragAndDropPage.steps.switchToPreviewTab();
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyDraggableOptionsFillColorPreviewTab(modifiedColor);
+        });
+    });
+
+    describe('Style and Layout customization accordion: Draggable options Border color edit tab contents and functionality', () => {
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsOverImageDragAndDropPage.steps.navigateToCreateQuestion('fill in the gaps over image with drag and drop');
+            cy.barsPreLoaderWait();
+            fillInTheGapsOverImageDragAndDropPage.steps.expandStyleAndLayoutCustomizationAccordion();
+            fillInTheGapsOverImageDragAndDropPage.steps.uploadFile('highlightImage.jpg');
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyImageIsUploaded();
+            fillInTheGapsOverImageDragAndDropPage.steps.insertResponseArea(10);
+            fillInTheGapsOverImageDragAndDropPage.steps.selectResponseArea(0);
+            fillInTheGapsOverImageDragAndDropPage.steps.addInputToOptionsInputField(['Leaves', 'Flower']);
+        });
+
+        it('\'Border color\' label and two color blocks and an \'Edit color\' button should be displayed. The selected color block should be of color \'rgb(82, 0, 255) and the other color block should have \'No color\'', () => {
+            utilities.verifyInnerText(fillInTheGapsOverImageDragAndDropPage.borderColorLabel(), 'Border color');
+            utilities.verifyInnerText(utilities.getNthElement(fillInTheGapsOverImageDragAndDropPage.editColorButton(), 3), 'Edit color');
+            utilities.verifyElementVisibilityState(fillInTheGapsOverImageDragAndDropPage.editColorButton(), 'visible');
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyColorBlockColor(6, css.color.figDefaultComponentBorder);
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyColorBlockSelectedState(2);
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyColorBlockColor(7, css.color.none);
+        });
+
+        it('When the user hovers over the color blocks in the \'Border color\' section, hex code of the selected color should be displayed in a tooltip', () => {
+            utilities.getNthElement(fillInTheGapsOverImageDragAndDropPage.colorBlock(), 6)
+                .verifyTooltip('#6B8BFF');
+            utilities.getNthElement(fillInTheGapsOverImageDragAndDropPage.colorBlock(), 7)
+                .verifyTooltip('None');
+        });
+
+        it('By default, the first color option should be in selected state', () => {
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyColorBlockSelectedState(6);
+        });
+
+        it('When the default color block is in selected state in the \'Border color\' section, then the border color of the grid in the specify correct answer section should be the default selected color', () => {
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyDraggableOptionsBorderColorSpecifyCorrectAnswer(css.color.figDefaultComponentBorder);
+        });
+
+        it('When the user selects the \'None\' color block, it should get in selected state and the no border color should be present for the grid in the specify correct answer section', () => {
+            fillInTheGapsOverImageDragAndDropPage.steps.selectColorBlock(7);
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyDraggableOptionsBorderColorSpecifyCorrectAnswer(css.color.defaultBackground);
+        });
+
+        it('When the user clicks on the \'Edit color\' button, modifies color for the selected color block, then the border color of the grid in the specify correct answer section should be the modified selected color', () => {
+            fillInTheGapsOverImageDragAndDropPage.steps.editColor(3);
+            colorPopupComponent.steps.clickInColorSaturationPalette();
+            colorPopupComponent.steps.clickOnOkButton();
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyDraggableOptionsBorderColorSpecifyCorrectAnswer(modifiedColor);
+        });
+    });
+
+    describe('Style and Layout customization accordion: Draggable options Border color preview tab functionality', () => {
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsOverImageDragAndDropPage.steps.navigateToCreateQuestion('fill in the gaps over image with drag and drop');
+            cy.barsPreLoaderWait();
+            fillInTheGapsOverImageDragAndDropPage.steps.expandStyleAndLayoutCustomizationAccordion();
+            fillInTheGapsOverImageDragAndDropPage.steps.uploadFile('highlightImage.jpg');
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyImageIsUploaded();
+            fillInTheGapsOverImageDragAndDropPage.steps.insertResponseArea(10);
+            fillInTheGapsOverImageDragAndDropPage.steps.selectResponseArea(0);
+            fillInTheGapsOverImageDragAndDropPage.steps.addInputToOptionsInputField(['Leaves', 'Flower']);
+            fillInTheGapsOverImageDragAndDropPage.steps.switchToPreviewTab();
+        });
+
+        it('When the default color block is in selected state in the \'Fill color\' section, then the border color of the grid in the preview tab should be the default selected color', () => {
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyDraggableOptionsBorderColorPreviewTab(css.color.figDefaultComponentBorder);
+        });
+
+        it('When the user selects the \'None\' color block, it should get in selected state and the no border color should be present for the grid in the preview tab', () => {
+            fillInTheGapsOverImageDragAndDropPage.steps.switchToEditTab();
+            fillInTheGapsOverImageDragAndDropPage.steps.selectColorBlock(7);
+            fillInTheGapsOverImageDragAndDropPage.steps.switchToPreviewTab();
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyDraggableOptionsBorderColorPreviewTab(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', () => {
+            fillInTheGapsOverImageDragAndDropPage.steps.switchToEditTab();
+            fillInTheGapsOverImageDragAndDropPage.steps.editColor(3);
+            colorPopupComponent.steps.clickInColorSaturationPalette();
+            colorPopupComponent.steps.clickOnOkButton();
+            fillInTheGapsOverImageDragAndDropPage.steps.switchToPreviewTab();
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyDraggableOptionsBorderColorPreviewTab(modifiedColor);
+        });
+    });
+});

package/cypress/e2e/ILC/FillInTheGapsOverImageDropdownNew/allOrNothingForAllView.smoke.js

@@ -103,7 +103,7 @@ describe('Create item page - Fill in the gaps over image - dropdown: All or noth
                 });
             };
 
-            it('When the user selects \'Grading\' view without attempting the question, dropdown numeration should be displayed, correct answers section with a label \'Correct answers\' should be displayed with correct answers and respective option numeration', () => {
+            it('When the user selects \'Grading\' view without attempting the question, dropdown numeration should be displayed, correct/incorrect status message should not be displayed, correct answers section with a label \'Correct answers\' should be displayed with correct answers and respective option numeration', () => {
                 if (view === 'Grading view') {
                     studentViewPage.steps.submitResponse();
                     utilities.verifyElementVisibilityState(dialogBoxBase.dialogBox(), 'visible');
@@ -117,6 +117,7 @@ describe('Create item page - Fill in the gaps over image - dropdown: All or noth
                 };
                 fillInTheGapsOverImageDropdownPage.steps.verifyDropdownNumerationPreviewTab();
                 utilities.verifyInnerText(fillInTheGapsOverImageDropdownPage.correctAnswersLabel(), 'Correct answers');
+                fillInTheGapsOverImageDropdownPage.steps.verifyCorrectIncorrectStatusMessageNotExists();
                 fillInTheGapsOverImageDropdownPage.steps.verifyCorrectAnswerResponsesInCorrectAnswerSectionAndCount(correctAnswerArray);
             });
 

package/cypress/e2e/ILC/FillInTheGapsOverImageTextNew/allOrNothingForAllViews.smoke.js

@@ -95,7 +95,7 @@ describe('Create item page - Fill in the gaps over image - text: All or nothing
                 });
             };
 
-            it('When the user selects \'Grading\' view without attempting the question, dropzone numeration should be displayed, correct answers section with a label \'Correct answers\' should be displayed with correct answers and respective option numeration', () => {
+            it('When the user selects \'Grading\' view without attempting the question, dropzone numeration should be displayed, correct/incorrect status message should not be displayed, correct answers section with a label \'Correct answers\' should be displayed with correct answers and respective option numeration', () => {
                 if (view === 'Grading view') {
                     studentViewPage.steps.submitResponse();
                     utilities.verifyElementVisibilityState(dialogBoxBase.dialogBox(), 'visible');
@@ -109,6 +109,7 @@ describe('Create item page - Fill in the gaps over image - text: All or nothing
                 };
                 fillInTheGapsOverImageTextPage.steps.verifyResponseAreaNumeration();
                 utilities.verifyInnerText(fillInTheGapsOverImageTextPage.correctAnswersLabel(), 'Correct answers');
+                fillInTheGapsOverImageTextPage.steps.verifyCorrectIncorrectStatusMessageNotExists();
                 fillInTheGapsOverImageTextPage.steps.verifyCorrectAnswerResponsesInCorrectAnswerSectionAndCount(['Flower', 'Leaf', 'Stem']);
             });
 

package/cypress/e2e/ILC/FillInTheGapsTextNew/allOrNothingForAllViews.smoke.js

@@ -87,7 +87,7 @@ describe('Create item page - Fill in the gaps with text: All or nothing ', () =>
                 });
             };
 
-            it('When the user selects \'Grading\' view without attempting the question, dropzone numeration should be displayed, correct answers section with a label \'Correct answers\' should be displayed with correct answers and respective option numeration', () => {
+            it('When the user selects \'Grading\' view without attempting the question, dropzone numeration should be displayed, correct/incorrect status message should not be displayed, correct answers section with a label \'Correct answers\' should be displayed with correct answers and respective option numeration', () => {
                 if (view === 'Grading view') {
                     studentViewPage.steps.submitResponse();
                     utilities.verifyElementVisibilityState(dialogBoxBase.dialogBox(), 'visible');
@@ -101,6 +101,7 @@ describe('Create item page - Fill in the gaps with text: All or nothing ', () =>
                 };
                 fillInTheGapsTextPage.steps.verifyResponseAreaNumeration();
                 utilities.verifyInnerText(fillInTheGapsTextPage.correctAnswersLabel(), 'Correct answers');
+                fillInTheGapsTextPage.steps.verifyCorrectIncorrectStatusMessageNotExists();
                 fillInTheGapsTextPage.steps.verifyCorrectAnswerResponsesInCorrectAnswerSectionAndCount(['Flower', 'Leaf', 'Stem']);
             });
 

package/cypress/e2e/ILC/Graphing/allOrNothingForAllViews.smoke.js

@@ -114,7 +114,7 @@ describe('Create Item page - Graphing: All or nothing ', () => {
                 });
             };
 
-            it('When the user selects \'Grading\' view without attempting the question, the correct answer should be displayed in the correct answer section graph', () => {
+            it('When the user selects \'Grading\' view without attempting the question, the correct answer should be displayed in the correct answer section graph and correct/incorrect status message should not be displayed', () => {
                 if (view === 'Grading view') {
                     studentViewPage.steps.submitResponse();
                     utilities.verifyElementVisibilityState(dialogBoxBase.dialogBox(), 'visible');
@@ -141,6 +141,7 @@ describe('Create Item page - Graphing: All or nothing ', () => {
                 //Correct/incorrect icon
                 //TODO: Remove comment after https://redmine.zeuslearning.com/issues/565569 is resolved
                 //graphingPage.steps.verifyCorrectIncorrectAnswerLabel('incorrect');
+                graphingPage.steps.verifyCorrectIncorrectStatusMessageNotExists();
                 graphingPage.steps.verifyCorrectPointsPlottedOnGraphCorrectAnswerSection([{ x: 6, xRange: 20, y: 0, yRange: 20 }, { x: 6, xRange: 20, y: 5, yRange: 20 }]);
                 graphingPage.steps.verifyCorrectPointsPlottedOnGraphCorrectAnswerSection([{ x: -6, xRange: 20, y: 9, yRange: 20 }, { x: -6, xRange: 20, y: 7, yRange: 20 }, { x: -4, xRange: 20, y: 7, yRange: 20 }, { x: -4, xRange: 20, y: 9, yRange: 20 }, { x: -6, xRange: 20, y: 9, yRange: 20 }]);
             });

package/cypress/e2e/ILC/GridFill/allOrNothingBasicForAllViews.smoke.js

@@ -91,7 +91,7 @@ describe('Create item page - Grid fill: All or nothing', () => {
                 });
             };
             //Failed due to https://redmine.zeuslearning.com/issues/565569
-            it('When the user selects \'Grading\' view without attempting the question, correct answer tick should be displayed in correct answer cell', () => {
+            it('When the user selects \'Grading\' view without attempting the question, correct answer tick should be displayed in correct answer cell and correct/incorrect status message should not be displayed', () => {
                 if (view === 'Grading view') {
                     studentViewPage.steps.submitResponse();
                     utilities.verifyElementVisibilityState(dialogBoxBase.dialogBox(), 'exist');
@@ -106,7 +106,7 @@ describe('Create item page - Grid fill: All or nothing', () => {
                 gridFillPage.steps.verifyCorrectIncorrectResponseIconNotExistPreviewTab(0, 1);
                 gridFillPage.steps.verifyCorrectResponseIconCorrectAnswerSection(0, 0);
                 gridFillPage.steps.verifyCorrectResponseIconCorrectAnswerSection(0, 1);
-                gridFillPage.steps.verifyCorrectIncorrectAnswerLabel('incorrect');
+                gridFillPage.steps.verifyCorrectIncorrectStatusMessageNotExists();
             });
 
             it('When the user attempts the question incorrectly, then the user should be awarded 0 points and on switching to \'Grading\' view, incorrect icon should be displayed in the incorrect cell, incorrect answer border around incorrect cell and correct icon should be displayed in the correct cell, correct answer border around correct cell and a status message with text \'Your answer is incorrect\' in question preview', () => {

package/cypress/e2e/ILC/ImageHighlight/allOrNothingForAllViews.smoke.js

@@ -107,7 +107,7 @@ describe('Create item page - Image highlight: All or nothing ', () => {
                 });
             };
 
-            it('When the user selects \'Grading\' view without attempting the question, highlight numeration should be displayed, correct answers section with a label \'Correct answers\' should be displayed with correct answers and respective option numeration', () => {
+            it('When the user selects \'Grading\' view without attempting the question, highlight numeration should be displayed, correct/incorrect status message should not be displayed, correct answers section with a label \'Correct answers\' should be displayed with correct answers and respective option numeration', () => {
                 if (view === 'Grading view') {
                     studentViewPage.steps.submitResponse();
                     utilities.verifyElementVisibilityState(dialogBoxBase.dialogBox(), 'visible');
@@ -119,7 +119,7 @@ describe('Create item page - Image highlight: All or nothing ', () => {
                     imageHighlightPage.steps.switchToGradingView();
                     imageHighlightPage.steps.verifyPreviewTabPointsBackgroundForIncorrectOrPartiallyCorrectAnswer();
                 };
-                imageHighlightPage.steps.verifyHighlightRegionNumerationPreviewTab()
+                imageHighlightPage.steps.verifyHighlightRegionNumerationPreviewTab();
                 imageHighlightPage.steps.verifyCorrectHighlightRegionNotAttemptedGradingView(0);
                 imageHighlightPage.steps.verifyCorrectHighlightRegionNotAttemptedGradingView(1);
                 imageHighlightPage.steps.verifyDefaultHighlightRegion(2);

package/cypress/e2e/ILC/ListOrderingNew/allOrNothingForAllViews.smoke.js

@@ -96,7 +96,7 @@ describe('Create item page - List ordering: All or nothing ', () => {
                 });
             };
 
-            it('When the user selects \'Grading\' view without attempting the question, then incorrect icons should be displayed besides all incorrect responses, a status message with text \'Your answer is incorrect\' and correct answer section with all correct answers should be displayed', () => {
+            it('When the user selects \'Grading\' view without attempting the question, then correct/incorrect icons and correct incorrect status message should not be displayed and correct answer section with all correct answers should be displayed', () => {
                 if (view === 'Grading view') {
                     studentViewPage.steps.submitResponse();
                     utilities.verifyElementVisibilityState(dialogBoxBase.dialogBox(), 'visible');
@@ -108,11 +108,8 @@ describe('Create item page - List ordering: All or nothing ', () => {
                     listOrderingPage.steps.switchToGradingView();
                     listOrderingPage.steps.verifyPreviewTabPointsBackgroundForIncorrectOrPartiallyCorrectAnswer();
                 };
-                listOrderingPage.steps.verifyIncorrectOptionIcon('sprout');
-                listOrderingPage.steps.verifyIncorrectOptionIcon('plant');
-                listOrderingPage.steps.verifyIncorrectOptionIcon('flower');
-                listOrderingPage.steps.verifyIncorrectOptionIcon('seed');
-                listOrderingPage.steps.verifyCorrectIncorrectAnswerLabel('incorrect');
+                listOrderingPage.steps.verifyCorrectIncorrectIconsNotExist();
+                listOrderingPage.steps.verifyCorrectIncorrectAnswerLabelNotExist();
                 utilities.verifyInnerText(listOrderingPage.correctAnswersLabel(), 'Correct answers');
                 listOrderingPage.steps.verifyOptionsInCorrectAnswerSection(correctAnswerArray);
             });

package/cypress/e2e/ILC/Matching/allOrNothingScoringForAllViews.smoke.js

@@ -96,7 +96,7 @@ describe('Create item page - Matching: All or nothing ', () => {
                 });
             };
 
-            it('When the user selects \'Grading\' view without attempting the question, dropzone numeration should be displayed, correct answers section with a label \'Correct answers\' should be displayed with correct answers and respective option numeration', () => {
+            it('When the user selects \'Grading\' view without attempting the question, dropzone numeration should be displayed, correct/incorrect status message should not be displayed, correct answers section with a label \'Correct answers\' should be displayed with correct answers and respective option numeration', () => {
                 if (view === 'Grading view') {
                     studentViewPage.steps.submitResponse();
                     utilities.verifyElementVisibilityState(dialogBoxBase.dialogBox(), 'visible');
@@ -109,6 +109,8 @@ describe('Create item page - Matching: All or nothing ', () => {
                     matchingPage.steps.verifyPreviewTabPointsBackgroundForIncorrectOrPartiallyCorrectAnswer();
                 };
                 matchingPage.steps.verifyDropzoneNumeration();
+                matchingPage.steps.verifyCorrectIncorrectIconsNotExist();
+                matchingPage.steps.verifyCorrectIncorrectAnswerLabelNotExist();
                 utilities.verifyInnerText(matchingPage.correctAnswersLabel(), 'Correct answers');
                 matchingPage.steps.verifyCorrectAnswerResponsesInCorrectAnswerSectionAndCount([['Elephant'], ['Fish'], ['Cat']]);
             });