itemengine-cypress-automation 1.0.46 → 1.0.47

package/cypress/e2e/ILC/FillInTheGapsOverImageText/fillInTheGapsOverImageTextImageProperties.js

@@ -0,0 +1,156 @@
+import constants from "../../../fixtures/constants";
+import abortEarlySetup from "../../../support/helpers/abortEarly";
+import { dialogBoxBase, fillInTheGapsOverImageTextPage } from "../../../pages";
+import { uploadImageSectionComponent } from "../../../pages/components";
+import utilities from "../../../support/helpers/utilities";
+const css = Cypress.env('css');
+
+describe('Create item page - Fill in the gaps over image - text: 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 - text question type');
+            fillInTheGapsOverImageTextPage.steps.navigateToCreateQuestion('fill in the gaps over image - text');
+            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();
+            fillInTheGapsOverImageTextPage.steps.verifyWidthInputFieldValue(500);
+            fillInTheGapsOverImageTextPage.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();
+            fillInTheGapsOverImageTextPage.steps.verifyWidthInputFieldValue(225);
+            fillInTheGapsOverImageTextPage.steps.verifyHeightInputFieldValue(225);
+        });
+    });
+
+    describe('Edit image pop up content - source URL', () => {
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsOverImageTextPage.steps.navigateToCreateQuestion('fill in the gaps over image - text');
+            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 - text question type');
+            fillInTheGapsOverImageTextPage.steps.navigateToCreateQuestion('fill in the gaps over image - text');
+            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(fillInTheGapsOverImageTextPage.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(fillInTheGapsOverImageTextPage.imageSectionImage(), 'notExist')
+        });
+    });
+
+    describe('Image properties section contents', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigate to fill in the gaps over image - text question type');
+            fillInTheGapsOverImageTextPage.steps.navigateToCreateQuestion('fill in the gaps over image - text');
+            cy.barsPreLoaderWait();
+        });
+
+        fillInTheGapsOverImageTextPage.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 - text question type');
+            fillInTheGapsOverImageTextPage.steps.navigateToCreateQuestion('fill in the gaps over image - text');
+            cy.barsPreLoaderWait();
+            fillInTheGapsOverImageTextPage.steps.uploadFile('highlightImage.jpg');
+            fillInTheGapsOverImageTextPage.steps.clickOnImagePopupOkButton();
+        });
+
+        fillInTheGapsOverImageTextPage.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 - text question type');
+            fillInTheGapsOverImageTextPage.steps.navigateToCreateQuestion('fill in the gaps over image - text');
+            cy.barsPreLoaderWait();
+            fillInTheGapsOverImageTextPage.steps.uploadFile('highlightImage.jpg');
+            fillInTheGapsOverImageTextPage.steps.clickOnImagePopupOkButton();
+        });
+
+        fillInTheGapsOverImageTextPage.tests.verifyImageHoverAndAlternativeTextFunctionalityInPreviewTab();
+    });
+
+    describe('Image properties - \'Height and width (px)\' : Edit tab', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigate to fill in the gaps over image - text question type');
+            fillInTheGapsOverImageTextPage.steps.navigateToCreateQuestion('fill in the gaps over image - text');
+            cy.barsPreLoaderWait();
+            fillInTheGapsOverImageTextPage.steps.uploadFile('highlightImage.jpg');
+            fillInTheGapsOverImageTextPage.steps.clickOnImagePopupOkButton();
+        });
+
+        fillInTheGapsOverImageTextPage.tests.verifyImagePropertiesHeightAndWidthInputFieldInEditTab();
+    });
+
+    describe('Image properties - \'Height and width (px)\' : Preview tab', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigate to fill in the gaps over image - text question type');
+            fillInTheGapsOverImageTextPage.steps.navigateToCreateQuestion('fill in the gaps over image - text');
+            cy.barsPreLoaderWait();
+            fillInTheGapsOverImageTextPage.steps.uploadFile('highlightImage.jpg');
+            fillInTheGapsOverImageTextPage.steps.clickOnImagePopupOkButton();
+        });
+
+        fillInTheGapsOverImageTextPage.tests.verifyImagePropertiesHeightAndWidthInputFieldInPreviewTab();
+    });
+});

package/cypress/e2e/ILC/FillInTheGapsOverImageText/fillInTheGapsOverImageTextManualAndNonScored.js

@@ -0,0 +1,157 @@
+import { fillInTheGapsOverImageTextPage } from "../../../pages";
+import abortEarlySetup from "../../../support/helpers/abortEarly";
+import utilities from "../../../support/helpers/utilities";
+const correctTabAnswerArray = ['Flower', 'Leaf', 'Stem'];
+const incorrectAnswerArray = ['Roots', 'Branch', 'Seed'];
+
+describe('Create item page - Fill in the gaps over image - text: 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 - text question type');
+            fillInTheGapsOverImageTextPage.steps.navigateToCreateQuestion('fill in the gaps over image - text');
+            cy.barsPreLoaderWait();
+            fillInTheGapsOverImageTextPage.steps.addQuestionInstructions();
+            fillInTheGapsOverImageTextPage.steps.uploadFile('highlightImage.jpg');
+            fillInTheGapsOverImageTextPage.steps.clickOnImagePopupOkButton();
+            fillInTheGapsOverImageTextPage.steps.addResponseContainer();
+            fillInTheGapsOverImageTextPage.steps.addResponseContainer();
+            fillInTheGapsOverImageTextPage.steps.enterTextInResponseFieldSetCorrectAnswerSection(0, correctTabAnswerArray[0]);
+            fillInTheGapsOverImageTextPage.steps.enterTextInResponseFieldSetCorrectAnswerSection(1, correctTabAnswerArray[1]);
+            fillInTheGapsOverImageTextPage.steps.selectAScoringTypeFromScoringTypeDropdown('Manually scored');
+            fillInTheGapsOverImageTextPage.steps.switchToPreviewTab();
+        });
+
+        it('When user switches to the Preview tab, the question instruction and the response fields should be displayed in the preview tab', () => {
+            fillInTheGapsOverImageTextPage.steps.verifyQuestionInstructionsText();
+            utilities.verifyElementCount(fillInTheGapsOverImageTextPage.responseFieldPreviewTab(), 2);
+            utilities.verifyElementVisibilityState(fillInTheGapsOverImageTextPage.responseFieldPreviewTab(), 'visible');
+        });
+
+        fillInTheGapsOverImageTextPage.tests.verifyShowCorrectAnswerAndPointsNotDisplayedInPreviewTab();
+    });
+
+    describe('Question Preview: Non scored', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigate to fill in the gaps over image - text question type');
+            fillInTheGapsOverImageTextPage.steps.navigateToCreateQuestion('fill in the gaps over image - text');
+            cy.barsPreLoaderWait();
+            fillInTheGapsOverImageTextPage.steps.addQuestionInstructions();
+            fillInTheGapsOverImageTextPage.steps.uploadFile('highlightImage.jpg');
+            fillInTheGapsOverImageTextPage.steps.clickOnImagePopupOkButton();
+            fillInTheGapsOverImageTextPage.steps.addResponseContainer();
+            fillInTheGapsOverImageTextPage.steps.addResponseContainer();
+            fillInTheGapsOverImageTextPage.steps.enterTextInResponseFieldSetCorrectAnswerSection(0, correctTabAnswerArray[0]);
+            fillInTheGapsOverImageTextPage.steps.enterTextInResponseFieldSetCorrectAnswerSection(1, correctTabAnswerArray[1]);
+            fillInTheGapsOverImageTextPage.steps.selectAScoringTypeFromScoringTypeDropdown('Non scored');
+            fillInTheGapsOverImageTextPage.steps.expandAdditonalSettings();
+            fillInTheGapsOverImageTextPage.steps.checkAllowStudentsToCheckAnswerCheckbox();
+            fillInTheGapsOverImageTextPage.steps.switchToPreviewTab();
+        });
+
+        fillInTheGapsOverImageTextPage.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', () => {
+            fillInTheGapsOverImageTextPage.steps.checkShowCorrectAnswerCheckbox();
+            fillInTheGapsOverImageTextPage.steps.verifyCorrectIncorrectIconsDoesNotExist();
+            fillInTheGapsOverImageTextPage.steps.verifyCorrectIncorrectAnswerLabelNotExists();
+            fillInTheGapsOverImageTextPage.steps.verifyCorrectIncorrectBorderNotExists();
+            utilities.verifyInnerText(fillInTheGapsOverImageTextPage.previewTabCorrectAnswerLabel(), 'Correct answers:');
+            fillInTheGapsOverImageTextPage.steps.verifyCorrectAnswerResponsesInCorrectAnswerContainerAndCount([correctTabAnswerArray[0], correctTabAnswerArray[1]], ['1', '2']);
+            fillInTheGapsOverImageTextPage.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', () => {
+            fillInTheGapsOverImageTextPage.steps.checkAnswer();
+            fillInTheGapsOverImageTextPage.steps.verifyCorrectIncorrectBorderNotExists();
+            fillInTheGapsOverImageTextPage.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 fields, 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', () => {
+            fillInTheGapsOverImageTextPage.steps.enterTextInResponseFieldPreviewTab(0, incorrectAnswerArray[0]);
+            fillInTheGapsOverImageTextPage.steps.enterTextInResponseFieldPreviewTab(1, incorrectAnswerArray[1]);
+            fillInTheGapsOverImageTextPage.steps.checkShowCorrectAnswerCheckbox();
+            fillInTheGapsOverImageTextPage.steps.verifyIncorrectOptionCrossmarkIcon(0);
+            fillInTheGapsOverImageTextPage.steps.verifyIncorrectOptionCrossmarkIcon(1);
+            fillInTheGapsOverImageTextPage.steps.verifyCorrectIncorrectAnswerLabel('Incorrect');
+            fillInTheGapsOverImageTextPage.steps.verifyIncorrectAttemptBorder();
+            fillInTheGapsOverImageTextPage.steps.verifyCorrectAnswerResponsesInCorrectAnswerContainerAndCount([correctTabAnswerArray[0], correctTabAnswerArray[1]], ['1', '2']);
+            fillInTheGapsOverImageTextPage.steps.verifyQuestionPreviewStateWhenShowCorrectAnswerIsUnchecked();
+            fillInTheGapsOverImageTextPage.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')
+            fillInTheGapsOverImageTextPage.steps.checkAnswer();
+            fillInTheGapsOverImageTextPage.steps.verifyIncorrectOptionCrossmarkIcon(0);
+            fillInTheGapsOverImageTextPage.steps.verifyIncorrectOptionCrossmarkIcon(1);
+            fillInTheGapsOverImageTextPage.steps.verifyCorrectIncorrectAnswerLabel('Incorrect');
+            fillInTheGapsOverImageTextPage.steps.verifyIncorrectAttemptBorder();
+            fillInTheGapsOverImageTextPage.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 correct/incorrect border and label should not be displayed', () => {
+            fillInTheGapsOverImageTextPage.steps.resetQuestionPreview();
+            fillInTheGapsOverImageTextPage.steps.enterTextInResponseFieldPreviewTab(0, correctTabAnswerArray[0]);
+            fillInTheGapsOverImageTextPage.steps.checkShowCorrectAnswerCheckbox();
+            fillInTheGapsOverImageTextPage.steps.verifyCorrectOptionCheckmarkIcon(0);
+            fillInTheGapsOverImageTextPage.steps.verifyCheckmarkOrCrossmarkNotVisible(1);
+            fillInTheGapsOverImageTextPage.steps.verifyCorrectIncorrectAnswerLabel('Incorrect');
+            fillInTheGapsOverImageTextPage.steps.verifyIncorrectAttemptBorder();
+            fillInTheGapsOverImageTextPage.steps.verifyCorrectAnswerResponsesInCorrectAnswerContainerAndCount([correctTabAnswerArray[1]], ['2']);
+            fillInTheGapsOverImageTextPage.steps.verifyQuestionPreviewStateWhenShowCorrectAnswerIsUnchecked();
+            fillInTheGapsOverImageTextPage.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');
+            fillInTheGapsOverImageTextPage.steps.checkAnswer();
+            fillInTheGapsOverImageTextPage.steps.verifyCorrectOptionCheckmarkIcon(0);
+            fillInTheGapsOverImageTextPage.steps.verifyCheckmarkOrCrossmarkNotVisible(1);
+            fillInTheGapsOverImageTextPage.steps.verifyCorrectIncorrectAnswerLabel('Incorrect');
+            fillInTheGapsOverImageTextPage.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 correct/incorrect border and label should not be displayed', () => {
+            fillInTheGapsOverImageTextPage.steps.resetQuestionPreview();
+            fillInTheGapsOverImageTextPage.steps.enterTextInResponseFieldPreviewTab(0, correctTabAnswerArray[0]);
+            fillInTheGapsOverImageTextPage.steps.enterTextInResponseFieldPreviewTab(1, incorrectAnswerArray[1]);
+            fillInTheGapsOverImageTextPage.steps.checkShowCorrectAnswerCheckbox();
+            fillInTheGapsOverImageTextPage.steps.verifyCorrectOptionCheckmarkIcon(0);
+            fillInTheGapsOverImageTextPage.steps.verifyIncorrectOptionCrossmarkIcon(1);
+            fillInTheGapsOverImageTextPage.steps.verifyCorrectIncorrectAnswerLabel('Incorrect');
+            fillInTheGapsOverImageTextPage.steps.verifyIncorrectAttemptBorder();
+            fillInTheGapsOverImageTextPage.steps.verifyCorrectAnswerResponsesInCorrectAnswerContainerAndCount([correctTabAnswerArray[1]], ['2']);
+            fillInTheGapsOverImageTextPage.steps.verifyQuestionPreviewStateWhenShowCorrectAnswerIsUnchecked();
+            fillInTheGapsOverImageTextPage.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')
+            fillInTheGapsOverImageTextPage.steps.checkAnswer();
+            fillInTheGapsOverImageTextPage.steps.verifyCorrectOptionCheckmarkIcon(0);
+            fillInTheGapsOverImageTextPage.steps.verifyIncorrectOptionCrossmarkIcon(1);
+            fillInTheGapsOverImageTextPage.steps.verifyCorrectIncorrectAnswerLabel('Incorrect');
+            fillInTheGapsOverImageTextPage.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, correct/incorrect border and label and correct answer container should not be displayed', () => {
+            fillInTheGapsOverImageTextPage.steps.resetQuestionPreview();
+            fillInTheGapsOverImageTextPage.steps.enterTextInResponseFieldPreviewTab(0, correctTabAnswerArray[0]);
+            fillInTheGapsOverImageTextPage.steps.enterTextInResponseFieldPreviewTab(1, correctTabAnswerArray[1]);
+            fillInTheGapsOverImageTextPage.steps.checkShowCorrectAnswerCheckbox();
+            fillInTheGapsOverImageTextPage.steps.verifyCorrectOptionCheckmarkIcon(0);
+            fillInTheGapsOverImageTextPage.steps.verifyCorrectOptionCheckmarkIcon(1);
+            fillInTheGapsOverImageTextPage.steps.verifyCorrectIncorrectAnswerLabel('Correct');
+            fillInTheGapsOverImageTextPage.steps.verifyCorrectAttemptBorder();
+            fillInTheGapsOverImageTextPage.steps.verifyPreviewTabCorrectAnswerContainerNotExist();
+            fillInTheGapsOverImageTextPage.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')
+            fillInTheGapsOverImageTextPage.steps.checkAnswer();
+            fillInTheGapsOverImageTextPage.steps.verifyCorrectOptionCheckmarkIcon(0);
+            fillInTheGapsOverImageTextPage.steps.verifyCorrectOptionCheckmarkIcon(1);
+            fillInTheGapsOverImageTextPage.steps.verifyCorrectIncorrectAnswerLabel('Correct');
+            fillInTheGapsOverImageTextPage.steps.verifyCorrectAttemptBorder();
+            fillInTheGapsOverImageTextPage.steps.verifyPreviewTabCorrectAnswerContainerNotExist();
+        });
+    });
+});