itemengine-cypress-automation 1.0.248-23rdSeptUpdates-8103a8f.0 → 1.0.248

package/cypress/pages/components/listOrderingCommonStyleAndLayoutComponent.js

@@ -1,17 +1,15 @@
 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),
+    fillColorLabelListContainerAndDropDown: () => 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),
+    borderColorLabelListContainerAndDropDown: () => 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),
@@ -20,12 +18,23 @@ const selectors = {
     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),
+    dottedBorderStyleToggleButtonListContainerAndDropDown: () => cy.get('[data-ngie-testid="dotted-toggle-button"]').eq(1),
+    solidBorderStyleToggleButtonListContainerAndDropDown: () => 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"]'),
+    specifyCorrectanswerSectionOptionDropDown: () => cy.get('[class*="DropdownLayoutstyles__OptionsWrapper"]'),
+    specifyCorrectanswerSectionResponseDropDown: () => cy.get('[class*="ResponseDropdownComponentstyles__ResponseDropdownWrapper"] .drop-down-parent'),
+    positionDropdownPreviewTab: () => cy.get('[class*="question-preview-wrapper"] .response-dropdown-wrapper [role="combobox"]'),
+    positionDropdownListOption: (ariaLabel = null) => {
+        if (ariaLabel) {
+            return cy.get(`[aria-labelledby*="-dropdown-label"] [role="option"][aria-label*="${ariaLabel}"]`).eq(0)
+        } else {
+            return cy.get('[aria-labelledby*="-dropdown-label"] [role="option"]')
+        }
+    },
+
 }
 
 const steps = {
@@ -91,12 +100,12 @@ const steps = {
     selectBorderStyleToggleButtonOfListContainer: (button) => {
         switch (button) {
             case 'Dotted':
-                listOrderingCommonStyleAndLayoutComponent.dottedBorderStyleToggleButtonListContainer()
+                listOrderingCommonStyleAndLayoutComponent.dottedBorderStyleToggleButtonListContainerAndDropDown()
                     .click()
                     .should('have.class', 'ngie-toggle-button-selected');
                 break;
             case 'Solid':
-                listOrderingCommonStyleAndLayoutComponent.solidBorderStyleToggleButtonListContainer()
+                listOrderingCommonStyleAndLayoutComponent.solidBorderStyleToggleButtonListContainerAndDropDown()
                     .click()
                     .should('have.class', 'ngie-toggle-button-selected');
                 break;
@@ -118,11 +127,11 @@ const steps = {
     verifyBorderStyleToggleButtonSelectedStateListContainer: (button) => {
         switch (button) {
             case 'Dotted':
-                listOrderingCommonStyleAndLayoutComponent.dottedBorderStyleToggleButtonListContainer()
+                listOrderingCommonStyleAndLayoutComponent.dottedBorderStyleToggleButtonListContainerAndDropDown()
                     .should('have.class', 'ngie-toggle-button-selected');
                 break;
             case 'Solid':
-                listOrderingCommonStyleAndLayoutComponent.solidBorderStyleToggleButtonListContainer()
+                listOrderingCommonStyleAndLayoutComponent.solidBorderStyleToggleButtonListContainerAndDropDown()
                     .should('have.class', 'ngie-toggle-button-selected');
                 break;
             case 'None':
@@ -148,17 +157,30 @@ const steps = {
             utilities.verifyCSS(utilities.getNthElement(listOrderingCommonStyleAndLayoutComponent.specifyCorrectanswerSectionOptionSeperateList(), responseAreaIndex), {
                 'background-color': colorValue
             });
+        } else if (listType === "DropDown") {
+            utilities.verifyCSS(utilities.getNthElement(listOrderingCommonStyleAndLayoutComponent.specifyCorrectanswerSectionOptionDropDown(), responseAreaIndex), {
+                'background-color': colorValue
+            });
+            utilities.verifyCSS(utilities.getNthElement(listOrderingCommonStyleAndLayoutComponent.specifyCorrectanswerSectionResponseDropDown(), responseAreaIndex), {
+                'background-color': colorValue
+            });
         }
     },
 
     /**
-     * Verifies the background color of list container.
+     * Verifies the background color of list container or drop down.
      * @param {string} colorValue - The expected background color value.
      */
-    verifyFillColorOfListContainer: (colorValue) => {
-        utilities.verifyCSS(listOrderingCommonStyleAndLayoutComponent.dropzoneSeperateList(), {
-            'background-color': colorValue
-        });
+    verifyFillColorOfListContainerOrDropDown: (colorValue, containerType) => {
+        if(containerType === "ListContainer") {
+            utilities.verifyCSS(listOrderingCommonStyleAndLayoutComponent.dropzoneSeperateList(), {
+                'background-color': colorValue
+            });
+        } else if (containerType === "DropDown") {
+            utilities.verifyCSS(listOrderingCommonStyleAndLayoutComponent.specifyCorrectanswerSectionResponseDropDown(), {
+                'background-color': colorValue
+            });
+        }
     },
 
     /**
@@ -193,17 +215,30 @@ const steps = {
             utilities.verifyCSS(utilities.getNthElement(listOrderingCommonStyleAndLayoutComponent.          specifyCorrectanswerSectionOptionSeperateList(), responseAreaIndex), {
                 'border': colorValue
             });
+        } else if (listType === "DropDown") {
+            utilities.verifyCSS(utilities.getNthElement(listOrderingCommonStyleAndLayoutComponent.specifyCorrectanswerSectionOptionDropDown(), responseAreaIndex), {
+                'border': colorValue
+            });
+            utilities.verifyCSS(utilities.getNthElement(listOrderingCommonStyleAndLayoutComponent.specifyCorrectanswerSectionResponseDropDown(), responseAreaIndex), {
+                'border': colorValue
+            });
         }
     },
 
     /**
-     * Verifies the border color of list container.
+     * Verifies the border color of list container or Dropdown.
      * @param {string} colorValue - The expected border color value.
      */
-    verifyBorderColorOfListContainer: (colorValue) => {
-        utilities.verifyCSS(listOrderingCommonStyleAndLayoutComponent.dropzoneSeperateList(), {
-            'border': colorValue
-        });
+    verifyBorderColorOfListContainerOrDropDown: (colorValue, containerType) => {
+        if(containerType === "ListContainer") {
+            utilities.verifyCSS(listOrderingCommonStyleAndLayoutComponent.dropzoneSeperateList(), {
+                'border': colorValue
+            });
+        } else if (containerType === "DropDown") {
+            utilities.verifyCSS(listOrderingCommonStyleAndLayoutComponent.specifyCorrectanswerSectionResponseDropDown(), {
+                'border': colorValue
+            });
+        }
     },
 
     /**
@@ -221,19 +256,28 @@ const steps = {
             utilities.verifyCSS(utilities.getNthElement(listOrderingCommonStyleAndLayoutComponent.specifyCorrectanswerSectionOptionSeperateList(), responseAreaIndex), {
                 'border-style': styleName
             });
+        } else if (listType === "DropDown") {
+            utilities.verifyCSS(utilities.getNthElement(listOrderingCommonStyleAndLayoutComponent.specifyCorrectanswerSectionOptionDropDown(), 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) => {
+    verifyBorderStyleOfListContainerOrDropDown: (borderStyle, containerType) => {
         const styleName = borderStyle.toLowerCase();
-        utilities.verifyCSS(listOrderingCommonStyleAndLayoutComponent.dropzoneSeperateList(), {
-            'border-style': styleName
-        });
+        if(containerType === "ListContainer") {
+            utilities.verifyCSS(listOrderingCommonStyleAndLayoutComponent.dropzoneSeperateList(), {
+                'border-style': styleName
+            });
+        } else if (containerType === "DropDown") {
+            utilities.verifyCSS(listOrderingCommonStyleAndLayoutComponent.specifyCorrectanswerSectionResponseDropDown(), {
+                'border-style': styleName
+            });
+        }
     },
 
     /**
@@ -290,6 +334,38 @@ const steps = {
             .click()
             .should('have.attr', 'aria-selected', 'true');
     },
+
+    /**
+     * Selects positions for all options in the specify correct answer section according to the provided position object.
+     * @param {Object[]} positionObject - An array of objects where each object contains optionIndex and position properties.
+     * @param {number} positionObject[].optionIndex - The index of the option.
+     * @param {string} positionObject[].position - The position to select.
+     */
+    selectPositionForAllOptionsPreviewTab: (positionObject) => {
+        positionObject.forEach(({ optionIndex, position }) => {
+            steps.selectOptionPositionPreviewTab(optionIndex, position)
+        });
+    },
+
+    /**
+     * Selects the specified option from the position dropdown in the specify correct answer section.
+     * @param {number} optionIndex - The index of the option in the dropdown.
+     * @param {string} position - The position to select.
+     */
+    selectOptionPositionPreviewTab: (optionIndex, position) => {
+        steps.expandPositionDropdownPreviewTab(optionIndex);
+        listOrderingCommonStyleAndLayoutComponent.positionDropdownListOption(position)
+            .click();
+    },
+
+    /**
+     * Expands the position dropdown in the specify correct answer section and selects the specified dropdown index.
+     * @param {number} dropdownIndex - The index of the dropdown to expand and select.
+     */
+    expandPositionDropdownPreviewTab: (dropdownIndex) => {
+        utilities.getNthElement(listOrderingCommonStyleAndLayoutComponent.positionDropdownPreviewTab(), dropdownIndex)
+            .click();
+    },
 }
 
 const tests = {
@@ -333,6 +409,9 @@ const tests = {
         });
     },
 
+    /**
+     * Verifies the correct hex code getting displayed when hover on fill color blocks
+     */
     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');
@@ -340,6 +419,9 @@ const tests = {
         });
     },
 
+    /**
+     * Verifies the correct hex code getting displayed when hover on border color blocks
+     */
     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');
@@ -347,6 +429,10 @@ const tests = {
         });
     },
 
+    /**
+     * Verifies whether correct color is getting displayed inside the options
+     * @param {string} listType - Three list type :- 'SameList', 'SeperateList' and 'DropDown'
+     */
     verifyFillColorFunctionalityEditTab: (listType) => {
         const modifiedColor = 'rgb(121, 60, 60)'
 
@@ -367,27 +453,35 @@ const tests = {
         });
     },
 
-    verifyFillColorFunctionalityOfListContainerEditTab: () => {
+    /**
+     * Verifies whether correct color is getting displayed inside drag and drop container or drop down options
+     * @param {string} containerType - Two container type :- 'ListContainer'and 'DropDown'
+     */
+    verifyFillColorFunctionalityOfListContainerOrDropDownEditTab: (containerType) => {
         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 default color block is in selected state in the \'Fill color\' section of \'List Container\' or \'DropDown\', then the background color of the container/dropdown in the specify correct answer section should be the default selected color', () => {
+            listOrderingCommonStyleAndLayoutComponent.steps.verifyFillColorOfListContainerOrDropDown('rgb(245, 248, 255)', containerType);
         });
 
-        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', () => {
+        it('When the user selects the "None" color block of \'List Container\' or \'DropDown\', it should get in selected state and the no background color should be present for the container/dropdown in the specify correct answer section', () => {
             listOrderingCommonStyleAndLayoutComponent.steps.selectColorBlock(5);
-            listOrderingCommonStyleAndLayoutComponent.steps.verifyFillColorOfListContainer('rgb(255, 255, 255)');
+            listOrderingCommonStyleAndLayoutComponent.steps.verifyFillColorOfListContainerOrDropDown('rgb(255, 255, 255)', containerType);
         });
 
-        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', () => {
+        it('When the user clicks on the "Edit color" button of \'List Container\' or \'DropDown\', modifies color for the selected color block, then the background color of the container/dropdown 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.verifyFillColorOfListContainerOrDropDown(modifiedColor, containerType);
             listOrderingCommonStyleAndLayoutComponent.steps.selectColorBlock(4);
         });
     },
 
+    /**
+     * Verifies whether correct border color is getting displayed for the options
+     * @param {string} listType - Three list type :- 'SameList', 'SeperateList' and 'DropDown'
+     */
     verifyBorderColorFunctionalityEditTab: (listType) => {
         const modifiedColor = 'rgb(121, 60, 60)'
 
@@ -409,28 +503,42 @@ const tests = {
         });
     },
 
-    verifyBorderColorFunctionalityOfListContainerEditTab: () => {
+    /**
+     * Verifies whether correct border color is getting displayed for drag and drop container or drop down options
+     * @param {string} containerType - Two container type :- 'ListContainer'and 'DropDown'
+     */
+    verifyBorderColorFunctionalityOfListOrDropDownContainerEditTab: (containerType) => {
         const modifiedColor = 'rgb(121, 60, 60)'
+        let borderStyles = '2px dotted'
 
-        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', () => {
+        if (containerType === "DropDown")
+        {
+            borderStyles = '1px solid'
+        }
+        it('When the default color block is in selected state in the \'Border color\' section of \'List Container\' or \'DropDown\', then the background color of the container/dropdown 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)');
+            listOrderingCommonStyleAndLayoutComponent.steps.verifyBorderColorOfListContainerOrDropDown(`${borderStyles} rgb(82, 0, 255)`, containerType);
         });
 
-        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', () => {
+        it('When the user selects the "None" color block of \'List Container\' or \'DropDown\', it should get in selected state and the no background color should be present for the container/dropdown in the specify correct answer section', () => {
             listOrderingCommonStyleAndLayoutComponent.steps.selectColorBlock(7);
-            listOrderingCommonStyleAndLayoutComponent.steps.verifyBorderColorOfListContainer('2px dotted rgb(255, 255, 255)');
+            listOrderingCommonStyleAndLayoutComponent.steps.verifyBorderColorOfListContainerOrDropDown(`${borderStyles} rgb(255, 255, 255)`, containerType);
         });
 
-        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', () => {
+        it('When the user clicks on the "Edit color" button of \'List Container\' or \'DropDown\', modifies color for the selected color block, then the background color of the container/dropdown 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.verifyBorderColorOfListContainerOrDropDown(`${borderStyles} ${modifiedColor}`, containerType);
             listOrderingCommonStyleAndLayoutComponent.steps.selectColorBlock(6);
         });
     },
 
+    /**
+     * Verifies whether correct border style is getting displayed for the options
+     * By default solid will be the border style
+     * @param {string} listType - Three list type :- 'SameList', 'SeperateList' and 'DropDown'
+     */
     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"', () => {
@@ -445,20 +553,35 @@ const tests = {
         })
     },
 
-    verifyBorderStyleFunctionalityOfListContainerEditTab: () => {
+    /**
+     * Verifies whether correct border style is getting displayed for drag and drop container or drop down options
+     * By default solid will be the border style for drop-down and dotted will be the border style for drag and drop container
+     * @param {string} containerType - Two container type :- 'ListContainer'and 'DropDown'
+     */
+    verifyBorderStyleFunctionalityOfListContainerOrDropDownContainerEditTab: (containerType) => {
         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');
+        let borderStyle = 'dotted'
+
+        if (containerType === "DropDown")
+        {
+            borderStyle = borderStyles[1]
+        }
+        it('When the \'Dotted\' border style of \'List Container\' or the \'Solid\' border style of \'DropDown\' is in selected state, then the border style of the container/dropdown in the specify correct answer section should be "Solid"', () => {
+            listOrderingCommonStyleAndLayoutComponent.steps.verifyBorderStyleOfListContainerOrDropDown(`${borderStyle}`);
         });
 
         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}`, () => {
+            it(`When the user selects ${style} of \'List Container\' or \'DropDown\', then the border style of the container/dropdown in the specify correct answer section should update to ${style}`, () => {
                 listOrderingCommonStyleAndLayoutComponent.steps.selectBorderStyleToggleButtonOfListContainer(style);
-                listOrderingCommonStyleAndLayoutComponent.steps.verifyBorderStyleOfListContainer(style);
+                listOrderingCommonStyleAndLayoutComponent.steps.verifyBorderStyleOfListContainerOrDropDown(style);
             });
         })
     },
 
+    /**
+     * Verifies whether correct color is getting displayed inside the options in preview tab
+     * @param {string} listType - Three list type :- 'SameList', 'SeperateList' and 'DropDown'
+     */
     verifyFillColorFunctionalityPreviewTab: (listType) => {
         const modifiedColor = 'rgb(121, 60, 60)'
 
@@ -484,19 +607,23 @@ const tests = {
         });
     },
 
-    verifyFillColorFunctionalityOfListContainerPreviewTab: () => {
+    /**
+     * Verifies whether correct color is getting displayed inside drag and drop container in preview tab
+     * @param {string} containerType - Two container type :- 'ListContainer'and 'DropDown'
+     */
+    verifyFillColorFunctionalityOfListContainerPreviewTab: (containerType) => {
         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)');
+            listOrderingCommonStyleAndLayoutComponent.steps.verifyFillColorOfListContainerOrDropDown('rgb(245, 248, 255)', containerType);
         });
 
         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)');
+            listOrderingCommonStyleAndLayoutComponent.steps.verifyFillColorOfListContainerOrDropDown('rgb(255, 255, 255)', containerType);
         });
 
         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', () => {
@@ -505,10 +632,46 @@ const tests = {
             colorPopupComponent.steps.clickInColorSaturationPalette();
             colorPopupComponent.steps.clickOnOkButton();
             listOrderingCommonStyleAndLayoutComponent.steps.switchToPreviewTab();
-            listOrderingCommonStyleAndLayoutComponent.steps.verifyFillColorOfListContainer(modifiedColor);
+            listOrderingCommonStyleAndLayoutComponent.steps.verifyFillColorOfListContainerOrDropDown(modifiedColor, containerType);
+        });
+    },
+
+    /**
+     * Verifies whether correct color is getting displayed inside drop down options in preview tab
+     * @param {string} containerType - Two container type :- 'ListContainer'and 'DropDown'
+     */
+    verifyFillColorFunctionalityOfDropDownContainerPreviewTab: (containerType) => {
+        const modifiedColor = 'rgb(121, 60, 60)'
+
+        it('When the default color block is in selected state in the \'Fill color\' section of \'DropDown\', then the background color of the drop down in the preview tab should be the default selected color', () => {
+            listOrderingCommonStyleAndLayoutComponent.steps.switchToPreviewTab();
+            listOrderingCommonStyleAndLayoutComponent.steps.selectPositionForAllOptionsPreviewTab([{ optionIndex: 0, position: '2' }, { optionIndex: 1, position: '1' }, { optionIndex: 2, position: '3' }, { optionIndex: 3, position: '4' }]);
+            listOrderingCommonStyleAndLayoutComponent.steps.verifyFillColorOfListContainerOrDropDown('rgb(245, 248, 255)', containerType);
+        });
+
+        it('When the user selects the \'None\' color block of \'DropDown\', it should get in selected state and the no background color should be present for the drop down in the preview tab', () => {
+            listOrderingCommonStyleAndLayoutComponent.steps.switchToEditTab();
+            listOrderingCommonStyleAndLayoutComponent.steps.selectColorBlock(5);
+            listOrderingCommonStyleAndLayoutComponent.steps.switchToPreviewTab();
+            listOrderingCommonStyleAndLayoutComponent.steps.selectPositionForAllOptionsPreviewTab([{ optionIndex: 0, position: '2' }, { optionIndex: 1, position: '1' }, { optionIndex: 2, position: '3' }, { optionIndex: 3, position: '4' }]);
+            listOrderingCommonStyleAndLayoutComponent.steps.verifyFillColorOfListContainerOrDropDown('rgb(255, 255, 255)', containerType);
+        });
+
+        it('When the user clicks on the \'Edit color\' button of \'DropDown\', 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.selectPositionForAllOptionsPreviewTab([{ optionIndex: 0, position: '2' }, { optionIndex: 1, position: '1' }, { optionIndex: 2, position: '3' }, { optionIndex: 3, position: '4' }]);
+            listOrderingCommonStyleAndLayoutComponent.steps.verifyFillColorOfListContainerOrDropDown(modifiedColor, containerType);
         });
     },
 
+    /**
+     * Verifies whether correct border color is getting displayed for the options in preview tab
+     * @param {string} listType - Three list type :- 'SameList', 'SeperateList' and 'DropDown'
+     */
     verifyBorderColorFunctionalityPreviewTab: (listType) => {
         const modifiedColor = 'rgb(121, 60, 60)'
 
@@ -536,6 +699,10 @@ const tests = {
         });
     },
 
+    /**
+     * Verifies whether correct border color is getting displayed for drag and drop container in preview tab
+     * @param {string} containerType - Two container type :- 'ListContainer'and 'DropDown'
+     */
     verifyBorderColorFunctionalityOfListConatinerPreviewTab: () => {
         const modifiedColor = 'rgb(121, 60, 60)'
 
@@ -544,14 +711,14 @@ const tests = {
             listOrderingCommonStyleAndLayoutComponent.steps.selectColorBlock(4);
             listOrderingCommonStyleAndLayoutComponent.steps.selectColorBlock(6);
             listOrderingCommonStyleAndLayoutComponent.steps.switchToPreviewTab();
-            listOrderingCommonStyleAndLayoutComponent.steps.verifyBorderColorOfListContainer('2px dotted rgb(82, 0, 255)');
+            listOrderingCommonStyleAndLayoutComponent.steps.verifyBorderColorOfListContainerOrDropDown('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)');
+            listOrderingCommonStyleAndLayoutComponent.steps.verifyBorderColorOfListContainerOrDropDown('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', () => {
@@ -560,10 +727,50 @@ const tests = {
             colorPopupComponent.steps.clickInColorSaturationPalette();
             colorPopupComponent.steps.clickOnOkButton();
             listOrderingCommonStyleAndLayoutComponent.steps.switchToPreviewTab();
-            listOrderingCommonStyleAndLayoutComponent.steps.verifyBorderColorOfListContainer(`2px dotted ${modifiedColor}`);
+            listOrderingCommonStyleAndLayoutComponent.steps.verifyBorderColorOfListContainerOrDropDown(`2px dotted ${modifiedColor}`);
         });
     },
 
+    /**
+     * Verifies whether correct border color is getting displayed for drop down options in preview tab
+     * @param {string} containerType - Two container type :- 'ListContainer'and 'DropDown'
+     */
+    verifyBorderColorFunctionalityOfDropDownContainerPreviewTab: (containerType) => {
+        const modifiedColor = 'rgb(121, 60, 60)'
+
+        it('When the default color block is in selected state in the \'Border color\' section of \'DropDown\', 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.selectPositionForAllOptionsPreviewTab([{ optionIndex: 0, position: '2' }, { optionIndex: 1, position: '1' }, { optionIndex: 2, position: '3' }, { optionIndex: 3, position: '4' }]);
+            listOrderingCommonStyleAndLayoutComponent.steps.verifyBorderColorOfListContainerOrDropDown('1px solid rgb(82, 0, 255)', containerType);
+        });
+
+        it('When the user selects the \'None\' color block of \'DropDown\', 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.selectPositionForAllOptionsPreviewTab([{ optionIndex: 0, position: '2' }, { optionIndex: 1, position: '1' }, { optionIndex: 2, position: '3' }, { optionIndex: 3, position: '4' }]);
+            listOrderingCommonStyleAndLayoutComponent.steps.verifyBorderColorOfListContainerOrDropDown('1px solid rgb(255, 255, 255)', containerType);
+        });
+
+        it('When the user clicks on the \'Edit color\' button of \'DropDown\', 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.selectPositionForAllOptionsPreviewTab([{ optionIndex: 0, position: '2' }, { optionIndex: 1, position: '1' }, { optionIndex: 2, position: '3' }, { optionIndex: 3, position: '4' }]);
+            listOrderingCommonStyleAndLayoutComponent.steps.verifyBorderColorOfListContainerOrDropDown(`1px solid ${modifiedColor}`, containerType);
+        });
+    },
+
+    /**
+     * Verifies whether correct border style is getting displayed for the options in preview tab
+     * By default solid will be the border style
+     * @param {string} listType - Three list type :- 'SameList', 'SeperateList' and 'DropDown'
+     */
     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"', () => {
@@ -580,10 +787,15 @@ const tests = {
         })
     },
 
+    /**
+     * Verifies whether correct border style is getting displayed for drag and drop container in preview tab
+     * By default solid will be the border style for drop-down and dotted will be the border style for drag and drop container
+     * @param {string} containerType - Two container type :- 'ListContainer'and 'DropDown'
+     */
     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');
+            listOrderingCommonStyleAndLayoutComponent.steps.verifyBorderStyleOfListContainerOrDropDown('dotted');
         });
 
         borderStyles.forEach((style) => {
@@ -591,7 +803,29 @@ const tests = {
                 listOrderingCommonStyleAndLayoutComponent.steps.switchToEditTab();
                 listOrderingCommonStyleAndLayoutComponent.steps.selectBorderStyleToggleButtonOfListContainer(style);
                 listOrderingCommonStyleAndLayoutComponent.steps.switchToPreviewTab();
-                listOrderingCommonStyleAndLayoutComponent.steps.verifyBorderStyleOfListContainer(style);
+                listOrderingCommonStyleAndLayoutComponent.steps.verifyBorderStyleOfListContainerOrDropDown(style);
+            });
+        })
+    },
+
+    /**
+     * Verifies whether correct border style is getting displayed for drop down options in preview tab
+     * By default solid will be the border style for drop-down and dotted will be the border style for drag and drop container
+     * @param {string} containerType - Two container type :- 'ListContainer'and 'DropDown'
+     */
+    verifyBorderStyleFunctionalityOfDropDownPreviewTab: () => {
+        const borderStyles = ["Dotted", "Solid", "None"]
+        it('When the \'Dotted\' border style of \'DropDown\' is in selected state, then the border style of the text containers in the preview tab should be "solid"', () => {
+            listOrderingCommonStyleAndLayoutComponent.steps.verifyBorderStyleOfListContainerOrDropDown('solid');
+        });
+
+        borderStyles.forEach((style) => {
+            it(`When the user selects ${style} of \'DropDown\', 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.selectPositionForAllOptionsPreviewTab([{ optionIndex: 0, position: '2' }, { optionIndex: 1, position: '1' }, { optionIndex: 2, position: '3' }, { optionIndex: 3, position: '4' }]);
+                listOrderingCommonStyleAndLayoutComponent.steps.verifyBorderStyleOfListContainerOrDropDown(style);
             });
         })
     },

package/cypress/pages/fillInTheGapsDragAndDropPage.js

@@ -33,7 +33,8 @@ const selectors = {
     //Specify correct answer section
     dropzoneSpecifyCorrectAnswerSection: () => cy.get('[class="droppable-area"] [role="button"]'),
     optionContainerOptionsSpecifyCorrectAnswerSection: () => cy.get('.draggable-selected-item'),
-    optionsContainerSpecifyCorrectAnswerSection: () => cy.get('.draggable-wrapper'), addAlternateButtonSpecifyCorrectAnswer: () => cy.get('.alternate-option-btn-wrapper button'),
+    optionsContainerSpecifyCorrectAnswerSection: () => cy.get('.draggable-wrapper'), 
+    addAlternateButtonSpecifyCorrectAnswer: () => cy.get('.alternate-option-btn-wrapper button'),
     selectedAlternateAnswerCountSpecifyCorrectAnswer: () => cy.get('.selected-option-wrapper'),
     alternateAnswerPopup: () => cy.get('.alternate-option-popup-wrapper'),
     alternateAnswerPopupTitle: () => cy.get('.alternate-option-title-wrapper div').eq(0),

package/cypress/pages/listOrderingPage.js

@@ -118,7 +118,7 @@ const selectors = {
     connectorIcon: () => cy.get('[class*="ListOrderingResponsestyles__ShowIconWrapper"]'),
     connectorType: () => cy.get('[class*="StyleAndLayoutCustomizationstyles__DropzoneConnectorOptionsWrapper"] [type="button"]'),
     fillAndBorderColorWrapper: () => cy.get('[class*="DraggableOptionsstyles__ColorOptionWrapper"]'),
-    listContainerLabel: () => cy.get('.dropzone-label'),
+    listContainerAndDropDownLabel: () => cy.get('.dropzone-label'),
     specifyCorrectanswerSectionOptionSeperateList: () => cy.get('[class*="DraggableItemstyle__ItemWrapper"]'),
     draggableOptionPanelLabel: () => cy.get('.draggable-option-panel-label'),
     panelPlacementLabel: () => cy.get('.panel-placement-style .options-label'),

package/cypress/pages/matchingPage.js

@@ -54,7 +54,7 @@ const selectors = {
     noConnectorButton: () => cy.get('button[aria-label*="Matching layout No connectors"]'),
     connectorLabel: () => cy.get('button[aria-label*="Matching layout Connectors"] .ngie-toggle-button-label'),
     noConnectorLabel: () => cy.get('button[aria-label*="Matching layout No connectors"] .ngie-toggle-button-label'),
-    optionInnnerFieldInputFieldDropdown: () => cy.get(' .edit-mcq-options-wrapper [data-rbd-draggable-id*="option-draggable"] .MuiOutlinedInput-inputAdornedStart'),
+    optionInnerFieldInputFieldDropdown: () => cy.get(' .edit-mcq-options-wrapper [data-rbd-draggable-id*="option-draggable"] .MuiOutlinedInput-inputAdornedStart'),
     //Specify correct answer section
     connectorIcon: () => cy.get('.correct-answer-accordion [class*="ClozeWithDragAndDropstyles__ShowIconWrapper"]'),
     dropzoneSpecifyCorrectAnswerSection: () => cy.get('.correct-answer-wrapper .authoring-droppable-hotspot-wrapper'),