itemengine-cypress-automation 1.0.86 → 1.0.87

package/cypress/e2e/ILC/FillInTheGapsOverImageTextNew/responseAnswersAndAcceptedStudentInput.js

@@ -0,0 +1,272 @@
+import { fillInTheGapsOverImageTextPage } from "../../../pages";
+import utilities from "../../../support/helpers/utilities";
+import abortEarlySetup from "../../../support/helpers/abortEarly";
+const css = Cypress.env('css');
+
+describe('Create Item page - Fill in the gaps over image - text: ', () => {
+    before(() => {
+        cy.loginAs('admin');
+    });
+
+    describe('Answer input field verification: Edit tab functionality', () => {
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsOverImageTextPage.steps.navigateToCreateQuestion('fill in the gaps over image with text');
+            cy.barsPreLoaderWait();
+            fillInTheGapsOverImageTextPage.steps.uploadFile('highlightImage.jpg');
+            fillInTheGapsOverImageTextPage.steps.verifyImageIsUploaded();
+            fillInTheGapsOverImageTextPage.steps.insertResponseArea(80);
+        });
+
+        it('\'Answers\' label and one empty input field should be displayed', () => {
+            utilities.verifyInnerText(fillInTheGapsOverImageTextPage.responseAccordionAnswersLabel(), 'Answers');
+            utilities.verifyElementVisibilityState(fillInTheGapsOverImageTextPage.responseAccordionAnswersLabel(), 'visible');
+            utilities.verifyInnerText(fillInTheGapsOverImageTextPage.answerInputFieldSpecifyCorrectAnswerSection(), '');
+            utilities.verifyElementVisibilityState(fillInTheGapsOverImageTextPage.answerInputFieldSpecifyCorrectAnswerSection(), 'visible');
+            utilities.verifyElementCount(fillInTheGapsOverImageTextPage.answerInputFieldSpecifyCorrectAnswerSection(), 1);
+        });
+
+        it('When there is a single input field, then answer input field should not have numeration and delete button ', () => {
+            utilities.verifyElementCount(fillInTheGapsOverImageTextPage.responseAccordionAnswerInputFieldWrapper(), 1);
+            utilities.verifyElementVisibilityState(fillInTheGapsOverImageTextPage.responseAccordionAnswerNumeration(), 'notExist');
+            utilities.verifyElementVisibilityState(fillInTheGapsOverImageTextPage.responseAccordionAnswerDeleteButton(), 'notExist');
+        });
+
+        it('\'Add alternate\' button should be displayed', () => {
+            utilities.verifyInnerText(fillInTheGapsOverImageTextPage.responseAccordionAddAlternateButtonLabel(), 'Add alternate');
+            utilities.verifyElementVisibilityState(fillInTheGapsOverImageTextPage.responseAccordionAddAlternateButtonLabel(), 'visible');
+        });
+
+        it('When user has not entered text inside answer input field and clicks on \'Add alternate\' answer then \'Error: Answer is required.\' error message should be displayed', () => {
+            fillInTheGapsOverImageTextPage.steps.addAlternateAnswerInResponseAccordion(0);
+            utilities.verifyInnerText(fillInTheGapsOverImageTextPage.errorMessage(), 'Error: Answer is required.');
+            utilities.verifyElementVisibilityState(fillInTheGapsOverImageTextPage.errorMessage(), 'visible');
+        });
+
+        it('When user enters text inside answer input field, then error message should disappear', () => {
+            fillInTheGapsOverImageTextPage.steps.enterTextInAnswerInputFieldsSpecifyCorrectAnswerSection([{ responseIndex: 0, responseText: 'Flower' }]);
+            fillInTheGapsOverImageTextPage.steps.verifyErrorMessageIsNotDisplayed();
+        });
+
+        it('When the user clicks on the \'Add Alternate\' button, then one alternate answer input field should be displayed', () => {
+            fillInTheGapsOverImageTextPage.steps.addAlternateAnswerInResponseAccordion(0);
+            utilities.verifyElementCount(fillInTheGapsOverImageTextPage.responseAccordionAnswerInputField(), 2);
+            utilities.verifyElementVisibilityState(fillInTheGapsOverImageTextPage.responseAccordionAddAlternateButton(), 'visible');
+        });
+
+        it('Each input field should be appropriately numbered, and a delete button should be provided for each input field', () => {
+            fillInTheGapsOverImageTextPage.steps.verifyResponseAccordionAnswerInputFieldNumeration(0);
+            fillInTheGapsOverImageTextPage.steps.verifyResponseAccordionAnswerInputFieldDeleteButton(0);
+        });
+
+        it('When user hovers over delete button, then tooltip \'Delete\' should be displayed', () => {
+            utilities.getNthElement(fillInTheGapsOverImageTextPage.responseAccordionAnswerDeleteButton(), 0)
+                .verifyTooltip('Delete');
+        });
+
+        it('When no input is provided in answer input field, then placeholder text \'Enter answer\' should be displayed in the answer input field', () => {
+            fillInTheGapsOverImageTextPage.steps.verifyAnswerInputFieldPlaceholder(1);
+        });
+
+        it('When the user clicks on the \'Add Alternate\' button without entering text in the newly added alternate answer input field, then an error message should be displayed, indicating \'Error: Answer is required.\'', () => {
+            fillInTheGapsOverImageTextPage.steps.addAlternateAnswerInResponseAccordion(0);
+            utilities.verifyInnerText(fillInTheGapsOverImageTextPage.errorMessage(), 'Error: Answer is required.');
+        });
+
+        it('When user adds text in alternate input field and clicks on \'Add alternate\' button, then then a third alternate answer input field should be displayed and error message should disappear', () => {
+            fillInTheGapsOverImageTextPage.steps.enterTextInAnswerInputFieldsSpecifyCorrectAnswerSection([{ responseIndex: 1, responseText: 'Leaf' }]);
+            fillInTheGapsOverImageTextPage.steps.verifyErrorMessageIsNotDisplayed();
+            fillInTheGapsOverImageTextPage.steps.addAlternateAnswerInResponseAccordion(0);
+            utilities.verifyElementCount(fillInTheGapsOverImageTextPage.responseAccordionAnswerInputField(), 3);
+        });
+
+        it('CSS of answer input field', { tags: 'css' }, () => {
+            utilities.verifyCSS(fillInTheGapsOverImageTextPage.responseAccordionAnswersLabel(), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.semibold,
+            });
+            utilities.verifyCSS(utilities.getNthElement(fillInTheGapsOverImageTextPage.answerInputFieldSpecifyCorrectAnswerSection(), 1), {
+                'color': css.color.text,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular,
+            });
+            utilities.verifyCSS(utilities.getNthElement(fillInTheGapsOverImageTextPage.responseAccordionAnswerNumeration(), 1), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.semibold,
+            });
+            utilities.getNthElement(fillInTheGapsOverImageTextPage.responseAccordionAnswerDeleteButton(), 1)
+                .find('button')
+                .verifyPseudoClassBeforeProperty('color', css.color.deleteIcon);
+        });
+
+        it('Accessibility of response accordion', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(fillInTheGapsOverImageTextPage.responseAccordion());
+        });
+
+        it('When provided input is cleared from answer input field, then placeholder text should be displayed again in the answer input field', () => {
+            fillInTheGapsOverImageTextPage.steps.clearAnswerInputField(0);
+            fillInTheGapsOverImageTextPage.steps.verifyAnswerInputFieldPlaceholder(0);
+        });
+
+        it('When user deletes input field, then alternate answer field should be deleted and each input field should have appropriate numeration and delete button', () => {
+            fillInTheGapsOverImageTextPage.steps.deleteResponseAccordionAnswerInputField(0, 0);
+            fillInTheGapsOverImageTextPage.steps.verifyResponseAccordionAnswerInputFieldNumeration(0);
+            fillInTheGapsOverImageTextPage.steps.verifyResponseAccordionAnswerInputFieldDeleteButton(0);
+        });
+    });
+
+    describe('Accepted student input - Edit tab functionality', () => {
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsOverImageTextPage.steps.navigateToCreateQuestion('fill in the gaps over image with text');
+            cy.barsPreLoaderWait();
+            fillInTheGapsOverImageTextPage.steps.uploadFile('highlightImage.jpg');
+            fillInTheGapsOverImageTextPage.steps.verifyImageIsUploaded();
+            fillInTheGapsOverImageTextPage.steps.insertResponseArea(80);
+        });
+
+        it('When \'Text\' is selected in accepted student input, then user should be able to enter alphanumeric characters and special symbols in the answer input field', () => {
+            fillInTheGapsOverImageTextPage.steps.verifyAcceptedStudentTypeActiveButton(0, 'Text');
+            fillInTheGapsOverImageTextPage.steps.enterTextInAnswerInputFieldsSpecifyCorrectAnswerSection([{ responseIndex: 0, responseText: 'Hi23(^^)' }]);
+            fillInTheGapsOverImageTextPage.steps.verifyTextInResponseAccordionAnswerInputField([{ responseIndex: 0, responseText: 'Hi23(^^)' }]);
+        });
+
+        it('When user selects \'Number\' in accepted student input, then text inside the answer input field should only include numbers part from the previously entered input', () => {
+            fillInTheGapsOverImageTextPage.steps.selectAcceptedStudentInputType(0, 'Number');
+            fillInTheGapsOverImageTextPage.steps.verifyTextInResponseAccordionAnswerInputField([{ responseIndex: 0, responseText: '23' }]);
+        });
+
+        it('User should not be able to enter characters or special symbols i.e. answer input field should only contain numbers', () => {
+            fillInTheGapsOverImageTextPage.steps.enterTextInAnswerInputFieldsSpecifyCorrectAnswerSection([{ responseIndex: 0, responseText: 'ABc^12' }]);
+            fillInTheGapsOverImageTextPage.steps.verifyTextInResponseAccordionAnswerInputField([{ responseIndex: 0, responseText: '12' }]);
+        });
+
+        it('User should be able to enter negative numbers in answer input field', () => {
+            fillInTheGapsOverImageTextPage.steps.enterTextInAnswerInputFieldsSpecifyCorrectAnswerSection([{ responseIndex: 0, responseText: '-5' }]);
+            fillInTheGapsOverImageTextPage.steps.verifyTextInResponseAccordionAnswerInputField([{ responseIndex: 0, responseText: '-5' }]);
+        });
+
+        it('User should be able to add zero in input field', () => {
+            fillInTheGapsOverImageTextPage.steps.enterTextInAnswerInputFieldsSpecifyCorrectAnswerSection([{ responseIndex: 0, responseText: '0' }]);
+            fillInTheGapsOverImageTextPage.steps.verifyTextInResponseAccordionAnswerInputField([{ responseIndex: 0, responseText: '0' }]);
+        });
+
+        it('User should be able to enter decimal numbers in answer input field', () => {
+            fillInTheGapsOverImageTextPage.steps.enterTextInAnswerInputFieldsSpecifyCorrectAnswerSection([{ responseIndex: 0, responseText: '29.54' }]);
+            fillInTheGapsOverImageTextPage.steps.verifyTextInResponseAccordionAnswerInputField([{ responseIndex: 0, responseText: '29.54' }]);
+        });
+
+        it('When user selects \'Integer\' in accepted student input, then text inside the answer input field should only include whole numbers part from the previously entered input', () => {
+            fillInTheGapsOverImageTextPage.steps.selectAcceptedStudentInputType(0, 'Integer');
+            fillInTheGapsOverImageTextPage.steps.verifyTextInResponseAccordionAnswerInputField([{ responseIndex: 0, responseText: '2954' }]);
+        });
+
+        it('When \'Integer\' is selected in accepted student input, then user should not be able to add characters or special symbols i.e. input field should only include whole numbers', () => {
+            fillInTheGapsOverImageTextPage.steps.enterTextInAnswerInputFieldsSpecifyCorrectAnswerSection([{ responseIndex: 0, responseText: '29hi*5k4.5' }]);
+            fillInTheGapsOverImageTextPage.steps.verifyTextInResponseAccordionAnswerInputField([{ responseIndex: 0, responseText: '29545' }]);
+        });
+
+        it('User should be able to add zero in input field', () => {
+            fillInTheGapsOverImageTextPage.steps.enterTextInAnswerInputFieldsSpecifyCorrectAnswerSection([{ responseIndex: 0, responseText: '0' }]);
+            fillInTheGapsOverImageTextPage.steps.verifyTextInResponseAccordionAnswerInputField([{ responseIndex: 0, responseText: '0' }]);
+        });
+
+        it('User should not be able to add negative number i.e. input field should only include positive whole numbers', () => {
+            fillInTheGapsOverImageTextPage.steps.enterTextInAnswerInputFieldsSpecifyCorrectAnswerSection([{ responseIndex: 0, responseText: '-44' }]);
+            fillInTheGapsOverImageTextPage.steps.verifyTextInResponseAccordionAnswerInputField([{ responseIndex: 0, responseText: '44' }]);
+        });
+
+        it('When user selects \'Text\' in accepted student input again, then answer input field should contain text from previously added input', () => {
+            fillInTheGapsOverImageTextPage.steps.selectAcceptedStudentInputType(0, 'Text');
+            fillInTheGapsOverImageTextPage.steps.verifyTextInResponseAccordionAnswerInputField([{ responseIndex: 0, responseText: '44' }]);
+        });
+
+        it('When user adds alternate answer input field, then accepted student input should be applied on both the response answer input fields in the response accordion', () => {
+            fillInTheGapsOverImageTextPage.steps.addAlternateAnswerInResponseAccordion(0);
+            fillInTheGapsOverImageTextPage.steps.enterTextInAnswerInputFieldsSpecifyCorrectAnswerSection([{ responseIndex: 1, responseText: 'Hi12' }]);
+            fillInTheGapsOverImageTextPage.steps.verifyTextInResponseAccordionAnswerInputField([{ responseIndex: 1, responseText: '12' }]);
+        });
+
+        it('When user adds multiple text container and set different accepted student input then it should be applied appropriately', () => {
+            fillInTheGapsOverImageTextPage.steps.insertResponseArea(40);
+            fillInTheGapsOverImageTextPage.steps.enterTextInAnswerInputFieldsSpecifyCorrectAnswerSection([{ responseIndex: 2, responseText: 'Answer12' }]);
+            fillInTheGapsOverImageTextPage.steps.verifyTextInResponseAccordionAnswerInputField([{ responseIndex: 2, responseText: 'Answer12' }]);
+        });
+    });
+
+    describe('Accepted student input - Preview tab functionality', () => {
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsOverImageTextPage.steps.navigateToCreateQuestion('fill in the gaps over image with text');
+            cy.barsPreLoaderWait();
+            fillInTheGapsOverImageTextPage.steps.uploadFile('highlightImage.jpg');
+            fillInTheGapsOverImageTextPage.steps.verifyImageIsUploaded();
+            fillInTheGapsOverImageTextPage.steps.insertResponseArea(80);
+        });
+
+        it('When \'Text\' is selected in accepted student input in edit tab, then user should be able to enter alphanumeric characters and special symbols in the preview tab', () => {
+            fillInTheGapsOverImageTextPage.steps.verifyAcceptedStudentTypeActiveButton(0, 'Text');
+            fillInTheGapsOverImageTextPage.steps.switchToPreviewTab();
+            fillInTheGapsOverImageTextPage.steps.enterTextInAnswerInputFieldsPreviewTab([{ responseIndex: 0, responseText: 'Flower23^^' }]);
+            fillInTheGapsOverImageTextPage.steps.verifyTextInAnswerInputFieldsPreviewTab([{ responseIndex: 0, responseText: 'Flower23^^' }]);
+        });
+
+        it('When user selects \'Number\' in accepted student input in edit tab, then user should be able to enter only numbers inside text container in preview tab', () => {
+            fillInTheGapsOverImageTextPage.steps.switchToEditTab();
+            fillInTheGapsOverImageTextPage.steps.selectAcceptedStudentInputType(0, 'Number');
+            fillInTheGapsOverImageTextPage.steps.switchToPreviewTab();
+            fillInTheGapsOverImageTextPage.steps.enterTextInAnswerInputFieldsPreviewTab([{ responseIndex: 0, responseText: 'Flower232&' }]);
+            fillInTheGapsOverImageTextPage.steps.verifyTextInAnswerInputFieldsPreviewTab([{ responseIndex: 0, responseText: '232' }]);
+        });
+
+        it('User should be able to enter decimal numbers inside text container in preview tab', () => {
+            fillInTheGapsOverImageTextPage.steps.enterTextInAnswerInputFieldsPreviewTab([{ responseIndex: 0, responseText: '23.2' }]);
+            fillInTheGapsOverImageTextPage.steps.verifyTextInAnswerInputFieldsPreviewTab([{ responseIndex: 0, responseText: '23.2' }]);
+        });
+
+        it('User should be able to enter negative numbers inside text container in preview tab', () => {
+            fillInTheGapsOverImageTextPage.steps.enterTextInAnswerInputFieldsPreviewTab([{ responseIndex: 0, responseText: '-6' }]);
+            fillInTheGapsOverImageTextPage.steps.verifyTextInAnswerInputFieldsPreviewTab([{ responseIndex: 0, responseText: '-6' }]);
+        });
+
+        it('User should be able to enter zero inside text container in preview tab', () => {
+            fillInTheGapsOverImageTextPage.steps.enterTextInAnswerInputFieldsPreviewTab([{ responseIndex: 0, responseText: '0' }]);
+            fillInTheGapsOverImageTextPage.steps.verifyTextInAnswerInputFieldsPreviewTab([{ responseIndex: 0, responseText: '0' }]);
+        });
+
+        it('When user selects \'Integer\' in accepted student input in edit tab, then user should be able to add only whole numbers inside text container', () => {
+            fillInTheGapsOverImageTextPage.steps.switchToEditTab();
+            fillInTheGapsOverImageTextPage.steps.selectAcceptedStudentInputType(0, 'Integer');
+            fillInTheGapsOverImageTextPage.steps.switchToPreviewTab();
+            fillInTheGapsOverImageTextPage.steps.enterTextInAnswerInputFieldsPreviewTab([{ responseIndex: 0, responseText: 'Flower232&*' }]);
+            fillInTheGapsOverImageTextPage.steps.verifyTextInAnswerInputFieldsPreviewTab([{ responseIndex: 0, responseText: '232' }]);
+        });
+
+        it('When user has selected \'Integer\' in accepted student input, then user should not be able to add decimal numbers in the text container', () => {
+            fillInTheGapsOverImageTextPage.steps.enterTextInAnswerInputFieldsPreviewTab([{ responseIndex: 0, responseText: '22.4' }]);
+            fillInTheGapsOverImageTextPage.steps.verifyTextInAnswerInputFieldsPreviewTab([{ responseIndex: 0, responseText: '224' }]);
+        });
+
+        it('When user has selected \'Integer\' in accepted student input, then user should not be able to add negative number inside text container i.e. input field should only include positive whole numbers.', () => {
+            fillInTheGapsOverImageTextPage.steps.enterTextInAnswerInputFieldsPreviewTab([{ responseIndex: 0, responseText: '-5' }]);
+            fillInTheGapsOverImageTextPage.steps.verifyTextInAnswerInputFieldsPreviewTab([{ responseIndex: 0, responseText: '5' }]);
+        });
+
+        it('User should be able to enter zero inside text container in preview tab', () => {
+            fillInTheGapsOverImageTextPage.steps.enterTextInAnswerInputFieldsPreviewTab([{ responseIndex: 0, responseText: '0' }]);
+            fillInTheGapsOverImageTextPage.steps.verifyTextInAnswerInputFieldsPreviewTab([{ responseIndex: 0, responseText: '0' }]);
+        });
+
+        it('When user adds multiple text container and sets different accepted student input in edit tab then it should be applied appropriately in preview tab', () => {
+            fillInTheGapsOverImageTextPage.steps.switchToEditTab();
+            fillInTheGapsOverImageTextPage.steps.insertResponseArea(40);
+            fillInTheGapsOverImageTextPage.steps.switchToPreviewTab();
+            fillInTheGapsOverImageTextPage.steps.enterTextInAnswerInputFieldsPreviewTab([{ responseIndex: 0, responseText: 'Flower232&*' }]);
+            fillInTheGapsOverImageTextPage.steps.verifyTextInAnswerInputFieldsPreviewTab([{ responseIndex: 0, responseText: '232' }]);
+            fillInTheGapsOverImageTextPage.steps.enterTextInAnswerInputFieldsPreviewTab([{ responseIndex: 1, responseText: 'Flower232&*' }]);
+            fillInTheGapsOverImageTextPage.steps.verifyTextInAnswerInputFieldsPreviewTab([{ responseIndex: 1, responseText: 'Flower232&*' }]);
+        });
+    });
+});

package/cypress/e2e/ILC/FillInTheGapsOverImageTextNew/specialCharactersSection.js

@@ -0,0 +1,300 @@
+import { specialCharacters } from "../../../fixtures/drawingToolbarOptionsAdditionalOptionsAndSpecialAndMathCharacters";
+import { dialogBoxBase, fillInTheGapsOverImageTextPage } from "../../../pages";
+import abortEarlySetup from "../../../support/helpers/abortEarly";
+import utilities from "../../../support/helpers/utilities";
+const css = Cypress.env('css');
+
+const specialCharactersCategories = Object.values(specialCharacters.map((icon) => icon.categoryName));
+const customSpecialCharacters = ['A', '1', '#'];
+
+describe('Create item page - Fill in the gaps over image - text - Special characters section', () => {
+    before(() => {
+        cy.loginAs('admin');
+    });
+
+    describe('Special characters section - edit tab', () => {
+        const newSelectedCategoryList = specialCharacters.slice(1);
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsOverImageTextPage.steps.navigateToCreateQuestion('fill in the gaps over image with text');
+            cy.barsPreLoaderWait();
+        });
+
+        it('\'Special characters\' section label and unchecked \'Enable special characters\' checkbox and label should be displayed', () => {
+            utilities.verifyElementVisibilityState(fillInTheGapsOverImageTextPage.specialCharactersLabel(), 'visible');
+            utilities.verifyInnerText(fillInTheGapsOverImageTextPage.specialCharactersLabel(), 'Special characters');
+            utilities.verifyElementVisibilityState(fillInTheGapsOverImageTextPage.enableSpecialCharactersLabel(), 'visible');
+            utilities.verifyInnerText(fillInTheGapsOverImageTextPage.enableSpecialCharactersLabel(), 'Enable special characters');
+            utilities.verifyElementVisibilityState(fillInTheGapsOverImageTextPage.enableSpecialCharactersCheckbox(), 'exist');
+            fillInTheGapsOverImageTextPage.steps.verifyEnableSpecialCharactersCheckboxUnchecked();
+        });
+
+        it('When the user checks the \'Enable special characters\' checkbox, \'Group by language\' and \'Show only custom special characters\' labels and radio buttons should be displayed. By default \'Group by language\' radio button should be checked', () => {
+            fillInTheGapsOverImageTextPage.steps.checkEnableSpecialCharactersCheckbox();
+            utilities.verifyElementVisibilityState(fillInTheGapsOverImageTextPage.groupByLanguageRadioButton(), 'exist');
+            utilities.verifyElementVisibilityState(fillInTheGapsOverImageTextPage.groupByLanguageLabel(), 'visible');
+            utilities.verifyInnerText(fillInTheGapsOverImageTextPage.groupByLanguageLabel(), 'Group by language');
+            utilities.verifyElementVisibilityState(fillInTheGapsOverImageTextPage.showOnlyCustomSpecialCharactersRadioButton(), 'exist');
+            utilities.verifyElementVisibilityState(fillInTheGapsOverImageTextPage.showOnlyCustomSpecialCharactersLabel(), 'visible');
+            utilities.verifyInnerText(fillInTheGapsOverImageTextPage.showOnlyCustomSpecialCharactersLabel(), 'Show only custom special characters');
+            fillInTheGapsOverImageTextPage.steps.verifyGroupedByLanguageRadioButtonIsSelected();
+        });
+
+        it('\'Select special character languages\' label should be displayed. A \'Preview\' hyperlink should be displayed next to the label', () => {
+            utilities.verifyElementVisibilityState(fillInTheGapsOverImageTextPage.selectSpecialCharacterLanguagesLabel(), 'visible');
+            utilities.verifyInnerText(fillInTheGapsOverImageTextPage.selectSpecialCharacterLanguagesLabel(), 'Select special character languages');
+            utilities.verifyElementVisibilityState(fillInTheGapsOverImageTextPage.customizeSpecialCharactersPreviewButton(), 'visible');
+            utilities.verifyInnerText(fillInTheGapsOverImageTextPage.customizeSpecialCharactersPreviewButton(), 'Preview');
+        });
+
+        it(`A total of ${specialCharactersCategories.length} options should be displayed - ${specialCharactersCategories.join('')}. By default all language options should be in selected state`, () => {
+            fillInTheGapsOverImageTextPage.steps.verifyCustomizeSpecialCharactersCategoryTiles(specialCharactersCategories);
+            fillInTheGapsOverImageTextPage.steps.verifySelectedCustomizeSpecialCharactersCategoryTiles(specialCharactersCategories);
+        });
+
+        it('When the user clicks on the \'Preview\' hyperlink, a special characters popup should be displayed with all the special characters segregated according to all the language options. The user should be able to close the popup by clicking on the \'Close[X]\' button', () => {
+            fillInTheGapsOverImageTextPage.steps.clickOnCustomizeSpecialCharactersPreviewButton();
+            utilities.verifyElementVisibilityState(dialogBoxBase.dialogBox(), 'visible');
+            //Add this verification once https://redmine.zeuslearning.com/issues/555008 is resolved
+            // fillInTheGapsOverImageTextPage.steps.verifySpecialCharactersPreviewPopupInEditTab(specialCharacters);
+            cy.log('Post-step: Closing preview popup')
+            dialogBoxBase.steps.closeWarningPopup();
+        });
+
+        it('When the user deselects any language option and opens the special characters popup by clicking on the \'Preview\' hyperlink, then the popup contents should get updated accordingly', () => {
+            fillInTheGapsOverImageTextPage.steps.clickOnSpecialCharactersCategoryTile(specialCharacters[0].categoryName);
+            fillInTheGapsOverImageTextPage.steps.verifySpecialCharacterCategoryTileIsNotSelected(specialCharacters[0].categoryName);
+            fillInTheGapsOverImageTextPage.steps.clickOnCustomizeSpecialCharactersPreviewButton();
+            //Add this verification once https://redmine.zeuslearning.com/issues/555008 is resolved
+            //fillInTheGapsOverImageTextPage.steps.verifySpecialCharactersPreviewPopupInEditTab(specialCharacters);
+            cy.log('Post-step: Closing preview popup')
+            dialogBoxBase.steps.closeWarningPopup();
+        });
+
+        it('When the user checks the \'Show only custom special characters\' radio button, \'Custom special characters\' label and input field should be displayed. A \'Preview\' hyperlink should be displayed next to the label', () => {
+            fillInTheGapsOverImageTextPage.steps.selectShowOnlyCustomSpecialCharactersRadioButton();
+            utilities.verifyElementVisibilityState(fillInTheGapsOverImageTextPage.customSpecialCharactersInputField(), 'visible');
+            utilities.verifyInnerText(fillInTheGapsOverImageTextPage.customSpecialCharactersLabel(), 'Custom special characters');
+            utilities.verifyElementVisibilityState(fillInTheGapsOverImageTextPage.customSpecialCharactersLabel(), 'visible');
+            utilities.verifyElementVisibilityState(fillInTheGapsOverImageTextPage.customizeSpecialCharactersPreviewButton(), 'visible');
+        });
+
+        it('When the user specifies custom special characters, then on clicking on the \'Preview\' hyperlink, only the specified custom special characters should be displayed in the popup', () => {
+            fillInTheGapsOverImageTextPage.steps.addInputToCustomSpecialCharactersInputField(`${customSpecialCharacters.join('')}`);
+            fillInTheGapsOverImageTextPage.steps.clickOnCustomizeSpecialCharactersPreviewButton();
+            fillInTheGapsOverImageTextPage.steps.verifyCustomSpecialCharactersDisplayedInPreviewPopupEditTab(customSpecialCharacters);
+            cy.log('Post-step: Closing preview popup')
+            dialogBoxBase.steps.closeWarningPopup();
+        });
+
+        it('CSS of special characters section', { tags: 'css' }, () => {
+            utilities.verifyCSS(fillInTheGapsOverImageTextPage.specialCharactersLabel(), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.semibold
+            });
+            //checked state of enable special characters checkbox
+            utilities.verifyCSS(fillInTheGapsOverImageTextPage.enableSpecialCharactersCheckbox().find('rect').eq(1), {
+                'fill': css.color.activeButtons
+            });
+            utilities.verifyCSS(fillInTheGapsOverImageTextPage.groupByLanguageLabel(), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.regular
+            });
+            //selected state of radio button
+            utilities.verifyCSS(fillInTheGapsOverImageTextPage.showOnlyCustomSpecialCharactersRadioButton().find('svg'), {
+                'fill': css.color.activeButtons
+            });
+            utilities.verifyCSS(fillInTheGapsOverImageTextPage.customSpecialCharactersLabel(), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.semibold
+            });
+            utilities.verifyCSS(fillInTheGapsOverImageTextPage.customSpecialCharactersInputField(), {
+                'color': css.color.text,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular
+            });
+            utilities.verifyCSS(fillInTheGapsOverImageTextPage.customSpecialCharactersInputField().find('fieldset'), {
+                'border': `1px solid ${css.color.figDefaultComponentBorder}`
+            });
+            utilities.verifyCSS(fillInTheGapsOverImageTextPage.customizeSpecialCharactersPreviewButton(), {
+                'color': css.color.activeButtons,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.regular
+            });
+            cy.log('Selecting group by language radio button');
+            fillInTheGapsOverImageTextPage.steps.selectGroupByLanguageRadioButton();
+            utilities.verifyCSS(fillInTheGapsOverImageTextPage.selectSpecialCharacterLanguagesLabel(), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.semibold
+            });
+            //Category tiles in selected state
+            utilities.verifyCSS(fillInTheGapsOverImageTextPage.specialCharacterTileIcon().eq(1).find('svg'), {
+                'fill': css.color.defaultBackground
+            });
+            utilities.verifyCSS(fillInTheGapsOverImageTextPage.TickIcon().last().find('path[data-name*="Rectangle"]'), {
+                'fill': css.color.defaultBackground
+            });
+            utilities.verifyCSS(fillInTheGapsOverImageTextPage.TickIcon().last().find('path[data-name*="feather-check"]'), {
+                'fill': css.color.activeButtons
+            });
+            utilities.verifyCSS(fillInTheGapsOverImageTextPage.specialCharacterTileSectionCategoriesDragIcon().eq(1).find('path'), {
+                'fill': css.color.activeButtons
+            });
+            utilities.verifyCSS(fillInTheGapsOverImageTextPage.specialCharacterTileSectionCategoriesDragIcon().eq(1).parent(), {
+                'background-color': css.color.defaultBackground
+            });
+            utilities.verifyCSS(fillInTheGapsOverImageTextPage.specialCharacterTileCategoryName().eq(1), {
+                'color': css.color.whiteText,
+                'font-size': css.fontSize.small,
+                'font-weight': css.fontWeight.regular
+            });
+            utilities.verifyCSS(fillInTheGapsOverImageTextPage.specialCharacterTiles().eq(1), {
+                'background-color': css.color.primaryBtnBg
+            });
+            //Category tiles in de-selected state
+            utilities.verifyCSS(fillInTheGapsOverImageTextPage.specialCharacterTileIcon().eq(0).find('svg'), {
+                'fill': css.color.secondaryBtn
+            });
+            utilities.verifyCSS(fillInTheGapsOverImageTextPage.specialCharacterTileSectionCategoriesDragIcon().eq(0).parent(), {
+                'fill': css.color.secondaryBtn
+            });
+            utilities.verifyCSS(fillInTheGapsOverImageTextPage.specialCharacterTileSectionCategoriesDragIcon().eq(0).parent(), {
+                'fill': css.color.defaultBackground
+            });
+            utilities.verifyCSS(fillInTheGapsOverImageTextPage.specialCharacterTileCategoryName().eq(0), {
+                'color': css.color.secondaryBtn,
+                'font-size': css.fontSize.small,
+                'font-weight': css.fontWeight.regular
+            });
+            utilities.verifyCSS(fillInTheGapsOverImageTextPage.specialCharacterTiles().eq(0), {
+                'background-color': css.color.defaultBackground
+            });
+            cy.log('Opening preview popup and expanding one category accordion');
+            fillInTheGapsOverImageTextPage.steps.clickOnCustomizeSpecialCharactersPreviewButton();
+            fillInTheGapsOverImageTextPage.steps.clickOnSpecialCharactersPreviewPopupCategoryAccordionExpandIcon(0);
+            utilities.verifyCSS(dialogBoxBase.dialogBoxTitle(), {
+                'color': css.color.flyoutTitle,
+                'font-size': css.fontSize.heading,
+                'font-weight': css.fontWeight.bold
+            });
+            utilities.verifyCSS(fillInTheGapsOverImageTextPage.specialCharactersPreviewPopupCategoryLabel().eq(0), {
+                'color': css.color.accordionLabel,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.semibold
+            });
+            utilities.verifyCSS(fillInTheGapsOverImageTextPage.specialCharactersPreviewPopupCategoryAccordionExpandIcon().last().find('svg'), {
+                'fill': css.color.activeButtons
+            });
+            utilities.verifyCSS(fillInTheGapsOverImageTextPage.specialCharactersPreviewPopupSymbol().eq(0).find('svg'), {
+                'fill': css.color.defaultBackground
+            });
+        });
+
+        it('Accessibility of Customize special characters', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(dialogBoxBase.dialogBox());
+            cy.log('Closing preview popup');
+            dialogBoxBase.steps.closeWarningPopup();
+            cy.checkAccessibility(fillInTheGapsOverImageTextPage.specialCharactersLabel().parent());
+            cy.log('Selecting show only custom special characters radio button');
+            fillInTheGapsOverImageTextPage.steps.selectShowOnlyCustomSpecialCharactersRadioButton();
+            cy.checkAccessibility(fillInTheGapsOverImageTextPage.specialCharactersLabel().parent());
+        });
+    });
+
+    describe('Special characters section - preview tab', () => {
+        const newSelectedCategoryList = specialCharacters.slice(1);
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsOverImageTextPage.steps.navigateToCreateQuestion('fill in the gaps over image with text');
+            cy.barsPreLoaderWait();
+            fillInTheGapsOverImageTextPage.steps.uploadFile('highlightImage.jpg');
+            fillInTheGapsOverImageTextPage.steps.verifyImageIsUploaded();
+            fillInTheGapsOverImageTextPage.steps.insertResponseArea(10);
+            fillInTheGapsOverImageTextPage.steps.switchToPreviewTab();
+        });
+
+        it('When \'Enable special characters\' checkbox is unchecked and user focuses on the preview tab response field, then \'Special characters\' button should not be displayed', () => {
+            fillInTheGapsOverImageTextPage.steps.focusInResponseInputFieldPreviewTab(0);
+            utilities.verifyElementVisibilityState(fillInTheGapsOverImageTextPage.specialCharactersButtonPreviewTab(), 'notExist');
+        });
+
+        it('When \'Enable special characters\' checkbox is checked and user focuses on the preview tab response field, then \'Special characters\' button should be displayed', () => {
+            fillInTheGapsOverImageTextPage.steps.switchToEditTab();
+            fillInTheGapsOverImageTextPage.steps.checkEnableSpecialCharactersCheckbox();
+            fillInTheGapsOverImageTextPage.steps.switchToPreviewTab();
+            fillInTheGapsOverImageTextPage.steps.focusInResponseInputFieldPreviewTab(0);
+            utilities.verifyElementVisibilityState(fillInTheGapsOverImageTextPage.specialCharactersButtonPreviewTab(), 'visible');
+            utilities.verifyInnerText(fillInTheGapsOverImageTextPage.specialCharactersButtonPreviewTab(), 'é');
+            utilities.verifyElementCount(fillInTheGapsOverImageTextPage.specialCharactersButtonPreviewTab(), '1');
+        });
+
+        it('When user clicks on response area special characters button, then special characters popup should be displayed with its default contents and all category accordions should be in collapsed state', () => {
+            fillInTheGapsOverImageTextPage.steps.openSpecialCharactersPopupPreviewTab();
+            //Add this verification once https://redmine.zeuslearning.com/issues/555008 is resolved
+            //fillInTheGapsOverImageTextPage.steps.verifySpecialCharactersPopupCategorySymbols(specialCharacters);
+        });
+
+        it('When user clicks on the \'Close\' button then the \'Special characters\' popup should be closed', () => {
+            fillInTheGapsOverImageTextPage.steps.closeSpecialCharactersPopupPreviewTab();
+            utilities.verifyElementVisibilityState(fillInTheGapsOverImageTextPage.specialCharactersPopupTitlePreviewTab(), 'notExist');
+        });
+
+        it('When the user has deselected any language option and opens the special characters popup in the preview tab, then the popup contents should get updated accordingly', () => {
+            fillInTheGapsOverImageTextPage.steps.switchToEditTab();
+            fillInTheGapsOverImageTextPage.steps.clickOnSpecialCharactersCategoryTile(specialCharacters[0].categoryName);
+            fillInTheGapsOverImageTextPage.steps.verifySpecialCharacterCategoryTileIsNotSelected(specialCharacters[0].categoryName);
+            fillInTheGapsOverImageTextPage.steps.switchToPreviewTab();
+            fillInTheGapsOverImageTextPage.steps.focusInResponseInputFieldPreviewTab(0);
+            fillInTheGapsOverImageTextPage.steps.openSpecialCharactersPopupPreviewTab();
+            //Add this verification once https://redmine.zeuslearning.com/issues/555008 is resolved
+            //fillInTheGapsOverImageTextPage.steps.verifySpecialCharactersPopupCategorySymbols(specialCharacters);
+        });
+
+        it('When the user has specified custom special characters and opens the special characters popup in the preview tab, then only the specified custom special characters should be displayed in the popup', () => {
+            fillInTheGapsOverImageTextPage.steps.closeSpecialCharactersPopupPreviewTab();
+            fillInTheGapsOverImageTextPage.steps.switchToEditTab();
+            fillInTheGapsOverImageTextPage.steps.selectShowOnlyCustomSpecialCharactersRadioButton();
+            fillInTheGapsOverImageTextPage.steps.addInputToCustomSpecialCharactersInputField(`${customSpecialCharacters.join('')}`);
+            fillInTheGapsOverImageTextPage.steps.switchToPreviewTab();
+            fillInTheGapsOverImageTextPage.steps.focusInResponseInputFieldPreviewTab(0);
+            fillInTheGapsOverImageTextPage.steps.openSpecialCharactersPopupPreviewTab();
+            fillInTheGapsOverImageTextPage.steps.verifyCustomSpecialCharactersInSpecialCharactersPopupPreviewTab(customSpecialCharacters);
+        });
+
+        it('When user clicks on a special character symbol in special characters popup in the preview tab, then the that symbol should be displayed in the response area input field', () => {
+            fillInTheGapsOverImageTextPage.steps.clickOnCustomSpecialCharacterSymbolInSpecialCharactersPopupPreviewTab(customSpecialCharacters[0]);
+            fillInTheGapsOverImageTextPage.steps.closeSpecialCharactersPopupPreviewTab();
+            fillInTheGapsOverImageTextPage.steps.verifyTextInAnswerInputFieldsPreviewTab([{ responseIndex: 0, responseText: `${customSpecialCharacters[0]}` }])
+        });
+
+        it('CSS of \'Special characters\' popup', { tags: 'css' }, () => {
+            cy.log('Pre-step: Switching to edit tab and selecting group by language radio button');
+            fillInTheGapsOverImageTextPage.steps.switchToEditTab();
+            fillInTheGapsOverImageTextPage.steps.selectGroupByLanguageRadioButton();
+            fillInTheGapsOverImageTextPage.steps.switchToPreviewTab();
+            fillInTheGapsOverImageTextPage.steps.focusInResponseInputFieldPreviewTab(0);
+            fillInTheGapsOverImageTextPage.steps.openSpecialCharactersPopupPreviewTab();
+            utilities.verifyCSS(fillInTheGapsOverImageTextPage.specialCharactersPopupTitlePreviewTab(), {
+                'color': css.color.flyoutTitle,
+                'font-size': css.fontSize.heading,
+                'font-weight': css.fontWeight.bold,
+            });
+
+            utilities.verifyCSS(fillInTheGapsOverImageTextPage.specialCharactersPopupCategoryAccordionLabelPreviewTab().last(), {
+                'color': css.color.accordionLabel,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.bold,
+            });
+            utilities.verifyCSS(fillInTheGapsOverImageTextPage.specialCharactersPopupCategoryAccordionChevronButtonPreviewTab().last().find('svg'), {
+                'fill': css.color.activeButtons
+            });
+            utilities.verifyCSS(fillInTheGapsOverImageTextPage.specialCharactersPopupSymbolPreviewTab().last().find('path'), {
+                'fill': css.color.activeButtons
+            });
+        });
+    });
+});

package/cypress/e2e/ILC/FillInTheGapsOverImageTextNew/specifyCorrectAnswerSection.js

@@ -9,7 +9,7 @@ describe('Create Item page - Fill in the gaps over image - text: Specify correct
     describe('Specify correct answer section - Header and \'Correct\' accordion', () => {
         abortEarlySetup();
         before(() => {
-            cy.log('Navigating to fill in the gaps over image - text question type');
+            cy.log('Navigating to fill in the gaps over image with text question type');
             fillInTheGapsOverImageTextPage.steps.navigateToCreateQuestion('fill in the gaps over image with text');
             cy.barsPreLoaderWait();
             fillInTheGapsOverImageTextPage.steps.uploadFile('highlightImage.jpg');
@@ -17,7 +17,7 @@ describe('Create Item page - Fill in the gaps over image - text: Specify correct
             fillInTheGapsOverImageTextPage.steps.insertResponseArea(10);
         });
 
-        fillInTheGapsOverImageTextPage.tests.verifyAutoScoredSpecifyCorrectAnswerHeaderSectionContents('fill in the gaps over image - text');
+        fillInTheGapsOverImageTextPage.tests.verifyAutoScoredSpecifyCorrectAnswerHeaderSectionContents('fill in the gaps over image with text');
 
         fillInTheGapsOverImageTextPage.tests.verifySpecifyCorrectAnswerAccordionContentsAndFunctionality('Correct');
     });
@@ -25,7 +25,7 @@ describe('Create Item page - Fill in the gaps over image - text: Specify correct
     describe('Specify correct answer section - \'Alternate\' accordion', () => {
         abortEarlySetup();
         before(() => {
-            cy.log('Navigating to fill in the gaps over image - text question type');
+            cy.log('Navigating to fill in the gaps over image with text question type');
             fillInTheGapsOverImageTextPage.steps.navigateToCreateQuestion('fill in the gaps over image with text');
             cy.barsPreLoaderWait();
             fillInTheGapsOverImageTextPage.steps.uploadFile('highlightImage.jpg');