itemengine-cypress-automation 1.0.184-e2e-execution-crash-3b9d0d0.0 → 1.0.185-repoUpdate26April-b17eb46.0

package/cypress/e2e/ILC/TextSelection/studentViewSettings.js

@@ -0,0 +1,436 @@
+import { textSelectionPage } from "../../../pages";
+import abortEarlySetup from "../../../support/helpers/abortEarly";
+import utilities from "../../../support/helpers/utilities";
+const css = Cypress.env('css');
+
+const paragraphTextArray = ['All animals have a unique role to play in maintaining the balance of nature.', 'A lot of animal species exist in both, land and water. As a result, each of them has a purpose for their existence.', 'The animals divide into specific groups in biology. Amphibians are those which can live on both, land and water.', 'Mammals are ones which give birth to their offspring in the womb and have mammary glands.'];
+
+describe('Create Item page - Text selection: Student view settings', () => {
+    before(() => {
+        cy.loginAs('admin');
+    });
+
+    describe('Enable outer border : Edit tab', () => {
+        abortEarlySetup();
+        before(() => {
+            textSelectionPage.steps.navigateToCreateQuestion('text selection');
+            cy.barsPreLoaderWait();
+        });
+
+        textSelectionPage.tests.verifyStudentViewSettingsLabelAndCSS();
+
+        textSelectionPage.tests.verifyEnableOuterBorderContents();
+    });
+
+    describe('Enable outer border : Preview tab', () => {
+        abortEarlySetup();
+        before(() => {
+            textSelectionPage.steps.navigateToCreateQuestion('text selection');
+            cy.barsPreLoaderWait();
+            textSelectionPage.steps.switchToPreviewTab();
+        });
+
+        it('When the \'Enable outer border\' checkbox is in checked state, an outer border over the question preview should be visible', () => {
+            textSelectionPage.steps.verifyQuestionTextOuterBorderIsDisplayedInPreviewTab();
+        });
+
+        it('When the user unchecks the \'Enable outer border\' checkbox, then the outer border over the question preview should not be displayed', () => {
+            textSelectionPage.steps.switchToEditTab();
+            textSelectionPage.steps.uncheckEnableOuterBorderCheckbox();
+            textSelectionPage.steps.switchToPreviewTab();
+            textSelectionPage.steps.verifyQuestionTextOuterBorderIsNotDisplayedInPreviewTab();
+        });
+
+        it('CSS of \'Enable outer border\' checkbox - unchecked state', { tags: 'css' }, () => {
+            textSelectionPage.steps.switchToEditTab();
+            utilities.verifyCSS(textSelectionPage.enableOuterBorderCheckbox().parent().find('svg'), {
+                'fill': css.color.uncheckedCheckbox
+            });
+        });
+
+        it('Accessibility of \'Enable outer border\' checkbox - unchecked state', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(textSelectionPage.enableOuterBorderCheckbox().parents('[data-ngie-testid="enable-outer-border-checkbox"]'));
+        });
+    });
+
+    describe('Allow students to check answer: Edit tab', () => {
+        abortEarlySetup();
+        before(() => {
+            textSelectionPage.steps.navigateToCreateQuestion('text selection');
+            cy.barsPreLoaderWait();
+        });
+
+        textSelectionPage.tests.verifyAllowStudentsToCheckAnswerLabelAndCheckboxCSS();
+
+        textSelectionPage.tests.verifyMaximumAttemptsDropdownDisplayedWhenAllowStudentsToCheckAnswerIsChecked();
+
+        textSelectionPage.tests.verifyMaxCheckAnswerAttemptsDropdown();
+
+        textSelectionPage.tests.verifyAllowStudentsToCheckAnswerContentsCSSAndA11y();
+    });
+
+    describe('Allow students to check answer: Preview tab', () => {
+        abortEarlySetup();
+        before(() => {
+            textSelectionPage.steps.navigateToCreateQuestion('text selection');
+            cy.barsPreLoaderWait();
+            textSelectionPage.steps.clearQuestionInputField();
+            paragraphTextArray.forEach((paragraphText) => {
+                textSelectionPage.steps.addInputToQuestionInputField(`${paragraphText}{enter}`);
+            });
+            textSelectionPage.steps.addInputToQuestionInputField('{backspace}');
+            textSelectionPage.steps.switchTextSelectionMode('Paragraph');
+            textSelectionPage.steps.clickOnOptionInSpecifyPossibleOptionsSection(paragraphTextArray[0]);
+            textSelectionPage.steps.clickOnOptionInSpecifyPossibleOptionsSection(paragraphTextArray[1]);
+            textSelectionPage.steps.clickOnOptionInSpecifyPossibleOptionsSection(paragraphTextArray[2]);
+            textSelectionPage.steps.selectOptionInSpecifyCorrectAnswerSection(paragraphTextArray[0]);
+            textSelectionPage.steps.selectOptionInSpecifyCorrectAnswerSection(paragraphTextArray[1]);
+            textSelectionPage.steps.selectOptionInSpecifyCorrectAnswerSection(paragraphTextArray[2]);
+            textSelectionPage.steps.allotPoints(20);
+        });
+
+        it('When the user has added options and specified correct answer and points then on checking the \'Allow students to check answer\' checkbox the Check answer button should be displayed in the preview tab', () => {
+            textSelectionPage.steps.checkAllowStudentToCheckAnswerCheckbox();
+            textSelectionPage.steps.switchToPreviewTab();
+            utilities.verifyInnerText(textSelectionPage.checkAnswerButton(), 'Check answer');
+            utilities.verifyElementVisibilityState(textSelectionPage.checkAnswerButton(), 'visible');
+        });
+
+        it('When the user selects an option and checks the answer then an icon should be displayed beside the selected option and the check answer button should be in enabled state', () => {
+            textSelectionPage.steps.selectOptionInPreviewTab(paragraphTextArray[0]);
+            textSelectionPage.steps.checkAnswer();
+            textSelectionPage.steps.verifyCorrectIconForOption(paragraphTextArray[0]);
+            textSelectionPage.steps.verifyCheckAnswerButtonEnabled();
+        });
+
+        it('When the user selects an option from the Maximum check answer attempts dropdown then the user should be able to check answer only those many times in the preview tab', () => {
+            textSelectionPage.steps.switchToEditTab();
+            textSelectionPage.steps.expandMaxCheckAnswerAttemptsDropdown();
+            textSelectionPage.steps.selectMaxCheckAnswerAttemptsDropdownListOption('1');
+            textSelectionPage.steps.switchToPreviewTab();
+            textSelectionPage.steps.selectOptionInPreviewTab(paragraphTextArray[0]);
+            textSelectionPage.steps.checkAnswer();
+            textSelectionPage.steps.verifyCheckAnswerButtonDisabled();
+        });
+
+        textSelectionPage.tests.verifyDisabledCheckAnswerButtonWithCSSAndA11y();
+
+        it('When the user updates the value of \'Maximum check answer attempts\' dropdown, it should get reflected on the Preview tab', () => {
+            textSelectionPage.steps.switchToEditTab();
+            textSelectionPage.steps.expandMaxCheckAnswerAttemptsDropdown();
+            textSelectionPage.steps.selectMaxCheckAnswerAttemptsDropdownListOption('4');
+            textSelectionPage.steps.switchToPreviewTab();
+            textSelectionPage.steps.verifyCheckAnswerButtonEnabled();
+            textSelectionPage.steps.selectOptionInPreviewTab(paragraphTextArray[0]);
+            textSelectionPage.steps.checkAnswer();
+            textSelectionPage.steps.verifyCheckAnswerButtonEnabled();
+            textSelectionPage.steps.selectOptionInPreviewTab(paragraphTextArray[1]);
+            textSelectionPage.steps.checkAnswer();
+            textSelectionPage.steps.verifyCheckAnswerButtonEnabled();
+            textSelectionPage.steps.selectOptionInPreviewTab(paragraphTextArray[2]);
+            textSelectionPage.steps.checkAnswer();
+            textSelectionPage.steps.verifyCheckAnswerButtonEnabled();
+        });
+    });
+
+    describe('Show the available options to students: Edit tab', () => {
+        abortEarlySetup();
+        before(() => {
+            textSelectionPage.steps.navigateToCreateQuestion('text selection');
+            cy.barsPreLoaderWait();
+        });
+
+        it('\'Show the available options to students\' label and checkbox should be displayed. By default, \'Show the available options to students\' checkbox should be in unchecked state', () => {
+            utilities.verifyInnerText(textSelectionPage.showAvailableOptionsToStudentsLabel(), 'Show the available options to students');
+            utilities.verifyElementVisibilityState(textSelectionPage.showAvailableOptionsToStudentsLabel(), 'visible');
+            utilities.verifyElementVisibilityState(textSelectionPage.showAvailableOptionsToStudentsCheckbox(), 'exist');
+            textSelectionPage.steps.verifyShowAvailableOptionsToStudentsCheckboxIsUnchecked();
+        });
+
+        it('CSS of \'Show the available options to students\' checkbox and label - unchecked state', { tags: 'css' }, () => {
+            utilities.verifyCSS(textSelectionPage.showAvailableOptionsToStudentsLabel(), {
+                'color': css.color.labelText,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.regular
+            });
+            utilities.verifyCSS(textSelectionPage.showAvailableOptionsToStudentsCheckbox().parent().find('svg'), {
+                'fill': css.color.uncheckedCheckbox
+            });
+        });
+
+        it('Accessibility of \'Show the available options to students\' checkbox - unchecked state', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(textSelectionPage.showAvailableOptionsToStudentsCheckbox().parents('[data-ngie-testid="show-the-available-options-to-students-checkbox"]'));
+        });
+
+        it('User should be able to check the \'Show the available options to students\' checkbox', () => {
+            textSelectionPage.steps.checkShowAvailableOptionsToStudentsCheckbox();
+        });
+
+        it('CSS of \'Enable outer border\' label and checkbox - checked state', { tags: 'css' }, () => {
+            utilities.verifyCSS(textSelectionPage.showAvailableOptionsToStudentsCheckbox().parent().find('svg g g').eq(0), {
+                'fill': css.color.activeButtons
+            });
+        });
+
+        it('Accessibility of \'Show the available options to students\' checkbox - checked state', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(textSelectionPage.showAvailableOptionsToStudentsCheckbox().parents('[data-ngie-testid="show-the-available-options-to-students-checkbox"]'));
+        });
+    });
+
+    describe('Show the available options to students: Preview tab', () => {
+        abortEarlySetup();
+        before(() => {
+            textSelectionPage.steps.navigateToCreateQuestion('text selection');
+            cy.barsPreLoaderWait();
+            textSelectionPage.steps.clearQuestionInputField();
+            paragraphTextArray.forEach((paragraphText) => {
+                textSelectionPage.steps.addInputToQuestionInputField(`${paragraphText}{enter}`);
+            });
+            textSelectionPage.steps.addInputToQuestionInputField('{backspace}');
+            textSelectionPage.steps.switchTextSelectionMode('Paragraph');
+            textSelectionPage.steps.clickOnOptionInSpecifyPossibleOptionsSection(paragraphTextArray[0]);
+            textSelectionPage.steps.clickOnOptionInSpecifyPossibleOptionsSection(paragraphTextArray[1]);
+            textSelectionPage.steps.clickOnOptionInSpecifyPossibleOptionsSection(paragraphTextArray[2]);
+            textSelectionPage.steps.selectOptionInSpecifyCorrectAnswerSection(paragraphTextArray[0]);
+            textSelectionPage.steps.selectOptionInSpecifyCorrectAnswerSection(paragraphTextArray[1]);
+            textSelectionPage.steps.selectOptionInSpecifyCorrectAnswerSection(paragraphTextArray[2]);
+            textSelectionPage.steps.allotPoints(20);
+            textSelectionPage.steps.switchToPreviewTab();
+        });
+
+        it('When \'Show the available options to students\' checkbox is unchecked, then in preview tab the options should be displayed in standard state without any highlighted background', () => {
+            textSelectionPage.steps.verifyStandardStateOptionInPreviewTab(paragraphTextArray[0]);
+            textSelectionPage.steps.verifyStandardStateOptionInPreviewTab(paragraphTextArray[1]);
+            textSelectionPage.steps.verifyStandardStateOptionInPreviewTab(paragraphTextArray[2]);
+        });
+
+        it('When \'Show the available options to students\' checkbox is checked, then in preview tab the available options should be displayed with a highlighted background', () => {
+            textSelectionPage.steps.switchToEditTab();
+            textSelectionPage.steps.checkShowAvailableOptionsToStudentsCheckbox();
+            textSelectionPage.steps.switchToPreviewTab();
+            textSelectionPage.steps.verifyOptionIsDisplayedToStudentsInPreviewTab(paragraphTextArray[0]);
+            textSelectionPage.steps.verifyOptionIsDisplayedToStudentsInPreviewTab(paragraphTextArray[1]);
+            textSelectionPage.steps.verifyOptionIsDisplayedToStudentsInPreviewTab(paragraphTextArray[2]);
+        });
+
+        it('When user selects an option in preview tab, then that option should be selected', () => {
+            textSelectionPage.steps.selectOptionInPreviewTab(paragraphTextArray[0]);
+            textSelectionPage.steps.verifySelectedStateOptionInPreviewTab(paragraphTextArray[0], 'blue');
+        });
+
+        it('When user deselects an option in preview tab, then that option should be displayed as available option with a highlighted background', () => {
+            textSelectionPage.steps.deselectOptionInPreviewTab(paragraphTextArray[0]);
+            textSelectionPage.steps.verifyOptionIsDisplayedToStudentsInPreviewTab(paragraphTextArray[0]);
+        });
+
+        it('Accessibility of options with highlighted background', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(textSelectionPage.questionTextWrapperPreviewTab());
+        });
+
+        it('When \'Show the available options to students\' checkbox is unchecked again, then in preview tab the available options should be not be displayed with a highlighted background', () => {
+            textSelectionPage.steps.switchToEditTab();
+            textSelectionPage.steps.uncheckShowAvailableOptionsToStudentsCheckbox();
+            textSelectionPage.steps.switchToPreviewTab();
+            textSelectionPage.steps.verifyStandardStateOptionInPreviewTab(paragraphTextArray[0]);
+            textSelectionPage.steps.verifyStandardStateOptionInPreviewTab(paragraphTextArray[1]);
+            textSelectionPage.steps.verifyStandardStateOptionInPreviewTab(paragraphTextArray[2]);
+        });
+    });
+
+    describe('Maximum number of possible selections and Show student the maximum number of possible selections: Edit tab', () => {
+        const listOptions = ['No limit', '1', '2', '3'];
+        abortEarlySetup();
+        before(() => {
+            textSelectionPage.steps.navigateToCreateQuestion('text selection');
+            cy.barsPreLoaderWait();
+            textSelectionPage.steps.clearQuestionInputField();
+            paragraphTextArray.forEach((paragraphText) => {
+                textSelectionPage.steps.addInputToQuestionInputField(`${paragraphText}{enter}`);
+            });
+            textSelectionPage.steps.addInputToQuestionInputField('{backspace}');
+            textSelectionPage.steps.switchTextSelectionMode('Paragraph');
+        });
+
+        it('\'Maximum number of possible selections\' label and dropdown should be displayed. By default the \'No limit\' should be the selected option in the \'Maximum number of possible selections\' dropdown', () => {
+            utilities.verifyInnerText(textSelectionPage.maxNumberOfPossibleSelectionsLabel(), 'Maximum number of possible selections');
+            utilities.verifyElementVisibilityState(textSelectionPage.maxNumberOfPossibleSelectionsLabel(), 'visible');
+            utilities.verifyInnerText(textSelectionPage.maxNumberOfPossibleSelectionsDropdown(), 'No limit');
+        });
+
+        it('When no options are selected in specify possible options section, then only No limit option should be displayed in the \'Maximum number of possible selections\' dropdown', () => {
+            textSelectionPage.steps.expandMaxNumberOfPossibleSelectionsDropdown();
+            utilities.verifyElementVisibilityState(textSelectionPage.dropdownList(), 'visible');
+            textSelectionPage.steps.verifyMaxNumberOfPossibleSelectionsDropdownListOptions([listOptions[0]]);
+            textSelectionPage.steps.selectOptionFromMaxNumberOfPossibleSelectionsDropdown('no limit');
+        });
+
+        it('When the user adds new options, the list options in the \'Maximum number of possible selections\' dropdown should also update accordingly', () => {
+            textSelectionPage.steps.clickOnOptionInSpecifyPossibleOptionsSection(paragraphTextArray[0]);
+            textSelectionPage.steps.clickOnOptionInSpecifyPossibleOptionsSection(paragraphTextArray[1]);
+            textSelectionPage.steps.clickOnOptionInSpecifyPossibleOptionsSection(paragraphTextArray[2]);
+            textSelectionPage.steps.expandMaxNumberOfPossibleSelectionsDropdown();
+            utilities.verifyElementVisibilityState(textSelectionPage.dropdownList(), 'visible');
+            textSelectionPage.steps.verifyMaxNumberOfPossibleSelectionsDropdownListOptions(listOptions);
+            textSelectionPage.steps.selectOptionFromMaxNumberOfPossibleSelectionsDropdown('no limit');
+        });
+
+        it('CSS of \'Maximum number of possible selections\' dropdown in active state', { tags: 'css' }, () => {
+            utilities.verifyCSS(textSelectionPage.dropdownListOption().eq(1), {
+                'color': css.color.liText,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular,
+                'background-color': css.color.liTextSelectedBg
+            });
+            utilities.verifyCSS(textSelectionPage.dropdownListOption().eq(0), {
+                'background-color': css.color.transparent
+            });
+        });
+
+        it('Accessibility of \'Maximum number of possible selections\' dropdown in active state', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(textSelectionPage.dropdownList())
+        });
+
+        it('When the user selects a finite number of options value from the \'Maximum number of possible selections\' dropdown, then the user should only be able to set correct answers in the specify correct answer section according to the selected option', () => {
+            textSelectionPage.steps.expandMaxNumberOfPossibleSelectionsDropdown();
+            textSelectionPage.steps.selectOptionFromMaxNumberOfPossibleSelectionsDropdown('2');
+            textSelectionPage.steps.selectOptionInSpecifyCorrectAnswerSection(paragraphTextArray[0]);
+            textSelectionPage.steps.selectOptionInSpecifyCorrectAnswerSection(paragraphTextArray[1]);
+        });
+
+        it('When user tries to select more number of options than the maximum number of options dropdown, then error message \'Error: maximum # options can be selected.\' should be displayed and user should not be able to select the option', () => {
+            textSelectionPage.steps.clickOnOptionInSpecifyCorrectAnswerSection(paragraphTextArray[2]);
+            textSelectionPage.steps.verifyOptionIsNotSelectedInSpecifyCorrectAnswerSection(paragraphTextArray[2]);
+            utilities.verifyInnerText(textSelectionPage.maximumOptionsCanBeSelectedErrorMessage(), 'Error: maximum 2 options can be selected.');
+        });
+
+        it('\'Show student the maximum number of possible selections\' label and checkbox should be displayed. By default the checkbox should be unchecked', () => {
+            utilities.verifyInnerText(textSelectionPage.showStudentMaximumNumberOfPossibleSelectionsLabel(), 'Show student the maximum number of possible selections');
+            utilities.verifyElementVisibilityState(textSelectionPage.showStudentMaximumNumberOfPossibleSelectionsLabel(), 'visible');
+            utilities.verifyElementVisibilityState(textSelectionPage.showStudentMaximumNumberOfPossibleSelectionsCheckbox(), 'exist');
+            textSelectionPage.steps.verifyShowStudentTheMaxNumberOfSelectionsCheckboxIsUnchecked();
+        });
+
+        it('CSS of \'Show student the maximum number of possible selections\' checkbox and label - unchecked state', { tags: 'css' }, () => {
+            utilities.verifyCSS(textSelectionPage.showStudentMaximumNumberOfPossibleSelectionsLabel(), {
+                'color': css.color.labelText,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.regular
+            });
+            utilities.verifyCSS(textSelectionPage.showStudentMaximumNumberOfPossibleSelectionsCheckbox().parent().find('svg'), {
+                'fill': css.color.uncheckedCheckbox
+            });
+        });
+
+        it('When the user checks the \'Show student the maximum number of possible selections\' checkbox, help text should \'Maximum answers in each dropzone: #\' not be displayed in the specify correct answer section', () => {
+            textSelectionPage.steps.checkShowStudentTheMaxNumberOfSelectionsCheckbox();
+            utilities.verifyElementVisibilityState(textSelectionPage.maximumNumberOfSelectionsHelpText(), 'notExist');
+        });
+
+        it('CSS of \'Show student the maximum number of possible selections\' label and checkbox - checked state', { tags: 'css' }, () => {
+            utilities.verifyCSS(textSelectionPage.showStudentMaximumNumberOfPossibleSelectionsCheckbox().parent().find('svg g g').eq(0), {
+                'fill': css.color.activeButtons
+            });
+        });
+
+        it('Accessibility of \'Show student the maximum number of possible selections\' checkbox - checked state', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(textSelectionPage.showStudentMaximumNumberOfPossibleSelectionsCheckbox().parents('[data-ngie-testid="show-student-the-maximum-number-of-possible-selections-checkbox"]'));
+        });
+
+        it('When the user selects \'No limit\' from the \'Maximum number of possible selections\' dropdown, then the user should be able to set n number of options in a dropzone in the specify correct answer section', () => {
+            textSelectionPage.steps.expandMaxNumberOfPossibleSelectionsDropdown();
+            textSelectionPage.steps.selectOptionFromMaxNumberOfPossibleSelectionsDropdown('no limit');
+            textSelectionPage.steps.selectOptionInSpecifyCorrectAnswerSection(paragraphTextArray[0]);
+            textSelectionPage.steps.selectOptionInSpecifyCorrectAnswerSection(paragraphTextArray[2]);
+        });
+    });
+
+    describe('Maximum number of possible selections and Show student the maximum number of possible selections: Preview tab', () => {
+        abortEarlySetup();
+        before(() => {
+            textSelectionPage.steps.navigateToCreateQuestion('text selection');
+            cy.barsPreLoaderWait();
+            textSelectionPage.steps.clearQuestionInputField();
+            paragraphTextArray.forEach((paragraphText) => {
+                textSelectionPage.steps.addInputToQuestionInputField(`${paragraphText}{enter}`);
+            });
+            textSelectionPage.steps.addInputToQuestionInputField('{backspace}');
+            textSelectionPage.steps.switchTextSelectionMode('Paragraph');
+            textSelectionPage.steps.clickOnOptionInSpecifyPossibleOptionsSection(paragraphTextArray[0]);
+            textSelectionPage.steps.clickOnOptionInSpecifyPossibleOptionsSection(paragraphTextArray[1]);
+            textSelectionPage.steps.clickOnOptionInSpecifyPossibleOptionsSection(paragraphTextArray[2]);
+        });
+
+        it('When the user selects a finite number of options value from the \'Maximum number of possible selections\' dropdown, then the user should only be able to select options in the preview tab according to the selected maximum limit', () => {
+            textSelectionPage.steps.expandMaxNumberOfPossibleSelectionsDropdown();
+            textSelectionPage.steps.selectOptionFromMaxNumberOfPossibleSelectionsDropdown('2');
+            textSelectionPage.steps.switchToPreviewTab();
+            textSelectionPage.steps.selectOptionInPreviewTab(paragraphTextArray[0]);
+            textSelectionPage.steps.selectOptionInPreviewTab(paragraphTextArray[1]);
+        });
+
+        it('When user tries to select more number of options than the maximum limit, then error message \'Maximum n options can be selected.\' should be displayed and extra options should not be selected', () => {
+            textSelectionPage.steps.clickOnOptionInSpecifyCorrectAnswerSection(paragraphTextArray[2]);
+            textSelectionPage.steps.verifyOptionIsNotSelectedInSpecifyCorrectAnswerSection(paragraphTextArray[2]);
+            utilities.verifyInnerText(textSelectionPage.maximumOptionsCanBeSelectedErrorMessagePreviewTab(), 'Maximum 2 options can be selected.');
+        });
+
+        it('CSS of \'Maximum n options can be selected.\' error message', { tags: 'css' }, () => {
+            utilities.verifyCSS(textSelectionPage.maximumOptionsCanBeSelectedErrorMessagePreviewTab(), {
+                'color': css.color.warningMessage,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.regular
+            });
+            utilities.verifyCSS(textSelectionPage.maximumOptionsCanBeSelectedErrorMessageWrapperPreviewTab().find('svg'), {
+                'color': css.color.warningMessage,
+            });
+            utilities.verifyCSS(textSelectionPage.maximumOptionsCanBeSelectedErrorMessageWrapperPreviewTab(), {
+                'border': `1px solid ${css.color.warningContainerBorder}`
+            });
+            utilities.verifyCSS(textSelectionPage.maximumOptionsCanBeSelectedErrorMessageWrapperPreviewTab(), {
+                'background-color': css.color.warningContainerBackground
+            });
+        });
+ 
+        it('Accessibility of \'Maximum n options can be selected.\' error message', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(textSelectionPage.maximumOptionsCanBeSelectedErrorMessageWrapperPreviewTab());
+        });
+
+        it('When \'Show student the maximum number of possible selections\' checkbox is in unchecked state, no help text should be displayed in the preview tab', () => {
+            utilities.verifyElementVisibilityState(textSelectionPage.maximumNumberOfSelectionsHelpText(), 'notExist');
+        });
+
+        it('When the user checks the \'Show student the maximum number of possible selections\' checkbox, a help text \'Maximum number of possible selections: n\' should be displayed in the preview tab', () => {
+            textSelectionPage.steps.switchToEditTab();
+            textSelectionPage.steps.checkShowStudentTheMaxNumberOfSelectionsCheckbox();
+            textSelectionPage.steps.switchToPreviewTab();
+            utilities.verifyInnerText(textSelectionPage.maximumNumberOfSelectionsHelpText(), 'Maximum number of possible selections: 2');
+        });
+
+        it('CSS of help text \'Maximum number of possible selections: n\'', { tags: 'css' }, () => {
+            utilities.verifyCSS(textSelectionPage.maximumNumberOfSelectionsHelpText(), {
+                'color': css.color.text,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular
+            });
+            utilities.verifyCSS(textSelectionPage.maximumNumberOfSelectionsHelpText().find('span'), {
+                'color': css.color.text,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.bold
+            });
+        });
+ 
+        it('Accessibility of help text \'Maximum number of possible selections: n\'', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(textSelectionPage.maximumNumberOfSelectionsHelpText());
+        });
+
+        it('When the user selects \'No limit\' from the \'Maximum number of possible selections\' dropdown, then the user should be able to set n number of options in a dropzone in the preview tab', () => {
+            textSelectionPage.steps.switchToEditTab();
+            textSelectionPage.steps.expandMaxNumberOfPossibleSelectionsDropdown();
+            textSelectionPage.steps.selectOptionFromMaxNumberOfPossibleSelectionsDropdown('no limit');
+            textSelectionPage.steps.switchToPreviewTab();
+            textSelectionPage.steps.selectOptionInPreviewTab(paragraphTextArray[0]);
+            textSelectionPage.steps.selectOptionInPreviewTab(paragraphTextArray[1]);
+            textSelectionPage.steps.selectOptionInPreviewTab(paragraphTextArray[2]);
+        });
+    });
+});