itemengine-cypress-automation 1.0.37 → 1.0.39

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

@@ -0,0 +1,389 @@
+import { feedbackScalePage } from "../../../pages/feedbackScalePage";
+import abortEarlySetup from "../../../support/helpers/abortEarly";
+import utilities from "../../../support/helpers/utilities";
+const css = Cypress.env('css');
+const optionsContentForButtonLayout = [
+    {
+        '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.'
+    }
+];
+const optionsContentForStarLayout = [
+    {
+        'labels': '20%',
+        'starsCount': 1,
+        'tooltip': 'Needs improvement',
+        'description': 'Your attempt could be better. Keep practicing!'
+    },
+    {
+        'labels': '40%',
+        'starsCount': 2,
+        'tooltip': 'Getting there',
+        'description': 'You\'ve made progress, but more effort is needed to pass.'
+    },
+    {
+        'labels': '60%',
+        'starsCount': 3,
+        'tooltip': 'Good job',
+        'description': 'You tried well and made a good attempt.'
+    },
+    {
+        'labels': '80%',
+        'starsCount': 4,
+        'tooltip': 'Great work',
+        'description': 'You did an outstanding job and answered all questions correctly!'
+    },
+    {
+        'labels': '100%',
+        'starsCount': 5,
+        'tooltip': 'Excellent',
+        'description': 'Exceptional job! All answers are perfect. You\'re doing amazing!'
+    }
+];
+
+describe('Create item page: Feedback scale: Preview tab: \'Button\' and \'Star\' layouts, add, delete option accordion', () => {
+    before(() => {
+        cy.loginAs('admin');
+    });
+
+    describe('Feedback scale - \'Button\' layout style in the preview tab', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigate to Feedback scale question type');
+            feedbackScalePage.steps.navigateToCreateQuestion('feedback scale');
+            cy.barsPreLoaderWait();
+            feedbackScalePage.steps.expandOptionAccordion(2);
+            feedbackScalePage.steps.focusInTooltipInputField(2);
+            feedbackScalePage.steps.clearTooltipInputField(2);
+            feedbackScalePage.steps.selectImageOptionFromCKEditorToolbar();
+            feedbackScalePage.steps.addImageToInputField();
+            feedbackScalePage.steps.focusInDescriptionInputField(2);
+            feedbackScalePage.steps.clearDescriptionInputField(2);
+            feedbackScalePage.steps.selectBoldOptionFromCKEditorToolbar();
+            feedbackScalePage.steps.addInputToDescriptionInputField(2, 'I\'m very comfortable with the learning target');
+            feedbackScalePage.steps.switchToPreviewTab();
+        });
+
+        it('By default three feedback buttons - \'Uncomfortable\', \'Somewhat comfortable\' and \'Comfortable\' should be displayed', () => {
+            utilities.verifyElementCount(feedbackScalePage.feedbackButton(), 3);
+            optionsContentForButtonLayout.forEach((buttonContent, buttonIndex) => {
+                feedbackScalePage.steps.verifyFeedbackButtonInPreviewTab(buttonIndex, buttonContent.labels);
+            });
+        });
+
+        //Failing due to https://redmine.zeuslearning.com/issues/544606
+        it('CSS of feedback buttons - unselected state', { tags: 'css' }, () => {
+            utilities.verifyCSS(feedbackScalePage.feedbackButton(), {
+                'color': css.color.text,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular,
+                'background-color': css.color.transparent,
+                'border': `1px solid ${css.color.figDefaultComponentBorder}`
+            });
+        });
+
+        it('Accessibility of preview tab contents', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(feedbackScalePage.previewTabQuestionWrapper());
+        });
+
+        it('When the user hovers overs a feedback button, a tooltip with a color block and tooltip text should be displayed and on moving the focus away from the button, the tooltip should disappear', () => {
+            feedbackScalePage.steps.verifyTooltipFeedbackButton(1, 'I would like some help.');
+        });
+
+        //Failing due to https://redmine.zeuslearning.com/issues/548050
+        it('CSS of feedback button tooltip', { tags: 'css' }, () => {
+            feedbackScalePage.feedbackButton()
+                .eq(1)
+                .trigger('mouseover');
+            utilities.verifyElementVisibilityState(feedbackScalePage.tooltipText(), 'visible');
+            utilities.verifyCSS(feedbackScalePage.tooltipText(), {
+                'background-color': css.color.defaultBackground,
+                'color': css.color.labels,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.regular
+            });
+            feedbackScalePage.feedbackButton()
+                .eq(1)
+                .trigger('mouseout')
+            utilities.verifyElementVisibilityState(feedbackScalePage.tooltipText(), 'notExist');
+        });
+
+        it('Accessibility of feedback button tooltip', { tags: 'a11y' }, () => {
+            feedbackScalePage.feedbackButton()
+                .eq(1)
+                .trigger('mouseover');
+            utilities.verifyElementVisibilityState(feedbackScalePage.tooltipText(), 'visible');
+            cy.checkAccessibility(feedbackScalePage.tooltipText());
+            feedbackScalePage.feedbackButton()
+                .eq(1)
+                .trigger('mouseout')
+            utilities.verifyElementVisibilityState(feedbackScalePage.tooltipText(), 'notExist');
+        });
+
+        it('When the user has added an image in the tooltip input field, the image should be displayed on the tooltip when the user hovers over the feedback button and on moving the focus away from the button, the tooltip should disappear', () => {
+            feedbackScalePage.steps.verifyTooltipImageFeedbackButton(2);
+        });
+
+        it('A \'More info\' accordion should be present and by default it should be in collapsed state', () => {
+            utilities.verifyInnerText(feedbackScalePage.moreInfoButton(), 'More info');
+            utilities.verifyElementVisibilityState(feedbackScalePage.moreInfoButton(), 'visible');
+            feedbackScalePage.steps.verifyMoreInfoAccordionInCollapsedState();
+        });
+
+        //Failing due to https://redmine.zeuslearning.com/issues/544612
+        it('When the user expands the \'More info\' accordion, additional information about the feedback buttons should be displayed', () => {
+            feedbackScalePage.steps.expandMoreInfoAccordion();
+            for (let index = 0; index < optionsContentForButtonLayout.length - 1; index++) {
+                feedbackScalePage.steps.verifyMoreInfoAccordionColorBlock(index, optionsContentForButtonLayout[index].color);
+                feedbackScalePage.steps.verifyMoreInfoAccordionOptionsListLabelTooltipAndDescription(index, [optionsContentForButtonLayout[index].labels, optionsContentForButtonLayout[index].tooltip, optionsContentForButtonLayout[index].description]);
+            }
+            feedbackScalePage.steps.verifyMoreInfoAccordionColorBlock(2, optionsContentForButtonLayout[2].color);
+            feedbackScalePage.steps.verifyMoreInfoOptionListLabelTooltipAndDescriptionForImageTooltipAndBoldDescription(2);
+        });
+
+        it('The user should be able to mark feedback by clicking on any feedback button and when the user selects a feedback button, the more info contents of the particular feedback button should get highlighted', () => {
+            feedbackScalePage.steps.clickOnFeedbackButton(0);
+            feedbackScalePage.steps.verifyFeedbackButtonSelectedState(0);
+            feedbackScalePage.steps.verifyMoreInfoOptionListHighlightedState(0);
+        });
+
+        it('CSS of feedback buttons - selected state', { tags: 'css' }, () => {
+            utilities.verifyCSS(feedbackScalePage.feedbackButton().eq(0), {
+                'color': css.color.text,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular,
+                'background-color': css.color.liTextSelectedBg,
+                'border-color': `${css.color.activeComponentBorder}`
+            });
+        });
+
+        it('Accessibility of feedback buttons - selected state', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(feedbackScalePage.previewTabQuestionWrapper());
+        });
+
+        it('When the user clicks on any other feedback button, then the previously selected button should return to default state', () => {
+            feedbackScalePage.steps.clickOnFeedbackButton(1);
+            feedbackScalePage.steps.verifyFeedbackButtonSelectedState(1);
+            feedbackScalePage.steps.verifyFeedbackButtonUnselectedState(0);
+            feedbackScalePage.steps.verifyMoreInfoOptionListHighlightedState(1);
+            feedbackScalePage.steps.verifyMoreInfoOptionListHighlightedStateNotExists(0);
+        });
+    });
+
+    describe('Feedback scale - \'Star\' layout style in the preview tab', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigate to Feedback scale question type');
+            feedbackScalePage.steps.navigateToCreateQuestion('feedback scale');
+            cy.barsPreLoaderWait();
+            feedbackScalePage.steps.clickOnFeedbackStyleLayoutDropdown();
+            feedbackScalePage.steps.selectFeedbackStyleLayoutDropdown('Star');
+            feedbackScalePage.steps.expandOptionAccordion(4);
+            feedbackScalePage.steps.focusInTooltipInputField(4);
+            feedbackScalePage.steps.clearTooltipInputField(4);
+            feedbackScalePage.steps.selectBoldOptionFromCKEditorToolbar();
+            feedbackScalePage.steps.addInputToTooltipInputField(4, 'Keep up the good work!');
+            feedbackScalePage.steps.focusInDescriptionInputField(4);
+            feedbackScalePage.steps.clearDescriptionInputField(4);
+            feedbackScalePage.steps.selectImageOptionFromCKEditorToolbar();
+            feedbackScalePage.steps.addImageToInputField();
+            feedbackScalePage.steps.switchToPreviewTab();
+        });
+
+        it('By default five stars should be displayed in the preview tab', () => {
+            utilities.verifyElementCount(feedbackScalePage.feedbackStarButton(), 5);
+            utilities.verifyElementVisibilityState(feedbackScalePage.feedbackStarButton(), 'visible');
+        });
+
+        it('CSS of feedback stars - unselected state', { tags: 'css' }, () => {
+            utilities.verifyCSS(feedbackScalePage.feedbackStarButton().find('svg'), {
+                'fill': css.color.defaultBackground,
+                'stroke': css.color.feedbackStar,
+            });
+        });
+
+        it('Accessibility of preview tab contents', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(feedbackScalePage.previewTabQuestionWrapper());
+        });
+
+        it('When the user hovers overs a feedback star button, a tooltip with text should be displayed and on moving the focus away from the button, the tooltip should disappear', () => {
+            feedbackScalePage.steps.verifyTooltipFeedbackStarButton(1, 'Getting there');
+        });
+
+        //Failing due to https://redmine.zeuslearning.com/issues/548050
+        it('CSS of feedback star button tooltip', { tags: 'css' }, () => {
+            feedbackScalePage.feedbackStarButton()
+                .eq(1)
+                .trigger('mouseover');
+            utilities.verifyElementVisibilityState(feedbackScalePage.tooltipText(), 'visible');
+            utilities.verifyCSS(feedbackScalePage.tooltipText(), {
+                'background-color': css.color.defaultBackground,
+                'color': css.color.labels,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.regular
+            });
+            feedbackScalePage.feedbackStarButton()
+                .eq(1)
+                .trigger('mouseout')
+            utilities.verifyElementVisibilityState(feedbackScalePage.tooltipText(), 'notExist');
+
+        });
+
+        it('Accessibility of feedback star button tooltip', { tags: 'a11y' }, () => {
+            feedbackScalePage.feedbackStarButton()
+                .eq(1)
+                .trigger('mouseover');
+            utilities.verifyElementVisibilityState(feedbackScalePage.tooltipText(), 'visible');
+            cy.checkAccessibility(feedbackScalePage.tooltipText());
+            feedbackScalePage.feedbackStarButton()
+                .eq(1)
+                .trigger('mouseout')
+            utilities.verifyElementVisibilityState(feedbackScalePage.tooltipText(), 'notExist');
+        });
+
+        it('When the user has added bold text in the tooltip input field, the bold text should be displayed on the tooltip when the user hovers over the feedback star button, and on moving the focus away from the button, the tooltip should disappear', () => {
+            feedbackScalePage.steps.verifyTooltipBoldTextFeedbackStarButton(4, 'Keep up the good work!');
+        });
+
+        it('A \'More info\' accordion should be present and by default it should be in collapsed state', () => {
+            utilities.verifyInnerText(feedbackScalePage.moreInfoButton(), 'More info');
+            utilities.verifyElementVisibilityState(feedbackScalePage.moreInfoButton(), 'visible');
+            feedbackScalePage.steps.verifyMoreInfoAccordionInCollapsedState();
+        });
+
+        it('When the user expands the \'More info\' accordion, additional information about the feedback star buttons should be displayed', () => {
+            feedbackScalePage.steps.expandMoreInfoAccordion();
+            for (let index = 0; index < optionsContentForStarLayout.length - 1; index++) {
+                feedbackScalePage.steps.verifyMoreInfoAccordionStarIcons(index, optionsContentForStarLayout[index].starsCount);
+                feedbackScalePage.steps.verifyMoreInfoAccordionOptionsListLabelTooltipAndDescription(index, [optionsContentForStarLayout[index].labels, optionsContentForStarLayout[index].tooltip, optionsContentForStarLayout[index].description]);
+            }
+            feedbackScalePage.steps.verifyMoreInfoAccordionStarIcons(4, optionsContentForStarLayout[4].starsCount);
+            feedbackScalePage.steps.verifyMoreInfoOptionListLabelTooltipAndDescriptionForBoldTooltipAndImageDescription(4);
+        });
+
+        //TODO: Need to update selected state function for feedback star when https://redmine.zeuslearning.com/issues/538420 gets resolved
+        it('The user should be able to mark feedback by clicking on any feedback star button and when the user selects a feedback star button, the more info contents of the particular feedback star button should get highlighted', () => {
+            feedbackScalePage.steps.clickOnFeedbackStarButton(3);
+            feedbackScalePage.steps.verifyFeedbackStarButtonSelectedState([0, 1, 2, 3], css.color.feedbackStar);
+            feedbackScalePage.steps.verifyFeedbackStarButtonUnselectedState([4]);
+            feedbackScalePage.steps.verifyMoreInfoOptionListHighlightedState(3);
+        });
+
+        it('CSS of feedback stars - selected state', { tags: 'css' }, () => {
+            utilities.verifyCSS(feedbackScalePage.feedbackStarButton().find('svg'), {
+                'fill': css.color.feedbackStar,
+                'stroke': css.color.feedbackStar,
+            });
+        });
+
+        it('Accessibility of feedback stars - selected state', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(feedbackScalePage.previewTabQuestionWrapper());
+        });
+
+        it('When the user clicks on any other feedback star, then the selected state of feedback stars should get updated accordingly', () => {
+            feedbackScalePage.steps.clickOnFeedbackStarButton(2);
+            feedbackScalePage.steps.verifyFeedbackStarButtonSelectedState([0, 1, 2], css.color.feedbackStar);
+            feedbackScalePage.steps.verifyFeedbackStarButtonUnselectedState([3, 4]);
+            feedbackScalePage.steps.verifyMoreInfoOptionListHighlightedState(2);
+            feedbackScalePage.steps.verifyMoreInfoOptionListHighlightedStateNotExists(3);
+        });
+    });
+
+    describe('Feedback scale - Add, delete option accordions - preview tab for \'Button\' layout style', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigate to Feedback scale question type');
+            feedbackScalePage.steps.navigateToCreateQuestion('feedback scale');
+            cy.barsPreLoaderWait();
+        });
+
+        it('When the user adds a new option, a new feedback button should be displayed in the preview tab', () => {
+            feedbackScalePage.steps.addOption();
+            feedbackScalePage.steps.switchToPreviewTab();
+            utilities.verifyElementCount(feedbackScalePage.feedbackButton(), 4);
+            utilities.verifyElementVisibilityState(feedbackScalePage.feedbackButton(), 'visible');
+        });
+
+        it('CSS of the newly added feedback button', { tags: 'css' }, () => {
+            utilities.verifyCSS(feedbackScalePage.feedbackButton().eq(3), {
+                'color': css.color.text,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular,
+                'background-color': css.color.transparent,
+                'border': `1px solid ${css.color.figDefaultComponentBorder}`
+            });
+        });
+
+        it('When the user hovers over the new feedback button, a tooltip with #00007C color block should be displayed on the tooltip', () => {
+            feedbackScalePage.steps.verifyTooltipFeedbackButton(3, '');
+        });
+
+        it('When the user deletes an option accordion, then the corresponding feedback star should get removed from the preview tab', () => {
+            feedbackScalePage.steps.switchToEditTab();
+            feedbackScalePage.steps.deleteOptionAccordion(3);
+            feedbackScalePage.steps.switchToPreviewTab();
+            utilities.verifyElementCount(feedbackScalePage.feedbackButton(), 3);
+            feedbackScalePage.steps.expandMoreInfoAccordion();
+            for (let index = 0; index < 3; index++) {
+                feedbackScalePage.steps.verifyMoreInfoAccordionColorBlock(index, optionsContentForButtonLayout[index].color);
+                feedbackScalePage.steps.verifyMoreInfoAccordionOptionsListLabelTooltipAndDescription(index, [optionsContentForButtonLayout[index].labels, optionsContentForButtonLayout[index].tooltip, optionsContentForButtonLayout[index].description]);
+            }
+        });
+    });
+
+    describe('Feedback scale - Add, delete option accordions- preview tab for \'Star\' layout style', () => {
+        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('When the user adds a new option, a new feedback star should be displayed in the preview tab', () => {
+            feedbackScalePage.steps.addOption();
+            feedbackScalePage.steps.switchToPreviewTab();
+            utilities.verifyElementCount(feedbackScalePage.feedbackStarButton(), 6);
+            utilities.verifyElementVisibilityState(feedbackScalePage.feedbackStarButton(), 'visible');
+        });
+
+        it('CSS of the newly added feedback star', { tags: 'css' }, () => {
+            utilities.verifyCSS(feedbackScalePage.feedbackStarButton().eq(5).find('svg'), {
+                'fill': css.color.defaultBackground,
+                'stroke': css.color.secondaryBtn,
+            });
+        });
+
+        it('When the user hovers over the new feedback star, a blank tooltip should be displayed', () => {
+            feedbackScalePage.steps.verifyTooltipFeedbackStarButton(5, '');
+        });
+
+        //Failing due to https://redmine.zeuslearning.com/issues/544612
+        it('When the user deletes an option accordion, then the corresponding feedback star should get removed from the preview tab', () => {
+            feedbackScalePage.steps.switchToEditTab();
+            feedbackScalePage.steps.deleteOptionAccordion(5);
+            feedbackScalePage.steps.switchToPreviewTab();
+            utilities.verifyElementCount(feedbackScalePage.feedbackStarButton(), 5);
+            feedbackScalePage.steps.expandMoreInfoAccordion();
+            for (let index = 0; index < 5; index++) {
+                feedbackScalePage.steps.verifyMoreInfoAccordionStarIcons(index, optionsContentForStarLayout[index].starsCount);
+                feedbackScalePage.steps.verifyMoreInfoAccordionOptionsListLabelTooltipAndDescription(index, [optionsContentForStarLayout[index].labels, optionsContentForStarLayout[index].tooltip, optionsContentForStarLayout[index].description]);
+            }
+        });
+    });
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "itemengine-cypress-automation",
-  "version": "1.0.37",
+  "version": "1.0.39",
   "description": "",
   "main": "index.js",
   "scripts": {