itemengine-cypress-automation 1.0.173 → 1.0.174

package/cypress/pages/readingRulerPage.js

@@ -423,7 +423,7 @@ const steps = {
 
     verifyReadingRulerExistInPreviewTab: () => {
         readingRulerPage.readingRuler()
-            .should('be.visible');
+            .should('exist');
     },
 
     verifyReadingRulerNotExistInPreviewTab: () => {

package/cypress/pages/textEntryMathPage.js

@@ -753,6 +753,14 @@ const steps = {
             .click();
     },
 
+    /**
+    * Focus out of the answer input fields of the preview tab
+    */
+    focusOutOfResponseAnswerInputFieldSpecifyCorrectAnswerSection: () => {
+        cy.get('body')
+            .click();
+    },
+
     /**
      * This function verifies the correct/incorrect icon does not exist
      * @param {number} index of the response field
@@ -886,6 +894,7 @@ const tests = {
             textEntryMathPage.steps.focusInResponseAnswerInputFieldSpecifyCorrectAnswerSection(0);
             equationEditorFlyout.steps.focusInPreviewInputField();
             equationEditorFlyout.steps.clickOnEquationEditorCancelButton();
+            textEntryMathPage.steps.focusOutOfResponseAnswerInputFieldSpecifyCorrectAnswerSection(0);
             utilities.verifyElementVisibilityState(commonComponents.errorMessage(), 'visible');
             utilities.verifyInnerText(commonComponents.errorMessage(), 'Error: Answer is required.');
         });

package/cypress/pages/textEntryMathWithImagePage.js

@@ -33,38 +33,38 @@ const steps = {
     verifyResponsePointerStyleInPreviewTab: (style, responseIndex) => {
         const getPosition = (option) => {
             switch (option) {
-                case 'Bottom':
+                case 'bottom':
                     return { bottom: '50px', left: '-60px' };
-                case 'Bottom right':
+                case 'bottom right':
                     return { top: '-48px', right: '45px' };
-                case 'Right':
+                case 'right':
                     return { top: '-24px', right: '53px' };
-                case 'Top right':
+                case 'top right':
                     return { top: '13px', right: '45px' };
-                case 'Top':
+                case 'top':
                     return { top: '28px', left: '-60px' };
-                case 'Top left':
+                case 'top left':
                     return { top: '12px', left: '23px' };
-                case 'Left':
+                case 'left':
                     return { top: '-19px', left: '28px' };
-                case 'Bottom left':
+                case 'bottom left':
                     return { top: '-44px', left: '18px' };
             }
         }
         const expectedPosition = getPosition(style);
-        if (style == 'Bottom') {
+        if (style == 'bottom') {
             textEntryMathWithImagePage.responseFieldWrapperPreviewTab()
                 .eq(responseIndex)
                 .should('have.css', 'bottom', expectedPosition.bottom)
                 .and('have.css', 'left', expectedPosition.left);
         }
-        else if (style == 'Bottom right' || style == 'Right' || style == 'Top right') {
+        else if (style == 'bottom right' || style == 'right' || style == 'top right') {
             textEntryMathWithImagePage.responseFieldWrapperPreviewTab()
                 .eq(responseIndex)
                 .should('have.css', 'top', expectedPosition.top)
                 .and('have.css', 'right', expectedPosition.right);
         }
-        else if (style == 'None') {
+        else if (style == 'none') {
             textEntryMathWithImagePage.responseFieldPreviewTab()
                 .eq(responseIndex)
                 .should('not.have.css', 'bottom')

package/cypress/pages/textSelectionPage.js

@@ -1,8 +1,7 @@
 import constants from "../fixtures/constants";
 import utilities from "../support/helpers/utilities";
-import { createQuestionBasePage, autoScoredScoringPreviewTab, scoringSectionBaseEditTab, questionInputFieldComponent, questionInstructionsComponent, autoScoredStudentViewSettings, correctIncorrectAnswerLabelComponent, autoScoredSpecifyCorrectAnswerSection, autoScoredScoringSectionMultiResponseType } from "./components";
+import { createQuestionBasePage, autoScoredScoringPreviewTab, scoringSectionBaseEditTab, questionInputFieldComponent, questionInstructionsComponent, autoScoredStudentViewSettings, correctIncorrectAnswerLabelComponent, autoScoredSpecifyCorrectAnswerSection, autoScoredScoringSectionMultiResponseType, setPointsPopupBase, commonComponents } from "./components";
 import { dialogBoxBase } from "./dialogBoxBase";
-import { setPointsPopupBase } from "./components/setPointsPopupBase";
 const css = Cypress.env('css');
 const colorLibrary = css.textSelectionColorLibrary;
 
@@ -11,8 +10,10 @@ const paragraphTextArray = ['All animals have a unique role to play in maintaini
 const selectors = {
     ...questionInstructionsComponent,
     ...autoScoredScoringSectionMultiResponseType,
+    ...setPointsPopupBase,
+    ...commonComponents,
     questionInputField: () => cy.get('[class*="Highlightstyles__QuestionComponentWrapper"] [title="Question"]'),
-    highlightOptionsTextFieldWrapper: () => cy.get('[class*="Highlightstyles__HighLightWrapper"]'),
+    specifyPossibleOptionsTextFieldWrapper: () => cy.get('[class*="Highlightstyles__HighLightWrapper"]'),
     textSelectionMode: (ariaLabel = null) => {
         if (ariaLabel) {
             return cy.get(`.text-selection-mode [type="button"][aria-label*="${ariaLabel}"]`)
@@ -20,11 +21,12 @@ const selectors = {
             return cy.get('.text-selection-mode [type="button"]')
         }
     },
-    highlightOptionsSpans: () => cy.get('[class*="Highlightstyles__HighLightWrapper"] span'),
+    specifyPossibleOptionsTextSpans: () => cy.get('[class*="Highlightstyles__HighLightWrapper"] span'),
 
     //Specify correct answer section
+    specifyCorrectAnswerTextSpans: () => cy.get('[class*="Highlightstyles__Wrapper"] span'),
     optionSpecifyCorrectAnswer: () => cy.get('[class*="Highlightstyles__Wrapper"] .highlighted'),
-    setPointsButton: () => cy.get('[class*="Highlightstyles__SetPointsPopupWrapper"] button'),
+    setPointsButton: () => cy.get('[class*="SetPointsPopupWrapper"] button'),
 
     //Preview tab
     questionTextPreviewTab: () => cy.get('[class*="Highlightstyles__HighlightPreviewWrapper"] [class*="QuestionTextstyle__QuestionTextWrapper"] p'),
@@ -45,6 +47,9 @@ const steps = {
     ...correctIncorrectAnswerLabelComponent.steps,
     ...autoScoredSpecifyCorrectAnswerSection.steps,
     ...autoScoredScoringSectionMultiResponseType.steps,
+    ...setPointsPopupBase.steps,
+    ...commonComponents.steps,
+    ...dialogBoxBase.steps,
     addInputToQuestionInputField: (text) => {
         textSelectionPage.questionInputField()
             .type(text);
@@ -72,8 +77,8 @@ const steps = {
         });
     },
 
-    verifyErroredStateOfHighlightOptionsSection: () => {
-        utilities.verifyCSS(textSelectionPage.highlightOptionsTextFieldWrapper(), {
+    verifyErroredStateOfSpecifyPossibleOptionsSection: () => {
+        utilities.verifyCSS(textSelectionPage.specifyPossibleOptionsTextFieldWrapper(), {
             'border-color': css.color.errorFieldBorder,
             'background-color': css.color.errorFieldBg
         });
@@ -107,36 +112,36 @@ const steps = {
             .should('have.text', '​​​​​​​This is Bold text input.');
     },
 
-    verifyImageAndAltTextInHighlightOptionsSection: () => {
-        textSelectionPage.highlightOptionsTextFieldWrapper()
+    verifyImageAndAltTextInSpecifyPossibleOptionsSection: () => {
+        textSelectionPage.specifyPossibleOptionsTextFieldWrapper()
             .find('img')
             .should('have.attr', 'src', constants.foxImageLink)
             .and('have.attr', 'alt', constants.foxImageAltText);
     },
 
-    verifyEquationInHighlightOptionsSection: () => {
-        textSelectionPage.highlightOptionsTextFieldWrapper()
+    verifyEquationInSpecifyPossibleOptionsSection: () => {
+        textSelectionPage.specifyPossibleOptionsTextFieldWrapper()
             .find('span[role="math"]')
             .should('have.attr', 'aria-label', constants.CKEditorInputFieldEnteredEquationAriaLabel)
             .contains(constants.CKEditorInputFieldEnteredEquationText);
     },
 
-    verifyLinkInHighlightOptionsSection: () => {
-        textSelectionPage.highlightOptionsTextFieldWrapper()
+    verifyLinkInSpecifyPossibleOptionsSection: () => {
+        textSelectionPage.specifyPossibleOptionsTextFieldWrapper()
             .find('a')
             .should('have.text', 'lorem')
             .and('have.attr', 'href', `${Cypress.config().baseUrl}`);
     },
 
-    verifyBoldTextInHighlightOptionsSection: () => {
-        textSelectionPage.highlightOptionsTextFieldWrapper()
+    verifyBoldTextInSpecifyPossibleOptionsSection: () => {
+        textSelectionPage.specifyPossibleOptionsTextFieldWrapper()
             .find('strong')
             .should('exist')
             .should('have.text', 'This is Bold text input.lorem');
     },
 
-    verifyHighlightOptionsFieldErrorMessage: () => {
-        textSelectionPage.highlightOptionsTextFieldWrapper()
+    verifySpecifyPossibleOptionsFieldErrorMessage: () => {
+        textSelectionPage.specifyPossibleOptionsTextFieldWrapper()
             .next()
             .should('have.text', 'Error: Minimum one highlight option is required.');
     },
@@ -151,11 +156,11 @@ const steps = {
     },
 
     /**
-     * @param {string} optionText Text of the option in highlight options section
-     * @description Click on option in highlight options section
+     * @param {string} optionText Text of the option in specify possible options section
+     * @description Click on option in specify possible options section
      */
-    clickOnOptionInHighlightOptionsSection: (optionText) => {
-        textSelectionPage.highlightOptionsSpans()
+    clickOnOptionInSpecifyPossibleOptionsSection: (optionText) => {
+        textSelectionPage.specifyPossibleOptionsTextSpans()
             .contains(optionText)
             .click();
     },
@@ -217,22 +222,22 @@ const steps = {
     },
 
     /**
-    * @param {string} optionText Text of the option in highlight options section
-    * @description Verify that option is in selected state in highlight options section
+    * @param {string} optionText Text of the option in specify possible options section
+    * @description Verify that option is in selected state in specify possible options section
     */
-    verifyOptionIsSelectedInHighlightOptionsSection: (optionText) => {
-        textSelectionPage.highlightOptionsSpans()
+    verifyOptionIsSelectedInSpecifyPossibleOptionsSection: (optionText) => {
+        textSelectionPage.specifyPossibleOptionsTextSpans()
             .contains(optionText)
             .should('have.class', 'highlighted')
             .and('have.attr', 'aria-checked', 'true');
     },
 
     /**
-     * @param {string} optionText Text of the option in highlight options section
-     * @description Verify that option does not exist in highlight options section
+     * @param {string} optionText Text of the option in specify possible options section
+     * @description Verify that option does not exist in specify possible options section
      */
-    verifyOptionDoesNotExistInHighlightOptionsSection: (optionText) => {
-        utilities.verifyElementVisibilityState(textSelectionPage.highlightOptionsSpans().contains(optionText), 'notExist');
+    verifyOptionDoesNotExistInSpecifyPossibleOptionsSection: (optionText) => {
+        utilities.verifyElementVisibilityState(textSelectionPage.specifyPossibleOptionsTextSpans().contains(optionText), 'notExist');
     },
 
     verifyCorrectAnswerSectionNotExists: () => {
@@ -240,12 +245,12 @@ const steps = {
     },
 
     /**
-    * @param {string} optionText Text of the option in highlight options section
-    * @description Verify hover state of the deselected option in highlight options section
+    * @param {string} optionText Text of the option in specify possible options section
+    * @description Verify hover state of the deselected option in specify possible options section
     */
-    verifyHoverStateOfDeselectedOptionInHighlightOptionsSection: (optionText) => {
-        textSelectionPage.steps.hoverOnDeselectedOptionInHighlightOptionsSection(optionText);
-        utilities.verifyCSS(textSelectionPage.highlightOptionsSpans()
+    verifyHoverStateOfDeselectedOptionInSpecifyPossibleOptionsSection: (optionText) => {
+        textSelectionPage.steps.hoverOnDeselectedOptionInSpecifyPossibleOptionsSection(optionText);
+        utilities.verifyCSS(textSelectionPage.specifyPossibleOptionsTextSpans()
             .contains(optionText), {
             'color': css.color.text,
             'font-size': css.fontSize.default,
@@ -256,24 +261,24 @@ const steps = {
     },
 
     /**
-    * @param {string} optionText Text of the option in highlight options section
-    * @description Hover on deselected option in highlight options section
+    * @param {string} optionText Text of the option in specify possible options section
+    * @description Hover on deselected option in specify possible options section
     */
-    hoverOnDeselectedOptionInHighlightOptionsSection: (optionText) => {
-        textSelectionPage.highlightOptionsSpans()
+    hoverOnDeselectedOptionInSpecifyPossibleOptionsSection: (optionText) => {
+        textSelectionPage.specifyPossibleOptionsTextSpans()
             .contains(optionText)
             .realHover();
     },
 
     /**
-     * @param {string[]} optionArray Array of text of options in highlight options section
-     * @description Verify the options displayed in highlight options section
+     * @param {string[]} optionArray Array of text of options in specify possible options section
+     * @description Verify the options displayed in specify possible options section
      */
-    verifyOptionsInHighlightOptionsSection: (optionArray) => {
+    verifyOptionsInSpecifyPossibleOptionsSection: (optionArray) => {
         optionArray.forEach((optionText, optionIndex) => {
-            utilities.verifyInnerText(textSelectionPage.highlightOptionsSpans().eq(optionIndex), optionText)
+            utilities.verifyInnerText(textSelectionPage.specifyPossibleOptionsTextSpans().eq(optionIndex), optionText)
         });
-        utilities.verifyElementCount(textSelectionPage.highlightOptionsSpans(), optionArray.length);
+        utilities.verifyElementCount(textSelectionPage.specifyPossibleOptionsTextSpans(), optionArray.length);
     },
 
     /**
@@ -288,8 +293,8 @@ const steps = {
     },
 
     /**
-     * @param {string[]} optionArray Array of text of options in highlight options section
-     * @description Verify the options displayed in highlight options section
+     * @param {string[]} optionArray Array of text of options in specify possible options section
+     * @description Verify the options displayed in specify possible options section
      */
     verifyOptionsInSpecifyCorrectAnswerSection: (optionArray) => {
         optionArray.forEach((optionText, optionIndex) => {
@@ -469,11 +474,11 @@ const steps = {
     },
 
     /**
-     * @param {string} optionText Text of the option in highlight options section
-     * @description Verify that option is not in selected state in highlight options section
+     * @param {string} optionText Text of the option in specify possible options section
+     * @description Verify that option is not in selected state in specify possible options section
      */
-    verifyOptionIsNotSelectedInHighlightOptionsSection: (optionText) => {
-        textSelectionPage.highlightOptionsSpans()
+    verifyOptionIsNotSelectedInSpecifyPossibleOptionsSection: (optionText) => {
+        textSelectionPage.specifyPossibleOptionsTextSpans()
             .contains(optionText)
             .should('not.have.class', 'highlighted')
             .and('have.attr', 'aria-checked', 'false');
@@ -532,12 +537,12 @@ const steps = {
         });
         textSelectionPage.steps.addInputToQuestionInputField('{backspace}');
         textSelectionPage.steps.switchTextSelectionMode('Paragraph');
-        textSelectionPage.steps.clickOnOptionInHighlightOptionsSection(paragraphTextArray[0]);
-        textSelectionPage.steps.clickOnOptionInHighlightOptionsSection(paragraphTextArray[1]);
-        textSelectionPage.steps.clickOnOptionInHighlightOptionsSection(paragraphTextArray[2]);
-        textSelectionPage.steps.clickOnOptionInHighlightOptionsSection(paragraphTextArray[3]);
-        textSelectionPage.steps.clickOnOptionInHighlightOptionsSection(paragraphTextArray[4]);
-        textSelectionPage.steps.clickOnOptionInHighlightOptionsSection(paragraphTextArray[5]);
+        textSelectionPage.steps.clickOnOptionInSpecifyPossibleOptionsSection(paragraphTextArray[0]);
+        textSelectionPage.steps.clickOnOptionInSpecifyPossibleOptionsSection(paragraphTextArray[1]);
+        textSelectionPage.steps.clickOnOptionInSpecifyPossibleOptionsSection(paragraphTextArray[2]);
+        textSelectionPage.steps.clickOnOptionInSpecifyPossibleOptionsSection(paragraphTextArray[3]);
+        textSelectionPage.steps.clickOnOptionInSpecifyPossibleOptionsSection(paragraphTextArray[4]);
+        textSelectionPage.steps.clickOnOptionInSpecifyPossibleOptionsSection(paragraphTextArray[5]);
     },
 
     /**
@@ -545,12 +550,63 @@ const steps = {
     * @description Add points to options in set points popup
     */
     addPartialDifferentWeightsPointsInSetPointsPopup: (pointsArray) => {
-        textSelectionPage.setPointsButton()
-            .click();
+        textSelectionPage.steps.openSetPointsPopup();
         setPointsPopupBase.steps.allotPointsToSetPointsPopupPointsInputField(pointsArray);
         setPointsPopupBase.steps.saveSetPointsPopup();
     },
 
+    verifySetPointsButtonLabelAndEnabledState: () => {
+        utilities.verifyInnerText(textSelectionPage.setPointsButton(), 'Set points');
+        utilities.verifyElementVisibilityState(textSelectionPage.setPointsButton(), 'visible');
+        utilities.verifyElementVisibilityState(textSelectionPage.setPointsButton().find('svg'), 'exist');
+        utilities.verifyElementNotDisabled(textSelectionPage.setPointsButton());
+    },
+
+    openSetPointsPopup: () => {
+        textSelectionPage.setPointsButton()
+            .click();
+    },
+
+    /**
+    * @param {string} textSelectionType Type of text selection 
+    * @param {*} optionText Text of the option in specify possible options section
+    * @description Select an option in specify possible options section
+    */
+    selectOptionInSpecifyPossibleOptionsSection: (textSelectionType, optionText) => {
+        if (textSelectionType === 'Custom') {
+            textSelectionPage.specifyPossibleOptionsTextFieldWrapper()
+                .find('.question-text-wrapper')
+                .selectText(optionText);
+            textSelectionPage.steps.verifyOptionIsSelectedInSpecifyPossibleOptionsSection(optionText);
+        } else {
+            textSelectionPage.steps.clickOnOptionInSpecifyPossibleOptionsSection(optionText);
+            textSelectionPage.steps.verifyOptionIsSelectedInSpecifyPossibleOptionsSection(optionText);
+        }
+    },
+
+    /**
+     * @param {string} textSelectionType Type of text selection 
+     * @param {*} optionText Text of the option in specify possible options section
+     * @description Deselect an option in specify possible options section
+     */
+    deselectOptionInSpecifyPossibleOptionsSection: (textSelectionType, optionText) => {
+        if (textSelectionType === 'Custom') {
+            textSelectionPage.steps.clickOnOptionInSpecifyPossibleOptionsSection(optionText);
+            textSelectionPage.steps.verifyOptionDoesNotExistInSpecifyPossibleOptionsSection(optionText);
+        } else {
+            textSelectionPage.steps.clickOnOptionInSpecifyPossibleOptionsSection(optionText);
+            textSelectionPage.steps.verifyOptionIsNotSelectedInSpecifyPossibleOptionsSection(optionText);
+        }
+    },
+
+    /**
+     * verify the displayed penalty points for each incorrect answer
+     * @param {number} penaltyPoints displayed penalty points 
+     */
+    verifyPenaltyPointsForEachIncorrectAnswer: (penaltyPoints) => {
+        utilities.verifyInnerText(autoScoredScoringSectionMultiResponseType.penaltyPointsDetailsSectionAllottedPointsLabel(), `Penalty points for each incorrect answer: ${penaltyPoints}`);
+    },
+
     /**
      * Verify non-optional text is not interactive in preview tab
      * @param {string} optionText Non-optional text in preview tab
@@ -573,6 +629,18 @@ const steps = {
 
 const tests = {
     ...autoScoredScoringPreviewTab.tests,
+    ...scoringSectionBaseEditTab.tests,
+    ...autoScoredScoringSectionMultiResponseType.tests,
+    ...commonComponents.tests,
+    verifyContentsOfSpecifyCorrectAnswerSection: () => {
+        it('When user selects a scoring type, then in the \'Correct\' accordion all the contents should be displayed', () => {
+            textSelectionPage.specifyCorrectAnswerTextSpans()
+                .each(($element, index) => {
+                    utilities.verifyInnerText(cy.wrap($element), paragraphTextArray[index]);
+                    utilities.verifyElementVisibilityState(cy.wrap($element), 'visible');
+                });
+        });
+    },
 }
 
 export const textSelectionPage = {

package/package.json

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

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

@@ -1,161 +0,0 @@
-describe('Create item page: Feedback scale: Preview tab: \'Button\' and \'Star\' layouts, add, delete option accordion', () => {
-    before(() => {
-        cy.loginAs('admin');
-    });
-
-    describe('Feedback scale - \'Numbers\' layout style in the preview tab', () => {
-        abortEarlySetup();
-        before(() => {
-        });
-
-        it('By default 5 number buttons with text "#"(# being a number from 1 to 5) should be displayed in the preview tab', () => {
-
-        });
-
-        it('A \'Legend text\' accordion should be present and by default it should be in expanded state', () => {
-
-        });
-
-        it('The legend text accordion should display the number button, no legend text should be displayed for the number buttons', () => {
-        });
-
-        it('When the user switches to edit tab and adds legend text, then the added legend text should be displayed besides the respective number button in the legend text accordion', () => {
-
-        });
-
-        it('CSS of number buttons - unselected state', { tags: 'css' }, () => {
-        });
-
-        it('Accessibility of number buttons - unselected state', { tags: 'a11y' }, () => {
-        });
-
-        it('The user should be able to mark feedback by clicking on any number button', () => {
-
-        });
-
-        it('CSS of number buttons - selected state', { tags: 'css' }, () => {
-        });
-
-        it('Accessibility of number buttons - selected state', { tags: 'a11y' }, () => {
-        });
-    });
-
-    describe('Feedback scale - \'Thumbs\' layout style in the preview tab', () => {
-        abortEarlySetup();
-        before(() => {
-        });
-
-        it('By default two buttons, "Thumbs up" and "Thumbs down" should be displayed in the preview tab', () => {
-
-        });
-
-        it('A \'Legend text\' accordion should be present and by default it should be in expanded state', () => {
-
-        });
-
-        it('The legend text accordion should display the two buttons with button labels - "Thumbs up" and "Thumbs down", no legend text should be displayed for the two buttons', () => {
-        });
-
-        it('When the user switches to edit tab and adds legend text, then the added legend text should be displayed besides the respective button in the legend text accordion', () => {
-
-        });
-
-        it('CSS of Thumb buttons - unselected state', { tags: 'css' }, () => {
-        });
-
-        it('Accessibility of Thumb buttons - unselected state', { tags: 'a11y' }, () => {
-        });
-
-        it('The user should be able to mark feedback by clicking on any Thumb button', () => {
-
-        });
-
-        it('CSS of Thumb buttons - selected state', { tags: 'css' }, () => {
-        });
-
-        it('Accessibility of Thumb buttons - selected state', { tags: 'a11y' }, () => {
-        });
-    });
-
-    describe('Feedback scale - \'Stars/Hearts\' layout style in the preview tab', () => {
-        abortEarlySetup();
-        before(() => {
-        });
-
-        it('By default 5 star buttons should be displayed in the preview tab', () => {
-
-        });
-
-        it('A \'Legend text\' accordion should be present and by default it should be in expanded state', () => {
-
-        });
-
-        it('The legend text accordion should display the stars in a list with all 5 stars present and the respective number of stars in highlighted state, no legend text should be displayed for the star buttons', () => {
-        });
-
-        it('When the user switches to edit tab and adds legend text, then the added legend text should be displayed besides the respective star button in the legend text accordion', () => {
-
-        });
-
-        it('CSS of star buttons - unselected state', { tags: 'css' }, () => {
-        });
-
-        it('Accessibility of star buttons - unselected state', { tags: 'a11y' }, () => {
-        });
-
-        it('The user should be able to mark feedback by clicking on any star button', () => {
-
-        });
-
-        it('CSS of star buttons - selected state', { tags: 'css' }, () => {
-        });
-
-        it('Accessibility of star buttons - selected state', { tags: 'a11y' }, () => {
-        });
-
-        it('By default 5 heart buttons should be displayed in the preview tab', () => {
-            // Verify that there are 5 heart buttons by default
-            // You can use assertions to check the presence of heart buttons in the preview tab
-        });
-        
-        it('A \'Legend text\' accordion should be present and by default it should be in expanded state', () => {
-            // Verify that a 'Legend text' accordion is present and expanded by default
-        });
-        
-        it('The legend text accordion should display the hearts in a list with all 5 hearts present and the respective number of hearts in highlighted state, no legend text should be displayed for the heart buttons', () => {
-            // Verify that the legend text accordion displays hearts in a list with all 5 hearts present
-            // Check that the respective number of hearts is highlighted
-            // Ensure that no legend text is displayed for the heart buttons
-        });
-        
-        it('When the user switches to edit tab and adds legend text, then the added legend text should be displayed besides the respective heart button in the legend text accordion', () => {
-            // Switch to the edit tab
-            // Add legend text for each heart button
-            // Verify that the added legend text is displayed beside the respective heart button in the legend text accordion
-        });
-        
-        it('CSS of heart buttons - unselected state', { tags: 'css' }, () => {
-            // Verify the CSS of heart buttons in their unselected state
-        });
-        
-        it('Accessibility of heart buttons - unselected state', { tags: 'a11y' }, () => {
-            // Verify the accessibility of heart buttons in their unselected state
-        });
-        
-        it('The user should be able to mark feedback by clicking on any heart button', () => {
-            // Verify that the user can mark feedback by clicking on any heart button
-        });
-        
-        it('CSS of heart buttons - selected state', { tags: 'css' }, () => {
-            // Verify the CSS of heart buttons in their selected state
-        });
-        
-        it('Accessibility of heart buttons - selected state', { tags: 'a11y' }, () => {
-            // Verify the accessibility of heart buttons in their selected state
-        });
-    });
-});
-
-//edit tab - 
-//different files for all scale styles
-//include all possible cases, default, add/delete edit tab and preview