itemengine-cypress-automation 1.0.240-textentrychangesreverted-28d08d1.0 → 1.0.241-28thAugustRepoUpdate-dc7df0c.0

package/cypress/e2e/ILC/ListOrderingNew/optionsOrientationSection.js

@@ -0,0 +1,150 @@
+import { listOrderingPage } from "../../../pages";
+import abortEarlySetup from "../../../support/helpers/abortEarly";
+import utilities from "../../../support/helpers/utilities";
+const options = ['sprout', 'plant', 'flower', 'seed'];
+
+describe('Create item page - List ordering: Options orientation Section', () => {
+    before(() => {
+        cy.loginAs('admin');
+    });
+
+    describe('Options orientation section: Edit tab contents', () => {
+        abortEarlySetup();
+        before(() => {
+            listOrderingPage.steps.navigateToCreateQuestion('list ordering');
+            cy.barsPreLoaderWait();
+        });
+
+        it('The \"Option orientation\" label should be displayed', () => {
+            utilities.verifyInnerText(listOrderingPage.optionOrientationSectionLabel(), 'Option orientation');
+        });
+
+        it('The \'Vertical\' toggle button and \'Horizontal\' toggle should be displayed, by default vertical toggle button should be selected', () => {
+            utilities.verifyInnerText(listOrderingPage.verticalButton(), 'Vertical');
+            utilities.verifyInnerText(listOrderingPage.horizontalButton(), 'Horizontal');
+            listOrderingPage.steps.verifySelectedStateOfOptionOrientationToggle('Vertical');
+        });
+
+        it('User should be able to select horizontal orientation button', () => {
+            listOrderingPage.steps.selectOptionOrientation('Horizontal');
+            listOrderingPage.steps.verifySelectedStateOfOptionOrientationToggle('Horizontal');
+        });
+
+        it('When user selects horizontal orientation, then \"Enable wrapping\" label should be displayed', () => {
+            listOrderingPage.steps.verifyEnableWrappingCheckboxChecked();
+            utilities.verifyInnerText(listOrderingPage.enableWrappingLabel(), 'Enable wrapping');
+        });
+
+        it('When horizontal orientation is selected, then \"Enable wrapping\" checkbox should be selected by default ', () => {
+            listOrderingPage.steps.verifyEnableWrappingCheckboxChecked();
+        });
+
+        it('User should be able to uncheck the \"Enable wrapping\" checkbox', () => {
+            listOrderingPage.steps.uncheckEnableWrappingCheckbox();
+            listOrderingPage.steps.verifyEnableWrappingCheckboxUnchecked();
+        });
+
+        it('User should be able to re-select vertical orientation button', () => {
+            listOrderingPage.steps.selectOptionOrientation('Vertical');
+            listOrderingPage.steps.verifySelectedStateOfOptionOrientationToggle('Vertical');
+        });
+    });
+
+    describe('Functionality - Specify correct answer section', () => {
+        abortEarlySetup();
+        before(() => {
+            listOrderingPage.steps.navigateToCreateQuestion('list ordering');
+            cy.barsPreLoaderWait();
+            listOrderingPage.steps.addInputToOptionsInputField(options);
+        });
+
+        it('When vertical orientation is selected, then the options should be displayed vertically', () => {
+            listOrderingPage.steps.verifyOptionOrientation('Vertical');
+        });
+
+        it('User should be able to reorder the options when vertical orientation is selected', () => {
+            listOrderingPage.steps.clickAndReorderOptionInSpecifyCorrectAnswerSection(options[0], '1');
+            listOrderingPage.steps.verifyOptionsOrderInSpecifyCorrectAnswerSection(['plant', 'sprout', 'flower', 'seed']);
+        });
+
+        it('When user selects horizontal orientation, then the options should be displayed horizontally', () => {
+            listOrderingPage.steps.selectOptionOrientation('Horizontal');
+            listOrderingPage.steps.verifyOptionOrientation('Horizontal');
+        });
+
+        it('User should be able to reorder the options when horizontal orientation is selected', () => {
+            listOrderingPage.steps.clickAndReorderOptionInHorizontalSpecifyCorrectAnswerSection(options[0], '1');
+            listOrderingPage.steps.verifyHorizontalOptionsOrderInSpecifyCorrectAnswerSection(['plant', 'sprout', 'flower', 'seed']);
+        });
+
+
+        it('When the horizontal orientation is selected and \"Enable wrapping\" is enabled, then the text within the options should be wrapped', () => {
+            listOrderingPage.steps.verifyHorizontalWrapping('enabled');
+        });
+
+        it('When user unchecks the \'Enable wrapping\' checkbox then the text within the options should not be wrapped', () => {
+            listOrderingPage.steps.uncheckEnableWrappingCheckbox();
+            listOrderingPage.steps.verifyEnableWrappingCheckboxUnchecked();
+            listOrderingPage.steps.verifyHorizontalWrapping('disabled');
+        });
+
+        it('When user re-selects the vertical orientation option then, then the changes should be reflected in the \"Specify correct answer\" section', () => {
+            listOrderingPage.steps.selectOptionOrientation('Vertical');
+            listOrderingPage.steps.verifyOptionOrientation('Vertical');
+            listOrderingPage.steps.verifyOptionOrientation('Vertical');
+        });
+    });
+
+    describe('Functionality - Preview tab', () => {
+        abortEarlySetup();
+        before(() => {
+            listOrderingPage.steps.navigateToCreateQuestion('list ordering');
+            cy.barsPreLoaderWait();
+            listOrderingPage.steps.addInputToOptionsInputField(options);
+        });
+
+        it('When user selects vertical orientation, then the options should be displayed vertically', () => {
+            listOrderingPage.steps.switchToPreviewTab();
+            listOrderingPage.steps.verifyOptionOrientationInPreviewTab('Vertical');
+        });
+
+        it('User should be able to reorder the options when vertical orientation is selected', () => {
+            listOrderingPage.steps.clickAndReorderOptionInPreviewTab(options[0], '1');
+            listOrderingPage.steps.verifyOptionsOrderInPreviewTab(['plant', 'sprout', 'flower', 'seed']);
+        });
+
+        it('When user selects horizontal orientation, then the options should be displayed horizontally', () => {
+            listOrderingPage.steps.switchToEditTab();
+            listOrderingPage.steps.selectOptionOrientation('Horizontal');
+            listOrderingPage.steps.verifyOptionOrientation('Horizontal');
+            listOrderingPage.steps.switchToPreviewTab();
+            listOrderingPage.steps.verifyOptionOrientation('Horizontal');
+        });
+
+        it('User should be able to reorder the options when horizontal orientation is selected', () => {
+            listOrderingPage.steps.clickAndReorderOptionInHorizontalPreviewTab(options[0], '1');
+            listOrderingPage.steps.verifyHorizontalOptionsOrderInPreviewTab(['plant', 'sprout', 'flower', 'seed']);
+        });
+
+
+        it('When the horizontal orientation is selected and \"Enable wrapping\" is enabled, then the text within the options should be wrapped', () => {
+            listOrderingPage.steps.verifyHorizontalWrapping('enabled');
+        });
+
+        it('When user unchecks the \'Enable wrapping\' checkbox then the text within the options should not be wrapped', () => {
+            listOrderingPage.steps.switchToEditTab();
+            listOrderingPage.steps.uncheckEnableWrappingCheckbox();
+            listOrderingPage.steps.verifyEnableWrappingCheckboxUnchecked();
+            listOrderingPage.steps.switchToPreviewTab();
+            listOrderingPage.steps.verifyHorizontalWrapping('disabled');
+        });
+
+        it('When user re-selects the vertical orientation option then, then the changes should be reflected in the \"Preview Tab\" section', () => {
+            listOrderingPage.steps.switchToEditTab();
+            listOrderingPage.steps.selectOptionOrientation('Vertical');
+            listOrderingPage.steps.verifyOptionOrientation('Vertical');
+            listOrderingPage.steps.switchToPreviewTab();
+            listOrderingPage.steps.verifyOptionOrientation('Vertical');
+        });
+    });
+});

package/cypress/e2e/ILC/ListOrderingReorderAsASeperateList/HorizontalOrientation/horizontalOrientationAllOrNothingForAllViews.smoke.js

@@ -0,0 +1,218 @@
+import { dialogBoxBase, listOrderingPage, gradingViewPage, itemPreviewPage, studentViewPage } from "../../../../pages";
+import abortEarlySetup from "../../../../support/helpers/abortEarly";
+import utilities from "../../../../support/helpers/utilities";
+const css = Cypress.env('css');
+const grepTags = Cypress.env('grepTags');
+let correctAnswerViews = ['Question preview', 'Item preview', 'Grading view'];
+const views = utilities.getViews(correctAnswerViews);
+var itemReferenceID = "";
+const options = ['sprout', 'plant', 'flower', 'seed'];
+const correctAnswerArray = ['seed', 'sprout', 'plant', 'flower'];
+
+describe('Create item page - List ordering: All or nothing for "Horizontal" option orientation', () => {
+    before(() => {
+        cy.loginAs('admin');
+    });
+
+    views.forEach((view) => {
+        describe(`${view}: Auto scored - All or nothing scoring`, { tags: 'smoke' }, () => {
+            abortEarlySetup();
+            before(() => {
+                switch (view) {
+                    case 'Question preview':
+                        listOrderingPage.steps.navigateToCreateQuestion('list ordering');
+                        cy.barsPreLoaderWait();
+                        listOrderingPage.steps.selectOrderingLayoutOption('Reorder as a separate list');
+                        listOrderingPage.steps.addInputToOptionsInputField(options);
+                        listOrderingPage.steps.selectOptionOrientation('Horizontal');
+                        listOrderingPage.steps.addTextInQuestionInstructionsInputField('Arrange options in correct order.');
+                        listOrderingPage.steps.allotPoints(20);
+                        listOrderingPage.steps.clickAndDropOptionSeperateList('seed');
+                        listOrderingPage.steps.clickAndDropOptionSeperateList('sprout');
+                        listOrderingPage.steps.clickAndDropOptionSeperateList('plant');
+                        listOrderingPage.steps.clickAndDropOptionSeperateList('flower');
+                        listOrderingPage.steps.verifyOptionsInDropzoneOrderAsSeperateList(correctAnswerArray);
+                        listOrderingPage.steps.switchToPreviewTab();
+                        break;
+                    case 'Item preview':
+                        cy.visit(`/item-engine/demo/edit-item/${utilities.base64Encoding(itemReferenceID)}`);
+                        itemPreviewPage.steps.switchToPreviewTab();
+                        break;
+                    case 'Grading view':
+                        cy.visit(`/item-engine/demo/render-item/student-view/${utilities.base64Encoding(itemReferenceID)}`);
+                        break;
+                };
+            });
+
+            beforeEach(() => {
+                switch (view) {
+                    case 'Question preview':
+                        listOrderingPage.steps.verifyQuestionPreviewStateWhenSwitchingBackToStudentView();
+                        listOrderingPage.steps.resetQuestionPreview();
+                        break;
+                    case 'Item preview':
+                        listOrderingPage.steps.verifyQuestionPreviewStateWhenSwitchingBackToStudentView();
+                        itemPreviewPage.steps.resetQuestionPreview();
+                        break;
+                    case 'Grading view':
+                        cy.visit(`/item-engine/demo/render-item/student-view/${utilities.base64Encoding(itemReferenceID)}`);
+                        cy.wait(3000);
+                        break;
+                }
+            });
+
+            if (view === 'Question preview') {
+                after(() => {
+                    listOrderingPage.steps.clickOnSaveQuestionButton();
+                    utilities.verifyElementVisibilityState(itemPreviewPage.referenceID(), 'visible');
+                    itemReferenceID = itemPreviewPage.steps.getItemReferenceID();
+                });
+            };
+            if (view === 'Question preview' || view === 'Item preview') {
+                it('When the user selects \'Grading\' view without attempting the question, then correct/incorrect icons and correct incorrect status message should not be displayed and correct answer section with all correct answers should be displayed', () => {
+                    listOrderingPage.steps.verifyPreviewScore(0, 20);
+                    listOrderingPage.steps.switchToGradingView();
+                    listOrderingPage.steps.verifyPreviewTabPointsBackgroundForIncorrectOrPartiallyCorrectAnswer();
+                    listOrderingPage.steps.verifyCorrectIncorrectAnswerLabelNotExist();
+                    utilities.verifyInnerText(listOrderingPage.correctAnswersLabel(), 'Correct answers');
+                    listOrderingPage.steps.verifyOptionsInCorrectAnswerSection(correctAnswerArray);
+                });
+            }
+            it('When the user attempts the question incorrectly, then the user should be awarded 0 points and on switching to \'Grading\' view, incorrect icons should be displayed besides all incorrect responses, a status message with text \'Your answer is incorrect\' and correct answer section with all correct answers should be displayed', () => {
+                listOrderingPage.steps.clickAndDropOptionSeperateList('sprout');
+                listOrderingPage.steps.clickAndDropOptionSeperateList('plant');
+                listOrderingPage.steps.clickAndDropOptionSeperateList('flower');
+                listOrderingPage.steps.clickAndDropOptionSeperateList('seed');
+                if (view === 'Grading view') {
+                    studentViewPage.steps.submitResponse();
+                    utilities.verifyElementVisibilityState(dialogBoxBase.dialogBox(), 'visible');
+                    studentViewPage.steps.clickOnGoToGradingViewButton();
+                    gradingViewPage.steps.verifyGradingViewScore(0, 20);
+                };
+                if (view === 'Question preview' || view === 'Item preview') {
+                    listOrderingPage.steps.verifyPreviewScore(0, 20);
+                    listOrderingPage.steps.switchToGradingView();
+                };
+                listOrderingPage.steps.verifyIncorrectOptionIconSeperateList('sprout');
+                listOrderingPage.steps.verifyIncorrectOptionIconSeperateList('plant');
+                listOrderingPage.steps.verifyIncorrectOptionIconSeperateList('flower');
+                listOrderingPage.steps.verifyIncorrectOptionIconSeperateList('seed');
+                listOrderingPage.steps.verifyCorrectIncorrectAnswerLabel('incorrect');
+                listOrderingPage.steps.verifyOptionsInCorrectAnswerSection(correctAnswerArray);
+            });
+
+            it('When the user attempts the question partially correct, then the user should be awarded 0 points and on switching to \'Grading\' view, correct icon should be displayed besides the correct answer responses, incorrect icon should be displayed besides incorrect answer response, a status message with text \'Your answer is incorrect\' and correct answer section with all correct answers should be displayed', () => {
+                if (view === 'Grading view') {
+                    studentViewPage.steps.clearResponses();
+                };
+                listOrderingPage.steps.clickAndDropOptionSeperateList('seed');
+                listOrderingPage.steps.clickAndDropOptionSeperateList('flower');
+                listOrderingPage.steps.clickAndDropOptionSeperateList('plant');
+                listOrderingPage.steps.clickAndDropOptionSeperateList('sprout');
+                if (view === 'Grading view') {
+                    studentViewPage.steps.submitResponse();
+                    utilities.verifyElementVisibilityState(dialogBoxBase.dialogBox(), 'visible');
+                    studentViewPage.steps.clickOnGoToGradingViewButton();
+                    gradingViewPage.steps.verifyGradingViewScore(0, 20);
+                };
+                if (view === 'Question preview' || view === 'Item preview') {
+                    listOrderingPage.steps.verifyPreviewScore(0, 20);
+                    listOrderingPage.steps.switchToGradingView();
+                };
+                listOrderingPage.steps.verifyCorrectOptionIconSeperateList('seed');
+                listOrderingPage.steps.verifyIncorrectOptionIconSeperateList('flower');
+                listOrderingPage.steps.verifyCorrectOptionIconSeperateList('plant');
+                listOrderingPage.steps.verifyIncorrectOptionIconSeperateList('sprout');
+                listOrderingPage.steps.verifyCorrectIncorrectAnswerLabel('incorrect');
+                listOrderingPage.steps.verifyOptionsInCorrectAnswerSection(correctAnswerArray);
+            });
+
+            it('When user attempts the question correctly, the user should be awarded full points and on switching to \'Grading\' view, then correct icons should be displayed beside all the correct responses, correct icon should be displayed besides the correct answer responses, a status message with text \'Your answer is correct\' and correct answer section should not be displayed', () => {
+                if (view === 'Grading view') {
+                    studentViewPage.steps.clearResponses();
+                };
+                listOrderingPage.steps.clickAndDropOptionSeperateList('seed');
+                listOrderingPage.steps.clickAndDropOptionSeperateList('sprout');
+                listOrderingPage.steps.clickAndDropOptionSeperateList('plant');
+                listOrderingPage.steps.clickAndDropOptionSeperateList('flower');
+                if (view === 'Grading view') {
+                    studentViewPage.steps.submitResponse();
+                    utilities.verifyElementVisibilityState(dialogBoxBase.dialogBox(), 'visible');
+                    studentViewPage.steps.clickOnGoToGradingViewButton();
+                    gradingViewPage.steps.verifyGradingViewScore(20, 20);
+                };
+                if (view === 'Question preview' || view === 'Item preview') {
+                    listOrderingPage.steps.verifyPreviewScore(20, 20);
+                    listOrderingPage.steps.switchToGradingView();
+                    listOrderingPage.steps.verifyPreviewTabPointsBackgroundForCorrectAnswer();
+                };
+                listOrderingPage.steps.verifyCorrectOptionIconSeperateList('seed');
+                listOrderingPage.steps.verifyCorrectOptionIconSeperateList('sprout');
+                listOrderingPage.steps.verifyCorrectOptionIconSeperateList('plant');
+                listOrderingPage.steps.verifyCorrectOptionIconSeperateList('flower');
+                listOrderingPage.steps.verifyCorrectIncorrectAnswerLabel('correct');
+                listOrderingPage.steps.verifyCorrectAnswerSectionNotExists();
+            });
+        });
+    });
+
+    if (!grepTags || !grepTags.includes('smoke')) {
+        describe('Question preview: Auto scored - All or nothing: Minimum scoring', () => {
+            abortEarlySetup();
+            before(() => {
+                listOrderingPage.steps.navigateToCreateQuestion('list ordering');
+                cy.barsPreLoaderWait();
+                listOrderingPage.steps.selectOrderingLayoutOption('Reorder as a separate list');
+                listOrderingPage.steps.addTextInQuestionInstructionsInputField('Arrange options in correct order.');
+                listOrderingPage.steps.allotPoints(20);
+                listOrderingPage.steps.addInputToOptionsInputField(options);
+                listOrderingPage.steps.selectOptionOrientation('Horizontal');
+                listOrderingPage.steps.clickAndDropOptionSeperateList('seed');
+                listOrderingPage.steps.clickAndDropOptionSeperateList('sprout');
+                listOrderingPage.steps.clickAndDropOptionSeperateList('plant');
+                listOrderingPage.steps.clickAndDropOptionSeperateList('flower');
+                listOrderingPage.steps.verifyOptionsInDropzoneOrderAsSeperateList(correctAnswerArray);
+            });
+
+            it('When the user selects \'Award minimum score\' from the minimum scoring dropdown, does not attempt the question and switches to grading view, then the user should be awarded with minimum points', () => {
+                listOrderingPage.steps.expandMinimumScoringDropdown();
+                listOrderingPage.steps.selectOptionFromMinimumScoringDropdown('Award minimum score');
+                listOrderingPage.steps.allotMinimumPoints(2);
+                listOrderingPage.steps.switchToPreviewTab();
+                listOrderingPage.steps.switchToGradingView();
+                listOrderingPage.steps.verifyPreviewScore(2, 20);
+                listOrderingPage.steps.verifyQuestionPreviewStateWhenSwitchingBackToStudentView();
+            });
+
+            it('When the user has selected \'Award minimum score\' from the minimum scoring dropdown, attempts the question incorrectly and switches to grading view, the user should be awarded with minimum points', () => {
+                listOrderingPage.steps.resetQuestionPreview();
+                listOrderingPage.steps.clickAndDropOptionSeperateList('sprout');
+                listOrderingPage.steps.clickAndDropOptionSeperateList('plant');
+                listOrderingPage.steps.clickAndDropOptionSeperateList('flower');
+                listOrderingPage.steps.clickAndDropOptionSeperateList('seed');
+                listOrderingPage.steps.verifyPreviewScore(2, 20);
+                listOrderingPage.steps.verifyQuestionPreviewStateWhenSwitchingBackToStudentView();
+            });
+
+            it('When the user selects \'Award minimum score only if attempted\' from the minimum scoring dropdown, does not attempt the question and switches to grading view, then considering the default list order incorrect, the user should be awarded with minimum points', () => {
+                listOrderingPage.steps.switchToEditTab();
+                listOrderingPage.steps.expandMinimumScoringDropdown();
+                listOrderingPage.steps.selectOptionFromMinimumScoringDropdown('Award minimum score only if attempted');
+                listOrderingPage.steps.allotMinimumPoints(2);
+                listOrderingPage.steps.switchToPreviewTab();
+                listOrderingPage.steps.switchToGradingView();
+                listOrderingPage.steps.verifyPreviewScore(0, 20);
+                listOrderingPage.steps.verifyQuestionPreviewStateWhenSwitchingBackToStudentView();
+            });
+
+            it('When the user has selected \'Award minimum score\' from the minimum scoring dropdown, attempts the question incorrectly and switches to grading view, the user should be awarded with minimum points', () => {
+                listOrderingPage.steps.resetQuestionPreview();
+                listOrderingPage.steps.clickAndDropOptionSeperateList('sprout');
+                listOrderingPage.steps.clickAndDropOptionSeperateList('plant');
+                listOrderingPage.steps.clickAndDropOptionSeperateList('flower');
+                listOrderingPage.steps.clickAndDropOptionSeperateList('seed');
+                listOrderingPage.steps.verifyPreviewScore(2, 20);
+            });
+        });
+    };
+});

package/cypress/e2e/ILC/ListOrderingReorderAsASeperateList/HorizontalOrientation/previewContentsForAllViews.smoke.js

@@ -0,0 +1,176 @@
+import { itemPreviewPage, listOrderingPage, studentViewPage } from "../../../../pages";
+import { ckEditorToolbar, equationEditorFlyout } from "../../../../pages/components";
+import abortEarlySetup from "../../../../support/helpers/abortEarly";
+import utilities from "../../../../support/helpers/utilities";
+
+const previewContentViews = ['Question preview', 'Item view', 'Item preview', 'Student view', 'Grading view', 'Correct answer view'];
+const array = ['This is a bold option', 'Fox', 'Solve the following', 'alpha'];
+const views = utilities.getViews(previewContentViews);
+var itemReferenceID = "";
+const css = Cypress.env('css');
+
+describe('Create item page - List ordering - Preview contents in all views', () => {
+    before(() => {
+        cy.loginAs('admin');
+    });
+
+    views.forEach((view) => {
+        describe(`Preview tab contents - ${view}`, { tags: 'smoke' }, () => {
+            abortEarlySetup();
+            before(() => {
+                switch (view) {
+                    case 'Question preview':
+                        listOrderingPage.steps.navigateToCreateQuestion('list ordering');
+                        cy.barsPreLoaderWait();
+                        listOrderingPage.steps.selectOrderingLayoutOption('Reorder as a separate list');
+                        listOrderingPage.steps.selectOptionOrientation('Horizontal');
+                        listOrderingPage.steps.addTextInQuestionInstructionsInputField('Arrange options in correct order.');
+                        listOrderingPage.steps.allotPoints(10);
+                        cy.log('Add image to option input field')
+                        listOrderingPage.steps.focusInOptionsInputField(0);
+                        ckEditorToolbar.steps.selectImageOptionFromCKEditorToolbar();
+                        ckEditorToolbar.steps.addImageToInputField();
+                        listOrderingPage.steps.enterTextInOptionInputField(0, 'Fox');
+                        cy.log('Add bold text to option input field')
+                        listOrderingPage.steps.focusInOptionsInputField(1);
+                        ckEditorToolbar.steps.selectBoldOptionFromCKEditorToolbar();
+                        listOrderingPage.steps.enterTextInOptionInputField(1, 'This is a bold option');
+                        cy.log('Add equation to option input field')
+                        listOrderingPage.steps.enterTextInOptionInputField(2, 'Solve the following');
+                        listOrderingPage.steps.focusInOptionsInputField(2);
+                        ckEditorToolbar.steps.selectEquationEditorOptionFromCKEditorToolbar();
+                        equationEditorFlyout.steps.addGenericEquationUsingEquationEditorToCKEditorInputField();
+                        listOrderingPage.steps.enterTextInOptionInputField(3, 'alpha');
+                        listOrderingPage.steps.clickAndDropOptionSeperateList('This is a bold option');
+                        listOrderingPage.steps.clickAndDropOptionSeperateList('Fox');
+                        listOrderingPage.steps.clickAndDropOptionSeperateList('Solve the following');
+                        listOrderingPage.steps.clickAndDropOptionSeperateList('alpha');
+                        listOrderingPage.steps.switchToPreviewTab();
+                        break;
+                    case 'Item view':
+                        cy.visit(`/item-engine/demo/edit-item/${utilities.base64Encoding(itemReferenceID)}`);
+                        break;
+                    case 'Item preview':
+                        cy.visit(`/item-engine/demo/edit-item/${utilities.base64Encoding(itemReferenceID)}`);
+                        listOrderingPage.steps.switchToPreviewTab();
+                        break;
+                    case 'Student view':
+                        cy.visit(`/item-engine/demo/render-item/student-view/${utilities.base64Encoding(itemReferenceID)}`);
+                        break;
+                    case 'Grading view':
+                        cy.visit(`/item-engine/demo/render-item/grading-view/${utilities.base64Encoding(itemReferenceID)}`);
+                        break;
+                    case 'Correct answer view':
+                        cy.visit(`/item-engine/demo/render-item/correct-answer-view/${utilities.base64Encoding(itemReferenceID)}`);
+                        break;
+                    default:
+                        throw new Error('Invalid view');
+                }
+            });
+
+            after(() => {
+                if (view === 'Question preview') {
+                    listOrderingPage.steps.clickOnSaveQuestionButton();
+                    utilities.verifyElementVisibilityState(itemPreviewPage.referenceID(), 'visible');
+                    itemReferenceID = itemPreviewPage.steps.getItemReferenceID();
+                }
+                if (view === 'Student view') {
+                    studentViewPage.steps.submitResponse();
+                    utilities.verifyElementVisibilityState(studentViewPage.buttonGoToGradingView(), 'visible');
+                }
+            });
+
+            it('Question instructions should be visible', () => {
+                utilities.verifyInnerText(listOrderingPage.questionInstructionsText(), 'Arrange options in correct order.');
+                utilities.verifyElementVisibilityState(listOrderingPage.questionInstructionsText(), 'visible');
+            });
+
+            if (view !== 'Grading view' && view !== 'Correct answer view') {
+                it(`When the user has added image, equation, bold text to the options input fields, then they should be displayed in the options container in ${view}`, () => {
+                    listOrderingPage.steps.verifyOptionWithImageInOptionsContainerPreviewTabSeperateList(0);
+                    listOrderingPage.steps.verifyOptionWithBoldTextInOptionsContainerPreviewTabSeperateList(1);
+                    listOrderingPage.steps.verifyOptionWithEquationTextInOptionsContainerPreviewTabSeperateList(2);
+                    listOrderingPage.steps.verifyTextContentOfOptionInPreviewTabSeperateList('alpha', 3);
+                });
+
+                it('User should be able to drop the options in the dropzone containing image, bold text and equation options in the list', () => {
+                    listOrderingPage.steps.clickAndDropOptionSeperateList('This is a bold option');
+                    listOrderingPage.steps.clickAndDropOptionSeperateList('Fox');
+                    listOrderingPage.steps.clickAndDropOptionSeperateList('Solve the following');
+                    listOrderingPage.steps.clickAndDropOptionSeperateList('alpha');
+                    listOrderingPage.steps.verifyOptionWithBoldTextInDropzonePreviewTabSeperateList(0);
+                    listOrderingPage.steps.verifyOptionWithImageInDropzonePreviewTabSeperateList(1);
+                    listOrderingPage.steps.verifyOptionWithEquationTextInDropzonePreviewTabSeperateList(2);
+                    listOrderingPage.steps.verifyTextContentOfOptionInDropzonePreviewTabSeperateList('alpha', 3);
+                });
+
+            } else if (view === 'Grading view') {
+                it(`The order of the responses should be as per the submitted response`, () => {
+                    listOrderingPage.steps.verifyOptionWithBoldTextInDropzonePreviewTabSeperateList(0);
+                    listOrderingPage.steps.verifyOptionWithImageInDropzonePreviewTabSeperateList(1);
+                    listOrderingPage.steps.verifyOptionWithEquationTextInDropzonePreviewTabSeperateList(2);
+                    listOrderingPage.steps.verifyTextContentOfOptionInDropzonePreviewTabSeperateList('alpha', 3);
+                    listOrderingPage.steps.verifyCorrectOptionIconOrientationSeperateList('This is a bold option');
+                    listOrderingPage.steps.verifyCorrectOptionIconOrientationSeperateList('Fox');
+                    listOrderingPage.steps.verifyCorrectOptionIconOrientationSeperateList('Solve the following');
+                    listOrderingPage.steps.verifyCorrectOptionIconOrientationSeperateList('alpha');
+                    listOrderingPage.steps.verifyCorrectIncorrectAnswerLabel('correct');
+                    listOrderingPage.steps.verifyCorrectAnswerSectionNotExists();
+                });
+
+                it('The order of the responses should not be editable', () => {
+                    listOrderingPage.steps.verifyOptionNotEditableInGradingViewSeperateList(array);
+                    listOrderingPage.steps.verifyOptionWithBoldTextInDropzonePreviewTabSeperateList(0);
+                    listOrderingPage.steps.verifyOptionWithImageInDropzonePreviewTabSeperateList(1);
+                    listOrderingPage.steps.verifyOptionWithEquationTextInDropzonePreviewTabSeperateList(2);
+                    listOrderingPage.steps.verifyTextContentOfOptionInDropzonePreviewTabSeperateList('alpha', 3);
+                });
+
+            } else {
+                it('The order of the options should be as per the correct answer order', () => {
+                    listOrderingPage.steps.verifyOptionWithBoldTextInDropzoneCorrectAnswerSectionSeperateList(0);
+                    listOrderingPage.steps.verifyOptionWithImageInDropzoneCorrectAnswerSectionTabSeperateList(1);
+                    listOrderingPage.steps.verifyOptionWithEquationTextInDropzoneCorrectAnswerSectionSeperateList(2);
+                    listOrderingPage.steps.verifyTextContentOfOptionInDropzoneCorrectAnswerSectionSeperateList('alpha', 3);
+                });
+            }
+
+            it('CSS of preview contents', { tags: 'css' }, () => {
+                utilities.verifyCSS(listOrderingPage.horizontalOptionPreviewTab(), {
+                    'background-color': css.color.defaultBackground,
+                    'border': `1px solid ${css.color.draggableOptionBorder}`
+                });
+                utilities.verifyCSS(listOrderingPage.horizontalOptionPreviewTab().find('.question-text-wrapper'), {
+                    'color': css.color.text,
+                    'font-size': css.fontSize.default,
+                    'font-weight': css.fontWeight.regular
+                });
+                utilities.verifyCSS(listOrderingPage.horizontalOptionPreviewTab().find('.question-text-wrapper'), {
+                    'color': css.color.text,
+                    'font-size': css.fontSize.default,
+                    'font-weight': css.fontWeight.regular
+                });
+                switch (view) {
+                    case 'Question preview':
+                    case 'Item preview':
+                    case 'Item view':
+                    case 'Item preview':
+                    case 'Student view':
+                    case 'Grading view':
+                        utilities.verifyCSS(utilities.getNthElement(listOrderingPage.horizontalOptionPreviewTab(), 1).find('.drag-icon-button path').eq(1), {
+                            'color': css.color.secondaryBtn
+                        });
+                        break;
+                    case 'Correct answer view':
+                        break;
+                    default:
+                        throw new Error('Invalid view');
+                }
+            });
+
+            it('Accessibility of preview contents', { tags: 'a11y' }, () => {
+                cy.checkAccessibility(listOrderingPage.horizontalOptionPreviewTab().parents('[class*="question-preview-wrapper"]'));
+            });
+        });
+    });
+});