itemengine-cypress-automation 1.0.37 → 1.0.39

package/cypress/e2e/ILC/FeedbackScale/feedbackScaleEditTab.js

@@ -0,0 +1,346 @@
+import { colorPopupComponent } from "../../../pages/components";
+import { feedbackScalePage } from "../../../pages/feedbackScalePage";
+import abortEarlySetup from "../../../support/helpers/abortEarly";
+import utilities from "../../../support/helpers/utilities";
+const css = Cypress.env('css');
+
+describe('Create item page: Feedback scale: Edit tab - Question instructions, Feedback layout style dropdown, Default state of option accordions, Option accordion contents for \'Button\' and \'Star\' layout styles, Add, delete option accordion', () => {
+    before(() => {
+        cy.loginAs('admin');
+    });
+
+    describe('Question instructions input field - Edit tab', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigate to Feedback scale question type');
+            feedbackScalePage.steps.navigateToCreateQuestion('feedback scale');
+            cy.barsPreLoaderWait();
+        });
+
+        feedbackScalePage.tests.verifyQuestionInstructionsInputFieldEditTab();
+    });
+
+    describe('Question instructions input field - Preview tab', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigate to Feedback scale question type');
+            feedbackScalePage.steps.navigateToCreateQuestion('feedback scale');
+            cy.barsPreLoaderWait();
+        });
+
+        feedbackScalePage.tests.verifyQuestionInstructionsInputFieldPreviewTab();
+    });
+
+    describe('Feedback layout style dropdown', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigate to Feedback scale question type');
+            feedbackScalePage.steps.navigateToCreateQuestion('feedback scale');
+            cy.barsPreLoaderWait();
+        });
+
+        it('\'Feedback layout style\' label and dropdown should be displayed and in the \'Feedback layout style\' dropdown, \'Button\' option should be selected by default', () => {
+            utilities.verifyInnerText(feedbackScalePage.feedbackLayoutStyleLabel(), 'Feedback layout style');
+            utilities.verifyElementVisibilityState(feedbackScalePage.feedbackLayoutStyleLabel(), 'visible');
+            utilities.verifyInnerText(feedbackScalePage.feedbackLayoutStyleDropdown(), 'Button');
+            utilities.verifyElementVisibilityState(feedbackScalePage.feedbackLayoutStyleDropdown(), 'visible');
+        });
+
+        it('CSS of \'Feedback layout style\' label and \'Feedback layout style\' dropdown in default state', { tags: 'css' }, () => {
+            utilities.verifyCSS(feedbackScalePage.feedbackLayoutStyleLabel(), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.semibold
+            });
+            utilities.verifyCSS(feedbackScalePage.feedbackLayoutStyleDropdown(), {
+                'background-color': css.color.secondaryBtnBg,
+                'border': `1px solid ${css.color.defaultDropdownBorder}`
+            });
+            utilities.verifyCSS(feedbackScalePage.feedbackLayoutStyleDropdown().find('.dropdown-label-text'), {
+                'color': css.color.liText,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular
+            });
+        });
+
+        it('Accessibility of \'Feedback layout style\' label and \'Feedback layout style\' dropdown in default state', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(feedbackScalePage.feedbackLayoutStyleLabel().parents('[arialabel="feedback layout style"]'));
+        });
+
+        it('When the user clicks on \'Feedback layout style\' dropdown, a list of 2 layout options should open - \'Button\', \'Star\'', () => {
+            let dropdownOptions = ['Button', 'Star'];
+            feedbackScalePage.steps.clickOnFeedbackStyleLayoutDropdown();
+            utilities.verifyElementVisibilityState(feedbackScalePage.feedbackLayoutStyleDropdownOptions(), 'visible');
+            feedbackScalePage.steps.verifyFeedbackStyleLayoutOptions(dropdownOptions);
+        });
+
+        it('CSS of \'Feedback layout style\' label and \'Feedback layout style\' dropdown in active state', { tags: 'css' }, () => {
+            utilities.verifyCSS(feedbackScalePage.feedbackLayoutStyleDropdown(), {
+                'background-color': css.color.secondaryBtnBg,
+                'border': `1px solid ${css.color.activeComponentBorder}`,
+            });
+            utilities.verifyCSS(feedbackScalePage.feedbackLayoutStyleDropdownOptions('Button'), {
+                'color': css.color.liText,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular,
+                'background-color': css.color.liTextSelectedBg,
+            });
+            utilities.verifyCSS(feedbackScalePage.feedbackLayoutStyleDropdownOptions('Star'), {
+                'color': css.color.liText,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular,
+                'background-color': css.color.transparent,
+            });
+        });
+
+        it('Accessibility of \'Feedback layout style\' label and \'Feedback layout style\' dropdown in active state', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(feedbackScalePage.feedbackLayoutStyleLabel().parents('[arialabel="feedback layout style"]'));
+            cy.checkAccessibility(feedbackScalePage.feedbackLayoutStyleDropdownOptions().parents('.dropdown-list-ul'));
+        });
+    });
+
+    describe('Feedback scale - Default state of option accordions, add image, bold text in tooltip and description input fields', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigate to Feedback scale question type');
+            feedbackScalePage.steps.navigateToCreateQuestion('feedback scale');
+            cy.barsPreLoaderWait();
+        });
+
+        it('\'Feedback scale\' label should be displayed', () => {
+            utilities.verifyInnerText(feedbackScalePage.feedbackScaleLabel(), 'Feedback scale');
+            utilities.verifyElementVisibilityState(feedbackScalePage.feedbackScaleLabel(), 'visible');
+        });
+
+        //Failing due to https://redmine.zeuslearning.com/issues/531554
+        it('By default, 3 option accordions should be displayed for \'Button\' layout style and \'Option 1\' accordion should be in expanded state and all other accordions should be in collapsed state', () => {
+            utilities.verifyElementCount(feedbackScalePage.optionAccordion(), 3);
+            feedbackScalePage.steps.verifyOptionAccordionInExpandedState(0);
+            feedbackScalePage.steps.verifyOptionAccordionInCollapsedState(1);
+            feedbackScalePage.steps.verifyOptionAccordionInCollapsedState(2);
+        });
+
+        it('All accordions should have an \'Option #\' label, \'delete option\' button and a chevron icon', () => {
+            for (let index = 0; index < 3; index++) {
+                feedbackScalePage.steps.verifyOptionAccordionPanelContents(index, `Option ${index + 1}`);
+            }
+        });
+
+        it('\'Label\' label and input field should be displayed', () => {
+            utilities.verifyInnerText(feedbackScalePage.labelsLabel(), 'Label');
+            utilities.verifyElementVisibilityState(feedbackScalePage.labelsLabel(), 'visible');
+            utilities.verifyElementVisibilityState(feedbackScalePage.labelsInputField(), 'visible');
+        });
+
+        it('\'Color\' label and a color block with pre filled color should be displayed', () => {
+            utilities.verifyInnerText(feedbackScalePage.colorLabel(), 'Color');
+            utilities.verifyElementVisibilityState(feedbackScalePage.colorLabel(), 'visible');
+            utilities.verifyElementVisibilityState(colorPopupComponent.colorBlock(), 'visible');
+        });
+
+        it('\'Tooltip\' label and input field should be displayed', () => {
+            utilities.verifyInnerText(feedbackScalePage.tooltipLabel(), 'Tooltip');
+            utilities.verifyElementVisibilityState(feedbackScalePage.tooltipLabel(), 'visible');
+            utilities.verifyElementVisibilityState(feedbackScalePage.tooltipInputField(), 'visible');
+        });
+
+        it('\'Description\' label and input field should be displayed', () => {
+            utilities.verifyInnerText(feedbackScalePage.descriptionLabel(), 'Description');
+            utilities.verifyElementVisibilityState(feedbackScalePage.descriptionLabel(), 'visible');
+            utilities.verifyElementVisibilityState(feedbackScalePage.descriptionInputField(), 'visible');
+        });
+
+        it('CSS of option accordion contents', { tags: 'css' }, () => {
+            const labels = [feedbackScalePage.labelsLabel, feedbackScalePage.colorLabel, feedbackScalePage.tooltipLabel, feedbackScalePage.descriptionLabel];
+            const inputFields = [feedbackScalePage.labelsInputField, feedbackScalePage.tooltipInputField, feedbackScalePage.descriptionInputField];
+            utilities.verifyCSS(feedbackScalePage.feedbackScaleLabel(), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.semibold
+            });
+            utilities.verifyCSS(feedbackScalePage.optionAccordionLabel(), {
+                'color': css.color.panelLabel,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.bold
+            });
+            feedbackScalePage.deleteOptionAccordionButton()
+                .verifyPseudoClassBeforeProperty('color', css.color.deleteIcon);
+            labels.forEach((label) => {
+                utilities.verifyCSS(label(), {
+                    'color': css.color.labels,
+                    'font-size': css.fontSize.normal,
+                    'font-weight': css.fontWeight.semibold
+                });
+            });
+            inputFields.forEach((inputField) => {
+                utilities.verifyCSS(inputField(), {
+                    'color': css.color.text,
+                    'font-size': css.fontSize.default,
+                    'font-weight': css.fontWeight.regular
+                });
+            });
+        });
+
+        //Failing due to https://redmine.zeuslearning.com/issues/541472
+        it('Accessibility of option accordion contents', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(feedbackScalePage.feedbackScaleLabel());
+            cy.checkAccessibility(feedbackScalePage.optionAccordion().parents('.feedback-scale-panel'));
+        });
+
+        it('When the user expands another option accordion, \'Option 1\' accordion should still be in expanded state', () => {
+            feedbackScalePage.steps.expandOptionAccordion(1);
+            feedbackScalePage.steps.verifyOptionAccordionInExpandedState(0);
+            feedbackScalePage.steps.verifyOptionAccordionInExpandedState(1);
+        });
+
+        it('The user should be able to collapse an option accordion and state of another accordions should not change', () => {
+            feedbackScalePage.steps.collapseOptionAccordion(0);
+            feedbackScalePage.steps.verifyOptionAccordionInCollapsedState(0);
+            feedbackScalePage.steps.verifyOptionAccordionInExpandedState(1);
+            feedbackScalePage.steps.verifyOptionAccordionInCollapsedState(2);
+        });
+
+        it('\'Add option\' button should be present', () => {
+            utilities.verifyInnerText(feedbackScalePage.addOptionButton(), 'Add option');
+            utilities.verifyElementVisibilityState(feedbackScalePage.addOptionButton(), 'visible');
+        });
+
+        it('When user adds an image to the tooltip input field then it should be displayed in the tooltip input field', () => {
+            feedbackScalePage.steps.focusInTooltipInputField(1);
+            feedbackScalePage.steps.selectImageOptionFromCKEditorToolbar();
+            feedbackScalePage.steps.addImageToInputField();
+            feedbackScalePage.steps.verifyImageAndAltTextInTooltipInputField(1);
+        });
+
+        it('When user adds \'Bold\' text to the description input field then it should be displayed in the description input field', () => {
+            feedbackScalePage.steps.expandOptionAccordion(2);
+            feedbackScalePage.steps.focusInDescriptionInputField(1);
+            feedbackScalePage.steps.selectBoldOptionFromCKEditorToolbar();
+            feedbackScalePage.steps.addInputToDescriptionInputField(1, 'I\'m very comfortable with the learning target');
+            feedbackScalePage.steps.verifyBoldTextInDescriptionInputField(1, '​​​​​​​I\'m very comfortable with the learning target');
+        });
+    });
+
+    describe('Feedback scale - Option accordion contents for \'Button\' layout style', () => {
+        const options = ['Option 1', 'Option 2', 'Option 3'];
+        const optionsContent = [
+            {
+                'labels': 'Uncomfortable',
+                'color': 'rgb(229, 76, 25)',
+                'tooltip': 'Made me uneasy and unsettled.',
+                'description': 'I am uncomfortable with the learning target.'
+            },
+            {
+                'labels': 'Somewhat comfortable',
+                'color': 'rgb(255, 240, 25)',
+                'tooltip': 'I would like some help.',
+                'description': 'I am somewhat comfortable with the learning target.'
+            },
+            {
+                'labels': 'Comfortable',
+                'color': 'rgb(9, 179, 33)',
+                'tooltip': 'I\'m feeling confident.',
+                'description': 'I am comfortable with the learning target.'
+            }
+        ];
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigate to Feedback scale question type');
+            feedbackScalePage.steps.navigateToCreateQuestion('feedback scale');
+            cy.barsPreLoaderWait();
+        });
+
+        options.forEach((option, optionIndex) => {
+            it(`Option accordion contents for \'${option}\' - \'Button\' layout style`, () => {
+                feedbackScalePage.steps.verifyOptionAccordionInputFieldContents(optionIndex, optionsContent[optionIndex]);
+            });
+        });
+    });
+
+    describe('Feedback scale - Option accordion contents for \'Star\' layout style', () => {
+        const options = ['Option 1', 'Option 2', 'Option 3', 'Option 4', 'Option 5'];
+        const optionsContent = [
+            {
+                'labels': '20%',
+                'color': 'rgb(226, 121, 0)',
+                'tooltip': 'Needs improvement',
+                'description': 'Your attempt could be better. Keep practicing!'
+            },
+            {
+                'labels': '40%',
+                'color': 'rgb(226, 121, 0)',
+                'tooltip': 'Getting there',
+                'description': 'You\'ve made progress, but more effort is needed to pass.'
+            },
+            {
+                'labels': '60%',
+                'color': 'rgb(226, 121, 0)',
+                'tooltip': 'Good job',
+                'description': 'You tried well and made a good attempt.'
+            },
+            {
+                'labels': '80%',
+                'color': 'rgb(226, 121, 0)',
+                'tooltip': 'Great work',
+                'description': 'You did an outstanding job and answered all questions correctly!'
+            },
+            {
+                'labels': '100%',
+                'color': 'rgb(226, 121, 0)',
+                'tooltip': 'Excellent',
+                'description': 'Exceptional job! All answers are perfect. You\'re doing amazing!'
+            }
+        ];
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigate to Feedback scale question type');
+            feedbackScalePage.steps.navigateToCreateQuestion('feedback scale');
+            cy.barsPreLoaderWait();
+            feedbackScalePage.steps.clickOnFeedbackStyleLayoutDropdown();
+            feedbackScalePage.steps.selectFeedbackStyleLayoutDropdown('Star');
+        });
+
+        it('By default, 5 option accordions should be displayed for \'Star\' layout style and \'Option 1\' accordion should be in expanded state and all other accordions should be in collapsed state', () => {
+            utilities.verifyElementCount(feedbackScalePage.optionAccordion(), 5);
+            feedbackScalePage.steps.verifyOptionAccordionInExpandedState(0);
+            for (let index = 1; index < 4; index++) {
+                feedbackScalePage.steps.verifyOptionAccordionInCollapsedState(index);
+            };
+        });
+
+        //Failing due to https://redmine.zeuslearning.com/issues/541449
+        options.forEach((option, optionIndex) => {
+            it(`Option accordion contents for \'${option}\' - \'Star\' layout style`, () => {
+                feedbackScalePage.steps.verifyOptionAccordionInputFieldContents(optionIndex, optionsContent[optionIndex]);
+            });
+        });
+    });
+
+    describe('Feedback scale - Add, delete option accordion - edit tab', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigate to Feedback scale question type');
+            feedbackScalePage.steps.navigateToCreateQuestion('feedback scale');
+            cy.barsPreLoaderWait();
+        });
+
+        it('When the user clicks on \'Add option\' button, a new option accordion should get added and the added option accordion should be in collapsed state', () => {
+            feedbackScalePage.steps.addOption();
+            utilities.verifyElementCount(feedbackScalePage.optionAccordion(), 4);
+            utilities.verifyElementVisibilityState(feedbackScalePage.optionAccordion(), 'visible');
+            feedbackScalePage.steps.verifyOptionAccordionInCollapsedState(3);
+        });
+
+        it('By default all input fields of the newly added option should be empty and default color in color block should be #00007C', () => {
+            feedbackScalePage.steps.verifyOptionAccordionInputFieldContents(3, { 'labels': '', 'color': 'rgb(0, 0, 124)', 'tooltip': '', 'description': '' });
+        });
+
+        it('When the user deletes an option accordion, the option accordion should get removed and labels of existing option accordions should get updated accordingly', () => {
+            feedbackScalePage.steps.deleteOptionAccordion(1);
+            utilities.verifyElementCount(feedbackScalePage.optionAccordion(), 3);
+            for (let index = 0; index < 3; index++) {
+                feedbackScalePage.steps.verifyOptionAccordionPanelContents(index, `Option ${index + 1}`);
+            };
+        });
+    });
+});

package/cypress/e2e/ILC/FeedbackScale/feedbackScaleHeaderSection.js

@@ -0,0 +1,72 @@
+import { dialogBoxBase } from "../../../pages";
+import { feedbackScalePage } from "../../../pages/feedbackScalePage";
+import abortEarlySetup from "../../../support/helpers/abortEarly";
+
+describe('Create question page - Feedback scale: Header section and Saving question', () => {
+    before(() => {
+        cy.loginAs('admin');
+    });
+
+    describe('Header section contents', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigating to feedback scale question type');
+            feedbackScalePage.steps.navigateToCreateQuestion('feedback scale')
+        });
+
+        feedbackScalePage.tests.verifyCreateQuestionPageQuestionTypeHeader('Feedback scale');
+    });
+
+    describe('Tabs section', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigating to feedback scale question type');
+            feedbackScalePage.steps.navigateToCreateQuestion('feedback scale')
+        });
+
+        feedbackScalePage.tests.verifyTabsSection();
+    });
+
+    describe('Cancel button', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigating to feedback scale question type');
+            feedbackScalePage.steps.navigateToCreateQuestion('feedback scale')
+        });
+
+        feedbackScalePage.tests.verifyCancelButton('feedback scale');
+    });
+
+    describe('Save Question button', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigating to feedback scale question type');
+            feedbackScalePage.steps.navigateToCreateQuestion('feedback scale')
+            cy.barsPreLoaderWait();
+        });
+
+
+        describe('Validation error messages', () => {
+            dialogBoxBase.tests.verifyRequiredFieldsWarningPopupOnClickingSaveButton();
+
+            it('Validation error messages should be displayed below required input fields', () => {
+                feedbackScalePage.steps.verifyQuestionInstructionsErrorMessage()
+            });
+
+            it('Validation error messages should disappear when required input fields are filled', () => {
+                feedbackScalePage.steps.addQuestionInstructions();
+                feedbackScalePage.steps.verifyQuestionInstructionsErrorMessageIsNotDisplayed();
+            });
+
+            // Failing due to https://redmine.zeuslearning.com/issues/541472
+            feedbackScalePage.tests.verifya11yOfCreateItemWrapperContents();
+        });
+
+        describe('Saving a question', () => {
+            it('When user has filled all the mandatory fields then on clicking on Save question button the question should get saved and a snackbar with text \'Saved successfully!\' should be displayed', () => {
+                feedbackScalePage.steps.saveAQuestionAndVerifySnackbar();
+            });
+            feedbackScalePage.tests.verifySavedSuccessfullySnackbarCSSanda11y();
+        });
+    });
+});