itemengine-cypress-automation 1.0.38 → 1.0.40

package/cypress/e2e/ILC/DragAndDropIntoCategories/dragAndDropIntoCategoriesAdditionalSettingsBasic.js

@@ -0,0 +1,317 @@
+import { dragAndDropIntoCategoriesPage } from "../../../pages";
+import abortEarlySetup from "../../../support/helpers/abortEarly";
+import utilities from "../../../support/helpers/utilities";
+const css = Cypress.env('css');
+const optionsArray = ['Bat', 'Eagle', 'Parrot', 'Whale'];
+const fontSizeDropdownOptions = ['Default', 'Small', 'Normal', 'Large', 'Extra large', 'Huge'];
+const fontSizes = ['16px', '12px', '14px', '17px', '20px', '24px'];
+
+describe('Create item page: Drag and drop into categories: Additional settings', () => {
+    before(() => {
+        cy.loginAs('admin');
+    });
+
+    describe('Additional settings accordion', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigate to Drag and drop into categories question type');
+            dragAndDropIntoCategoriesPage.steps.navigateToCreateQuestion('drag and drop into categories');
+        });
+
+        dragAndDropIntoCategoriesPage.tests.verifyAdditonalSettingsAccordionProperties();
+    });
+
+    describe('Additional settings: Student response area and layout', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigate to Drag and drop into categories question type');
+            dragAndDropIntoCategoriesPage.steps.navigateToCreateQuestion('drag and drop into categories');
+            dragAndDropIntoCategoriesPage.steps.expandAdditonalSettings();
+        });
+
+        dragAndDropIntoCategoriesPage.tests.verifyStudentResponseAreaAndLayoutLabelAndCSS();
+
+        //Note: a11y covered in verifyAdditonalSettingsAccordionProperties
+    });
+
+    describe('Additional settings: Font size - Contents', () => {
+        abortEarlySetup();
+        before(() => {
+            dragAndDropIntoCategoriesPage.steps.navigateToCreateQuestion('drag and drop into categories');
+            cy.barsPreLoaderWait();
+            dragAndDropIntoCategoriesPage.steps.addOption();
+            dragAndDropIntoCategoriesPage.steps.addOption();
+            dragAndDropIntoCategoriesPage.steps.addInputToOptionsForDragAndDropFields(optionsArray);
+            dragAndDropIntoCategoriesPage.steps.allotPoints(20);
+            dragAndDropIntoCategoriesPage.steps.clickAndDropDraggableOptionInCategoryCellOfSetCorrectAnswerSection('Bat', 0);
+            dragAndDropIntoCategoriesPage.steps.clickAndDropDraggableOptionInCategoryCellOfSetCorrectAnswerSection('Eagle', 1);
+            dragAndDropIntoCategoriesPage.steps.clickAndDropDraggableOptionInCategoryCellOfSetCorrectAnswerSection('Whale', 2);
+            dragAndDropIntoCategoriesPage.steps.clickAndDropDraggableOptionInCategoryCellOfSetCorrectAnswerSection('Platypus', 3);
+            dragAndDropIntoCategoriesPage.steps.expandAdditonalSettings();
+        });
+
+        dragAndDropIntoCategoriesPage.tests.verifyFontSizeSectionContents();
+    });
+
+    //Note: Will need to work on the font size describes after https://redmine.zeuslearning.com/issues/543473 gets resolved
+    describe('Additional settings: Font size - Set correct answer section', () => {
+        abortEarlySetup();
+        before(() => {
+            dragAndDropIntoCategoriesPage.steps.navigateToCreateQuestion('drag and drop into categories');
+            cy.barsPreLoaderWait();
+            dragAndDropIntoCategoriesPage.steps.setQuestion();
+            dragAndDropIntoCategoriesPage.steps.allotPoints(20);
+            dragAndDropIntoCategoriesPage.steps.clickAndDropDraggableOptionInCategoryCellOfSetCorrectAnswerSection('Bat', 0);
+            dragAndDropIntoCategoriesPage.steps.clickAndDropDraggableOptionInCategoryCellOfSetCorrectAnswerSection('Eagle', 1);
+            dragAndDropIntoCategoriesPage.steps.clickAndDropDraggableOptionInCategoryCellOfSetCorrectAnswerSection('Whale', 2);
+            dragAndDropIntoCategoriesPage.steps.clickAndDropDraggableOptionInCategoryCellOfSetCorrectAnswerSection('Platypus', 3);
+            dragAndDropIntoCategoriesPage.steps.expandAdditonalSettings();
+            dragAndDropIntoCategoriesPage.steps.enterTextInRowHeadingInputField('Row heading');
+        });
+
+        fontSizeDropdownOptions.forEach((option, fontsIndex) => {
+            it(`When the user selects \'${option}\' option from the Font Size dropdown, then font size of the set correct answer section (options, labels) should be changed to ${option}`, () => {
+                dragAndDropIntoCategoriesPage.steps.selectFontSizeOptionFromFontSizeDropdown(fontsIndex)
+                dragAndDropIntoCategoriesPage.fontSizeDropdown()
+                    .verifyInnerText(`${option}`);
+                dragAndDropIntoCategoriesPage.setCorrectAnswerDraggableOptionsWrapper('drag and drop into categories')
+                    .within(() => {
+                        utilities.verifyCSS(dragAndDropIntoCategoriesPage.draggableOption(), {
+                            'font-size': fontSizes[fontsIndex]
+                        });
+                    });
+                dragAndDropIntoCategoriesPage.setCorrectAnswerSectionCategoryGrid()
+                    .within(() => {
+                        utilities.verifyCSS(dragAndDropIntoCategoriesPage.draggableOption(), {
+                            'font-size': fontSizes[fontsIndex]
+                        });
+                    });
+                utilities.verifyCSS(dragAndDropIntoCategoriesPage.setCorrectAnswerSectionCategoryTitle(), {
+                    'font-size': fontSizes[fontsIndex]
+                });
+                utilities.verifyCSS(dragAndDropIntoCategoriesPage.setCorrectAnswerSectionRowTitle(), {
+                    'font-size': fontSizes[fontsIndex]
+                });
+                utilities.verifyCSS(dragAndDropIntoCategoriesPage.rowHeadingSetCorrectAnswerSection(), {
+                    'font-size': fontSizes[fontsIndex]
+                });
+            });
+        });
+    });
+
+    describe('Additional settings: Font size - Preview tab', () => {
+        abortEarlySetup();
+        before(() => {
+            dragAndDropIntoCategoriesPage.steps.navigateToCreateQuestion('drag and drop into categories');
+            cy.barsPreLoaderWait();
+            dragAndDropIntoCategoriesPage.steps.setQuestion();
+            dragAndDropIntoCategoriesPage.steps.allotPoints(20);
+            dragAndDropIntoCategoriesPage.steps.clickAndDropDraggableOptionInCategoryCellOfSetCorrectAnswerSection('Bat', 0);
+            dragAndDropIntoCategoriesPage.steps.clickAndDropDraggableOptionInCategoryCellOfSetCorrectAnswerSection('Eagle', 1);
+            dragAndDropIntoCategoriesPage.steps.clickAndDropDraggableOptionInCategoryCellOfSetCorrectAnswerSection('Whale', 2);
+            dragAndDropIntoCategoriesPage.steps.clickAndDropDraggableOptionInCategoryCellOfSetCorrectAnswerSection('Platypus', 3);
+            dragAndDropIntoCategoriesPage.steps.expandAdditonalSettings();
+        });
+
+        fontSizeDropdownOptions.forEach((option, fontsIndex) => {
+            it(`When the user selects \'${option}\' option from the Font Size dropdown, then font size of the preview (options, question instructions question stems) should be changed to ${option} in the preview tab Answer table`, () => {
+                dragAndDropIntoCategoriesPage.steps.selectFontSizeOptionFromFontSizeDropdown(fontsIndex);
+                utilities.verifyInnerText(dragAndDropIntoCategoriesPage.fontSizeDropdown(), `${option}`);
+                dragAndDropIntoCategoriesPage.steps.switchToPreviewTab();
+                utilities.verifyCSS(dragAndDropIntoCategoriesPage.questionInstructionsText(), {
+                    'font-size': fontSizes[fontsIndex]
+                });
+                dragAndDropIntoCategoriesPage.previewTabDraggableOptionsWrapper('drag and drop into categories')
+                    .within(() => {
+                        utilities.verifyCSS(dragAndDropIntoCategoriesPage.draggableOption(), {
+                            'font-size': fontSizes[fontsIndex]
+                        });
+                    });
+                dragAndDropIntoCategoriesPage.steps.clickAndDropDraggableOptionInCategoryCellOfPreviewTab('Bat', 0);
+                dragAndDropIntoCategoriesPage.previewTabCategoryGrid()
+                    .within(() => {
+                        utilities.verifyCSS(dragAndDropIntoCategoriesPage.draggableOption(), {
+                            'font-size': fontSizes[fontsIndex]
+                        });
+                    });
+                utilities.verifyCSS(dragAndDropIntoCategoriesPage.previewTabCategoryTitle(), {
+                    'font-size': fontSizes[fontsIndex]
+                });
+                utilities.verifyCSS(dragAndDropIntoCategoriesPage.previewTabRowTitle(), {
+                    'font-size': fontSizes[fontsIndex]
+                });
+                utilities.verifyCSS(dragAndDropIntoCategoriesPage.rowHeadingPreviewTab(), {
+                    'font-size': fontSizes[fontsIndex]
+                });
+                cy.log('Font size of answer numeration and correct answer container when show correct answer is checked')
+                dragAndDropIntoCategoriesPage.steps.checkShowCorrectAnswerCheckbox();
+                dragAndDropIntoCategoriesPage.previewTabCategoryGrid()
+                    .within(() => {
+                        utilities.verifyCSS(dragAndDropIntoCategoriesPage.categoryCellNumeration(), {
+                            'font-size': fontSizes[fontsIndex]
+                        });
+                    });
+                utilities.verifyCSS(dragAndDropIntoCategoriesPage.correctAnswerLabel(), {
+                    'font-size': fontSizes[fontsIndex]
+                });
+                dragAndDropIntoCategoriesPage.correctAnswerContainer()
+                    .within(() => {
+                        utilities.verifyCSS(dragAndDropIntoCategoriesPage.categoryCellNumeration(), {
+                            'font-size': fontSizes[fontsIndex]
+                        });
+                    });
+                dragAndDropIntoCategoriesPage.correctAnswerContainer()
+                    .within(() => {
+                        utilities.verifyCSS(dragAndDropIntoCategoriesPage.correctAnswerOption(), {
+                            'font-size': fontSizes[fontsIndex]
+                        });
+                    });
+                cy.log('Uncheck show correct answer checkbox')
+                dragAndDropIntoCategoriesPage.steps.uncheckShowCorrectAnswerCheckbox()
+                cy.log('Font size of answer numeration when check answer is selected')
+                dragAndDropIntoCategoriesPage.steps.checkAnswer()
+                dragAndDropIntoCategoriesPage.previewTabCategoryGrid()
+                    .within(() => {
+                        utilities.verifyCSS(dragAndDropIntoCategoriesPage.categoryCellNumeration(), {
+                            'font-size': fontSizes[fontsIndex]
+                        });
+                    });
+                dragAndDropIntoCategoriesPage.steps.switchToEditTab();
+            });
+        });
+    });
+
+    describe('Additional settings: Check answer', () => {
+        abortEarlySetup();
+        before(() => {
+            dragAndDropIntoCategoriesPage.steps.navigateToCreateQuestion('drag and drop into categories');
+            cy.barsPreLoaderWait();
+            dragAndDropIntoCategoriesPage.steps.setQuestion();
+            dragAndDropIntoCategoriesPage.steps.allotPoints(20);
+            dragAndDropIntoCategoriesPage.steps.clickAndDropDraggableOptionInCategoryCellOfSetCorrectAnswerSection('Bat', 0);
+            dragAndDropIntoCategoriesPage.steps.clickAndDropDraggableOptionInCategoryCellOfSetCorrectAnswerSection('Eagle', 1);
+            dragAndDropIntoCategoriesPage.steps.clickAndDropDraggableOptionInCategoryCellOfSetCorrectAnswerSection('Whale', 2);
+            dragAndDropIntoCategoriesPage.steps.clickAndDropDraggableOptionInCategoryCellOfSetCorrectAnswerSection('Platypus', 3);
+            dragAndDropIntoCategoriesPage.steps.expandAdditonalSettings();
+        });
+
+        dragAndDropIntoCategoriesPage.tests.verifyCheckAnswerSectionAndPreviewTabCheckAnswerButton();
+    });
+
+    describe('Additional settings: Check answer - Functionality', () => {
+        abortEarlySetup();
+        before(() => {
+            dragAndDropIntoCategoriesPage.steps.navigateToCreateQuestion('drag and drop into categories');
+            cy.barsPreLoaderWait();
+            dragAndDropIntoCategoriesPage.steps.setQuestion();
+            dragAndDropIntoCategoriesPage.steps.allotPoints(20);
+            dragAndDropIntoCategoriesPage.steps.clickAndDropDraggableOptionInCategoryCellOfSetCorrectAnswerSection('Bat', 0);
+            dragAndDropIntoCategoriesPage.steps.clickAndDropDraggableOptionInCategoryCellOfSetCorrectAnswerSection('Eagle', 1);
+            dragAndDropIntoCategoriesPage.steps.clickAndDropDraggableOptionInCategoryCellOfSetCorrectAnswerSection('Whale', 2);
+            dragAndDropIntoCategoriesPage.steps.clickAndDropDraggableOptionInCategoryCellOfSetCorrectAnswerSection('Platypus', 3);
+            dragAndDropIntoCategoriesPage.steps.expandAdditonalSettings();
+            dragAndDropIntoCategoriesPage.steps.setMaximumCheckAnswerAttempts(2);
+            dragAndDropIntoCategoriesPage.steps.switchToPreviewTab();
+        });
+
+        dragAndDropIntoCategoriesPage.tests.verifyCheckAnswerButtonFunctionalityWhenQuestionIsUnattempted();
+
+        it('When the user attempts the question partially correct, then on clicking on the \'Check answer\' button, green check-mark icon should be displayed besides the correct response, red cross-mark should be displayed besides incorrect response and \'Incorrect answer\' label should be displayed below the question preview', () => {
+            dragAndDropIntoCategoriesPage.steps.clickAndDropDraggableOptionInCategoryCellOfPreviewTab('Bat', 0);
+            dragAndDropIntoCategoriesPage.steps.clickAndDropDraggableOptionInCategoryCellOfPreviewTab('Eagle', 1);
+            dragAndDropIntoCategoriesPage.steps.clickAndDropDraggableOptionInCategoryCellOfPreviewTab('Whale', 3);
+            dragAndDropIntoCategoriesPage.steps.clickAndDropDraggableOptionInCategoryCellOfPreviewTab('Platypus', 2);
+            dragAndDropIntoCategoriesPage.steps.checkAnswer();
+            dragAndDropIntoCategoriesPage.steps.verifyCorrectOptionCheckmarkIcon(0);
+            dragAndDropIntoCategoriesPage.steps.verifyCorrectOptionCheckmarkIcon(1);
+            dragAndDropIntoCategoriesPage.steps.verifyIncorrectOptionCrossmarkIcon(2);
+            dragAndDropIntoCategoriesPage.steps.verifyIncorrectOptionCrossmarkIcon(3);
+            dragAndDropIntoCategoriesPage.steps.verifyIncorrectAttemptBorder();
+            dragAndDropIntoCategoriesPage.steps.verifyCorrectIncorrectAnswerLabel('Incorrect');
+            dragAndDropIntoCategoriesPage.steps.verifyCorrectAnswerSectionNotVisible();
+            cy.log('Dropping the options back to the options container')
+            dragAndDropIntoCategoriesPage.steps.clickAndDropDraggableOptionInResponseContainerOfPreviewTab('Whale');
+            dragAndDropIntoCategoriesPage.steps.clickAndDropDraggableOptionInResponseContainerOfPreviewTab('Platypus');
+        });
+
+        it('When the user attempts the question correctly, then on clicking on the \'Check answer\' button, green check-mark icon should be displayed besides the correct response and \'Correct answer\' label should be displayed below the question preview', () => {
+            dragAndDropIntoCategoriesPage.steps.clickAndDropDraggableOptionInCategoryCellOfPreviewTab('Whale', 2);
+            dragAndDropIntoCategoriesPage.steps.clickAndDropDraggableOptionInCategoryCellOfPreviewTab('Platypus', 3);
+            dragAndDropIntoCategoriesPage.steps.checkAnswer();
+            dragAndDropIntoCategoriesPage.steps.verifyCorrectOptionCheckmarkIcon(0);
+            dragAndDropIntoCategoriesPage.steps.verifyCorrectOptionCheckmarkIcon(1);
+            dragAndDropIntoCategoriesPage.steps.verifyCorrectOptionCheckmarkIcon(2);
+            dragAndDropIntoCategoriesPage.steps.verifyCorrectOptionCheckmarkIcon(3);
+            dragAndDropIntoCategoriesPage.steps.verifyCorrectAttemptBorder();
+            dragAndDropIntoCategoriesPage.steps.verifyCorrectIncorrectAnswerLabel('Correct');
+            dragAndDropIntoCategoriesPage.steps.verifyCorrectAnswerSectionNotVisible();
+        });
+
+        dragAndDropIntoCategoriesPage.tests.verifyDisabledCheckAnswerButtonWithCSSAnda11y();
+
+        it('When the user updates the value of Maximum check answer attempts input field, it should get reflected on the Preview tab', () => {
+            dragAndDropIntoCategoriesPage.steps.switchToEditTab();
+            dragAndDropIntoCategoriesPage.steps.clearMaximumCheckAnswerAttemptsInputField();
+            dragAndDropIntoCategoriesPage.steps.addInputToMaximumCheckAnswerAttemptsInputField(1);
+            dragAndDropIntoCategoriesPage.steps.switchToPreviewTab();
+            dragAndDropIntoCategoriesPage.steps.verifyCheckAnswerButtonEnabled();
+            dragAndDropIntoCategoriesPage.steps.clickAndDropDraggableOptionInCategoryCellOfPreviewTab('Bat', 0);
+            dragAndDropIntoCategoriesPage.steps.clickAndDropDraggableOptionInCategoryCellOfPreviewTab('Eagle', 1);
+            dragAndDropIntoCategoriesPage.steps.clickAndDropDraggableOptionInCategoryCellOfPreviewTab('Whale', 3);
+            dragAndDropIntoCategoriesPage.steps.clickAndDropDraggableOptionInCategoryCellOfPreviewTab('Platypus', 2);
+            dragAndDropIntoCategoriesPage.steps.checkAnswer();
+            dragAndDropIntoCategoriesPage.steps.verifyCheckAnswerButtonDisabled();
+        });
+
+        it('When the \'Maximum check answer attempts\' input field has value \'0\' and user switches to Preview tab, then the \'Check Answer\' button should be enabled and user should be able to check answer multiple times', () => {
+            dragAndDropIntoCategoriesPage.steps.switchToEditTab();
+            dragAndDropIntoCategoriesPage.steps.clearMaximumCheckAnswerAttemptsInputField();
+            dragAndDropIntoCategoriesPage.steps.addInputToMaximumCheckAnswerAttemptsInputField(0);
+            cy.log('Switching to Preview tab')
+            dragAndDropIntoCategoriesPage.steps.switchToPreviewTab();
+            dragAndDropIntoCategoriesPage.steps.clickAndDropDraggableOptionInCategoryCellOfPreviewTab('Bat', 0);
+            dragAndDropIntoCategoriesPage.steps.clickAndDropDraggableOptionInCategoryCellOfPreviewTab('Eagle', 1);
+            dragAndDropIntoCategoriesPage.steps.clickAndDropDraggableOptionInCategoryCellOfPreviewTab('Whale', 3);
+            dragAndDropIntoCategoriesPage.steps.clickAndDropDraggableOptionInCategoryCellOfPreviewTab('Platypus', 2);
+            dragAndDropIntoCategoriesPage.steps.checkAnswer();
+            dragAndDropIntoCategoriesPage.steps.verifyCheckAnswerButtonEnabled();
+            cy.log('Dropping the options back to the options container')
+            dragAndDropIntoCategoriesPage.steps.clickAndDropDraggableOptionInResponseContainerOfPreviewTab('Whale');
+            dragAndDropIntoCategoriesPage.steps.clickAndDropDraggableOptionInResponseContainerOfPreviewTab('Platypus');
+            dragAndDropIntoCategoriesPage.steps.clickAndDropDraggableOptionInCategoryCellOfPreviewTab('Whale', 2);
+            dragAndDropIntoCategoriesPage.steps.clickAndDropDraggableOptionInCategoryCellOfPreviewTab('Platypus', 3);
+            dragAndDropIntoCategoriesPage.steps.checkAnswer();
+            dragAndDropIntoCategoriesPage.steps.verifyCheckAnswerButtonEnabled();
+        });
+
+        it('When the \'Maximum check answer attempts\' input field is empty and user switches to Preview tab, then the \'Check Answer\' button should be enabled and user should be able to check answer multiple times', () => {
+            dragAndDropIntoCategoriesPage.steps.switchToEditTab();
+            dragAndDropIntoCategoriesPage.steps.clearMaximumCheckAnswerAttemptsInputField()
+            dragAndDropIntoCategoriesPage.steps.switchToPreviewTab();
+            dragAndDropIntoCategoriesPage.steps.clickAndDropDraggableOptionInCategoryCellOfPreviewTab('Bat', 0);
+            dragAndDropIntoCategoriesPage.steps.clickAndDropDraggableOptionInCategoryCellOfPreviewTab('Eagle', 1);
+            dragAndDropIntoCategoriesPage.steps.clickAndDropDraggableOptionInCategoryCellOfPreviewTab('Whale', 3);
+            dragAndDropIntoCategoriesPage.steps.clickAndDropDraggableOptionInCategoryCellOfPreviewTab('Platypus', 2);
+            dragAndDropIntoCategoriesPage.steps.checkAnswer();
+            dragAndDropIntoCategoriesPage.steps.verifyCheckAnswerButtonEnabled();
+            cy.log('Dropping the options back to the options container')
+            dragAndDropIntoCategoriesPage.steps.clickAndDropDraggableOptionInResponseContainerOfPreviewTab('Whale');
+            dragAndDropIntoCategoriesPage.steps.clickAndDropDraggableOptionInResponseContainerOfPreviewTab('Platypus');
+            dragAndDropIntoCategoriesPage.steps.clickAndDropDraggableOptionInCategoryCellOfPreviewTab('Whale', 2);
+            dragAndDropIntoCategoriesPage.steps.clickAndDropDraggableOptionInCategoryCellOfPreviewTab('Platypus', 3);
+            dragAndDropIntoCategoriesPage.steps.checkAnswer();
+            dragAndDropIntoCategoriesPage.steps.verifyCheckAnswerButtonEnabled();
+        });
+    });
+
+    describe('Additional settings: Details section', () => {
+        abortEarlySetup();
+        before(() => {
+            dragAndDropIntoCategoriesPage.steps.navigateToCreateQuestion('drag and drop into categories');
+            cy.barsPreLoaderWait();
+            dragAndDropIntoCategoriesPage.steps.expandAdditonalSettings();
+        });
+
+        dragAndDropIntoCategoriesPage.tests.verifyDetailsSection();
+    });
+});