itemengine-cypress-automation 1.0.78 → 1.0.79

package/cypress/pages/components/index.js

@@ -2,29 +2,20 @@ export * from './createQuestionBasePage';
 export * from './commonComponents';
 export * from './additionalSettingsPanel';
 export * from './mcqAdditionalSettingsBase';
-export * from './mcqOptionsComponent';
-export * from './mcqPreviewComponents';
 export * from './questionInstructionsComponent';
-export * from './mcqSetCorrectAnswerSection';
 export * from './ckEditorToolbar';
 export * from './autoScoredPreviewBase';
 export * from './scoringSectionBase';
-export * from './mcqQuestionCommonComponents';
 export * from './essayResponseCommonComponents';
 export * from './autoScoredAdditionalSettings';
 export * from './autoScoredSetCorrectAnswerSection';
 export * from './autoScoredScoringSectionMultipleResponsesType';
 export * from './autoScoredScoringSection';
-export * from './mcqScoringComponent';
-export * from './createQuestionBasePage';
 export * from './fillInTheGapsCommonComponents';
 export * from './optionsWrapperComponent';
 export * from './specialCharactersFlyoutComponent';
 export * from './specialAndCustomSpecialCharactersComponent';
 export * from './previewScoringAndShowCorrectAnswerComponent';
-export * from './dragAndDropResponseOptions';
-export * from './dragAndDropSetCorrectAnswerCheckboxComponents';
-export * from './draggableOptionsContainer';
 export * from './equationEditorFlyout';
 export * from './answerNumerationComponent';
 export * from './studentResponseAreaAndLayoutComponent';
@@ -37,4 +28,26 @@ export * from './uploadImageSectionComponent';
 export * from './colorPopupComponent';
 export * from './customizeHighlightPropertiesComponent';
 export * from './browseItemsPage';
-export * from './autoScoredSpecifyCorrectAnswerSection';
+export * from './autoScoredSpecifyCorrectAnswerSection';
+export * from './scoringSectionBaseEditTab';
+export * from './autoScoredScoringSectionMultiResponseType';
+export * from './autoScoredStudentViewSettings';
+export * from './autoScoredScoringPreviewTab';
+export * from './measuringToolComponent';
+export * from './toolVisibilityComponent';
+export * from './randomizeOptionsComponent';
+export * from './lockUnlockOptionsComponent';
+export * from './toolSettingsComponent';
+export * from './maximumCapacityPerDropzoneComponent';
+export * from './measuringToolComponent';
+export * from './toolSettingsComponent';
+export * from './draggableOptionContainer';
+export * from './allowMultipleInstancesOfSameDraggableOptionComponent';
+export * from './backgroundImageUploadComponent';
+export * from './figOverImageCanvasComponent';
+export * from './correctIncorrectAnswerLabelComponent';
+export * from './acceptedStudentInputComponent';
+export * from './questionInputFieldComponent';
+export * from './studentViewSettingsLabelComponent';
+export * from './draggableOptionsSectionComponent';
+export * from './enableOuterBorderComponent';

package/cypress/pages/components/listSortingAndOrderingBase.js

@@ -307,7 +307,7 @@ const tests = {
             optionsWrapperComponent.steps.verifyOptionsInputFieldErrorMessage(0)
         });
 
-        commonComponents.tests.verifyCSSAnda11yOfErrorMessage();
+        commonComponents.tests.verifyErrorMessageCSSAndA11y();
 
         it('When user enters text in Option input field the \'Error: Option is required.\' error message should disappear.', () => {
             optionsWrapperComponent.steps.addInputToOptionsInputField([options[0]]);

package/cypress/pages/components/lockUnlockOptionsComponent.js

@@ -0,0 +1,65 @@
+const selectors = {
+    lockOptionPositionLabel: () => cy.get('[data-ngie-testid="lock-option-position-checkbox"] .MuiFormControlLabel-label'),
+    lockOptionPositionCheckbox: () => cy.get('[data-ngie-testid="lock-option-position-checkbox"] input'),
+    lockUnlockOptionsButton: () => cy.get('.lock-unlock-btn-icon-wrapper button')
+}
+
+const steps = {
+    verifyLockOptionPositionCheckboxUnchecked: () => {
+        lockUnlockOptionComponent.lockOptionPositionCheckbox()
+            .should('not.be.checked');
+    },
+
+    checkLockOptionPositionCheckbox: () => {
+        lockUnlockOptionComponent.lockOptionPositionCheckbox()
+            .click()
+            .should('be.checked');
+    },
+
+    /**
+     * @description this function verifies if an option is unlocked
+     * @param {number} index of the option
+     */
+    verifyOptionsUnlocked: (index) => {
+        lockUnlockOptionComponent.lockUnlockOptionsButton()
+            .eq(index)
+            .should('have.attr', 'aria-label', 'Unlock option')
+    },
+
+    /**
+    * @description this function verifies if an option is locked
+    * @param {number} index of the option
+    */
+    verifyOptionsLocked: (index) => {
+        lockUnlockOptionComponent.lockUnlockOptionsButton()
+            .eq(index)
+            .should('have.attr', 'aria-label', 'Lock option')
+    },
+
+    /**
+    * @description this function locks an option
+    * @param {number} index of the option to be locked
+    */
+    lockOption: (index) => {
+        lockUnlockOptionComponent.lockUnlockOptionsButton()
+            .eq(index)
+            .click();
+        steps.verifyOptionsLocked(index);
+    },
+
+    /**
+    * @description this function unlocks an option
+    * @param {number} index of the option to be unlocked
+    */
+    unlockOption: (index) => {
+        lockUnlockOptionComponent.lockUnlockOptionsButton()
+            .eq(index)
+            .click();
+        steps.verifyOptionsUnlocked(index);
+    }
+}
+
+export const lockUnlockOptionComponent = {
+    ...selectors,
+    steps
+}

package/cypress/pages/components/maximumCapacityPerDropzoneComponent.js

@@ -0,0 +1,53 @@
+import utilities from "../../support/helpers/utilities";
+
+const selectors = {
+    maxCapacityPerDropzoneLabel: () => cy.get('#Maximum-capacity-per-dropzone-dropdown-label'),
+    maxCapacityPerDropzoneDropdown: () => cy.get('#Maximum-capacity-per-dropzone-select'),
+    maxCapacityPerDropzoneDropdownListOptions: (ariaLabel = null) => {
+        if (ariaLabel) {
+            return cy.get(`[aria-labelledby*="Maximum-capacity-per-dropzone-dropdown-label"] [role="option"][aria-label*="${ariaLabel}"]`)
+        } else {
+            return cy.get('[aria-labelledby*="Maximum-capacity-per-dropzone-dropdown-label"] [role="option"]')
+        }
+    },
+    showStudentsDropzoneLimitsCheckbox: () => cy.get('[data-ngie-testid="show-students-the-dropzone-limits-checkbox"] input'),
+    showStudentsDropzoneLimitsCheckboxLabel: () => cy.get('[data-ngie-testid="show-students-the-dropzone-limits-checkbox"] .MuiFormControlLabel-label')
+}
+
+const steps = {
+    expandMaxCapacityPerDropzoneDropdown: () => {
+        maximumCapacityPerDropzoneComponent.maxCapacityPerDropzoneDropdown()
+            .click();
+    },
+
+    /**
+     * @param {string} listOption - The option to be selected from the max capacity per dropzone dropdown.
+     * @description Selects an option from the max capacity per dropzone dropdown. The dropdown options are dependent on the number of available options.
+     */
+    selectOptionFromMaxCapacityPerDropzoneDropdown: (listOption) => {
+        maximumCapacityPerDropzoneComponent.maxCapacityPerDropzoneDropdownListOptions(listOption)
+            .click();
+    },
+
+    verifyMaxCapacityPerDropzoneListOptions: (options) => {
+        options.forEach((option, count) => {
+            utilities.verifyInnerText(utilities.getNthElement(maximumCapacityPerDropzoneComponent.maxCapacityPerDropzoneDropdownListOptions(), count), option);
+        });
+    },
+
+    verifyShowStudentsDropzoneLimitsCheckboxUnchecked: () => {
+        maximumCapacityPerDropzoneComponent.showStudentsDropzoneLimitsCheckbox()
+            .should('not.be.checked');
+    },
+
+    checkShowStudentsDropzoneLimitsCheckbox: () => {
+        maximumCapacityPerDropzoneComponent.showStudentsDropzoneLimitsCheckbox()
+            .click()
+            .should('be.checked');
+    }
+}
+
+export const maximumCapacityPerDropzoneComponent = {
+    ...selectors,
+    steps
+}

package/cypress/pages/components/maximumRecorderLengthComponent.js

@@ -77,7 +77,7 @@ const tests = {
             utilities.verifyElementVisibilityState(commonComponents.errorMessage(), 'visible');
         });
 
-        commonComponents.tests.verifyCSSAnda11yOfErrorMessage();
+        commonComponents.tests.verifyErrorMessageCSSAndA11y();
 
         it('When the user updates the \'Maximum recorder length\' value, then the validation message \'Error: Maximum recorder length is required.\' should disappear.', () => {
             maximumRecorderLengthComponent.steps.setMaximumRecorderLength('1000');
@@ -91,7 +91,7 @@ const tests = {
             utilities.verifyElementVisibilityState(commonComponents.errorMessage(), 'visible');
         });
 
-        commonComponents.tests.verifyCSSAnda11yOfErrorMessage();
+        commonComponents.tests.verifyErrorMessageCSSAndA11y();
 
         it('When the user updates the \'Maximum recorder length\' value, then the validation message \'Error: Value must be greater than 0 secs.\' should disappear', () => {
             maximumRecorderLengthComponent.steps.setMaximumRecorderLength('1000');

package/cypress/pages/components/mcqAdditionalSettingsBase.js

@@ -1,22 +1,16 @@
-import { autoScoredAdditionalSettings } from "./autoScoredAdditionalSettings";
-import { commonComponents } from "./commonComponents";
-import { createQuestionBasePage } from "./createQuestionBasePage";
-import { mcqOptionsComponent } from "./mcqOptionsComponent";
-import { mcqPreviewComponents } from "./mcqPreviewComponents";
-import { mcqQuestionCommonComponents } from "./mcqQuestionCommonComponents";
-import { mcqSetCorrectAnswerSection } from "./mcqSetCorrectAnswerSection";
-const css = Cypress.env('css');
+import utilities from "../../support/helpers/utilities"
+import { commonComponents } from "./commonComponents"
 
 const selectors = {
-    //Options style dropdown
-    optionsAndLayoutLabel: () => cy.get('.additional-settings-heading-label').eq(0),
-    optionsStyleLabel: () => cy.get('#Option-Style-dropdown-label'),
-    optionsStyleDropdown: () => cy.get('#Option-Style-select'),
-    optionsStyleDropdownListOptions: (ariaLabel = null) => {
+    //Options design dropdown
+    optionStyleAndLayoutLabel: () => cy.get('.additional-settings-heading-label').eq(0),
+    optionDesignDropdownLabel: () => cy.get('#option-design-dropdown-label'),
+    optionDesignDropdown: () => cy.get('#option-design-select'),
+    optionDesignDropdownListOptions: (ariaLabel = null) => {
         if (ariaLabel) {
-            return cy.get(`[aria-labelledby*="Option-Style-dropdown-label"] li[role="option"][aria-label*="${ariaLabel}"]`)
+            return cy.get(`[aria-labelledby*="option-design-dropdown-label"] li[role="option"][aria-label*="${ariaLabel}"]`)
         } else {
-            return cy.get('[aria-labelledby*="Option-Style-dropdown-label"] li[role="option"]')
+            return cy.get('[aria-labelledby*="option-design-dropdown-label"] li[role="option"]')
         }
     },
     //Option numeration dropdown
@@ -36,355 +30,40 @@ const selectors = {
     //Option orientation dropdown
     optionOrientationLabel: () => cy.get('#Option-Orientation-dropdown-label'),
     optionOrientationDropdown: () => cy.get('#Option-Orientation-select'),
-    optionOrientationListOptions: (optionIndex) => cy.get('[aria-labelledby="Option-Orientation-dropdown-label Option-Orientation-placeholder"] li[role="option"]').eq(optionIndex)
+    optionOrientationListOptions: (optionIndex) => cy.get('[aria-labelledby="Option-Orientation-dropdown-label Option-Orientation-placeholder"] li[role="option"]').eq(optionIndex),
+    optionNumeration: () => cy.get('.mcq-option-numeration')
 }
 
-const tests = {
-    verifyNumberOfOptionsColumns: (orientation) => {
-        let option = [2, 3, 4, 5, 6];
-        option.forEach((option) => {
-            it(`When the user selects option \'${option}\' from the Number of Option Columns dropdown and \'${orientation}\' option is selected in \'Option Orientation\' dropdown, then the answer options should be divided and displayed vertically in ${option} columns in \'Set Correct Answer\' section and in \'Preview\' tab`, () => {
-                mcqAdditionalSettingsBase.numberOfOptionColumnsDropdown()
-                    .click();
-                mcqAdditionalSettingsBase.numberOfOptionColumnsListOptions(`${option - 1}`)
-                    .click();
-                mcqAdditionalSettingsBase.optionOrientationDropdown()
-                    .verifyInnerText(orientation);
-                mcqSetCorrectAnswerSection.correctAnswerOptionsWrapper(0)
-                    .parents('.edit-set-correct-answer-mcq-control')
-                    .should('have.attr', 'columns')
-                    .and('eq', `${option}`);
-                createQuestionBasePage.previewTab()
-                    .click();
-                mcqOptionsComponent.previewTabOptionsWrapper(0)
-                    .parents()
-                    .eq(2)
-                    .should('have.attr', 'columns')
-                    .and('eq', `${option}`);
-                createQuestionBasePage.editTab()
-                    .click();
-            });
-        });
+const steps = {
+    verifyOptionDesignDropdownSelectedOption: (selectedOption) => {
+        utilities.verifyInnerText(mcqAdditionalSettingsBase.optionDesignDropdown(), selectedOption)
     },
 
-    verifyOptionsStyleLayoutAndDropdown: (inputType) => {
-        //inputType : 'radio' | 'checkbox'
-        let dropdownOptions
-        if (inputType === 'radio') {
-            dropdownOptions = ['Default', 'Block without radio button', 'Radio button below option'];
-        } else if (inputType === 'checkbox') {
-            dropdownOptions = ['Default', 'Block without check box', 'Check box below option'];
-        }
-        it('CSS of Option Style and Layout section', { tags: 'css' }, () => {
-            mcqAdditionalSettingsBase.optionsAndLayoutLabel()
-                .verifyCSS(css.color.sectionHeading, css.fontSize.default, css.fontWeight.semibold);
-            mcqAdditionalSettingsBase.optionsStyleLabel()
-                .verifyCSS(css.color.labels, css.fontSize.normal, css.fontWeight.semibold);
-            mcqAdditionalSettingsBase.optionsStyleDropdown()
-                .verifyCSS(css.color.liText, css.fontSize.default, css.fontWeight.regular);
-        });
-
-        //Note: a11y is covered for the entire additional settings section
-
-        it('\'Option Style and Layout\' label, \'Option Style\' label and dropdown should be displayed and in \'Option Style\' dropdown \'Default\' option should be selected by default and option numeration dropdown should not be present', () => {
-            mcqAdditionalSettingsBase.optionsAndLayoutLabel()
-                .verifyInnerText('Option style and layout');
-            mcqAdditionalSettingsBase.optionsStyleLabel()
-                .should('be.visible')
-                .verifyInnerText('Option style');
-            mcqAdditionalSettingsBase.optionsStyleDropdown()
-                .should('be.visible')
-                .verifyInnerText('Default');
-            mcqAdditionalSettingsBase.optionNumerationDropdown()
-                .should('not.exist');
-        });
-
-        it(`Clicking on Option Style dropdown should open a list of 3 options - ${dropdownOptions.toString()}`, () => {
-            mcqAdditionalSettingsBase.optionsStyleDropdown()
-                .click();
-            mcqAdditionalSettingsBase.optionsStyleDropdownListOptions()
-                .should('be.visible');
-            dropdownOptions.forEach((option, count) => {
-                mcqAdditionalSettingsBase.optionsStyleDropdownListOptions()
-                    .eq(count)
-                    .verifyInnerText(option);
-            });
-        });
-
-        it('CSS of Options style dropdown in active state', { tags: 'css' }, () => {
-            mcqAdditionalSettingsBase.optionsStyleDropdownListOptions()
-                .verifyCSS(css.color.liText, css.fontSize.default, css.fontWeight.regular)
-                .should('have.css', 'background-color', css.color.liTextSelectedBg);
-            mcqAdditionalSettingsBase.optionsStyleDropdownListOptions(`${dropdownOptions[1]}`)
-                .should('have.css', 'background-color', css.color.transparent);
-        });
-
-        it('Accessibility of Options Style dropdown in active state', { tags: 'a11y' }, () => {
-            cy.checkAccessibility(commonComponents.dropdownList())
-        });
-
-        it(`When the user selects ${dropdownOptions[1]} option from the Option Style dropdown, then \'Option Numeration\' label and dropdown should be displayed and in \'Option Numeration\' dropdown and by default, Numerical should be selected in the dropdown`, () => {
-            mcqAdditionalSettingsBase.optionsStyleDropdownListOptions(`${dropdownOptions[1]}`)
-                .verifyInnerText(`${dropdownOptions[1]}`)
-                .and('be.visible')
-                .click();
-            mcqAdditionalSettingsBase.optionsStyleDropdown()
-                .verifyInnerText(`${dropdownOptions[1]}`);
-            mcqAdditionalSettingsBase.optionNumerationLabel()
-                .verifyInnerText('Option numeration');
-            mcqAdditionalSettingsBase.optionNumerationDropdown()
-                .verifyInnerText('Numerical')
-                .and('be.visible');
-        });
+    verifyOptionNumerationDropdownSelectedOption: (selectedOption) => {
+        utilities.verifyInnerText(mcqAdditionalSettingsBase.optionNumerationDropdown(), selectedOption)
     },
 
-    verifyOptionNumerationDropdownContents: (inputType) => {
-        //inputType : 'radio' | 'checkbox'
-        let optionName
-        if (inputType === 'radio') {
-            optionName = 'Radio button below option'
-        } else if (inputType === 'checkbox') {
-            optionName = 'Check box below option'
-        }
-        it('CSS of Option Numeration dropdown', { tags: 'css' }, () => {
-            mcqAdditionalSettingsBase.optionNumerationLabel()
-                .verifyCSS(css.color.labels, css.fontSize.normal, css.fontWeight.semibold);
-            mcqAdditionalSettingsBase.optionNumerationDropdown()
-                .verifyCSS(css.color.liText, css.fontSize.default, css.fontWeight.regular);
-        });
-
-        it('Accessibility of Option numeration dropdown', () => {
-            cy.checkAccessibility(mcqAdditionalSettingsBase.optionNumerationDropdown().parents('.Option-Numeration'))
-        });
-
-        it('Clicking on Option Numeration dropdown should open a list of 3 options - Numerical, Uppercase alphabet, Lowercase alphabet', () => {
-            mcqAdditionalSettingsBase.optionNumerationDropdown()
-                .click();
-            mcqAdditionalSettingsBase.optionNumerationDropdownListOptions()
-                .should('be.visible');
-            let dropdownOptions = ['Numerical', 'Uppercase alphabet', 'Lowercase alphabet'];
-            dropdownOptions.forEach((option, count) => {
-                mcqAdditionalSettingsBase.optionNumerationDropdownListOptions()
-                    .eq(count)
-                    .verifyInnerText(option);
+    verifySpecifyCorrectAnswerOptionNumeration: () => {
+        mcqAdditionalSettingsBase.optionNumeration()
+            .each(($option, index) => {
+                cy.wrap($option)
+                    .should('have.text', index + 1)
             });
-            cy.get('body')
-                .click();
-        });
-
-        it('CSS of Option Numeration dropdown in active state', { tags: 'css' }, () => {
-            cy.log('Post step: Clicking on the dropdown')
-            mcqAdditionalSettingsBase.optionNumerationDropdown()
-                .click()
-            mcqAdditionalSettingsBase.optionNumerationDropdownListOptions()
-                .eq(0)
-                .verifyCSS(css.color.liText, css.fontSize.default, css.fontWeight.regular)
-                .should('have.css', 'background-color', css.color.liTextSelectedBg);
-            mcqAdditionalSettingsBase.optionNumerationDropdownListOptions()
-                .eq(1)
-                .should('have.css', 'background-color', css.color.transparent);
-            cy.log('Post step: Collapsing the response dropdown')
-            cy.get('body')
-                .click();
-        });
-
-        it('Accessibility of Options Numeration dropdown in active state', { tags: 'a11y' }, () => {
-            cy.log('Pre step: Clicking on Option Numeration dropdown')
-            mcqAdditionalSettingsBase.optionNumerationDropdown()
-                .click();
-            cy.checkAccessibility(commonComponents.dropdownList())
-            cy.log('Post step: Closing the Option Numeration dropdown')
-            cy.get('body')
-                .click();
-        });
-
-        it(`When the user selects ${optionName} option from the Option Style dropdown, then \'Option Numeration\' dropdown should not be displayed`, () => {
-            mcqAdditionalSettingsBase.optionsStyleDropdown()
-                .click();
-            mcqAdditionalSettingsBase.optionsStyleDropdownListOptions(`${optionName}`)
-                .click();
-            mcqAdditionalSettingsBase.optionsStyleDropdown()
-                .verifyInnerText(`${optionName}`);
-            mcqAdditionalSettingsBase.optionNumerationDropdown()
-                .should('not.exist');
-        });
     },
 
-    verifyNumberOfOptionColumnsAndOptionOrientationContent: () => {
-        it('CSS of \'Number of Option Columns\' dropdown', { tags: 'css' }, () => {
-            mcqAdditionalSettingsBase.numberOfOptionColumnsLabel()
-                .verifyCSS(css.color.labels, css.fontSize.normal, css.fontWeight.semibold);
-            mcqAdditionalSettingsBase.numberOfOptionColumnsDropdown()
-                .verifyCSS(css.color.liText, css.fontSize.default, css.fontWeight.regular);
-        });
-
-        it('\'Number of Option Columns\' label and dropdown should be displayed and in \'Number of Option Columns\' dropdown option \'1\' should be selected by default and Option orientation dropdown should not be present', () => {
-            mcqAdditionalSettingsBase.numberOfOptionColumnsLabel()
-                .should('be.visible')
-                .verifyInnerText('Number of option columns');
-            mcqAdditionalSettingsBase.numberOfOptionColumnsDropdown()
-                .verifyInnerText('1');
-            mcqAdditionalSettingsBase.optionOrientationLabel()
-                .should('not.exist');
-            mcqAdditionalSettingsBase.optionOrientationDropdown()
-                .should('not.exist');
-        });
-
-        it('Clicking on Number of Option Columns dropdown should open a list of options from 1 to 6', () => {
-            mcqAdditionalSettingsBase.numberOfOptionColumnsDropdown()
-                .click();
-            mcqAdditionalSettingsBase.numberOfOptionColumnsListOptions(0)
-                .should('be.visible');
-            for (let index = 0; index < 6; index++) {
-                mcqAdditionalSettingsBase.numberOfOptionColumnsListOptions(index)
-                    .should('have.text', index + 1);
-            };
-        });
-
-        it('CSS of Number of options column dropdown in active state', { tags: 'css' }, () => {
-            mcqAdditionalSettingsBase.numberOfOptionColumnsListOptions(0)
-                .verifyCSS(css.color.liText, css.fontSize.default, css.fontWeight.regular)
-                .should('have.css', 'background-color', css.color.liTextSelectedBg);
-            mcqAdditionalSettingsBase.numberOfOptionColumnsListOptions(1)
-                .should('have.css', 'background-color', css.color.transparent);
-        });
-
-        it('Accessibility of Number of Option Columns dropdown in active state', { tags: 'a11y' }, () => {
-            cy.checkAccessibility(commonComponents.dropdownList())
-        });
-
-        it('When the user selects any option except 1 from the Number of Option Columns dropdown, then \'Option Orientation\' label and dropdown should be displayed and in \'Option Orientation\' dropdown \'Vertical\' option should be selected by default', () => {
-            mcqAdditionalSettingsBase.numberOfOptionColumnsListOptions(2)
-                .click();
-            mcqAdditionalSettingsBase.optionOrientationLabel()
-                .verifyInnerText('Option orientation');
-            mcqAdditionalSettingsBase.optionOrientationDropdown()
-                .verifyInnerText('Vertical');
-        });
-
-        it('CSS of \'Option Orientation\' dropdown', { tags: 'css' }, () => {
-            mcqAdditionalSettingsBase.optionOrientationLabel()
-                .verifyCSS(css.color.labels, css.fontSize.normal, css.fontWeight.semibold);
-            mcqAdditionalSettingsBase.optionOrientationDropdown()
-                .verifyCSS(css.color.liText, css.fontSize.default, css.fontWeight.regular);
-        });
-
-        it('Clicking on Option Orientation dropdown should open a list of 2 options - Vertical, Horizontal', () => {
-            mcqAdditionalSettingsBase.optionOrientationDropdown()
-                .click();
-            mcqAdditionalSettingsBase.optionOrientationListOptions(0)
-                .should('be.visible');
-            let dropdownOptions = ['Vertical', 'Horizontal']
-            dropdownOptions.forEach((option, count) => {
-                mcqAdditionalSettingsBase.optionOrientationListOptions(count)
-                    .verifyInnerText(option);
+    verifyPreviewTabOptionNumeration: () => {
+        commonComponents.previewTabQuestionWrapper()
+            .within(() => {
+                mcqAdditionalSettingsBase.optionNumeration()
+                    .each(($option, index) => {
+                        cy.wrap($option)
+                            .should('have.text', index + 1)
+                    });
             });
-            cy.log('Post step: Collapsing the response dropdown')
-            cy.get('body')
-                .click();
-        });
-
-        it('CSS of Option Orientation dropdown in active state', { tags: 'css' }, () => {
-            cy.log('Post step: Clicking on the dropdown')
-            mcqAdditionalSettingsBase.optionOrientationDropdown()
-                .click();
-            mcqAdditionalSettingsBase.optionOrientationListOptions(0)
-                .verifyCSS(css.color.liText, css.fontSize.default, css.fontWeight.regular)
-                .should('have.css', 'background-color', css.color.liTextSelectedBg);
-            mcqAdditionalSettingsBase.optionOrientationListOptions(1)
-                .should('have.css', 'background-color', css.color.transparent);
-            cy.log('Post step: Collapsing the response dropdown')
-            cy.get('body')
-                .click();
-        });
-
-        it('Accessibility of Option Orientation dropdown in active state', { tags: 'a11y' }, () => {
-            cy.log('Pre step: Clicking on the dropdown')
-            mcqAdditionalSettingsBase.optionOrientationDropdown()
-                .click();
-            cy.checkAccessibility(commonComponents.dropdownList())
-            cy.log('Post step: Collapsing the response dropdown')
-            cy.get('body')
-                .click();
-        });
-
-        it('When the user selects option \'1\' from the Number of Option Columns dropdown, then \'Option Orientation\' dropdown should not be displayed and answer options should be displayed in a single column in \'Set Correct Answer\' section as well as \'Preview\' tab', () => {
-            mcqAdditionalSettingsBase.numberOfOptionColumnsDropdown()
-                .click();
-            mcqAdditionalSettingsBase.numberOfOptionColumnsListOptions(0)
-                .click();
-            mcqAdditionalSettingsBase.optionOrientationLabel()
-                .should('not.exist');
-            mcqAdditionalSettingsBase.optionOrientationDropdown()
-                .should('not.exist');
-            mcqSetCorrectAnswerSection.correctAnswerOptionsWrapper(0)
-                .parents('.edit-set-correct-answer-mcq-control')
-                .should('have.attr', 'columns')
-                .and('eq', '1');
-            cy.log('Switching to Preview tab')
-            createQuestionBasePage.steps.switchToPreviewTab();
-            mcqOptionsComponent.previewTabOptionsWrapper(0)
-                .parents()
-                .eq(2)
-                .should('have.attr', 'columns')
-                .and('eq', '1');
-        });
-    },
-
-    verifyOptionOrientation: (inputType) => {
-        let options = ['Pollution caused by treating chemical waste', 'Pollution caused by cement production', 'Pollution caused by methane production', 'Pollution caused by cement and methane production', 'Pollution caused by electronic waste', 'Pollution caused by nuclear waste'];
-        let numbers = [1, 2, 3, 4, 5, 6];
-        it('When the user selects \'Vertical\' option from the \'Option Orientation\' dropdown, the numbers besides answer options should be listed vertically in columns in the \'Set Correct Answer\' section as well as in the \'Preview\' tab', () => {
-            //Failing due to https://redmine.zeuslearning.com/issues/519970
-            mcqAdditionalSettingsBase.numberOfOptionColumnsDropdown()
-                .click();
-            mcqAdditionalSettingsBase.numberOfOptionColumnsListOptions(2)
-                .click();
-            mcqAdditionalSettingsBase.optionOrientationDropdown()
-                .verifyInnerText('Vertical');
-            mcqSetCorrectAnswerSection.steps.verifyEditTabCorrectAnswerSectionOptionsNumeration(numbers, inputType)
-            cy.log('Switching to Preview tab')
-            createQuestionBasePage.steps.switchToPreviewTab();
-            mcqPreviewComponents.steps.verifyPreviewTabOptionsNumeration(numbers, inputType)
-            mcqQuestionCommonComponents.steps.verifyShuffleOptionOrder(options, 6);
-            cy.log('Post step: Switching to Edit tab')
-            createQuestionBasePage.steps.switchToEditTab();
-        });
-
-        it('When the user selects \'Horizontal\' option from the \'Option Orientation\' dropdown, the numbers besides answer options should be listed horizontally in columns in the \'Set Correct Answer\' section as well as in the \'Preview\' tab', () => {
-            mcqAdditionalSettingsBase.optionOrientationDropdown()
-                .click();
-            mcqAdditionalSettingsBase.optionOrientationListOptions(1)
-                .click();
-            mcqAdditionalSettingsBase.optionOrientationDropdown()
-                .verifyInnerText('Horizontal');
-            mcqSetCorrectAnswerSection.steps.verifyEditTabCorrectAnswerSectionOptionsNumeration(numbers, inputType)
-            cy.log('Switching to Preview tab')
-            createQuestionBasePage.steps.switchToPreviewTab();
-            mcqPreviewComponents.steps.verifyPreviewTabOptionsNumeration(numbers, inputType)
-            mcqQuestionCommonComponents.steps.verifyShuffleOptionOrder(options, 6);
-            cy.log('Post-step: Switching to Edit tab and changing back to Vertical option orientation');
-            createQuestionBasePage.steps.switchToEditTab();
-            mcqAdditionalSettingsBase.optionOrientationDropdown()
-                .click();
-            mcqAdditionalSettingsBase.optionOrientationListOptions(0)
-                .click();
-        });
-
-        it('In Preview tab, options should be displayed in shuffled order in 3 columns', () => {
-            cy.log('Pre step: Switching to Preview tab')
-            createQuestionBasePage.steps.switchToPreviewTab();
-            mcqOptionsComponent.previewTabOptionsWrapper(0)
-                .parents()
-                .eq(2)
-                .should('have.attr', 'columns')
-                .and('eq', '3');
-            mcqQuestionCommonComponents.steps.verifyShuffleOptionOrder(options, 6);
-        });
     }
 }
 
 export const mcqAdditionalSettingsBase = {
     ...selectors,
-    tests
+    steps
 }