itemengine-cypress-automation 1.0.165-migrationScripts-e27d6f2.0 → 1.0.166

package/cypress/e2e/ILC/FeedbackScaleNew/previewContentsForAllViews.smoke.js

@@ -0,0 +1,216 @@
+import { feedbackScalePage, itemPreviewPage, studentViewPage } from "../../../pages";
+import abortEarlySetup from "../../../support/helpers/abortEarly";
+import utilities from "../../../support/helpers/utilities";
+const previewContentViews = ['Question preview', 'Item view', 'Item preview', 'Student view', 'Grading view'];
+const views = utilities.getViews(previewContentViews);
+var itemReferenceID = "";
+const css = Cypress.env('css');
+const selectedStateFeedbackButtonColor = 'rgba(236, 216, 19, 0.1)'
+const optionsContentForTextLayout = [
+    {
+        'labels': 'Uncomfortable',
+        'color': 'rgb(255, 133, 165)',
+        'legendText': 'I am uncomfortable with the learning target.'
+    },
+    {
+        'labels': 'Need some support',
+        'color': 'rgb(236, 216, 19)',
+        'legendText': 'I am somewhat comfortable with the learning target.'
+    },
+    {
+        'labels': 'Comfortable',
+        'color': 'rgb(77, 188, 147)',
+        'legendText': 'I am comfortable with the learning target.'
+    }
+];
+
+describe('Create item page: Feedback scale - Preview tab contents in all views for "Text" feedback scale style layout', () => {
+    before(() => {
+        cy.loginAs('admin');
+    });
+
+    views.forEach((view) => {
+        describe(`Preview tab contents - ${view}`, { tags: 'smoke' }, () => {
+            abortEarlySetup();
+            before(() => {
+                switch (view) {
+                    case 'Question preview':
+                        feedbackScalePage.steps.navigateToCreateQuestion('feedback scale');
+                        cy.barsPreLoaderWait();
+                        feedbackScalePage.steps.addTextInQuestionInstructionsInputField('Reflect on your progress toward the learning target by rating your comfort level.');
+                        feedbackScalePage.steps.checkAllowStudentsToAddCommentCheckbox();
+                        feedbackScalePage.steps.expandOptionAccordion(0);
+                        feedbackScalePage.steps.addLegendText(0, optionsContentForTextLayout[0].legendText);
+                        feedbackScalePage.steps.expandOptionAccordion(1);
+                        feedbackScalePage.steps.addLegendText(1, optionsContentForTextLayout[1].legendText);
+                        feedbackScalePage.steps.expandOptionAccordion(2);
+                        feedbackScalePage.steps.addLegendText(2, optionsContentForTextLayout[2].legendText);
+                        feedbackScalePage.steps.switchToPreviewTab();
+                        break;
+                    case 'Item view':
+                        cy.visit(`/item-engine/demo/edit-item/${utilities.base64Encoding(itemReferenceID)}`);
+                        break;
+                    case 'Item preview':
+                        cy.visit(`/item-engine/demo/edit-item/${utilities.base64Encoding(itemReferenceID)}`);
+                        feedbackScalePage.steps.switchToPreviewTab();
+                        break;
+                    case 'Student view':
+                        cy.visit(`/item-engine/demo/render-item/student-view/${utilities.base64Encoding(itemReferenceID)}`);
+                        break;
+                    case 'Grading view':
+                        cy.visit(`/item-engine/demo/render-item/grading-view/${utilities.base64Encoding(itemReferenceID)}`);
+                        break;
+                    default:
+                        throw new Error('Invalid view');
+                }
+            });
+
+            after(() => {
+                if (view === 'Question preview') {
+                    feedbackScalePage.steps.clickOnSaveQuestionButton();
+                    utilities.verifyElementVisibilityState(itemPreviewPage.referenceID(), 'visible');
+                    itemReferenceID = itemPreviewPage.steps.getItemReferenceID();
+                }
+                if (view === 'Student view') {
+                    studentViewPage.steps.submitResponse();
+                    utilities.verifyElementVisibilityState(studentViewPage.buttonGoToGradingView(), 'visible');
+                }
+            });
+
+            it('Question instructions should be visible', () => {
+                utilities.verifyInnerText(feedbackScalePage.questionInstructionsText(), 'Reflect on your progress toward the learning target by rating your comfort level.');
+                utilities.verifyElementVisibilityState(feedbackScalePage.questionInstructionsText(), 'visible');
+            });
+
+            it('By default three feedback buttons - \'Uncomfortable\', \'Need some support\' and \'Comfortable\' should be displayed', () => {
+                utilities.verifyElementCount(feedbackScalePage.feedbackButton(), 3);
+                optionsContentForTextLayout.forEach((buttonContent, buttonIndex) => {
+                    feedbackScalePage.steps.verifyFeedbackButtonInPreviewTab(buttonIndex, buttonContent.labels);
+                    feedbackScalePage.steps.verifyFeedbackButtonColorBlockPreviewTab(buttonIndex, buttonContent.color);
+                });
+            });
+
+            if (view !== 'Grading view') {
+                it('CSS of feedback buttons - unselected state', { tags: 'css' }, () => {
+                    utilities.verifyCSS(feedbackScalePage.feedbackButtonLabelText(), {
+                        'color': css.color.text,
+                        'font-size': css.fontSize.default,
+                        'font-weight': css.fontWeight.regular,
+                    });
+                    utilities.verifyCSS(feedbackScalePage.feedbackButton(), {
+                        'background-color': css.color.transparent,
+                        'border': `1px solid ${css.color.figDefaultComponentBorder}`
+                    });
+                });
+
+                it('Accessibility of feedback buttons - unselected state', { tags: 'a11y' }, () => {
+                    cy.checkAccessibility(feedbackScalePage.feedbackButton().parents('[class*="question-preview-wrapper"]'));
+                });
+            }
+
+            feedbackScalePage.tests.verifyLegendAccordionDefaultState();
+
+            feedbackScalePage.tests.verifyLegendAccordionCollapsedAndExpandedState();
+
+            it('The legend text accordion should display the color block, feedback button text and the associated legend text', () => {
+                optionsContentForTextLayout.forEach((buttonContent, buttonIndex) => {
+                    const { color, labels, legendText } = buttonContent;
+                    feedbackScalePage.steps.verifyColorBlockFeedbackButtonLabelLegendTextInLegendAccordion(buttonIndex, {
+                        colorBlock: color,
+                        buttonText: labels,
+                        legendText: legendText
+                    });
+                });
+            });
+
+            if (view !== 'Grading view') {
+                it('The user should be able to mark feedback by clicking on any feedback button', () => {
+                    feedbackScalePage.steps.clickOnFeedbackButton(0);
+                    feedbackScalePage.steps.verifyFeedbackButtonSelectedState(0);
+                });
+
+                it('The user should be able to update the feedback by selecting other button, previously selected button should get unselected', () => {
+                    feedbackScalePage.steps.clickOnFeedbackButton(1);
+                    feedbackScalePage.steps.verifyFeedbackButtonSelectedState(1);
+                    feedbackScalePage.steps.verifyFeedbackButtonUnselectedState(0);
+                });
+
+                it('A comment label and empty input field should be displayed', () => {
+                    utilities.verifyInnerText(feedbackScalePage.commentLabel(), 'Comment');
+                    feedbackScalePage.steps.verifyTextInCommentInputField('');
+                });
+
+                it('The user should be able to add comment in the comments input field', () => {
+                    feedbackScalePage.steps.enterTextInCommentInputField('Excellent worksheet');
+                    feedbackScalePage.steps.verifyTextInCommentInputField('Excellent worksheet');
+                });
+            } else {
+                it('The submitted feedback button should be in selected state', () => {
+                    utilities.verifyElementCount(feedbackScalePage.feedbackButton(), 3);
+                    feedbackScalePage.steps.verifyFeedbackButtonSelectedState(1);
+                });
+
+                it('The submitted feedback should not be editable', () => {
+                    feedbackScalePage.steps.verifyFeedbackButtonDisabledState(0);
+                    feedbackScalePage.steps.verifyFeedbackButtonDisabledState(2);
+                });
+
+                it('The added comment should be displayed in the input field', () => {
+                    feedbackScalePage.steps.verifyTextInCommentInputField('Excellent worksheet');
+                });
+
+                it('The submitted comment should not be editable', () => {
+                    utilities.verifyElementDisabled(feedbackScalePage.commentInputField());
+                });
+            }
+
+            if (view === 'Question preview' || view === 'Item preview') {
+                it('On switching to "Grading view", the marked feedback button should be in selected state', () => {
+                    feedbackScalePage.steps.switchToGradingView();
+                    feedbackScalePage.steps.verifyFeedbackButtonSelectedState(1);
+                });
+            }
+
+            it('CSS of feedback buttons - selected state', { tags: 'css' }, () => {
+                utilities.verifyCSS(utilities.getNthElement(feedbackScalePage.feedbackButtonLabelText(), 1), {
+                    'color': css.color.text,
+                    'font-size': css.fontSize.default,
+                    'font-weight': css.fontWeight.bold,
+                });
+                utilities.verifyCSS(utilities.getNthElement(feedbackScalePage.feedbackButton(), 1), {
+                    'background-color': selectedStateFeedbackButtonColor,
+                    'border': `2px solid ${css.color.activeComponentBorder}`
+                });
+                utilities.verifyCSS(feedbackScalePage.legendAccordion().find('.customize_info_label'), {
+                    'color': css.color.activeButtons,
+                    'font-size': css.fontSize.normal,
+                    'font-weight': css.fontWeight.regular
+                });
+                utilities.verifyCSS(feedbackScalePage.legendTextFeedbackButtonLabel(), {
+                    'color': css.color.text,
+                    'font-size': css.fontSize.small,
+                    'font-weight': css.fontWeight.semibold
+                });
+                utilities.verifyCSS(feedbackScalePage.legendTextPreviewTab(), {
+                    'color': css.color.text,
+                    'font-size': css.fontSize.small,
+                    'font-weight': css.fontWeight.regular
+                });
+                utilities.verifyCSS(feedbackScalePage.commentLabel(), {
+                    'color': css.color.labels,
+                    'font-size': css.fontSize.default,
+                    'font-weight': css.fontWeight.semibold,
+                });
+                utilities.verifyCSS(feedbackScalePage.commentInputField(), {
+                    'color': css.color.text,
+                    'font-size': css.fontSize.default,
+                    'font-weight': css.fontWeight.regular,
+                });
+            });
+
+            it('Accessibility of feedback buttons - selected state', { tags: 'a11y' }, () => {
+                cy.checkAccessibility(feedbackScalePage.feedbackButton().parents('[class*="question-preview-wrapper"]'));
+            });
+        });
+    });
+});

package/cypress/e2e/ILC/FeedbackScaleNew/starsHeartsFeedbackScaleStyle.js

@@ -0,0 +1,336 @@
+import { feedbackScalePage } from "../../../pages";
+import { colorPopupComponent } from "../../../pages/components";
+import abortEarlySetup from "../../../support/helpers/abortEarly";
+import utilities from "../../../support/helpers/utilities";
+const starsDefaultColor = "rgb(226, 121, 0)";
+const heartsDefaultColor = "rgb(255, 56, 0)";
+const css = Cypress.env('css');
+//Note: Only covering differentiating cases for Heart Feedback scale UI
+describe('Create item page: Feedback scale - Stars/Hearts feedback scale style - Edit and preview tab contents and functionality ', () => {
+    before(() => {
+        cy.loginAs('admin');
+    });
+
+    describe('Stars/Hearts feedback scale style - Edit tab contents', () => {
+        abortEarlySetup();
+        before(() => {
+            feedbackScalePage.steps.navigateToCreateQuestion('feedback scale');
+            cy.barsPreLoaderWait();
+        });
+
+        it('The user should be able to select "Stars/Hearts" feedback scale style from the feedback scale style dropdown', () => {
+            feedbackScalePage.steps.expandFeedbackScaleStyleDropdown();
+            feedbackScalePage.steps.selectOptionFromFeedbackScaleStyleDropdown('Stars / Hearts');
+        });
+
+        it('When the user selects "Stars/Hearts" feedback scale style from the feedback scale style dropdown, "Feedback scale UI" label, "Stars" and "Hearts" button should be displayed. "Stars" should be selected by default', () => {
+            utilities.verifyInnerText(feedbackScalePage.feedbackScaleUILabel(), 'Feedback scale UI');
+            utilities.verifyElementVisibilityState(feedbackScalePage.starsFeedbackScaleUIButton(), 'visible');
+            utilities.verifyElementVisibilityState(feedbackScalePage.heartsFeedbackScaleUIButton(), 'visible');
+            feedbackScalePage.steps.verifyStarsFeedbackScaleUIButtonSelectedState();
+        });
+
+        it('By default in the options stepper count input field, "5" should be displayed', () => {
+            feedbackScalePage.steps.verifyCountInOptionsStepperInputField(5);
+        });
+
+        it('5 option accordions should be displayed with label "Option #" (# being a number from 1 to 5), Points and "Delete option" icon button, by default all option accordions should be in collapsed state', () => {
+            for (let index = 0; index < 5; index++) {
+                feedbackScalePage.steps.verifyOptionsAccordionProperties(index, { optionLabel: `Option ${index + 1}`, Points: `${index + 1}` });
+                feedbackScalePage.steps.verifyOptionAccordionCollapsedState(index);
+            }
+        });
+
+        it('The user should be able to expand any option accordion, on expanding the option accordion, a "Legend text" label and empty input field with placeholder text, "Enter legend text" should be displayed', () => {
+            feedbackScalePage.steps.expandOptionAccordion(0);
+            utilities.verifyInnerText(utilities.getNthElement(feedbackScalePage.legendTextLabel(), 0), 'Legend text');
+            feedbackScalePage.steps.verifyLegendTextInputFieldPlaceholder(0);
+        });
+
+        it('The user should be able to enter text in the legend text input field, the placeholder text should disappear on entering the text', () => {
+            feedbackScalePage.steps.addLegendText(0, 'I am uncomfortable with the learning target.');
+            feedbackScalePage.steps.verifyLegendTextInputFieldPlaceholderNotExists(0);
+        });
+
+        it('When the user removes the added text from the legend input field, the placeholder text should appear again', () => {
+            feedbackScalePage.steps.clearLegendTextInputField(0);
+            feedbackScalePage.steps.verifyLegendTextInputFieldPlaceholder(0);
+        });
+
+        it('On expanding any other option accordion, the previously expanded accordion should continue to stay in expanded state', () => {
+            feedbackScalePage.steps.expandOptionAccordion(1);
+            feedbackScalePage.steps.verifyOptionAccordionExpandedState(0);
+            feedbackScalePage.steps.verifyOptionAccordionExpandedState(1);
+        });
+
+        it('The user should be able to switch to the "Hearts" feedback scale style by clicking on the hearts toggle button. For "Hearts" feedback scale style, in the color section, the color block should be of "rgb(255, 56, 0)"', () => {
+            feedbackScalePage.steps.selectFeedbackScaleUIButton('Hearts');
+            feedbackScalePage.steps.verifyColorPickerBlockColor(0, heartsDefaultColor);
+        });
+    });
+
+    describe('Stars feedback scale style - Preview tab contents and functionality', () => {
+        const legendTexts = ['Poor', 'Okay', 'Can do better', 'Good', 'Excellent'];
+        abortEarlySetup();
+        before(() => {
+            feedbackScalePage.steps.navigateToCreateQuestion('feedback scale');
+            cy.barsPreLoaderWait();
+            feedbackScalePage.steps.expandFeedbackScaleStyleDropdown();
+            feedbackScalePage.steps.selectOptionFromFeedbackScaleStyleDropdown('Stars / Hearts');
+            feedbackScalePage.steps.switchToPreviewTab();
+        });
+
+        it('By default 5 star buttons should be displayed in the preview tab', () => {
+            utilities.verifyElementCount(feedbackScalePage.feedbackStarButton(), 5);
+            utilities.verifyElementVisibilityState(feedbackScalePage.feedbackStarButton(), 'visible')
+        });
+
+        feedbackScalePage.tests.verifyLegendAccordionDefaultState();
+
+        it('The legend text accordion should display the star icons, for each incrementing star button, the highlighted star icons in the legend text accordion should increase, legend text should not be displayed', () => {
+            for (let index = 0; index < 5; index++) {
+                feedbackScalePage.steps.verifyHighlightedStarsInLegendTextListItem(index);
+            };
+            utilities.verifyElementVisibilityState(feedbackScalePage.legendTextPreviewTab(), 'notExist');
+        });
+
+        it('When the user switches to edit tab and adds legend text, then the added legend text should be displayed besides the respective star buttons in the legend text accordion', () => {
+            feedbackScalePage.steps.switchToEditTab();
+            legendTexts.forEach((legendText, index) => {
+                feedbackScalePage.steps.expandOptionAccordion(index);
+                feedbackScalePage.steps.addLegendText(index, legendText);
+            });
+            feedbackScalePage.steps.switchToPreviewTab();
+            legendTexts.forEach((legendText, buttonIndex) => {
+                feedbackScalePage.steps.verifyLegendTextInLegendAccordion(buttonIndex, legendText);
+            });
+        });
+
+        it('CSS of star buttons - unselected state', { tags: 'css' }, () => {
+            utilities.verifyCSS(feedbackScalePage.feedbackStarButton().find('g g path').eq(1), {
+                'fill': css.color.feedbackStar,
+            });
+        });
+
+        it('Accessibility of star buttons - unselected state', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(feedbackScalePage.feedbackStarButton().parents('[class*="question-preview-wrapper"]'));
+        });
+
+        it('The user should be able to mark feedback by clicking on any star button', () => {
+            feedbackScalePage.steps.clickOnFeedbackStarButton(2);
+            feedbackScalePage.steps.verifyHighlightedStarsInFeedbackScale(2, css.color.feedbackStar);
+        });
+
+        it('CSS of star buttons - selected state', { tags: 'css' }, () => {
+            utilities.verifyCSS(feedbackScalePage.feedbackStarButton().find('g g g').eq(0), {
+                'fill': css.color.feedbackStar,
+            });
+            utilities.verifyCSS(feedbackScalePage.legendAccordion().find('.customize_info_label'), {
+                'color': css.color.activeButtons,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.regular
+            });
+            utilities.verifyCSS(feedbackScalePage.legendTextPreviewTab(), {
+                'color': css.color.text,
+                'font-size': css.fontSize.small,
+                'font-weight': css.fontWeight.regular
+            });
+        });
+
+        it('Accessibility of star buttons - selected state', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(feedbackScalePage.feedbackStarButton().parents('[class*="question-preview-wrapper"]'));
+        });
+    });
+
+    describe('Stars/Hearts feedback scale style - Add and delete options : Edit tab functionality', () => {
+        abortEarlySetup();
+        before(() => {
+            feedbackScalePage.steps.navigateToCreateQuestion('feedback scale');
+            cy.barsPreLoaderWait();
+            feedbackScalePage.steps.expandFeedbackScaleStyleDropdown();
+            feedbackScalePage.steps.selectOptionFromFeedbackScaleStyleDropdown('Stars / Hearts');
+        });
+
+        it('The user should be able to add a new option by increasing the stepper count in the options input field', () => {
+            feedbackScalePage.steps.increaseOptionsInputStepperCount(1);
+            feedbackScalePage.steps.verifyOptionsAccordionCount(6);
+        });
+
+        it('The newly added option should be displayed with label "Option 6", Points and "Delete option" icon button, by default the accordion should be in collapsed state', () => {
+            feedbackScalePage.steps.verifyOptionsAccordionProperties(5, { optionLabel: 'Option 6', Points: '6' });
+            feedbackScalePage.steps.verifyOptionAccordionCollapsedState(5);
+        });
+
+        it('The user should also be able to add a new option using the "+Add option" button, the count in the options stepper input field should also update accordingly', () => {
+            feedbackScalePage.steps.addOption();
+            feedbackScalePage.steps.verifyCountInOptionsStepperInputField(7);
+            feedbackScalePage.steps.verifyOptionsAccordionCount(7);
+            feedbackScalePage.steps.verifyOptionsAccordionProperties(6, { optionLabel: 'Option 7', Points: '7' });
+        });
+
+        it('When the user deletes an option accordion, then the remaining options should get updated accordingly, the count in the options stepper input field should also update accordingly', () => {
+            feedbackScalePage.steps.deleteOptionAccordion(5);
+            for (let index = 0; index < 6; index++) {
+                feedbackScalePage.steps.verifyOptionsAccordionProperties(index, { optionLabel: `Option ${index + 1}`, Points: `${index + 1}` });
+            };
+            feedbackScalePage.steps.verifyCountInOptionsStepperInputField(6);
+        });
+
+        it('When the user decreases the options stepper count, the last option should get removed and the remaining options should get updated accordingly', () => {
+            feedbackScalePage.steps.decreaseOptionsInputStepperCount(1);
+            feedbackScalePage.steps.verifyCountInOptionsStepperInputField(5);
+            for (let index = 0; index < 5; index++) {
+                feedbackScalePage.steps.verifyOptionsAccordionProperties(index, { optionLabel: `Option ${index + 1}`, Points: `${index + 1}` });
+            };
+            feedbackScalePage.steps.verifyCountInOptionsStepperInputField(5);
+        });
+    });
+
+    describe('Stars/Hearts feedback scale style - Add and delete options : Preview tab functionality', () => {
+        abortEarlySetup();
+        before(() => {
+            feedbackScalePage.steps.navigateToCreateQuestion('feedback scale');
+            cy.barsPreLoaderWait();
+            feedbackScalePage.steps.expandFeedbackScaleStyleDropdown();
+            feedbackScalePage.steps.selectOptionFromFeedbackScaleStyleDropdown('Stars / Hearts');
+        });
+
+        it('When the increases the stepper count in the options input field, the newly added feedback buttons should be displayed in the preview tab', () => {
+            feedbackScalePage.steps.increaseOptionsInputStepperCount(1);
+            feedbackScalePage.steps.switchToPreviewTab();
+            utilities.verifyElementCount(feedbackScalePage.feedbackStarButton(), 6);
+            utilities.verifyElementCount(feedbackScalePage.legendTextOptionsList(), 6);
+        });
+
+        it('When the user adds a new option using the "+Add option" button, the newly added feedback buttons should be displayed in the preview tab', () => {
+            feedbackScalePage.steps.switchToEditTab();
+            feedbackScalePage.steps.addOption();
+            feedbackScalePage.steps.switchToPreviewTab();
+            utilities.verifyElementCount(feedbackScalePage.feedbackStarButton(), 7);
+            utilities.verifyElementCount(feedbackScalePage.legendTextOptionsList(), 7);
+        });
+
+        it('When the user deletes an option accordion, then the remaining feedback buttons should get updated accordingly in the preview tab', () => {
+            feedbackScalePage.steps.switchToEditTab();
+            feedbackScalePage.steps.deleteOptionAccordion(5);
+            feedbackScalePage.steps.switchToPreviewTab();
+            utilities.verifyElementCount(feedbackScalePage.feedbackStarButton(), 6);
+            utilities.verifyElementCount(feedbackScalePage.legendTextOptionsList(), 6);
+        });
+
+        it('When the user decreases the options stepper count, then the last feedback button should get removed and the remaining options should get updated accordingly', () => {
+            feedbackScalePage.steps.switchToEditTab();
+            feedbackScalePage.steps.decreaseOptionsInputStepperCount(1);
+            feedbackScalePage.steps.switchToPreviewTab();
+            utilities.verifyElementCount(feedbackScalePage.feedbackStarButton(), 5);
+            utilities.verifyElementCount(feedbackScalePage.legendTextOptionsList(), 5);
+        });
+    });
+
+    describe('Stars feedback scale style - Colors section contents', () => {
+        const modifiedColor = 'rgba(255, 0, 0, 0.7)'
+        abortEarlySetup();
+        before(() => {
+            feedbackScalePage.steps.navigateToCreateQuestion('feedback scale');
+            cy.barsPreLoaderWait();
+            feedbackScalePage.steps.expandFeedbackScaleStyleDropdown();
+            feedbackScalePage.steps.selectOptionFromFeedbackScaleStyleDropdown('Stars / Hearts');
+        });
+
+        it('For "Stars" feedback scale style, in the color section, a color block with "rgb(230, 122, 0)" color should be displayed. An edit icon and "Edit color" label should be displayed besides the color block"', () => {
+            feedbackScalePage.steps.verifyColorPickerBlockColor(0, starsDefaultColor);
+            utilities.verifyInnerText(feedbackScalePage.editColorButton(), 'Edit color');
+            utilities.verifyElementVisibilityState(feedbackScalePage.editColorButton(), 'visible');
+        });
+
+        it('When the user clicks on the "Edit color" button, a "Select color" popup should be displayed and the default selected color block should be in the selected state in the color popup', () => {
+            feedbackScalePage.steps.editColor(0);
+            colorPopupComponent.steps.verifySaturationPaletteColor('rgb(230, 122, 0)');
+            colorPopupComponent.steps.verifyHuePaletteColor('rgb(255, 136, 0)');
+            colorPopupComponent.steps.verifyHexValue('#E27900');
+            colorPopupComponent.steps.verifyOpacityInputFieldValue('100');
+            colorPopupComponent.steps.verifyOpacitySliderValue('100');
+            colorPopupComponent.steps.verifySelectedColorBlock(starsDefaultColor);
+            colorPopupComponent.steps.verifyRecommendedColorBlockSelectedState(10);
+        });
+
+        it('When the user modifies the selected color, the updated color should be displayed in the color block of the "Colors" section', () => {
+            colorPopupComponent.steps.addInputToHexInputField('#ff0000');
+            colorPopupComponent.steps.addInputToOpacityInputField('70');
+            colorPopupComponent.steps.clickOnOkButton();
+            feedbackScalePage.steps.verifyColorPickerBlockColor(0, modifiedColor);
+        });
+    });
+
+    describe('Stars feedback scale style - Colors : Preview tab functionality', () => {
+        const modifiedColor = 'rgba(255, 0, 0, 0.7)'
+        abortEarlySetup();
+        before(() => {
+            feedbackScalePage.steps.navigateToCreateQuestion('feedback scale');
+            cy.barsPreLoaderWait();
+            feedbackScalePage.steps.expandFeedbackScaleStyleDropdown();
+            feedbackScalePage.steps.selectOptionFromFeedbackScaleStyleDropdown('Stars / Hearts');
+        });
+
+        it('When the user modifies the selected color for number buttons, then on marking the feedback in the preview tab, the feedback button should get highlighted with the modified color', () => {
+            feedbackScalePage.steps.editColor(0);
+            colorPopupComponent.steps.addInputToHexInputField('#ff0000');
+            colorPopupComponent.steps.addInputToOpacityInputField('70');
+            colorPopupComponent.steps.clickOnOkButton();
+            feedbackScalePage.steps.switchToPreviewTab();
+            feedbackScalePage.steps.clickOnFeedbackStarButton(2);
+            feedbackScalePage.steps.verifyHighlightedStarsInFeedbackScale(2, modifiedColor);
+        });
+    });
+
+    describe('Hearts feedback scale style - Preview tab contents and functionality', () => {
+        abortEarlySetup();
+        before(() => {
+            feedbackScalePage.steps.navigateToCreateQuestion('feedback scale');
+            cy.barsPreLoaderWait();
+            feedbackScalePage.steps.expandFeedbackScaleStyleDropdown();
+            feedbackScalePage.steps.selectOptionFromFeedbackScaleStyleDropdown('Stars / Hearts');
+            feedbackScalePage.steps.selectFeedbackScaleUIButton('Hearts');
+            feedbackScalePage.steps.switchToPreviewTab();
+        });
+
+        it('By default 5 heart buttons should be displayed in the preview tab', () => {
+            utilities.verifyElementCount(feedbackScalePage.feedbackHeartButton(), 5);
+            utilities.verifyElementVisibilityState(feedbackScalePage.feedbackHeartButton(), 'visible')
+        });
+
+        feedbackScalePage.tests.verifyLegendAccordionDefaultState();
+
+        it('The legend text accordion should display the heart icons, for each incrementing heart button, the highlighted heart icons in the legend text accordion should increase, legend text should not be displayed', () => {
+            for (let index = 0; index < 5; index++) {
+                feedbackScalePage.steps.verifyHighlightedHeartsInLegendTextListItem(index);
+            };
+            utilities.verifyElementVisibilityState(feedbackScalePage.legendTextPreviewTab(), 'notExist');
+        });
+
+        it('CSS of heart buttons - unselected state', { tags: 'css' }, () => {
+            utilities.verifyCSS(feedbackScalePage.feedbackHeartButton().find('g path').eq(1), {
+                'fill': css.color.feedbackHeart,
+            });
+        });
+
+        it('Accessibility of heart buttons - unselected state', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(feedbackScalePage.feedbackHeartButton().parents('[class*="question-preview-wrapper"]'));
+        });
+
+        it('The user should be able to mark feedback by clicking on any heart button', () => {
+            feedbackScalePage.steps.clickOnFeedbackHeartButton(2);
+            feedbackScalePage.steps.verifyHighlightedHeartsInFeedbackScale(2, css.color.feedbackHeart);
+        });
+
+        it('CSS of heart buttons - selected state', { tags: 'css' }, () => {
+            utilities.verifyCSS(feedbackScalePage.feedbackHeartButton().find('g').eq(0), {
+                'fill': css.color.feedbackHeart,
+            });
+        });
+
+        it('Accessibility of heart buttons - selected state', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(feedbackScalePage.feedbackHeartButton().parents('[class*="question-preview-wrapper"]'));
+        });
+    });
+});