itemengine-cypress-automation 1.0.31 → 1.0.36

package/cypress/e2e/ILC/ListOrdering/listOrderingAdditionalSettingsBasic.js

@@ -0,0 +1,300 @@
+import { listOrderingPage } from "../../../pages/listOrderingPage";
+import abortEarlySetup from "../../../support/helpers/abortEarly";
+import utilities from "../../../support/helpers/utilities";
+const css = Cypress.env('css');
+
+const answerNumerationDropdownOptions = ['Numerical', 'Uppercase alphabet', 'Lowercase alphabet'];
+const fontSizeDropdownOptions = ['Default', 'Small', 'Normal', 'Large', 'Extra large', 'Huge'];
+const fontSizes = ['16px', '12px', '14px', '17px', '20px', '24px'];
+let options = ['plant', 'sprout', 'flower', 'seed'];
+let correctAnswerArray = ['seed', 'sprout', 'plant', 'flower'];
+
+describe('Create Item page - List ordering: Additional settings basic', () => {
+    before(() => {
+        cy.loginAs('admin');
+    });
+
+    describe('Additional Settings accordion', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigating to list ordering question type');
+            listOrderingPage.steps.navigateToCreateQuestion('list ordering');
+        });
+
+        listOrderingPage.tests.verifyAdditonalSettingsAccordionProperties();
+    });
+
+    describe('Additional settings: Font size contents', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigating to list ordering question type');
+            listOrderingPage.steps.navigateToCreateQuestion('list ordering');
+            cy.log('Adding question instructions, setting correct answer order and adding points for Autoscored scoring type and switching to Preview tab');
+            cy.barsPreLoaderWait();
+            listOrderingPage.steps.addQuestionInstructions();
+            listOrderingPage.steps.addInputToOptionsInputField(options);
+            listOrderingPage.steps.clickAndReorderOptionInSetCorrectAnswerSection('seed', 0);
+            listOrderingPage.steps.clickAndReorderOptionInSetCorrectAnswerSection('sprout', 1);
+            listOrderingPage.steps.verifyOptionsTextContentInSetCorrectAnswerSection(correctAnswerArray);
+            listOrderingPage.steps.allotPoints('20');
+            listOrderingPage.steps.expandAdditonalSettings();
+            listOrderingPage.steps.checkAllowStudentsToCheckAnswerCheckbox();
+        });
+
+        listOrderingPage.tests.verifyFontSizeSectionContents();
+    });
+
+    //Failing due to - https://redmine.zeuslearning.com/issues/538526
+    describe('Additional settings: Font size contents set correct answer section', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigating to list ordering question type');
+            listOrderingPage.steps.navigateToCreateQuestion('list ordering');
+            cy.log('Adding question instructions, setting correct answer order and adding points for Autoscored scoring type and switching to Preview tab');
+            cy.barsPreLoaderWait();
+            listOrderingPage.steps.addQuestionInstructions();
+            listOrderingPage.steps.addInputToOptionsInputField(options);
+            listOrderingPage.steps.clickAndReorderOptionInSetCorrectAnswerSection('seed', 0);
+            listOrderingPage.steps.clickAndReorderOptionInSetCorrectAnswerSection('sprout', 1);
+            listOrderingPage.steps.verifyOptionsTextContentInSetCorrectAnswerSection(correctAnswerArray);
+            listOrderingPage.steps.allotPoints('20');
+            listOrderingPage.steps.expandAdditonalSettings();
+            listOrderingPage.steps.checkIncludeLablesCheckbox();
+            listOrderingPage.steps.addInputToTopLabelInputField('Top label');
+            listOrderingPage.steps.addInputToBottomLabelInputField('Bottom label');
+        });
+
+        fontSizeDropdownOptions.forEach((option, fontsIndex) => {
+            it(`When the user selects \'${option}\' option from the Font Size dropdown, then font size of the set correct answer section (options, labels) should be changed to ${option}`, () => {
+                listOrderingPage.steps.selectFontSizeOptionFromFontSizeDropdown(fontsIndex)
+                listOrderingPage.fontSizeDropdown()
+                    .verifyInnerText(`${option}`);
+                utilities.verifyCSS(listOrderingPage.setCorrectAnswerSectionOption(), {
+                    'font-size': fontSizes[fontsIndex]
+                });
+                utilities.verifyCSS(listOrderingPage.setCorrectAnswerSectionTopLabel(), {
+                    'font-size': fontSizes[fontsIndex]
+                });
+                utilities.verifyCSS(listOrderingPage.setCorrectAnswerSectionBottomLabel(), {
+                    'font-size': fontSizes[fontsIndex]
+                });
+            });
+        });
+    });
+
+    describe('Additional settings: Font size contents preview tab section', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigating to list ordering question type');
+            listOrderingPage.steps.navigateToCreateQuestion('list ordering');
+            cy.log('Adding question instructions, setting correct answer order and adding points for Autoscored scoring type and switching to Preview tab');
+            cy.barsPreLoaderWait();
+            listOrderingPage.steps.addQuestionInstructions();
+            listOrderingPage.steps.addInputToOptionsInputField(options);
+            listOrderingPage.steps.clickAndReorderOptionInSetCorrectAnswerSection('seed', 0);
+            listOrderingPage.steps.clickAndReorderOptionInSetCorrectAnswerSection('sprout', 1);
+            listOrderingPage.steps.verifyOptionsTextContentInSetCorrectAnswerSection(correctAnswerArray);
+            listOrderingPage.steps.allotPoints('20');
+            listOrderingPage.steps.expandAdditonalSettings();
+            listOrderingPage.steps.checkAllowStudentsToCheckAnswerCheckbox();
+            listOrderingPage.steps.selectAnswerNumerationDropdownOption(`${answerNumerationDropdownOptions[2]}`);
+            listOrderingPage.steps.checkIncludeLablesCheckbox();
+            listOrderingPage.steps.addInputToTopLabelInputField('Top label');
+            listOrderingPage.steps.addInputToBottomLabelInputField('Bottom label');
+        });
+
+        fontSizeDropdownOptions.forEach((option, fontsIndex) => {
+            it(`When the user selects \'${option}\' option from the Font Size dropdown, then font size of the preview (options, question instructions question stems) should be changed to ${option} in the preview tab Answer table`, () => {
+                listOrderingPage.steps.selectFontSizeOptionFromFontSizeDropdown(fontsIndex)
+                utilities.verifyInnerText(listOrderingPage.fontSizeDropdown(), `${option}`)
+                listOrderingPage.steps.switchToPreviewTab();
+                utilities.verifyCSS(listOrderingPage.questionInstructionsText(), {
+                    'font-size': fontSizes[fontsIndex]
+                });
+                utilities.verifyCSS(listOrderingPage.previewTabOption(), {
+                    'font-size': fontSizes[fontsIndex]
+                });
+                utilities.verifyCSS(listOrderingPage.previewTabTopLabel(), {
+                    'font-size': fontSizes[fontsIndex]
+                });
+                utilities.verifyCSS(listOrderingPage.previewTabBottomLabel(), {
+                    'font-size': fontSizes[fontsIndex]
+                });
+                cy.log('Font size of Answer numeration and correct answer container when Show correct answer is checked')
+                listOrderingPage.steps.checkShowCorrectAnswerCheckbox()
+                utilities.verifyCSS(listOrderingPage.optionNumeration(), {
+                    'font-size': fontSizes[fontsIndex]
+                });
+                utilities.verifyCSS(listOrderingPage.correctAnswerContainerAnswerWrapper(), {
+                    'font-size': fontSizes[fontsIndex]
+                });
+                utilities.verifyCSS(listOrderingPage.correctAnswerContainerAnswerWrapper().find('[class*="ListOrderingResponsestyles__IndexWrapper"]'), {
+                    'font-size': fontSizes[fontsIndex]
+                });
+                utilities.verifyCSS(listOrderingPage.correctAnswerContainerCorrectAnswersLabel(), {
+                    'font-size': fontSizes[fontsIndex]
+                });
+                cy.log('Uncheck Show correct answer checkbox')
+                listOrderingPage.steps.uncheckShowCorrectAnswerCheckbox()
+                cy.log('Font size of Answer numeration when Check answer is selected')
+                listOrderingPage.steps.checkAnswer()
+                utilities.verifyCSS(listOrderingPage.optionNumeration(), {
+                    'font-size': fontSizes[fontsIndex]
+                });
+                listOrderingPage.steps.switchToEditTab();
+            });
+        });
+    });
+
+    describe('Additional settings: Check answer', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigating to list ordering question type');
+            listOrderingPage.steps.navigateToCreateQuestion('list ordering');
+            cy.log('Adding question instructions, setting correct answer order and adding points for Autoscored scoring type and switching to Preview tab');
+            cy.barsPreLoaderWait();
+            listOrderingPage.steps.addQuestionInstructions();
+            listOrderingPage.steps.addInputToOptionsInputField(options);
+            listOrderingPage.steps.clickAndReorderOptionInSetCorrectAnswerSection('seed', 0);
+            listOrderingPage.steps.clickAndReorderOptionInSetCorrectAnswerSection('sprout', 1);
+            listOrderingPage.steps.verifyOptionsTextContentInSetCorrectAnswerSection(correctAnswerArray);
+            listOrderingPage.steps.allotPoints('20');
+            listOrderingPage.steps.expandAdditonalSettings();
+        });
+
+        listOrderingPage.tests.verifyCheckAnswerSectionAndPreviewTabCheckAnswerButton();
+    });
+
+    describe('Additional settings: Check answer functionality', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigating to list ordering question type');
+            listOrderingPage.steps.navigateToCreateQuestion('list ordering');
+            cy.log('Adding question instructions, setting correct answer order and adding points for Autoscored scoring type and switching to Preview tab');
+            cy.barsPreLoaderWait();
+            listOrderingPage.steps.addQuestionInstructions();
+            listOrderingPage.steps.addInputToOptionsInputField(options);
+            listOrderingPage.steps.clickAndReorderOptionInSetCorrectAnswerSection('seed', 0);
+            listOrderingPage.steps.clickAndReorderOptionInSetCorrectAnswerSection('sprout', 1);
+            listOrderingPage.steps.verifyOptionsTextContentInSetCorrectAnswerSection(correctAnswerArray);
+            listOrderingPage.steps.allotPoints('20');
+            listOrderingPage.steps.expandAdditonalSettings();
+            listOrderingPage.steps.setMaximumCheckAnswerAttempts(2);
+            listOrderingPage.steps.switchToPreviewTab()
+        });
+
+        it('When user attempts the question partially correct with some options at the correct position and some at incorrect then on clicking on the Check Answer button, green check-mark icons should be displayed beside the options at the correct position, red cross-mark icons should be displayed beside the options at incorrect position, a label \'Incorrect answer\' and border should be displayed below the question preview and the correct answer container should not be displayed', () => {
+            listOrderingPage.steps.clickAndReorderOptionInPrevewTab('flower', 3);
+            listOrderingPage.steps.verifyTextContentOfOptionsInPreviewTab(['plant', 'sprout', 'seed', 'flower']);
+            listOrderingPage.steps.checkAnswer()
+            listOrderingPage.steps.verifyIncorrectOptionsCrossmarkIcon('plant');
+            listOrderingPage.steps.verifyCorrectOptionsCheckmarkIcon('sprout');
+            listOrderingPage.steps.verifyIncorrectOptionsCrossmarkIcon('seed');
+            listOrderingPage.steps.verifyCorrectOptionsCheckmarkIcon('flower');
+            listOrderingPage.steps.verifyIncorrectAttemptBorder();
+            listOrderingPage.steps.verifyCorrectIncorrectAnswerLabel('Incorrect');
+            listOrderingPage.steps.verifyCorrectAnswerContainerDoesNotExist();
+        });
+
+        it('When user attempts the question correctly and clicks on the \'Check Answer\' button, green check-mark icons should be displayed beside the options at the correct position, a label \'Correct answer\' and border should be displayed below the question preview and the correct answer container should not be displayed', () => {
+            listOrderingPage.steps.clickAndReorderOptionInPrevewTab('seed', 0);
+            listOrderingPage.steps.clickAndReorderOptionInPrevewTab('sprout', 1);
+            listOrderingPage.steps.verifyTextContentOfOptionsInPreviewTab(correctAnswerArray);
+            listOrderingPage.steps.checkAnswer();
+            listOrderingPage.steps.verifyCorrectOptionsCheckmarkIcon('sprout');
+            listOrderingPage.steps.verifyCorrectOptionsCheckmarkIcon('seed');
+            listOrderingPage.steps.verifyCorrectOptionsCheckmarkIcon('plant');
+            listOrderingPage.steps.verifyCorrectOptionsCheckmarkIcon('flower');
+            listOrderingPage.steps.verifyCorrectAttemptBorder();
+            listOrderingPage.steps.verifyCorrectIncorrectAnswerLabel('Correct');
+            listOrderingPage.steps.verifyCorrectAnswerContainerDoesNotExist();
+        });
+
+        listOrderingPage.tests.verifyDisabledCheckAnswerButtonWithCSSAnda11y();
+
+        it('When the user updates the value of Maximum check answer attempts input field, it should get reflected on the Preview tab', () => {
+            listOrderingPage.steps.switchToEditTab();
+            listOrderingPage.steps.clearMaximumCheckAnswerAttemptsInputField();
+            listOrderingPage.steps.addInputToMaximumCheckAnswerAttemptsInputField(1);
+            listOrderingPage.steps.switchToPreviewTab();
+            listOrderingPage.steps.verifyCheckAnswerButtonEnabled();
+            listOrderingPage.steps.clickAndReorderOptionInPrevewTab('flower', 3);
+            listOrderingPage.steps.verifyTextContentOfOptionsInPreviewTab(['plant', 'sprout', 'seed', 'flower']);
+            listOrderingPage.steps.checkAnswer();
+            listOrderingPage.steps.verifyCheckAnswerButtonDisabled();
+        });
+
+        it('When the \'Maximum check answer attempts\' input field has value \'0\' and user switches to Preview tab, then the \'Check Answer\' button should be enabled and user should be able to check answer multiple times', () => {
+            listOrderingPage.steps.switchToEditTab();
+            listOrderingPage.steps.clearMaximumCheckAnswerAttemptsInputField();
+            listOrderingPage.steps.addInputToMaximumCheckAnswerAttemptsInputField(0);
+            cy.log('Switching to Preview tab');
+            listOrderingPage.steps.switchToPreviewTab();
+            listOrderingPage.steps.clickAndReorderOptionInPrevewTab('sprout', 3);
+            listOrderingPage.steps.clickAndReorderOptionInPrevewTab('flower', 0);
+            listOrderingPage.steps.verifyTextContentOfOptionsInPreviewTab(['flower', 'plant', 'seed', 'sprout']);
+            listOrderingPage.steps.checkAnswer();
+            listOrderingPage.steps.verifyIncorrectOptionsCrossmarkIcon('flower');
+            listOrderingPage.steps.verifyIncorrectOptionsCrossmarkIcon('plant');
+            listOrderingPage.steps.verifyIncorrectOptionsCrossmarkIcon('sprout');
+            listOrderingPage.steps.verifyIncorrectOptionsCrossmarkIcon('seed');
+            listOrderingPage.steps.verifyIncorrectAttemptBorder();
+            listOrderingPage.steps.verifyCorrectIncorrectAnswerLabel('Incorrect');
+            listOrderingPage.steps.verifyCorrectAnswerContainerDoesNotExist();
+            listOrderingPage.steps.verifyCheckAnswerButtonEnabled();
+            listOrderingPage.steps.clickAndReorderOptionInPrevewTab('seed', 0);
+            listOrderingPage.steps.clickAndReorderOptionInPrevewTab('sprout', 1);
+            listOrderingPage.steps.verifyTextContentOfOptionsInPreviewTab(['seed', 'sprout', 'flower', 'plant']);
+            listOrderingPage.steps.checkAnswer();
+            listOrderingPage.steps.verifyCorrectOptionsCheckmarkIcon('sprout');
+            listOrderingPage.steps.verifyCorrectOptionsCheckmarkIcon('seed');
+            listOrderingPage.steps.verifyIncorrectOptionsCrossmarkIcon('plant');
+            listOrderingPage.steps.verifyIncorrectOptionsCrossmarkIcon('flower');
+            listOrderingPage.steps.verifyIncorrectAttemptBorder();
+            listOrderingPage.steps.verifyCorrectIncorrectAnswerLabel('Incorrect');
+            listOrderingPage.steps.verifyCorrectAnswerContainerDoesNotExist();
+            listOrderingPage.steps.verifyCheckAnswerButtonEnabled();
+        });
+
+        it('When the \'Maximum check answer attempts\' input field is empty and user switches to Preview tab, then the \'Check Answer\' button should be enabled and user should be able to check answer multiple times', () => {
+            listOrderingPage.steps.switchToEditTab();
+            listOrderingPage.steps.clearMaximumCheckAnswerAttemptsInputField()
+            listOrderingPage.steps.switchToPreviewTab();
+            listOrderingPage.steps.clickAndReorderOptionInPrevewTab('sprout', 3);
+            listOrderingPage.steps.clickAndReorderOptionInPrevewTab('flower', 0);
+            listOrderingPage.steps.verifyTextContentOfOptionsInPreviewTab(['flower', 'plant', 'seed', 'sprout']);
+            listOrderingPage.steps.checkAnswer();
+            listOrderingPage.steps.verifyIncorrectOptionsCrossmarkIcon('flower');
+            listOrderingPage.steps.verifyIncorrectOptionsCrossmarkIcon('plant');
+            listOrderingPage.steps.verifyIncorrectOptionsCrossmarkIcon('sprout');
+            listOrderingPage.steps.verifyIncorrectOptionsCrossmarkIcon('seed');
+            listOrderingPage.steps.verifyIncorrectAttemptBorder();
+            listOrderingPage.steps.verifyCorrectIncorrectAnswerLabel('Incorrect');
+            listOrderingPage.steps.verifyCorrectAnswerContainerDoesNotExist();
+            listOrderingPage.steps.verifyCheckAnswerButtonEnabled();
+            listOrderingPage.steps.clickAndReorderOptionInPrevewTab('seed', 0);
+            listOrderingPage.steps.clickAndReorderOptionInPrevewTab('sprout', 1);
+            listOrderingPage.steps.verifyTextContentOfOptionsInPreviewTab(['seed', 'sprout', 'flower', 'plant']);
+            listOrderingPage.steps.checkAnswer();
+            listOrderingPage.steps.verifyCorrectOptionsCheckmarkIcon('sprout');
+            listOrderingPage.steps.verifyCorrectOptionsCheckmarkIcon('seed');
+            listOrderingPage.steps.verifyIncorrectOptionsCrossmarkIcon('plant');
+            listOrderingPage.steps.verifyIncorrectOptionsCrossmarkIcon('flower');
+            listOrderingPage.steps.verifyIncorrectAttemptBorder();
+            listOrderingPage.steps.verifyCorrectIncorrectAnswerLabel('Incorrect');
+            listOrderingPage.steps.verifyCorrectAnswerContainerDoesNotExist();
+            listOrderingPage.steps.verifyCheckAnswerButtonEnabled();
+        });
+    });
+
+    describe('Additional Settings: Details section', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigating to list ordering question type');
+            listOrderingPage.steps.navigateToCreateQuestion('list ordering');
+            listOrderingPage.steps.expandAdditonalSettings();
+        });
+
+        listOrderingPage.tests.verifyDetailsSection();
+    });
+});

package/cypress/e2e/ILC/ListOrdering/listOrderingAdditionalSettingsOptionStyleDropdown.js

@@ -0,0 +1,302 @@
+import { listOrderingPage } from "../../../pages/listOrderingPage";
+import abortEarlySetup from "../../../support/helpers/abortEarly";
+import utilities from "../../../support/helpers/utilities";
+const css = Cypress.env('css');
+
+const optionStyleDropdownOptions = ['Grid', 'Minimal', 'Inline'];
+let options = ['plant', 'sprout', 'flower', 'seed'];
+let correctAnswerArray = ['seed', 'sprout', 'plant', 'flower'];
+
+describe('Create Item page - List ordering: Additional settings - Options style dropdown', () => {
+    before(() => {
+        cy.loginAs('admin');
+    });
+
+    describe('Additional settings: Option style contents', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigating to list ordering question type');
+            listOrderingPage.steps.navigateToCreateQuestion('list ordering');
+            listOrderingPage.steps.expandAdditonalSettings();
+        });
+
+        it(`\'Option style\' label and dropdown should be displayed and by default, ${optionStyleDropdownOptions[0]} option should be selected in the dropdown`, () => {
+            utilities.verifyInnerText(listOrderingPage.optionStyleLabel(), 'Option style');
+            utilities.verifyElementVisibilityState(listOrderingPage.optionStyleLabel(), 'visible');
+            utilities.verifyInnerText(listOrderingPage.optionStyleDropdown(), 'Grid');
+        });
+
+        it('CSS of Option style section', { tags: 'css' }, () => {
+            utilities.verifyCSS(listOrderingPage.optionStyleDropdown(), {
+                'color': css.color.liText,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular
+            });
+            utilities.verifyCSS(listOrderingPage.optionStyleLabel(), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.semibold
+            });
+        });
+
+        it(`When user clicks on the Option style dropdown a list of 3 options - ${optionStyleDropdownOptions} should be displayed`, () => {
+            listOrderingPage.steps.expandOptionStyleDropdown();
+            listOrderingPage.steps.verifyOptionStyleDropdownOptions(optionStyleDropdownOptions);
+        });
+
+        it('CSS of Option style dropdown in active state', { tags: 'css' }, () => {
+            utilities.verifyCSS(listOrderingPage.optionStyleDropdownOptions().eq(0), {
+                'color': css.color.liText,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular,
+                'background-color': css.color.liTextSelectedBg
+            });
+            utilities.verifyCSS(listOrderingPage.optionStyleDropdownOptions().eq(1), {
+                'color': css.color.liText,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular,
+                'background-color': css.color.transparent
+            });
+        });
+
+        it('Accessbility of Option style dropdown in active state', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(listOrderingPage.dropdownList());
+        });
+    });
+
+    describe('Additional settings: Option style - Grid set correct answer section', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigating to list ordering question type');
+            listOrderingPage.steps.navigateToCreateQuestion('list ordering');
+            cy.log('Adding question instructions, setting correct answer order and adding points for Autoscored scoring type and switching to Preview tab');
+            cy.barsPreLoaderWait();
+            listOrderingPage.steps.addQuestionInstructions();
+            listOrderingPage.steps.addInputToOptionsInputField(options);
+            listOrderingPage.steps.clickAndReorderOptionInSetCorrectAnswerSection('seed', 0);
+            listOrderingPage.steps.clickAndReorderOptionInSetCorrectAnswerSection('sprout', 1);
+            listOrderingPage.steps.verifyOptionsTextContentInSetCorrectAnswerSection(correctAnswerArray);
+            listOrderingPage.steps.allotPoints('20');
+            listOrderingPage.steps.expandAdditonalSettings();
+        });
+
+        it('When \'Grid\' option is selected in the \'Option style\' dropdown then borders and drag handle button should be displayed for options in the Set correct answer section', () => {
+            utilities.verifyInnerText(listOrderingPage.optionStyleDropdown(), 'Grid');
+            for (let index = 0; index < 4; index++) {
+                listOrderingPage.steps.verifyDragHandleButtonOfOptionInSetCorrectAnswerSection(index)
+            }
+            listOrderingPage.steps.verifyOptionsTextContentInSetCorrectAnswerSection(correctAnswerArray);
+            utilities.verifyCSS(listOrderingPage.setCorrectAnswerSectionOption(), {
+                'border': `1px solid ${css.color.titleContainerBorder}`
+            });
+            utilities.verifyCSS(listOrderingPage.setCorrectAnswerSectionOptionsWrapper(), {
+                'flex-direction': 'column'
+            });
+        });
+    });
+
+    describe('Additional settings: Option style - Grid preview tab', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigating to list ordering question type');
+            listOrderingPage.steps.navigateToCreateQuestion('list ordering');
+            cy.log('Adding question instructions, setting correct answer order and adding points for Autoscored scoring type and switching to Preview tab');
+            cy.barsPreLoaderWait();
+            listOrderingPage.steps.addQuestionInstructions();
+            listOrderingPage.steps.addInputToOptionsInputField(options);
+            listOrderingPage.steps.clickAndReorderOptionInSetCorrectAnswerSection('seed', 0);
+            listOrderingPage.steps.clickAndReorderOptionInSetCorrectAnswerSection('sprout', 1);
+            listOrderingPage.steps.verifyOptionsTextContentInSetCorrectAnswerSection(correctAnswerArray);
+            listOrderingPage.steps.allotPoints('20');
+            listOrderingPage.steps.expandAdditonalSettings();
+        });
+
+        it('When \'Grid\' option is selected in the \'Option style\' dropdown then borders and drag handle button should be displayed for options in the preview tab', () => {
+            utilities.verifyInnerText(listOrderingPage.optionStyleDropdown(), 'Grid');
+            listOrderingPage.steps.switchToPreviewTab()
+            for (let index = 0; index < 4; index++) {
+                listOrderingPage.steps.verifyDragHandleButtonOfOptionInPreviewTab(index)
+            }
+            listOrderingPage.steps.verifyTextContentOfOptionsInPreviewTab(options);
+            utilities.verifyCSS(listOrderingPage.previewTabOption(), {
+                'border': `1px solid ${css.color.titleContainerBorder}`
+            });
+            utilities.verifyCSS(listOrderingPage.previewTabOptionsWrapper(), {
+                'flex-direction': 'column'
+            });
+        });
+    });
+
+    describe('Additional settings: Option style - Minimal set correct answer section', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigating to list ordering question type');
+            listOrderingPage.steps.navigateToCreateQuestion('list ordering');
+            cy.log('Adding question instructions, setting correct answer order and adding points for Autoscored scoring type and switching to Preview tab');
+            cy.barsPreLoaderWait();
+            listOrderingPage.steps.addQuestionInstructions();
+            listOrderingPage.steps.addInputToOptionsInputField(options);
+            listOrderingPage.steps.clickAndReorderOptionInSetCorrectAnswerSection('seed', 0);
+            listOrderingPage.steps.clickAndReorderOptionInSetCorrectAnswerSection('sprout', 1);
+            listOrderingPage.steps.verifyOptionsTextContentInSetCorrectAnswerSection(correctAnswerArray);
+            listOrderingPage.steps.expandAdditonalSettings();
+        });
+
+        it('When \'Minimal\' option is selected in the \'Option style\' dropdown then borders should not be displayed in the Set correct answer section', () => {
+            listOrderingPage.steps.selectOptionStyleDropdownOption('Minimal')
+            utilities.verifyInnerText(listOrderingPage.optionStyleDropdown(), 'Minimal');
+            listOrderingPage.steps.verifyNoBorderForSetCorrectAnswerOption();
+            utilities.verifyCSS(listOrderingPage.setCorrectAnswerSectionOptionsWrapper(), {
+                'flex-direction': 'column'
+            });
+        });
+
+        listOrderingPage.tests.verifyAutoScoredAllOrNothingPointsAndMinimumScoreAwardedLabelAndInputField();
+
+        listOrderingPage.tests.verifyAllContentsOfSetCorrectAnswerSectionForScoringType('All or nothing', correctAnswerArray);
+
+        it('When user has selected Auto scored - Partial equal weights scoring type then \'Points\' label and input field along with points per response label and scores should be displayed in the Set correct answer section', () => {
+            listOrderingPage.steps.selectPartialEqualWeightsCheckbox()
+            listOrderingPage.steps.verifyDefaultPointsLabelAndInputField();
+            listOrderingPage.steps.verifyPointsPerResponseLabel()
+            listOrderingPage.steps.verifyPartialEqualWeightsPointsPerResponseScore('-');
+        });
+
+        listOrderingPage.tests.verifyAllContentsOfSetCorrectAnswerSectionForScoringType('Partial equal weights', correctAnswerArray);
+
+        it('When user has selected Auto scored - Partial different weights scoring type then \'Points per response\' label and input field should be displayed in the Set correct answer section', () => {
+            listOrderingPage.steps.selectPartialDifferentWeightsCheckbox()
+            listOrderingPage.steps.verifyPartialDifferentWeightsPointsPerResponseLabel();
+            listOrderingPage.steps.verifyPartialDifferentWeightsPointsInputFieldIsEmptyAndEnabled();
+        });
+
+        listOrderingPage.tests.verifyAllContentsOfSetCorrectAnswerSectionForScoringType('Partial different weights', correctAnswerArray);
+    });
+
+    describe('Additional settings: Option style - Minimal preview tab', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigating to list ordering question type');
+            listOrderingPage.steps.navigateToCreateQuestion('list ordering');
+            cy.log('Adding question instructions, setting correct answer order and adding points for Autoscored scoring type and switching to Preview tab');
+            cy.barsPreLoaderWait();
+            listOrderingPage.steps.addQuestionInstructions();
+            listOrderingPage.steps.addInputToOptionsInputField(options);
+            listOrderingPage.steps.clickAndReorderOptionInSetCorrectAnswerSection('seed', 0);
+            listOrderingPage.steps.clickAndReorderOptionInSetCorrectAnswerSection('sprout', 1);
+            listOrderingPage.steps.verifyOptionsTextContentInSetCorrectAnswerSection(correctAnswerArray);
+            listOrderingPage.steps.allotPoints('20');
+            listOrderingPage.steps.expandAdditonalSettings();
+        });
+
+        it('When \'Minimal\' option is selected in the \'Option style\' dropdown then borders should not be displayed and drag handle button should be displayed for options in the preview tab', () => {
+            listOrderingPage.steps.selectOptionStyleDropdownOption('Minimal')
+            utilities.verifyInnerText(listOrderingPage.optionStyleDropdown(), 'Minimal');
+            listOrderingPage.steps.switchToPreviewTab();
+            for (let index = 0; index < 4; index++) {
+                listOrderingPage.steps.verifyDragHandleButtonOfOptionInPreviewTab(index)
+            }
+            listOrderingPage.steps.verifyTextContentOfOptionsInPreviewTab(options);
+            listOrderingPage.steps.verifyNoBorderForPreviewTabOption();
+            utilities.verifyCSS(listOrderingPage.previewTabOptionsWrapper(), {
+                'flex-direction': 'column'
+            });
+        });
+    });
+
+    describe('Additional settings: Option style - Inline set correct answer section', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigating to list ordering question type');
+            listOrderingPage.steps.navigateToCreateQuestion('list ordering');
+            cy.log('Adding question instructions, setting correct answer order and adding points for Autoscored scoring type and switching to Preview tab');
+            cy.barsPreLoaderWait();
+            listOrderingPage.steps.addQuestionInstructions();
+            listOrderingPage.steps.addInputToOptionsInputField(options);
+            listOrderingPage.steps.clickAndReorderOptionInSetCorrectAnswerSection('seed', 0);
+            listOrderingPage.steps.clickAndReorderOptionInSetCorrectAnswerSection('sprout', 1);
+            listOrderingPage.steps.verifyOptionsTextContentInSetCorrectAnswerSection(correctAnswerArray);
+            listOrderingPage.steps.expandAdditonalSettings();
+        });
+
+        it('When \'Inline\' option is selected in the \'Option style\' dropdown then borders should not be displayed and drag handle button should be displayed for options and the options should be displayed in a line in the Set correct answer section', () => {
+            listOrderingPage.steps.selectOptionStyleDropdownOption('Inline')
+            utilities.verifyInnerText(listOrderingPage.optionStyleDropdown(), 'Inline');
+            listOrderingPage.steps.verifyNoBorderForSetCorrectAnswerOption();
+            utilities.verifyCSS(listOrderingPage.setCorrectAnswerSectionOptionsWrapper(), {
+                'flex-direction': 'row'
+            });
+        });
+
+        listOrderingPage.tests.verifyAutoScoredAllOrNothingPointsAndMinimumScoreAwardedLabelAndInputField();
+
+        listOrderingPage.tests.verifyAllContentsOfSetCorrectAnswerSectionForScoringType('All or nothing', correctAnswerArray);
+
+        it('When user has selected Auto scored - Partial equal weights scoring type then \'Points\' label and input field along with \'Points per response : \' should be displayed and points per response scores for all options should not be displayed in the Set correct answer section', () => {
+            listOrderingPage.steps.selectPartialEqualWeightsCheckbox();
+            listOrderingPage.steps.verifyDefaultPointsLabelAndInputField();
+            utilities.verifyInnerText(listOrderingPage.pointsPerResponseLabelForInlineOption(), 'Points per response :')
+            utilities.verifyElementVisibilityState(listOrderingPage.pointsPerResponseScoreForInlineOption(), 'exist');
+            utilities.verifyElementVisibilityState(listOrderingPage.pointsPerResponseLabel(), 'notExist');
+            utilities.verifyElementVisibilityState(listOrderingPage.partialEqualWeightsPointsPerResponseScore(), 'notExist');
+        });
+
+        listOrderingPage.tests.verifyAllContentsOfSetCorrectAnswerSectionForScoringType('Partial equal weights', correctAnswerArray);
+
+        it('When user gives a score input to \'Points\' input field, then the score should be equally divided and displayed besides each response under the \'Points per response\' label', () => {
+            listOrderingPage.steps.allotPoints('20');
+            utilities.verifyInnerText(listOrderingPage.pointsPerResponseScoreForInlineOption(), '5');
+        });
+
+
+        it('When user adds a option then the Points per response should be updated accordingly', () => {
+            listOrderingPage.steps.addOption();
+            utilities.verifyInnerText(listOrderingPage.pointsPerResponseScoreForInlineOption(), '4');
+        });
+
+        it('When user deletes a option then the Points per response should be updated accordingly', () => {
+            listOrderingPage.steps.deleteOption(4);
+            utilities.verifyInnerText(listOrderingPage.pointsPerResponseScoreForInlineOption(), '5');
+        });
+
+        it('When user has selected Auto scored - Partial different weights scoring type then \'Set points\' button should be displayed and \'Points per response\' label and input field should not be displayed in the Set correct answer section', () => {
+            listOrderingPage.steps.selectPartialDifferentWeightsCheckbox()
+            listOrderingPage.steps.verifySetPointsButton()
+            utilities.verifyElementVisibilityState(listOrderingPage.partialDifferentWeightsPointsPerResponseLabel(), 'notExist');
+            utilities.verifyElementVisibilityState(listOrderingPage.partialDifferentWeightsPointsInputField(), 'notExist');
+        });
+
+        listOrderingPage.tests.verifyAllContentsOfSetCorrectAnswerSectionForScoringType('Partial different weights', correctAnswerArray);
+    });
+
+    describe('Additional settings: Option style - Inline preview tab', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigating to list ordering question type');
+            listOrderingPage.steps.navigateToCreateQuestion('list ordering');
+            cy.log('Adding question instructions, setting correct answer order and adding points for Autoscored scoring type and switching to Preview tab');
+            cy.barsPreLoaderWait();
+            listOrderingPage.steps.addQuestionInstructions();
+            listOrderingPage.steps.addInputToOptionsInputField(options);
+            listOrderingPage.steps.clickAndReorderOptionInSetCorrectAnswerSection('seed', 0);
+            listOrderingPage.steps.clickAndReorderOptionInSetCorrectAnswerSection('sprout', 1);
+            listOrderingPage.steps.verifyOptionsTextContentInSetCorrectAnswerSection(correctAnswerArray);
+            listOrderingPage.steps.allotPoints('20');
+            listOrderingPage.steps.expandAdditonalSettings();
+        });
+
+        it('When \'Inline\' option is selected in the \'Option style\' dropdown then drag handle button and options should be displayed in a line and borders for options should not be displayed and in the preview tab', () => {
+            listOrderingPage.steps.selectOptionStyleDropdownOption('Inline')
+            utilities.verifyInnerText(listOrderingPage.optionStyleDropdown(), 'Inline');
+            listOrderingPage.steps.switchToPreviewTab()
+            for (let index = 0; index < 4; index++) {
+                listOrderingPage.steps.verifyDragHandleButtonOfOptionInPreviewTab(index)
+            }
+            listOrderingPage.steps.verifyTextContentOfOptionsInPreviewTab(options);
+            listOrderingPage.steps.verifyNoBorderForPreviewTabOption();
+            utilities.verifyCSS(listOrderingPage.previewTabOptionsWrapper(), {
+                'flex-direction': 'row'
+            });
+        });
+    });
+});