itemengine-cypress-automation 1.0.247-06SeptUpdates-b1623d7.0 → 1.0.248-23rdSeptUpdates-8103a8f.0

package/cypress/pages/components/listOrderingCommonStyleAndLayoutComponent.js

@@ -0,0 +1,604 @@
+import utilities from "../../support/helpers/utilities"
+import { listOrderingPage } from "../listOrderingPage";
+import { colorPopupComponent } from "./colorPopupComponent";
+import { commonComponents } from "./commonComponents";
+import { createQuestionBasePage } from "./createQuestionBasePage";
+const css = Cypress.env('css');
+
+const selectors = {
+    ...listOrderingPage,
+    fillColorLabel: () => cy.get('.sub-section-label').eq(0),
+    fillColorLabelListContainer: () => cy.get('.sub-section-label').eq(2),
+    colorBlock: () => cy.get('.color-grid-wrapper .color-picker-block'),
+    borderColorLabel: () => cy.get('.sub-section-label').eq(1),
+    borderColorLabelListContainer: () => cy.get('.sub-section-label').eq(3),
+    editColorButton: () => cy.get('button[aria-label="edit color"]'),
+    colorBlockSelectedIcon: () => cy.get('[class*="BtnSelectionWrapper"] svg'),
+    optionStyleLabel: () => cy.get('.options-border-style .options-label').eq(0),
+    borderStyleLabel: () => cy.get('.options-border-style .options-label').eq(1),
+    borderStyleLabelListContainer: () => cy.get('.options-border-style .options-label').eq(2),
+    connectorSettingLabel: () => cy.get('.options-border-style .options-label').eq(2),
+    dottedBorderStyleToggleButton: () => cy.get('[data-ngie-testid="dotted-toggle-button"]').eq(0),
+    solidBorderStyleToggleButton: () => cy.get('[data-ngie-testid="solid-toggle-button"]').eq(0),
+    dottedBorderStyleToggleButtonListContainer: () => cy.get('[data-ngie-testid="dotted-toggle-button"]').eq(1),
+    solidBorderStyleToggleButtonListContainer: () => cy.get('[data-ngie-testid="solid-toggle-button"]').eq(1),
+    noneBorderStyleToggleButton: () => cy.get('[data-ngie-testid="none-toggle-button"]').eq(0),
+    specifyCorrectanswerSectionOption: () => cy.get('[class*="ListOrderingResponsestyles__ItemWrapper"]'),
+    specifyCorrectanswerSectionOptionSeperateList: () => cy.get('[class*="DraggableItemstyle__ItemWrapper"]'),
+    dropzoneSeperateList: () => cy.get('[class*="MultipleDroppableHotspotstyle__DroppableHotspotWrapper"]'),
+}
+
+const steps = {
+    /**
+     * 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(listOrderingCommonStyleAndLayoutComponent.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(listOrderingCommonStyleAndLayoutComponent.colorBlock(), blockIndex)
+            .should('have.class', 'selected-button-icon')
+            .within(() => {
+                utilities.verifyElementVisibilityState(listOrderingCommonStyleAndLayoutComponent.colorBlockSelectedIcon(), 'visible');
+            });
+    },
+
+    /**
+     * 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(listOrderingCommonStyleAndLayoutComponent.colorBlock(), blockIndex), {
+            'background-color': color
+        });
+    },
+
+    /**
+     * Verifies the selected state of a border style toggle button.
+     * @param {('Dotted' | 'Solid')} button - The border style to verify.
+     * @throws {Error} Throws an error if an invalid border style is provided.
+     */
+    verifyBorderStyleToggleButtonSelectedState: (button) => {
+        switch (button) {
+            case 'Dotted':
+                listOrderingCommonStyleAndLayoutComponent.dottedBorderStyleToggleButton()
+                    .should('have.class', 'ngie-toggle-button-selected');
+                break;
+            case 'Solid':
+                listOrderingCommonStyleAndLayoutComponent.solidBorderStyleToggleButton()
+                    .should('have.class', 'ngie-toggle-button-selected');
+                break;
+            default:
+                throw new Error('Invalid border style');
+        }
+    },
+
+    /**
+     * 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.
+     */
+    selectBorderStyleToggleButtonOfListContainer: (button) => {
+        switch (button) {
+            case 'Dotted':
+                listOrderingCommonStyleAndLayoutComponent.dottedBorderStyleToggleButtonListContainer()
+                    .click()
+                    .should('have.class', 'ngie-toggle-button-selected');
+                break;
+            case 'Solid':
+                listOrderingCommonStyleAndLayoutComponent.solidBorderStyleToggleButtonListContainer()
+                    .click()
+                    .should('have.class', 'ngie-toggle-button-selected');
+                break;
+            case 'None':
+                listOrderingCommonStyleAndLayoutComponent.noneBorderStyleToggleButton()
+                    .click()
+                    .should('have.class', 'ngie-toggle-button-selected');
+                break;
+            default:
+                throw new Error('Invalid border style');
+        }
+    },
+
+    /**
+     * Verifies the selected state of a border style toggle button in list container.
+     * @param {('Dotted' | 'Solid' | 'None')} button - The border style to verify.
+     * @throws {Error} Throws an error if an invalid border style is provided.
+     */
+    verifyBorderStyleToggleButtonSelectedStateListContainer: (button) => {
+        switch (button) {
+            case 'Dotted':
+                listOrderingCommonStyleAndLayoutComponent.dottedBorderStyleToggleButtonListContainer()
+                    .should('have.class', 'ngie-toggle-button-selected');
+                break;
+            case 'Solid':
+                listOrderingCommonStyleAndLayoutComponent.solidBorderStyleToggleButtonListContainer()
+                    .should('have.class', 'ngie-toggle-button-selected');
+                break;
+            case 'None':
+                listOrderingCommonStyleAndLayoutComponent.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.
+     */
+    verifyFillColorInOptions: (responseAreaIndex, colorValue, listType) => {
+        if(listType === "SameList") {
+            utilities.verifyCSS(utilities.getNthElement(listOrderingCommonStyleAndLayoutComponent.specifyCorrectanswerSectionOption(), responseAreaIndex), {
+                'background-color': colorValue
+            });
+        } else if (listType === "SeperateList") {
+            utilities.verifyCSS(utilities.getNthElement(listOrderingCommonStyleAndLayoutComponent.specifyCorrectanswerSectionOptionSeperateList(), responseAreaIndex), {
+                'background-color': colorValue
+            });
+        }
+    },
+
+    /**
+     * Verifies the background color of list container.
+     * @param {string} colorValue - The expected background color value.
+     */
+    verifyFillColorOfListContainer: (colorValue) => {
+        utilities.verifyCSS(listOrderingCommonStyleAndLayoutComponent.dropzoneSeperateList(), {
+            'background-color': colorValue
+        });
+    },
+
+    /**
+     * Selects a color block by index.
+     * @param {number} blockIndex - The index of the color block to select.
+     */
+    selectColorBlock: (blockIndex) => {
+        utilities.getNthElement(listOrderingCommonStyleAndLayoutComponent.colorBlock(), blockIndex)
+            .click();
+    },
+
+    /**
+     * Clicks on the edit color button.
+     * @param {number} buttonIndex - The index of the edit color button.
+     */
+    editColor: (buttonIndex) => {
+        utilities.getNthElement(listOrderingCommonStyleAndLayoutComponent.editColorButton(), buttonIndex)
+            .click();
+    },
+
+    /**
+     * Verifies the border color of element.
+     * @param {number} responseAreaIndex - The index of the option to verify.
+     * @param {string} colorValue - The expected border color value.
+     */
+    verifyBorderColorInOptions: (responseAreaIndex, colorValue, listType) => {
+        if(listType === "SameList") {
+            utilities.verifyCSS(utilities.getNthElement(listOrderingCommonStyleAndLayoutComponent.specifyCorrectanswerSectionOption(), responseAreaIndex), {
+                'border': colorValue
+            });
+        } else if (listType === "SeperateList") {
+            utilities.verifyCSS(utilities.getNthElement(listOrderingCommonStyleAndLayoutComponent.          specifyCorrectanswerSectionOptionSeperateList(), responseAreaIndex), {
+                'border': colorValue
+            });
+        }
+    },
+
+    /**
+     * Verifies the border color of list container.
+     * @param {string} colorValue - The expected border color value.
+     */
+    verifyBorderColorOfListContainer: (colorValue) => {
+        utilities.verifyCSS(listOrderingCommonStyleAndLayoutComponent.dropzoneSeperateList(), {
+            'border': colorValue
+        });
+    },
+
+    /**
+     * Verifies the border style of element.
+     * @param {number} responseAreaIndex - The index of the options to verify.
+     * @param {string} borderStyle - The expected border style value.
+     */
+    verifyBorderStyleInOptions: (responseAreaIndex, borderStyle, listType) => {
+        const styleName = borderStyle.toLowerCase();
+        if(listType === "SameList") {
+            utilities.verifyCSS(utilities.getNthElement(listOrderingCommonStyleAndLayoutComponent.specifyCorrectanswerSectionOption(), responseAreaIndex), {
+                'border-style': styleName
+            });
+        } else if (listType === "SeperateList") {
+            utilities.verifyCSS(utilities.getNthElement(listOrderingCommonStyleAndLayoutComponent.specifyCorrectanswerSectionOptionSeperateList(), responseAreaIndex), {
+                'border-style': styleName
+            });
+        }
+    },
+
+    /**
+     * Verifies the border style of element.
+     * @param {number} responseAreaIndex - The index of the options to verify.
+     * @param {string} borderStyle - The expected border style value.
+     */
+    verifyBorderStyleOfListContainer: (borderStyle) => {
+        const styleName = borderStyle.toLowerCase();
+        utilities.verifyCSS(listOrderingCommonStyleAndLayoutComponent.dropzoneSeperateList(), {
+            '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 'Dotted':
+                listOrderingCommonStyleAndLayoutComponent.dottedBorderStyleToggleButton()
+                    .click()
+                    .should('have.class', 'ngie-toggle-button-selected');
+                break;
+            case 'Solid':
+                listOrderingCommonStyleAndLayoutComponent.solidBorderStyleToggleButton()
+                    .click()
+                    .should('have.class', 'ngie-toggle-button-selected');
+                break;
+            case 'None':
+                listOrderingCommonStyleAndLayoutComponent.noneBorderStyleToggleButton()
+                    .click()
+                    .should('have.class', 'ngie-toggle-button-selected');
+                break;
+            default:
+                throw new Error('Invalid border style');
+        }
+    },
+
+    clickInColorSaturationPalette: () => {
+        colorPopupComponent.colorSaturationPalette()
+            .click();
+    },
+
+    clickOnCancelButton: () => {
+        colorPopupComponent.cancelButton()
+            .click();
+    },
+
+    clickOnOkButton: () => {
+        colorPopupComponent.okButton()
+            .click();
+    },
+
+    switchToEditTab: () => {
+        createQuestionBasePage.editTab()
+            .click()
+            .should('have.attr', 'aria-selected', 'true');
+    },
+
+    switchToPreviewTab: () => {
+        cy.wait(2000);
+        createQuestionBasePage.previewTab()
+            .click()
+            .should('have.attr', 'aria-selected', 'true');
+    },
+}
+
+const tests = {
+    verifyFillColorSectionContents: () => {
+        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(255, 255, 255)" and the other color block should have "No color"', () => {
+            utilities.verifyInnerText(listOrderingCommonStyleAndLayoutComponent.fillColorLabel(), 'Fill color');
+            listOrderingCommonStyleAndLayoutComponent.steps.verifyColorBlockColor(0, "rgb(255, 255, 255)");
+            listOrderingCommonStyleAndLayoutComponent.steps.verifyColorBlockSelectedState(0);
+            listOrderingCommonStyleAndLayoutComponent.steps.verifyColorBlockColor(1, css.color.none);
+            utilities.verifyInnerText(utilities.getNthElement(listOrderingCommonStyleAndLayoutComponent.editColorButton(), 0), 'Edit color');
+            utilities.verifyElementVisibilityState(listOrderingCommonStyleAndLayoutComponent.editColorButton(), 'visible');
+        });
+    },
+
+    verifyBorderColorSectionContents: () => {
+        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(107, 139, 255)" and the other color block should have "No color"', () => {
+            utilities.verifyInnerText(listOrderingCommonStyleAndLayoutComponent.borderColorLabel(), 'Border color');
+            utilities.verifyInnerText(utilities.getNthElement(listOrderingCommonStyleAndLayoutComponent.editColorButton(), 1), 'Edit color');
+            utilities.verifyElementVisibilityState(listOrderingCommonStyleAndLayoutComponent.editColorButton(), 'visible');
+            listOrderingCommonStyleAndLayoutComponent.steps.verifyColorBlockColor(2, "rgb(107, 139, 255)");
+            listOrderingCommonStyleAndLayoutComponent.steps.verifyColorBlockSelectedState(2);
+            listOrderingCommonStyleAndLayoutComponent.steps.verifyColorBlockColor(3, css.color.none);
+        });
+    },
+
+    /**
+     * Verifies the contents of the "Border style" section.
+     * This function checks that the "Border style" label and two toggle buttons
+     * ( "Dotted", "Solid") are displayed, and that the specified
+     * toggle button is in the selected state by default.
+     * @param {string} selectedStyle - The style that should be selected by default. It should be one of  'Dotted' or 'Solid'.
+     */
+    verifyBorderStyleSectionContents: (selectedStyle) => {
+        it(`"Border style" label and two toggle buttons should be displayed - "Dotted", "Solid". By default ${selectedStyle} button should be in selected state`, () => {
+            utilities.verifyInnerText(listOrderingCommonStyleAndLayoutComponent.borderStyleLabel(), 'Border style');
+            utilities.verifyInnerText(listOrderingCommonStyleAndLayoutComponent.dottedBorderStyleToggleButton(), 'Dotted');
+            utilities.verifyElementVisibilityState(listOrderingCommonStyleAndLayoutComponent.dottedBorderStyleToggleButton(), 'visible');
+            utilities.verifyInnerText(listOrderingCommonStyleAndLayoutComponent.solidBorderStyleToggleButton(), 'Solid');
+            utilities.verifyElementVisibilityState(listOrderingCommonStyleAndLayoutComponent.solidBorderStyleToggleButton(), 'visible');
+            listOrderingCommonStyleAndLayoutComponent.steps.verifyBorderStyleToggleButtonSelectedState(selectedStyle);
+        });
+    },
+
+    verifyFillColorTooltips: () => {
+        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(listOrderingCommonStyleAndLayoutComponent.colorBlock(), 0).verifyTooltip('#FFFFFF');
+            utilities.getNthElement(listOrderingCommonStyleAndLayoutComponent.colorBlock(), 1).verifyTooltip('None');
+        });
+    },
+
+    verifyBorderColorTooltips: () => {
+        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(listOrderingCommonStyleAndLayoutComponent.colorBlock(), 2).verifyTooltip('#6B8BFF');
+            utilities.getNthElement(listOrderingCommonStyleAndLayoutComponent.colorBlock(), 3).verifyTooltip('None');
+        });
+    },
+
+    verifyFillColorFunctionalityEditTab: (listType) => {
+        const modifiedColor = 'rgb(121, 60, 60)'
+
+        it('When the default color block is in selected state in the \'Fill color\'section, then the background color of the options in the specify correct answer section should be the default selected color', () => {
+            listOrderingCommonStyleAndLayoutComponent.steps.verifyFillColorInOptions(0, 'rgb(255, 255, 255)', listType);
+        });
+
+        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 options in the specify correct answer section', () => {
+            listOrderingCommonStyleAndLayoutComponent.steps.selectColorBlock(1);
+            listOrderingCommonStyleAndLayoutComponent.steps.verifyFillColorInOptions(0, 'rgb(255, 255, 255)', listType);
+        });
+
+        it('When the user clicks on the \'Edit color\' button, modifies color for the selected color block, then the background color of the options in the specify correct answer section should be the modified selected color', () => {
+            listOrderingCommonStyleAndLayoutComponent.steps.editColor(0);
+            listOrderingCommonStyleAndLayoutComponent.steps.clickInColorSaturationPalette();
+            listOrderingCommonStyleAndLayoutComponent.steps.clickOnOkButton();
+            listOrderingCommonStyleAndLayoutComponent.steps.verifyFillColorInOptions(0, modifiedColor, listType);
+        });
+    },
+
+    verifyFillColorFunctionalityOfListContainerEditTab: () => {
+        const modifiedColor = 'rgb(121, 60, 60)'
+
+        it('When the default color block is in selected state in the \'Fill color\' section of \'List Container\', then the background color of the container in the specify correct answer section should be the default selected color', () => {
+            listOrderingCommonStyleAndLayoutComponent.steps.verifyFillColorOfListContainer('rgb(245, 248, 255)');
+        });
+
+        it('When the user selects the "None" color block of \'List Container\', it should get in selected state and the no background color should be present for the container in the specify correct answer section', () => {
+            listOrderingCommonStyleAndLayoutComponent.steps.selectColorBlock(5);
+            listOrderingCommonStyleAndLayoutComponent.steps.verifyFillColorOfListContainer('rgb(255, 255, 255)');
+        });
+
+        it('When the user clicks on the "Edit color" button of \'List Container\', modifies color for the selected color block, then the background color of the container in the specify correct answer section should be the modified selected color', () => {
+            listOrderingCommonStyleAndLayoutComponent.steps.editColor(2);
+            listOrderingCommonStyleAndLayoutComponent.steps.clickInColorSaturationPalette();
+            listOrderingCommonStyleAndLayoutComponent.steps.clickOnOkButton();
+            listOrderingCommonStyleAndLayoutComponent.steps.verifyFillColorOfListContainer(modifiedColor);
+            listOrderingCommonStyleAndLayoutComponent.steps.selectColorBlock(4);
+        });
+    },
+
+    verifyBorderColorFunctionalityEditTab: (listType) => {
+        const modifiedColor = 'rgb(121, 60, 60)'
+
+        it('When the default color block is in selected state in the \'Border color\' section, then the background color of the options in the specify correct answer section should be the default selected color', () => {
+            listOrderingCommonStyleAndLayoutComponent.steps.selectColorBlock(0);
+            listOrderingCommonStyleAndLayoutComponent.steps.verifyBorderColorInOptions(0, '1px solid rgb(107, 139, 255)', listType);
+        });
+
+        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 options in the specify correct answer section', () => {
+            listOrderingCommonStyleAndLayoutComponent.steps.selectColorBlock(3);
+            listOrderingCommonStyleAndLayoutComponent.steps.verifyBorderColorInOptions(0, '1px solid rgb(255, 255, 255)', listType);
+        });
+
+        it('When the user clicks on the "Edit color" button, modifies color for the selected color block, then the background color of the options in the specify correct answer section should be the modified selected color', () => {
+            listOrderingCommonStyleAndLayoutComponent.steps.editColor(1);
+            colorPopupComponent.steps.clickInColorSaturationPalette();
+            colorPopupComponent.steps.clickOnOkButton();
+            listOrderingCommonStyleAndLayoutComponent.steps.verifyBorderColorInOptions(0, `1px solid ${modifiedColor}`, listType);
+        });
+    },
+
+    verifyBorderColorFunctionalityOfListContainerEditTab: () => {
+        const modifiedColor = 'rgb(121, 60, 60)'
+
+        it('When the default color block is in selected state in the \'Border color\' section of \'List Container\', then the background color of the container in the specify correct answer section should be the default selected color', () => {
+            listOrderingCommonStyleAndLayoutComponent.steps.selectColorBlock(6);
+            listOrderingCommonStyleAndLayoutComponent.steps.verifyBorderColorOfListContainer('2px dotted rgb(82, 0, 255)');
+        });
+
+        it('When the user selects the "None" color block of \'List Container\', it should get in selected state and the no background color should be present for the container in the specify correct answer section', () => {
+            listOrderingCommonStyleAndLayoutComponent.steps.selectColorBlock(7);
+            listOrderingCommonStyleAndLayoutComponent.steps.verifyBorderColorOfListContainer('2px dotted rgb(255, 255, 255)');
+        });
+
+        it('When the user clicks on the "Edit color" button of \'List Container\', modifies color for the selected color block, then the background color of the container in the specify correct answer section should be the modified selected color', () => {
+            listOrderingCommonStyleAndLayoutComponent.steps.editColor(3);
+            colorPopupComponent.steps.clickInColorSaturationPalette();
+            colorPopupComponent.steps.clickOnOkButton();
+            listOrderingCommonStyleAndLayoutComponent.steps.verifyBorderColorOfListContainer(`2px dotted ${modifiedColor}`);
+            listOrderingCommonStyleAndLayoutComponent.steps.selectColorBlock(6);
+        });
+    },
+
+    verifyBorderStyleFunctionalityEditTab: (listType) => {
+        const borderStyles = ["Dotted", "Solid"]
+        it('When the \'Solid\' border style is in selected state, then the border style of the container in the specify correct answer section should be "Solid"', () => {
+            listOrderingCommonStyleAndLayoutComponent.steps.verifyBorderStyleInOptions(0, 'solid', listType);
+        });
+
+        borderStyles.forEach((style) => {
+            it(`When the user selects ${style}, then the border style of the container in the specify correct answer section should update to ${style}`, () => {
+                listOrderingCommonStyleAndLayoutComponent.steps.selectBorderStyleToggleButton(style);
+                listOrderingCommonStyleAndLayoutComponent.steps.verifyBorderStyleInOptions(0, style, listType);
+            });
+        })
+    },
+
+    verifyBorderStyleFunctionalityOfListContainerEditTab: () => {
+        const borderStyles = ["Dotted", "Solid", "None"]
+        it('When the \'Dotted\' border style of \'List Container\' is in selected state, then the border style of the options in the specify correct answer section should be "Solid"', () => {
+            listOrderingCommonStyleAndLayoutComponent.steps.verifyBorderStyleOfListContainer('dotted');
+        });
+
+        borderStyles.forEach((style) => {
+            it(`When the user selects ${style} of \'List Container\', then the border style of the options in the specify correct answer section should update to ${style}`, () => {
+                listOrderingCommonStyleAndLayoutComponent.steps.selectBorderStyleToggleButtonOfListContainer(style);
+                listOrderingCommonStyleAndLayoutComponent.steps.verifyBorderStyleOfListContainer(style);
+            });
+        })
+    },
+
+    verifyFillColorFunctionalityPreviewTab: (listType) => {
+        const modifiedColor = 'rgb(121, 60, 60)'
+
+        it('When the default color block is in selected state in the \'Fill color\' section, then the background color of the options in the preview tab should be the default selected color', () => {
+            listOrderingCommonStyleAndLayoutComponent.steps.switchToPreviewTab();
+            listOrderingCommonStyleAndLayoutComponent.steps.verifyFillColorInOptions(0, 'rgb(255, 255, 255)', listType);
+        });
+
+        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 options in the preview tab', () => {
+            listOrderingCommonStyleAndLayoutComponent.steps.switchToEditTab();
+            listOrderingCommonStyleAndLayoutComponent.steps.selectColorBlock(1);
+            listOrderingCommonStyleAndLayoutComponent.steps.switchToPreviewTab();
+            listOrderingCommonStyleAndLayoutComponent.steps.verifyFillColorInOptions(0, 'rgb(255, 255, 255)', listType);
+        });
+
+        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', () => {
+            listOrderingCommonStyleAndLayoutComponent.steps.switchToEditTab();
+            listOrderingCommonStyleAndLayoutComponent.steps.editColor(0);
+            colorPopupComponent.steps.clickInColorSaturationPalette();
+            colorPopupComponent.steps.clickOnOkButton();
+            listOrderingCommonStyleAndLayoutComponent.steps.switchToPreviewTab();
+            listOrderingCommonStyleAndLayoutComponent.steps.verifyFillColorInOptions(0, modifiedColor, listType);
+        });
+    },
+
+    verifyFillColorFunctionalityOfListContainerPreviewTab: () => {
+        const modifiedColor = 'rgb(121, 60, 60)'
+
+        it('When the default color block is in selected state in the \'Fill color\' section of \'List Container\', then the background color of the container in the preview tab should be the default selected color', () => {
+            listOrderingCommonStyleAndLayoutComponent.steps.switchToPreviewTab();
+            listOrderingCommonStyleAndLayoutComponent.steps.verifyFillColorOfListContainer('rgb(245, 248, 255)');
+        });
+
+        it('When the user selects the \'None\' color block of \'List Container\', it should get in selected state and the no background color should be present for the container in the preview tab', () => {
+            listOrderingCommonStyleAndLayoutComponent.steps.switchToEditTab();
+            listOrderingCommonStyleAndLayoutComponent.steps.selectColorBlock(5);
+            listOrderingCommonStyleAndLayoutComponent.steps.switchToPreviewTab();
+            listOrderingCommonStyleAndLayoutComponent.steps.verifyFillColorOfListContainer('rgb(255, 255, 255)');
+        });
+
+        it('When the user clicks on the \'Edit color\' button of \'List Container\', modifies color for the selected color block, then the color block should get updated accordingly', () => {
+            listOrderingCommonStyleAndLayoutComponent.steps.switchToEditTab();
+            listOrderingCommonStyleAndLayoutComponent.steps.editColor(2);
+            colorPopupComponent.steps.clickInColorSaturationPalette();
+            colorPopupComponent.steps.clickOnOkButton();
+            listOrderingCommonStyleAndLayoutComponent.steps.switchToPreviewTab();
+            listOrderingCommonStyleAndLayoutComponent.steps.verifyFillColorOfListContainer(modifiedColor);
+        });
+    },
+
+    verifyBorderColorFunctionalityPreviewTab: (listType) => {
+        const modifiedColor = 'rgb(121, 60, 60)'
+
+        it('When the default color block is in selected state in the \'Border color\' section, then the background color of the options in the preview tab should be the default selected color', () => {
+            listOrderingCommonStyleAndLayoutComponent.steps.switchToEditTab();
+            listOrderingCommonStyleAndLayoutComponent.steps.selectColorBlock(0);
+            listOrderingCommonStyleAndLayoutComponent.steps.switchToPreviewTab();
+            listOrderingCommonStyleAndLayoutComponent.steps.verifyBorderColorInOptions(0, '1px solid rgb(107, 139, 255)', listType);
+        });
+
+        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 options in the preview tab', () => {
+            listOrderingCommonStyleAndLayoutComponent.steps.switchToEditTab();
+            listOrderingCommonStyleAndLayoutComponent.steps.selectColorBlock(3);
+            listOrderingCommonStyleAndLayoutComponent.steps.switchToPreviewTab();
+            listOrderingCommonStyleAndLayoutComponent.steps.verifyBorderColorInOptions(0, '1px solid rgb(255, 255, 255)', listType);
+        });
+
+        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', () => {
+            listOrderingCommonStyleAndLayoutComponent.steps.switchToEditTab();
+            listOrderingCommonStyleAndLayoutComponent.steps.editColor(1);
+            colorPopupComponent.steps.clickInColorSaturationPalette();
+            colorPopupComponent.steps.clickOnOkButton();
+            listOrderingCommonStyleAndLayoutComponent.steps.switchToPreviewTab();
+            listOrderingCommonStyleAndLayoutComponent.steps.verifyBorderColorInOptions(0, `1px solid ${modifiedColor}`, listType);
+        });
+    },
+
+    verifyBorderColorFunctionalityOfListConatinerPreviewTab: () => {
+        const modifiedColor = 'rgb(121, 60, 60)'
+
+        it('When the default color block is in selected state in the \'Border color\' section of \'List Container\', then the background color of the container in the preview tab should be the default selected color', () => {
+            listOrderingCommonStyleAndLayoutComponent.steps.switchToEditTab();
+            listOrderingCommonStyleAndLayoutComponent.steps.selectColorBlock(4);
+            listOrderingCommonStyleAndLayoutComponent.steps.selectColorBlock(6);
+            listOrderingCommonStyleAndLayoutComponent.steps.switchToPreviewTab();
+            listOrderingCommonStyleAndLayoutComponent.steps.verifyBorderColorOfListContainer('2px dotted rgb(82, 0, 255)');
+        });
+
+        it('When the user selects the \'None\' color block of \'List Container\', it should get in selected state and the no background color should be present for the container in the preview tab', () => {
+            listOrderingCommonStyleAndLayoutComponent.steps.switchToEditTab();
+            listOrderingCommonStyleAndLayoutComponent.steps.selectColorBlock(7);
+            listOrderingCommonStyleAndLayoutComponent.steps.switchToPreviewTab();
+            listOrderingCommonStyleAndLayoutComponent.steps.verifyBorderColorOfListContainer('2px dotted rgb(255, 255, 255)');
+        });
+
+        it('When the user clicks on the \'Edit color\' button of \'List Container\', modifies color for the selected color block, then the color block should get updated accordingly', () => {
+            listOrderingCommonStyleAndLayoutComponent.steps.switchToEditTab();
+            listOrderingCommonStyleAndLayoutComponent.steps.editColor(3);
+            colorPopupComponent.steps.clickInColorSaturationPalette();
+            colorPopupComponent.steps.clickOnOkButton();
+            listOrderingCommonStyleAndLayoutComponent.steps.switchToPreviewTab();
+            listOrderingCommonStyleAndLayoutComponent.steps.verifyBorderColorOfListContainer(`2px dotted ${modifiedColor}`);
+        });
+    },
+
+    verifyBorderStyleFunctionalityPreviewTab: (listType) => {
+        const borderStyles = ["Dotted", "Solid"]
+        it('When the "Solid" border style is in selected state, then the border style of the text options in the preview tab should be "solid"', () => {
+            listOrderingCommonStyleAndLayoutComponent.steps.verifyBorderStyleInOptions(0, 'solid', listType);
+        });
+
+        borderStyles.forEach((style) => {
+            it(`When the user selects ${style}, then the border style of the text options in the preview tab should update to ${style}`, () => {
+                listOrderingCommonStyleAndLayoutComponent.steps.switchToEditTab();
+                listOrderingCommonStyleAndLayoutComponent.steps.selectBorderStyleToggleButton(style);
+                listOrderingCommonStyleAndLayoutComponent.steps.switchToPreviewTab();
+                listOrderingCommonStyleAndLayoutComponent.steps.verifyBorderStyleInOptions(0, style, listType);
+            });
+        })
+    },
+
+    verifyBorderStyleFunctionalityOfListContainerPreviewTab: () => {
+        const borderStyles = ["Dotted", "Solid", "None"]
+        it('When the \'Dotted\' border style of \'List Container\' is in selected state, then the border style of the text containers in the preview tab should be "solid"', () => {
+            listOrderingCommonStyleAndLayoutComponent.steps.verifyBorderStyleOfListContainer('dotted');
+        });
+
+        borderStyles.forEach((style) => {
+            it(`When the user selects ${style} of \'List Container\', then the border style of the text containers in the preview tab should update to ${style}`, () => {
+                listOrderingCommonStyleAndLayoutComponent.steps.switchToEditTab();
+                listOrderingCommonStyleAndLayoutComponent.steps.selectBorderStyleToggleButtonOfListContainer(style);
+                listOrderingCommonStyleAndLayoutComponent.steps.switchToPreviewTab();
+                listOrderingCommonStyleAndLayoutComponent.steps.verifyBorderStyleOfListContainer(style);
+            });
+        })
+    },
+}
+
+export const listOrderingCommonStyleAndLayoutComponent = {
+    ...selectors,
+    steps,
+    tests,
+}

package/cypress/pages/components/optionsWrapperComponent.js

@@ -183,7 +183,7 @@ const steps = {
             .eq(index)
             .find('[data-widget="ngie_equation"]')
             .should('have.attr', 'aria-label', constants.CKEditorInputFieldEnteredEquationAriaLabel)
-            .contains(constants.CKEditorInputFieldEnteredEquationText);
+            //  .contains(constants.CKEditorInputFieldEnteredEquationText); ;
     },
 
     /**

package/cypress/pages/components/setPointsPopupBase.js

@@ -1,7 +1,7 @@
 import utilities from "../../support/helpers/utilities";
 import { dialogBoxBase } from "../dialogBoxBase";
 import { commonComponents } from "./commonComponents";
-import { scoringSectionBase } from "./scoringSectionBase";
+import { scoringSectionBaseEditTab } from "./scoringSectionBaseEditTab";
 
 const selector = {
     ...dialogBoxBase,
@@ -34,16 +34,16 @@ const steps = {
      */
     allotPointsToSetPointsPopupPointsInputField: (pointsArray) => {
         pointsArray.forEach((points, index) => {
-            scoringSectionBase.pointsInputField()
+            scoringSectionBaseEditTab.pointsInputField()
                 .eq(index)
                 .clear()
                 .type(points)
             cy.wait(1000)
-            scoringSectionBase.pointsInputField()
+            scoringSectionBaseEditTab.pointsInputField()
                 .eq(index)
                 .click()
                 .blur();
-            scoringSectionBase.pointsInputField()
+            scoringSectionBaseEditTab.pointsInputField()
                 .eq(index)
                 .should('have.value', points)
         });
@@ -57,7 +57,7 @@ const steps = {
         pointsArray.forEach((points, index) => {
             setPointsPopupBase.dialogBox()
                 .within(() => {
-                    scoringSectionBase.pointsInputField()
+                    scoringSectionBaseEditTab.pointsInputField()
                         .eq(index)
                         .should('have.value', points);
                 });
@@ -71,7 +71,7 @@ const steps = {
     verifyPointsErrorMessageInSetPointsPopup: (index) => {
         setPointsPopupBase.dialogBox()
             .within(() => {
-                scoringSectionBase.pointsInputField()
+                scoringSectionBaseEditTab.pointsInputField()
                     .eq(index)
                     .parents('[class*="OptionContainerstyle__PointsWrapper"]')
                     .within(() => {