itemengine-cypress-automation 1.0.278-revert-134-updatedRepo12thDec-5aacd81.0 → 1.0.278

package/cypress/pages/textEntryMathPage.js

@@ -1,9 +1,14 @@
 import { decimalSeparator, evaluationMethods } from "../fixtures/evaluationMethodsAndCustomSettings"
 import utilities from "../support/helpers/utilities"
-import { questionInstructionsComponent, questionInputFieldComponent, createQuestionBasePage, commonComponents, additionalSettingsPanel, autoScoredSpecifyCorrectAnswerSection, scoringSectionBaseEditTab, autoScoredScoringSectionMultiResponseType, autoScoredScoringPreviewTab, equationEditorFlyout, autoScoredStudentViewSettings, correctIncorrectAnswerLabelComponent, ckEditorToolbar, colorPopupComponent, gradingViewEnumerationComponent, ariaLabelSectionComponent, additionalSettingsAccessibilitySectionComponent, equationEditorSectionCommonComponent } from "./components"
+import { questionInstructionsComponent, questionInputFieldComponent, createQuestionBasePage, commonComponents, additionalSettingsPanel, autoScoredSpecifyCorrectAnswerSection, scoringSectionBaseEditTab, autoScoredScoringSectionMultiResponseType, autoScoredScoringPreviewTab, equationEditorFlyout, autoScoredStudentViewSettings, correctIncorrectAnswerLabelComponent, ckEditorToolbar, colorPopupComponent, gradingViewEnumerationComponent, ariaLabelSectionComponent, additionalSettingsAccessibilitySectionComponent, equationEditorSectionCommonComponent, styleAndLayoutCustomizationAccordionComponent, imageCanvasComponent } from "./components"
 import { customSettingsSeparatorComponent } from "./components/customSettingsSeparatorsComponent";
+import { dialogBoxBase } from "./dialogBoxBase";
+
 
 const css = Cypress.env('css');
+const borderStyles = ["Dashed", "Dotted", "Solid", "None"]
+const modifiedColor = 'rgb(121, 60, 60)'
+const selectedStyle = 'dashed';
 
 const selectors = {
     ...questionInstructionsComponent,
@@ -18,6 +23,8 @@ const selectors = {
     ...gradingViewEnumerationComponent,
     ...ariaLabelSectionComponent,
     ...equationEditorSectionCommonComponent,
+    ...styleAndLayoutCustomizationAccordionComponent,
+    ...imageCanvasComponent,
     addStructureTab: () => cy.get('[data-ngie-testid="add-structure-tab"]'),
     responseToken: () => cy.get('.cke_button__addresponse'),
     penaltyPointsForEachIncorrectOptionInputField: () => cy.get('input[aria-label="Penalty points for each incorrect text container"]'),
@@ -27,6 +34,7 @@ const selectors = {
     responseAccordion: () => cy.get('.response-accordion [class*="ResponseAccordionstyles__ResponsePanel"]'),
     responseAccordionLabel: () => cy.get('[class*="ResponseAccordionstyles__Label"]'),
     responseAccordionAnswerInputField: () => cy.get('[class*="__AnswersWrapper"] .equation-input-component .mq-editable-field'),
+    responseAccordionAnswerInputFieldNew: () => cy.get('[class*="__AnswersWrapper"] .equation-input-component'),
     responseAccordionPointsWrapper: () => cy.get('[class*="ResponseAccordionstyles__PointsDiv"]'),
     responseAccordionPointsLabel: () => cy.get('[class*="ResponseAccordionstyles__PointsLabel"]'),
     responseAccordionPointsScore: () => cy.get('[class*="ResponseAccordionstyles__Points-"]'),
@@ -147,6 +155,22 @@ const selectors = {
     equationEditorInputField: () => cy.get('[class*="EquationEditorstyles__PreviewWrappe"]'),
     equationEditorInputFieldNew: () => cy.get('.latex-preview-response-wrapper'),
     dialogBox: () => cy.get('[role="dialog"]'),
+
+    //style and layout customization
+    componentContainerLabel: () => cy.get('[class*="styles__SectionWrapper"][class*="label"]'),
+    fillColorLabel: () => cy.get('.sub-section-label').eq(0),
+    borderColorLabel: () => cy.get('.sub-section-label').eq(1),
+    colorBlock: () => cy.get('.color-grid-wrapper .color-picker-block'),
+    editColorButton: () => cy.get('button[aria-label="edit color"]'),
+    borderStyleLabel: () => cy.get('.options-border-style .options-label'),
+    dashedBorderStyleToggleButton: () => cy.get('[data-ngie-testid="dashed-toggle-button"]').eq(0),
+    dottedBorderStyleToggleButton: () => cy.get('[data-ngie-testid="dotted-toggle-button"]').eq(0),
+    solidBorderStyleToggleButton: () => cy.get('[data-ngie-testid="solid-toggle-button"]').eq(0),
+    noneBorderStyleToggleButton: () => cy.get('[data-ngie-testid="none-toggle-button"]').eq(0),
+    colorBlockSelectedIcon: () => cy.get('[class*="BtnSelectionWrapper"] svg'),
+    responseArea: () => cy.get('[data-widget="add_response"]'),
+    responseAreaNew: () => cy.get('.canvas-dropzone'),
+    answerInputFieldPreviewTabNew: () => cy.get('.equation-input-component '),
 }
 
 const steps = {
@@ -167,6 +191,8 @@ const steps = {
     ...gradingViewEnumerationComponent.steps,
     ...ariaLabelSectionComponent.steps,
     ...equationEditorSectionCommonComponent.steps,
+    ...styleAndLayoutCustomizationAccordionComponent.steps,
+    ...imageCanvasComponent.steps,
     verifyAddStructureTabIsSelected: () => {
         textEntryMathPage.addStructureTab()
             .should('have.attr', 'aria-selected', 'true');
@@ -994,7 +1020,7 @@ const steps = {
      */
     verifyAnswerInputFieldAriaLabelSpecifyCorrectAnswerSection: (inputFieldIndex, ariaLabel) => {
         textEntryMathPage.steps.expandResponseAccordionSpecifyCorrectAnswer(inputFieldIndex);
-        textEntryMathPage.responseAccordionAnswerInputField()
+        textEntryMathPage.responseAccordionAnswerInputFieldNew()
             .eq(inputFieldIndex)
             .should('have.attr', 'aria-label', ariaLabel)
     },
@@ -1082,6 +1108,229 @@ const steps = {
         textEntryMathPage.responseInputFieldMathTemplatePreviewTab()
             .should('not.have.class', 'mq-editable-field');
     },
+
+    /**
+     * Verifies the ARIA label text input fields.
+     * @param {number} inputFieldIndex - The index of the input field to verify.
+     */
+    verifyAriaLabelTextInputFields: (inputFieldIndex) => {
+        utilities.verifyInnerText(utilities.getNthElement(textEntryMathPage.inputFieldNumeration(), inputFieldIndex), `${inputFieldIndex + 1}`);
+        // utilities.verifyInnerText(textEntryMathPage.inputFieldNumeration(), `${inputFieldIndex + 1}`)
+        utilities.verifyInputFieldValue(textEntryMathPage.ariaLabelInputField(), '');
+    },
+
+    /**
+     * Verifies the color of a color block.
+     * @param {number} blockIndex - The index of the color block.
+     * @param {string} color - The expected background color of the color block.
+     */
+    verifyColorBlockColor: (blockIndex, color) => {
+        utilities.verifyCSS(utilities.getNthElement(textEntryMathPage.colorBlock(), blockIndex), {
+            'background-color': color
+        });
+    },
+
+    /**
+     * @param {number} blockIndex index of the color block in the style and layout customization section
+     * @description this function verifies the selected state of a block
+     */
+    verifyColorBlockSelectedState: (blockIndex) => {
+        utilities.getNthElement(textEntryMathPage.colorBlock(), blockIndex)
+            .should('have.class', 'selected-button-icon')
+            .within(() => {
+                utilities.verifyElementVisibilityState(textEntryMathPage.colorBlockSelectedIcon(), 'visible');
+            });
+    },
+
+    /**
+     * Verifies the selected state of a border style toggle button.
+     * @param {('Dashed' | 'Dotted' | 'Solid' | 'None')} button - The border style to verify.
+     * @throws {Error} Throws an error if an invalid border style is provided.
+     */
+    verifyBorderStyleToggleButtonSelectedState: (button) => {
+        switch (button) {
+            case 'Dashed':
+                textEntryMathPage.dashedBorderStyleToggleButton()
+                    .should('have.class', 'ngie-toggle-button-selected');
+                break;
+            case 'Dotted':
+                textEntryMathPage.dottedBorderStyleToggleButton()
+                    .should('have.class', 'ngie-toggle-button-selected');
+                break;
+            case 'Solid':
+                textEntryMathPage.solidBorderStyleToggleButton()
+                    .should('have.class', 'ngie-toggle-button-selected');
+                break;
+            case 'None':
+                textEntryMathPage.noneBorderStyleToggleButton()
+                    .should('have.class', 'ngie-toggle-button-selected');
+                break;
+            default:
+                throw new Error('Invalid border style');
+        }
+    },
+
+    /**
+     * Verifies the background color of a response area element.
+     * @param {number} responseAreaIndex - The index of the response area to verify.
+     * @param {string} colorValue - The expected background color value.
+     */
+    verifyResponseAreaFillColor: (responseAreaIndex, colorValue) => {
+        utilities.verifyCSS(utilities.getNthElement(textEntryMathPage.responseArea(), responseAreaIndex), {
+            'background-color': colorValue
+        });
+    },
+
+    /**
+     * Selects a color block by index.
+     * @param {number} blockIndex - The index of the color block to select.
+     */
+    selectColorBlock: (blockIndex) => {
+        utilities.getNthElement(textEntryMathPage.colorBlock(), blockIndex)
+            .click();
+    },
+
+    /**
+    * Clicks on the edit color button.
+    * @param {number} buttonIndex - The index of the edit color button.
+    */
+    editColor: (buttonIndex) => {
+        utilities.getNthElement(textEntryMathPage.editColorButton(), buttonIndex)
+            .click();
+    },
+
+    /**
+     * Verifies the background color of the answer input field at the specified index.
+     * @param {number} responseAreaIndex - The index of the response area to verify.
+     * @param {string} colorValue - The expected background color value in CSS format.
+     */
+    verifyAnswerInputFieldFillColor: (responseAreaIndex, colorValue) => {
+        utilities.verifyCSS(utilities.getNthElement(textEntryMathPage.answerInputFieldPreviewTab(), responseAreaIndex), {
+            'background-color': colorValue
+        });
+    },
+
+    /**
+     * Verifies the border color of the answer input field at the specified index.
+     * @param {number} responseAreaIndex - The index of the response area to verify.
+     * @param {string} borderValue - The expected border color value in CSS format.
+     */
+    verifyAnswerInputFieldBorderColor: (responseAreaIndex, borderValue) => {
+        utilities.verifyCSS(utilities.getNthElement(textEntryMathPage.answerInputFieldPreviewTab(), responseAreaIndex), {
+            'border': borderValue
+        });
+    },
+
+    /**
+     * Verifies the border style of the answer input field at the specified index.
+     * @param {number} responseAreaIndex - The index of the response area to verify.
+     * @param {string} borderStyle - The expected border style value in CSS format.
+     */
+    verifyAnswerInputFieldBorderStyle: (responseAreaIndex, borderStyle) => {
+        const styleName = borderStyle.toLowerCase();
+        utilities.verifyCSS(utilities.getNthElement(textEntryMathPage.answerInputFieldPreviewTab(), responseAreaIndex), {
+            'border-style': styleName
+        });
+    },
+
+    /**
+     * Selects a border style toggle button and verifies it has the selected class.
+     * @param {('Dashed' | 'Dotted' | 'Solid' | 'None')} button - The border style to select.
+     * @throws {Error} Throws an error if an invalid border style is provided.
+     */
+    selectBorderStyleToggleButton: (button) => {
+        switch (button) {
+            case 'Dashed':
+                textEntryMathPage.dashedBorderStyleToggleButton()
+                    .click()
+                    .should('have.class', 'ngie-toggle-button-selected');
+                break;
+            case 'Dotted':
+                textEntryMathPage.dottedBorderStyleToggleButton()
+                    .click()
+                    .should('have.class', 'ngie-toggle-button-selected');
+                break;
+            case 'Solid':
+                textEntryMathPage.solidBorderStyleToggleButton()
+                    .click()
+                    .should('have.class', 'ngie-toggle-button-selected');
+                break;
+            case 'None':
+                textEntryMathPage.noneBorderStyleToggleButton()
+                    .click()
+                    .should('have.class', 'ngie-toggle-button-selected');
+                break;
+            default:
+                throw new Error('Invalid border style');
+        }
+    },
+
+    /**
+     * Verifies the border color of a response area element.
+     * @param {number} responseAreaIndex - The index of the response area to verify.
+     * @param {string} colorValue - The expected border color value.
+     */
+    verifyResponseAreaBorderColor: (responseAreaIndex, colorValue) => {
+        utilities.verifyCSS(utilities.getNthElement(textEntryMathPage.responseArea(), responseAreaIndex), {
+            'border': colorValue
+        });
+    },
+
+    /**
+     * Verifies the background color of a response area element.
+     * @param {number} responseAreaIndex - The index of the response area to verify.
+     * @param {string} colorValue - The expected background color value.
+     */
+    verifyResponseAreaFillColorAddBackGround: (responseAreaIndex, colorValue) => {
+        utilities.verifyCSS(utilities.getNthElement(textEntryMathPage.responseAreaNew(), responseAreaIndex), {
+            'background-color': colorValue
+        });
+    },
+
+    /**
+     * Verifies the background color of the answer input field at the specified index.
+     * @param {number} responseAreaIndex - The index of the response area to verify.
+     * @param {string} colorValue - The expected background color value in CSS format.
+     */
+    verifyAnswerInputFieldFillColorAddBackground: (responseAreaIndex, colorValue) => {
+        utilities.verifyCSS(utilities.getNthElement(textEntryMathPage.answerInputFieldPreviewTabNew(), responseAreaIndex), {
+            'background-color': colorValue
+        });
+    },
+
+    /**
+     * Verifies the border color of a response area element.
+     * @param {number} responseAreaIndex - The index of the response area to verify.
+     * @param {string} colorValue - The expected border color value.
+     */
+    verifyResponseAreaOverImageBorderColorAddBackGround: (responseAreaIndex, colorValue) => {
+        utilities.verifyCSS(utilities.getNthElement(textEntryMathPage.responseAreaNew(), responseAreaIndex), {
+            'border': colorValue
+        });
+    },
+
+    /**
+     * Verifies the border color of the answer input field at the specified index.
+     * @param {number} responseAreaIndex - The index of the response area to verify.
+     * @param {string} borderValue - The expected border color value in CSS format.
+     */
+    verifyAnswerInputFieldBorderColorAddBackGround: (responseAreaIndex, borderValue) => {
+        utilities.verifyCSS(utilities.getNthElement(textEntryMathPage.answerInputFieldPreviewTab(), responseAreaIndex), {
+            'border': borderValue
+        });
+    },
+
+    /**
+     * Verifies the border style of the answer input field at the specified index.
+     * @param {number} responseAreaIndex - The index of the response area to verify.
+     * @param {string} borderStyle - The expected border style value in CSS format.
+     */
+    verifyAnswerInputFieldBorderStyleAddBackGround: (responseAreaIndex, borderStyle) => {
+        const styleName = borderStyle.toLowerCase();
+        utilities.verifyCSS(utilities.getNthElement(textEntryMathPage.answerInputFieldPreviewTab(), responseAreaIndex), {
+            'border-style': styleName
+        });
+    }
 }
 
 const tests = {
@@ -1097,6 +1346,7 @@ const tests = {
     ...ariaLabelSectionComponent.tests,
     ...additionalSettingsAccessibilitySectionComponent.tests,
     ...equationEditorSectionCommonComponent.tests,
+    ...styleAndLayoutCustomizationAccordionComponent.tests,
     /**
      * Verifies the contents and functionality of the 'Specify correct answer' accordion for multiple selection questions.
      * @param {{'Correct' | 'Alternative'}} accordionName - The name of the accordion to be used in the validation.
@@ -1123,7 +1373,7 @@ const tests = {
             textEntryMathPage.steps.expandResponseAccordionSpecifyCorrectAnswer(0);
             textEntryMathPage.steps.focusInResponseAnswerInputFieldSpecifyCorrectAnswerSection(0);
             equationEditorFlyout.steps.focusInPreviewInputField();
-            equationEditorFlyout.steps.clickOnEquationEditorCancelButton();
+            equationEditorFlyout.steps.clickOnOkButton();
             textEntryMathPage.steps.focusOutOfResponseAnswerInputFieldSpecifyCorrectAnswerSection(0);
             utilities.verifyElementVisibilityState(commonComponents.errorMessage(), 'visible');
             utilities.verifyInnerText(commonComponents.errorMessage(), 'Error: Answer is required.');
@@ -1135,8 +1385,11 @@ const tests = {
         });
 
         it('User should be able to expand multiple response accordions simultaneously', () => {
+            textEntryMathPage.steps.deleteAlternativeAnswerAccordion(0);
+            textEntryMathPage.steps.expandResponseAccordionSpecifyCorrectAnswer(0);
             textEntryMathPage.steps.expandResponseAccordionSpecifyCorrectAnswer(1);
             textEntryMathPage.steps.verifyResponseAccordionIsExpanded(0);
+            textEntryMathPage.steps.verifyResponseAccordionIsExpanded(1);
         });
 
         autoScoredSpecifyCorrectAnswerSection.tests.verifyAutoScoredPointsErrorMessageWhenPointsFieldIsEmpty(accordionName);
@@ -1197,6 +1450,465 @@ const tests = {
         it('User should be able to select a different evaluation method', () => {
             textEntryMathPage.steps.selectEvaluationMethod(evaluationMethods[3].name);
         });
+    },
+
+    /**
+     * Verifies the border color functionality in edit tab.
+     * @param {string} type - 'Add structure' || 'Add background'.
+     */
+    verifyBorderColorFunctionalityEditTab: (type) => {
+        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 question input field should be the default selected color', () => {
+            if (type === 'add background') {
+                textEntryMathPage.steps.verifyResponseAreaOverImageBorderColorAddBackGround(0, `1px dashed ${css.color.activeComponentBorder}`);
+            }
+            else {
+                textEntryMathPage.steps.verifyResponseAreaBorderColor(0, `1px solid ${css.color.activeComponentBorder}`);
+                textEntryMathPage.steps.verifyResponseAreaBorderColor(1, `1px solid ${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 question input field', () => {
+            textEntryMathPage.steps.selectColorBlock(3);
+            if (type === 'add background') {
+                textEntryMathPage.steps.verifyResponseAreaOverImageBorderColorAddBackGround(0, `1px dashed ${css.color.transparent}`);
+            }
+            else {
+                textEntryMathPage.steps.verifyResponseAreaBorderColor(0, `1px solid ${css.color.transparent}`);
+                textEntryMathPage.steps.verifyResponseAreaBorderColor(1, `1px solid ${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 question input field should be the modified selected color', () => {
+            textEntryMathPage.steps.editColor(1);
+            colorPopupComponent.steps.clickInColorSaturationPalette();
+            colorPopupComponent.steps.clickOnOkButton();
+            if (type === 'add background') {
+                textEntryMathPage.steps.verifyResponseAreaOverImageBorderColorAddBackGround(0, `1px dashed ${modifiedColor}`);
+            }
+            else {
+                textEntryMathPage.steps.verifyResponseAreaBorderColor(0, `1px solid ${modifiedColor}`);
+                textEntryMathPage.steps.verifyResponseAreaBorderColor(1, `1px solid ${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', () => {
+            if (type === 'add background') {
+                textEntryMathPage.steps.insertResponseArea(60);
+                textEntryMathPage.steps.verifyResponseAreaOverImageBorderColorAddBackGround(0, `1px dashed ${modifiedColor}`);
+                textEntryMathPage.steps.verifyResponseAreaOverImageBorderColorAddBackGround(1, `1px dashed ${modifiedColor}`);
+            }
+            else {
+                textEntryMathPage.steps.addResponseArea();
+                textEntryMathPage.steps.verifyResponseAreaBorderColor(0, `1px solid ${modifiedColor}`);
+                textEntryMathPage.steps.verifyResponseAreaBorderColor(1, `1px solid ${modifiedColor}`);
+                textEntryMathPage.steps.verifyResponseAreaBorderColor(2, `1px solid ${modifiedColor}`);
+            }
+        });
+    },
+
+    /**
+     * Verifies the border color functionality in preview tab.
+     * @param {string} type - 'Add structure' || 'Add background'.
+     */
+    verifyBorderColorFunctionalityPreviewTab: (type) => {
+        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', () => {
+            if (type === 'add background') {
+                textEntryMathPage.steps.verifyAnswerInputFieldBorderColorAddBackGround(0, `1px dashed ${css.color.activeComponentBorder}`);
+            }
+            else {
+                textEntryMathPage.steps.verifyAnswerInputFieldBorderColor(0, `1px dashed ${css.color.activeComponentBorder}`);
+                textEntryMathPage.steps.verifyAnswerInputFieldBorderColor(1, `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', () => {
+            textEntryMathPage.steps.switchToEditTab();
+            textEntryMathPage.steps.selectColorBlock(3);
+            textEntryMathPage.steps.switchToPreviewTab();
+            if (type === 'add background') {
+                textEntryMathPage.steps.verifyAnswerInputFieldBorderColorAddBackGround(0, `0px dashed ${css.color.text}`);
+            }
+            else {
+                textEntryMathPage.steps.verifyAnswerInputFieldBorderColor(0, `0px dashed ${css.color.text}`);
+                textEntryMathPage.steps.verifyAnswerInputFieldBorderColor(1, `0px dashed ${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', () => {
+            textEntryMathPage.steps.switchToEditTab();
+            textEntryMathPage.steps.editColor(1);
+            colorPopupComponent.steps.clickInColorSaturationPalette();
+            colorPopupComponent.steps.clickOnOkButton();
+            textEntryMathPage.steps.switchToPreviewTab();
+            if (type === 'add background') {
+                textEntryMathPage.steps.verifyAnswerInputFieldBorderColorAddBackGround(0, `1px dashed ${modifiedColor}`);
+            }
+            else {
+                textEntryMathPage.steps.verifyAnswerInputFieldBorderColor(0, `1px dashed ${modifiedColor}`);
+                textEntryMathPage.steps.verifyAnswerInputFieldBorderColor(1, `1px dashed ${modifiedColor}`);
+            }
+        });
+
+        it('The background color of the text containers in the preview tab should be the modified selected color', () => {
+            textEntryMathPage.steps.switchToEditTab();
+            if (type === 'add background') {
+                textEntryMathPage.steps.insertResponseArea(60);
+                textEntryMathPage.steps.switchToPreviewTab();
+                textEntryMathPage.steps.verifyAnswerInputFieldBorderColorAddBackGround(0, `1px dashed ${modifiedColor}`);
+                textEntryMathPage.steps.verifyAnswerInputFieldBorderColorAddBackGround(1, `1px dashed ${modifiedColor}`);
+            }
+            else {
+                textEntryMathPage.steps.addResponseArea();
+                textEntryMathPage.steps.switchToPreviewTab();
+                textEntryMathPage.steps.verifyAnswerInputFieldBorderColor(0, `1px dashed ${modifiedColor}`);
+                textEntryMathPage.steps.verifyAnswerInputFieldBorderColor(1, `1px dashed ${modifiedColor}`);
+                textEntryMathPage.steps.verifyAnswerInputFieldBorderColor(2, `1px dashed ${modifiedColor}`);
+            }
+        });
+    },
+
+    verifyEditColorPopupFunctionality: () => {
+        it('When the user clicks on the \'Edit color\' present in an \'Text color\' popup, then a select color popup should be displayed', () => {
+            textEntryMathPage.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();
+    },
+
+    verifyColorPopupUpdatingSelectedColorFunctionality: () => {
+        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', () => {
+            textEntryMathPage.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)');
+        });
+    },
+
+    verifyColorPopUpCancelOkButtonFunctionality: () => {
+        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', () => {
+            textEntryMathPage.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')
+            textEntryMathPage.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)');
+        });
+    },
+
+    verifyStyleAndLayoutCustomizationAccordionContent: () => {
+        it('"Text container" label should be displayed', () => {
+            utilities.verifyInnerText(textEntryMathPage.componentContainerLabel(), 'Text container');
+        });
+
+        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(textEntryMathPage.fillColorLabel(), 'Fill color');
+            textEntryMathPage.steps.verifyColorBlockColor(0, css.color.optionsBg);
+            textEntryMathPage.steps.verifyColorBlockSelectedState(0);
+            textEntryMathPage.steps.verifyColorBlockColor(1, css.color.none);
+            utilities.verifyInnerText(utilities.getNthElement(textEntryMathPage.editColorButton(), 0), 'Edit color');
+            utilities.verifyElementVisibilityState(textEntryMathPage.editColorButton(), 'visible');
+        });
+
+        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(textEntryMathPage.borderColorLabel(), 'Border color');
+            utilities.verifyInnerText(utilities.getNthElement(textEntryMathPage.editColorButton(), 1), 'Edit color');
+            utilities.verifyElementVisibilityState(textEntryMathPage.editColorButton(), 'visible');
+            textEntryMathPage.steps.verifyColorBlockColor(2, css.color.activeComponentBorder);
+            textEntryMathPage.steps.verifyColorBlockSelectedState(2);
+            textEntryMathPage.steps.verifyColorBlockColor(3, css.color.none);
+        });
+
+        it(`"Border style" label and four toggle buttons should be displayed - "Dashed", "Dotted", "Solid", "None". By default \'Dashed\' button should be in selected state`, () => {
+            utilities.verifyInnerText(textEntryMathPage.borderStyleLabel(), 'Border style');
+            utilities.verifyInnerText(textEntryMathPage.dashedBorderStyleToggleButton(), 'Dashed');
+            utilities.verifyElementVisibilityState(textEntryMathPage.dashedBorderStyleToggleButton(), 'visible');
+            utilities.verifyInnerText(textEntryMathPage.dottedBorderStyleToggleButton(), 'Dotted');
+            utilities.verifyElementVisibilityState(textEntryMathPage.dottedBorderStyleToggleButton(), 'visible');
+            utilities.verifyInnerText(textEntryMathPage.solidBorderStyleToggleButton(), 'Solid');
+            utilities.verifyElementVisibilityState(textEntryMathPage.solidBorderStyleToggleButton(), 'visible');
+            textEntryMathPage.steps.verifyBorderStyleToggleButtonSelectedState('Dashed');
+            utilities.verifyInnerText(textEntryMathPage.noneBorderStyleToggleButton(), 'None');
+            utilities.verifyElementVisibilityState(textEntryMathPage.noneBorderStyleToggleButton(), '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(textEntryMathPage.colorBlock(), 0).verifyTooltip('#F5F8FF');
+            utilities.getNthElement(textEntryMathPage.colorBlock(), 1).verifyTooltip('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(textEntryMathPage.colorBlock(), 2).verifyTooltip('#5200FF');
+            utilities.getNthElement(textEntryMathPage.colorBlock(), 3).verifyTooltip('None');
+        });
+
+        it('CSS of "Style and layout customization accordion contents"', { tags: 'css' }, () => {
+            utilities.verifyCSS(textEntryMathPage.componentContainerLabel(), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.semibold
+            });
+            utilities.verifyCSS(textEntryMathPage.fillColorLabel(), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.semibold
+            });
+            utilities.verifyCSS(textEntryMathPage.borderColorLabel(), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.semibold
+            });
+            utilities.verifyCSS(utilities.getNthElement(textEntryMathPage.colorBlock(), 0), {
+                'background-color': css.color.optionsBg,
+                'border': `1px solid ${css.color.figDefaultComponentBorder}`
+            });
+            utilities.verifyCSS(utilities.getNthElement(textEntryMathPage.editColorButton(), 0), {
+                'color': css.color.activeButtons,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular,
+                'background-color': css.color.transparent
+            });
+            utilities.verifyCSS(textEntryMathPage.borderStyleLabel(), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.semibold
+            });
+            utilities.verifyCSS(textEntryMathPage.dottedBorderStyleToggleButton(), {
+                'color': css.color.secondaryBtn,
+                'background-color': css.color.secondaryBtnBg,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular,
+                'border': `1px solid ${css.color.figDefaultComponentBorder}`
+            });
+            let selectedToggleButton;
+            if (selectedStyle == 'dashed') {
+                selectedToggleButton = textEntryMathPage.dashedBorderStyleToggleButton();
+            } else {
+                selectedToggleButton = textEntryMathPage.solidBorderStyleToggleButton();
+            }
+            utilities.verifyCSS(selectedToggleButton, {
+                'color': css.color.defaultBackground,
+                'background-color': css.color.secondaryBtnBg,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular,
+                'border': `2px solid ${css.color.primaryBtnBg}`
+            });
+        });
+
+        it('Accessibility of "Style and layout customization accordion contents"', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(textEntryMathPage.componentContainerLabel().parents('.ngie-accordion-detail'))
+        });
+
+        it('CSS of "Style and layout customization accordion contents" - hover state', { tags: 'css' }, () => {
+            utilities.triggerMouseover(utilities.getNthElement(textEntryMathPage.colorBlock(), 0));
+            utilities.verifyElementVisibilityState(textEntryMathPage.tooltipText(), 'visible');
+            utilities.verifyCSS(textEntryMathPage.tooltipText(), {
+                'background-color': css.color.tooltipBg,
+                'color': css.color.whiteText,
+                'font-size': css.fontSize.small,
+                'font-weight': css.fontWeight.regular
+            });
+            utilities.triggerMouseout(utilities.getNthElement(textEntryMathPage.colorBlock(), 0));
+            utilities.verifyElementVisibilityState(textEntryMathPage.tooltipText(), 'notExist');
+            utilities.hoverOverElement(utilities.getNthElement(textEntryMathPage.editColorButton(), 0));
+            utilities.verifyCSS(utilities.getNthElement(textEntryMathPage.editColorButton(), 0), {
+                'background-color': css.color.optionsBg,
+                'color': css.color.activeButtons,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular
+            });
+            utilities.hoverAwayFromElement();
+            utilities.hoverOverElement(textEntryMathPage.dottedBorderStyleToggleButton());
+            utilities.verifyCSS(textEntryMathPage.dottedBorderStyleToggleButton(), {
+                'color': css.color.secondaryBtn,
+                'background-color': css.color.secondaryBtnBg,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular,
+                'border': `2px solid ${css.color.draggableOptionBorder}`
+            });
+            utilities.hoverAwayFromElement();
+        });
+    },
+
+    /**
+     * Verifies the fill color functionality preview tab.
+     * @param {string} type - 'Add structure' || 'Add background'.
+     */
+    verifyFillColorFunctionalityEditTab: (type) => {
+        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 question input field should be the default selected color', () => {
+            if (type === 'add background') {
+                textEntryMathPage.steps.verifyResponseAreaFillColorAddBackGround(0, css.color.optionsBg);
+            }
+            else {
+                textEntryMathPage.steps.verifyResponseAreaFillColor(0, css.color.optionsBg);
+                textEntryMathPage.steps.verifyResponseAreaFillColor(1, css.color.optionsBg);
+            }
+        });
+
+        it('When the user selects the "None" color block, it should get in selected state and the no background color should be present for the text containers in the question input field', () => {
+            textEntryMathPage.steps.selectColorBlock(1);
+            if (type === 'add background') {
+                textEntryMathPage.steps.verifyResponseAreaFillColorAddBackGround(0, css.color.transparent);
+            }
+            else {
+                textEntryMathPage.steps.verifyResponseAreaFillColor(0, css.color.transparent);
+                textEntryMathPage.steps.verifyResponseAreaFillColor(1, css.color.transparent);
+            }
+        });
+
+        it('When the user clicks on the "Edit color" button, modifies color for the selected color block, then the background color of the text containers in the question input field should be the modified selected color', () => {
+            textEntryMathPage.steps.editColor(0);
+            colorPopupComponent.steps.clickInColorSaturationPalette();
+            colorPopupComponent.steps.clickOnOkButton();
+            if (type === 'add background') {
+                textEntryMathPage.steps.verifyResponseAreaFillColorAddBackGround(0, modifiedColor);
+            }
+            else {
+                textEntryMathPage.steps.verifyResponseAreaFillColor(0, modifiedColor);
+                textEntryMathPage.steps.verifyResponseAreaFillColor(1, 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', () => {
+            if (type === 'add background') {
+                textEntryMathPage.steps.insertResponseArea(60);
+                textEntryMathPage.steps.verifyResponseAreaFillColorAddBackGround(0, modifiedColor);
+                textEntryMathPage.steps.verifyResponseAreaFillColorAddBackGround(1, modifiedColor);;
+            }
+            else {
+                textEntryMathPage.steps.addResponseArea();
+                textEntryMathPage.steps.verifyResponseAreaFillColor(0, modifiedColor);
+                textEntryMathPage.steps.verifyResponseAreaFillColor(1, modifiedColor);
+                textEntryMathPage.steps.verifyResponseAreaFillColor(2, modifiedColor);
+            }
+        });
+    },
+
+    /**
+     * Verifies the fill color functionality preview tab.
+     * @param {string} type - 'Add structure' || 'Add background'.
+     */
+    verifyFillColorFunctionalityPreviewTab: (type) => {
+        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', () => {
+            if (type === 'add background') {
+                textEntryMathPage.steps.verifyAnswerInputFieldFillColorAddBackground(0, css.color.optionsBg);
+            }
+            else {
+                textEntryMathPage.steps.verifyAnswerInputFieldFillColor(0, css.color.optionsBg);
+                textEntryMathPage.steps.verifyAnswerInputFieldFillColor(1, css.color.optionsBg);
+            }
+        });
+
+        it('When the user selects the "None" color block, it should get in selected state and the no background color should be present for the text containers in the preview tab', () => {
+            textEntryMathPage.steps.switchToEditTab();
+            textEntryMathPage.steps.selectColorBlock(1);
+            textEntryMathPage.steps.switchToPreviewTab();
+            if (type === 'add background') {
+                textEntryMathPage.steps.verifyAnswerInputFieldFillColorAddBackground(0, css.color.transparent);
+            }
+            else {
+                textEntryMathPage.steps.verifyAnswerInputFieldFillColor(0, css.color.transparent);
+                textEntryMathPage.steps.verifyAnswerInputFieldFillColor(1, 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', () => {
+            textEntryMathPage.steps.switchToEditTab();
+            textEntryMathPage.steps.editColor(0);
+            colorPopupComponent.steps.clickInColorSaturationPalette();
+            colorPopupComponent.steps.clickOnOkButton();
+            textEntryMathPage.steps.switchToPreviewTab();
+            if (type === 'add background') {
+                textEntryMathPage.steps.verifyAnswerInputFieldFillColorAddBackground(0, modifiedColor);
+            }
+            else {
+                textEntryMathPage.steps.verifyAnswerInputFieldFillColor(0, modifiedColor);
+                textEntryMathPage.steps.verifyAnswerInputFieldFillColor(1, modifiedColor);
+            }
+        });
+
+        it('The background color of the text containers in the preview tab should be the modified selected color', () => {
+            textEntryMathPage.steps.switchToEditTab();
+            if (type === 'add background') {
+                textEntryMathPage.steps.insertResponseArea(60);
+                textEntryMathPage.steps.switchToPreviewTab();
+                textEntryMathPage.steps.verifyAnswerInputFieldFillColorAddBackground(0, modifiedColor);
+                textEntryMathPage.steps.verifyAnswerInputFieldFillColorAddBackground(1, modifiedColor);;
+            }
+            else {
+                textEntryMathPage.steps.addResponseArea();
+                textEntryMathPage.steps.switchToPreviewTab();
+                textEntryMathPage.steps.verifyAnswerInputFieldFillColor(0, modifiedColor);
+                textEntryMathPage.steps.verifyAnswerInputFieldFillColor(1, modifiedColor);
+                textEntryMathPage.steps.verifyAnswerInputFieldFillColor(2, modifiedColor);
+            }
+        });
+    },
+
+    /**
+     * Verifies the border style of the answer input field preview tab.
+     * @param {string} type - 'Add structure' || 'Add background'.
+     */
+    verifyBorderStylePreviewTab: (type) => {
+        it('When by default \'Dashed\' border style is in selected state, then the border style of the text containers in the preview tab should be \'Dashed\'', () => {
+            if (type === 'add background') {
+                textEntryMathPage.steps.verifyAnswerInputFieldBorderStyleAddBackGround(0, 'dashed');
+            }
+            else {
+                textEntryMathPage.steps.verifyAnswerInputFieldBorderStyle(0, 'dashed');
+                textEntryMathPage.steps.verifyAnswerInputFieldBorderStyle(1, '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}`, () => {
+                textEntryMathPage.steps.switchToEditTab();
+                textEntryMathPage.steps.selectBorderStyleToggleButton(style);
+                textEntryMathPage.steps.switchToPreviewTab();
+                if (type === 'add background') {
+                    textEntryMathPage.steps.verifyAnswerInputFieldBorderStyleAddBackGround(0, style);
+                }
+                else {
+                    textEntryMathPage.steps.verifyAnswerInputFieldBorderStyle(0, style);
+                    textEntryMathPage.steps.verifyAnswerInputFieldBorderStyle(1, style);
+                }
+            });
+        })
     }
 }