itemengine-cypress-automation 1.0.165-migrationScripts-e27d6f2.0 → 1.0.166

package/cypress/pages/components/gridQuestionCommonComponent.js

@@ -12,7 +12,9 @@ const selectors = {
     editCellPropertyListOption: () => cy.get('[class*="MuiMenuItem"][role="menuitem"]'),
     editCellPropertyTableWrapper: () => cy.get('.single-select-grid-option-selection-component .selection-grid-wrapper').eq(0),
     editCellPropertyRow: () => gridQuestionCommonComponent.editCellPropertyTableWrapper().find('[class*="wrapper-row"]'),
-    cellPropertyInputField: () => cy.get('[title="Enter text here..."]'),
+    editCellPropertyTableLeftPaginationButton: () => cy.get('.authoring-selection-grid [class*="SelectionGridstyles__PaginationLeftControl"]'),
+    editCellPropertyTableRightPaginationButton: () => cy.get('.authoring-selection-grid [class*="SelectionGridstyles__PaginationRightControl"]'),
+    cellPropertyInputField: () => cy.get('[title*="text"]'),
     optionCellPropertyInputField: () => cy.get('[title="Option text or image..."]'),
     tableRowSpecifyCorrectAnswerSection: () => cy.get('.correct-answer-accordion [class*="wrapper-row"]'),
     tableRowPreviewTab: () => cy.get('[class*="question-preview-wrapper"] [class*="wrapper-row"]'),
@@ -27,9 +29,30 @@ const selectors = {
     penaltyPointsForEachIncorrectRowInputField: () => cy.get('input[aria-label="Penalty points for each incorrect row"]'),
     pointsPerRowLabel: () => cy.get('.selection-grid-partial-points-per-response-label'),
     enableRowHeadingLabel: () => cy.get('[data-ngie-testid="enable-row-heading-checkbox"] [class*="label"]'),
-    enableRowHeadingCheckbox: () => cy.get('[data-ngie-testid="enable-row-heading-checkbox"] .ngie-checkbox'),
+    enableRowHeadingCheckbox: () => cy.get('[data-ngie-testid="enable-row-heading-checkbox"] input'),
     leftPaginationButtonSpecifyCorrectAnswerSection: () => cy.get('.set-correct-ans-selection-grid [aria-label="Left Pagination Button"]'),
     rightPaginationButtonSpecifyCorrectAnswerSection: () => cy.get('.set-correct-ans-selection-grid [aria-label="Right Pagination Button"]'),
+    leftPaginationButtonPreviewTab: () => cy.get('.preview-selection-grid [class*="SelectionGridstyles__PaginationLeftControl"]'),
+    rightPaginationButtonPreviewTab: () => cy.get('.preview-selection-grid [class*="SelectionGridstyles__PaginationRightControl"]'),
+    defaultOptionLabel: () => cy.get('#Default-option-dropdown-label'),
+    defaultOptionDropdown: () => cy.get('#Default-option-select'),
+    defaultOptionDropdownListOptions: (ariaLabel = null) => {
+        if (ariaLabel) {
+            return cy.get(`[aria-labelledby*="Default-option-dropdown-label "] [role="option"][aria-label*="${ariaLabel}"]`).first()
+        } else {
+            return cy.get('[aria-labelledby*="Default-option-dropdown-label"] [role="option"]')
+        }
+    },
+    defaultTextLabel: () => cy.get('#Default-text-dropdown-label'),
+    defaultTextDropdown: () => cy.get('#Default-text-select'),
+    defaultTextDropdownListOptions: (optionText = null) => {
+        if (optionText) {
+            return cy.get('[aria-labelledby*="Default-text-dropdown-label "] [role="option"]').contains(`${optionText}`, { matchCase: false });
+        } else {
+            return cy.get('[aria-labelledby*="Default-text-dropdown-label"] [role="option"]')
+        }
+    },
+    specifyRowsAndColumnsTableHelpText: () => cy.get('[class*="GridPropertiesstyles__HelperTextWrapper"]')
 }
 
 const steps = {
@@ -92,6 +115,13 @@ const steps = {
         });
     },
 
+    /**
+     * Verify text in the input field of a table cell property.
+     * @param {Object} position - The position of the table cell property.
+     * @param {number} position.row - The row index (zero-based) of the table cell property.
+     * @param {number} position.column - The column index (zero-based) of the table cell property.
+     * @param {string} text - The text to verify in the input field.
+     */
     verifyTextInCellPropertyInputField: ({ row, column }, text) => {
         utilities.getNthElement(gridQuestionCommonComponent.editCellPropertyRow(), row).within(() => {
             utilities.getNthElement(gridQuestionCommonComponent.tableCell(), column).within(() => {
@@ -100,6 +130,36 @@ const steps = {
         });
     },
 
+    /**
+     * Verify placeholder text in the input field of a table cell property.
+     * @param {Object} position - The position of the table cell property.
+     * @param {number} position.row - The row index (zero-based) of the table cell property.
+     * @param {number} position.column - The column index (zero-based) of the table cell property.
+     * @param {string} text - The placeholder text to verify in the input field.
+     */
+    verifyPlaceholderTextInCellPropertyInputField: ({ row, column }, text) => {
+        utilities.getNthElement(gridQuestionCommonComponent.editCellPropertyRow(), row).within(() => {
+            utilities.getNthElement(gridQuestionCommonComponent.tableCell(), column).within(() => {
+                gridQuestionCommonComponent.cellPropertyInputField()
+                    .should('have.attr', 'data-cke-editorplaceholder', text);
+            });
+        });
+    },
+
+    /**
+     * Verify input field not exists in table cell property.
+     * @param {Object} position - The position of the table cell property.
+     * @param {number} position.row - The row index (zero-based) of the table cell property.
+     * @param {number} position.column - The column index (zero-based) of the table cell property.
+     */
+    verifyCellPropertyInputFieldNotExists: ({ row, column }) => {
+        utilities.getNthElement(gridQuestionCommonComponent.editCellPropertyRow(), row).within(() => {
+            utilities.getNthElement(gridQuestionCommonComponent.tableCell(), column).within(() => {
+                utilities.verifyElementVisibilityState(gridQuestionCommonComponent.cellPropertyInputField(), 'notExist');
+            });
+        });
+    },
+
     /**
      * Enters text into the input field of an option cell.
      * @param {Object} position - The position of the option cell.
@@ -332,6 +392,24 @@ const steps = {
             });
     },
 
+    /**
+     * Verify answer option button is not displayed in cell in the Specify Correct Answer section.
+     * @param {Object} position - The position of the option button.
+     * @param {number} position.row - The row index (zero-based) of the Specify Correct Answer section.
+     * @param {number} position.column - The column index (zero-based) of the option button.
+     */
+    verifyAnswerOptionButtonIsNotDisplayedInCellSpecifyCorrectAnswerSection: ({ row, column }) => {
+        utilities.getNthElement(gridQuestionCommonComponent.tableRowSpecifyCorrectAnswerSection(), row)
+            .within(() => {
+                utilities.getNthElement(gridQuestionCommonComponent.tableCell(), column)
+                    .within(() => {
+                        gridQuestionCommonComponent.optionsButton()
+                            .find('svg')
+                            .should('not.exist');
+                    });
+            });
+    },
+
     /**
      * Unchecks an option in the Specify Correct Answer section of a grid question component.
      * @param {Object} cellPosition - The position of the option to uncheck, containing row and column indices.
@@ -567,6 +645,11 @@ const steps = {
             .should('be.checked');
     },
 
+    verifyEnableRowHeadingCheckboxUncheckedState: () => {
+        gridQuestionCommonComponent.enableRowHeadingCheckbox()
+            .should('not.be.checked');
+    },
+
     checkEnableRowHeadingCheckbox: () => {
         gridQuestionCommonComponent.enableRowHeadingCheckbox()
             .click()
@@ -615,6 +698,16 @@ const steps = {
             .click();
     },
 
+    clickOnRightPaginationButtonPreviewTab: () => {
+        gridQuestionCommonComponent.rightPaginationButtonPreviewTab()
+            .click();
+    },
+
+    clickOnLeftPaginationButtonPreviewTab: () => {
+        gridQuestionCommonComponent.leftPaginationButtonPreviewTab()
+            .click();
+    },
+
     /**
      * Verifies that questions are randomized in the preview tab of a grid question component.
      * @param {Array<string>} questionsArray - An array containing the original questions in their initial order.
@@ -658,6 +751,18 @@ const steps = {
         return questionsArray;
     },
 
+    /**
+     * @description Verify the number of columns in the edit cell property  table
+     * @param {number} numberOfColumns Number of columns in the edit cell property table
+     */
+    verifyColumnsCountInEditCellPropertyTable: (numberOfColumns) => {
+        gridQuestionCommonComponent.editCellPropertyRow()
+            .eq(0)
+            .within(() => {
+                utilities.verifyElementCount(gridQuestionCommonComponent.tableCell(), numberOfColumns);
+            });
+    },
+
     /**
      * Verifies the presence of an error icon in the specified row of the Specify Columns and Rows grid.
      * @param {number} rowIndex - The index of the row to verify.
@@ -672,6 +777,215 @@ const steps = {
             });
     },
 
+    /**
+     * @description Verify the number of rows in the edit cell property table
+     * @param {number} numberOfRows Number of rows in the edit cell property table
+     */
+    verifyRowsCountInEditCellPropertyTable: (numberOfRows) => {
+        utilities.verifyElementCount(gridQuestionCommonComponent.editCellPropertyRow(), numberOfRows);
+    },
+
+    /**
+     * @description Verify the edit cell category table first row or column cell property
+     * @param {Object} position - The position of the table cell
+     * @param {number} position.row - The row index (zero-based) of the table cell property.
+     * @param {number} position.column - The column index (zero-based) of the table cell property.
+     * @param {("Heading" | "Subheading" | "Text" | "None")} cellPropertyType - Property of the table cell
+     */
+    verifyEditCellCategoryTableCellProperty: ({ row, column }, cellPropertyType) => {
+        utilities.getNthElement(gridQuestionCommonComponent.editCellPropertyRow(), row)
+            .within(() => {
+                switch (cellPropertyType) {
+                    case 'Heading':
+                        utilities.getNthElement(gridQuestionCommonComponent.tableCell(), column)
+                            .should('have.class', 'cell-content-heading');
+                        break;
+                    case 'Subheading':
+                        utilities.getNthElement(gridQuestionCommonComponent.tableCell(), column)
+                            .should('have.class', 'cell-content-subeading');
+                        break;
+                    case 'Text':
+                        utilities.getNthElement(gridQuestionCommonComponent.tableCell(), column)
+                            .should('have.class', 'cell-content-text');
+                        break;
+                    case 'None':
+                        utilities.getNthElement(gridQuestionCommonComponent.tableCell(), column)
+                            .should('have.class', 'cell-content-none')
+                            .find('textarea')
+                            .should('not.exist');
+                        break;
+                    case 'Radio button':
+                    case 'Checkbox':
+                        utilities.getNthElement(gridQuestionCommonComponent.tableCell(), column)
+                            .should('have.class', 'cell-content-radio');
+                        break;
+                    case 'Radio button with text':
+                    case 'Checkbox with text':
+                        utilities.getNthElement(gridQuestionCommonComponent.tableCell(), column)
+                            .should('have.class', 'cell-content-radio-text');
+                        break;
+                    case 'No radio button':
+                    case 'No checkbox':
+                        utilities.getNthElement(gridQuestionCommonComponent.tableCell(), column)
+                            .should('have.class', 'cell-content-text');
+                        break;
+                    default:
+                        throw new Error('Invalid cell property');
+                }
+            });
+    },
+
+    clickOnLeftPaginationButtonEditCellPropertyTable: () => {
+        gridQuestionCommonComponent.editCellPropertyTableLeftPaginationButton()
+            .click();
+    },
+
+    clickOnRightPaginationButtonEditCellPropertyTable: () => {
+        gridQuestionCommonComponent.editCellPropertyTableRightPaginationButton()
+            .click();
+    },
+
+    /**
+     * @description Verify column is visible in the edit cell category table
+     * @param {number} columnIndex Index of the column
+     */
+    verifyColumnIsVisibleInEditCellPropertyTable: (columnIndex) => {
+        gridQuestionCommonComponent.editCellPropertyRow()
+            .eq(0)
+            .within(() => {
+                utilities.verifyElementVisibilityState(gridQuestionCommonComponent.tableCell().eq(columnIndex), 'visible');
+            });
+    },
+
+    /**
+     * @description Verify column is not visible in the edit cell category table
+     * @param {number} columnIndex Index of the column
+     */
+    verifyColumnIsNotVisibleInEditCellPropertyTable: (columnIndex) => {
+        gridQuestionCommonComponent.editCellPropertyRow()
+            .eq(0)
+            .within(() => {
+                utilities.verifyElementVisibilityState(gridQuestionCommonComponent.tableCell().eq(columnIndex), 'hidden');
+            });
+    },
+
+    /**
+     * @description Verify column is visible in the specify correct answer table
+     * @param {number} columnIndex Index of the column
+     */
+    verifyColumnIsVisibleInSpecifyCorrectAnswerTable: (columnIndex) => {
+        gridQuestionCommonComponent.tableRowSpecifyCorrectAnswerSection()
+            .eq(0)
+            .within(() => {
+                utilities.verifyElementVisibilityState(gridQuestionCommonComponent.tableCell().eq(columnIndex), 'visible');
+            });
+    },
+
+    /**
+     * @description Verify column is visible in the preview tab table
+     * @param {number} columnIndex Index of the column
+     */
+    verifyColumnIsVisibleInPreviewTabTable: (columnIndex) => {
+        gridQuestionCommonComponent.tableRowPreviewTab()
+            .eq(0)
+            .within(() => {
+                utilities.verifyElementVisibilityState(gridQuestionCommonComponent.tableCell().eq(columnIndex), 'visible');
+            });
+    },
+
+    /**
+    * @description Verify the number of columns in the specify correct answer section table
+    * @param {number} numberOfColumns Number of columns in the specify correct answer section table
+    */
+    verifyColumnsCountInSpecifyCorrectAnswerSectionTable: (numberOfColumns) => {
+        gridQuestionCommonComponent.tableRowSpecifyCorrectAnswerSection()
+            .eq(0)
+            .within(() => {
+                utilities.verifyElementCount(gridQuestionCommonComponent.tableCell(), numberOfColumns);
+            });
+    },
+
+    /**
+    * @description Verify the number of rows in the specify correct answer section table
+    * @param {number} numberOfRows Number of rows in the specify correct answer section table
+    */
+    verifyRowsCountInSpecifyCorrectAnswerSectionTable: (numberOfRows) => {
+        utilities.verifyElementCount(gridQuestionCommonComponent.tableRowSpecifyCorrectAnswerSection(), numberOfRows);
+    },
+
+    /**
+    * @description Verify the number of columns in the preview tab table
+    * @param {number} numberOfColumns Number of columns in the preview tab table
+    */
+    verifyColumnsCountInPreviewTabTable: (numberOfColumns) => {
+        gridQuestionCommonComponent.tableRowPreviewTab()
+            .eq(0)
+            .within(() => {
+                utilities.verifyElementCount(gridQuestionCommonComponent.tableCell(), numberOfColumns)
+            });
+    },
+
+    /**
+    * @description Verify the number of rows in the preview tab table
+    * @param {number} numberOfRows Number of rows in the preview tab table
+    */
+    verifyRowsCountInPreviewTabTable: (numberOfRows) => {
+        utilities.verifyElementCount(gridQuestionCommonComponent.tableRowPreviewTab(), numberOfRows);
+    },
+
+    expandDefaultOptionDropdown: () => {
+        gridQuestionCommonComponent.defaultOptionDropdown()
+            .click();
+    },
+
+    expandDefaultTextDropdown: () => {
+        gridQuestionCommonComponent.defaultTextDropdown()
+            .click();
+    },
+
+    /**
+     * @param {('Checkboxes' or 'Radio buttons' | 'Checkboxes with text' or 'Radio buttons with text' |'No checkboxes' or 'No radio buttons' )} listOption 
+     * @description this function selects an option from expanded default option dropdown
+     */
+    selectOptionFromDefaultOptionDropdown: (listOption) => {
+        gridQuestionCommonComponent.defaultOptionDropdownListOptions(listOption)
+            .click();
+    },
+
+    /**
+     * @param {('True / False'| 'Yes / No'|'Agree / Disagree'|'Custom')} listOption 
+     * @description this function selects an option from expanded default text dropdown
+     */
+    selectOptionFromDefaultTextDropdown: (listOption) => {
+        gridQuestionCommonComponent.defaultTextDropdownListOptions(listOption)
+            .click();
+    },
+
+    /**
+     * Expand cell property menu of a table cell at the specified row and column.
+     * @param {Object} position - The position of the table cell to modify.
+     * @param {number} position.row - The row index (zero-based) of the table cell.
+     * @param {number} position.column - The column index (zero-based) of the table cell.
+     */
+    expandCellPropertyMenu: ({ row, column }) => {
+        utilities.getNthElement(gridQuestionCommonComponent.editCellPropertyRow(), row).within(() => {
+            utilities.getNthElement(gridQuestionCommonComponent.editCellPropertyButton(), column)
+                .scrollIntoView()
+                .click();
+        });
+        utilities.verifyElementVisibilityState(gridQuestionCommonComponent.editCellPropertyList(), 'visible');
+    },
+
+    /**
+     * @description Verify cell property menu item is selected
+     * @param {string} cellType Selected cell property menu option
+     */
+    verifyCellPropertyMenuOptionIsSelected: (cellType) => {
+        gridQuestionCommonComponent.editCellPropertyListOption()
+            .contains(`${cellType}`, { matchCase: false })
+            .should('have.class', 'Mui-selected');
+    },
+
     /**
      * Verifies the absence of an error icon in the specified row of the Specify Columns and Rows grid.
      * @param {number} rowIndex - The index of the row to verify.
@@ -705,6 +1019,319 @@ const tests = {
 
         });
     },
+
+    /**
+     * Verifies the contents and functionality of the 'Specify correct answer' accordion for multiple selection questions.
+     * @param {{'Correct' | 'Alternative'}} accordionName - The name of the accordion to be used in the validation.
+     * @example - verifySpecifyCorrectAnswerAccordionContentsAndFunctionality('Correct');
+     */
+    verifySpecifyCorrectAnswerAccordionContentsAndFunctionality: (accordionName) => {
+        it(`The user should be able to check an option in the ${accordionName} accordion`, () => {
+            gridQuestionCommonComponent.steps.setAnswerInSpecifyCorrectAnswerSection({ row: 1, column: 0 });
+        });
+
+        it(`When the user has unchecked all the options in the ${accordionName} accordion, \'Error: Please set a correct answer.\' error message should be thrown along with an error icon on the \'${accordionName}\' accordion`, () => {
+            gridQuestionCommonComponent.steps.uncheckOptionInSpecifyCorrectAnswerSection({ row: 1, column: 0 });
+            utilities.verifyElementVisibilityState(commonComponents.errorMessage(), 'visible')
+            utilities.verifyInnerText(commonComponents.errorMessage(), 'Error: Please set a correct answer.');
+            if (accordionName == 'Correct') {
+                autoScoredSpecifyCorrectAnswerSection.correctAnswerAccordion()
+                    .within(() => {
+                        utilities.verifyElementVisibilityState(autoScoredSpecifyCorrectAnswerSection.specifyCorrectAnswerErrorIcon(), 'visible');
+                    });
+            } else {
+                autoScoredSpecifyCorrectAnswerSection.alternativeAnswerAccordion()
+                    .within(() => {
+                        utilities.verifyElementVisibilityState(autoScoredSpecifyCorrectAnswerSection.specifyCorrectAnswerErrorIcon(), 'visible');
+                    });
+            };
+        });
+
+        autoScoredSpecifyCorrectAnswerSection.tests.verifyAutoScoredCorrectAnswerErrorMessageCSSAndA11y();
+
+        it('When the user checks an option in the question grid, the error message should disappear', () => {
+            gridQuestionCommonComponent.steps.setAnswersForAllQuestionStemsInSpecifyCorrectAnswerSection([{ row: 1, column: 0 }, { row: 2, column: 1 }, { row: 3, column: 0 }, { row: 4, column: 1 }]);
+            commonComponents.steps.verifyErrorMessageIsNotDisplayed();
+        });
+
+        autoScoredSpecifyCorrectAnswerSection.tests.verifyAutoScoredPointsErrorMessageWhenPointsFieldIsEmpty(accordionName);
+
+        it('CSS of \'Correct\' accordion contents', { tags: 'css' }, () => {
+            gridQuestionCommonComponent.gridSpecifyCorrectAnswerSection()
+                .within(() => {
+                    utilities.verifyCSS(utilities.getNthElement(gridQuestionCommonComponent.tableCell().parent(), 1), {
+                        'background-color': css.color.matrixHeadingCellBg,
+                        'border-color': `${css.color.matrixCellBorder}`
+                    });
+                    utilities.verifyCSS(utilities.getNthElement(gridQuestionCommonComponent.tableCell().parent(), 6), {
+                        'background-color': css.color.matrixSubheadingCellBg,
+                        'border-color': `${css.color.matrixCellBorder}`
+                    });
+                    utilities.verifyCSS(utilities.getNthElement(gridQuestionCommonComponent.tableCell().parent(), 9), {
+                        'background-color': css.color.defaultBackground,
+                        'border-color': `${css.color.matrixCellBorder}`
+                    });
+                    utilities.verifyCSS(utilities.getNthElement(gridQuestionCommonComponent.optionsButton, 0), {
+                        'background-color': css.color.matrixHeadingCellBg,
+                        'color': `${css.color.matrixCellBorder}`
+                    });
+                    utilities.verifyCSS(utilities.getNthElement(gridQuestionCommonComponent.optionsButton, 0).find('svg'), {
+                        'color': css.color.activeButtons
+                    });
+                    utilities.verifyCSS(utilities.getNthElement(gridQuestionCommonComponent.tableCell(), 1).find('.question-text-wrapper'), {
+                        'color': css.color.text,
+                        'font-size': css.fontSize.heading,
+                        'font-weight': css.fontWeight.bold
+                    });
+                    utilities.verifyCSS(utilities.getNthElement(gridQuestionCommonComponent.tableCell(), 6).find('.question-text-wrapper'), {
+                        'color': css.color.text,
+                        'font-size': css.fontSize.default,
+                        'font-weight': css.fontWeight.bold
+                    });
+                    utilities.verifyCSS(utilities.getNthElement(gridQuestionCommonComponent.tableCell(), 9).find('.question-text-wrapper'), {
+                        'color': css.color.text,
+                        'font-size': css.fontSize.default,
+                        'font-weight': css.fontWeight.regular
+                    });
+                });
+        });
+
+        it('Accessibility of \'Correct\' accordion contents', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(gridQuestionCommonComponent.tableCell().parents('.correct-answer-accordion'));
+        });
+    },
+
+    /**
+     * Verifies the contents of the 'Default options' dropdown
+     * @param {{'Multiple selection grid' | 'Single selection grid'}} questionType - The name of the question type to be used for validation.
+     * @example - verifyDefaultOptionLabelAndDropdown('Multiple selection grid');
+     */
+    verifyDefaultOptionLabelAndDropdown: (questionType) => {
+        const cellPropertyArray = (questionType === 'Multiple selection grid') ?
+            ['Checkboxes', 'Checkboxes with text', 'No checkboxes'] :
+            ['Radio buttons', 'Radio buttons with text', 'No radio buttons'];
+
+        it(`'Default option' label and dropdown should be displayed and in 'Default option' dropdown '${cellPropertyArray[0]}' option should be selected by default`, () => {
+            utilities.verifyInnerText(gridQuestionCommonComponent.defaultOptionLabel(), 'Default option');
+            utilities.verifyInnerText(gridQuestionCommonComponent.defaultOptionDropdown(), cellPropertyArray[0]);
+            utilities.verifyElementVisibilityState(gridQuestionCommonComponent.defaultOptionDropdown(), 'visible');
+        });
+
+        it(`Clicking on default option dropdown should open a list of default option types - ${cellPropertyArray}`, () => {
+            gridQuestionCommonComponent.steps.expandDefaultOptionDropdown()
+            utilities.verifyElementVisibilityState(gridQuestionCommonComponent.defaultOptionDropdownListOptions().eq(0), 'visible')
+            cellPropertyArray.forEach((option, count) => {
+                utilities.verifyInnerText(utilities.getNthElement(gridQuestionCommonComponent.defaultOptionDropdownListOptions(), count), option);
+            });
+        });
+
+        it('CSS of default option type dropdown in active state', { tags: 'css' }, () => {
+            utilities.verifyCSS(gridQuestionCommonComponent.defaultOptionDropdownListOptions().eq(0), {
+                'color': css.color.liText,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular,
+                'background-color': css.color.liTextSelectedBg
+            })
+            utilities.verifyCSS(gridQuestionCommonComponent.defaultOptionDropdownListOptions().eq(1), {
+                'background-color': css.color.transparent
+            });
+        });
+
+        it('Accessibility of default option type dropdown in active state', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(commonComponents.dropdownList())
+        });
+
+        it('On selecting an option from the default option dropdown, the dropdown should close', () => {
+            gridQuestionCommonComponent.steps.selectOptionFromDefaultOptionDropdown(cellPropertyArray[1]);
+            utilities.verifyElementVisibilityState(commonComponents.dropdownList(), 'notExist');
+        });
+
+        it('CSS of default option section', { tags: 'css' }, () => {
+            utilities.verifyCSS(gridQuestionCommonComponent.defaultOptionLabel(), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.semibold
+            });
+            utilities.verifyCSS(gridQuestionCommonComponent.defaultOptionDropdown().find('.dropdown-label-text'), {
+                'color': css.color.liText,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular
+            });
+        });
+    },
+
+    verifyDefaultTextLabelAndDropdown: () => {
+        const defaultTextDropdown = ['True / false', 'Yes / no', 'Agree / disagree', 'Custom'];
+        it(`\'Default text\' label and dropdown should be displayed and in \'Default text\' dropdown \'${defaultTextDropdown[0]}\' option should be selected by default`, () => {
+            utilities.verifyInnerText(gridQuestionCommonComponent.defaultTextLabel(), 'Default text');
+            utilities.verifyInnerText(gridQuestionCommonComponent.defaultTextDropdown(), defaultTextDropdown[0]);
+            utilities.verifyElementVisibilityState(gridQuestionCommonComponent.defaultTextDropdown(), 'visible');
+        });
+
+        it(`Clicking on default option dropdown should open a list of default option types - ${defaultTextDropdown}`, () => {
+            gridQuestionCommonComponent.steps.expandDefaultTextDropdown()
+            utilities.verifyElementVisibilityState(gridQuestionCommonComponent.defaultTextDropdownListOptions().eq(0), 'visible')
+            defaultTextDropdown.forEach((option, count) => {
+                utilities.verifyInnerText(utilities.getNthElement(gridQuestionCommonComponent.defaultTextDropdownListOptions(), count), option);
+            });
+        });
+
+        it('CSS of default text type dropdown in active state', { tags: 'css' }, () => {
+            utilities.verifyCSS(gridQuestionCommonComponent.defaultTextDropdownListOptions().eq(0), {
+                'color': css.color.liText,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular,
+                'background-color': css.color.liTextSelectedBg
+            })
+            utilities.verifyCSS(gridQuestionCommonComponent.defaultTextDropdownListOptions().eq(1), {
+                'background-color': css.color.transparent
+            });
+        });
+
+        it('Accessibility of default text type dropdown in active state', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(commonComponents.dropdownList())
+        });
+
+        it('On selecting an option from the default option dropdown, the dropdown should close', () => {
+            gridQuestionCommonComponent.steps.selectOptionFromDefaultTextDropdown(defaultTextDropdown[0]);
+            utilities.verifyElementVisibilityState(commonComponents.dropdownList(), 'notExist');
+        });
+
+        it('CSS of default option section', { tags: 'css' }, () => {
+            utilities.verifyCSS(gridQuestionCommonComponent.defaultTextLabel(), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.semibold
+            });
+            utilities.verifyCSS(gridQuestionCommonComponent.defaultTextDropdown().find('.dropdown-label-text'), {
+                'color': css.color.liText,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular
+            });
+        });
+    },
+
+    verifyHeaderRowCellPropertyMenu: () => {
+        const headerRowCellPropertyMenuOptions = ['Heading', 'Subheading', 'Text', 'None']
+        it(`When user expands cell property menu of header row cell, then ${headerRowCellPropertyMenuOptions.join('')} option should be displayed with the corresponding cell property displayed as active selection`, () => {
+            gridQuestionCommonComponent.steps.expandCellPropertyMenu({ row: 0, column: 0 });
+            headerRowCellPropertyMenuOptions.forEach((cellType, index) => {
+                utilities.verifyInnerText(utilities.getNthElement(gridQuestionCommonComponent.editCellPropertyListOption(), index), cellType);
+            });
+            gridQuestionCommonComponent.steps.verifyCellPropertyMenuOptionIsSelected(headerRowCellPropertyMenuOptions[3]);
+        });
+
+        it('CSS of cell property menu in active state', { tags: 'css' }, () => {
+            utilities.verifyCSS(gridQuestionCommonComponent.editCellPropertyButton().eq(5).find('g g'), {
+                'fill': css.color.primaryBtn
+            });
+            utilities.verifyCSS(gridQuestionCommonComponent.editCellPropertyButton().eq(0).find('g g'), {
+                'fill': css.color.selectToolbarOptionBg
+            });
+            utilities.verifyCSS(gridQuestionCommonComponent.editCellPropertyListOption().find('span[class*="MuiListItemText"]'), {
+                'color': css.color.liText,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular
+            });
+            utilities.verifyCSS(gridQuestionCommonComponent.editCellPropertyListOption().eq(0).find('span').eq(0), {
+                'fill': css.color.liText
+            });
+            utilities.verifyCSS(gridQuestionCommonComponent.editCellPropertyListOption().eq(1).find('span').eq(0), {
+                'fill': css.color.liText
+            });
+            utilities.verifyCSS(gridQuestionCommonComponent.editCellPropertyListOption().eq(2).find('span').eq(0), {
+                'fill': css.color.liText
+            });
+            utilities.verifyCSS(gridQuestionCommonComponent.editCellPropertyListOption().eq(3).find('span').eq(0), {
+                'fill': css.color.liText
+            });
+            utilities.verifyCSS(gridQuestionCommonComponent.editCellPropertyListOption().eq(0), {
+                'background-color': css.color.defaultBackground
+            });
+            utilities.verifyCSS(gridQuestionCommonComponent.editCellPropertyListOption().eq(3), {
+                'background-color': css.color.liTextSelectedBg
+            });
+        });
+
+        it('Accessibility of cell property menu in active state', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(gridQuestionCommonComponent.editCellPropertyList())
+        });
+
+        it('On selecting an option from the default option dropdown, the dropdown should close', () => {
+            gridQuestionCommonComponent.editCellPropertyListOption()
+                .contains('None', { matchCase: false })
+                .click();
+            utilities.verifyElementVisibilityState(gridQuestionCommonComponent.editCellPropertyList(), 'notExist');
+        });
+
+        headerRowCellPropertyMenuOptions.forEach((cellType) => {
+            it(`When user selects ${cellType} option from the cell property menu, the table cell should be set to ${cellType}`, () => {
+                gridQuestionCommonComponent.steps.modifyTableCellProperty({ row: 0, column: 0 }, cellType);
+                gridQuestionCommonComponent.steps.verifyEditCellCategoryTableCellProperty({ row: 0, column: 0 }, cellType);
+            });
+        });
+    },
+
+    verifyFirstColumnCellPropertyMenu: () => {
+        const firstColumnCellPropertyMenuOptions = ['Heading', 'Subheading', 'Text']
+        it(`When user expands cell property menu of first column cell, then ${firstColumnCellPropertyMenuOptions.join('')} option should be displayed with the corresponding cell property displayed as active selection`, () => {
+            gridQuestionCommonComponent.steps.expandCellPropertyMenu({ row: 1, column: 0 });
+            firstColumnCellPropertyMenuOptions.forEach((cellType, index) => {
+                utilities.verifyInnerText(utilities.getNthElement(gridQuestionCommonComponent.editCellPropertyListOption(), index), cellType);
+            });
+            gridQuestionCommonComponent.steps.verifyCellPropertyMenuOptionIsSelected(firstColumnCellPropertyMenuOptions[2]);
+        });
+
+        it('CSS of cell property menu in active state', { tags: 'css' }, () => {
+            utilities.verifyCSS(gridQuestionCommonComponent.editCellPropertyButton().eq(5).find('g g'), {
+                'fill': css.color.primaryBtn
+            });
+            utilities.verifyCSS(gridQuestionCommonComponent.editCellPropertyButton().eq(3).find('g g'), {
+                'fill': css.color.selectToolbarOptionBg
+            });
+            utilities.verifyCSS(gridQuestionCommonComponent.editCellPropertyListOption().find('span[class*="MuiListItemText"]'), {
+                'color': css.color.liText,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular
+            });
+            utilities.verifyCSS(gridQuestionCommonComponent.editCellPropertyListOption().eq(0).find('span').eq(0), {
+                'fill': css.color.liText
+            });
+            utilities.verifyCSS(gridQuestionCommonComponent.editCellPropertyListOption().eq(1).find('span').eq(0), {
+                'fill': css.color.liText
+            });
+            utilities.verifyCSS(gridQuestionCommonComponent.editCellPropertyListOption().eq(2).find('span').eq(0), {
+                'fill': css.color.liText
+            });
+            utilities.verifyCSS(gridQuestionCommonComponent.editCellPropertyListOption().eq(3).find('span').eq(0), {
+                'fill': css.color.liText
+            });
+            utilities.verifyCSS(gridQuestionCommonComponent.editCellPropertyListOption().eq(0), {
+                'background-color': css.color.defaultBackground
+            });
+            utilities.verifyCSS(gridQuestionCommonComponent.editCellPropertyListOption().eq(2), {
+                'background-color': css.color.liTextSelectedBg
+            });
+        });
+
+        it('Accessibility of cell property menu in active state', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(gridQuestionCommonComponent.editCellPropertyList())
+        });
+
+        it('On selecting an option from the default option dropdown, the dropdown should close', () => {
+            gridQuestionCommonComponent.editCellPropertyListOption()
+                .contains('Heading', { matchCase: false })
+                .click();
+            utilities.verifyElementVisibilityState(gridQuestionCommonComponent.editCellPropertyList(), 'notExist');
+        });
+
+        firstColumnCellPropertyMenuOptions.forEach((cellType) => {
+            it(`When user selects ${cellType} option from the cell property menu, the table cell should be set to ${cellType}`, () => {
+                gridQuestionCommonComponent.steps.modifyTableCellProperty({ row: 1, column: 0 }, cellType);
+                gridQuestionCommonComponent.steps.verifyEditCellCategoryTableCellProperty({ row: 1, column: 0 }, cellType);
+            });
+        });
+    },
 }
 
 export const gridQuestionCommonComponent = {