itemengine-cypress-automation 1.0.151-28MarchRepoUpdate-20de036.0 → 1.0.152-28th-March-fixes-6236e0e.0

package/cypress/e2e/ILC/GridFill/customizeLayoutSectionShadeCellsGridBorders.js

@@ -0,0 +1,506 @@
+import { gridFillPage } from "../../../pages";
+import abortEarlySetup from "../../../support/helpers/abortEarly";
+import utilities from "../../../support/helpers/utilities";
+const css = Cypress.env('css');
+
+describe('Create item page - Grid fill: Customize layout section - \'Shade the cell\' and \'Grid borders\'', () => {
+    before(() => {
+        cy.loginAs('admin');
+    });
+
+    describe('\'Shade the cells\' section and Canvas title - Contents and edit tab functionality', () => {
+        abortEarlySetup();
+        before(() => {
+            gridFillPage.steps.navigateToCreateQuestion('grid fill');
+            cy.barsPreLoaderWait();
+        });
+
+        it('By default the \'Customize layout\' accordion should be in collapsed state', () => {
+            gridFillPage.steps.verifyCustomizeLayoutAccordionIsCollapsed();
+        });
+
+        it('User should be able to expand the \'Customize layout\' accordion', () => {
+            gridFillPage.steps.clickOnCustomizeLayoutAccordionButton();
+            gridFillPage.steps.verifyCustomizeLayoutAccordionIsExpanded();
+        });
+
+        it('\'Shade the cells\' label, \'Shade cell\' and \'Hide cell\' toggle buttons should be displayed and \'Shade cell\' should be selected by default', () => {
+            utilities.verifyInnerText(gridFillPage.shadeTheCellLabel(), 'Shade the cells');
+            utilities.verifyElementVisibilityState(gridFillPage.shadeTheCellLabel(), 'visible');
+            utilities.verifyInnerText(gridFillPage.shadeCellButton(), 'Shade cell');
+            utilities.verifyElementVisibilityState(gridFillPage.shadeCellButton(), 'visible');
+            utilities.verifyInnerText(gridFillPage.hideCellButton(), 'Hide cell');
+            utilities.verifyElementVisibilityState(gridFillPage.hideCellButton(), 'visible');
+            gridFillPage.steps.verifyShadeCellButtonIsSelected();
+            gridFillPage.steps.verifyHideCellButtonIsNotSelected();
+        });
+
+        it('Default grid should be displayed in \'Shade the cells\' section', () => {
+            gridFillPage.steps.verifyDefaultGridInCustomizeLayoutSection();
+        });
+
+        it('When \'Shade cell\' toggle button is selected and user clicks on an unshaded cell, then that cell should be shaded', () => {
+            gridFillPage.steps.shadeCell(0, 0);
+        });
+
+        it('When user has shaded a cell in customize layout section, then that corresponding cell should not be shaded in  \'Specify correct answer\' section grid', () => {
+            gridFillPage.steps.verifyCellNotSelectedSpecifyCorrectAnswerSection(0, 0);
+        });
+
+        it('When \'Shade cell\' toggle button is selected and user clicks on a shaded cell, then that cell should be unshaded', () => {
+            gridFillPage.steps.unShadeCell(0, 0);
+        });
+
+        it('User should be able to select \'Hide cell\' toggle button', () => {
+            gridFillPage.steps.selectHideCellButton();
+        });
+
+        it('When \'Hide cell\' toggle button is selected and user clicks on an cell, then that cell should be hidden', () => {
+            gridFillPage.steps.hideCell(1, 1);
+        });
+
+        it('When user has hidden a cell in customize layout section, then that corresponding cell should also be hidden in \'Specify correct answer\' section grid', () => {
+            gridFillPage.steps.verifyHideCustomizedCellSpecifyCorrectAnswerSection(1, 1);
+        });
+
+        it('When \'Hide cell\' toggle button is selected and user clicks on a hidden cell, then that cell should be displayed', () => {
+            gridFillPage.steps.unHideCell(1, 1);
+        });
+
+        it('When user unhides a cell in customize layout section, then that corresponding cell should also be displayed in \'Specify correct answer\' section grid', () => {
+            gridFillPage.steps.verifyCellNotHiddenSpecifyCorrectAnswerSection(1, 1);
+        });
+
+        it('\'Lock shaded cells\' and \'Outline cell on hover\' checkbox and labels should be displayed and \'Outline cell on hover\' checkbox should be checked by default', () => {
+            utilities.verifyInnerText(gridFillPage.lockShadedCellsLabel(), 'Lock shaded cells');
+            utilities.verifyElementVisibilityState(gridFillPage.lockShadedCellsLabel(), 'visible');
+            utilities.verifyElementVisibilityState(gridFillPage.lockShadedCellsCheckbox(), 'exist');
+            utilities.verifyInnerText(gridFillPage.outlineCellOnHoverLabel(), 'Outline cell on hover');
+            utilities.verifyElementVisibilityState(gridFillPage.outlineCellOnHoverLabel(), 'visible');
+            utilities.verifyElementVisibilityState(gridFillPage.outlineCellOnHoverCheckbox(), 'exist');
+            gridFillPage.steps.verifyLockShadedCellsCheckboxIsUnchecked();
+            gridFillPage.steps.verifyOutlineCellOnHoverCheckboxIsChecked();
+        });
+
+        it('User should be able to check and uncheck \'Lock shaded cells\' checkbox', () => {
+            gridFillPage.steps.checkLockShadedCellsCheckbox();
+            gridFillPage.steps.uncheckLockShadedCellsCheckbox();
+        });
+
+        it('When the user unchecks \'Outline cell on hover\' checkbox, then hover state should not be displayed when author hovers on cells in grid of customize layout and specify correct answer section', () => {
+            gridFillPage.steps.uncheckOutlineCellOnHoverCheckbox();
+            gridFillPage.steps.verifyCellIsNotInteractiveForHoverInCustomizeLayoutSection(2, 2);
+            gridFillPage.steps.verifyCellIsNotInteractiveForHoverInSpecifyCorrectAnswerSection(2, 2);
+        });
+
+        it('When the user checks \'Outline cell on hover\' checkbox, then hover state should be displayed when author hovers on cells in grid of customize layout and specify correct answer section', () => {
+            gridFillPage.steps.checkOutlineCellOnHoverCheckbox();
+            gridFillPage.steps.verifyCellIsInteractiveForHoverInCustomizeLayoutSection(2, 2);
+            gridFillPage.steps.verifyCellIsInteractiveForHoverInSpecifyCorrectAnswerSection(2, 2);
+        });
+
+        it('\'Canvas title\' label and empty input field should be displayed and user should be able to give input in the input field', () => {
+            utilities.verifyInnerText(gridFillPage.canvasTitleLabel(), 'Canvas title');
+            utilities.verifyElementVisibilityState(gridFillPage.canvasTitleLabel(), 'visible');
+            utilities.verifyElementVisibilityState(gridFillPage.canvasTitleInputField(), 'visible');
+            utilities.verifyInputFieldValue(gridFillPage.canvasTitleInputField(), '');
+            gridFillPage.steps.addInputToCanvasTitleInputField('Canvas title');
+        });
+
+        it('When user has made changes in \'Shade the cells\' section and closes and reopens the customize layout accordion, then the changes should be retained', () => {
+            gridFillPage.steps.selectShadeCellButton();
+            gridFillPage.steps.shadeCell(0, 0);
+            gridFillPage.steps.selectHideCellButton();
+            gridFillPage.steps.hideCell(0, 1);
+            gridFillPage.steps.clickOnCustomizeLayoutAccordionButton();
+            gridFillPage.steps.verifyCustomizeLayoutAccordionIsCollapsed();
+            gridFillPage.steps.clickOnCustomizeLayoutAccordionButton();
+            gridFillPage.steps.verifyHideCellButtonIsSelected();
+            gridFillPage.steps.verifyCellIsShadedCustomizeLayoutSection(0, 0);
+            gridFillPage.steps.verifyCellNotShadedCustomizeLayoutSection(0, 1);
+            gridFillPage.steps.verifyOutlineCellOnHoverCheckboxIsChecked();
+            utilities.verifyInputFieldValue(gridFillPage.canvasTitleInputField(), 'Canvas title');
+        });
+
+        it('CSS of customize layout section and different grid cells in specify correct answer section', { tags: 'css' }, () => {
+            utilities.verifyCSS(gridFillPage.customizeLayoutLabel(), {
+                'color': css.color.accordionLabel,
+                'font-size': css.fontSize.heading,
+                'font-weight': css.fontWeight.bold
+            });
+            utilities.verifyCSS(gridFillPage.customizeLayoutAccordionChevronButton().find('svg'), {
+                'fill': css.color.activeButtons
+            });
+            utilities.verifyCSS(gridFillPage.customizeLayoutLabel(), {
+                'color': css.color.accordionLabel,
+                'font-size': css.fontSize.heading,
+                'font-weight': css.fontWeight.bold
+            });
+            utilities.verifyCSS(gridFillPage.shadeTheCellLabel(), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.big,
+                'font-weight': css.fontWeight.bold
+            });
+            utilities.verifyCSS(gridFillPage.shadeCellButton(), {
+                'color': css.color.UnselectedToggleButton,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.bold
+            });
+            utilities.verifyCSS(gridFillPage.hideCellButton(), {
+                'color': css.color.whiteText,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.bold,
+                'background-color': css.color.toggleButtonSelectedBg
+            });
+            //Shaded cell
+            gridFillPage.steps.selectShadeCellButton();
+            gridFillPage.steps.shadeCell(0, 0);
+            utilities.verifyCSS(utilities.getNthElement(gridFillPage.cellInCustomizeLayout(), 0), {
+                'background-color': css.color.toggleButtonSelectedBg,
+                'border-color': css.color.gridCellSelectedStateBorder
+            });
+            utilities.verifyCSS(gridFillPage.shadedCellIcon().eq(0).find('line'), {
+                'stroke': css.color.gridCellIcon
+            });
+            //Hidden cell
+            gridFillPage.steps.selectHideCellButton();
+            gridFillPage.steps.hideCell(0, 1);
+            utilities.verifyCSS(utilities.getNthElement(gridFillPage.cellInCustomizeLayout(), 1), {
+                'border-color': css.color.gridCellHiddenStateBorder,
+                'background-color': css.color.defaultBackground
+            });
+            utilities.verifyCSS(gridFillPage.hiddenCellIcon().find('path'), {
+                'stroke': css.color.gridCellIcon
+            });
+            utilities.verifyCSS(gridFillPage.lockShadedCellsLabel(), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.bold
+            });
+            utilities.verifyCSS(gridFillPage.outlineCellOnHoverLabel(), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.bold
+            });
+            utilities.verifyCSS(gridFillPage.outlineCellOnHoverCheckbox().parent().find('.ngie-checkbox g').eq(1), {
+                'fill': css.color.activeButtons
+            });
+            utilities.verifyCSS(gridFillPage.canvasTitleLabel(), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.semibold
+            });
+            utilities.verifyCSS(gridFillPage.canvasTitleInputField(), {
+                'color': css.color.text,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular
+            });
+        });
+
+        it('Accessibility of customize layout section', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(gridFillPage.customizeLayoutLabel().parents('.customize-layout-wrapper-cls'));
+        });
+    });
+
+    describe('\'Shade the cells\' section and \'Canvas title\' - preview tab functionality', () => {
+        abortEarlySetup();
+        before(() => {
+            gridFillPage.steps.navigateToCreateQuestion('grid fill');
+            cy.barsPreLoaderWait();
+            gridFillPage.steps.clickOnCustomizeLayoutAccordionButton();
+            gridFillPage.steps.shadeCell(0, 0);
+            gridFillPage.steps.switchToPreviewTab();
+        });
+
+        it('When \'Lock shaded cells\' checkbox is unchecked and user shades a cell in \'Customize layout\' section, then user should be able to unshade the cell in preview tab', () => {
+            gridFillPage.steps.unselectCellPreviewTab(0, 0);
+            gridFillPage.steps.verifyCellNotSelectedPreviewTab(0, 0);
+        });
+
+        it('When \'Lock shaded cells\' checkbox is checked and user shades a cell in \'Customize layout\' section, then user should not be able to unshade the cell in preview tab', () => {
+            gridFillPage.steps.switchToEditTab();
+            gridFillPage.steps.checkLockShadedCellsCheckbox();
+            gridFillPage.steps.switchToPreviewTab();
+            gridFillPage.steps.unselectCellPreviewTab(0, 0);
+            gridFillPage.steps.verifyCellSelectedPreviewTab(0, 0);
+        });
+
+        it('When the \'Outline cell on hover\' checkbox is checked, then hover state should be displayed when author hovers on cells in preview tab', () => {
+            gridFillPage.steps.verifyCellIsInteractiveForHoverInPreviewTab(2, 2);
+        });
+
+        it('When the user unchecks \'Outline cell on hover\' checkbox, then hover state should not be displayed when author hovers on cells in preview tab', () => {
+            gridFillPage.steps.switchToEditTab();
+            gridFillPage.steps.uncheckOutlineCellOnHoverCheckbox();
+            gridFillPage.steps.switchToPreviewTab();
+            gridFillPage.steps.verifyCellIsNotInteractiveForHoverInPreviewTab(2, 2);
+        });
+
+        it('When user has given an input in \'Canvas title\' input field, then the provided input should be displayed in the preview tab as canvas title', () => {
+            gridFillPage.steps.switchToEditTab();
+            gridFillPage.steps.addInputToCanvasTitleInputField('Canvas title');
+            gridFillPage.steps.switchToPreviewTab();
+            utilities.verifyInnerText(gridFillPage.canvasTitlePreviewTab(), 'Canvas title');
+            utilities.verifyElementVisibilityState(gridFillPage.canvasTitlePreviewTab(), 'visible');
+        });
+
+        it('CSS of customize layout section and different grid cells in specify correct answer section', { tags: 'css' }, () => {
+            utilities.verifyCSS(gridFillPage.canvasTitlePreviewTab(), {
+                'color': css.color.text,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.bold
+            });
+        });
+
+        it('Accessibility of customize layout section', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(gridFillPage.canvasTitlePreviewTab().parents('[class*="preview"]'));
+        });
+    });
+
+    describe('\'Grid borders\', \'Grid border style\' and \'Outer grid border\' - Contents and edit tab functionality', () => {
+        abortEarlySetup();
+        before(() => {
+            gridFillPage.steps.navigateToCreateQuestion('grid fill');
+            cy.barsPreLoaderWait();
+            gridFillPage.steps.clickOnCustomizeLayoutAccordionButton();
+        });
+
+        it('\'Grid borders\' title and its toggle buttons \'Full grid\', \'Only border\' and \'None\' should be displayed and \'Full grid\' toggle buttons should be selected', () => {
+            utilities.verifyInnerText(gridFillPage.gridBordersTitle(), 'Grid borders');
+            utilities.verifyElementVisibilityState(gridFillPage.gridBordersTitle(), 'visible');
+            utilities.verifyInnerText(gridFillPage.fullGridToggleButton(), 'Full grid');
+            utilities.verifyElementVisibilityState(gridFillPage.fullGridToggleButton(), 'visible');
+            utilities.verifyInnerText(gridFillPage.onlyBorderToggleButton(), 'Only border');
+            utilities.verifyElementVisibilityState(gridFillPage.onlyBorderToggleButton(), 'visible');
+            utilities.verifyInnerText(gridFillPage.noneToggleButton(), 'None');
+            utilities.verifyElementVisibilityState(gridFillPage.noneToggleButton(), 'visible');
+            gridFillPage.steps.verifyFullGridToggleButtonIsSelected();
+        });
+
+        it('\'Grid border style\' title and its toggle buttons \'Solid\', \'Dashed\' and \'Dotted\' should be displayed and \'Solid\' toggle buttons should be selected', () => {
+            utilities.verifyInnerText(gridFillPage.gridBorderStyleTitle(), 'Grid border style');
+            utilities.verifyElementVisibilityState(gridFillPage.gridBorderStyleTitle(), 'visible');
+            utilities.verifyInnerText(gridFillPage.solidToggleButton(), 'Solid');
+            utilities.verifyElementVisibilityState(gridFillPage.solidToggleButton(), 'visible');
+            utilities.verifyInnerText(gridFillPage.dashedToggleButton(), 'Dashed');
+            utilities.verifyElementVisibilityState(gridFillPage.dashedToggleButton(), 'visible');
+            utilities.verifyInnerText(gridFillPage.dottedToggleButton(), 'Dotted');
+            utilities.verifyElementVisibilityState(gridFillPage.dottedToggleButton(), 'visible');
+            gridFillPage.steps.verifySolidToggleButtonIsSelected();
+        });
+
+        it('\'Outer grid border\' title and switch should be displayed and it should be On', () => {
+            utilities.verifyInnerText(gridFillPage.outerGridBorderTitle(), 'Outer grid border');
+            utilities.verifyElementVisibilityState(gridFillPage.outerGridBorderTitle(), 'visible');
+            utilities.verifyElementVisibilityState(gridFillPage.outerGridBorderSwitch(), 'visible');
+            gridFillPage.steps.verifyOuterGridBorderSwitchIsEnabled();
+        });
+
+        it('When \'Outer grid border\' switch is enabled, then thick outer border should be displayed on the grids of customize layout section and specify correct answer section', () => {
+            utilities.verifyCSS(gridFillPage.gridCustomizeLayoutSection(), {
+                'border': `3px solid ${css.color.gridBorder}`
+            });
+            utilities.verifyCSS(gridFillPage.gridSpecifyCorrectAnswerSection(), {
+                'border': `3px solid ${css.color.gridBorder}`
+            });
+        });
+
+        it('When user disables \'Outer grid border\' switch, then thick outer border should not be displayed in the grids of customize layout section and specify correct answer section', () => {
+            gridFillPage.steps.switchOffOuterGridBorderSwitch();
+            gridFillPage.steps.verifyGridBorderWhenOuterBorderSwitchIsOffInEditTab();
+        });
+
+        it('When user has selected \'Full grid\' toggle button in \'Grid borders\', then the entire grid i.e. border of all the cells should be displayed in the grids of Customize layout section and Specify correct answer section', () => {
+            gridFillPage.steps.selectGridBordersToggleButton('Full grid');
+            gridFillPage.steps.verifyCellBorderIsDisplayedForFullGridToggleButtonInEditTab();
+        });
+
+        it('When user selects \'Only border\' toggle button in \'Grid borders\', then the borders for individual cells should not be displayed in the grids of Customize layout section and Specify correct answer section', () => {
+            gridFillPage.steps.selectGridBordersToggleButton('Only border');
+            gridFillPage.steps.verifyCellBorderIsDisplayedForOnlyBorderToggleButtonInEditTab();
+        });
+
+        it('When user selects \'None\' toggle button in \'Grid borders\' and \'Outer grid border\' switch is on, then the borders for individual cells should not be displayed in the grids of Customize layout section', () => {
+            gridFillPage.steps.selectGridBordersToggleButton('None');
+            gridFillPage.steps.verifyCellBorderNotDisplayedForNoneToggleButtonInEditTab();
+        });
+
+        it('When user selects \'None\' toggle button in \'Grid borders\', then \'Grid border style\' title and its toggle buttons should not be displayed', () => {
+            utilities.verifyElementVisibilityState(gridFillPage.gridBorderStyleTitle(), 'notExist');
+            utilities.verifyElementVisibilityState(gridFillPage.solidToggleButton(), 'notExist');
+            utilities.verifyElementVisibilityState(gridFillPage.dashedToggleButton(), 'notExist');
+            utilities.verifyElementVisibilityState(gridFillPage.dottedToggleButton(), 'notExist');
+        });
+
+        it('When user selects \'Full border\' toggle button, then \'Grid border style\' title and its toggle buttons should be displayed again', () => {
+            gridFillPage.steps.selectGridBordersToggleButton('Full grid');
+            utilities.verifyElementVisibilityState(gridFillPage.gridBorderStyleTitle(), 'visible');
+            utilities.verifyElementVisibilityState(gridFillPage.solidToggleButton(), 'visible');
+            utilities.verifyElementVisibilityState(gridFillPage.dashedToggleButton(), 'visible');
+            utilities.verifyElementVisibilityState(gridFillPage.dottedToggleButton(), 'visible');
+        });
+
+        it('When user has selected \'Solid\' toggle button in \'Grid border style\', then the border of all the cells as well as grid should be displayed in solid form in Customize layout section and Specify correct answer section', () => {
+            gridFillPage.steps.selectGridBorderStyleToggleButton('Solid');
+            gridFillPage.steps.verifySolidBorderForSolidToggleButtonInEditTab();
+        });
+
+        it('When user has selected \'Dashed\' toggle button in \'Grid border style\', then the border of all the cells as well as grid should be displayed in solid form in Customize layout section and Specify correct answer section', () => {
+            gridFillPage.steps.selectGridBorderStyleToggleButton('Dashed');
+            gridFillPage.steps.verifyDashedBorderForDashedToggleButtonInEditTab();
+        });
+
+        it('When user has selected \'Dotted\' toggle button in \'Grid border style\', then the border of all the cells as well as grid should be displayed in solid form in Customize layout section and Specify correct answer section', () => {
+            gridFillPage.steps.selectGridBorderStyleToggleButton('Dotted');
+            gridFillPage.steps.verifyDottedBorderForDottedToggleButtonInEditTab();
+        });
+
+        it('When user switches on the \'Outer grid border\' switch, then thicker outer border should be displayed on the grid', () => {
+            gridFillPage.steps.switchOnOuterGridBorderSwitch();
+            utilities.verifyCSS(gridFillPage.gridCustomizeLayoutSection(), {
+                'border': `3px solid ${css.color.gridBorder}`
+            });
+            utilities.verifyCSS(gridFillPage.gridSpecifyCorrectAnswerSection(), {
+                'border': `3px solid ${css.color.gridBorder}`
+            });
+        });
+
+        it('CSS of \'Grid borders\', \'Grid border style\' and \'Outer grid border\' sections', () => {
+            utilities.verifyCSS(gridFillPage.gridBordersTitle(), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.semibold
+            });
+            utilities.verifyCSS(gridFillPage.fullGridToggleButton(), {
+                'color': css.color.whiteText,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.bold,
+                'background-color': css.color.toggleButtonSelectedBg
+            });
+            utilities.verifyCSS(gridFillPage.onlyBorderToggleButton(), {
+                'color': css.color.UnselectedToggleButton,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.bold,
+                'background-color': css.color.transparent
+            });
+            utilities.verifyCSS(gridFillPage.gridBorderStyleTitle(), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.semibold
+            });
+            utilities.verifyCSS(gridFillPage.dottedToggleButton(), {
+                'color': css.color.whiteText,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.bold,
+                'background-color': css.color.toggleButtonSelectedBg
+            });
+            utilities.verifyCSS(gridFillPage.solidToggleButton(), {
+                'color': css.color.UnselectedToggleButton,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.bold,
+                'background-color': css.color.transparent
+            });
+            utilities.verifyCSS(gridFillPage.outerGridBorderTitle(), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.semibold
+            });
+            utilities.verifyCSS(gridFillPage.outerGridBorderSwitch().find('.MuiSwitch-track'), {
+                'background-color': css.color.enabledSwitchBg
+            });
+            gridFillPage.steps.switchOffOuterGridBorderSwitch();
+            utilities.verifyCSS(gridFillPage.outerGridBorderSwitch().find('.MuiSwitch-track'), {
+                'background-color': css.color.disabledSwitchBg
+            });
+        });
+
+        //a11y covered in above describe
+
+        it('When user has made changes in \'Grid borders\', \'Grid border style\' and \'Outer grid border\' sections and closes and reopens the customize layout accordion, then the changes should be retained', () => {
+            gridFillPage.steps.selectGridBordersToggleButton('Only border');
+            gridFillPage.steps.selectGridBorderStyleToggleButton('Dashed');
+            gridFillPage.steps.clickOnCustomizeLayoutAccordionButton();
+            gridFillPage.steps.verifyCustomizeLayoutAccordionIsCollapsed();
+            gridFillPage.steps.clickOnCustomizeLayoutAccordionButton();
+            gridFillPage.steps.verifyCustomizeLayoutAccordionIsExpanded();
+            gridFillPage.steps.verifyOnlyBorderToggleButtonIsSelected();
+            gridFillPage.steps.verifyDashedToggleButtonIsSelected();
+            gridFillPage.steps.verifyOuterGridBorderSwitchIsDisabled();
+        });
+    });
+
+    describe('\'Grid borders\', \'Grid border style\' and \'Outer grid border\' -preview tab functionality', () => {
+        abortEarlySetup();
+        before(() => {
+            gridFillPage.steps.navigateToCreateQuestion('grid fill');
+            cy.barsPreLoaderWait();
+            gridFillPage.steps.clickOnCustomizeLayoutAccordionButton();
+            gridFillPage.steps.switchToPreviewTab();
+        });
+
+        it('When \'Outer grid border\' switch is enabled, then thick outer border should be displayed on the preview tab grid', () => {
+            utilities.verifyCSS(gridFillPage.gridWrapperPreviewTab(), {
+                'border': `3px solid ${css.color.gridBorder}`
+            });
+        });
+
+        it('When user disables \'Outer grid border\' switch, then thick outer border should be displayed on the preview tab grid', () => {
+            gridFillPage.steps.switchToEditTab();
+            gridFillPage.steps.switchOffOuterGridBorderSwitch();
+            gridFillPage.steps.switchToPreviewTab();
+            gridFillPage.steps.verifyGridBorderWhenOuterBorderSwitchIsOffInPreviewTab();
+        });
+
+        it('When user has selected \'Full grid\' toggle button in \'Grid borders\', then the entire grid i.e. border of all the cells should be displayed in the grids of Customize layout section and Specify correct answer section', () => {
+            gridFillPage.steps.verifyCellBorderIsDisplayedForFullGridToggleButtonInPreviewTab();
+        });
+
+        it('When user selects \'Only border\' toggle button in \'Grid borders\', then the borders for individual cells should not be displayed on the preview tab grid', () => {
+            gridFillPage.steps.switchToEditTab();
+            gridFillPage.steps.selectGridBordersToggleButton('Only border');
+            gridFillPage.steps.switchToPreviewTab();
+            gridFillPage.steps.verifyCellBorderIsDisplayedForOnlyBorderToggleButtonInPreviewTab();
+        });
+
+        it('When user selects \'None\' toggle button in \'Grid borders\' and \'Outer grid border\' switch is on, then the borders for individual cells should not be displayed in the displayed on the preview tab grid', () => {
+            gridFillPage.steps.switchToEditTab();
+            gridFillPage.steps.selectGridBordersToggleButton('None');
+            gridFillPage.steps.switchToPreviewTab();
+            gridFillPage.steps.verifyCellBorderNotDisplayedForNoneToggleButtonInPreviewTab();
+        });
+
+        it('When user has selected \'Solid\' toggle button in \'Grid border style\', then the border of all the cells as well as grid should be displayed in the displayed on the preview tab grid', () => {
+            gridFillPage.steps.switchToEditTab();
+            cy.log('Pre-step: Select \'Full grid\' toggle button');
+            gridFillPage.steps.selectGridBordersToggleButton('Full grid');
+            gridFillPage.steps.selectGridBorderStyleToggleButton('Solid');
+            gridFillPage.steps.switchToPreviewTab();
+            gridFillPage.steps.verifySolidBorderForSolidToggleButtonInPreviewTab();
+        });
+
+        it('When user has selected \'Dashed\' toggle button in \'Grid border style\', then the border of all the cells as well as grid should be displayed in the displayed on the preview tab grid', () => {
+            gridFillPage.steps.switchToEditTab();
+            gridFillPage.steps.selectGridBorderStyleToggleButton('Dashed');
+            gridFillPage.steps.switchToPreviewTab();
+            gridFillPage.steps.verifyDashedBorderForDashedToggleButtonInPreviewTab();
+        });
+
+        it('When user has selected \'Dotted\' toggle button in \'Grid border style\', then the border of all the cells as well as grid should be displayed in the displayed on the preview tab grid', () => {
+            gridFillPage.steps.switchToEditTab();
+            gridFillPage.steps.selectGridBorderStyleToggleButton('Dotted');
+            gridFillPage.steps.switchToPreviewTab();
+            gridFillPage.steps.verifyDottedBorderForDottedToggleButtonInPreviewTab();
+        });
+
+        it('When user switches on the \'Outer grid border\' switch, then thicker outer border should be displayed in the displayed on the preview tab grid', () => {
+            gridFillPage.steps.switchToEditTab();
+            gridFillPage.steps.switchOnOuterGridBorderSwitch();
+            gridFillPage.steps.switchToPreviewTab();
+            utilities.verifyCSS(gridFillPage.gridWrapperPreviewTab(), {
+                'border': `3px solid ${css.color.gridBorder}`
+            });
+        });
+
+        //a11y covered in above describe
+    });
+});

package/cypress/e2e/ILC/GridFill/previewContentsForAllViews.smoke.js

@@ -177,11 +177,11 @@ describe('Create item page - Grid fill : Preview contents', () => {
                             'background-color': css.color.gridCellSelectedStateBg
                         });
                         utilities.verifyCSS(utilities.getNthElement(gridFillPage.cellInPreviewTab(), 2), {
-                            'border-color': css.color.secondaryBtnDisabled,
+                            'border-color': css.color.figDefaultComponentBorder,
                             'background-color': css.color.defaultBackground
                         });
                         utilities.verifyCSS(utilities.getNthElement(gridFillPage.cellInPreviewTab(), 7), {
-                            'border-color': css.color.activeButtons,
+                            'border-color': css.color.figDefaultComponentBorder,
                             'background-color': css.color.gridCellDefaultStateBg
                         });
                         break;
@@ -192,7 +192,7 @@ describe('Create item page - Grid fill : Preview contents', () => {
                             'background-color': css.color.gridCellCorrectAnswerBg
                         });
                         utilities.verifyCSS(utilities.getNthElement(gridFillPage.cellInPreviewTab(), 2), {
-                            'border-color': css.color.secondaryBtnDisabled,
+                            'border-color': css.color.figDefaultComponentBorder,
                             'background-color': css.color.defaultBackground
                         });
                         utilities.verifyCSS(utilities.getNthElement(gridFillPage.cellInPreviewTab(), 7), {