itemengine-cypress-automation 1.0.162-questionInsructionSelectorFix-15973d5.0 → 1.0.163-4AprilStagingFixes-01659c3.0

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

@@ -0,0 +1,453 @@
+
+import { matchingPage } from "../../../pages";
+import abortEarlySetup from "../../../support/helpers/abortEarly";
+import utilities from "../../../support/helpers/utilities";
+const css = Cypress.env('css');
+const options = ['Petals', 'Leaves', 'Roots', 'Stem', 'Seeds', 'Flower'];
+const promptArray = ['option 1', 'option 2', 'option 3'];
+
+describe('Create Item page - Matching : Student view settings', () => {
+    before(() => {
+        cy.loginAs('admin');
+    });
+
+    describe('Randomize options : Edit tab', () => {
+        abortEarlySetup();
+        before(() => {
+            matchingPage.steps.navigateToCreateQuestion('matching');
+            cy.barsPreLoaderWait();
+            matchingPage.steps.addTextInQuestionInstructionsInputField('Matching');
+            matchingPage.steps.addMultipleOptionFields(3);
+            matchingPage.steps.enterTextInOptionInputField(options);
+            matchingPage.steps.enterTextInPromptInputField(promptArray);
+            matchingPage.steps.allotPoints(5);
+        });
+
+        matchingPage.tests.verifyStudentViewSettingsLabelAndCSS();
+
+        it('\'Randomize options\' checkbox and label should be displayed and by default it should be unchecked', () => {
+            utilities.verifyInnerText(matchingPage.randomizeOptionsLabel(), 'Randomize options');
+            utilities.verifyElementVisibilityState(matchingPage.randomizeOptionsCheckbox(), 'exist');
+            matchingPage.steps.verifyRandomizeOptionsCheckboxUnchecked();
+        });
+
+        matchingPage.tests.verifyRandomizeOptionsCheckboxAndLabelUncheckedCSS();
+
+        it('When the \'Randomize options\' functionality is disabled, the question prompt and options in the specify correct answer section should be displayed in the order in which the user has set them in the \'Options\' section', () => {
+            matchingPage.steps.verifyRandomizeOptionsCheckboxUnchecked();
+            matchingPage.steps.verifyDraggableOptionInOptionsContainerSpecifyCorrectAnswerSection(options);
+            promptArray.forEach((prompt, index) => {
+                matchingPage.steps.verifyPromptContainerSpecifyCorrectAnswerSection([{ index: index, optionText: prompt }]);
+            });
+        });
+
+        it('When the user enables the \'Randomize options\' functionality, then the question prompt and options in the specify correct answer section should be in the order in which the user has set them in the \'Options\' section', () => {
+            matchingPage.steps.checkRandomizeOptionsCheckbox();
+            matchingPage.steps.verifyDraggableOptionInOptionsContainerSpecifyCorrectAnswerSection(options);
+            promptArray.forEach((prompt, index) => {
+                matchingPage.steps.verifyPromptContainerSpecifyCorrectAnswerSection([{ index: index, optionText: prompt }]);
+            });
+        });
+
+        matchingPage.tests.verifyRandomizeOptionsCheckboxCheckedCSSAndA11y();
+    });
+
+    describe('Randomize options : Preview tab', () => {
+        let optionsArray = [];
+        let promptTextArray = [];
+        abortEarlySetup();
+        before(() => {
+            matchingPage.steps.navigateToCreateQuestion('matching');
+            cy.barsPreLoaderWait();
+            matchingPage.steps.addMultipleOptionFields(3);
+            matchingPage.steps.enterTextInPromptInputField(promptArray);
+            matchingPage.steps.enterTextInOptionInputField(options);
+            matchingPage.steps.allotPoints(5);
+        });
+
+        it('When the \'Randomize options\' functionality is disabled, question prompt and options in the preview tab should be displayed in the order in which the user has set them in the \'Draggable options\' section', () => {
+            matchingPage.steps.verifyRandomizeOptionsCheckboxUnchecked();
+            matchingPage.steps.switchToPreviewTab();
+            promptArray.forEach((prompt, index) => {
+                matchingPage.steps.verifyPromptContainerPreviewTab([{ index: index, optionText: prompt }]);
+            });
+            matchingPage.steps.verifyDraggableOptionsInOptionsContainerPreviewTab(options);
+        });
+
+        it('When the user enables the \'Randomize options\' functionality, then question prompt and options in preview tab should be displayed in a random order', () => {
+            matchingPage.steps.switchToEditTab();
+            matchingPage.steps.checkRandomizeOptionsCheckbox();
+            matchingPage.steps.switchToPreviewTab();
+            matchingPage.steps.verifyRandomizeOptionOrder(options);
+            matchingPage.steps.verifyRandomizePromptOrder(promptArray);
+            optionsArray = matchingPage.steps.getOptionsArray();
+            promptTextArray = matchingPage.steps.getPromptArray();
+        });
+
+        it('When the user switches to \'Edit tab\' and does not modify any question properties, then the order of the question prompt and options should not change in the preview tab', () => {
+            matchingPage.steps.resetQuestionPreview();
+            matchingPage.steps.verifyDraggableOptionsInOptionsContainerPreviewTab(optionsArray);
+            promptTextArray.forEach((prompt, index) => {
+                matchingPage.steps.verifyPromptContainerPreviewTab([{ index: index, optionText: prompt }]);
+            });
+        });
+
+        it('When the user switches to \'Edit tab\' and modifies any of question properties, then the order of the question prompt and options should change from the previous random order', () => {
+            matchingPage.steps.switchToEditTab();
+            matchingPage.steps.allotPoints(12);
+            matchingPage.steps.addTextInQuestionInstructionsInputField('Question');
+            matchingPage.steps.switchToPreviewTab();
+            matchingPage.steps.verifyRandomizeOptionOrder(options);
+            matchingPage.steps.verifyRandomizePromptOrder(promptArray);
+            matchingPage.steps.verifyOptionsAreRerandomized(optionsArray);
+            matchingPage.steps.verifyPromptAreRerandomized(promptTextArray);
+        });
+
+        it('When the user disables the \'Randomize options\' functionality, then the question prompt and options in the preview tab should be displayed in the order in which the user has set them in the edit tab', () => {
+            matchingPage.steps.switchToEditTab()
+            matchingPage.steps.uncheckRandomizeOptionsCheckbox();
+            matchingPage.steps.switchToPreviewTab();
+            matchingPage.steps.verifyDraggableOptionsInOptionsContainerPreviewTab(options);
+            promptArray.forEach((prompt, index) => {
+                matchingPage.steps.verifyPromptContainerPreviewTab([{ index: index, optionText: prompt }]);
+            });
+        });
+    });
+
+    describe('Enable outer border for question: Edit tab', () => {
+        abortEarlySetup();
+        before(() => {
+            matchingPage.steps.navigateToCreateQuestion('matching');
+            cy.barsPreLoaderWait();
+        });
+
+        it('\'Enable outer border\' label and checkbox should be displayed. By default, \'Enable outer border for question\' checkbox should be in checked state', () => {
+            utilities.verifyInnerText(matchingPage.enableOuterBorderForQuestionLabel(), 'Enable outer border for question');
+            utilities.verifyElementVisibilityState(matchingPage.enableOuterBorderForQuestionLabel(), 'visible');
+            utilities.verifyElementVisibilityState(matchingPage.enableOuterBorderForQuestionCheckbox(), 'exist');
+            matchingPage.steps.verifyEnableOuterBorderForQuestionCheckboxCheckedState();
+        });
+
+        it('CSS of \'Enable outer border\' label and checkbox - checked state', { tags: 'css' }, () => {
+            utilities.verifyCSS(matchingPage.enableOuterBorderForQuestionLabel(), {
+                'color': css.color.labelText,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.regular
+            });
+            utilities.verifyCSS(matchingPage.enableOuterBorderForQuestionCheckbox().parent().find('svg g g').eq(0), {
+                'fill': css.color.activeButtons
+            });
+        });
+    });
+
+    describe('Enable outer border for question: Preview tab', () => {
+        abortEarlySetup();
+        before(() => {
+            matchingPage.steps.navigateToCreateQuestion('matching');
+            cy.barsPreLoaderWait();
+            matchingPage.steps.addTextInQuestionInstructionsInputField('Matching');
+            matchingPage.steps.switchToPreviewTab();
+        });
+
+        it('When the \'Enable outer border for question\' checkbox is in checked state, an outer border over the question preview should be visible', () => {
+            utilities.verifyElementVisibilityState(matchingPage.questionBorderPreviewTab(), 'visible');
+        });
+
+        it('CSS of the outer border', { tags: 'css' }, () => {
+            utilities.verifyCSS(matchingPage.questionBorderPreviewTab(), {
+                'border': `1px solid ${css.color.draggableOptionsContainerBorder}`
+            });
+        });
+
+        it('When the user unchecks the \'Enable outer border for question\' checkbox, then the outer border over the question preview should not be displayed', () => {
+            matchingPage.steps.switchToEditTab();
+            matchingPage.steps.uncheckEnableOuterBorderForQuestionCheckbox();
+            matchingPage.steps.switchToPreviewTab()
+            matchingPage.steps.verifyQuestionBorderNotExist();
+        });
+
+        it('CSS of \'Enable outer border for question\' checkbox - unchecked state', { tags: 'css' }, () => {
+            matchingPage.steps.switchToEditTab();
+            utilities.verifyCSS(matchingPage.enableOuterBorderForQuestionCheckbox().parent().find('svg'), {
+                'fill': css.color.uncheckedCheckbox
+            });
+        });
+
+        it('Accessibility of \'Enable outer border for question\' checkbox - unchecked state', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(matchingPage.enableOuterBorderForQuestionCheckbox().parents('[data-ngie-testid*="enable-outer-border-for-question-checkbox"]'));
+        });
+    });
+
+    describe('Allow multiple instances of same draggable option : Edit tab', () => {
+        abortEarlySetup();
+        before(() => {
+            matchingPage.steps.navigateToCreateQuestion('matching');
+            cy.barsPreLoaderWait();
+            matchingPage.steps.addTextInQuestionInstructionsInputField('Matching');
+            matchingPage.steps.addMultipleOptionFields(3);
+            matchingPage.steps.enterTextInOptionInputField(options);
+        });
+
+        it('When the \'Allow multiple instances of same draggable option\' functionality is disabled, then on dropping the option in a dropzone, the draggable options should get removed from the options container', () => {
+            matchingPage.steps.clickAndDropOptionInDropzoneSpecifyCorrectAnswerSection([{ optionText: 'Flower', dropzoneIndex: 0 }]);
+            matchingPage.steps.verifyDraggableOptionInOptionsContainerSpecifyCorrectAnswerSection(['Petals', 'Leaves', 'Roots', 'Stem', 'Seeds']);
+        });
+
+        matchingPage.tests.verifyAllowMultipleInstancesOfSameDraggableOptionCheckboxAndLabelUncheckedCSS();
+
+        it('When the user enables the \'Allow multiple instances of same draggable option\' functionality, then on setting correct answer in a dropzone, the draggable options should persist in the options container', () => {
+            matchingPage.steps.checkAllowMultipleInstancesOfSameDraggableOptionCheckbox();
+            matchingPage.steps.clickAndDropOptionInDropzoneSpecifyCorrectAnswerSection([{ optionText: 'Seeds', dropzoneIndex: 1 }]);
+            matchingPage.steps.verifyDraggableOptionInOptionsContainerSpecifyCorrectAnswerSection(options);
+        });
+
+        matchingPage.tests.verifyAllowMultipleInstancesOfSameDraggableOptionCheckboxCheckedCSSAndA11y();
+
+        it('The user should be able to use the same draggable option for multiple dropzone', () => {
+            matchingPage.steps.clickAndDropOptionInDropzoneSpecifyCorrectAnswerSection([{ optionText: 'Seeds', dropzoneIndex: 2 }]);
+            matchingPage.steps.verifyDraggableOptionInDropzoneSpecifyCorrectAnswerSection(1, 'Seeds');
+            matchingPage.steps.verifyDraggableOptionInDropzoneSpecifyCorrectAnswerSection(2, 'Seeds');
+            matchingPage.steps.verifyDraggableOptionInOptionsContainerSpecifyCorrectAnswerSection(options);
+        });
+
+        it('When the user removes the draggable option and moves it into the options container, only one option should be displayed in the options container', () => {
+            matchingPage.steps.clickAndDropOptionInOptionsContainerInSpecifyCorrectAnswerSection('Seeds');
+            matchingPage.steps.clickAndDropOptionInOptionsContainerInSpecifyCorrectAnswerSection('Seeds');
+            matchingPage.steps.verifyDraggableOptionInOptionsContainerSpecifyCorrectAnswerSection(options);
+        });
+
+        it('When the user disables the \'Allow multiple instances of same draggable option\' functionality, the duplicate option set as correct answer should get removed from a dropzone and the draggable option should also not exist in the options container of the \'Specify correct answer\' section', () => {
+            cy.log('Pre step: Setting identical options as correct responses')
+            matchingPage.steps.clickAndDropOptionInDropzoneSpecifyCorrectAnswerSection([{ optionText: 'Seeds', dropzoneIndex: 1 }]);
+            matchingPage.steps.clickAndDropOptionInDropzoneSpecifyCorrectAnswerSection([{ optionText: 'Seeds', dropzoneIndex: 2 }]);
+            matchingPage.steps.uncheckAllowMultipleInstancesOfSameDraggableOptionCheckbox();
+            matchingPage.steps.verifyDraggableOptionInDropzoneSpecifyCorrectAnswerSection(1, 'Seeds');
+            matchingPage.steps.verifyDropzoneTextSpecifyCorrectAnswerSection(2, '');
+            matchingPage.steps.verifyDraggableOptionInOptionsContainerSpecifyCorrectAnswerSection(['Petals', 'Leaves', 'Roots', 'Stem']);
+        });
+    });
+
+    describe('Allow multiple instances of same draggable option : Preview tab', () => {
+        abortEarlySetup();
+        before(() => {
+            matchingPage.steps.navigateToCreateQuestion('matching');
+            cy.barsPreLoaderWait();
+            matchingPage.steps.addTextInQuestionInstructionsInputField('Matching');
+            matchingPage.steps.addMultipleOptionFields(3);
+            matchingPage.steps.enterTextInOptionInputField(options);
+            matchingPage.steps.switchToPreviewTab();
+        });
+
+        it('When the \'Allow multiple instances of same draggable option\' functionality is disabled, then on dropping the option in a dropzone, the draggable options should get removed from the options container', () => {
+            matchingPage.steps.clickAndDropOptionInDropzonePreviewTab([{ optionText: 'Flower', dropzoneIndex: 0 }]);
+            matchingPage.steps.verifyDraggableOptionsInOptionsContainerPreviewTab(['Petals', 'Leaves', 'Roots', 'Stem', 'Seeds']);
+        });
+
+        it('When the user enables the \'Allow multiple instances of same draggable option\' functionality, then on setting correct answer in a dropzone, the draggable options should persist in the options container', () => {
+            matchingPage.steps.switchToEditTab();
+            matchingPage.steps.checkAllowMultipleInstancesOfSameDraggableOptionCheckbox();
+            matchingPage.steps.switchToPreviewTab();
+            matchingPage.steps.clickAndDropOptionInDropzonePreviewTab([{ optionText: 'Seeds', dropzoneIndex: 1 }]);
+            matchingPage.steps.verifyDraggableOptionsInOptionsContainerPreviewTab(options);
+        });
+
+        it('The user should be able to use the same draggable option for multiple dropzones', () => {
+            matchingPage.steps.clickAndDropOptionInDropzonePreviewTab([{ optionText: 'Seeds', dropzoneIndex: 2 }]);
+            matchingPage.steps.verifyDraggableOptionInDropzoneOfPreviewTab(1, ['Seeds']);
+            matchingPage.steps.verifyDraggableOptionInDropzoneOfPreviewTab(2, ['Seeds']);
+            matchingPage.steps.verifyDraggableOptionsInOptionsContainerPreviewTab(options);
+        });
+
+        it('When the user removes the draggable option and moves it into the options container, only one option should be displayed in the options container', () => {
+            matchingPage.steps.clickAndDropOptionInOptionsContainerInPreviewTab('Seeds');
+            matchingPage.steps.clickAndDropOptionInOptionsContainerInPreviewTab('Seeds');
+            matchingPage.steps.verifyDropzoneTextPreviewTab(1, '');
+            matchingPage.steps.verifyDropzoneTextPreviewTab(2, '');
+            matchingPage.steps.verifyDraggableOptionsInOptionsContainerPreviewTab(options);
+        });
+    });
+
+    describe('Allow multiple instances of same draggable option - Scoring', () => {
+        before(() => {
+            matchingPage.steps.navigateToCreateQuestion('matching');
+            cy.barsPreLoaderWait();
+            matchingPage.steps.addTextInQuestionInstructionsInputField('Matching');
+            matchingPage.steps.enterTextInOptionInputField(options.slice(0, 3));
+            matchingPage.steps.checkAllowMultipleInstancesOfSameDraggableOptionCheckbox();
+            matchingPage.steps.clickAndDropOptionInDropzoneSpecifyCorrectAnswerSection([{ optionText: 'Petals', dropzoneIndex: 0 }]);
+            matchingPage.steps.clickAndDropOptionInDropzoneSpecifyCorrectAnswerSection([{ optionText: 'Petals', dropzoneIndex: 1 }]);
+            matchingPage.steps.clickAndDropOptionInDropzoneSpecifyCorrectAnswerSection([{ optionText: 'Leaves', dropzoneIndex: 2 }]);
+            matchingPage.steps.allotPoints(5);
+            matchingPage.steps.switchToPreviewTab();
+        });
+
+        it('When the user has set same answer options in the \'Set correct answer\' section, then the user should be awarded full points on attempting the question with reused options', () => {
+            matchingPage.steps.clickAndDropOptionInDropzonePreviewTab([{ optionText: 'Petals', dropzoneIndex: 0 }]);
+            matchingPage.steps.clickAndDropOptionInDropzonePreviewTab([{ optionText: 'Petals', dropzoneIndex: 1 }]);
+            matchingPage.steps.clickAndDropOptionInDropzonePreviewTab([{ optionText: 'Leaves', dropzoneIndex: 2 }]);
+            matchingPage.steps.verifyPreviewScore(5, 5);
+            matchingPage.steps.verifyPreviewTabPointsBackgroundForCorrectAnswer();
+        });
+    });
+
+    describe('Allow students to check answer: Edit tab', () => {
+        abortEarlySetup();
+        before(() => {
+            matchingPage.steps.navigateToCreateQuestion('matching');
+            cy.barsPreLoaderWait();
+            matchingPage.steps.addTextInQuestionInstructionsInputField('Matching');
+            matchingPage.steps.addMultipleOptionFields(3);
+            matchingPage.steps.enterTextInOptionInputField(options);
+            matchingPage.steps.allotPoints(5);
+        });
+
+        matchingPage.tests.verifyAllowStudentsToCheckAnswerLabelAndCheckboxCSS();
+
+        matchingPage.tests.verifyMaximumAttemptsDropdownDisplayedWhenAllowStudentsToCheckAnswerIsChecked();
+
+        matchingPage.tests.verifyMaxCheckAnswerAttemptsDropdown();
+
+        matchingPage.tests.verifyAllowStudentsToCheckAnswerContentsCSSAndA11y();
+    });
+
+    describe('Allow students to check answer: Preview tab', () => {
+        abortEarlySetup();
+        before(() => {
+            matchingPage.steps.navigateToCreateQuestion('matching');
+            cy.barsPreLoaderWait();
+            matchingPage.steps.addTextInQuestionInstructionsInputField('Matching');
+            matchingPage.steps.addMultipleOptionFields(3);
+            matchingPage.steps.enterTextInOptionInputField(options);
+            matchingPage.steps.clickAndDropOptionInDropzoneSpecifyCorrectAnswerSection([{ optionText: 'Petals', dropzoneIndex: 0 }, { optionText: 'Flower', dropzoneIndex: 1 }, { optionText: 'Leaves', dropzoneIndex: 2 }]);
+            matchingPage.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', () => {
+            matchingPage.steps.checkAllowStudentToCheckAnswerCheckbox();
+            matchingPage.steps.switchToPreviewTab();
+            utilities.verifyInnerText(matchingPage.checkAnswerButton(), 'Check answer');
+        });
+
+        it('When the user drops an option in the dropzone and checks the answer then an icon should be displayed beside the selected option and the check answer button should be in enabled state', () => {
+            matchingPage.steps.clickAndDropOptionInDropzonePreviewTab([{ optionText: 'Petals', dropzoneIndex: 0 }]);
+            matchingPage.steps.checkAnswer();
+            matchingPage.steps.verifyCorrectOptionIcon(0);
+            matchingPage.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', () => {
+            matchingPage.steps.switchToEditTab();
+            matchingPage.steps.expandMaxCheckAnswerAttemptsDropdown();
+            matchingPage.steps.selectMaxCheckAnswerAttemptsDropdownListOption('1');
+            matchingPage.steps.switchToPreviewTab();
+            matchingPage.steps.clickAndDropOptionInDropzonePreviewTab([{ optionText: 'Petals', dropzoneIndex: 0 }]);
+            matchingPage.steps.checkAnswer();
+            matchingPage.steps.verifyCheckAnswerButtonDisabled();
+        });
+
+        matchingPage.tests.verifyDisabledCheckAnswerButtonWithCSSAndA11y();
+
+        it('When the user updates the value of \'Maximum check answer attempts\' dropdown, it should get reflected on the Preview tab', () => {
+            matchingPage.steps.switchToEditTab();
+            matchingPage.steps.expandMaxCheckAnswerAttemptsDropdown();
+            matchingPage.steps.selectMaxCheckAnswerAttemptsDropdownListOption('3');
+            matchingPage.steps.switchToPreviewTab();
+            matchingPage.steps.verifyCheckAnswerButtonEnabled();
+            matchingPage.steps.clickAndDropOptionInDropzonePreviewTab([{ optionText: 'Petals', dropzoneIndex: 0 }]);
+            matchingPage.steps.checkAnswer();
+            matchingPage.steps.verifyCheckAnswerButtonEnabled();
+        });
+
+        it('When the user selects \'No limit\' option from the dropdown then user should be able to check answer multiple times', () => {
+            matchingPage.steps.switchToEditTab();
+            matchingPage.steps.expandMaxCheckAnswerAttemptsDropdown();
+            matchingPage.steps.selectMaxCheckAnswerAttemptsDropdownListOption('no limit');
+            matchingPage.steps.switchToPreviewTab();
+            matchingPage.steps.verifyCheckAnswerButtonEnabled();
+            matchingPage.steps.clickAndDropOptionInDropzonePreviewTab([{ optionText: 'Petals', dropzoneIndex: 0 }]);
+            matchingPage.steps.checkAnswer();
+            matchingPage.steps.verifyCheckAnswerButtonEnabled();
+            matchingPage.steps.clickAndDropOptionInDropzonePreviewTab([{ optionText: 'Flower', dropzoneIndex: 1 }]);
+            matchingPage.steps.checkAnswer();
+            matchingPage.steps.verifyCheckAnswerButtonEnabled();
+        });
+    });
+
+    describe('Show students the dropzone limits: Edit tab', () => {
+        abortEarlySetup();
+        before(() => {
+            matchingPage.steps.navigateToCreateQuestion('matching');
+            cy.barsPreLoaderWait();
+            matchingPage.steps.allotPoints(5);
+        });
+
+        it('\'Show students the dropzone limits\' label and checkbox should be displayed. By default the checkbox should be unchecked', () => {
+            utilities.verifyInnerText(matchingPage.showStudentsDropzoneLimitsCheckboxLabel(), 'Show students the dropzone limits');
+            utilities.verifyElementVisibilityState(matchingPage.showStudentsDropzoneLimitsCheckboxLabel(), 'visible');
+            utilities.verifyElementVisibilityState(matchingPage.showStudentsDropzoneLimitsCheckbox(), 'exist');
+            matchingPage.steps.verifyShowStudentsDropzoneLimitsCheckboxUnchecked();
+        });
+
+        it('CSS of \'Show students the dropzone limits\' checkbox and label - unchecked state', { tags: 'css' }, () => {
+            utilities.verifyCSS(matchingPage.showStudentsDropzoneLimitsCheckboxLabel(), {
+                'color': css.color.labelText,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.regular
+            });
+            utilities.verifyCSS(matchingPage.showStudentsDropzoneLimitsCheckbox().parent().find('svg'), {
+                'fill': css.color.uncheckedCheckbox
+            });
+        });
+
+        it('When the user checks the \'Show students the dropzone limits\' checkbox, help text should \'Maximum answers in each dropzone: #\' not be displayed in the specify correct answer section', () => {
+            matchingPage.steps.checkShowStudentsDropzoneLimitsCheckbox();
+            utilities.verifyElementVisibilityState(matchingPage.maxLimitInEachDropzoneHelpText(), 'notExist');
+        });
+
+        it('CSS of \'Show students the dropzone limits\' label and checkbox - checked state', { tags: 'css' }, () => {
+            utilities.verifyCSS(matchingPage.showStudentsDropzoneLimitsCheckbox().parent().find('svg g g').eq(0), {
+                'fill': css.color.activeButtons
+            });
+        });
+
+        it('Accessibility of \'Show students the dropzone limits\' checkbox - checked state', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(matchingPage.showStudentsDropzoneLimitsCheckbox().parents('[data-ngie-testid="show-students-the-dropzone-limits-checkbox"]'));
+        });
+    });
+
+    describe('Show students the dropzone limits: Preview tab', () => {
+        abortEarlySetup();
+        before(() => {
+            matchingPage.steps.navigateToCreateQuestion('matching');
+            cy.barsPreLoaderWait();
+            matchingPage.steps.allotPoints(5);
+        });
+
+        it('By default, \'Show students the dropzone limits\' checkbox is in unchecked state, then no help text should be displayed in the preview tab', () => {
+            utilities.verifyElementVisibilityState(matchingPage.maxLimitInEachDropzoneHelpText(), 'notExist');
+        });
+
+        it('When the user checks the \'Show students the dropzone limits\' checkbox, a help text \'Maximum answers in each dropzone: #\' should be displayed in the preview tab', () => {
+            matchingPage.steps.switchToEditTab();
+            matchingPage.steps.checkShowStudentsDropzoneLimitsCheckbox();
+            matchingPage.steps.switchToPreviewTab();
+            utilities.verifyInnerText(matchingPage.maxLimitInEachDropzoneHelpText(), 'Maximum answers in each dropzone:\n1');
+        });
+
+        it('When the user selects \'#\' from the \'Maximum capacity per dropzone\' dropdown, a help text \'Maximum answers in each dropzone: #\' should be displayed in the preview tab', () => {
+            matchingPage.steps.switchToEditTab();
+            matchingPage.steps.expandMaxCapacityPerDropzoneDropdown();
+            matchingPage.steps.selectOptionFromMaxCapacityPerDropzoneDropdown('2');
+            matchingPage.steps.switchToPreviewTab();
+            utilities.verifyInnerText(matchingPage.maxLimitInEachDropzoneHelpText(), 'Maximum answers in each dropzone:\n2');
+        });
+
+        it('When the user selects \'No limit\' from the \'Maximum capacity per dropzone\' dropdown, a help text \'Maximum answers in each dropzone: \' should be displayed in the preview tab', () => {
+            matchingPage.steps.switchToEditTab();
+            matchingPage.steps.expandMaxCapacityPerDropzoneDropdown();
+            matchingPage.steps.selectOptionFromMaxCapacityPerDropzoneDropdown('No limit');
+            matchingPage.steps.switchToPreviewTab();
+            utilities.verifyInnerText(matchingPage.maxLimitInEachDropzoneHelpText(), 'Maximum answers in each dropzone:');
+        });
+    });
+});