itemengine-cypress-automation 1.0.204 → 1.0.205

package/cypress/e2e/ILC/FillInTheGapsOverImageTextNew/styleAndLayoutCustomization.js

@@ -0,0 +1,479 @@
+import { dialogBoxBase, fillInTheGapsOverImageTextPage } 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"];
+const connectorStyles = ["Circle", "Square", "Diamond", "None"]
+
+describe('Create Item page - Fill in the gaps over image with text: Style and layout customization', () => {
+    before(() => {
+        cy.loginAs('admin');
+    });
+
+    describe('Style and layout customization accordion', () => {
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsOverImageTextPage.steps.navigateToCreateQuestion('fill in the gaps over image with text');
+            cy.barsPreLoaderWait();
+        });
+
+        fillInTheGapsOverImageTextPage.tests.verifyStyleAndLayoutCustomizationAccordionProperties();
+    });
+
+    describe('Style and layout customization accordion: Text container section contents', () => {
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsOverImageTextPage.steps.navigateToCreateQuestion('fill in the gaps over image with text');
+            cy.barsPreLoaderWait();
+            fillInTheGapsOverImageTextPage.steps.expandStyleAndLayoutCustomizationAccordion();
+        });
+
+        it('"Text container" label should be displayed', () => {
+            utilities.verifyInnerText(fillInTheGapsOverImageTextPage.componentContainerLabel(), 'Text container');
+        });
+
+        fillInTheGapsOverImageTextPage.tests.verifyFillColorSectionContents();
+
+        fillInTheGapsOverImageTextPage.tests.verifyBorderColorSectionContents();
+
+        fillInTheGapsOverImageTextPage.tests.verifyBorderStyleSectionContents('Dashed');
+
+        fillInTheGapsOverImageTextPage.tests.verifyFillColorTooltips();
+
+        fillInTheGapsOverImageTextPage.tests.verifyBorderColorTooltips();
+
+        fillInTheGapsOverImageTextPage.tests.verifyStyleAndLayoutCustomizationAccordionContentsCSSAndA11y('Dashed');
+    });
+
+    describe('Fill color - Edit tab', () => {
+        const modifiedColor = 'rgb(121, 60, 60)'
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsOverImageTextPage.steps.navigateToCreateQuestion('fill in the gaps over image with text');
+            cy.barsPreLoaderWait();
+            fillInTheGapsOverImageTextPage.steps.uploadFile('highlightImage.jpg');
+            fillInTheGapsOverImageTextPage.steps.verifyImageIsUploaded();
+            fillInTheGapsOverImageTextPage.steps.insertResponseArea(10);
+            fillInTheGapsOverImageTextPage.steps.expandStyleAndLayoutCustomizationAccordion();
+        });
+
+        it('When the default color block is in selected state in the "Fill color" section, then the background color of the text containers in the canvas image should be the default selected color', () => {
+            fillInTheGapsOverImageTextPage.steps.verifyResponseAreaOverImageFillColor(0, 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 text containers in the canvas image', () => {
+            fillInTheGapsOverImageTextPage.steps.selectColorBlock(1);
+            fillInTheGapsOverImageTextPage.steps.verifyResponseAreaOverImageFillColor(0, 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 text containers in the canvas image should be the modified selected color', () => {
+            fillInTheGapsOverImageTextPage.steps.editColor(0);
+            colorPopupComponent.steps.clickInColorSaturationPalette();
+            colorPopupComponent.steps.clickOnOkButton();
+            fillInTheGapsOverImageTextPage.steps.verifyResponseAreaOverImageFillColor(0, modifiedColor);
+        });
+
+        it('When the adds a new text container, then the background color of the newly added text container should be the modified selected color', () => {
+            fillInTheGapsOverImageTextPage.steps.insertResponseArea(60);
+            fillInTheGapsOverImageTextPage.steps.verifyResponseAreaOverImageFillColor(0, modifiedColor);
+            fillInTheGapsOverImageTextPage.steps.verifyResponseAreaOverImageFillColor(1, modifiedColor);
+        });
+    });
+
+    describe('Fill color - Preview tab', () => {
+        const modifiedColor = 'rgb(121, 60, 60)'
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsOverImageTextPage.steps.navigateToCreateQuestion('fill in the gaps over image with text');
+            cy.barsPreLoaderWait();
+            fillInTheGapsOverImageTextPage.steps.uploadFile('highlightImage.jpg');
+            fillInTheGapsOverImageTextPage.steps.verifyImageIsUploaded();
+            fillInTheGapsOverImageTextPage.steps.insertResponseArea(10);
+            fillInTheGapsOverImageTextPage.steps.expandStyleAndLayoutCustomizationAccordion();
+            fillInTheGapsOverImageTextPage.steps.switchToPreviewTab();
+        });
+
+        it('When the default color block is in selected state in the "Fill color" section, then the background color of the text containers in the preview tab should be the default selected color', () => {
+            fillInTheGapsOverImageTextPage.steps.verifyResponseAreaOverImageFillColor(0, 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 text containers in the preview tab', () => {
+            fillInTheGapsOverImageTextPage.steps.switchToEditTab();
+            fillInTheGapsOverImageTextPage.steps.selectColorBlock(1);
+            fillInTheGapsOverImageTextPage.steps.switchToPreviewTab();
+            fillInTheGapsOverImageTextPage.steps.verifyResponseAreaOverImageFillColor(0, css.color.transparent);
+        });
+
+        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', () => {
+            fillInTheGapsOverImageTextPage.steps.switchToEditTab();
+            fillInTheGapsOverImageTextPage.steps.editColor(0);
+            colorPopupComponent.steps.clickInColorSaturationPalette();
+            colorPopupComponent.steps.clickOnOkButton();
+            fillInTheGapsOverImageTextPage.steps.switchToPreviewTab();
+            fillInTheGapsOverImageTextPage.steps.verifyResponseAreaOverImageFillColor(0, modifiedColor);
+        });
+
+        it('The background color of the text containers in the preview tab should be the modified selected color', () => {
+            fillInTheGapsOverImageTextPage.steps.switchToEditTab();
+            fillInTheGapsOverImageTextPage.steps.insertResponseArea(60);
+            fillInTheGapsOverImageTextPage.steps.switchToPreviewTab();
+            fillInTheGapsOverImageTextPage.steps.verifyResponseAreaOverImageFillColor(0, modifiedColor);
+            fillInTheGapsOverImageTextPage.steps.verifyResponseAreaOverImageFillColor(1, modifiedColor);
+        });
+    });
+
+    describe('Border color - Edit tab', () => {
+        const modifiedColor = 'rgb(121, 60, 60)'
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsOverImageTextPage.steps.navigateToCreateQuestion('fill in the gaps over image with text');
+            cy.barsPreLoaderWait();
+            fillInTheGapsOverImageTextPage.steps.uploadFile('highlightImage.jpg');
+            fillInTheGapsOverImageTextPage.steps.verifyImageIsUploaded();
+            fillInTheGapsOverImageTextPage.steps.insertResponseArea(10);
+            fillInTheGapsOverImageTextPage.steps.expandStyleAndLayoutCustomizationAccordion();
+        });
+
+        it('When the default color block is in selected state in the "Fill color" section, then the background color of the text containers in the canvas image should be the default selected color', () => {
+            fillInTheGapsOverImageTextPage.steps.verifyResponseAreaOverImageBorderColor(0, `1px 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 text containers in the canvas image', () => {
+            fillInTheGapsOverImageTextPage.steps.selectColorBlock(3);
+            fillInTheGapsOverImageTextPage.steps.verifyResponseAreaOverImageBorderColor(0, `1px 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 text containers in the canvas image should be the modified selected color', () => {
+            fillInTheGapsOverImageTextPage.steps.editColor(1);
+            colorPopupComponent.steps.clickInColorSaturationPalette();
+            colorPopupComponent.steps.clickOnOkButton();
+            fillInTheGapsOverImageTextPage.steps.verifyResponseAreaOverImageBorderColor(0, `1px dashed ${modifiedColor}`);
+        });
+
+        it('When the adds a new text container, then the background color of the newly added text container should be the modified selected color', () => {
+            fillInTheGapsOverImageTextPage.steps.insertResponseArea(60);
+            fillInTheGapsOverImageTextPage.steps.verifyResponseAreaOverImageBorderColor(0, `1px dashed ${modifiedColor}`);
+            fillInTheGapsOverImageTextPage.steps.verifyResponseAreaOverImageBorderColor(1, `1px dashed ${modifiedColor}`);
+        });
+    });
+
+    describe('Border color - Preview tab', () => {
+        const modifiedColor = 'rgb(121, 60, 60)'
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsOverImageTextPage.steps.navigateToCreateQuestion('fill in the gaps over image with text');
+            cy.barsPreLoaderWait();
+            fillInTheGapsOverImageTextPage.steps.uploadFile('highlightImage.jpg');
+            fillInTheGapsOverImageTextPage.steps.verifyImageIsUploaded();
+            fillInTheGapsOverImageTextPage.steps.insertResponseArea(10);
+            fillInTheGapsOverImageTextPage.steps.expandStyleAndLayoutCustomizationAccordion();
+            fillInTheGapsOverImageTextPage.steps.switchToPreviewTab();
+        });
+
+        it('When the default color block is in selected state in the "Fill color" section, then the background color of the text containers in the preview tab should be the default selected color', () => {
+            fillInTheGapsOverImageTextPage.steps.verifyAnswerInputFieldBorderColor(0, `1px 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 text containers in the preview tab', () => {
+            fillInTheGapsOverImageTextPage.steps.switchToEditTab();
+            fillInTheGapsOverImageTextPage.steps.selectColorBlock(3);
+            fillInTheGapsOverImageTextPage.steps.switchToPreviewTab();
+            fillInTheGapsOverImageTextPage.steps.verifyAnswerInputFieldBorderColor(0, `0px none ${css.color.text}`);
+        });
+
+        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', () => {
+            fillInTheGapsOverImageTextPage.steps.switchToEditTab();
+            fillInTheGapsOverImageTextPage.steps.editColor(1);
+            colorPopupComponent.steps.clickInColorSaturationPalette();
+            colorPopupComponent.steps.clickOnOkButton();
+            fillInTheGapsOverImageTextPage.steps.switchToPreviewTab();
+            fillInTheGapsOverImageTextPage.steps.verifyAnswerInputFieldBorderColor(0, `1px dashed ${modifiedColor}`);
+        });
+
+        it('The background color of the text containers in the preview tab should be the modified selected color', () => {
+            fillInTheGapsOverImageTextPage.steps.switchToEditTab();
+            fillInTheGapsOverImageTextPage.steps.insertResponseArea(60);
+            fillInTheGapsOverImageTextPage.steps.switchToPreviewTab();
+            fillInTheGapsOverImageTextPage.steps.verifyAnswerInputFieldBorderColor(0, `1px dashed ${modifiedColor}`);
+            fillInTheGapsOverImageTextPage.steps.verifyAnswerInputFieldBorderColor(1, `1px dashed ${modifiedColor}`);
+        });
+    });
+
+    describe('Color popup functionality', () => {
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsOverImageTextPage.steps.navigateToCreateQuestion('fill in the gaps over image with text');
+            cy.barsPreLoaderWait();
+            fillInTheGapsOverImageTextPage.steps.uploadFile('highlightImage.jpg');
+            fillInTheGapsOverImageTextPage.steps.verifyImageIsUploaded();
+            fillInTheGapsOverImageTextPage.steps.insertResponseArea(10);
+            fillInTheGapsOverImageTextPage.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', () => {
+            fillInTheGapsOverImageTextPage.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(() => {
+            fillInTheGapsOverImageTextPage.steps.navigateToCreateQuestion('fill in the gaps over image with text');
+            cy.barsPreLoaderWait();
+            fillInTheGapsOverImageTextPage.steps.uploadFile('highlightImage.jpg');
+            fillInTheGapsOverImageTextPage.steps.verifyImageIsUploaded();
+            fillInTheGapsOverImageTextPage.steps.insertResponseArea(10);
+            fillInTheGapsOverImageTextPage.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', () => {
+            fillInTheGapsOverImageTextPage.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(() => {
+            fillInTheGapsOverImageTextPage.steps.navigateToCreateQuestion('fill in the gaps over image with text');
+            cy.barsPreLoaderWait();
+            fillInTheGapsOverImageTextPage.steps.uploadFile('highlightImage.jpg');
+            fillInTheGapsOverImageTextPage.steps.verifyImageIsUploaded();
+            fillInTheGapsOverImageTextPage.steps.insertResponseArea(10);
+            fillInTheGapsOverImageTextPage.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', () => {
+            fillInTheGapsOverImageTextPage.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')
+            fillInTheGapsOverImageTextPage.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(() => {
+            fillInTheGapsOverImageTextPage.steps.navigateToCreateQuestion('fill in the gaps over image with text');
+            cy.barsPreLoaderWait();
+            fillInTheGapsOverImageTextPage.steps.uploadFile('highlightImage.jpg');
+            fillInTheGapsOverImageTextPage.steps.verifyImageIsUploaded();
+            fillInTheGapsOverImageTextPage.steps.insertResponseArea(10);
+            fillInTheGapsOverImageTextPage.steps.expandStyleAndLayoutCustomizationAccordion();
+        });
+
+        it('When the "Dashed" border style is in selected state, then the border style of the text containers in the canvas image should be "Dashed"', () => {
+            fillInTheGapsOverImageTextPage.steps.verifyResponseAreaOverImageBorderStyle(0, 'dashed');
+        });
+
+        borderStyles.forEach((style) => {
+            it(`When the user selects ${style}, then the border style of the text containers in the canvas image should update to ${style}`, () => {
+                fillInTheGapsOverImageTextPage.steps.selectBorderStyleToggleButton(style);
+                fillInTheGapsOverImageTextPage.steps.verifyResponseAreaOverImageBorderStyle(0, style);
+            });
+        })
+    });
+
+    describe('Border style - Preview tab', () => {
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsOverImageTextPage.steps.navigateToCreateQuestion('fill in the gaps over image with text');
+            cy.barsPreLoaderWait();
+            fillInTheGapsOverImageTextPage.steps.expandStyleAndLayoutCustomizationAccordion();
+            fillInTheGapsOverImageTextPage.steps.uploadFile('highlightImage.jpg');
+            fillInTheGapsOverImageTextPage.steps.verifyImageIsUploaded();
+            fillInTheGapsOverImageTextPage.steps.insertResponseArea(10);
+            fillInTheGapsOverImageTextPage.steps.switchToPreviewTab();
+        });
+
+        it('When the "Dashed" border style is in selected state, then the border style of the text containers in the preview tab should be "Dashed"', () => {
+            fillInTheGapsOverImageTextPage.steps.verifyResponseAreaOverImageBorderStyle(0, 'dashed');
+        });
+
+        borderStyles.forEach((style) => {
+            it(`When the user selects ${style}, then the border style of the text containers in the preview tab should update to ${style}`, () => {
+                fillInTheGapsOverImageTextPage.steps.switchToEditTab();
+                fillInTheGapsOverImageTextPage.steps.selectBorderStyleToggleButton(style);
+                fillInTheGapsOverImageTextPage.steps.switchToPreviewTab();
+                fillInTheGapsOverImageTextPage.steps.verifyResponseAreaOverImageBorderStyle(0, style);
+            });
+        })
+    });
+
+    describe('Set height and width for all text containers contents', () => {
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsOverImageTextPage.steps.navigateToCreateQuestion('fill in the gaps over image with text');
+            cy.barsPreLoaderWait();
+            fillInTheGapsOverImageTextPage.steps.uploadFile('highlightImage.jpg');
+            fillInTheGapsOverImageTextPage.steps.verifyImageIsUploaded();
+            fillInTheGapsOverImageTextPage.steps.insertResponseArea(10);
+            fillInTheGapsOverImageTextPage.steps.expandStyleAndLayoutCustomizationAccordion();
+        });
+
+        it('"Set height and width for all text containers" label and checkbox should be displayed, By default the checkbox should be in unchecked state', () => {
+            utilities.verifyInnerText(fillInTheGapsOverImageTextPage.setHeightAndWidthForAllTextContainersCheckboxLabel(), 'Set height and width for all text containers');
+            fillInTheGapsOverImageTextPage.steps.verifySetHeightAndWidthForAllTextContainersCheckboxUncheckedState();
+        });
+
+        it('When the user checks "Set height and width for all text containers" checkbox, \'Height (px)\' and \'Width (px)\' labels and empty input fields should be displayed', () => {
+            fillInTheGapsOverImageTextPage.steps.checkSetHeightAndWidthForAllTextContainersCheckbox();
+            utilities.verifyInnerText(fillInTheGapsOverImageTextPage.textContainerHeightInputFieldLabel(), 'Height (px)')
+            fillInTheGapsOverImageTextPage.steps.verifyTextContainerHeightInputFieldValue('');
+            utilities.verifyInnerText(fillInTheGapsOverImageTextPage.textContainerWidthInputFieldLabel(), 'Width (px)')
+            fillInTheGapsOverImageTextPage.steps.verifyTextContainerWidthInputFieldValue('');
+        });
+
+        it('CSS of "Set height and width for all text containers" section contents', { tags: 'css' }, () => {
+            utilities.verifyCSS(fillInTheGapsOverImageTextPage.setHeightAndWidthForAllTextContainersCheckboxLabel(), {
+                'color': css.color.labelText,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.regular
+            });
+        });
+
+        it('Accessibility of "Set height and width for all text containers" section contents', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(fillInTheGapsOverImageTextPage.setHeightAndWidthForAllTextContainersCheckboxLabel().parents('[data-ngie-testid="set-height-and-width-for-all-text-containers-checkbox"]'));
+        });
+    });
+
+    describe('Set height and width for all text containers - Edit tab', () => {
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsOverImageTextPage.steps.navigateToCreateQuestion('fill in the gaps over image with text');
+            cy.barsPreLoaderWait();
+            fillInTheGapsOverImageTextPage.steps.uploadFile('highlightImage.jpg');
+            fillInTheGapsOverImageTextPage.steps.verifyImageIsUploaded();
+            fillInTheGapsOverImageTextPage.steps.insertResponseArea(10);
+            fillInTheGapsOverImageTextPage.steps.expandStyleAndLayoutCustomizationAccordion();
+            fillInTheGapsOverImageTextPage.steps.checkSetHeightAndWidthForAllTextContainersCheckbox();
+        });
+
+        it('When the user has not set any height or width values in the "Set height and width for all text containers" section, the dimensions of the text containers should be default', () => {
+            fillInTheGapsOverImageTextPage.steps.verifyResponseAreaDimensions(30, 118);
+        });
+
+        it('When the user specifies the height and width, the dimensions of the text containers should update accordingly', () => {
+            fillInTheGapsOverImageTextPage.steps.setTextContainerHeight(100);
+            fillInTheGapsOverImageTextPage.steps.setTextContainerWidth(200);
+            fillInTheGapsOverImageTextPage.steps.verifyResponseAreaDimensions(100, 200);
+        });
+    });
+
+    describe('Text container connector style contents', () => {
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsOverImageTextPage.steps.navigateToCreateQuestion('fill in the gaps over image with text');
+            cy.barsPreLoaderWait();
+            fillInTheGapsOverImageTextPage.steps.expandStyleAndLayoutCustomizationAccordion();
+        });
+
+        it('"Text container connector style" label should be displayed', () => {
+            utilities.verifyInnerText(fillInTheGapsOverImageTextPage.textContainerConnectorStyleLabel(), 'Text container connector style');
+        });
+
+        it('"Connector end point shape" label along with four icon buttons - "Circle", "Square", "Diamond" and "None" should be displayed. By default, "Circle" option should be in selected state', () => {
+            utilities.verifyInnerText(fillInTheGapsOverImageTextPage.connectorEndPointShapeLabel(), 'Connector end point shape');
+            connectorStyles.forEach((option) => {
+                utilities.verifyElementVisibilityState(fillInTheGapsOverImageTextPage.connectorEndPointShapeOptions(option.toLowerCase()), 'exist');
+            });
+            fillInTheGapsOverImageTextPage.steps.verifyConnectorStyleOptionSelected('circle')
+        });
+    });
+
+    describe('Text container connector style - Edit tab', () => {
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsOverImageTextPage.steps.navigateToCreateQuestion('fill in the gaps over image with text');
+            cy.barsPreLoaderWait();
+            fillInTheGapsOverImageTextPage.steps.expandStyleAndLayoutCustomizationAccordion();
+            fillInTheGapsOverImageTextPage.steps.uploadFile('highlightImage.jpg');
+            fillInTheGapsOverImageTextPage.steps.verifyImageIsUploaded();
+            fillInTheGapsOverImageTextPage.steps.insertResponseArea(10);
+            fillInTheGapsOverImageTextPage.steps.selectResponseArea(0);
+            fillInTheGapsOverImageTextPage.steps.selectResponseAreaPointerStyle('left');
+        });
+
+        it('When the "Circle" connector style is in selected state, then the connector style of the text containers in the canvas image should be "Solid"', () => {
+            fillInTheGapsOverImageTextPage.steps.verifyResponseAreaConnectorEndPointShape('Circle');
+        });
+
+        connectorStyles.forEach((button) => {
+            it(`When the user selects ${button}, then the connector style of the text containers in the canvas image should update to ${button}`, () => {
+                fillInTheGapsOverImageTextPage.steps.selectEndPointShapeButton(button);
+                fillInTheGapsOverImageTextPage.steps.verifyResponseAreaConnectorEndPointShape(button);
+            });
+        })
+    });
+
+    describe('Text container connector style - Preview tab', () => {
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsOverImageTextPage.steps.navigateToCreateQuestion('fill in the gaps over image with text');
+            cy.barsPreLoaderWait();
+            fillInTheGapsOverImageTextPage.steps.expandStyleAndLayoutCustomizationAccordion();
+            fillInTheGapsOverImageTextPage.steps.uploadFile('highlightImage.jpg');
+            fillInTheGapsOverImageTextPage.steps.verifyImageIsUploaded();
+            fillInTheGapsOverImageTextPage.steps.insertResponseArea(10);
+            fillInTheGapsOverImageTextPage.steps.selectResponseArea(0);
+            fillInTheGapsOverImageTextPage.steps.selectResponseAreaPointerStyle('left');
+            fillInTheGapsOverImageTextPage.steps.switchToPreviewTab();
+        });
+
+        it('When the "Circle" connector style is in selected state, then the connector style of the text containers in the canvas image should be "Solid"', () => {
+            fillInTheGapsOverImageTextPage.steps.verifyResponseAreaConnectorEndPointShapePreviewTab('Circle');
+        });
+
+        connectorStyles.forEach((button) => {
+            it(`When the user selects ${button}, then the connector style of the text containers in the canvas image should update to ${button}`, () => {
+                fillInTheGapsOverImageTextPage.steps.switchToEditTab();
+                fillInTheGapsOverImageTextPage.steps.selectEndPointShapeButton(button);
+                fillInTheGapsOverImageTextPage.steps.switchToPreviewTab();
+                fillInTheGapsOverImageTextPage.steps.verifyResponseAreaConnectorEndPointShapePreviewTab(button);
+            });
+        })
+    });
+});

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

@@ -90,7 +90,7 @@ describe('Create item page - Grid fill: All or nothing', () => {
                     itemReferenceID = itemPreviewPage.steps.getItemReferenceID();
                 });
             };
-
+            //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', () => {
                 if (view === 'Grading view') {
                     studentViewPage.steps.submitResponse();
@@ -106,6 +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.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', () => {
@@ -136,6 +137,7 @@ describe('Create item page - Grid fill: All or nothing', () => {
                     studentViewPage.steps.submitResponse();
                     utilities.verifyElementVisibilityState(dialogBoxBase.dialogBox(), 'exist');
                     gridFillPage.steps.clickOnGoToGradingViewButton();
+
                     gradingViewPage.steps.verifyGradingViewScore(0, 20);
                 };
                 if (view === 'Question preview' || view === 'Item preview') {

package/cypress/e2e/ILC/GridFill/scoring/partialEqualWeightsCellShadeCountBasics.js

@@ -124,41 +124,41 @@ describe('Create item page - Grid fill : Partial equal weights', () => {
             gridFillPage.steps.uncheckMatchExactPositionOfCellsCheckbox();
             gridFillPage.steps.addInputToCellShadeCountInputField(2);
             gridFillPage.steps.selectAutoScoredScoringSubtype('Partial equal weights');
-            gridFillPage.steps.allotPoints(20);
+            gridFillPage.steps.allotPoints(6);
             //gridFillPage.steps.checkAllowStudentsToCheckAnswerCheckbox();
         });
 
         it('When the user selects \'Award minimum score\' from the minimum scoring dropdown, does not attempt the question and switches to grading view, then the user should be awarded with minimum points', () => {
             gridFillPage.steps.expandMinimumScoringDropdown();
             gridFillPage.steps.selectOptionFromMinimumScoringDropdown('Award minimum score');
-            gridFillPage.steps.allotMinimumPoints(6);
+            gridFillPage.steps.allotMinimumPoints(4);
             gridFillPage.steps.switchToPreviewTab();
             gridFillPage.steps.switchToGradingView();
-            gridFillPage.steps.verifyPreviewScore(6, 20);
+            gridFillPage.steps.verifyPreviewScore(4, 6);
             gridFillPage.steps.verifyQuestionPreviewStateWhenSwitchingBackToStudentView();
         });
 
         it('When the user has selected \'Award minimum score\' from the minimum scoring dropdown, attempts the question incorrectly and switches to grading view, the user should be awarded with minimum points', () => {
             gridFillPage.steps.resetQuestionPreview();
             gridFillPage.steps.selectCellPreviewTab(1, 0);
-            gridFillPage.steps.verifyPreviewScore(6, 20);
+            gridFillPage.steps.verifyPreviewScore(4, 6);
         });
 
         it('When the user selects \'Award minimum score only if attempted\' from the minimum scoring dropdown, does not attempt the question and switches to grading view, then the user should be awarded with 0 points', () => {
             gridFillPage.steps.switchToEditTab();
             gridFillPage.steps.expandMinimumScoringDropdown();
             gridFillPage.steps.selectOptionFromMinimumScoringDropdown('Award minimum score only if attempted');
-            gridFillPage.steps.allotMinimumPoints(6);
+            gridFillPage.steps.allotMinimumPoints(5);
             gridFillPage.steps.switchToPreviewTab();
             gridFillPage.steps.switchToGradingView();
-            gridFillPage.steps.verifyPreviewScore(0, 20);
+            gridFillPage.steps.verifyPreviewScore(0, 6);
             gridFillPage.steps.verifyQuestionPreviewStateWhenSwitchingBackToStudentView();
         });
 
         it('When the user has selected \'Award minimum score\' from the minimum scoring dropdown, attempts the question incorrectly and switches to grading view, the user should be awarded with minimum points', () => {
             gridFillPage.steps.resetQuestionPreview();
             gridFillPage.steps.selectCellPreviewTab(1, 0);
-            gridFillPage.steps.verifyPreviewScore(6, 20);
+            gridFillPage.steps.verifyPreviewScore(5, 6);
         });
     });
 

package/cypress/e2e/ILC/ListOrderingDropdown/Scoring/allOrNothingPenaltyScoring.js

@@ -1,5 +1,6 @@
 import { listOrderingPage } from "../../../../pages";
 import abortEarlySetup from "../../../../support/helpers/abortEarly";
+const options = ['seed', 'sprout', 'plant', 'flower'];
 
 describe('Create item page - List ordering: All or nothing penalty scoring', () => {
     before(() => {

package/cypress/e2e/ILC/ListOrderingDropdown/Scoring/manuallyAndNonScored.js

@@ -103,6 +103,7 @@ describe('Create Item page - List ordering: Manually and non scored', () => {
         it('When the user attempts the question partially correct, then on switching to \'Grading\' view, correct icon should be displayed besides the correct answer responses, incorrect icon should be displayed besides incorrect answer response, a status message with text \'Your answer is incorrect\' and correct answer section with all correct answers along with numeration should be displayed', () => {
             listOrderingPage.steps.resetQuestionPreview();
             listOrderingPage.steps.selectPositionForAllOptionsPreviewTab([{ optionIndex: 0, position: '2' }, { optionIndex: 1, position: '1' }, { optionIndex: 2, position: '4' }, { optionIndex: 3, position: '3' }]);
+            listOrderingPage.steps.switchToGradingView();
             listOrderingPage.steps.verifyCorrectOptionIconDropdownLayout(0);
             listOrderingPage.steps.verifyIncorrectOptionIconDropdownLayout(1);
             listOrderingPage.steps.verifyCorrectOptionIconDropdownLayout(2);

package/cypress/e2e/ILC/ListOrderingDropdown/Scoring/partialEqualWeightsAlternativePointsGreaterThanCorrectPoints.js

@@ -212,14 +212,14 @@ describe('Create Item page - List ordering: Partial equal weights scoring with a
             listOrderingPage.steps.verifyOptionsPositionInCorrectAnswerSection(options, ['3', '1', '2', '4']);
             listOrderingPage.steps.verifyCorrectIncorrectStatusMessageNotExists();
             listOrderingPage.steps.verifyQuestionPreviewStateWhenSwitchingBackToStudentView();
-            cy.log('Overachiever case: When the user attempts the question with more number of correct responses from the correct accordion than the alternative accordion and clicks on \'Check answer\' button, correct icons should be displayed for the alternative accordion response, incorrect icon should be displayed for the correct accordion responses, correct/incorrect status message and correct answer section should not be displayed')
+            /*cy.log('Overachiever case: When the user attempts the question with more number of correct responses from the correct accordion than the alternative accordion and clicks on \'Check answer\' button, correct icons should be displayed for the alternative accordion response, incorrect icon should be displayed for the correct accordion responses, correct/incorrect status message and correct answer section should not be displayed')
             listOrderingPage.steps.checkAnswer();
             listOrderingPage.steps.verifyIncorrectOptionIconDropdownLayout(0);
             listOrderingPage.steps.verifyIncorrectOptionIconDropdownLayout(1);
             listOrderingPage.steps.verifyIncorrectOptionIconDropdownLayout(2);
             listOrderingPage.steps.verifyCorrectOptionIconDropdownLayout(3);
             listOrderingPage.steps.verifyCorrectIncorrectStatusMessageNotExists();
-            listOrderingPage.steps.verifyCorrectAnswerSectionNotExists();
+            listOrderingPage.steps.verifyCorrectAnswerSectionNotExists();*/
         });
     });
 });

package/cypress/e2e/ILC/ListOrderingDropdown/Scoring/partialEqualWeightsCorrectPointsGreaterThanAlternativePoints.js

@@ -203,7 +203,6 @@ describe('Create Item page - List ordering: Partial equal weights scoring with a
             listOrderingPage.steps.expandCorrectAnswerAccordion();
             listOrderingPage.steps.allotPoints(50);
             listOrderingPage.steps.switchToPreviewTab();
-
             listOrderingPage.steps.selectPositionForAllOptionsPreviewTab([{ optionIndex: 0, position: '3' }, { optionIndex: 1, position: '4' }, { optionIndex: 2, position: '2' }, { optionIndex: 3, position: '1' }]);
             listOrderingPage.steps.verifyPreviewScore(12.5, 50);
             listOrderingPage.steps.switchToGradingView();
@@ -214,14 +213,14 @@ describe('Create Item page - List ordering: Partial equal weights scoring with a
             listOrderingPage.steps.verifyOptionsPositionInCorrectAnswerSection(options, ['2', '3', '4', '1']);
             listOrderingPage.steps.verifyCorrectIncorrectStatusMessageNotExists();
             listOrderingPage.steps.verifyQuestionPreviewStateWhenSwitchingBackToStudentView();
-            cy.log('Overachiever case: When the user attempts the question with more number of correct responses from the alternative accordion than the correct accordion and clicks on \'Check answer\' button, correct icons should be displayed for the correct accordion response, incorrect icon should be displayed for the alternative accordion responses, correct/incorrect status message and correct answer section should not be displayed')
+            /*cy.log('Overachiever case: When the user attempts the question with more number of correct responses from the alternative accordion than the correct accordion and clicks on \'Check answer\' button, correct icons should be displayed for the correct accordion response, incorrect icon should be displayed for the alternative accordion responses, correct/incorrect status message and correct answer section should not be displayed')
             listOrderingPage.steps.checkAnswer();
             listOrderingPage.steps.verifyIncorrectOptionIconDropdownLayout(0);
             listOrderingPage.steps.verifyIncorrectOptionIconDropdownLayout(1);
             listOrderingPage.steps.verifyIncorrectOptionIconDropdownLayout(2);
             listOrderingPage.steps.verifyCorrectOptionIconDropdownLayout(3);
             listOrderingPage.steps.verifyCorrectIncorrectStatusMessageNotExists();
-            listOrderingPage.steps.verifyCorrectAnswerSectionNotExists();
+            listOrderingPage.steps.verifyCorrectAnswerSectionNotExists();*/
         });
     });
 });