itemengine-cypress-automation 1.0.78 → 1.0.80

package/cypress/e2e/ILC/MultipleSelectionGrid/multipleSelectionGridEditTabBasicSection.js

@@ -1,588 +0,0 @@
-import abortEarlySetup from "../../../support/helpers/abortEarly";
-const css = Cypress.env('css');
-import { multipleSelectionGridPage } from "../../../pages/multipleSelectionGridPage";
-
-const questionStems = ['Pollution caused by treating chemical waste', 'Pollution caused by cement production', 'Pollution caused by methane production', 'Pollution caused by cement and methane production'];
-const options = ['True', 'False'];
-const optionsFotNextAndPreviousButton = ['Fully agree as true', 'Fully agree as false', 'Somewhat agree', 'Somewhat disagree', 'Not sure', 'None of these'];
-
-describe('Create Item page - Multiple Selection Grid: Question Instructions, Question stem, Options, Set Correct Answer, alternative correct answer, Shuffle option order sections', () => {
-    before(() => {
-        cy.loginAs('admin');
-    });
-
-    describe('Question Instructions input field - Edit tab', () => {
-        abortEarlySetup();
-        before(() => {
-            cy.log('Navigating to Multiple selection grid question type');
-            multipleSelectionGridPage.steps.navigateToCreateQuestion('multiple selection grid');
-        });
-
-        multipleSelectionGridPage.tests.verifyQuestionInstructionsInputFieldEditTab();
-    });
-
-    describe('Question Instructions input field - Preview tab', () => {
-        abortEarlySetup();
-        before(() => {
-            cy.log('Navigating to Multiple selection grid question type');
-            multipleSelectionGridPage.steps.navigateToCreateQuestion('multiple selection grid');
-        });
-
-        multipleSelectionGridPage.tests.verifyQuestionInstructionsInputFieldPreviewTab();
-    });
-
-    describe('Question stem - Edit tab section contents', () => {
-        abortEarlySetup();
-        before(() => {
-            cy.log('Navigating to Multiple selection grid question type');
-            multipleSelectionGridPage.steps.navigateToCreateQuestion('multiple selection grid');
-        });
-
-        it('\'Question stems\' label should be displayed', () => {
-            multipleSelectionGridPage.questionStemLabel()
-                .verifyInnerText('Question stems');
-        });
-
-        it('By default, 4 \'Question stems\' input fields should be displayed with placeholder text and numeration, Drag handle and Delete option icon buttons should be displayed besides each input field', () => {
-            for (let index = 0; index < 4; index++) {
-                multipleSelectionGridPage.steps.verifyQuestionStemContents(index)
-            }
-            multipleSelectionGridPage.steps.verifyCountOfQuestionStemInputFields(4)
-        });
-
-        multipleSelectionGridPage.tests.verifyCSSOfQuestionStemContents();
-
-        it('On hovering over the drag handle of the question stem, \'Drag to reorder\' message should be displayed on a tooltip and the tooltip should disappear if focus is removed from the drag handle', () => {
-            multipleSelectionGridPage.steps.verifyDragHandleTooltipForQuestionStem();
-        });
-
-        it('When the user hovers over the enabled \'Delete\' icon buttons then, \'Delete stem\' message should be displayed on a tooltip and the tooltip should disappear if focus is removed from the \'Delete\' icon button', () => {
-            multipleSelectionGridPage.steps.verifyDeleteButtonTooltipForQuestionStem();
-        });
-
-        it('When user clicks on the \'Delete\' question stem button then the respective options input field should get deleted, option numeration should change accordingly', () => {
-            multipleSelectionGridPage.steps.deleteQuestionStem(0);
-            for (let index = 0; index < 3; index++) {
-                multipleSelectionGridPage.steps.verifyQuestionStemContents(index)
-            }
-            multipleSelectionGridPage.steps.verifyCountOfQuestionStemInputFields(3)
-        });
-
-        it('When number of question stem is equal to 1, then the Delete option icon buttons should be displayed in disabled state', () => {
-            multipleSelectionGridPage.steps.deleteQuestionStem(0);
-            multipleSelectionGridPage.steps.deleteQuestionStem(0);
-            multipleSelectionGridPage.steps.verifyQuestionStemDisabledDeleteButton(0);
-        });
-
-        it('When the user hovers over the disabled \'Delete\' icon buttons then, \'Minimum one stem is required\' message should be displayed on a tooltip and the tooltip should disappear if focus is removed from the \'Delete\' icon button', () => {
-            multipleSelectionGridPage.steps.verifyDisabledDeleteButtonTooltipForQuestionStem();
-        });
-
-        it('\'Add stem\' button should be present', () => {
-            multipleSelectionGridPage.steps.verifyAddQuestionStemLabel();
-        });
-
-        it('When user adds a question stem using the \'Add stem\' button then added stem should be displayed with drag handle, placeholder text, option numeration and delete button', () => {
-            multipleSelectionGridPage.steps.addQuestionStem()
-            multipleSelectionGridPage.steps.verifyQuestionStemContents(1)
-            multipleSelectionGridPage.steps.focusInAndFocusOutOfQuestionStemInputField(1)
-        });
-
-        multipleSelectionGridPage.tests.verifyCSSOfAddedStemInSetCorrectAnswerTable();
-
-        it('When user focus in and out of any of the \'Question stem\' input field without typing anything, an error message should be thrown', () => {
-            multipleSelectionGridPage.steps.focusInAndFocusOutOfQuestionStemInputField(0);
-            multipleSelectionGridPage.steps.verifyQuestionStemErrorMessageIsDisplayed(0);
-        });
-
-        multipleSelectionGridPage.tests.verifyCSSAnda11yQuestionStemErrorMessage()
-
-        it('When user enters text in question stem input field the \'Error: Question stem is required.\' error message should disappear', () => {
-            multipleSelectionGridPage.steps.addInputToQuestionStemField(0, questionStems[0]);
-            multipleSelectionGridPage.steps.verifyQuestionStemErrorMessageIsNotDisplayed(0);
-        });
-    });
-
-    describe('Question stem - Set correct answer section', () => {
-        abortEarlySetup();
-        before(() => {
-            cy.log('Navigating to Multiple selection grid question type');
-            multipleSelectionGridPage.steps.navigateToCreateQuestion('multiple selection grid');
-            cy.barsPreLoaderWait();
-        });
-
-        it('When the Question stem input fields are empty then \'No question stem added\' should be displayed in the \'Set Correct Answer\' section table', () => {
-            multipleSelectionGridPage.setCorrectAnswerTableNoQuestionStemAddedLabel()
-                .verifyInnerText('No question stem added');
-        });
-
-        it('CSS of No question stem added in set correct answer table', { tags: 'css' }, () => {
-            multipleSelectionGridPage.setCorrectAnswerTableNoQuestionStemAddedLabel()
-                .find('.question-text-wrapper')
-                .verifyCSS(css.color.helperText, css.fontSize.default, css.fontWeight.regular)
-                .should('have.css', 'font-style', 'italic');
-        });
-
-        it('When user clicks on the \'Delete\' question stem button then deleted stem should not be displayed in the \'Set Correct Answer\' section table', () => {
-            multipleSelectionGridPage.steps.deleteQuestionStem(0);
-            multipleSelectionGridPage.steps.verifyTableRowDoesNotExistInSetCorrectAnswerTable(3)
-        });
-
-        it('When user adds a question stem using the \'Add stem\' button then added stem should be displayed in the \'Set Correct Answer\' section table', () => {
-            multipleSelectionGridPage.steps.addQuestionStem()
-            multipleSelectionGridPage.steps.verifyTableRowCheckboxesInSetCorrectAnswerTable(3, 2);
-        });
-
-        it('When user adds text to all the question stem input field, the added text should be displayed in the set correct answer section table under the Question stem column', () => {
-            multipleSelectionGridPage.steps.addInputToAllQuestionStemFields(questionStems);
-            multipleSelectionGridPage.steps.verifyQuestionStemsInSetCorrectAnswerTable(questionStems);
-        });
-
-        it('CSS of \'Set Correct Answer\' section table', { tags: 'css' }, () => {
-            multipleSelectionGridPage.setCorrectAnswerTableQuestionStemTitle()
-                .verifyCSS(css.color.text, css.fontSize.default, css.fontWeight.semibold);
-            multipleSelectionGridPage.setCorrectAnswertableQuestionStem()
-                .eq(0)
-                .verifyCSS(css.color.text, css.fontSize.default, css.fontWeight.regular);
-            multipleSelectionGridPage.optionsCheckbox()
-                .eq(0)
-                .parent('span')
-                .find('svg')
-                .should('have.css', 'fill', css.color.uncheckedCheckbox)
-                .and('have.css', 'font-size', css.fontSize.normal)
-                .and('have.css', 'font-weight', css.fontWeight.regular);
-            multipleSelectionGridPage.setCorrectAnswerTable()
-                .should('have.css', 'border', `1px solid ${css.color.defaultDropdownBorder}`)
-        });
-
-        //Note a11y covered in header section file
-    });
-
-    describe('Question stem - Preview tab section', () => {
-        abortEarlySetup();
-        before(() => {
-            cy.log('Navigating to Multiple selection grid question type');
-            multipleSelectionGridPage.steps.navigateToCreateQuestion('multiple selection grid');
-            cy.barsPreLoaderWait();
-            cy.log('Switching to Preview tab')
-            multipleSelectionGridPage.steps.switchToPreviewTab();
-        });
-
-        it('When the the Question stem input field is empty then \'No question stem added\' should be displayed in the Preview tab table', () => {
-            multipleSelectionGridPage.previewTabAnswerTableNoQuestionStemAddedLabel()
-                .verifyInnerText('No question stem added');
-        });
-
-        it('CSS of No question stem added in Preview tab answer table', { tags: 'css' }, () => {
-            multipleSelectionGridPage.previewTabAnswerTableNoQuestionStemAddedLabel()
-                .find('.question-text-wrapper')
-                .verifyCSS(css.color.helperText, css.fontSize.default, css.fontWeight.regular)
-                .should('have.css', 'font-style', 'italic');
-        });
-
-        //TODO: need to look for a solution for the below case if bug does not get resolved, a11y fails here due to duplicate id in the table rows, https://redmine.zeuslearning.com/issues/531398
-        it('Accessibility of No question stem added in Preview tab answer table', { tags: 'a11y' }, () => {
-            cy.checkAccessibility(multipleSelectionGridPage.previewTabAnswerTableNoQuestionStemAddedLabel());
-        });
-
-        it('When user deletes a question stem then the deleted stem should not be displayed in the \'Preview\' tab table', () => {
-            cy.log('Switching to Edit tab')
-            multipleSelectionGridPage.steps.switchToEditTab();
-            multipleSelectionGridPage.steps.deleteQuestionStem(0);
-            cy.log('Switching to Preview tab')
-            multipleSelectionGridPage.steps.switchToPreviewTab();
-            multipleSelectionGridPage.steps.verifyTableRowDoesNotExistInPreviewTabAnswerTable(3);
-        });
-
-        it('When user adds a question stem using the \'Add stem\' button then added stem should be displayed in the \'Preview\' tab table', () => {
-            cy.log('Switching to Edit tab')
-            multipleSelectionGridPage.steps.switchToEditTab();
-            multipleSelectionGridPage.steps.addQuestionStem()
-            cy.log('Switching to Preview tab')
-            multipleSelectionGridPage.steps.switchToPreviewTab();
-            multipleSelectionGridPage.steps.verifyTableRowCheckboxesInPreviewTabAnswerTable(3, 2)
-        });
-
-        multipleSelectionGridPage.tests.verifyCSSOfPreviewTabAnswerTable()
-
-        it('When user adds text to all the question stem input field, the added text should be displayed in the Preview tab table under the Question stem column', () => {
-            cy.log('Switching to Edit tab')
-            multipleSelectionGridPage.steps.switchToEditTab();
-            multipleSelectionGridPage.steps.addInputToAllQuestionStemFields(questionStems)
-            cy.log('Switching to Preview tab')
-            multipleSelectionGridPage.steps.switchToPreviewTab();
-            multipleSelectionGridPage.steps.verifyQuestionStemsInPreviewTabAnswerTable(questionStems);
-        });
-
-        it('CSS of \'Preview\' tab table', { tags: 'css' }, () => {
-            multipleSelectionGridPage.previewTabAnswertableQuestionStem()
-                .eq(0)
-                .verifyCSS(css.color.text, css.fontSize.default, css.fontWeight.regular);
-            multipleSelectionGridPage.previewTabAnswerTable()
-                .should('have.css', 'border', `1px solid ${css.color.defaultDropdownBorder}`)
-                .within(() => {
-                    multipleSelectionGridPage.optionsCheckbox()
-                        .eq(0)
-                        .parent('span')
-                        .find('svg')
-                        .should('have.css', 'fill', css.color.uncheckedCheckbox)
-                        .and('have.css', 'font-size', css.fontSize.normal)
-                        .and('have.css', 'font-weight', css.fontWeight.regular);
-                });
-        });
-
-        //Failing due to https://redmine.zeuslearning.com/issues/529953
-        it('Accessibility of \'Preview\' tab table', { tags: 'a11y' }, () => {
-            cy.log('Pre step: Switching to edit tab and adding input to options input field')
-            multipleSelectionGridPage.steps.switchToEditTab();
-            multipleSelectionGridPage.steps.addInputToAllOptionsFields(options)
-            cy.log('Swicthing to preview tab')
-            multipleSelectionGridPage.steps.switchToPreviewTab();
-            cy.checkAccessibility(multipleSelectionGridPage.previewTabAnswerTable());
-        });
-    });
-
-    describe('Options section - Edit tab section contents', () => {
-        abortEarlySetup();
-        before(() => {
-            cy.log('Navigating to Multiple selection grid question type');
-            multipleSelectionGridPage.steps.navigateToCreateQuestion('multiple selection grid');
-            cy.barsPreLoaderWait();
-        });
-
-        it('\'Options\' label should be displayed', () => {
-            multipleSelectionGridPage.steps.verifyOptionsLabel();
-        });
-
-        it('By default, 2 \'Options\' input fields should be displayed with placeholder text and Drag handle and Delete option icon buttons should be displayed in disabled state besides each input field', () => {
-            for (let index = 0; index < 2; index++) {
-                multipleSelectionGridPage.steps.verifyOptionsContents(index)
-                multipleSelectionGridPage.steps.verifyOptionsDeleteButtonDisabled(index);
-            }
-            multipleSelectionGridPage.steps.verifyCountOfOptionsInputField(2)
-        });
-
-        it('When user hovers over the disabled \'Delete\' icon buttons of the options then \'Minimum two options are required\' message should be displayed on a tooltip and the tooltip should disappear if focus is removed from the \'Delete\' icon button', () => {
-            multipleSelectionGridPage.steps.verifyDisabledDeleteButtonTooltipForOption();
-        });
-
-        it('When user hovers over the drag handle of the options then \'Drag to reorder\' message should be displayed on a tooltip and the tooltip should disappear if focus is removed from the drag handle', () => {
-            multipleSelectionGridPage.steps.verifyDragHandleTooltipForOption();
-        });
-
-        multipleSelectionGridPage.tests.verifyCSSOfOptionsContents()
-
-        it('Accessibility of Options section', { tags: 'a11y' }, () => {
-            cy.checkAccessibility(multipleSelectionGridPage.optionWrapper().parents('.edit-mcq-options-wrapper'));
-        });
-
-        it('\'Add Option\' button should be present', () => {
-            multipleSelectionGridPage.steps.verifyAddOptionsButton()
-        });
-
-        it('When user adds an option using \'Add Option\' button then the added option input field should be displayed, option numeration should increment', () => {
-            multipleSelectionGridPage.steps.addOption();
-            multipleSelectionGridPage.steps.verifyOptionsContents(2);
-        });
-
-        it('When the number of options are greater than 2 then the \'Delete\' icon buttons should get enabled', () => {
-            for (let index = 0; index < 3; index++) {
-                multipleSelectionGridPage.steps.verifyOptionsDeleteButtonEnabled(index);
-            }
-        });
-
-        it('When the user hovers over the enabled \'Delete\' icon buttons then, \'Delete option\' message should be displayed on a tooltip and the tooltip should disappear if focus is removed from the \'Delete\' icon button', () => {
-            multipleSelectionGridPage.steps.verifyDeleteButtonTooltipForOption();
-        });
-
-        multipleSelectionGridPage.tests.verifyCSSAnda11yOfEnabledDeleteButton()
-
-        it('When user clicks on the \'Delete\' option button then the respective options input field should get deleted, option numeration should change accordingly', () => {
-            multipleSelectionGridPage.steps.deleteOption(1);
-            for (let index = 0; index < 2; index++) {
-                multipleSelectionGridPage.steps.verifyOptionsContents(index)
-            }
-            multipleSelectionGridPage.steps.verifyCountOfOptionsInputField(2)
-        });
-
-        it('When number of options are less than 3, the Delete option icon buttons should be displayed in disabled state', () => {
-            for (let index = 0; index < 2; index++) {
-                multipleSelectionGridPage.steps.verifyOptionsDeleteButtonDisabled(index);
-            }
-        });
-
-        it('When user focus in and out of any of the \'Options\' input field without typing anything, an error message should be thrown', () => {
-            multipleSelectionGridPage.steps.focusInAndFocusOutOfOptionsInputField(0)
-            multipleSelectionGridPage.steps.verifyOptionsErrorMessageIsDisplayed(0)
-        });
-
-        multipleSelectionGridPage.tests.verifyCSSAnda11yOfOptionsErrorMessage();
-
-        it('When user enters text in options input field then the error message \'Error: Option is required.\' should disappear', () => {
-            multipleSelectionGridPage.steps.addInputToOptionField(0, options[0]);
-            multipleSelectionGridPage.steps.verifyOptionsErrorMessageIsNotDisplayed(0);
-        });
-    });
-
-    describe('Options section - Set correct answer section', () => {
-        abortEarlySetup();
-        before(() => {
-            cy.log('Navigating to Multiple selection grid question type');
-            multipleSelectionGridPage.steps.navigateToCreateQuestion('multiple selection grid')
-            cy.barsPreLoaderWait();
-        });
-
-        it('When the Options input field is empty then nothing should be displayed in the first row of the set correct answer table', () => {
-            for (let index = 0; index < 2; index++) {
-                multipleSelectionGridPage.steps.verifyEmptyTableHeaderInSetCorrectAnswerTable(index)
-            }
-        });
-
-        it('When user adds an option using \'Add Option\' button then the a new column should be added in the Set correct answer section table with checkboxes', () => {
-            multipleSelectionGridPage.steps.addOption();
-            multipleSelectionGridPage.steps.verifyTableRowCheckboxesInSetCorrectAnswerTable(0, 3);
-        });
-
-        it('When user clicks on the \'Delete\' option button then a row should be deleted from the Set correct answer section table', () => {
-            multipleSelectionGridPage.steps.deleteOption(1);
-            multipleSelectionGridPage.steps.verifyTableHeaderDoesNotExistInSetCorrectAnswerTable(2)
-        });
-
-        it('When user enters text in all the options input fields then the entered text should be displayed in the Set correct answer section table', () => {
-            multipleSelectionGridPage.steps.addInputToAllOptionsFields(options);
-            multipleSelectionGridPage.steps.verifyTableHeaderContentsInSetCorrectAnswerTable(options);
-        });
-
-        multipleSelectionGridPage.tests.verifyCSSOfHeaderTextInSetCorrectAnswerTable()
-
-        it(`When user selects Inline option from the \'Grid style\' dropdown then the options should be displayed inline with the question stem and and table header should be empty in set correct answer table`, () => {
-            multipleSelectionGridPage.steps.expandAdditonalSettings()
-            multipleSelectionGridPage.steps.selectGridStyleDropdownOption('Inline')
-            for (let index = 0; index < 2; index++) {
-                multipleSelectionGridPage.steps.verifyEmptyTableHeaderInSetCorrectAnswerTable(index);
-                multipleSelectionGridPage.steps.verifyInlineOptionsTextContentInSetCorrectAnswerTable(index, options[index]);
-            }
-            multipleSelectionGridPage.steps.verifyTableRowCheckboxesInSetCorrectAnswerTable(0, 2);
-            cy.log('Post step: Selecting the default option in \'Grid style\' dropdown')
-            multipleSelectionGridPage.steps.selectGridStyleDropdownOption('Row dividers')
-        });
-
-        it('When user adds more number of options such that the options do not fit in the set correct answer section width then \'Next button\' and \'Previous button\' should be displayed', () => {
-            for (let i = 0; i < 5; i++) {
-                multipleSelectionGridPage.steps.addOption();
-                multipleSelectionGridPage.steps.addInputToOptionField(i + 2, optionsFotNextAndPreviousButton[i]);
-            }
-            multipleSelectionGridPage.previousButton()
-                .should('exist');
-            multipleSelectionGridPage.nextButton()
-                .should('exist');
-        });
-
-        it('By default, the \'Previous button\' should be disabled and \'Next button\' should be enabled as user is at the beginning of the tablist', () => {
-            multipleSelectionGridPage.previousButton()
-                .and('be.disabled');
-            multipleSelectionGridPage.nextButton()
-                .and('be.enabled');
-        });
-
-        it('CSS of enabled \'Next button\' and disabled \'Previous button\'', { tags: 'css' }, () => {
-            multipleSelectionGridPage.previousButton()
-                .should('have.css', 'opacity', '0.5')
-                .verifyPseudoClassBeforeProperty('color', css.color.secondaryBtn);
-            multipleSelectionGridPage.nextButton()
-                .verifyPseudoClassBeforeProperty('color', css.color.secondaryBtn);
-        });
-
-        it('Accessbility of enabled \'Next button\' and disabled \'Previous button\'', { tags: 'a11y' }, () => {
-            cy.checkAccessibility(multipleSelectionGridPage.nextButton())
-            cy.checkAccessibility(multipleSelectionGridPage.previousButton())
-        });
-
-        it('When user clicks on the \'Next button\', the \'Previous button\' and the \'Next button\' both should get enabled, When the user reaches end of the tablist the \'Next button\' should get disabled and \'Previous button\' should remain enabled', () => {
-            multipleSelectionGridPage.steps.navigateForwardUsingNextButton();
-            multipleSelectionGridPage.previousButton()
-                .and('be.enabled');
-            multipleSelectionGridPage.nextButton()
-                .and('be.enabled');
-            multipleSelectionGridPage.steps.navigateForwardUsingNextButton();
-            multipleSelectionGridPage.previousButton()
-                .and('be.enabled');
-            multipleSelectionGridPage.nextButton()
-                .and('be.disabled');
-        });
-
-        it('CSS of disabled \'Next button\' and enabled \'Previous button\'', { tags: 'css' }, () => {
-            multipleSelectionGridPage.nextButton()
-                .should('have.css', 'opacity', '0.5')
-                .verifyPseudoClassBeforeProperty('color', css.color.secondaryBtn);
-            multipleSelectionGridPage.previousButton()
-                .verifyPseudoClassBeforeProperty('color', css.color.secondaryBtn);
-        });
-
-        it('Accessbility of disabled \'Next button\' and enabled \'Previous button\'', { tags: 'a11y' }, () => {
-            cy.checkAccessibility(multipleSelectionGridPage.nextButton())
-            cy.checkAccessibility(multipleSelectionGridPage.previousButton())
-        });
-
-        it('When user clicks on the \'Previous button\', and reaches the beginning of the tablist \'Previous button\' should become disabled and \'Next button\' should become enabled', () => {
-            multipleSelectionGridPage.steps.navigateBackwardUsingPreviousButton();
-            multipleSelectionGridPage.steps.navigateBackwardUsingPreviousButton();
-            multipleSelectionGridPage.previousButton()
-                .and('be.disabled');
-            multipleSelectionGridPage.nextButton()
-                .and('be.enabled');
-        });
-
-        it('When user deletes more number of options such that the options now fit in the set correct answer section width then \'Next button\' and \'Previous button\' should not be displayed', () => {
-            multipleSelectionGridPage.steps.deleteOption(0)
-            multipleSelectionGridPage.steps.deleteOption(0)
-            multipleSelectionGridPage.previousButton()
-                .should('not.exist');
-            multipleSelectionGridPage.nextButton()
-                .should('not.exist');
-        });
-    });
-
-    describe('Options section - Preview tab section', () => {
-        abortEarlySetup();
-        before(() => {
-            cy.log('Navigating to Multiple selection grid question type');
-            multipleSelectionGridPage.steps.navigateToCreateQuestion('multiple selection grid');
-            cy.barsPreLoaderWait();
-            cy.log('Switching to Preview tab')
-            multipleSelectionGridPage.steps.switchToPreviewTab()
-        });
-
-        it('When the Options input field is empty then nothing should be displayed in the first row of the Preview tab table', () => {
-            for (let index = 0; index < 2; index++) {
-                multipleSelectionGridPage.steps.verifyEmptyTableHeaderInPreviewTabAnswerTable(index)
-            }
-        });
-
-        it('When user adds an option using the \'Add option\' button then added option should be displayed in the \'Preview\' tab table', () => {
-            cy.log('Switching to Edit tab')
-            multipleSelectionGridPage.steps.switchToEditTab()
-            multipleSelectionGridPage.steps.addOption();
-            cy.log('Switching to Preview tab')
-            multipleSelectionGridPage.steps.switchToPreviewTab()
-            multipleSelectionGridPage.steps.verifyTableRowCheckboxesInPreviewTabAnswerTable(0, 3);
-        });
-
-        it('When user deletes an option then the deleted option should not be displayed in the \'Preview\' tab table', () => {
-            cy.log('Switching to Edit tab')
-            multipleSelectionGridPage.steps.switchToEditTab();
-            multipleSelectionGridPage.steps.deleteOption(0);
-            cy.log('Switching to Preview tab')
-            multipleSelectionGridPage.steps.switchToPreviewTab();
-            multipleSelectionGridPage.steps.verifyColumnHeaderDoesNotExistInPreviewTabAnswerTable(2)
-        });
-
-        it('When user adds text to all the options input field, the added text should be displayed in the first row of the Preview tab table', () => {
-            cy.log('Switching to Edit tab')
-            multipleSelectionGridPage.steps.switchToEditTab();
-            multipleSelectionGridPage.steps.addInputToAllOptionsFields(options);
-            cy.log('Switching to Preview tab')
-            multipleSelectionGridPage.steps.switchToPreviewTab();
-            multipleSelectionGridPage.steps.verifyTableHeaderContentsInPreviewTabAnswerTable(options);
-        });
-
-        multipleSelectionGridPage.tests.verifyCSSOfHeaderTextInPreviewTabAnswerTable()
-
-        it('When user selects Inline option from the \'Grid style\' dropdown then the options should be displayed inline with the question stem and table header should be empty in the preview tab', () => {
-            multipleSelectionGridPage.steps.switchToEditTab()
-            multipleSelectionGridPage.steps.expandAdditonalSettings()
-            multipleSelectionGridPage.steps.selectGridStyleDropdownOption('Inline');
-            multipleSelectionGridPage.steps.switchToPreviewTab();
-            for (let index = 0; index < 2; index++) {
-                multipleSelectionGridPage.steps.verifyEmptyTableHeaderInPreviewTabAnswerTable(index)
-                multipleSelectionGridPage.steps.verifyInlineOptionsTextContentInPreviewTabAnswerTable(index, options[index]);
-            }
-            multipleSelectionGridPage.steps.verifyTableRowCheckboxesInPreviewTabAnswerTable(0, 2);
-            cy.log('Switching to Edit tab')
-            multipleSelectionGridPage.steps.switchToEditTab();
-            cy.log('Post step: Selecting the default option in \'Grid style\' dropdown')
-            multipleSelectionGridPage.steps.selectGridStyleDropdownOption('Row dividers')
-        });
-
-        it('When user adds more number of options such that the options do not fit in the preview tab width then \'Next button\' and \'Previous button\' should be displayed', () => {
-            for (let i = 0; i < 5; i++) {
-                multipleSelectionGridPage.steps.addOption();
-                multipleSelectionGridPage.steps.addInputToOptionField(i + 2, optionsFotNextAndPreviousButton[i]);
-            }
-            cy.log('Switching to Preview tab')
-            multipleSelectionGridPage.steps.switchToPreviewTab();
-            multipleSelectionGridPage.previousButton()
-                .should('exist');
-            multipleSelectionGridPage.nextButton()
-                .should('exist');
-        });
-
-        it('By default, the \'Previous button\' should be disabled and \'Next button\' should be enabled as user is at the beginning of the tablist', () => {
-            multipleSelectionGridPage.previousButton()
-                .and('be.disabled');
-            multipleSelectionGridPage.nextButton()
-                .and('be.enabled');
-        });
-
-        it('CSS of enabled \'Next button\' and disabled \'Previous button\'', { tags: 'css' }, () => {
-            multipleSelectionGridPage.previousButton()
-                .should('have.css', 'opacity', '0.5')
-                .verifyPseudoClassBeforeProperty('color', css.color.secondaryBtn);
-            multipleSelectionGridPage.nextButton()
-                .verifyPseudoClassBeforeProperty('color', css.color.secondaryBtn);
-        });
-
-        it('Accessibility of enabled \'Next button\' and disabled \'Previous button\'', { tags: 'a11y' }, () => {
-            cy.checkAccessibility(multipleSelectionGridPage.nextButton())
-            cy.checkAccessibility(multipleSelectionGridPage.previousButton())
-        });
-
-        it('When user clicks on the \'Next button\', the \'Previous button\' and the \'Next button\' both should get enabled, When the user reaches end of the tablist the \'Next button\' should get disabled and \'Previous button\' should remain enabled', () => {
-            multipleSelectionGridPage.steps.navigateForwardUsingNextButton();
-            multipleSelectionGridPage.previousButton()
-                .and('be.enabled');
-            multipleSelectionGridPage.nextButton()
-                .and('be.enabled');
-            multipleSelectionGridPage.steps.navigateForwardUsingNextButton();
-            multipleSelectionGridPage.previousButton()
-                .and('be.enabled');
-            multipleSelectionGridPage.nextButton()
-                .and('be.disabled');
-        });
-
-        it('CSS of disabled \'Next button\' and enabled \'Previous button\'', { tags: 'css' }, () => {
-            multipleSelectionGridPage.nextButton()
-                .should('have.css', 'opacity', '0.5')
-                .verifyPseudoClassBeforeProperty('color', css.color.secondaryBtn);
-            multipleSelectionGridPage.previousButton()
-                .verifyPseudoClassBeforeProperty('color', css.color.secondaryBtn);
-        });
-
-        it('Accessibility of enabled \'Next button\' and disabled \'Previous button\'', { tags: 'a11y' }, () => {
-            cy.checkAccessibility(multipleSelectionGridPage.nextButton())
-            cy.checkAccessibility(multipleSelectionGridPage.previousButton())
-        });
-
-        it('When user clicks on the \'Previous button\', and reaches the beginning of the tablist \'Previous button\' should become disabled and \'Next button\' should become enabled', () => {
-            multipleSelectionGridPage.steps.navigateBackwardUsingPreviousButton();
-            multipleSelectionGridPage.steps.navigateBackwardUsingPreviousButton();
-            multipleSelectionGridPage.previousButton()
-                .and('be.disabled');
-            multipleSelectionGridPage.nextButton()
-                .and('be.enabled');
-        });
-
-        it('When user deletes more number of options such that the options now fit in the preview tab section width then \'Next button\' and \'Previous button\' should not be displayed', () => {
-            cy.log('Switching to Edit tab')
-            multipleSelectionGridPage.steps.switchToEditTab();
-            multipleSelectionGridPage.steps.deleteOption(0)
-            multipleSelectionGridPage.steps.deleteOption(0)
-            cy.log('Switching to Preview tab')
-            multipleSelectionGridPage.steps.switchToPreviewTab();
-            multipleSelectionGridPage.previousButton()
-                .should('not.exist');
-            multipleSelectionGridPage.nextButton()
-                .should('not.exist');
-        });
-    });
-});