itemengine-cypress-automation 1.0.23 → 1.0.25

package/cypress/e2e/ILC/FillInTheGapsText/fillInTheGapsTextAdditionalSettingsStudentResponseAreaAndLayout.js

@@ -0,0 +1,603 @@
+import { specialOrMathCharacters } from "../../../fixtures/specialAndMathCharacters";
+import { dialogBoxBase, fillInTheGapsTextPage } from "../../../pages";
+import abortEarlySetup from "../../../support/helpers/abortEarly";
+const css = Cypress.env('css');
+let customSpecialCharacters = [':', ')', '`']
+
+describe('Fill In the Gaps Additional settings: Student response area and layout', () => {
+    before(() => {
+        cy.loginAs('admin');
+    });
+
+    describe('Additional Settings: Student response area and layout', () => {
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsTextPage.steps.navigateToCreateQuestion('fill in the gaps with text');
+            fillInTheGapsTextPage.steps.expandAdditonalSettings();
+        });
+
+        it('\'Student response area and layout\' label should be displayed', () => {
+            fillInTheGapsTextPage.studentResponseAreaAndLayoutLabel()
+                .verifyInnerText('Student response area and layout')
+                .should('be.visible');
+        });
+
+        it('CSS of \'Student response area and layout\' section', { tags: 'css' }, () => {
+            fillInTheGapsTextPage.studentResponseAreaAndLayoutLabel()
+                .verifyCSS(css.color.labels, css.fontSize.default, css.fontWeight.semibold);
+        });
+
+        //Note: a11y covered in Additional settings accordion, verifyAdditonalSettingsAccordionProperties
+    });
+
+    describe('Additional Settings: Answer numeration (only while grading) dropdown', () => {
+        let dropdownOptions = ['Numerical', 'Uppercase alphabet', 'Lowercase alphabet'];
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsTextPage.steps.navigateToCreateQuestion('fill in the gaps with text');
+            fillInTheGapsTextPage.steps.expandAdditonalSettings();
+        });
+
+        //Note: a11y covered in Additional settings accordion, verifyAdditonalSettingsAccordionProperties
+
+        fillInTheGapsTextPage.tests.verifyAnswerNumerationContents();
+
+        it(`User should be able to select any option other than ${dropdownOptions[0]}`, () => {
+            fillInTheGapsTextPage.steps.selectAnswerNumerationDropdownOption(`${dropdownOptions[2]}`)
+        });
+
+        //TODO: We have not checked the Response numeration in Grading view
+    });
+
+    describe('Additional Settings: Multiline response', () => {
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsTextPage.steps.navigateToCreateQuestion('fill in the gaps with text');
+            fillInTheGapsTextPage.steps.expandAdditonalSettings();
+        });
+
+        it('\'Multiline response\' functionality label and checkbox should be displayed and by default it should be unchecked', () => {
+            fillInTheGapsTextPage.multilineResponseLabel()
+                .verifyInnerText('Multiline response');
+            fillInTheGapsTextPage.multilineResponseCheckbox()
+                .should('not.be.checked');
+        });
+
+        it('CSS of \'Multiline response\' section - unchecked state', { tags: 'css' }, () => {
+            fillInTheGapsTextPage.multilineResponseCheckbox()
+                .parent()
+                .find('svg')
+                .should('have.css', 'fill', css.color.uncheckedCheckbox);
+        });
+
+        //Note: a11y covered in Additional settings accordion, verifyAdditonalSettingsAccordionProperties
+
+        //Multiline response test cases for set correct answer section response fields
+        it('When the \'Multiline response\' functionality is disabled, the response fields should not have \'textarea\' field in \'Set correct answer\' section', () => {
+            fillInTheGapsTextPage.multilineResponseCheckbox()
+                .should('not.be.checked');
+            fillInTheGapsTextPage.setCorrectAnswerResponseField()
+                .each(($el) => {
+                    cy.wrap($el)
+                        .parents('.response-input-field')
+                        .should('not.have.class', 'response-multiline-input-field')
+                        .find('input[type="text"]')
+                        .should('exist')
+                        .parents('.response-input-field')
+                        .find('textarea')
+                        .should('not.exist');
+                });
+        });
+
+        it('When \'Multiline response\' functionality is disabled then the user should not be able to enter a multiline response in the \'Set correct answer\' section', () => {
+            fillInTheGapsTextPage.setCorrectAnswerResponseField()
+                .each(($el) => {
+                    cy.wrap($el)
+                        .type('l{enter}o{enter}r{enter}e{enter}m')
+                        .should('have.value', 'lorem');
+                });
+        });
+
+        it('When the \'Multiline response\' functionality is enabled, the response field should have \'textarea\' field in \'Set correct answer\' section', () => {
+            fillInTheGapsTextPage.multilineResponseCheckbox()
+                .click()
+                .should('be.checked');
+            fillInTheGapsTextPage.setCorrectAnswerMultilineTextArea()
+                .each(($el) => {
+                    cy.wrap($el)
+                        .should('exist')
+                        .find('textarea')
+                        .should('exist')
+                        .parents('.response-multiline-input-field')
+                        .find('input[type="text"]')
+                        .should('not.exist');
+                });
+        });
+
+        it('When the \'Multiline response\' functionality is enabled then the user should be able to add Multiline responses in the \'Set correct answer\' section', () => {
+            fillInTheGapsTextPage.setCorrectAnswerMultilineTextArea()
+                .each(($el) => {
+                    cy.wrap($el)
+                        .clear()
+                        .type('l{enter}o{enter}r{enter}e{enter}m')
+                        .should('have.text', 'l\no\nr\ne\nm​');
+                });
+        });
+
+        it('CSS of \'Multiline response\' section - checked state', { tags: 'css' }, () => {
+            fillInTheGapsTextPage.multilineResponseLabel()
+                .verifyCSS(css.color.labelText, css.fontSize.normal, css.fontWeight.regular);
+            fillInTheGapsTextPage.multilineResponseCheckbox()
+                .parent()
+                .find('g[data-name*="Rectangle"]')
+                .should('have.css', 'fill', css.color.activeButtons);
+        });
+
+        it('Accessibility of \'Multiline response\' section - checked state', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(fillInTheGapsTextPage.multilineResponseLabel().parents('.MuiFormGroup-root'))
+        });
+
+        it('When the \'Multiline response\' functionality is enabled then the user should be able to enter multiline characters including the line breaks up to the set character limit', () => {
+            fillInTheGapsTextPage.setCharacterLimitInputField()
+                .should('have.value', '20');
+            fillInTheGapsTextPage.setCorrectAnswerMultilineTextArea()
+                .each(($el) => {
+                    cy.wrap($el)
+                        .clear()
+                        .type('l{enter}o{enter}r{enter}e{enter}m{enter}e{enter}s{enter}u{enter}m{enter}l{enter}nam')
+                        .should('have.text', 'l\no\nr\ne\nm\ne\ns\nu\nm\nl\n​');
+                });
+        });
+
+        it('When the user disables the Multiline response functionality, the added input in the response field should appear in a single line in \'Set correct answer\' section', () => {
+            fillInTheGapsTextPage.multilineResponseCheckbox()
+                .click()
+                .should('not.be.checked');
+            fillInTheGapsTextPage.setCorrectAnswerResponseField()
+                .each(($el) => {
+                    cy.wrap($el)
+                        .should('have.value', 'loremesuml');
+                });
+        });
+
+        //Multiline response test cases for preview tab response fields
+        it('When the \'Multiline response\' functionality is disabled, the response field should not have \'textarea\' field in preview tab', () => {
+            fillInTheGapsTextPage.steps.switchToPreviewTab();
+            fillInTheGapsTextPage.previewTabResponseField()
+                .each(($el) => {
+                    cy.wrap($el)
+                        .parents('.response-input-field')
+                        .should('not.have.class', 'response-multiline-input-field')
+                        .find('input[type="text"]')
+                        .should('exist')
+                        .parents('.response-input-field')
+                        .find('textarea')
+                        .should('not.exist')
+                });
+        });
+
+        it('When \'Multiline response\' functionality is disabled, the user should not be able to add multiline response in the preview tab response field', () => {
+            fillInTheGapsTextPage.previewTabResponseField()
+                .each(($el) => {
+                    cy.wrap($el)
+                        .type('l{enter}o{enter}r{enter}e{enter}m')
+                        .should('have.value', 'lorem');
+                });
+        });
+
+        it('When the \'Multiline response\' functionality is enabled, the response field should have \'textarea\' field in the preview tab', () => {
+            fillInTheGapsTextPage.steps.switchToEditTab()
+            fillInTheGapsTextPage.multilineResponseCheckbox()
+                .click()
+                .should('be.checked');
+            fillInTheGapsTextPage.steps.switchToPreviewTab()
+            fillInTheGapsTextPage.previewTabMultilineTextArea()
+                .each(($el) => {
+                    cy.wrap($el)
+                        .should('exist')
+                        .find('textarea')
+                        .should('exist')
+                        .parents('.response-multiline-input-field')
+                        .find('input[type="text"]')
+                        .should('not.exist');
+                });
+        });
+
+        it('When the \'Multiline response\' functionality is enabled then the user should be able to add Multiline responses in the preview tab', () => {
+            fillInTheGapsTextPage.previewTabMultilineTextArea()
+                .each(($el) => {
+                    cy.wrap($el)
+                        .type('l{enter}o{enter}r{enter}e{enter}m')
+                        .should('have.text', 'l\no\nr\ne\nm​');
+                });
+        });
+
+        it('When the \'Multiline response\' functionality is enabled then the user should be able to enter multiline characters including the line breaks up to the set character limit in the preview tab', () => {
+            fillInTheGapsTextPage.previewTabMultilineTextArea()
+                .each(($el) => {
+                    cy.wrap($el)
+                        .clear()
+                        .type('l{enter}o{enter}r{enter}e{enter}m{enter}e{enter}s{enter}u{enter}m{enter}l{enter}nam')
+                        .should('have.text', 'l\no\nr\ne\nm\ne\ns\nu\nm\nl\n​');
+                });
+        });
+    });
+
+    describe('Additional Settings: Scoring for Multiline response', () => {
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsTextPage.steps.navigateToCreateQuestion('fill in the gaps with text');
+            fillInTheGapsTextPage.steps.expandAdditonalSettings();
+            fillInTheGapsTextPage.multilineResponseCheckbox()
+                .click()
+                .should('be.checked');
+        });
+
+        it('When the user has enabled the Multiline functionality then user should be able to set multiline correct answers and points in the \'Set correct answer\' section', () => {
+            fillInTheGapsTextPage.setCorrectAnswerMultilineTextArea()
+                .eq(0)
+                .type('R{enter}e{enter}s{enter}p{enter}o{enter}n{enter}s{enter}e{enter}1')
+                .should('have.text', 'R\ne\ns\np\no\nn\ns\ne\n1​');
+            fillInTheGapsTextPage.setCorrectAnswerMultilineTextArea()
+                .eq(1)
+                .type('Response 2')
+                .should('have.text', 'Response 2​');
+            fillInTheGapsTextPage.pointsInputField()
+                .type('10');
+        });
+
+        it('When the user enters the correct multiline and single line response in the preview tab then full points should be awarded', () => {
+            fillInTheGapsTextPage.steps.switchToPreviewTab()
+            fillInTheGapsTextPage.previewTabMultilineTextArea()
+                .eq(0)
+                .type('R{enter}e{enter}s{enter}p{enter}o{enter}n{enter}s{enter}e{enter}1')
+                .should('have.text', 'R\ne\ns\np\no\nn\ns\ne\n1​');
+            fillInTheGapsTextPage.previewTabMultilineTextArea()
+                .eq(1)
+                .type('Response 2')
+                .should('have.text', 'Response 2​');
+            fillInTheGapsTextPage.previewScoreText()
+                .verifyInnerText('10/10');
+            fillInTheGapsTextPage.previewTabCorrectAnswerContainer()
+                .should('not.exist');
+            cy.log('When the user selects show correct answer checkbox then correct icons and label should be displayed')
+            fillInTheGapsTextPage.showCorrectAnswerCheckbox()
+                .click();
+            fillInTheGapsTextPage.previewTabResponseFieldWrapper()
+                .each(($el) => {
+                    cy.wrap($el)
+                        .within(() => {
+                            fillInTheGapsTextPage.correctIcon()
+                                .should('be.visible');
+                        });
+                });
+            fillInTheGapsTextPage.steps.verifyCorrectIncorrectAnswerLabel('Correct');
+            fillInTheGapsTextPage.steps.verifyCorrectAttemptBorder();
+            cy.log('Post step: Uncheck Show correct answer checkbox')
+            fillInTheGapsTextPage.showCorrectAnswerCheckbox()
+                .click()
+                .should('not.be.checked');
+        });
+
+        it('When the user enters a single line response instead of a multiline response then no points should be awarded', () => {
+            fillInTheGapsTextPage.previewTabMultilineTextArea()
+                .eq(0)
+                .clear()
+                .type('Response 1')
+                .should('have.text', 'Response 1​');
+            fillInTheGapsTextPage.previewScoreText()
+                .verifyInnerText('0/10');
+            cy.log('When the user selects show correct answer checkbox then incorrect icon should be displayed beside Response 1 and correct icon beside the Response 2 and Incorrect label should be displayed')
+            fillInTheGapsTextPage.showCorrectAnswerCheckbox()
+                .click();
+            fillInTheGapsTextPage.previewTabResponseFieldWrapper()
+                .eq(0)
+                .within(() => {
+                    fillInTheGapsTextPage.incorrectIcon()
+                        .should('be.visible');
+                });
+            fillInTheGapsTextPage.previewTabResponseFieldWrapper()
+                .eq(1)
+                .within(() => {
+                    fillInTheGapsTextPage.correctIcon()
+                        .should('be.visible');
+                });
+            fillInTheGapsTextPage.steps.verifyCorrectAnswerResponsesInCorrectAnswerContainerAndCount('fill in the gaps - text', ['R\ne\ns\np\no\nn\ns\ne\n1']);
+            fillInTheGapsTextPage.steps.verifyCorrectIncorrectAnswerLabel('Incorrect');
+            fillInTheGapsTextPage.steps.verifyIncorrectAttemptBorder()
+            cy.log('Post step: Uncheck Show correct answer checkbox')
+            fillInTheGapsTextPage.showCorrectAnswerCheckbox()
+                .click()
+                .should('not.be.checked');
+        });
+
+        it('When the user enters a multiline response instead of a single line response then no points should be awarded', () => {
+            fillInTheGapsTextPage.previewTabMultilineTextArea()
+                .eq(0)
+                .clear()
+                .type('R{enter}e{enter}s{enter}p{enter}o{enter}n{enter}s{enter}e{enter}1')
+                .should('have.text', 'R\ne\ns\np\no\nn\ns\ne\n1​');
+            fillInTheGapsTextPage.previewTabMultilineTextArea()
+                .eq(1)
+                .clear()
+                .type('R{enter}e{enter}s{enter}p{enter}o{enter}n{enter}s{enter}e{enter}2')
+                .should('have.text', 'R\ne\ns\np\no\nn\ns\ne\n2​');
+            fillInTheGapsTextPage.previewScoreText()
+                .verifyInnerText('0/10');
+            cy.log('When the user selects show correct answer checkbox then incorrect icon should be displayed beside Response 1 and correct icon beside the Response 2 and Incorrect label should be displayed')
+            fillInTheGapsTextPage.showCorrectAnswerCheckbox()
+                .click();
+            fillInTheGapsTextPage.previewTabResponseFieldWrapper()
+                .eq(0)
+                .within(() => {
+                    fillInTheGapsTextPage.correctIcon()
+                        .should('be.visible');
+                });
+            fillInTheGapsTextPage.previewTabResponseFieldWrapper()
+                .eq(1)
+                .within(() => {
+                    fillInTheGapsTextPage.incorrectIcon()
+                        .should('be.visible');
+                });
+            fillInTheGapsTextPage.steps.verifyCorrectAnswerResponsesInCorrectAnswerContainerAndCount('fill in the gaps - text', ['Response 2']);
+            fillInTheGapsTextPage.steps.verifyCorrectIncorrectAnswerLabel('Incorrect');
+            fillInTheGapsTextPage.steps.verifyIncorrectAttemptBorder();
+        });
+    });
+
+    describe('Additional Settings: Spell check section', () => {
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsTextPage.steps.navigateToCreateQuestion('fill in the gaps with text');
+            fillInTheGapsTextPage.steps.expandAdditonalSettings();
+        });
+
+        it('\'Spell check\' functionality label and checkbox should be displayed and by default it should be unchecked', () => {
+            fillInTheGapsTextPage.spellCheckLabel()
+                .verifyInnerText('Spell check');
+            fillInTheGapsTextPage.spellCheckCheckbox()
+                .should('not.be.checked');
+        });
+
+        it('CSS of \'Spell check\' section - unchecked state', { tags: 'css' }, () => {
+            fillInTheGapsTextPage.spellCheckCheckbox()
+                .parent()
+                .find('svg')
+                .should('have.css', 'fill', css.color.uncheckedCheckbox);
+        });
+
+        //Note: a11y covered in Additional settings accordion, verifyAdditonalSettingsAccordionProperties
+
+        //Spell check test cases for set correct answer section response fields
+        it('When the \'Spell check\' functionality is disabled, the response field should have \'spellcheck\' attribute set as \'false\' in \'Set correct answer\' section', () => {
+            fillInTheGapsTextPage.setCorrectAnswerResponseField()
+                .each(($el) => {
+                    cy.wrap($el)
+                        .should('have.attr', 'spellcheck', 'false');
+                });
+        });
+
+        it('When the \'Spell check\' functionality is enabled, the response field should have \'spellcheck\' attribute set as \'true\' in \'Set correct answer\' section', () => {
+            fillInTheGapsTextPage.spellCheckCheckbox()
+                .click()
+                .should('be.checked');
+            fillInTheGapsTextPage.setCorrectAnswerResponseField()
+                .each(($el) => {
+                    cy.wrap($el)
+                        .should('have.attr', 'spellcheck', 'true');
+                });
+        });
+
+        it('CSS of \'Spell check\' section - checked state', { tags: 'css' }, () => {
+            fillInTheGapsTextPage.spellCheckLabel()
+                .verifyCSS(css.color.labelText, css.fontSize.normal, css.fontWeight.regular);
+            fillInTheGapsTextPage.spellCheckCheckbox()
+                .parent()
+                .find('g[data-name*="Rectangle"]')
+                .should('have.css', 'fill', css.color.activeButtons);
+        });
+
+        it('Accessibility of \'Spell check\' section - checked state', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(fillInTheGapsTextPage.spellCheckLabel().parents('.MuiFormGroup-root'))
+        });
+
+        //Spell check test cases for preview tab response fields
+        it('When the \'Spell check\' functionality is disabled, the response field should have \'spellcheck\' attribute set as \'false\' in preview tab', () => {
+            fillInTheGapsTextPage.spellCheckCheckbox()
+                .click()
+                .should('not.be.checked');
+            fillInTheGapsTextPage.steps.switchToPreviewTab();
+            fillInTheGapsTextPage.previewTabResponseField()
+                .each(($el) => {
+                    cy.wrap($el)
+                        .should('have.attr', 'spellcheck', 'false');
+                });
+        });
+
+        it('When the \'Spell check\' functionality is enabled, the response field should have \'spellcheck\' attribute set as \'true\' in the preview tab', () => {
+            cy.log('Pre step: Switching to Edit tab')
+            fillInTheGapsTextPage.steps.switchToEditTab();
+            fillInTheGapsTextPage.spellCheckCheckbox()
+                .click()
+                .should('be.checked');
+            fillInTheGapsTextPage.steps.switchToPreviewTab();
+            fillInTheGapsTextPage.previewTabResponseField()
+                .each(($el) => {
+                    cy.wrap($el)
+                        .should('have.attr', 'spellcheck', 'true');
+                });
+        });
+    });
+
+    describe('Additional Settings: Custom special characters section', () => {
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsTextPage.steps.navigateToCreateQuestion('fill in the gaps with text');
+            fillInTheGapsTextPage.steps.expandAdditonalSettings();
+        });
+
+        fillInTheGapsTextPage.tests.verifyAdditionalSettingsCustomSpecialCharactersSection();
+
+        it('When the user checks the \'Display special characters\' checkbox then the \'Special characters\' button should be displayed when user focuses in any response field in \'Set correct answer\' section ', () => {
+            cy.log('Checking Custom characters button is not visible before focusing any option')
+            fillInTheGapsTextPage.setCorrectAnsResponseFieldSpecialCharactersButton()
+                .eq(0)
+                .should('not.have.class', 'active-response-input-field')
+                .should('not.be.visible');
+            fillInTheGapsTextPage.setCorrectAnswerResponseField()
+                .eq(0)
+                .click();
+            fillInTheGapsTextPage.setCorrectAnsResponseFieldSpecialCharactersButton()
+                .eq(0)
+                .should('have.class', 'active-response-input-field')
+                .should('be.visible');
+        });
+
+        it('When the user has added no input to the \'Custom special characters\' input field then the default Special characters flyout should be displayed on clicking the \'Special characters\' button in the response field', () => {
+            fillInTheGapsTextPage.setCorrectAnsResponseFieldSpecialCharactersButton()
+                .eq(0)
+                .should('be.visible')
+                .click();
+            fillInTheGapsTextPage.steps.verifySpecialCharactersFlyoutHeaderContents();
+        });
+
+        fillInTheGapsTextPage.tests.verifySpecialCharactersFlyoutSymbols()
+
+        it(`When the user clicks on a symbol in the ${specialOrMathCharacters['specialCharacters'].popupTitle} popup, then that symbol should be inserted in the response field`, () => {
+            cy.log('Clicking on all symbols.');
+            let symbolsString = specialOrMathCharacters['specialCharacters'].characters.map((icon) => icon.symbol);
+            symbolsString = symbolsString.join('');
+            fillInTheGapsTextPage.steps.clickingOnSpecialCharactersSymbolsFromFlyout();
+            dialogBoxBase.steps.closeWarningPopup();
+            fillInTheGapsTextPage.setCorrectAnswerResponseField()
+                .eq(0)
+                .should('have.value', symbolsString);
+            cy.log('Post step: Clearing the set correct answer input field')
+            fillInTheGapsTextPage.setCorrectAnswerResponseField()
+                .eq(0)
+                .clear();
+        });
+
+        it('When the \'Display special characters\' checkbox is checked then user should be able to enter value in the \'Custom special characters\' input field', () => {
+            fillInTheGapsTextPage.customSpecialCharactersInputField()
+                .type(':)`')
+                .should('have.value', ':)`');
+        });
+
+        it('When the user clicks on the \'Special characters\' button in the response field then a flyout with the title \'Special characters\' and close button should be displayed', () => {
+            fillInTheGapsTextPage.setCorrectAnswerResponseField()
+                .eq(0)
+                .focus();
+            fillInTheGapsTextPage.setCorrectAnsResponseFieldSpecialCharactersButton()
+                .eq(0)
+                .should('be.visible')
+                .click();
+            fillInTheGapsTextPage.steps.verifySpecialCharactersFlyoutHeaderContents();
+        });
+
+        it('The flyout should contain all the added Special characters entered in the \'Custom special characters\' input field', () => {
+            fillInTheGapsTextPage.specialCharactersFlyoutIcon()
+                .each(($el, index) => {
+                    cy.wrap($el)
+                        .should('have.text', `${customSpecialCharacters[index]}`)
+                });
+        });
+
+        it('When the user clicks on the characters then they should be added to the set correct answer response field', () => {
+            fillInTheGapsTextPage.steps.clickingOnSpecialCharactersSymbolsFromFlyout();
+            dialogBoxBase.steps.closeWarningPopup();
+            fillInTheGapsTextPage.setCorrectAnswerResponseField()
+                .eq(0)
+                .should('have.value', ':)`');
+        });
+
+        //Special custom characters test cases for preview tab response fields
+        it('When the \'Custom special characters\' functionality is disabled then the \'Special characters\' button should not be displayed in the preview tab response field', () => {
+            fillInTheGapsTextPage.customSpecialCharactersInputField()
+                .clear();
+            fillInTheGapsTextPage.displaySpecialCharactersCheckbox()
+                .click()
+                .should('not.be.checked');
+            fillInTheGapsTextPage.steps.switchToPreviewTab();
+            fillInTheGapsTextPage.previewTabResponseFieldSpecialCharactersButton()
+                .should('not.exist');
+        });
+
+        it('When the user has enabled the \'Custom special characters\' functionality then the \'Special characters\' button should be displayed when user focuses in any response field in the preview tab', () => {
+            cy.log('Pre step: Enable the Custom special characters')
+            fillInTheGapsTextPage.steps.switchToEditTab();
+            fillInTheGapsTextPage.displaySpecialCharactersCheckbox()
+                .click()
+                .should('be.checked');
+            fillInTheGapsTextPage.steps.switchToPreviewTab();
+            fillInTheGapsTextPage.previewTabResponseFieldSpecialCharactersButton()
+                .should('not.have.class', 'active-response-input-field')
+                .and('not.be.visible');
+            fillInTheGapsTextPage.previewTabResponseField()
+                .eq(0)
+                .click();
+            fillInTheGapsTextPage.previewTabResponseFieldSpecialCharactersButton()
+                .eq(0)
+                .should('have.class', 'active-response-input-field')
+                .should('be.visible');
+        });
+
+        it('When the user has added no input to the \'Custom special characters\' input field then the default Special characters flyout should be displayed on clicking the \'Special characters\' button in the response field', () => {
+            fillInTheGapsTextPage.previewTabResponseFieldSpecialCharactersButton()
+                .eq(0)
+                .should('be.visible')
+                .click();
+            fillInTheGapsTextPage.steps.verifySpecialCharactersFlyoutHeaderContents();
+        });
+
+        fillInTheGapsTextPage.tests.verifySpecialCharactersFlyoutSymbols()
+
+        it(`When the user clicks on a symbol in the ${specialOrMathCharacters['specialCharacters'].popupTitle} popup, then that symbol should be inserted in the response field`, () => {
+            cy.log('Clicking on all symbols.');
+            let symbolsString = specialOrMathCharacters['specialCharacters'].characters.map((icon) => icon.symbol);
+            symbolsString = symbolsString.join('');
+            fillInTheGapsTextPage.steps.clickingOnSpecialCharactersSymbolsFromFlyout();
+            dialogBoxBase.steps.closeWarningPopup();
+            fillInTheGapsTextPage.previewTabResponseField()
+                .eq(0)
+                .should('have.value', symbolsString);
+        });
+
+        it('When the \'Display special characters\' checkbox is checked then user should be able to enter value in the \'Custom special characters\' input field', () => {
+            cy.log('Pre step: Swicth to Edit tab')
+            fillInTheGapsTextPage.steps.switchToEditTab()
+            fillInTheGapsTextPage.customSpecialCharactersInputField()
+                .type(':)`')
+                .should('have.value', ':)`');
+            cy.log('Post step: Switch to Preview tab')
+            fillInTheGapsTextPage.steps.switchToPreviewTab()
+        });
+
+        it('When the user clicks on the \'Special characters\' button then a flyout with the title \'Special characters\' and close button should be displayed in the preview tab', () => {
+            fillInTheGapsTextPage.previewTabResponseField()
+                .eq(0)
+                .focus();
+            fillInTheGapsTextPage.previewTabResponseFieldSpecialCharactersButton()
+                .eq(0)
+                .should('be.visible')
+                .click();
+            fillInTheGapsTextPage.steps.verifySpecialCharactersFlyoutHeaderContents();
+        });
+
+        it('The flyout should contain all the added Special characters entered in the \'Custom special characters\' input field', () => {
+            fillInTheGapsTextPage.specialCharactersFlyoutIcon()
+                .each(($el, index) => {
+                    cy.wrap($el)
+                        .should('have.text', `${customSpecialCharacters[index]}`)
+                });
+        });
+
+        it('When the user clicks on the characters then they should be added to the preview tab input field', () => {
+            fillInTheGapsTextPage.steps.clickingOnSpecialCharactersSymbolsFromFlyout();
+            dialogBoxBase.steps.closeWarningPopup();
+            fillInTheGapsTextPage.previewTabResponseField()
+                .eq(0)
+                .should('have.value', ':)`');
+        });
+    });
+});

package/cypress/e2e/ILC/FillInTheGapsText/fillInTheGapsTextAllOrNothingWithAlternateAnswer.js

@@ -0,0 +1,54 @@
+import { fillInTheGapsScoring, fillInTheGapsTextPage } from "../../../pages";
+import abortEarlySetup from "../../../support/helpers/abortEarly";
+
+describe('Create Item page - Fill in the Gaps: Scoring Section', () => {
+    before(() => {
+        cy.loginAs('admin');
+    });
+
+    describe('Question Preview: AutoScored - All or Nothing with alternate answer with \'Match from all responses property - \"false\"\'', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigate to Fill in the gaps - text question type, adding correct answer responses and alternate answer responses for autoscored - all or nothing scoring, adding points and switch to preview tab');
+            fillInTheGapsTextPage.steps.navigateToCreateQuestion('fill in the gaps with text');
+            fillInTheGapsTextPage.steps.setCorrectAnswerResponses(['Response 1', 'Response 2']);
+            fillInTheGapsTextPage.steps.allotPoints(7);
+            fillInTheGapsTextPage.steps.verifySetCorrectAnswerErrorIconIsNotDisplayed();
+            fillInTheGapsTextPage.alternateAnswerButton()
+                .click();
+            fillInTheGapsTextPage.steps.setCorrectAnswerResponses(['Response 3', 'Response 4']);
+            fillInTheGapsTextPage.steps.allotPoints(3);
+            fillInTheGapsTextPage.steps.verifySetCorrectAnswerErrorIconIsNotDisplayed();
+            fillInTheGapsTextPage.steps.expandAdditonalSettings();
+            fillInTheGapsTextPage.allowStudentsToCheckAnswerCheckbox()
+                .click();
+            fillInTheGapsTextPage.steps.switchToPreviewTab();
+        });
+
+        fillInTheGapsScoring.tests.verifyAutoScoredAllOrNothingWithAlternateAnswerAndMatchFromAllResponsesFalse('fill in the gaps - text')
+    });
+
+    describe('Question Preview: AutoScored - All or Nothing with alternate answer with \'Match from all responses property - \"true\"\'', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigate to Fill in the gaps - text question type, adding correct answer responses and alternate answer responses for autoscored - all or nothing scoring');
+            fillInTheGapsTextPage.steps.navigateToCreateQuestion('fill in the gaps with text');
+            fillInTheGapsTextPage.steps.setCorrectAnswerResponses(['Response 1', 'Response 2']);
+            fillInTheGapsTextPage.steps.allotPoints(7);
+            fillInTheGapsTextPage.steps.verifySetCorrectAnswerErrorIconIsNotDisplayed();
+            fillInTheGapsTextPage.alternateAnswerButton()
+                .click();
+            fillInTheGapsTextPage.steps.setCorrectAnswerResponses(['Response 3', 'Response 4']);
+            fillInTheGapsTextPage.steps.allotPoints(3);
+            fillInTheGapsTextPage.steps.verifySetCorrectAnswerErrorIconIsNotDisplayed();
+            fillInTheGapsTextPage.matchFromAllResponsesCheckbox()
+                .click();
+            fillInTheGapsTextPage.steps.expandAdditonalSettings();
+            fillInTheGapsTextPage.allowStudentsToCheckAnswerCheckbox()
+                .click();
+            fillInTheGapsTextPage.steps.switchToPreviewTab();
+        });
+
+        fillInTheGapsScoring.tests.verifyAutoScoredAllOrNothingWithAlternateAnswerAndMatchFromAllResponsesTrue('fill in the gaps - text')
+    });
+});