itemengine-cypress-automation 1.0.51 → 1.0.63

package/cypress/e2e/ILC/fillInTheGapsOverImageDropdown/fillInTheGapsOverImageDropdownImageProperties.js

@@ -0,0 +1,156 @@
+import { dialogBoxBase, fillInTheGapsOverImageDropdownPage } from "../../../pages";
+import { uploadImageSectionComponent } from "../../../pages/components";
+import abortEarlySetup from "../../../support/helpers/abortEarly";
+import constants from "../../../fixtures/constants";
+import utilities from "../../../support/helpers/utilities";
+const css = Cypress.env('css');
+
+describe('Create item page - fill in the gaps over image - dropdown: Image properties', () => {
+    before(() => {
+        cy.loginAs('admin');
+    });
+
+    describe('Edit image popup contents and functionality', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigate to fill in the gaps over image - dropdown question type');
+            fillInTheGapsOverImageDropdownPage.steps.navigateToCreateQuestion('fill in the gaps over image - dropdown');
+            cy.log('Uploading an image');
+            uploadImageSectionComponent.steps.uploadFile('highlightImage.jpg');
+            uploadImageSectionComponent.steps.verifyUploadedImageInImagePopup();
+            uploadImageSectionComponent.steps.clickOnImagePopupOkButton();
+            uploadImageSectionComponent.steps.clickOnEditImageButton();
+        });
+
+        uploadImageSectionComponent.tests.verifyUploadImagePopupImageTitle();
+
+        uploadImageSectionComponent.tests.uploadImagePopupContents(500, 500);
+
+        uploadImageSectionComponent.tests.verifyButtonReplaceInImagePopup();
+
+        uploadImageSectionComponent.tests.uploadImageHeightWidthAspectRatioAndResetDimensionsFunctionality(500, 500);
+
+        it('When user clicks on \'Cancel\' button the popup should close and image should not get edited', () => {
+            uploadImageSectionComponent.steps.clickOnImagePopupCancelButton();
+            fillInTheGapsOverImageDropdownPage.steps.verifyWidthInputFieldValue(500);
+            fillInTheGapsOverImageDropdownPage.steps.verifyHeightInputFieldValue(500);
+            cy.log('Post step: Clicking on edit image button')
+            uploadImageSectionComponent.steps.clickOnEditImageButton();
+        });
+
+        uploadImageSectionComponent.tests.uploadImageReplaceButtonFunctionality();
+
+        it('When user makes some edits and clicks on the \'Ok\' button the popup should close and the edited image should be uploaded', () => {
+            uploadImageSectionComponent.steps.clickOnImagePopupOkButton();
+            fillInTheGapsOverImageDropdownPage.steps.verifyWidthInputFieldValue(225);
+            fillInTheGapsOverImageDropdownPage.steps.verifyHeightInputFieldValue(225);
+        });
+    });
+
+    describe('Edit image pop up content - source URL', () => {
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsOverImageDropdownPage.steps.navigateToCreateQuestion('fill in the gaps over image - dropdown');
+            cy.log('Uploading an image using source url');
+            uploadImageSectionComponent.steps.clickOnSourceURL();
+            uploadImageSectionComponent.steps.uploadImageUsingSourceURL(constants.flowerImage);
+            uploadImageSectionComponent.steps.clickOnImagePopupOkButton();
+            uploadImageSectionComponent.steps.clickOnEditImageButton();
+        });
+
+        //Failing due to  https://redmine.zeuslearning.com/issues/543833
+        uploadImageSectionComponent.tests.verifyUploadImageSourceURLTitle();
+
+        uploadImageSectionComponent.tests.verifyUploadImageSourceURLLabelAndInputFieldInEditSourceURLPopup();
+
+        uploadImageSectionComponent.tests.uploadImagePopupContents(650, 684);
+    });
+
+    describe('Delete image - Edit tab', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigate to fill in the gaps over image - dropdown question type');
+            fillInTheGapsOverImageDropdownPage.steps.navigateToCreateQuestion('fill in the gaps over image - dropdown');
+            cy.log('Uploading an image');
+            uploadImageSectionComponent.steps.uploadFile('highlightImage.jpg');
+            uploadImageSectionComponent.steps.verifyUploadedImageInImagePopup();
+            uploadImageSectionComponent.steps.clickOnImagePopupOkButton();
+        });
+
+        uploadImageSectionComponent.tests.verifyDeleteImagePopup();
+
+        it('When user clicks on \'Cancel\' button the popup should close and image should not get deleted', () => {
+            dialogBoxBase.steps.clickOnRejectButtonInDialogBox();
+            utilities.verifyElementVisibilityState(fillInTheGapsOverImageDropdownPage.imageSectionImage(), 'visible');
+        });
+
+        it('When user clicks on \'Delete image\' button the popup should close and image should get deleted', () => {
+            uploadImageSectionComponent.steps.clickOnDeleteImageButton();
+            dialogBoxBase.steps.clickOnAcceptButtonInDialogBox();
+            utilities.verifyElementVisibilityState(fillInTheGapsOverImageDropdownPage.imageSectionImage(), 'notExist')
+        });
+    });
+
+    describe('Image properties section contents', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigate to fill in the gaps over image - dropdown question type');
+            fillInTheGapsOverImageDropdownPage.steps.navigateToCreateQuestion('fill in the gaps over image - dropdown');
+            cy.barsPreLoaderWait();
+        });
+
+        fillInTheGapsOverImageDropdownPage.tests.verifyImagePropertiesSectionContents();
+    });
+
+    describe('Image properties - \'Image hover text\' and \'Image alternative text\' : Edit tab', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigate to fill in the gaps over image - dropdown question type');
+            fillInTheGapsOverImageDropdownPage.steps.navigateToCreateQuestion('fill in the gaps over image - dropdown');
+            cy.barsPreLoaderWait();
+            fillInTheGapsOverImageDropdownPage.steps.uploadFile('highlightImage.jpg');
+            fillInTheGapsOverImageDropdownPage.steps.clickOnImagePopupOkButton();
+        });
+
+        fillInTheGapsOverImageDropdownPage.tests.verifyImageHoverAndAlternativeTextFunctionalityInEditTab();
+    });
+
+    describe('Image properties - \'Image hover text\' and \'Image alternative text\' : Preview tab', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigate to fill in the gaps over image - dropdown question type');
+            fillInTheGapsOverImageDropdownPage.steps.navigateToCreateQuestion('fill in the gaps over image - dropdown');
+            cy.barsPreLoaderWait();
+            fillInTheGapsOverImageDropdownPage.steps.uploadFile('highlightImage.jpg');
+            fillInTheGapsOverImageDropdownPage.steps.clickOnImagePopupOkButton();
+        });
+
+        fillInTheGapsOverImageDropdownPage.tests.verifyImageHoverAndAlternativeTextFunctionalityInPreviewTab();
+    });
+
+    describe('Image properties - \'Height and width (px)\' : Edit tab', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigate to fill in the gaps over image - dropdown question type');
+            fillInTheGapsOverImageDropdownPage.steps.navigateToCreateQuestion('fill in the gaps over image - dropdown');
+            cy.barsPreLoaderWait();
+            fillInTheGapsOverImageDropdownPage.steps.uploadFile('highlightImage.jpg');
+            fillInTheGapsOverImageDropdownPage.steps.clickOnImagePopupOkButton();
+        });
+
+        fillInTheGapsOverImageDropdownPage.tests.verifyImagePropertiesHeightAndWidthInputFieldInEditTab();
+    });
+
+    describe('Image properties - \'Height and width (px)\' : Preview tab', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigate to fill in the gaps over image - dropdown question type');
+            fillInTheGapsOverImageDropdownPage.steps.navigateToCreateQuestion('fill in the gaps over image - dropdown');
+            cy.barsPreLoaderWait();
+            fillInTheGapsOverImageDropdownPage.steps.uploadFile('highlightImage.jpg');
+            fillInTheGapsOverImageDropdownPage.steps.clickOnImagePopupOkButton();
+        });
+
+        fillInTheGapsOverImageDropdownPage.tests.verifyImagePropertiesHeightAndWidthInputFieldInPreviewTab();
+    });
+});

package/cypress/e2e/ILC/fillInTheGapsOverImageDropdown/fillInTheGapsOverImageDropdownManualAndNonScoredScoring.js

@@ -0,0 +1,165 @@
+import { fillInTheGapsOverImageDropdownPage } from "../../../pages";
+import abortEarlySetup from "../../../support/helpers/abortEarly";
+import utilities from "../../../support/helpers/utilities";
+
+const optionsForResponse1 = ['Flower', 'Petal', 'Stem', 'Branch'];
+const optionsForResponse2 = ['Leaf', 'Leaves', 'Stem', 'Seed'];
+const correctTabAnswerArray = ['Flower', 'Leaf'];
+const incorrectAnswerArray = ['Branch', 'Seed'];
+
+describe('Create item page - Fill in the gaps over image - dropdown: Manually and Non-scored', () => {
+    before(() => {
+        cy.loginAs('admin');
+    });
+
+    describe('Question preview: Manually scored', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigate to fill in the gaps over image - dropdown question type');
+            fillInTheGapsOverImageDropdownPage.steps.navigateToCreateQuestion('fill in the gaps over image - dropdown');
+            cy.barsPreLoaderWait();
+            fillInTheGapsOverImageDropdownPage.steps.addQuestionInstructions();
+            fillInTheGapsOverImageDropdownPage.steps.uploadFile('highlightImage.jpg');
+            fillInTheGapsOverImageDropdownPage.steps.clickOnImagePopupOkButton();
+            fillInTheGapsOverImageDropdownPage.steps.addResponseContainer();
+            fillInTheGapsOverImageDropdownPage.steps.addResponseContainer();
+            fillInTheGapsOverImageDropdownPage.steps.addInputToResponseOptionFields(0, optionsForResponse1);
+            fillInTheGapsOverImageDropdownPage.steps.addInputToResponseOptionFields(1, optionsForResponse2);
+            fillInTheGapsOverImageDropdownPage.steps.selectResponseFromSetCorrectAnswerSectionResponseDropdown(0, correctTabAnswerArray[0]);
+            fillInTheGapsOverImageDropdownPage.steps.selectResponseFromSetCorrectAnswerSectionResponseDropdown(1, correctTabAnswerArray[1]);
+            fillInTheGapsOverImageDropdownPage.steps.selectAScoringTypeFromScoringTypeDropdown('Manually scored');
+            fillInTheGapsOverImageDropdownPage.steps.switchToPreviewTab();
+        });
+
+        it('When user switches to the Preview tab, the question instruction and the response dropdowns should be displayed in the preview tab', () => {
+            fillInTheGapsOverImageDropdownPage.steps.verifyQuestionInstructionsText();
+            utilities.verifyElementCount(fillInTheGapsOverImageDropdownPage.responseDropdownPreviewTab(), 2);
+            utilities.verifyElementVisibilityState(fillInTheGapsOverImageDropdownPage.responseDropdownPreviewTab(), 'visible');
+        });
+
+        fillInTheGapsOverImageDropdownPage.tests.verifyShowCorrectAnswerAndPointsNotDisplayedInPreviewTab();
+    });
+
+    describe('Question Preview: Non scored', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigate to fill in the gaps over image - dropdown question type');
+            fillInTheGapsOverImageDropdownPage.steps.navigateToCreateQuestion('fill in the gaps over image - dropdown');
+            cy.barsPreLoaderWait();
+            fillInTheGapsOverImageDropdownPage.steps.addQuestionInstructions();
+            fillInTheGapsOverImageDropdownPage.steps.uploadFile('highlightImage.jpg');
+            fillInTheGapsOverImageDropdownPage.steps.clickOnImagePopupOkButton();
+            fillInTheGapsOverImageDropdownPage.steps.addResponseContainer();
+            fillInTheGapsOverImageDropdownPage.steps.addResponseContainer();
+            fillInTheGapsOverImageDropdownPage.steps.addInputToResponseOptionFields(0, optionsForResponse1);
+            fillInTheGapsOverImageDropdownPage.steps.addInputToResponseOptionFields(1, optionsForResponse2);
+            fillInTheGapsOverImageDropdownPage.steps.selectResponseFromSetCorrectAnswerSectionResponseDropdown(0, correctTabAnswerArray[0]);
+            fillInTheGapsOverImageDropdownPage.steps.selectResponseFromSetCorrectAnswerSectionResponseDropdown(1, correctTabAnswerArray[1]);
+            fillInTheGapsOverImageDropdownPage.steps.selectAScoringTypeFromScoringTypeDropdown('Non scored');
+            fillInTheGapsOverImageDropdownPage.steps.expandAdditonalSettings();
+            fillInTheGapsOverImageDropdownPage.steps.checkAllowStudentsToCheckAnswerCheckbox();
+            fillInTheGapsOverImageDropdownPage.steps.switchToPreviewTab();
+        });
+
+        fillInTheGapsOverImageDropdownPage.tests.verifyShowCorrectAnswerLabelAndCheckboxExistAndPreviewScoreNotExistInPreviewTab();
+
+        it('When the user selects \'Show correct answer\' checkbox without attempting the question, correct/incorrect icons or label should not be displayed, correct answer container along with \'Correct answers:\' label and correct responses with numeric count should be displayed below the question preview', () => {
+            fillInTheGapsOverImageDropdownPage.steps.checkShowCorrectAnswerCheckbox();
+            utilities.verifyInnerText(fillInTheGapsOverImageDropdownPage.previewTabCorrectAnswerLabel(), 'Correct answers:');
+            fillInTheGapsOverImageDropdownPage.steps.verifyCorrectIncorrectIconsDoesNotExist();
+            fillInTheGapsOverImageDropdownPage.steps.verifyCorrectIncorrectAnswerLabelNotExists();
+            fillInTheGapsOverImageDropdownPage.steps.verifyCorrectIncorrectBorderNotExists();
+            fillInTheGapsOverImageDropdownPage.steps.verifyCorrectAnswerResponsesInCorrectAnswerContainerAndCount([correctTabAnswerArray[0], correctTabAnswerArray[1]], ['1', '2']);
+            fillInTheGapsOverImageDropdownPage.steps.uncheckShowCorrectAnswerCheckbox();
+        });
+
+        it('When user selects Check answer button without attempting the question, correct/incorrect label and border should not be displayed below and check-mark or cross-mark should not be displayed for any option', () => {
+            fillInTheGapsOverImageDropdownPage.steps.checkAnswer();
+            fillInTheGapsOverImageDropdownPage.steps.verifyCorrectIncorrectBorderNotExists();
+            fillInTheGapsOverImageDropdownPage.steps.verifyCorrectIncorrectIconsDoesNotExist();
+        });
+
+        it('When the user attempts the question incorrectly then on selecting \'Show correct answer\' checkbox, red cross-mark icons should be displayed beside all incorrect response dropdowns, a label \'Incorrect answer\' and incorrect answer border should be displayed below the question preview and the correct answer container with all correct answers along with numeration should be displayed', () => {
+            fillInTheGapsOverImageDropdownPage.steps.selectResponseFromDropdownInPreviewTab(0, incorrectAnswerArray[0]);
+            fillInTheGapsOverImageDropdownPage.steps.selectResponseFromDropdownInPreviewTab(1, incorrectAnswerArray[1]);
+            fillInTheGapsOverImageDropdownPage.steps.checkShowCorrectAnswerCheckbox();
+            fillInTheGapsOverImageDropdownPage.steps.verifyIncorrectOptionCrossmarkIcon(0);
+            fillInTheGapsOverImageDropdownPage.steps.verifyIncorrectOptionCrossmarkIcon(1);
+            fillInTheGapsOverImageDropdownPage.steps.verifyCorrectIncorrectAnswerLabel('Incorrect');
+            fillInTheGapsOverImageDropdownPage.steps.verifyIncorrectAttemptBorder();
+            fillInTheGapsOverImageDropdownPage.steps.verifyCorrectAnswerResponsesInCorrectAnswerContainerAndCount([correctTabAnswerArray[0], correctTabAnswerArray[1]], ['1', '2']);
+            fillInTheGapsOverImageDropdownPage.steps.verifyQuestionPreviewStateWhenShowCorrectAnswerIsUnchecked();
+            fillInTheGapsOverImageDropdownPage.steps.verifyPreviewTabCorrectAnswerContainerNotExist();
+
+            cy.log('When the user attempts the question incorrectly and clicks on the \'Check answer\' button, then red cross-mark icons should be displayed beside all incorrect the responses, a label \'Incorrect answer\' and incorrect answer border should be displayed below the question preview and the correct answer container should not be displayed')
+            fillInTheGapsOverImageDropdownPage.steps.checkAnswer();
+            fillInTheGapsOverImageDropdownPage.steps.verifyIncorrectOptionCrossmarkIcon(0);
+            fillInTheGapsOverImageDropdownPage.steps.verifyIncorrectOptionCrossmarkIcon(1);
+            fillInTheGapsOverImageDropdownPage.steps.verifyCorrectIncorrectAnswerLabel('Incorrect');
+            fillInTheGapsOverImageDropdownPage.steps.verifyIncorrectAttemptBorder();
+            fillInTheGapsOverImageDropdownPage.steps.verifyPreviewTabCorrectAnswerContainerNotExist();
+        });
+
+        it('When user attempts the question partially correct without incorrect answer, then on selecting \'Show correct answer\' checkbox, green check-mark should be displayed besides correct answer responses, red cross-mark should not be displayed beside any responses and a label \'Incorrect answer\' and incorrect answer border should be displayed below the question preview', () => {
+            fillInTheGapsOverImageDropdownPage.steps.resetQuestionPreview();
+            fillInTheGapsOverImageDropdownPage.steps.selectResponseFromDropdownInPreviewTab(0, correctTabAnswerArray[0]);
+            fillInTheGapsOverImageDropdownPage.steps.checkShowCorrectAnswerCheckbox();
+            fillInTheGapsOverImageDropdownPage.steps.verifyCorrectOptionCheckmarkIcon(0);
+            fillInTheGapsOverImageDropdownPage.steps.verifyCheckmarkOrCrossmarkNotVisible(1);
+            fillInTheGapsOverImageDropdownPage.steps.verifyCorrectIncorrectAnswerLabel('Incorrect');
+            fillInTheGapsOverImageDropdownPage.steps.verifyIncorrectAttemptBorder();
+            fillInTheGapsOverImageDropdownPage.steps.verifyCorrectAnswerResponsesInCorrectAnswerContainerAndCount([correctTabAnswerArray[1]], ['2']);
+            fillInTheGapsOverImageDropdownPage.steps.verifyQuestionPreviewStateWhenShowCorrectAnswerIsUnchecked();
+            fillInTheGapsOverImageDropdownPage.steps.verifyPreviewTabCorrectAnswerContainerNotExist();
+
+            cy.log('When user attempts the question partially correct and clicks on the \'Check answer\' button, green check-mark should be displayed besides correctly attempted responses, red cross-mark should not be displayed beside any responses and correct/incorrect border and label should not be displayed');
+            fillInTheGapsOverImageDropdownPage.steps.checkAnswer();
+            fillInTheGapsOverImageDropdownPage.steps.verifyCorrectOptionCheckmarkIcon(0);
+            fillInTheGapsOverImageDropdownPage.steps.verifyCheckmarkOrCrossmarkNotVisible(1);
+            fillInTheGapsOverImageDropdownPage.steps.verifyCorrectIncorrectAnswerLabel('Incorrect');
+            fillInTheGapsOverImageDropdownPage.steps.verifyIncorrectAttemptBorder();
+        });
+
+        it('When user attempts the question partially correct with incorrect answer, then on selecting \'Show correct answer\' checkbox, the user should be awarded 0 points, green check-mark should be displayed besides correct answer responses, red cross-mark should be displayed besides incorrectly answered option and a label \'Incorrect answer\' and incorrect answer border should be displayed below the question preview', () => {
+            fillInTheGapsOverImageDropdownPage.steps.resetQuestionPreview();
+            fillInTheGapsOverImageDropdownPage.steps.selectResponseFromDropdownInPreviewTab(0, correctTabAnswerArray[0]);
+            fillInTheGapsOverImageDropdownPage.steps.selectResponseFromDropdownInPreviewTab(1, incorrectAnswerArray[1]);
+            fillInTheGapsOverImageDropdownPage.steps.checkShowCorrectAnswerCheckbox();
+            fillInTheGapsOverImageDropdownPage.steps.verifyCorrectOptionCheckmarkIcon(0);
+            fillInTheGapsOverImageDropdownPage.steps.verifyIncorrectOptionCrossmarkIcon(1);
+            fillInTheGapsOverImageDropdownPage.steps.verifyCorrectIncorrectAnswerLabel('Incorrect');
+            fillInTheGapsOverImageDropdownPage.steps.verifyIncorrectAttemptBorder();
+            fillInTheGapsOverImageDropdownPage.steps.verifyCorrectAnswerResponsesInCorrectAnswerContainerAndCount([correctTabAnswerArray[1]], ['2']);
+            fillInTheGapsOverImageDropdownPage.steps.verifyQuestionPreviewStateWhenShowCorrectAnswerIsUnchecked();
+            fillInTheGapsOverImageDropdownPage.steps.verifyPreviewTabCorrectAnswerContainerNotExist();
+
+            cy.log('When user attempts the question partially correct and clicks on the \'Check Answer\' button, green check-mark should be displayed besides correctly attempted responses, red cross-mark should be displayed besides incorrectly answered option and correct/incorrect border and label should not be displayed')
+            fillInTheGapsOverImageDropdownPage.steps.checkAnswer();
+            fillInTheGapsOverImageDropdownPage.steps.verifyCorrectOptionCheckmarkIcon(0);
+            fillInTheGapsOverImageDropdownPage.steps.verifyIncorrectOptionCrossmarkIcon(1);
+            fillInTheGapsOverImageDropdownPage.steps.verifyCorrectIncorrectAnswerLabel('Incorrect');
+            fillInTheGapsOverImageDropdownPage.steps.verifyIncorrectAttemptBorder();
+        });
+
+        it('When user attempts the question correctly then on selecting \'Show correct answer\' checkbox, green check-mark icons should be displayed besides the correctly answered responses, a label \'Correct answer\' and correct answer border should be displayed below the question preview and label and correct answer container should not be displayed', () => {
+            fillInTheGapsOverImageDropdownPage.steps.resetQuestionPreview();
+            fillInTheGapsOverImageDropdownPage.steps.selectResponseFromDropdownInPreviewTab(0, correctTabAnswerArray[0]);
+            fillInTheGapsOverImageDropdownPage.steps.selectResponseFromDropdownInPreviewTab(1, correctTabAnswerArray[1]);
+            fillInTheGapsOverImageDropdownPage.steps.checkShowCorrectAnswerCheckbox();
+            fillInTheGapsOverImageDropdownPage.steps.verifyCorrectOptionCheckmarkIcon(0);
+            fillInTheGapsOverImageDropdownPage.steps.verifyCorrectOptionCheckmarkIcon(1);
+            fillInTheGapsOverImageDropdownPage.steps.verifyCorrectIncorrectAnswerLabel('Correct');
+            fillInTheGapsOverImageDropdownPage.steps.verifyCorrectAttemptBorder();
+            fillInTheGapsOverImageDropdownPage.steps.verifyPreviewTabCorrectAnswerContainerNotExist();
+            fillInTheGapsOverImageDropdownPage.steps.verifyQuestionPreviewStateWhenShowCorrectAnswerIsUnchecked();
+
+            cy.log('When user attempts the question correctly and clicks on the \'Check Answer\' button, green check-mark icons should be displayed besides the correctly answered responses and correct/incorrect border and label should not be displayed')
+            fillInTheGapsOverImageDropdownPage.steps.checkAnswer();
+            fillInTheGapsOverImageDropdownPage.steps.verifyCorrectOptionCheckmarkIcon(0);
+            fillInTheGapsOverImageDropdownPage.steps.verifyCorrectOptionCheckmarkIcon(1);
+            fillInTheGapsOverImageDropdownPage.steps.verifyCorrectIncorrectAnswerLabel('Correct');
+            fillInTheGapsOverImageDropdownPage.steps.verifyCorrectAttemptBorder();
+            fillInTheGapsOverImageDropdownPage.steps.verifyPreviewTabCorrectAnswerContainerNotExist();
+        });
+    });
+});

package/cypress/e2e/ILC/fillInTheGapsOverImageDropdown/fillInTheGapsOverImageDropdownOptionsForResponse.js

@@ -0,0 +1,303 @@
+import { fillInTheGapsOverImageDropdownPage } from "../../../pages";
+import abortEarlySetup from "../../../support/helpers/abortEarly";
+import utilities from "../../../support/helpers/utilities";
+const css = Cypress.env('css');
+
+let optionsForResponse = ['Flower', 'Leaf', 'Stem', 'Branch'];
+
+
+describe('Create item page - Fill in the gaps over image - dropdown: Options for response section contents and cases for set correct answer section and preview tab', () => {
+    before(() => {
+        cy.loginAs('admin');
+    });
+
+    describe('Options for response section contents', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigating to Fill in the gaps over image - dropdown question type');
+            fillInTheGapsOverImageDropdownPage.steps.navigateToCreateQuestion('fill in the gaps over image - dropdown');
+            cy.barsPreLoaderWait();
+            fillInTheGapsOverImageDropdownPage.steps.uploadFile('highlightImage.jpg');
+            fillInTheGapsOverImageDropdownPage.steps.clickOnImagePopupOkButton();
+            fillInTheGapsOverImageDropdownPage.steps.addResponseContainer();
+        });
+
+        it('\'Options for response 1\' label should be displayed', () => {
+            utilities.verifyInnerText(fillInTheGapsOverImageDropdownPage.optionsForResponseLabel(), 'Options for response 1');
+        });
+
+        it('By default, 4 \'Options\' input fields should be displayed with placeholder text and drag handle and delete option icon buttons should be displayed besides each input field', () => {
+            fillInTheGapsOverImageDropdownPage.steps.verifyOptionsForResponseContents(0);
+            utilities.verifyElementCount(fillInTheGapsOverImageDropdownPage.optionsForResponseInputField(), 4);
+        });
+
+        it('On hovering over the drag handle of the option, \'Drag to reorder\' message should be displayed on a tooltip and the tooltip should disappear if focus is removed from the drag handle', () => {
+            fillInTheGapsOverImageDropdownPage.steps.verifyDragHandleButtonTooltip();
+        });
+
+        it('When the user hovers over the enabled \'Delete\' icon buttons then, \'Delete option\' message should be displayed on a tooltip and the tooltip should disappear if focus is removed from the \'Delete\' icon button', () => {
+            fillInTheGapsOverImageDropdownPage.steps.verifyOptionsForResponseInputFieldDeleteButtonTooltip()
+        });
+
+        it('When user clicks on the \'Delete\' option button then the respective options input field should get deleted, option numeration should change accordingly', () => {
+            fillInTheGapsOverImageDropdownPage.steps.deleteOption(2);
+            fillInTheGapsOverImageDropdownPage.steps.verifyDeleteButtonEnabled();
+            fillInTheGapsOverImageDropdownPage.steps.verifyOptionsForResponseContents(0);
+            utilities.verifyElementCount(fillInTheGapsOverImageDropdownPage.optionsForResponseInputField(), 3)
+        });
+
+        it('When number of options are less than 3, the delete option icon buttons should be displayed in disabled state', () => {
+            fillInTheGapsOverImageDropdownPage.steps.deleteOption(0);
+            fillInTheGapsOverImageDropdownPage.steps.verifyDeleteButtonDisabled();
+        });
+
+        it('When the user hovers over the disabled \'Delete\' icon buttons then, \'Minimum two options are required\' message should be displayed on a tooltip and the tooltip should disappear if focus is removed from the \'Delete\' icon button', () => {
+            fillInTheGapsOverImageDropdownPage.steps.verifyOptionsForResponseInputFieldDisabledDeleteButtonTooltip();
+        });
+
+        it('CSS of disabled delete button', { tags: 'css' }, () => {
+            fillInTheGapsOverImageDropdownPage.deleteButton()
+                .eq(0)
+                .verifyPseudoClassBeforeProperty('color', css.color.deleteIcon)
+            utilities.verifyCSS(fillInTheGapsOverImageDropdownPage.deleteButton().eq(1), {
+                'opacity': '0.5'
+            });
+        });
+
+        it('Accessbility of disabled delete button', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(fillInTheGapsOverImageDropdownPage.deleteButton())
+        });
+
+        it('\'Add option\' button should be present', () => {
+            fillInTheGapsOverImageDropdownPage.steps.verifyAddOptionButton();
+        });
+
+        it('When user adds a option using the \'Add option\' button then added option should be displayed with drag handle, placeholder text, option numeration and delete button', () => {
+            fillInTheGapsOverImageDropdownPage.steps.addOption();
+            fillInTheGapsOverImageDropdownPage.steps.verifyDeleteButtonEnabled();
+            fillInTheGapsOverImageDropdownPage.steps.verifyOptionsForResponseContents(0);
+            utilities.verifyElementCount(fillInTheGapsOverImageDropdownPage.optionsForResponseInputField(), 3)
+        });
+
+        it('When user focus in and out of any of the \'Option\' input field without typing anything, an error message should be thrown', () => {
+            fillInTheGapsOverImageDropdownPage.steps.focusInAndFocusOutOfOptionsForResponseInputField(0);
+            fillInTheGapsOverImageDropdownPage.steps.verifyOptionsForResponseInputFieldErrorMessage(0);
+        });
+
+        it('CSS of error message', { tags: 'css' }, () => {
+            fillInTheGapsOverImageDropdownPage.optionWrapper()
+                .eq(0)
+                .within(() => {
+                    utilities.verifyCSS(fillInTheGapsOverImageDropdownPage.optionIsRequiredErrorMessage(), {
+                        'color': css.color.errorText,
+                        'font-size': css.fontSize.small,
+                        'font-weight': css.fontWeight.regular
+                    });
+                });
+        });
+
+        it('Accessibility of error message', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(fillInTheGapsOverImageDropdownPage.optionIsRequiredErrorMessage())
+        });
+
+        it('When user enters text in Option input field the \'Error: Option is required.\' error message should disappear.', () => {
+            fillInTheGapsOverImageDropdownPage.steps.addInputToResponseOptionFields(0, [optionsForResponse[0]]);
+            fillInTheGapsOverImageDropdownPage.steps.verifyOptionsInputFieldErrorMessageDoesNotExist(0);
+        });
+
+        it('CSS of Options section', { tags: 'css' }, () => {
+            utilities.verifyCSS(fillInTheGapsOverImageDropdownPage.optionsLabel(), {
+                'color': css.color.sectionHeading,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.semibold
+            });
+            utilities.verifyCSS(fillInTheGapsOverImageDropdownPage.dragHandleButton(), {
+                'color': css.color.secondaryBtnActive,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.regular
+            });
+            utilities.verifyCSS(fillInTheGapsOverImageDropdownPage.deleteButton(), {
+                'opacity': '1'
+            });
+            fillInTheGapsOverImageDropdownPage.deleteButton()
+                .verifyPseudoClassBeforeProperty('color', css.color.deleteIcon);
+            utilities.verifyCSS(fillInTheGapsOverImageDropdownPage.optionsForResponseInputField(), {
+                'color': css.color.text,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular
+            });
+            utilities.verifyCSS(fillInTheGapsOverImageDropdownPage.optionNumeration(), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.semibold
+            });
+            utilities.verifyCSS(fillInTheGapsOverImageDropdownPage.addOptionButton().find('span'), {
+                'color': css.color.secondaryBtnActive,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular
+            });
+        });
+    });
+
+    describe('Options cases in Set correct answer section', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigating to Fill in the gaps over image - dropdown question type');
+            fillInTheGapsOverImageDropdownPage.steps.navigateToCreateQuestion('fill in the gaps over image - dropdown');
+            cy.barsPreLoaderWait();
+            fillInTheGapsOverImageDropdownPage.steps.uploadFile('highlightImage.jpg');
+            fillInTheGapsOverImageDropdownPage.steps.clickOnImagePopupOkButton();
+            fillInTheGapsOverImageDropdownPage.steps.addResponseContainer();
+        });
+
+        it('When user has not entered text in the options input field then the dropdown should be disabled and the user should not be able to expand the dropdown in the \'Set Correct Answer\'', () => {
+            fillInTheGapsOverImageDropdownPage.steps.verifyDisabledResponseDropdownInSetCorrectAnswerSection();
+        });
+
+        it('When the user has not added any options, on hovering over the dropdown, a tooltip \'Please add options\' should be displayed and on focusing away from the dropdown, the tooltip should disappear', () => {
+            fillInTheGapsOverImageDropdownPage.responseDropdownSetCorrectAnswerSection()
+                .verifyTooltip('Please add options');
+        });
+
+        it('CSS of set correct answer section disabled response dropdown', { tags: 'css' }, () => {
+            utilities.verifyCSS(fillInTheGapsOverImageDropdownPage.responseDropdownSetCorrectAnswerSection(), {
+                'opacity': '1',
+                'border': `1px solid ${css.color.figDefaultComponentBorder}`,
+                'color': css.color.secondaryBtn
+            });
+        });
+
+        it('Accessibility of set correct answer section disabled response dropdown', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(fillInTheGapsOverImageDropdownPage.responseDropdownSetCorrectAnswerSection());
+        });
+
+        it('When user enters a text in options input field then the entered options should be displayed in response dropdown of \'Set Correct Answer\' section', () => {
+            fillInTheGapsOverImageDropdownPage.steps.addInputToResponseOptionFields(0, optionsForResponse);
+            fillInTheGapsOverImageDropdownPage.steps.expandResponseDropdownInSetCorrectAnswerSection(0);
+            fillInTheGapsOverImageDropdownPage.steps.verifyResponseDropdownOptions(optionsForResponse);
+        });
+
+        it('CSS of set correct answer section response dropdown in active state', { tags: 'css' }, () => {
+            utilities.verifyCSS(fillInTheGapsOverImageDropdownPage.responseDropdownOptions(), {
+                'color': css.color.liText,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular,
+                'background-color': css.color.transparent
+            });
+            utilities.verifyCSS(fillInTheGapsOverImageDropdownPage.responseDropdownSetCorrectAnswerSection(), {
+                'border': `1px solid ${css.color.activeComponentBorder}`,
+            });
+        });
+
+        it('Accessibility of set correct answer section response dropdown in active state', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(fillInTheGapsOverImageDropdownPage.dropdownList());
+        });
+
+        it('When user deletes an option then the deleted option should not be displayed in response dropdown in \'Set Correct Answer\' section', () => {
+            fillInTheGapsOverImageDropdownPage.steps.deleteOptionInputField(3);
+            cy.log('Checking the deleted option should not exist in the dropdown')
+            fillInTheGapsOverImageDropdownPage.steps.expandResponseDropdownInSetCorrectAnswerSection(0);
+            let optionsForResponse1 = optionsForResponse.slice(1);
+            fillInTheGapsOverImageDropdownPage.steps.verifyResponseDropdownOptions(optionsForResponse1);
+            utilities.verifyElementCount(fillInTheGapsOverImageDropdownPage.responseDropdownOptions(), 3);
+        });
+
+        it('When user adds an option using \'Add Option\' button then the added option should be displayed in response dropdown in \'Set Correct Answer\' section', () => {
+            fillInTheGapsOverImageDropdownPage.steps.addOption();
+            fillInTheGapsOverImageDropdownPage.steps.addInputToResponseOptionInputField(3, `${optionsForResponse[3]}`);
+            fillInTheGapsOverImageDropdownPage.steps.expandResponseDropdownInSetCorrectAnswerSection(0);
+            fillInTheGapsOverImageDropdownPage.steps.verifyResponseDropdownOptions(optionsForResponse);
+        });
+
+        it('When the user has added two same options in the options section, only one occurrence of that option should be listed in the dropdown', () => {
+            fillInTheGapsOverImageDropdownPage.steps.addInputToResponseOptionInputField(0, `${optionsForResponse[1]}`);
+            fillInTheGapsOverImageDropdownPage.steps.expandResponseDropdownInSetCorrectAnswerSection(0);
+            let optionsForResponse1 = optionsForResponse.slice(1);
+            fillInTheGapsOverImageDropdownPage.steps.verifyResponseDropdownOptions(optionsForResponse1);
+            utilities.verifyElementCount(fillInTheGapsOverImageDropdownPage.responseDropdownOptions(), 3);
+        });
+    });
+
+    describe('Options cases in Preview tab', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigating to Fill in the gaps over image - dropdown question type');
+            fillInTheGapsOverImageDropdownPage.steps.navigateToCreateQuestion('fill in the gaps over image - dropdown');
+            cy.barsPreLoaderWait();
+            fillInTheGapsOverImageDropdownPage.steps.uploadFile('highlightImage.jpg');
+            fillInTheGapsOverImageDropdownPage.steps.clickOnImagePopupOkButton();
+            fillInTheGapsOverImageDropdownPage.steps.addResponseContainer();
+            fillInTheGapsOverImageDropdownPage.steps.switchToPreviewTab();
+        });
+
+        it('When user has not entered text in the options input field then the dropdown should be disabled and the user should not be able to expand the dropdown in the \'preview tab\'', () => {
+            fillInTheGapsOverImageDropdownPage.steps.verifyDisabledResponseDropdownInPreviewTab();
+        });
+
+        it('CSS of preview tab disabled response dropdown', { tags: 'css' }, () => {
+            utilities.verifyCSS(fillInTheGapsOverImageDropdownPage.responseDropdownPreviewTab(), {
+                'opacity': '1',
+                'border': `1px solid ${css.color.figDefaultComponentBorder}`,
+                'color': css.color.secondaryBtn
+            });
+        });
+
+        it('Accessibility of preview tab disabled response dropdown', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(fillInTheGapsOverImageDropdownPage.responseDropdownPreviewTab());
+        });
+
+        it('When user enters a text in options input field then the entered options should be displayed in response dropdown of \'preview tab\'', () => {
+            fillInTheGapsOverImageDropdownPage.steps.switchToEditTab();
+            fillInTheGapsOverImageDropdownPage.steps.addInputToResponseOptionFields(0, optionsForResponse);
+            fillInTheGapsOverImageDropdownPage.steps.switchToPreviewTab();
+            fillInTheGapsOverImageDropdownPage.steps.expandResponseDropdownInPreviewTab(0);
+            fillInTheGapsOverImageDropdownPage.steps.verifyResponseDropdownOptions(optionsForResponse);
+        });
+
+        it('CSS of preview tab response dropdown in active state', { tags: 'css' }, () => {
+            utilities.verifyCSS(fillInTheGapsOverImageDropdownPage.responseDropdownOptions(), {
+                'color': css.color.liText,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular,
+                'background-color': css.color.transparent
+            });
+            utilities.verifyCSS(fillInTheGapsOverImageDropdownPage.responseDropdownPreviewTab(), {
+                'border': `1px solid ${css.color.activeComponentBorder}`,
+            });
+        });
+
+        it('Accessibility of preview tab response dropdown in active state', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(fillInTheGapsOverImageDropdownPage.dropdownList());
+        });
+
+        it('When user deletes an option then the deleted option should not be displayed in response dropdown in \'preview tab\'', () => {
+            fillInTheGapsOverImageDropdownPage.steps.switchToEditTab();
+            fillInTheGapsOverImageDropdownPage.steps.deleteOptionInputField(3);
+            fillInTheGapsOverImageDropdownPage.steps.switchToPreviewTab();
+            cy.log('Checking the deleted option should not exist in the dropdown')
+            fillInTheGapsOverImageDropdownPage.steps.expandResponseDropdownInPreviewTab(0);
+            let optionsForResponse1 = optionsForResponse.slice(1);
+            fillInTheGapsOverImageDropdownPage.steps.verifyResponseDropdownOptions(optionsForResponse1);
+            utilities.verifyElementCount(fillInTheGapsOverImageDropdownPage.responseDropdownOptions(), 3);
+        });
+
+        it('When user adds an option using \'Add Option\' button then the added option should be displayed in response dropdown in \'preview tab\'', () => {
+            fillInTheGapsOverImageDropdownPage.steps.switchToEditTab();
+            fillInTheGapsOverImageDropdownPage.steps.addOption();
+            fillInTheGapsOverImageDropdownPage.steps.addInputToResponseOptionInputField(3, `${optionsForResponse[3]}`);
+            fillInTheGapsOverImageDropdownPage.steps.switchToPreviewTab();
+            fillInTheGapsOverImageDropdownPage.steps.expandResponseDropdownInPreviewTab(0);
+            fillInTheGapsOverImageDropdownPage.steps.verifyResponseDropdownOptions(optionsForResponse);
+        });
+
+        it('When the user has added two same options in the options, only one occurrence of that option should be listed in the dropdown', () => {
+            fillInTheGapsOverImageDropdownPage.steps.switchToEditTab();
+            fillInTheGapsOverImageDropdownPage.steps.addInputToResponseOptionInputField(0, `${optionsForResponse[1]}`);
+            fillInTheGapsOverImageDropdownPage.steps.switchToPreviewTab();
+            fillInTheGapsOverImageDropdownPage.steps.expandResponseDropdownInPreviewTab(0);
+            let optionsForResponse1 = optionsForResponse.slice(1);
+            fillInTheGapsOverImageDropdownPage.steps.verifyResponseDropdownOptions(optionsForResponse1);
+            utilities.verifyElementCount(fillInTheGapsOverImageDropdownPage.responseDropdownOptions(), 3);
+        });
+    });
+});