itemengine-cypress-automation 1.0.200-23rdMayUpdates-264dc55.0 → 1.0.201-28thMayRepoUpdate-e720349.0

package/cypress/e2e/ILC/FillInTheGapsDragAndDropNew/draggableOptionsStyleAndLayoutCustomization.js

@@ -0,0 +1,533 @@
+import { dialogBoxBase, fillInTheGapsDragAndDropPage } from "../../../pages";
+import { colorPopupComponent } from "../../../pages/components";
+import abortEarlySetup from "../../../support/helpers/abortEarly";
+import utilities from "../../../support/helpers/utilities";
+const css = Cypress.env('css');
+const borderStyles = ["Dashed", "Dotted", "Solid", "None"];
+const panelPlacements = ["Bottom", "Top", "Left", "Right"];
+const optionAlignments = ["Left", "Center", "Right"];
+describe('Create item page - Fill in the gaps with drag and drop: Style and layout customization - Draggable options section', () => {
+    before(() => {
+        cy.loginAs('admin');
+    });
+
+    describe('Style and layout customization accordion : Draggable options section contents', () => {
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsDragAndDropPage.steps.navigateToCreateQuestion('fill in the gaps with drag and drop');
+            cy.barsPreLoaderWait();
+            fillInTheGapsDragAndDropPage.steps.expandStyleAndLayoutCustomizationAccordion();
+        });
+
+        it('"Draggable options" label should be displayed', () => {
+            utilities.verifyInnerText(fillInTheGapsDragAndDropPage.draggableOptionsLabel(), 'Draggable options');
+        });
+
+        it('"Drag handle icon" label should be displayed', () => {
+            utilities.verifyInnerText(fillInTheGapsDragAndDropPage.dragHandleIconLabel(), 'Drag handle icon');
+        });
+
+        it('3 drag handle icon options should be displayed - "Default", "Arrows" and "None". The "Default" drag handle icon should be in selected state', () => {
+            utilities.verifyElementVisibilityState(fillInTheGapsDragAndDropPage.defaultDragHandleIconButton(), 'visible');
+            utilities.verifyElementVisibilityState(fillInTheGapsDragAndDropPage.arrowsDragHandleIconButton(), 'visible');
+            utilities.verifyElementVisibilityState(fillInTheGapsDragAndDropPage.noneDragHandleIconButton(), 'visible');
+        });
+
+        it('When the user hovers over the drag handle icon options, their name should be displayed on a tooltip', () => {
+            fillInTheGapsDragAndDropPage.defaultDragHandleIconButton().verifyTooltip('default');
+            fillInTheGapsDragAndDropPage.arrowsDragHandleIconButton().verifyTooltip('arrows');
+            fillInTheGapsDragAndDropPage.noneDragHandleIconButton().verifyTooltip('none');
+        });
+
+        fillInTheGapsDragAndDropPage.tests.verifyDraggableOptionsFillColorSectionContents();
+
+        fillInTheGapsDragAndDropPage.tests.verifyDraggableOptionsBorderColorSectionContents();
+
+        fillInTheGapsDragAndDropPage.tests.verifyDraggableOptionsBorderStyleSectionContents();
+
+        fillInTheGapsDragAndDropPage.tests.verifyDraggableOptionsFillColorTooltips();
+
+        fillInTheGapsDragAndDropPage.tests.verifyDraggableOptionsBorderColorTooltips();
+
+        fillInTheGapsDragAndDropPage.tests.verifyDraggableOptionSectionContentsCSSAndA11y();
+    });
+
+    describe('Drag handle icon - Edit tab', () => {
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsDragAndDropPage.steps.navigateToCreateQuestion('fill in the gaps with drag and drop');
+            cy.barsPreLoaderWait();
+            fillInTheGapsDragAndDropPage.steps.expandStyleAndLayoutCustomizationAccordion();
+        });
+
+        it('When the "Default" drag handle icon is in selected state, then the drag handle icon of the options in the specify correct answer section should be the "default" icon', () => {
+            fillInTheGapsDragAndDropPage.steps.verifyDraggableOptionDragHandleIcon('Default');
+        });
+
+        it(`When the user selects "Arrows" then the drag handle icon of the options in the specify correct answer section should update to "arrows" icon`, () => {
+            fillInTheGapsDragAndDropPage.steps.selectDragHandleIconButton('Arrows');
+            fillInTheGapsDragAndDropPage.steps.verifyDraggableOptionDragHandleIcon('Arrows');
+        });
+
+        it(`When the user selects "None" then the drag handle icon of the options in the specify correct answer section should not exist`, () => {
+            fillInTheGapsDragAndDropPage.steps.selectDragHandleIconButton('None');
+            fillInTheGapsDragAndDropPage.steps.verifyDraggableOptionDragHandleIcon('None');
+        });
+
+    });
+
+    describe('Drag handle icon - Preview tab', () => {
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsDragAndDropPage.steps.navigateToCreateQuestion('fill in the gaps with drag and drop');
+            cy.barsPreLoaderWait();
+            fillInTheGapsDragAndDropPage.steps.expandStyleAndLayoutCustomizationAccordion();
+        });
+
+        it('When the "Default" drag handle icon is in selected state, then the drag handle icon of the options in the preview tab should be the "default" icon', () => {
+            fillInTheGapsDragAndDropPage.steps.switchToPreviewTab();
+            fillInTheGapsDragAndDropPage.steps.verifyDraggableOptionDragHandleIcon('Default');
+        });
+
+        it(`When the user selects "Arrows" then the drag handle icon of the options in the preview tab should update to "arrows" icon`, () => {
+            fillInTheGapsDragAndDropPage.steps.switchToEditTab();
+            fillInTheGapsDragAndDropPage.steps.selectDragHandleIconButton('Arrows');
+            fillInTheGapsDragAndDropPage.steps.switchToPreviewTab();
+            fillInTheGapsDragAndDropPage.steps.verifyDraggableOptionDragHandleIcon('Arrows');
+        });
+
+        it(`When the user selects "None" then the drag handle icon of the options in the preview tab should not exist`, () => {
+            fillInTheGapsDragAndDropPage.steps.switchToEditTab();
+            fillInTheGapsDragAndDropPage.steps.selectDragHandleIconButton('None');
+            fillInTheGapsDragAndDropPage.steps.switchToPreviewTab();
+            fillInTheGapsDragAndDropPage.steps.verifyDraggableOptionDragHandleIcon('None');
+        });
+    });
+
+    describe('Fill color - Edit tab', () => {
+        const modifiedColor = 'rgb(121, 60, 60)'
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsDragAndDropPage.steps.navigateToCreateQuestion('fill in the gaps with drag and drop');
+            cy.barsPreLoaderWait();
+            fillInTheGapsDragAndDropPage.steps.expandStyleAndLayoutCustomizationAccordion();
+        });
+
+        it('When the default color block is in selected state in the "Fill color" section, then the background color of the draggable options in the specify correct answer section should be the default selected color', () => {
+            fillInTheGapsDragAndDropPage.steps.verifyDraggableOptionFillColor(0, css.color.defaultBackground);
+            fillInTheGapsDragAndDropPage.steps.verifyDraggableOptionFillColor(1, css.color.defaultBackground);
+        });
+
+        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 draggable options in the specify correct answer section', () => {
+            fillInTheGapsDragAndDropPage.steps.selectDraggableOptionColorBlock(1);
+            fillInTheGapsDragAndDropPage.steps.verifyDraggableOptionFillColor(0, css.color.defaultBackground);
+            fillInTheGapsDragAndDropPage.steps.verifyDraggableOptionFillColor(1, css.color.defaultBackground);
+        });
+
+        it('When the user clicks on the "Edit color" button, modifies color for the selected color block, then the background color of the draggable options in the specify correct answer section should be the modified selected color', () => {
+            fillInTheGapsDragAndDropPage.steps.editDraggableOptionColor(0);
+            colorPopupComponent.steps.clickInColorSaturationPalette();
+            colorPopupComponent.steps.clickOnOkButton();
+            fillInTheGapsDragAndDropPage.steps.verifyDraggableOptionFillColor(0, modifiedColor);
+            fillInTheGapsDragAndDropPage.steps.verifyDraggableOptionFillColor(1, modifiedColor);
+        });
+
+        it('When the adds a new option, then the background color of the newly added option should be the modified selected color', () => {
+            fillInTheGapsDragAndDropPage.steps.addOption();
+            fillInTheGapsDragAndDropPage.steps.verifyDraggableOptionFillColor(0, modifiedColor);
+            fillInTheGapsDragAndDropPage.steps.verifyDraggableOptionFillColor(1, modifiedColor);
+            fillInTheGapsDragAndDropPage.steps.verifyDraggableOptionFillColor(2, modifiedColor);
+        });
+    });
+
+    describe('Fill color - Preview tab', () => {
+        const modifiedColor = 'rgb(121, 60, 60)'
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsDragAndDropPage.steps.navigateToCreateQuestion('fill in the gaps with drag and drop');
+            cy.barsPreLoaderWait();
+            fillInTheGapsDragAndDropPage.steps.expandStyleAndLayoutCustomizationAccordion();
+            fillInTheGapsDragAndDropPage.steps.switchToPreviewTab();
+        });
+
+        it('When the default color block is in selected state in the "Fill color" section, then the background color of the draggable options in the preview tab should be the default selected color', () => {
+            fillInTheGapsDragAndDropPage.steps.verifyDraggableOptionFillColor(0, css.color.defaultBackground);
+            fillInTheGapsDragAndDropPage.steps.verifyDraggableOptionFillColor(1, css.color.defaultBackground);
+        });
+
+        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 draggable options in the preview tab', () => {
+            fillInTheGapsDragAndDropPage.steps.switchToEditTab();
+            fillInTheGapsDragAndDropPage.steps.selectDraggableOptionColorBlock(1);
+            fillInTheGapsDragAndDropPage.steps.switchToPreviewTab();
+            fillInTheGapsDragAndDropPage.steps.verifyDraggableOptionFillColor(0, css.color.defaultBackground);
+            fillInTheGapsDragAndDropPage.steps.verifyDraggableOptionFillColor(1, css.color.defaultBackground);
+        });
+
+        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', () => {
+            fillInTheGapsDragAndDropPage.steps.switchToEditTab();
+            fillInTheGapsDragAndDropPage.steps.editDraggableOptionColor(0);
+            colorPopupComponent.steps.clickInColorSaturationPalette();
+            colorPopupComponent.steps.clickOnOkButton();
+            fillInTheGapsDragAndDropPage.steps.switchToPreviewTab();
+            fillInTheGapsDragAndDropPage.steps.verifyDraggableOptionFillColor(0, modifiedColor);
+            fillInTheGapsDragAndDropPage.steps.verifyDraggableOptionFillColor(1, modifiedColor);
+        });
+
+        it('The background color of the draggable options in the preview tab should be the modified selected color', () => {
+            fillInTheGapsDragAndDropPage.steps.switchToEditTab();
+            fillInTheGapsDragAndDropPage.steps.addOption();
+            fillInTheGapsDragAndDropPage.steps.switchToPreviewTab();
+            fillInTheGapsDragAndDropPage.steps.verifyDraggableOptionFillColor(0, modifiedColor);
+            fillInTheGapsDragAndDropPage.steps.verifyDraggableOptionFillColor(1, modifiedColor);
+            fillInTheGapsDragAndDropPage.steps.verifyDraggableOptionFillColor(2, modifiedColor);
+        });
+    });
+
+    describe('Border color - Edit tab', () => {
+        const modifiedColor = 'rgb(121, 60, 60)'
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsDragAndDropPage.steps.navigateToCreateQuestion('fill in the gaps with drag and drop');
+            cy.barsPreLoaderWait();
+            fillInTheGapsDragAndDropPage.steps.expandStyleAndLayoutCustomizationAccordion();
+        });
+
+        it('When the default color block is in selected state in the "Border color" section, then the border color of the draggable options in the specify correct answer section should be the default selected color', () => {
+            fillInTheGapsDragAndDropPage.steps.verifyDraggableOptionBorderColor(0, `1px solid ${css.color.figDefaultComponentBorder}`);
+            fillInTheGapsDragAndDropPage.steps.verifyDraggableOptionBorderColor(1, `1px solid ${css.color.figDefaultComponentBorder}`);
+        });
+
+        it('When the user selects the "None" color block, it should get in selected state and the no border color should be present for the draggable options in the specify correct answer section', () => {
+            fillInTheGapsDragAndDropPage.steps.selectDraggableOptionColorBlock(3);
+            fillInTheGapsDragAndDropPage.steps.verifyDraggableOptionBorderColor(0, `1px solid ${css.color.defaultBackground}`);
+            fillInTheGapsDragAndDropPage.steps.verifyDraggableOptionBorderColor(1, `1px solid ${css.color.defaultBackground}`);
+        });
+
+        it('When the user clicks on the "Edit color" button, modifies color for the selected color block, then the border color of the draggable options in the specify correct answer section should be the modified selected color', () => {
+            fillInTheGapsDragAndDropPage.steps.editDraggableOptionColor(1);
+            colorPopupComponent.steps.clickInColorSaturationPalette();
+            colorPopupComponent.steps.clickOnOkButton();
+            fillInTheGapsDragAndDropPage.steps.verifyDraggableOptionBorderColor(0, `1px solid ${modifiedColor}`);
+            fillInTheGapsDragAndDropPage.steps.verifyDraggableOptionBorderColor(1, `1px solid ${modifiedColor}`);
+        });
+
+        it('When the adds a new option, then the border color of the newly added option should be the modified selected color', () => {
+            fillInTheGapsDragAndDropPage.steps.addOption();
+            fillInTheGapsDragAndDropPage.steps.verifyDraggableOptionBorderColor(0, `1px solid ${modifiedColor}`);
+            fillInTheGapsDragAndDropPage.steps.verifyDraggableOptionBorderColor(1, `1px solid ${modifiedColor}`);
+            fillInTheGapsDragAndDropPage.steps.verifyDraggableOptionBorderColor(2, `1px solid ${modifiedColor}`);
+        });
+    });
+
+    describe('Border color - Preview tab', () => {
+        const modifiedColor = 'rgb(121, 60, 60)'
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsDragAndDropPage.steps.navigateToCreateQuestion('fill in the gaps with drag and drop');
+            cy.barsPreLoaderWait();
+            fillInTheGapsDragAndDropPage.steps.expandStyleAndLayoutCustomizationAccordion();
+            fillInTheGapsDragAndDropPage.steps.switchToPreviewTab();
+        });
+
+        it('When the default color block is in selected state in the "Fill color" section, then the border color of the draggable options in the preview tab should be the default selected color', () => {
+            fillInTheGapsDragAndDropPage.steps.verifyDraggableOptionBorderColor(0, `1px solid ${css.color.figDefaultComponentBorder}`);
+            fillInTheGapsDragAndDropPage.steps.verifyDraggableOptionBorderColor(1, `1px solid ${css.color.figDefaultComponentBorder}`);
+        });
+
+        it('When the user selects the "None" color block, it should get in selected state and the no border color should be present for the draggable options in the preview tab', () => {
+            fillInTheGapsDragAndDropPage.steps.switchToEditTab();
+            fillInTheGapsDragAndDropPage.steps.selectDraggableOptionColorBlock(3);
+            fillInTheGapsDragAndDropPage.steps.switchToPreviewTab();
+            fillInTheGapsDragAndDropPage.steps.verifyDraggableOptionBorderColor(0, `1px solid ${css.color.defaultBackground}`);
+            fillInTheGapsDragAndDropPage.steps.verifyDraggableOptionBorderColor(1, `1px solid ${css.color.defaultBackground}`);
+        });
+
+        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', () => {
+            fillInTheGapsDragAndDropPage.steps.switchToEditTab();
+            fillInTheGapsDragAndDropPage.steps.editDraggableOptionColor(1);
+            colorPopupComponent.steps.clickInColorSaturationPalette();
+            colorPopupComponent.steps.clickOnOkButton();
+            fillInTheGapsDragAndDropPage.steps.switchToPreviewTab();
+            fillInTheGapsDragAndDropPage.steps.verifyDraggableOptionBorderColor(0, `1px solid ${modifiedColor}`);
+            fillInTheGapsDragAndDropPage.steps.verifyDraggableOptionBorderColor(1, `1px solid ${modifiedColor}`);
+        });
+
+        it('The border color of the draggable options in the preview tab should be the modified selected color', () => {
+            fillInTheGapsDragAndDropPage.steps.switchToEditTab();
+            fillInTheGapsDragAndDropPage.steps.addOption();
+            fillInTheGapsDragAndDropPage.steps.switchToPreviewTab();
+            fillInTheGapsDragAndDropPage.steps.verifyDraggableOptionBorderColor(0, `1px solid ${modifiedColor}`);
+            fillInTheGapsDragAndDropPage.steps.verifyDraggableOptionBorderColor(1, `1px solid ${modifiedColor}`);
+            fillInTheGapsDragAndDropPage.steps.verifyDraggableOptionBorderColor(2, `1px solid ${modifiedColor}`);
+        });
+    });
+
+    describe('Color popup functionality', () => {
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsDragAndDropPage.steps.navigateToCreateQuestion('fill in the gaps with drag and drop');
+            cy.barsPreLoaderWait();
+            fillInTheGapsDragAndDropPage.steps.expandStyleAndLayoutCustomizationAccordion();
+        });
+
+        it('When the user clicks on the \'Edit color\' present in an \'Text color\' popup, then a select color popup should be displayed', () => {
+            fillInTheGapsDragAndDropPage.steps.editDraggableOptionColor(0);
+            colorPopupComponent.steps.verifyColorPopupIsDisplayed();
+        });
+
+        colorPopupComponent.tests.verifyColorPopupSelectColorTitle();
+
+        colorPopupComponent.tests.verifySaturationAndOpacityGradientPalette('rgb(255, 255, 255)');
+
+        colorPopupComponent.tests.verifyColorHuePaletteAndHexInputField('rgb(255, 0, 0)', '#ffffff');
+
+        colorPopupComponent.tests.verifyColorPopupFunctionality();
+    });
+
+    describe('Color popup - Updating the selected color', () => {
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsDragAndDropPage.steps.navigateToCreateQuestion('fill in the gaps with drag and drop');
+            cy.barsPreLoaderWait();
+            fillInTheGapsDragAndDropPage.steps.expandStyleAndLayoutCustomizationAccordion();
+        });
+
+        it('When the user moves the color picker in the color saturation palette, color in the selected color block and the hex code should change, color in the hue color palette and the opacity value should not change', () => {
+            fillInTheGapsDragAndDropPage.steps.editDraggableOptionColor(0);
+            colorPopupComponent.steps.clickInColorSaturationPalette();
+            colorPopupComponent.steps.verifySelectedColorBlock('rgb(121, 60, 60)');
+            colorPopupComponent.steps.verifySaturationPaletteColor('rgb(119, 60, 60)');
+            colorPopupComponent.steps.verifyHuePaletteColor('rgb(255, 0, 0)');
+            colorPopupComponent.steps.verifyHexValue('#793c3c');
+            colorPopupComponent.steps.verifyOpacityGradientPaletteColor('rgb(119, 60, 60)');
+        });
+
+        it('When the user moves the color picker in the color hue palette, color in the selected color block, the hex code and the saturation color palette should change and the opacity value should not change', () => {
+            colorPopupComponent.steps.clickInColorHuePalette();
+            colorPopupComponent.steps.verifySelectedColorBlock('rgb(60, 121, 121)');
+            colorPopupComponent.steps.verifyHuePaletteColor('rgb(0, 255, 255)');
+            colorPopupComponent.steps.verifyHexValue('#3c7979');
+            colorPopupComponent.steps.verifyOpacityGradientPaletteColor('rgb(60, 119, 119)');
+        });
+
+        it('When the user changes the color using hex code, the color in color saturation palette and color hue palette should change and the opacity value should not change', () => {
+            colorPopupComponent.steps.addInputToHexInputField('#ff0000');
+            colorPopupComponent.steps.verifyHexValue('#ff0000');
+            colorPopupComponent.steps.verifySaturationPaletteColor('rgb(255, 0, 0)');
+            colorPopupComponent.steps.verifyHuePaletteColor('rgb(255, 0, 0)');
+            colorPopupComponent.steps.verifyOpacityGradientPaletteColor('rgb(255, 0, 0)');
+        });
+    });
+
+    describe('Color popup - \'Cancel\' and \'Ok\' buttons', () => {
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsDragAndDropPage.steps.navigateToCreateQuestion('fill in the gaps with drag and drop');
+            cy.barsPreLoaderWait();
+            fillInTheGapsDragAndDropPage.steps.expandStyleAndLayoutCustomizationAccordion();
+        });
+
+        it('When the user modifies the selected color in the color popup and clicks on \'Cancel\' button, then the popup should close, the color block should not change and the modifications in the color popup should not persist', () => {
+            fillInTheGapsDragAndDropPage.steps.editDraggableOptionColor(0);
+            colorPopupComponent.steps.addInputToHexInputField('#ff0000');
+            colorPopupComponent.steps.clickOnOpacityGradientHuePalette();
+            colorPopupComponent.steps.clickOnCancelButton();
+            utilities.verifyElementVisibilityState(dialogBoxBase.dialogBox(), 'notExist');
+            fillInTheGapsDragAndDropPage.steps.verifyDraggableOptionColorBlockColor(0, css.color.defaultBackground);
+        });
+
+        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')
+            fillInTheGapsDragAndDropPage.steps.editDraggableOptionColor(0);
+            colorPopupComponent.steps.addInputToHexInputField('#ff0000');
+            colorPopupComponent.steps.clickOnOpacityGradientHuePalette();
+            colorPopupComponent.steps.clickOnOkButton();
+            utilities.verifyElementVisibilityState(dialogBoxBase.dialogBox(), 'notExist');
+            fillInTheGapsDragAndDropPage.steps.verifyDraggableOptionColorBlockColor(0, 'rgba(255, 0, 0, 0.5)');
+        });
+    });
+
+    describe('Border style - Edit tab', () => {
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsDragAndDropPage.steps.navigateToCreateQuestion('fill in the gaps with drag and drop');
+            cy.barsPreLoaderWait();
+            fillInTheGapsDragAndDropPage.steps.expandStyleAndLayoutCustomizationAccordion();
+        });
+
+        it('When the "Solid" border style is in selected state, then the border style of the draggable options in the specify correct answer section should be "solid"', () => {
+            fillInTheGapsDragAndDropPage.steps.verifyDraggableOptionBorderStyle(0, 'solid');
+            fillInTheGapsDragAndDropPage.steps.verifyDraggableOptionBorderStyle(1, 'solid');
+        });
+
+        borderStyles.forEach((style) => {
+            it(`When the user selects ${style}, then the border style of the draggable options in the specify correct answer section should update to ${style}`, () => {
+                fillInTheGapsDragAndDropPage.steps.selectDraggableOptionBorderStyleToggleButton(style);
+                fillInTheGapsDragAndDropPage.steps.verifyDraggableOptionBorderStyle(0, style);
+                fillInTheGapsDragAndDropPage.steps.verifyDraggableOptionBorderStyle(1, style);
+            });
+        })
+    });
+
+    describe('Border style - Preview tab', () => {
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsDragAndDropPage.steps.navigateToCreateQuestion('fill in the gaps with drag and drop');
+            cy.barsPreLoaderWait();
+            fillInTheGapsDragAndDropPage.steps.expandStyleAndLayoutCustomizationAccordion();
+            fillInTheGapsDragAndDropPage.steps.switchToPreviewTab();
+        });
+
+        it('When the "Solid" border style is in selected state, then the border style of the draggable options in the preview tab should be "solid"', () => {
+            fillInTheGapsDragAndDropPage.steps.verifyDraggableOptionBorderStyle(0, 'solid');
+            fillInTheGapsDragAndDropPage.steps.verifyDraggableOptionBorderStyle(1, 'solid');
+        });
+
+        borderStyles.forEach((style) => {
+            it(`When the user selects ${style}, then the border style of the draggable options in the preview tab should update to ${style}`, () => {
+                fillInTheGapsDragAndDropPage.steps.switchToEditTab();
+                fillInTheGapsDragAndDropPage.steps.selectDraggableOptionBorderStyleToggleButton(style);
+                fillInTheGapsDragAndDropPage.steps.switchToPreviewTab();
+                fillInTheGapsDragAndDropPage.steps.verifyDraggableOptionBorderStyle(0, style);
+                fillInTheGapsDragAndDropPage.steps.verifyDraggableOptionBorderStyle(1, style);
+            });
+        })
+    });
+
+    describe('Draggable option panel - Edit tab', () => {
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsDragAndDropPage.steps.navigateToCreateQuestion('fill in the gaps with drag and drop');
+            cy.barsPreLoaderWait();
+            fillInTheGapsDragAndDropPage.steps.expandStyleAndLayoutCustomizationAccordion();
+        });
+
+        it('"Draggable option panel" label should be displayed', () => {
+            utilities.verifyInnerText(fillInTheGapsDragAndDropPage.draggableOptionPanelLabel(), 'Draggable option panel');
+        })
+
+        it('"Panel placement" label and four toggle buttons should be displayed - "Bottom", "Top", "Left", "Right". By default "Bottom" button should be in selected state', () => {
+            utilities.verifyInnerText(fillInTheGapsDragAndDropPage.panelPlacementLabel(), 'Panel placement');
+            utilities.verifyInnerText(fillInTheGapsDragAndDropPage.bottomPanelPlacementToggleButton(), 'Bottom');
+            fillInTheGapsDragAndDropPage.steps.verifyPanelPlacementToggleButtonSelectedState('Bottom');
+            utilities.verifyElementVisibilityState(fillInTheGapsDragAndDropPage.bottomPanelPlacementToggleButton(), 'visible');
+            utilities.verifyInnerText(fillInTheGapsDragAndDropPage.topPanelPlacementToggleButton(), 'Top');
+            utilities.verifyElementVisibilityState(fillInTheGapsDragAndDropPage.topPanelPlacementToggleButton(), 'visible');
+            utilities.verifyInnerText(fillInTheGapsDragAndDropPage.leftPanelPlacementToggleButton(), 'Left');
+            utilities.verifyElementVisibilityState(fillInTheGapsDragAndDropPage.leftPanelPlacementToggleButton(), 'visible');
+            utilities.verifyInnerText(fillInTheGapsDragAndDropPage.rightPanelPlacementToggleButton(), 'Right');
+            utilities.verifyElementVisibilityState(fillInTheGapsDragAndDropPage.rightPanelPlacementToggleButton(), 'visible');
+        });
+
+        it('"Option alignment in panel" label and three toggle buttons should be displayed - "Left", "Center", "Right". By default "Left" button should be in selected state', () => {
+            utilities.verifyInnerText(fillInTheGapsDragAndDropPage.optionAlignmentInPanelLabel(), 'Option alignment in panel');
+            utilities.verifyInnerText(fillInTheGapsDragAndDropPage.leftOptionAlignmentToggleButton(), 'Left');
+            fillInTheGapsDragAndDropPage.steps.verifyOptionAlignmentToggleButtonSelectedState('Left');
+            utilities.verifyElementVisibilityState(fillInTheGapsDragAndDropPage.leftOptionAlignmentToggleButton(), 'visible');
+            utilities.verifyInnerText(fillInTheGapsDragAndDropPage.centerOptionAlignmentToggleButton(), 'Center');
+            utilities.verifyElementVisibilityState(fillInTheGapsDragAndDropPage.centerOptionAlignmentToggleButton(), 'visible');
+            utilities.verifyInnerText(fillInTheGapsDragAndDropPage.rightOptionAlignmentToggleButton(), 'Right');
+            utilities.verifyElementVisibilityState(fillInTheGapsDragAndDropPage.rightOptionAlignmentToggleButton(), 'visible');
+        });
+
+        it('CSS of "Draggable option panel" section contents', { tags: 'css' }, () => {
+            utilities.verifyCSS(fillInTheGapsDragAndDropPage.draggableOptionPanelLabel(), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.semibold
+            });
+            utilities.verifyCSS(fillInTheGapsDragAndDropPage.panelPlacementLabel(), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.semibold
+            });
+            utilities.verifyCSS(fillInTheGapsDragAndDropPage.optionAlignmentInPanelLabel(), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.semibold
+            });
+            utilities.verifyCSS(fillInTheGapsDragAndDropPage.topPanelPlacementToggleButton(), {
+                '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}`
+            });
+            utilities.verifyCSS(fillInTheGapsDragAndDropPage.bottomPanelPlacementToggleButton(), {
+                'color': css.color.defaultBackground,
+                'background-color': css.color.secondaryBtnBg,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular,
+                'border': `2px solid ${css.color.secondaryBtnActive}`
+            });
+        });
+
+        it('Accessibility of "Draggable option panel"', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(fillInTheGapsDragAndDropPage.componentContainerLabel().parents('.ngie-accordion-detail'))
+        });
+
+        it('CSS of "Draggable option panel" - hover state', { tags: 'css' }, () => {
+            utilities.hoverOverElement(fillInTheGapsDragAndDropPage.topPanelPlacementToggleButton());
+            utilities.verifyCSS(fillInTheGapsDragAndDropPage.topPanelPlacementToggleButton(), {
+                'color': css.color.secondaryBtn,
+                'background-color': css.color.secondaryBtnBg,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular,
+                'border': `2px solid ${css.color.figDefaultComponentBorder}`
+            });
+            utilities.hoverAwayFromElement();
+        });
+    });
+
+    describe('Panel placement - Preview tab', () => {
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsDragAndDropPage.steps.navigateToCreateQuestion('fill in the gaps with drag and drop');
+            cy.barsPreLoaderWait();
+            fillInTheGapsDragAndDropPage.steps.expandStyleAndLayoutCustomizationAccordion();
+        });
+
+        panelPlacements.forEach((panelPlacement) => {
+            it(`When the user selects ${panelPlacement}, then the placement of the draggable options panel in the preview tab should update to ${panelPlacement}`, () => {
+                fillInTheGapsDragAndDropPage.steps.selectPanelPlacementToggleButton(panelPlacement);
+                fillInTheGapsDragAndDropPage.steps.switchToPreviewTab();
+                fillInTheGapsDragAndDropPage.steps.verifyDraggableOptionPanelPlacement(panelPlacement);
+                fillInTheGapsDragAndDropPage.steps.switchToEditTab();
+            });
+        })
+    });
+
+    describe('Option alignment - Edit tab', () => {
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsDragAndDropPage.steps.navigateToCreateQuestion('fill in the gaps with drag and drop');
+            cy.barsPreLoaderWait();
+            fillInTheGapsDragAndDropPage.steps.expandStyleAndLayoutCustomizationAccordion();
+        });
+
+        optionAlignments.forEach((optionAlignment) => {
+            it(`When the user selects ${optionAlignment}, then the alignment of the draggable options in the draggable options panel should update to ${optionAlignment}`, () => {
+                fillInTheGapsDragAndDropPage.steps.selectOptionAlignmentToggleButton(optionAlignment);
+                fillInTheGapsDragAndDropPage.steps.verifyDraggableOptionAlignment(optionAlignment);
+            });
+        })
+    });
+
+    describe('Option alignment - Preview tab', () => {
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsDragAndDropPage.steps.navigateToCreateQuestion('fill in the gaps with drag and drop');
+            cy.barsPreLoaderWait();
+            fillInTheGapsDragAndDropPage.steps.expandStyleAndLayoutCustomizationAccordion();
+        });
+
+        optionAlignments.forEach((optionAlignment) => {
+            it(`When the user selects ${optionAlignment}, then the alignment of the draggable options in the draggable options panel should update to ${optionAlignment}`, () => {
+                fillInTheGapsDragAndDropPage.steps.selectOptionAlignmentToggleButton(optionAlignment);
+                fillInTheGapsDragAndDropPage.steps.switchToPreviewTab();
+                fillInTheGapsDragAndDropPage.steps.verifyDraggableOptionAlignment(optionAlignment);
+                fillInTheGapsDragAndDropPage.steps.switchToEditTab();
+            });
+        })
+    });
+});