itemengine-cypress-automation 1.0.36 → 1.0.37

package/cypress/e2e/ILC/ListSorting/listSortingEditTabBasicSection.js

@@ -4,9 +4,8 @@ import utilities from "../../../support/helpers/utilities";
 const css = Cypress.env('css');
 
 let options = ['seed', 'sprout', 'plant', 'flower'];
-let correctAnswerArray = ['flower', 'plant', 'sprout', 'seed'];
 
-describe('Create Item page - list sorting: Question Instructions, Options, Set Correct Answer', () => {
+describe('Create Item page - list sorting: Question Instructions, Set Correct Answer', () => {
     before(() => {
         cy.loginAs('admin');
     });
@@ -31,280 +30,6 @@ describe('Create Item page - list sorting: Question Instructions, Options, Set C
         listSortingPage.tests.verifyQuestionInstructionsInputFieldPreviewTab();
     });
 
-    describe('Options section - Edit tab', () => {
-        abortEarlySetup();
-        before(() => {
-            cy.log('Navigating to list sorting question type');
-            listSortingPage.steps.navigateToCreateQuestion('list sorting');
-        });
-
-        listSortingPage.tests.verifyOptionSectionEditTabFunctionality();
-    });
-
-    describe('Options section - Set correct answer section for correct tab', () => {
-        abortEarlySetup();
-        before(() => {
-            cy.log('Navigating to list sorting question type');
-            listSortingPage.steps.navigateToCreateQuestion('list sorting');
-            cy.barsPreLoaderWait();
-        });
-
-        it('By default, 4 \'Options\' should be displayed in the source options section with drag handle and 4 empty options should be displayed in the target section in set correct answer section', () => {
-            for (let index = 0; index < 4; index++) {
-                listSortingPage.steps.verifyDragHandleButtonOfOptionInSetCorrectAnswerSection(index)
-            }
-            utilities.verifyElementCount(listSortingPage.setCorrectAnswerSectionOption(), 4);
-            utilities.verifyElementCount(listSortingPage.setCorrectAnswerSectionSourceOptionWrapper(), 4);
-            utilities.verifyInnerText(listSortingPage.setCorrectAnswerSectionSourceOptionWrapper(), '');
-            utilities.verifyElementCount(listSortingPage.setCorrectAnswerSectionTargetOptionWrapper(), 4);
-            utilities.verifyInnerText(listSortingPage.setCorrectAnswerSectionTargetOptionWrapper(), '');
-        });
-
-        it('When user clicks on the \'Delete\' option button then the source and target option wrapper and the option should get removed from the \'Set correct answer\' section', () => {
-            listSortingPage.steps.deleteOption(0);
-            for (let index = 0; index < 3; index++) {
-                listSortingPage.steps.verifyDragHandleButtonOfOptionInSetCorrectAnswerSection(index)
-            }
-            utilities.verifyElementCount(listSortingPage.setCorrectAnswerSectionOption(), 3);
-            utilities.verifyElementCount(listSortingPage.setCorrectAnswerSectionSourceOptionWrapper(), 3);
-            utilities.verifyElementCount(listSortingPage.setCorrectAnswerSectionTargetOptionWrapper(), 3);
-        });
-
-        it('When user adds an option using the \'Add option\' button then source and target option wrapper and the option should be added in the \'Set correct answer\' section', () => {
-            listSortingPage.steps.addOption()
-            for (let index = 0; index < 4; index++) {
-                listSortingPage.steps.verifyDragHandleButtonOfOptionInSetCorrectAnswerSection(index)
-            }
-            utilities.verifyElementCount(listSortingPage.setCorrectAnswerSectionOption(), 4);
-        });
-
-        it('When user adds text to all the options input field, the added text should be displayed in the \'Set correct answer\' section', () => {
-            listSortingPage.steps.addInputToOptionsInputField(options)
-            listSortingPage.steps.verifySourceOptionsTextContentInSetCorrectAnswerSection(options);
-        });
-
-        it('When user edits an option in the \'Options\' section then the correct option should be updated in the source section', () => {
-            listSortingPage.steps.editOptionInputField(0, 'This is an edited option');
-            listSortingPage.steps.verifySourceOptionsTextContentInSetCorrectAnswerSection(['This is an edited option', 'sprout', 'plant', 'flower']);
-        })
-
-        //Need to update once https://redmine.zeuslearning.com/issues/539590 is resolved
-        it('When user sets the order in the target section of the \'Set correct answer\' section and edits an option in the \'Options\' section then the correct option should be updated', () => {
-            listSortingPage.steps.clickAndDropOptionFromSourceToTargetInSetCorrectAnswerSection('flower', 0);
-            listSortingPage.steps.clickAndDropOptionFromSourceToTargetInSetCorrectAnswerSection('plant', 1);
-            listSortingPage.steps.clickAndDropOptionFromSourceToTargetInSetCorrectAnswerSection('sprout', 2);
-            listSortingPage.steps.clickAndDropOptionFromSourceToTargetInSetCorrectAnswerSection('This is an edited option', 3);
-            listSortingPage.steps.verifyTargetOptionsTextContentInSetCorrectAnswerSection(['flower', 'plant', 'sprout', 'This is an edited option']);
-            listSortingPage.steps.editOptionInputField(0, 'seed');
-            listSortingPage.steps.verifyTargetOptionsTextContentInSetCorrectAnswerSection(correctAnswerArray);
-        });
-    });
-
-    describe('Option section - Preview tab', () => {
-        abortEarlySetup();
-        before(() => {
-            cy.log('Navigating to list sorting question type');
-            listSortingPage.steps.navigateToCreateQuestion('list sorting');
-            cy.barsPreLoaderWait();
-            listSortingPage.steps.addQuestionInstructions();
-            listSortingPage.steps.switchToPreviewTab();
-        });
-
-        it('By default, 4 \'Options\' should be displayed in the source options section with drag handle and 4 empty options should be displayed in the target section in \'Preview tab\'', () => {
-            for (let index = 0; index < 4; index++) {
-                listSortingPage.steps.verifyDragHandleButtonOfOptionInPreviewTab(index)
-            }
-            utilities.verifyElementCount(listSortingPage.previewTabOption(), 4);
-            utilities.verifyElementCount(listSortingPage.previewTabSourceOptionWrapper(), 4);
-            utilities.verifyInnerText(listSortingPage.previewTabSourceOptionWrapper(), '');
-            utilities.verifyElementCount(listSortingPage.previewTabTargetOptionWrapper(), 4);
-            utilities.verifyInnerText(listSortingPage.previewTabTargetOptionWrapper(), '');
-        });
-
-        it('When user clicks on the \'Delete\' option button then the source and target option wrapper and the option should get removed from the \'Preview tab\' section', () => {
-            listSortingPage.steps.switchToEditTab();
-            listSortingPage.steps.deleteOption(0);
-            listSortingPage.steps.switchToPreviewTab();
-            for (let index = 0; index < 3; index++) {
-                listSortingPage.steps.verifyDragHandleButtonOfOptionInPreviewTab(index)
-            }
-            utilities.verifyElementCount(listSortingPage.previewTabOption(), 3);
-            utilities.verifyElementCount(listSortingPage.previewTabSourceOptionWrapper(), 3);
-            utilities.verifyElementCount(listSortingPage.previewTabTargetOptionWrapper(), 3);
-        });
-
-        it('When user adds an option using the \'Add option\' button then source and target option wrapper and the option should be added in the \'Preview tab\' section', () => {
-            listSortingPage.steps.switchToEditTab();
-            listSortingPage.steps.addOption();
-            listSortingPage.steps.switchToPreviewTab();
-            for (let index = 0; index < 4; index++) {
-                listSortingPage.steps.verifyDragHandleButtonOfOptionInPreviewTab(index);
-            }
-            utilities.verifyElementCount(listSortingPage.previewTabOption(), 4);
-            utilities.verifyElementCount(listSortingPage.previewTabSourceOptionWrapper(), 4);
-            utilities.verifyElementCount(listSortingPage.previewTabTargetOptionWrapper(), 4);
-        });
-
-        it('When user adds text to all the options input field, the added text should be displayed in the \'Preview tab\' section', () => {
-            listSortingPage.steps.switchToEditTab();
-            listSortingPage.steps.addInputToOptionsInputField(options);
-            listSortingPage.steps.switchToPreviewTab();
-            listSortingPage.steps.verifySourceOptionsTextContentInPreviewTab(options);
-        });
-
-        it('When user sets the order in the target section of the \'Set correct answer\' section and edits an option in the \'Options\' section then the correct option should be updated', () => {
-            listSortingPage.steps.clickAndDropOptionFromSourceToTargetInPreviewTab('flower', 0);
-            listSortingPage.steps.clickAndDropOptionFromSourceToTargetInPreviewTab('plant', 1);
-            listSortingPage.steps.clickAndDropOptionFromSourceToTargetInPreviewTab('sprout', 2);
-            listSortingPage.steps.clickAndDropOptionFromSourceToTargetInPreviewTab('seed', 3);
-            listSortingPage.steps.verifyTargetOptionsTextContentInPreviewTab(correctAnswerArray);
-        });
-    });
-
-    describe('Option section contents with Image, Equation, Text and Link - Set correct answer section for correct tab', () => {
-        abortEarlySetup();
-        before(() => {
-            cy.log('Navigating to list sorting question type');
-            listSortingPage.steps.navigateToCreateQuestion('list sorting');
-            cy.log('Add Image to option input field')
-            listSortingPage.steps.focusInOptionsInputField(0);
-            listSortingPage.steps.selectImageOptionFromCKEditorToolbar()
-            listSortingPage.steps.addImageToInputField();
-            cy.log('Add equation to option input field')
-            listSortingPage.steps.focusInOptionsInputField(1);
-            listSortingPage.steps.selectEquationEditorOptionFromCKEditorToolbar();
-            listSortingPage.steps.addGenericEquationUsingEquationEditorToCKEditorInputField();
-            cy.log('Add link to option input field')
-            listSortingPage.steps.focusInOptionsInputField(2);
-            listSortingPage.steps.selectLinkOptionFromCKEditorToolbar();
-            listSortingPage.steps.addLinkToInputField()
-            cy.log('Add bold text to input field')
-            listSortingPage.steps.focusInOptionsInputField(3);
-            listSortingPage.steps.selectBoldOptionFromCKEditorToolbar();
-            listSortingPage.steps.addBoldTextInputToOptionsInputField(3);
-        });
-
-        listSortingPage.tests.verifyImageEquationLinkBoldTextInSetCorrectAnswerSection();
-    });
-
-    describe('Option section contents with Image, Equation, Text and Link - Set correct answer section for alternate tab', () => {
-        abortEarlySetup();
-        before(() => {
-            cy.log('Navigating to list sorting question type');
-            listSortingPage.steps.navigateToCreateQuestion('list sorting');
-            cy.log('Add Image to option input field')
-            listSortingPage.steps.focusInOptionsInputField(0);
-            listSortingPage.steps.selectImageOptionFromCKEditorToolbar()
-            listSortingPage.steps.addImageToInputField();
-            cy.log('Add equation to option input field')
-            listSortingPage.steps.focusInOptionsInputField(1);
-            listSortingPage.steps.selectEquationEditorOptionFromCKEditorToolbar();
-            listSortingPage.steps.addGenericEquationUsingEquationEditorToCKEditorInputField();
-            cy.log('Add link to option input field')
-            listSortingPage.steps.focusInOptionsInputField(2);
-            listSortingPage.steps.selectLinkOptionFromCKEditorToolbar();
-            listSortingPage.steps.addLinkToInputField()
-            cy.log('Add bold text to input field')
-            listSortingPage.steps.focusInOptionsInputField(3);
-            listSortingPage.steps.selectBoldOptionFromCKEditorToolbar();
-            listSortingPage.steps.addBoldTextInputToOptionsInputField(3);
-            listSortingPage.steps.clickAndDropOptionFromSourceIndexToTargetIndexInSetCorrectAnswerSection(0, 0);
-            listSortingPage.steps.clickAndDropOptionFromSourceIndexToTargetIndexInSetCorrectAnswerSection(1, 1);
-            listSortingPage.steps.clickAndDropOptionFromSourceIndexToTargetIndexInSetCorrectAnswerSection(2, 2);
-            listSortingPage.steps.clickAndDropOptionFromSourceIndexToTargetIndexInSetCorrectAnswerSection(3, 3);
-            listSortingPage.steps.allotPoints('20');
-            listSortingPage.steps.addAlternateTab(1);
-        });
-
-        listSortingPage.tests.verifyImageEquationLinkBoldTextInSetCorrectAnswerSection()
-
-        it('When user adds an option using \'Add option\' button then source and target option wrapper and the option should be added and on deleting the option, the source and target option wrapper and the option should get removed', () => {
-            listSortingPage.steps.addOption()
-            for (let index = 0; index < 4; index++) {
-                listSortingPage.steps.verifyDragHandleButtonOfOptionInSetCorrectAnswerSection(index)
-            }
-            utilities.verifyElementCount(listSortingPage.setCorrectAnswerSectionOption(), 5);
-            utilities.verifyElementCount(listSortingPage.setCorrectAnswerSectionSourceOptionWrapper(), 5);
-            utilities.verifyElementCount(listSortingPage.setCorrectAnswerSectionTargetOptionWrapper(), 5);
-            listSortingPage.steps.deleteOption(4);
-            utilities.verifyElementCount(listSortingPage.setCorrectAnswerSectionOption(), 4);
-            utilities.verifyElementCount(listSortingPage.setCorrectAnswerSectionSourceOptionWrapper(), 4);
-            utilities.verifyElementCount(listSortingPage.setCorrectAnswerSectionTargetOptionWrapper(), 4);
-        });
-    });
-
-    describe('Option section contents with Image, Equation, Text and Link - Preview tab', () => {
-        abortEarlySetup();
-        before(() => {
-            cy.log('Navigating to list sorting question type');
-            listSortingPage.steps.navigateToCreateQuestion('list sorting');
-            cy.log('Add Image to option input field')
-            listSortingPage.steps.focusInOptionsInputField(0);
-            listSortingPage.steps.selectImageOptionFromCKEditorToolbar()
-            listSortingPage.steps.addImageToInputField();
-            cy.log('Add equation to option input field')
-            listSortingPage.steps.focusInOptionsInputField(1);
-            listSortingPage.steps.selectEquationEditorOptionFromCKEditorToolbar();
-            listSortingPage.steps.addGenericEquationUsingEquationEditorToCKEditorInputField();
-            cy.log('Add link to option input field')
-            listSortingPage.steps.focusInOptionsInputField(2);
-            listSortingPage.steps.selectLinkOptionFromCKEditorToolbar();
-            listSortingPage.steps.addLinkToInputField()
-            cy.log('Add bold text to input field')
-            listSortingPage.steps.focusInOptionsInputField(3);
-            listSortingPage.steps.selectBoldOptionFromCKEditorToolbar();
-            listSortingPage.steps.addBoldTextInputToOptionsInputField(3);
-            listSortingPage.steps.switchToPreviewTab()
-        });
-
-        it('When user adds an image, equation, text and link to the options input they should be displayed in the \'Preview tab\' along with drag handles', () => {
-            for (let index = 0; index < 4; index++) {
-                listSortingPage.steps.verifyDragHandleButtonOfOptionInPreviewTab(index)
-            }
-            listSortingPage.steps.verifyImageEquationLinkBoldTextInPreviewTabSourceOption()
-        });
-
-        it('When user hovers on the option it should be displayed in active state and on removing the focus the option should return to the default state', () => {
-            listSortingPage.steps.verifyDefaultAndActiveStateOfOptionInPreviewTab();
-        });
-
-        //Failing due to https://redmine.zeuslearning.com/issues/537907
-        it('CSS of \'Preview tab\' when image, equation and link are added', { tags: 'css' }, () => {
-            utilities.verifyCSS(listSortingPage.previewTabOption().eq(0).find('img'), {
-                'color': css.color.text,
-                'font-size': css.fontSize.default,
-                'font-weight': css.fontWeight.regular
-            });
-            utilities.verifyCSS(listSortingPage.previewTabOption().eq(1).find('.question-text-wrapper'), {
-                'color': css.color.text,
-                'font-size': css.fontSize.default,
-                'font-weight': css.fontWeight.regular
-            });
-            utilities.verifyCSS(listSortingPage.previewTabOption().eq(2).find('a'), {
-                'color': css.color.linkText,
-                'font-size': css.fontSize.default,
-                'font-weight': css.fontWeight.regular
-            });
-            utilities.verifyCSS(listSortingPage.previewTabOption().eq(3).find('.question-text-wrapper'), {
-                'color': css.color.text,
-                'font-size': css.fontSize.default,
-                'font-weight': css.fontWeight.regular
-            });
-        });
-
-        it('Accessibility of \'Preview tab\' when image, equation and link are added', { tags: 'a11y' }, () => {
-            cy.checkAccessibility(listSortingPage.previewTabQuestionWrapper());
-        });
-
-        it('When user sets the order in target section then the options should be displayed in the target section of the Set correct answer section', () => {
-            listSortingPage.steps.clickAndDropOptionFromSourceIndexToTargetIndexInPreviewTab(0, 0);
-            listSortingPage.steps.clickAndDropOptionFromSourceIndexToTargetIndexInPreviewTab(1, 1);
-            listSortingPage.steps.clickAndDropOptionFromSourceIndexToTargetIndexInPreviewTab(2, 2);
-            listSortingPage.steps.clickAndDropOptionFromSourceIndexToTargetIndexInPreviewTab(3, 3);
-            listSortingPage.steps.verifyImageEquationLinkBoldTextInPreviewTabTargetOption();
-        });
-    });
-
     describe('Labels section - Edit tab contents', () => {
         abortEarlySetup();
         before(() => {

package/cypress/e2e/ILC/ListSorting/listSortingOptionsSection.js

@@ -0,0 +1,287 @@
+import { listSortingPage } from "../../../pages";
+import abortEarlySetup from "../../../support/helpers/abortEarly";
+import utilities from "../../../support/helpers/utilities";
+const css = Cypress.env('css');
+
+let options = ['seed', 'sprout', 'plant', 'flower'];
+let correctAnswerArray = ['flower', 'plant', 'sprout', 'seed'];
+
+describe('Create Item page - list sorting: Options', () => {
+    before(() => {
+        cy.loginAs('admin');
+    });
+
+    describe('Options section - Edit tab', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigating to list sorting question type');
+            listSortingPage.steps.navigateToCreateQuestion('list sorting');
+        });
+
+        listSortingPage.tests.verifyOptionSectionEditTabFunctionality();
+    });
+
+    describe('Options section - Set correct answer section for correct tab', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigating to list sorting question type');
+            listSortingPage.steps.navigateToCreateQuestion('list sorting');
+            cy.barsPreLoaderWait();
+        });
+
+        it('By default, 4 \'Options\' should be displayed in the source options section with drag handle and 4 empty options should be displayed in the target section in set correct answer section', () => {
+            for (let index = 0; index < 4; index++) {
+                listSortingPage.steps.verifyDragHandleButtonOfOptionInSetCorrectAnswerSection(index)
+            }
+            utilities.verifyElementCount(listSortingPage.setCorrectAnswerSectionOption(), 4);
+            utilities.verifyElementCount(listSortingPage.setCorrectAnswerSectionSourceOptionWrapper(), 4);
+            utilities.verifyInnerText(listSortingPage.setCorrectAnswerSectionSourceOptionWrapper(), '');
+            utilities.verifyElementCount(listSortingPage.setCorrectAnswerSectionTargetOptionWrapper(), 4);
+            utilities.verifyInnerText(listSortingPage.setCorrectAnswerSectionTargetOptionWrapper(), '');
+        });
+
+        it('When user clicks on the \'Delete\' option button then the source and target option wrapper and the option should get removed from the \'Set correct answer\' section', () => {
+            listSortingPage.steps.deleteOption(0);
+            for (let index = 0; index < 3; index++) {
+                listSortingPage.steps.verifyDragHandleButtonOfOptionInSetCorrectAnswerSection(index)
+            }
+            utilities.verifyElementCount(listSortingPage.setCorrectAnswerSectionOption(), 3);
+            utilities.verifyElementCount(listSortingPage.setCorrectAnswerSectionSourceOptionWrapper(), 3);
+            utilities.verifyElementCount(listSortingPage.setCorrectAnswerSectionTargetOptionWrapper(), 3);
+        });
+
+        it('When user adds an option using the \'Add option\' button then source and target option wrapper and the option should be added in the \'Set correct answer\' section', () => {
+            listSortingPage.steps.addOption()
+            for (let index = 0; index < 4; index++) {
+                listSortingPage.steps.verifyDragHandleButtonOfOptionInSetCorrectAnswerSection(index)
+            }
+            utilities.verifyElementCount(listSortingPage.setCorrectAnswerSectionOption(), 4);
+        });
+
+        it('When user adds text to all the options input field, the added text should be displayed in the \'Set correct answer\' section', () => {
+            listSortingPage.steps.addInputToOptionsInputField(options)
+            listSortingPage.steps.verifySourceOptionsTextContentInSetCorrectAnswerSection(options);
+        });
+
+        it('When user edits an option in the \'Options\' section then the correct option should be updated in the source section', () => {
+            listSortingPage.steps.editOptionInputField(0, 'This is an edited option');
+            listSortingPage.steps.verifySourceOptionsTextContentInSetCorrectAnswerSection(['This is an edited option', 'sprout', 'plant', 'flower']);
+        })
+
+        //Need to update once https://redmine.zeuslearning.com/issues/539590 is resolved
+        it('When user sets the order in the target section of the \'Set correct answer\' section and edits an option in the \'Options\' section then the correct option should be updated', () => {
+            listSortingPage.steps.clickAndDropOptionFromSourceToTargetInSetCorrectAnswerSection('flower', 0);
+            listSortingPage.steps.clickAndDropOptionFromSourceToTargetInSetCorrectAnswerSection('plant', 1);
+            listSortingPage.steps.clickAndDropOptionFromSourceToTargetInSetCorrectAnswerSection('sprout', 2);
+            listSortingPage.steps.clickAndDropOptionFromSourceToTargetInSetCorrectAnswerSection('This is an edited option', 3);
+            listSortingPage.steps.verifyTargetOptionsTextContentInSetCorrectAnswerSection(['flower', 'plant', 'sprout', 'This is an edited option']);
+            listSortingPage.steps.editOptionInputField(0, 'seed');
+            listSortingPage.steps.verifyTargetOptionsTextContentInSetCorrectAnswerSection(correctAnswerArray);
+        });
+    });
+
+    describe('Option section - Preview tab', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigating to list sorting question type');
+            listSortingPage.steps.navigateToCreateQuestion('list sorting');
+            cy.barsPreLoaderWait();
+            listSortingPage.steps.addQuestionInstructions();
+            listSortingPage.steps.switchToPreviewTab();
+        });
+
+        it('By default, 4 \'Options\' should be displayed in the source options section with drag handle and 4 empty options should be displayed in the target section in \'Preview tab\'', () => {
+            for (let index = 0; index < 4; index++) {
+                listSortingPage.steps.verifyDragHandleButtonOfOptionInPreviewTab(index)
+            }
+            utilities.verifyElementCount(listSortingPage.previewTabOption(), 4);
+            utilities.verifyElementCount(listSortingPage.previewTabSourceOptionWrapper(), 4);
+            utilities.verifyInnerText(listSortingPage.previewTabSourceOptionWrapper(), '');
+            utilities.verifyElementCount(listSortingPage.previewTabTargetOptionWrapper(), 4);
+            utilities.verifyInnerText(listSortingPage.previewTabTargetOptionWrapper(), '');
+        });
+
+        it('When user clicks on the \'Delete\' option button then the source and target option wrapper and the option should get removed from the \'Preview tab\' section', () => {
+            listSortingPage.steps.switchToEditTab();
+            listSortingPage.steps.deleteOption(0);
+            listSortingPage.steps.switchToPreviewTab();
+            for (let index = 0; index < 3; index++) {
+                listSortingPage.steps.verifyDragHandleButtonOfOptionInPreviewTab(index)
+            }
+            utilities.verifyElementCount(listSortingPage.previewTabOption(), 3);
+            utilities.verifyElementCount(listSortingPage.previewTabSourceOptionWrapper(), 3);
+            utilities.verifyElementCount(listSortingPage.previewTabTargetOptionWrapper(), 3);
+        });
+
+        it('When user adds an option using the \'Add option\' button then source and target option wrapper and the option should be added in the \'Preview tab\' section', () => {
+            listSortingPage.steps.switchToEditTab();
+            listSortingPage.steps.addOption();
+            listSortingPage.steps.switchToPreviewTab();
+            for (let index = 0; index < 4; index++) {
+                listSortingPage.steps.verifyDragHandleButtonOfOptionInPreviewTab(index);
+            }
+            utilities.verifyElementCount(listSortingPage.previewTabOption(), 4);
+            utilities.verifyElementCount(listSortingPage.previewTabSourceOptionWrapper(), 4);
+            utilities.verifyElementCount(listSortingPage.previewTabTargetOptionWrapper(), 4);
+        });
+
+        it('When user adds text to all the options input field, the added text should be displayed in the \'Preview tab\' section', () => {
+            listSortingPage.steps.switchToEditTab();
+            listSortingPage.steps.addInputToOptionsInputField(options);
+            listSortingPage.steps.switchToPreviewTab();
+            listSortingPage.steps.verifySourceOptionsTextContentInPreviewTab(options);
+        });
+
+        it('When user sets the order in the target section of the \'Set correct answer\' section and edits an option in the \'Options\' section then the correct option should be updated', () => {
+            listSortingPage.steps.clickAndDropOptionFromSourceToTargetInPreviewTab('flower', 0);
+            listSortingPage.steps.clickAndDropOptionFromSourceToTargetInPreviewTab('plant', 1);
+            listSortingPage.steps.clickAndDropOptionFromSourceToTargetInPreviewTab('sprout', 2);
+            listSortingPage.steps.clickAndDropOptionFromSourceToTargetInPreviewTab('seed', 3);
+            listSortingPage.steps.verifyTargetOptionsTextContentInPreviewTab(correctAnswerArray);
+        });
+    });
+
+    describe('Option section contents with Image, Equation, Text and Link - Set correct answer section for correct tab', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigating to list sorting question type');
+            listSortingPage.steps.navigateToCreateQuestion('list sorting');
+            cy.log('Add Image to option input field')
+            listSortingPage.steps.focusInOptionsInputField(0);
+            listSortingPage.steps.selectImageOptionFromCKEditorToolbar()
+            listSortingPage.steps.addImageToInputField();
+            cy.log('Add equation to option input field')
+            listSortingPage.steps.focusInOptionsInputField(1);
+            listSortingPage.steps.selectEquationEditorOptionFromCKEditorToolbar();
+            listSortingPage.steps.addGenericEquationUsingEquationEditorToCKEditorInputField();
+            cy.log('Add link to option input field')
+            listSortingPage.steps.focusInOptionsInputField(2);
+            listSortingPage.steps.selectLinkOptionFromCKEditorToolbar();
+            listSortingPage.steps.addLinkToInputField()
+            cy.log('Add bold text to input field')
+            listSortingPage.steps.focusInOptionsInputField(3);
+            listSortingPage.steps.selectBoldOptionFromCKEditorToolbar();
+            listSortingPage.steps.addBoldTextInputToOptionsInputField(3);
+        });
+
+        listSortingPage.tests.verifyImageEquationLinkBoldTextInSetCorrectAnswerSection();
+    });
+
+    describe('Option section contents with Image, Equation, Text and Link - Set correct answer section for alternate tab', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigating to list sorting question type');
+            listSortingPage.steps.navigateToCreateQuestion('list sorting');
+            cy.log('Add Image to option input field')
+            listSortingPage.steps.focusInOptionsInputField(0);
+            listSortingPage.steps.selectImageOptionFromCKEditorToolbar()
+            listSortingPage.steps.addImageToInputField();
+            cy.log('Add equation to option input field')
+            listSortingPage.steps.focusInOptionsInputField(1);
+            listSortingPage.steps.selectEquationEditorOptionFromCKEditorToolbar();
+            listSortingPage.steps.addGenericEquationUsingEquationEditorToCKEditorInputField();
+            cy.log('Add link to option input field')
+            listSortingPage.steps.focusInOptionsInputField(2);
+            listSortingPage.steps.selectLinkOptionFromCKEditorToolbar();
+            listSortingPage.steps.addLinkToInputField()
+            cy.log('Add bold text to input field')
+            listSortingPage.steps.focusInOptionsInputField(3);
+            listSortingPage.steps.selectBoldOptionFromCKEditorToolbar();
+            listSortingPage.steps.addBoldTextInputToOptionsInputField(3);
+            listSortingPage.steps.clickAndDropOptionFromSourceIndexToTargetIndexInSetCorrectAnswerSection(0, 0);
+            listSortingPage.steps.clickAndDropOptionFromSourceIndexToTargetIndexInSetCorrectAnswerSection(1, 1);
+            listSortingPage.steps.clickAndDropOptionFromSourceIndexToTargetIndexInSetCorrectAnswerSection(2, 2);
+            listSortingPage.steps.clickAndDropOptionFromSourceIndexToTargetIndexInSetCorrectAnswerSection(3, 3);
+            listSortingPage.steps.allotPoints('20');
+            listSortingPage.steps.addAlternateTab(1);
+        });
+
+        listSortingPage.tests.verifyImageEquationLinkBoldTextInSetCorrectAnswerSection()
+
+        it('When user adds an option using \'Add option\' button then source and target option wrapper and the option should be added and on deleting the option, the source and target option wrapper and the option should get removed', () => {
+            listSortingPage.steps.addOption()
+            for (let index = 0; index < 4; index++) {
+                listSortingPage.steps.verifyDragHandleButtonOfOptionInSetCorrectAnswerSection(index)
+            }
+            utilities.verifyElementCount(listSortingPage.setCorrectAnswerSectionOption(), 5);
+            utilities.verifyElementCount(listSortingPage.setCorrectAnswerSectionSourceOptionWrapper(), 5);
+            utilities.verifyElementCount(listSortingPage.setCorrectAnswerSectionTargetOptionWrapper(), 5);
+            listSortingPage.steps.deleteOption(4);
+            utilities.verifyElementCount(listSortingPage.setCorrectAnswerSectionOption(), 4);
+            utilities.verifyElementCount(listSortingPage.setCorrectAnswerSectionSourceOptionWrapper(), 4);
+            utilities.verifyElementCount(listSortingPage.setCorrectAnswerSectionTargetOptionWrapper(), 4);
+        });
+    });
+
+    describe('Option section contents with Image, Equation, Text and Link - Preview tab', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigating to list sorting question type');
+            listSortingPage.steps.navigateToCreateQuestion('list sorting');
+            cy.log('Add Image to option input field')
+            listSortingPage.steps.focusInOptionsInputField(0);
+            listSortingPage.steps.selectImageOptionFromCKEditorToolbar()
+            listSortingPage.steps.addImageToInputField();
+            cy.log('Add equation to option input field')
+            listSortingPage.steps.focusInOptionsInputField(1);
+            listSortingPage.steps.selectEquationEditorOptionFromCKEditorToolbar();
+            listSortingPage.steps.addGenericEquationUsingEquationEditorToCKEditorInputField();
+            cy.log('Add link to option input field')
+            listSortingPage.steps.focusInOptionsInputField(2);
+            listSortingPage.steps.selectLinkOptionFromCKEditorToolbar();
+            listSortingPage.steps.addLinkToInputField()
+            cy.log('Add bold text to input field')
+            listSortingPage.steps.focusInOptionsInputField(3);
+            listSortingPage.steps.selectBoldOptionFromCKEditorToolbar();
+            listSortingPage.steps.addBoldTextInputToOptionsInputField(3);
+            listSortingPage.steps.switchToPreviewTab()
+        });
+
+        it('When user adds an image, equation, text and link to the options input they should be displayed in the \'Preview tab\' along with drag handles', () => {
+            for (let index = 0; index < 4; index++) {
+                listSortingPage.steps.verifyDragHandleButtonOfOptionInPreviewTab(index)
+            }
+            listSortingPage.steps.verifyImageEquationLinkBoldTextInPreviewTabSourceOption()
+        });
+
+        it('When user hovers on the option it should be displayed in active state and on removing the focus the option should return to the default state', () => {
+            listSortingPage.steps.verifyDefaultAndActiveStateOfOptionInPreviewTab();
+        });
+
+        //Failing due to https://redmine.zeuslearning.com/issues/537907
+        it('CSS of \'Preview tab\' when image, equation and link are added', { tags: 'css' }, () => {
+            utilities.verifyCSS(listSortingPage.previewTabOption().eq(0).find('img'), {
+                'color': css.color.text,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular
+            });
+            utilities.verifyCSS(listSortingPage.previewTabOption().eq(1).find('.question-text-wrapper'), {
+                'color': css.color.text,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular
+            });
+            utilities.verifyCSS(listSortingPage.previewTabOption().eq(2).find('a'), {
+                'color': css.color.linkText,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular
+            });
+            utilities.verifyCSS(listSortingPage.previewTabOption().eq(3).find('.question-text-wrapper'), {
+                'color': css.color.text,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular
+            });
+        });
+
+        it('Accessibility of \'Preview tab\' when image, equation and link are added', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(listSortingPage.previewTabQuestionWrapper());
+        });
+
+        it('When user sets the order in target section then the options should be displayed in the target section of the Set correct answer section', () => {
+            listSortingPage.steps.clickAndDropOptionFromSourceIndexToTargetIndexInPreviewTab(0, 0);
+            listSortingPage.steps.clickAndDropOptionFromSourceIndexToTargetIndexInPreviewTab(1, 1);
+            listSortingPage.steps.clickAndDropOptionFromSourceIndexToTargetIndexInPreviewTab(2, 2);
+            listSortingPage.steps.clickAndDropOptionFromSourceIndexToTargetIndexInPreviewTab(3, 3);
+            listSortingPage.steps.verifyImageEquationLinkBoldTextInPreviewTabTargetOption();
+        });
+    });
+});