itemengine-cypress-automation 1.0.573-IEI-7080-f70315e.0 → 1.0.573-IEI-7079-ed54ea2.0

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

@@ -72,6 +72,12 @@ describe('Create item page - Fill in the gaps: Question instructions, Options se
 
         fillInTheGapsOverImageTextPage.tests.verifyInsertTextTooltip();
 
+        it('When user insert text container, then it should be displayed', () => {
+            fillInTheGapsOverImageTextPage.steps.insertResponseArea(50);
+            fillInTheGapsOverImageTextPage.steps.insertResponseArea(80);
+            fillInTheGapsOverImageTextPage.steps.undoAction();
+        });
+
         fillInTheGapsOverImageTextPage.tests.verifyUndoRedoClearAllButtons();
     });
 
@@ -217,7 +223,7 @@ describe('Create item page - Fill in the gaps: Question instructions, Options se
                 'border': `1px solid ${css.color.activeComponentBorder}`
             });
             utilities.verifyCSS(utilities.getNthElement(fillInTheGapsOverImageTextPage.responseArea(), 0), {
-                'border': `1px dashed ${css.color.activeComponentBorder}`
+                'border': `1px solid ${css.color.activeComponentBorder}`
             });
         });
 
@@ -410,4 +416,16 @@ describe('Create item page - Fill in the gaps: Question instructions, Options se
 
         fillInTheGapsOverImageTextPage.tests.verifyImageNotExistPreviewTab();
     });
+
+    describe('Print layout settings accordion', () => {
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsOverImageTextPage.steps.navigateToCreateQuestion('fill in the gaps over image with text');
+            cy.barsPreLoaderWait();
+        });
+
+        fillInTheGapsOverImageTextPage.tests.verifyPrintLayoutSettingsAccordionProperties();
+
+        fillInTheGapsOverImageTextPage.tests.verifyPrintLayoutSettingsAccordionContents();
+    });
 });

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

@@ -1,7 +1,10 @@
-import { fillInTheGapsOverImageTextPage } from "../../../pages";
+import { fillInTheGapsOverImageTextPage, itemPreviewPage } from "../../../pages";
 import abortEarlySetup from "../../../support/helpers/abortEarly";
 import utilities from "../../../support/helpers/utilities";
 const css = Cypress.env('css');
+let correctAnswerViews = ['Question preview', 'Item preview', 'Student view'];
+const views = utilities.getViews(correctAnswerViews);
+let itemReferenceID = "";
 
 describe('Create Item page - Fill in the gaps over image - text: ', () => {
     before(() => {
@@ -67,4 +70,56 @@ describe('Create Item page - Fill in the gaps over image - text: ', () => {
             fillInTheGapsOverImageTextPage.steps.verifyTextInAnswerInputFieldsPreviewTab([{ responseIndex: 1, responseText: 'Flower232&*' }]);
         });
     });
+
+    views.forEach((view) => {
+        describe(`${view}: Accepted student input`, () => {
+            abortEarlySetup();
+            before(() => {
+                switch (view) {
+                    case 'Question preview':
+                        fillInTheGapsOverImageTextPage.steps.navigateToCreateQuestion('fill in the gaps over image with text');
+                        cy.barsPreLoaderWait();
+                        fillInTheGapsOverImageTextPage.steps.uploadFile('highlightImage.jpg');
+                        fillInTheGapsOverImageTextPage.steps.verifyImageIsUploaded();
+                        fillInTheGapsOverImageTextPage.steps.insertResponseArea(80);
+                        fillInTheGapsOverImageTextPage.steps.insertResponseArea(50);
+                        fillInTheGapsOverImageTextPage.steps.selectAcceptedStudentInputType(0, 'Number');
+                        fillInTheGapsOverImageTextPage.steps.selectAcceptedStudentInputType(1, 'Integer');
+                        fillInTheGapsOverImageTextPage.steps.switchToPreviewTab();
+                        break;
+                    case 'Item preview':
+                        cy.visit(`/item-engine/demo/edit-item/${utilities.base64Encoding(itemReferenceID)}`);
+                        itemPreviewPage.steps.switchToPreviewTab();
+                        break;
+                    case 'Student view':
+                        cy.visit(`/item-engine/demo/render-item/student-view/${utilities.base64Encoding(itemReferenceID)}`);
+                        break;
+                };
+            });
+            beforeEach(() => {
+                switch (view) {
+                    case 'Question preview':
+                        break;
+                    case 'Item preview':
+                        break;
+                    case 'Student view':
+                        cy.visit(`/item-engine/demo/render-item/student-view/${utilities.base64Encoding(itemReferenceID)}`);
+                        break;
+                }
+            });
+            if (view === 'Question preview') {
+                after(() => {
+                    fillInTheGapsOverImageTextPage.steps.clickOnSaveQuestionButton();
+                    fillInTheGapsOverImageTextPage.steps.clickOnConfirmButton();
+                    utilities.verifyElementVisibilityState(itemPreviewPage.referenceID(), 'visible');
+                    itemReferenceID = itemPreviewPage.steps.getItemReferenceID();
+                });
+            };
+
+            it(`When the user try to insert text in the response field  where the accepted student input type set to number , then it should show a warning message in ${view}`, () => {
+                fillInTheGapsOverImageTextPage.steps.enterTextInAnswerInputFieldsPreviewTab([{ responseIndex: 0, responseText: 'Flower' }]);
+                utilities.verifyInnerText(fillInTheGapsOverImageTextPage.limitReachedWarningMessageContainer(), 'Only number can be typed.');
+            });
+        });
+    });
 });

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

@@ -1,6 +1,10 @@
-import { fillInTheGapsOverImageTextPage } from "../../../pages";
+import { fillInTheGapsOverImageTextPage, itemPreviewPage } from "../../../pages";
 import abortEarlySetup from "../../../support/helpers/abortEarly";
+import utilities from "../../../support/helpers/utilities";
 const css = Cypress.env('css');
+let correctAnswerViews = ['Question preview', 'Item preview', 'Student view'];
+const views = utilities.getViews(correctAnswerViews);
+let itemReferenceID = "";
 
 describe('Create item page - Fill in the gaps over image with text: Set limit section', () => {
     before(() => {
@@ -49,7 +53,7 @@ describe('Create item page - Fill in the gaps over image with text: Set limit se
 
         //Uncomment below code once https://redmine.zeuslearning.com/issues/566930 is resolved
         // fillInTheGapsOverImageTextPage.tests.verifyMaximumCharacterLimitWarningConditionsSpecifyCorrectAnswerSection();
-        
+
         //Uncomment below code once https://redmine.zeuslearning.com/issues/566930 is resolved
         // fillInTheGapsOverImageTextPage.tests.verifyMinimumCharacterLimitWarningConditionsSpecifyCorrectAnswerSection();
     });
@@ -79,11 +83,61 @@ describe('Create item page - Fill in the gaps over image with text: Set limit se
         it('User should able to enter characters in the response field', () => {
             fillInTheGapsOverImageTextPage.steps.addTextInAnswerInputFieldsPreviewTab(0, 'Flower');
         });
-        
+
         //Uncomment below code oncee https://redmine.zeuslearning.com/issues/566930 is resolved
         // fillInTheGapsOverImageTextPage.tests.verifyMaximumCharacterLimitWarningConditionsPreviewTab();
 
         //Uncomment below code once https://redmine.zeuslearning.com/issues/566930 is resolved
         // fillInTheGapsOverImageTextPage.tests.verifyMinimumCharacterLimitWarningConditionsPreviewTab();
     });
+
+    views.forEach((view) => {
+        describe(`${view}: Student view settings`, () => {
+            abortEarlySetup();
+            before(() => {
+                switch (view) {
+                    case 'Question preview':
+                        fillInTheGapsOverImageTextPage.steps.navigateToCreateQuestion('fill in the gaps over image with text');
+                        cy.barsPreLoaderWait();
+                        fillInTheGapsOverImageTextPage.steps.uploadFile('highlightImage.jpg');
+                        fillInTheGapsOverImageTextPage.steps.verifyImageIsUploaded();
+                        fillInTheGapsOverImageTextPage.steps.insertResponseArea(80);
+                        fillInTheGapsOverImageTextPage.steps.setMaximumLimit(30)
+                        fillInTheGapsOverImageTextPage.steps.switchToPreviewTab();
+                        break;
+                    case 'Item preview':
+                        cy.visit(`/item-engine/demo/edit-item/${utilities.base64Encoding(itemReferenceID)}`);
+                        itemPreviewPage.steps.switchToPreviewTab();
+                        break;
+                    case 'Student view':
+                        cy.visit(`/item-engine/demo/render-item/student-view/${utilities.base64Encoding(itemReferenceID)}`);
+                        break;
+                };
+            });
+
+            beforeEach(() => {
+                switch (view) {
+                    case 'Question preview':
+                        break;
+                    case 'Item preview':
+                        break;
+                    case 'Student view':
+                        cy.visit(`/item-engine/demo/render-item/student-view/${utilities.base64Encoding(itemReferenceID)}`);
+                        break;
+                }
+            });
+            if (view === 'Question preview') {
+                after(() => {
+                    fillInTheGapsOverImageTextPage.steps.clickOnSaveQuestionButton();
+                    fillInTheGapsOverImageTextPage.steps.clickOnConfirmButton();
+                    utilities.verifyElementVisibilityState(itemPreviewPage.referenceID(), 'visible');
+                    itemReferenceID = itemPreviewPage.steps.getItemReferenceID();
+                });
+            };
+
+            it(`When the user sets the maximum character limit for the response field, it should be reflected in the ${view}`, () => {
+                fillInTheGapsOverImageTextPage.steps.verifyMaximumCharacterLimitInPreviewTab(0, 30);
+            });
+        });
+    });
 });

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

@@ -82,21 +82,21 @@ describe('Create item page - Fill in the gaps over image - text - Special charac
 
         it('CSS of special characters section', { tags: 'css' }, () => {
             utilities.verifyCSS(fillInTheGapsOverImageTextPage.specialCharactersLabel(), {
-                'color': css.color.labels,
+                'color': css.color.codeBlockText,
                 'font-size': css.fontSize.default,
                 'font-weight': css.fontWeight.semibold
             });
             //checked state of enable special characters checkbox
-            utilities.verifyCSS(fillInTheGapsOverImageTextPage.enableSpecialCharactersCheckbox().find('rect').eq(1), {
+            utilities.verifyCSS(fillInTheGapsOverImageTextPage.enableSpecialCharactersCheckboxWrapper().find('svg g g').eq(0), {
                 'fill': css.color.activeButtons
             });
             utilities.verifyCSS(fillInTheGapsOverImageTextPage.groupByLanguageLabel(), {
-                'color': css.color.labels,
+                'color': css.color.labelText,
                 'font-size': css.fontSize.normal,
                 'font-weight': css.fontWeight.regular
             });
             //selected state of radio button
-            utilities.verifyCSS(fillInTheGapsOverImageTextPage.showOnlyCustomSpecialCharactersRadioButton().find('svg'), {
+            utilities.verifyCSS(fillInTheGapsOverImageTextPage.showOnlyCustomSpecialCharactersRadioButtonWrapper().find('svg'), {
                 'fill': css.color.activeButtons
             });
             utilities.verifyCSS(fillInTheGapsOverImageTextPage.customSpecialCharactersLabel(), {
@@ -109,7 +109,7 @@ describe('Create item page - Fill in the gaps over image - text - Special charac
                 'font-size': css.fontSize.default,
                 'font-weight': css.fontWeight.regular
             });
-            utilities.verifyCSS(fillInTheGapsOverImageTextPage.customSpecialCharactersInputField().find('fieldset'), {
+            utilities.verifyCSS(fillInTheGapsOverImageTextPage.customSpecialCharactersInputFieldWrapper().find('fieldset'), {
                 'border': `1px solid ${css.color.figDefaultComponentBorder}`
             });
             utilities.verifyCSS(fillInTheGapsOverImageTextPage.customizeSpecialCharactersPreviewButton(), {
@@ -150,13 +150,10 @@ describe('Create item page - Fill in the gaps over image - text - Special charac
             });
             //Category tiles in de-selected state
             utilities.verifyCSS(fillInTheGapsOverImageTextPage.specialCharacterTileIcon().eq(0).find('svg'), {
-                'fill': css.color.secondaryBtn
-            });
-            utilities.verifyCSS(fillInTheGapsOverImageTextPage.specialCharacterTileSectionCategoriesDragIcon().eq(0).parent(), {
-                'fill': css.color.secondaryBtn
+                'fill': css.color.optionColor
             });
-            utilities.verifyCSS(fillInTheGapsOverImageTextPage.specialCharacterTileSectionCategoriesDragIcon().eq(0).parent(), {
-                'fill': css.color.defaultBackground
+            utilities.verifyCSS(fillInTheGapsOverImageTextPage.specialCharacterTileSectionCategoriesDragIcon().eq(0).find('svg'), {
+                'fill': css.color.optionColor
             });
             utilities.verifyCSS(fillInTheGapsOverImageTextPage.specialCharacterTileCategoryName().eq(0), {
                 'color': css.color.secondaryBtn,
@@ -172,18 +169,18 @@ describe('Create item page - Fill in the gaps over image - text - Special charac
             utilities.verifyCSS(dialogBoxBase.dialogBoxTitle(), {
                 'color': css.color.flyoutTitle,
                 'font-size': css.fontSize.heading,
-                'font-weight': css.fontWeight.bold
+                'font-weight': css.fontWeight.semibold
             });
             utilities.verifyCSS(fillInTheGapsOverImageTextPage.specialCharactersPreviewPopupCategoryLabel().eq(0), {
                 'color': css.color.accordionLabel,
-                'font-size': css.fontSize.normal,
-                'font-weight': css.fontWeight.semibold
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.bold
             });
             utilities.verifyCSS(fillInTheGapsOverImageTextPage.specialCharactersPreviewPopupCategoryAccordionExpandIcon().last().find('svg'), {
                 'fill': css.color.activeButtons
             });
-            utilities.verifyCSS(fillInTheGapsOverImageTextPage.specialCharactersPreviewPopupSymbol().eq(0).find('svg'), {
-                'fill': css.color.defaultBackground
+            utilities.verifyCSS(fillInTheGapsOverImageTextPage.specialCharactersPreviewPopupSymbol().eq(0).find('svg path'), {
+                'fill': css.color.activeButtons
             });
         });
 
@@ -191,10 +188,10 @@ describe('Create item page - Fill in the gaps over image - text - Special charac
             cy.checkAccessibility(dialogBoxBase.dialogBox());
             cy.log('Closing preview popup');
             dialogBoxBase.steps.closeWarningPopup();
-            cy.checkAccessibility(fillInTheGapsOverImageTextPage.specialCharactersLabel().parent());
+            cy.checkAccessibility(fillInTheGapsOverImageTextPage.specialCharactersLabel());
             cy.log('Selecting show only custom special characters radio button');
             fillInTheGapsOverImageTextPage.steps.selectShowOnlyCustomSpecialCharactersRadioButton();
-            cy.checkAccessibility(fillInTheGapsOverImageTextPage.specialCharactersLabel().parent());
+            cy.checkAccessibility(fillInTheGapsOverImageTextPage.customSpecialCharactersInputFieldWrapper());
         });
     });
 

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

@@ -1,7 +1,10 @@
-import { fillInTheGapsOverImageTextPage } from "../../../pages";
+import { fillInTheGapsOverImageTextPage, itemPreviewPage, studentViewPage } from "../../../pages";
 import abortEarlySetup from "../../../support/helpers/abortEarly";
 import utilities from "../../../support/helpers/utilities";
 const css = Cypress.env('css');
+let correctAnswerViews = ['Question preview', 'Item preview', 'Student view'];
+const views = utilities.getViews(correctAnswerViews);
+let itemReferenceID = "";
 
 describe('Create Item page - drag and drop into categories: Student view settings', () => {
     before(() => {
@@ -34,6 +37,56 @@ describe('Create Item page - drag and drop into categories: Student view setting
         fillInTheGapsOverImageTextPage.tests.verifySpellCheckFunctionalityPreviewTab();
     });
 
+    views.forEach((view) => {
+        describe(`${view}: Student view settings`, () => {
+            abortEarlySetup();
+            before(() => {
+                switch (view) {
+                    case 'Question preview':
+                        fillInTheGapsOverImageTextPage.steps.navigateToCreateQuestion('fill in the gaps over image with text');
+                        cy.barsPreLoaderWait();
+                        fillInTheGapsOverImageTextPage.steps.uploadFile('highlightImage.jpg');
+                        fillInTheGapsOverImageTextPage.steps.verifyImageIsUploaded();
+                        fillInTheGapsOverImageTextPage.steps.insertResponseArea(80);
+                        fillInTheGapsOverImageTextPage.steps.checkSpellCheckCheckbox();
+                        fillInTheGapsOverImageTextPage.steps.switchToPreviewTab();
+                        break;
+                    case 'Item preview':
+                        cy.visit(`/item-engine/demo/edit-item/${utilities.base64Encoding(itemReferenceID)}`);
+                        itemPreviewPage.steps.switchToPreviewTab();
+                        break;
+                    case 'Student view':
+                        cy.visit(`/item-engine/demo/render-item/student-view/${utilities.base64Encoding(itemReferenceID)}`);
+                        break;
+                };
+            });
+
+            beforeEach(() => {
+                switch (view) {
+                    case 'Question preview':
+                        break;
+                    case 'Item preview':
+                        break;
+                    case 'Student view':
+                        cy.visit(`/item-engine/demo/render-item/student-view/${utilities.base64Encoding(itemReferenceID)}`);
+                        break;
+                }
+            });
+            if (view === 'Question preview') {
+                after(() => {
+                    fillInTheGapsOverImageTextPage.steps.clickOnSaveQuestionButton();
+                    fillInTheGapsOverImageTextPage.steps.clickOnConfirmButton();
+                    utilities.verifyElementVisibilityState(itemPreviewPage.referenceID(), 'visible');
+                    itemReferenceID = itemPreviewPage.steps.getItemReferenceID();
+                });
+            };
+
+            it('When the \'Spell check\' functionality is enabled, the response field should have \'spellcheck\' attribute set as \'true\' in the preview tab', () => {
+                fillInTheGapsOverImageTextPage.steps.verifySpellCheckOfResponseFieldPreviewTabEnabled(0);
+            });
+        });
+    });
+
     /*describe('Allow students to check answer: Edit tab', () => {
         abortEarlySetup();
         before(() => {

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

@@ -399,6 +399,18 @@ describe('Create Item page - Fill in the gaps over image with text: Style and la
             fillInTheGapsOverImageTextPage.steps.verifyResponseAreaDimensions(30, 118);
         });
 
+        it('User should only be able to enter numeric values in the \'Height (px)\' and \'Width (px)\' input fields', () => {
+            fillInTheGapsOverImageTextPage.steps.setTextContainerHeight('1*2');
+            fillInTheGapsOverImageTextPage.steps.setTextContainerWidth('2%1');
+            fillInTheGapsOverImageTextPage.steps.verifyValueInTextContainerWidthAndHeightInputField('12', '21');
+            fillInTheGapsOverImageTextPage.steps.setTextContainerHeight('apple');
+            fillInTheGapsOverImageTextPage.steps.setTextContainerWidth('news');
+            fillInTheGapsOverImageTextPage.steps.verifyValueInTextContainerWidthAndHeightInputField('', '');
+            fillInTheGapsOverImageTextPage.steps.setTextContainerHeight('54!@');
+            fillInTheGapsOverImageTextPage.steps.setTextContainerWidth('@12');
+            fillInTheGapsOverImageTextPage.steps.verifyValueInTextContainerWidthAndHeightInputField('54', '12');
+        });
+
         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);

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

@@ -0,0 +1,156 @@
+import { fillInTheGapsOverImageTextPage, itemPreviewPage, studentViewPage } from "../../../pages";
+import abortEarlySetup from "../../../support/helpers/abortEarly";
+import utilities from "../../../support/helpers/utilities";
+import { colorPopupComponent } from "../../../pages/components";
+let correctAnswerViews = ['Question preview', 'Item preview', 'Student view', 'Grading view', 'Correct answer view'];
+const views = utilities.getViews(correctAnswerViews);
+const css = Cypress.env('css');
+let itemReferenceID = "";
+const modifiedColor = 'rgb(121, 60, 60)';
+
+describe('Create Item page - Drag and drop into categories: Style and layout customization', () => {
+    before(() => {
+        cy.loginAs('admin');
+    });
+
+    views.forEach((view) => {
+        describe(`${view}: Style and Layout Customization - Default State`, () => {
+            abortEarlySetup();
+            before(() => {
+                switch (view) {
+                    case 'Question preview':
+                        fillInTheGapsOverImageTextPage.steps.navigateToCreateQuestion('fill in the gaps over image with text');
+                        cy.barsPreLoaderWait();
+                        fillInTheGapsOverImageTextPage.steps.uploadFile('highlightImage.jpg');
+                        fillInTheGapsOverImageTextPage.steps.verifyImageIsUploaded();
+                        fillInTheGapsOverImageTextPage.steps.insertResponseArea(80);
+                        fillInTheGapsOverImageTextPage.steps.selectResponseArea(0);
+                        fillInTheGapsOverImageTextPage.steps.selectResponseAreaPointerStyle('left');
+                        fillInTheGapsOverImageTextPage.steps.switchToPreviewTab();
+                        break;
+                    case 'Item preview':
+                        cy.visit(`/item-engine/demo/edit-item/${utilities.base64Encoding(itemReferenceID)}`);
+                        itemPreviewPage.steps.switchToPreviewTab();
+                        fillInTheGapsOverImageTextPage.steps.switchToGradingView();
+                        break;
+                    case 'Student view':
+                        cy.visit(`/item-engine/demo/render-item/student-view/${utilities.base64Encoding(itemReferenceID)}`);
+                        break;
+                    case 'Grading view':
+                        cy.visit(`/item-engine/demo/render-item/grading-view/${utilities.base64Encoding(itemReferenceID)}`);
+                        break;
+                    case 'Correct answer view':
+                        cy.visit(`/item-engine/demo/render-item/correct-answer-view/${utilities.base64Encoding(itemReferenceID)}`);
+                        break;
+                };
+            });
+
+            beforeEach(() => {
+                switch (view) {
+                    case 'Question preview':
+                        break;
+                    case 'Item preview':
+                        fillInTheGapsOverImageTextPage.steps.verifyQuestionPreviewStateWhenSwitchingBackToStudentView();
+                        itemPreviewPage.steps.resetQuestionPreview();
+                        break;
+                }
+            });
+
+            if (view === 'Question preview') {
+                after(() => {
+                    fillInTheGapsOverImageTextPage.steps.clickOnSaveQuestionButton();
+                    fillInTheGapsOverImageTextPage.steps.clickOnConfirmButton();
+                    utilities.verifyElementVisibilityState(itemPreviewPage.referenceID(), 'visible');
+                    itemReferenceID = itemPreviewPage.steps.getItemReferenceID();
+                });
+            };
+
+            it(`Text container should have default border color, fill color, and border style in ${view}`, () => {
+                fillInTheGapsOverImageTextPage.steps.verifyAnswerInputFieldFillColor(0, css.color.optionsBg);
+                fillInTheGapsOverImageTextPage.steps.verifyAnswerInputFieldBorderColor(0, `1px solid ${css.color.activeComponentBorder}`);
+                fillInTheGapsOverImageTextPage.steps.verifyAnswerInputFieldBorderStyle(0, 'solid');
+            });
+
+            it(`text container connector style should be displayed in default state in ${view}`, () => {
+                fillInTheGapsOverImageTextPage.steps.verifyResponseAreaConnectorEndPointShapePreviewTab('Circle');
+            });
+        });
+    });
+
+    views.forEach((view) => {
+        describe(`${view}: Style and Layout Customization - modified State`, () => {
+            abortEarlySetup();
+            before(() => {
+                switch (view) {
+                    case 'Question preview':
+                        fillInTheGapsOverImageTextPage.steps.navigateToCreateQuestion('fill in the gaps over image with text');
+                        cy.barsPreLoaderWait();
+                        fillInTheGapsOverImageTextPage.steps.uploadFile('highlightImage.jpg');
+                        fillInTheGapsOverImageTextPage.steps.verifyImageIsUploaded();
+                        fillInTheGapsOverImageTextPage.steps.insertResponseArea(80);
+                        fillInTheGapsOverImageTextPage.steps.selectResponseArea(0);
+                        fillInTheGapsOverImageTextPage.steps.selectResponseAreaPointerStyle('left');
+                        fillInTheGapsOverImageTextPage.steps.expandStyleAndLayoutCustomizationAccordion();
+                        fillInTheGapsOverImageTextPage.steps.selectEndPointShapeButton('Square');
+                        fillInTheGapsOverImageTextPage.steps.editColor(0);
+                        colorPopupComponent.steps.clickInColorSaturationPalette();
+                        colorPopupComponent.steps.clickOnOkButton();
+                        fillInTheGapsOverImageTextPage.steps.editColor(1);
+                        colorPopupComponent.steps.clickInColorSaturationPalette();
+                        colorPopupComponent.steps.clickOnOkButton();
+                        fillInTheGapsOverImageTextPage.steps.selectBorderStyleToggleButton('Dotted');
+                        fillInTheGapsOverImageTextPage.steps.checkSetHeightAndWidthForAllTextContainersCheckbox();
+                        fillInTheGapsOverImageTextPage.steps.setTextContainerHeight(100);
+                        fillInTheGapsOverImageTextPage.steps.setTextContainerWidth(200);
+                        fillInTheGapsOverImageTextPage.steps.switchToPreviewTab();
+                        break;
+                    case 'Item preview':
+                        cy.visit(`/item-engine/demo/edit-item/${utilities.base64Encoding(itemReferenceID)}`);
+                        itemPreviewPage.steps.switchToPreviewTab();
+                        fillInTheGapsOverImageTextPage.steps.switchToGradingView();
+                        break;
+                    case 'Grading view':
+                        cy.visit(`/item-engine/demo/render-item/student-view/${utilities.base64Encoding(itemReferenceID)}`);
+                        break;
+                };
+            });
+
+            beforeEach(() => {
+                switch (view) {
+                    case 'Question preview':
+                        break;
+                    case 'Item preview':
+                        fillInTheGapsOverImageTextPage.steps.verifyQuestionPreviewStateWhenSwitchingBackToStudentView();
+                        itemPreviewPage.steps.resetQuestionPreview();
+                        break;
+                    case 'Grading view':
+                        cy.visit(`/item-engine/demo/render-item/student-view/${utilities.base64Encoding(itemReferenceID)}`);
+                        break;
+                }
+            });
+
+            if (view === 'Question preview') {
+                after(() => {
+                    fillInTheGapsOverImageTextPage.steps.clickOnSaveQuestionButton();
+                    fillInTheGapsOverImageTextPage.steps.clickOnConfirmButton();
+                    utilities.verifyElementVisibilityState(itemPreviewPage.referenceID(), 'visible');
+                    itemReferenceID = itemPreviewPage.steps.getItemReferenceID();
+                });
+            };
+
+            it(`Text container should have default border color, fill color, and border style in ${view}`, () => {
+                fillInTheGapsOverImageTextPage.steps.verifyAnswerInputFieldFillColor(0, modifiedColor);
+                fillInTheGapsOverImageTextPage.steps.verifyAnswerInputFieldBorderColor(0, `1px dotted ${modifiedColor}`);
+                fillInTheGapsOverImageTextPage.steps.verifyAnswerInputFieldBorderStyle(0, 'dotted');
+            });
+
+            it(`text container connector style should be displayed in default state in ${view}`, () => {
+                fillInTheGapsOverImageTextPage.steps.verifyResponseAreaConnectorEndPointShapePreviewTab('Square');
+            });
+
+            it(`Text containers should have modified height and width in ${view}`, () => {
+                fillInTheGapsOverImageTextPage.steps.verifyAnswerInputFieldHeightAndWidthInAllViews(0, '100px', '200px');
+            });
+        });
+    });
+});

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

@@ -43,7 +43,5 @@ describe('Create item page - Fill in the gaps over image with text: Supported fi
             utilities.verifyElementVisibilityState(fillInTheGapsOverImageTextPage.errorMessage(), 'notExist');
             utilities.verifyElementVisibilityState(fillInTheGapsOverImageTextPage.canvasUploadedImage(), 'notExist');
         });
-
-        fillInTheGapsOverImageTextPage.tests.verifyErrorMessageCSSAndA11y();
     });
 });