itemengine-cypress-automation 1.0.249-repoUpdated26thSept-d6c4173.0 → 1.0.250-30SeptUpdates-a6d872b.0

package/cypress/pages/shortTextResponsePage.js

@@ -46,9 +46,7 @@ const selectors = {
     answerInputFieldSpecifyCorrectAnswerSectionWrapper: () => cy.get('.input-wrapper'),
     exactRadioOptionLabel: () => cy.get('.ngie-radio-label').eq(0),
     containsTextRadioOptionLabel: () => cy.get('.ngie-radio-label').eq(1),
-    caseSensitiveCheckboxLabel: () => cy.get('[data-ngie-testid="case-sensitive-checkbox"] .MuiFormControlLabel-label'),
     ignoreSpacesBeforeAndAfterCheckboxLabel: () => cy.get('[data-ngie-testid="ignore-spaces-before-and-after-checkbox"] .MuiFormControlLabel-label'),
-    caseSensitiveCheckbox: () => cy.get('[data-ngie-testid="case-sensitive-checkbox"] input'),
     ignoreSpacesBeforeAndAfterCheckbox: () => cy.get('[data-ngie-testid="ignore-spaces-before-and-after-checkbox"] input'),
     warningMessage: () => cy.get('.disabled-wrapper-cls [class*="DisabledTextWrapper"]'),
     warningMessageContainer: () => cy.get('.disabled-wrapper-cls'),
@@ -907,7 +905,7 @@ const tests = {
             shortTextResponsePage.steps.enterTextInAnswerInputFieldSpecifyCorrectAnswerSection('Petals');
         });
 
-        it('When user focuses in and out of the response accordion \'Answer\' input field, \'Error: Answer is required.\' error message should be displayed', () => {
+        it('When user focuses in and out of the response accordion \'Answer\' input field, \'Error: Answer is required.\' error message should not be displayed', () => {
             shortTextResponsePage.steps.clearAndFocusOutOfSpecifyCorrectAnswerInputField();
             utilities.verifyElementVisibilityState(commonComponents.errorMessage(), 'visible');
             utilities.verifyInnerText(commonComponents.errorMessage(), 'Error: Answer is required.');

package/cypress/pages/simpleCalculatorPage.js

@@ -101,11 +101,11 @@ const steps = {
             .should('not.have.class', 'disable');
     },
 
-    /**
+       /**
      * @description Clicks on a button in the calculator.
      * @param {string} button - The button to click. Options: ('all clear', 'delete', 'division', 'addition', 'multiplication', 'subtraction', 'left arrow', 'right arrow', 'equal to', 'left parenthesis', 'right parenthesis', 'pi', 'square', 'reciprocal', 'percentage', 'square root', 'exponent', 'sign change', 'decimal', 'zero', 'one', 'two', 'three', 'four', 'five', 'six', 'seven', 'eight', 'nine', 'undo', 'redo')
      */
-    clickOnACalculatorButton: (button) => {
+       clickOnACalculatorButton: (button) => {
         switch (button) {
             case 'all clear':
                 simpleCalculatorPage.allClearButton()

package/cypress/pages/singleSelectionPage.js

@@ -166,16 +166,6 @@ const steps = {
             .click()
     },
 
-    /**
-     * Verifies that the options radio button in the preview tab is in the unchecked state for a specified option index.
-     * @param {number} optionIndex - The index of the option to verify in the preview tab.
-     */
-    verifyOptionInPreviewTabUncheckedState: (optionIndex) => {
-        singleSelectionPage.optionRadioButtonPreviewTab()
-            .eq(optionIndex)
-            .should('not.be.checked');
-    },
-
     /**
      * Verifies the presence of the correct option icon in the grading view for a specified option index.
      * @param {number} optionIndex - The index of the option to verify in the grading view.

package/cypress/pages/textEntryMathPage.js

@@ -1,4 +1,3 @@
-import { equationEditorCategoriesAndSymbols } from "../fixtures/equationEditorCategoriesAndSymbols ";
 import { decimalSeparator, evaluationMethods } from "../fixtures/evaluationMethodsAndCustomSettings"
 import utilities from "../support/helpers/utilities"
 import { questionInstructionsComponent, questionInputFieldComponent, createQuestionBasePage, commonComponents, additionalSettingsPanel, autoScoredSpecifyCorrectAnswerSection, scoringSectionBaseEditTab, autoScoredScoringSectionMultiResponseType, autoScoredScoringPreviewTab, equationEditorFlyout, autoScoredStudentViewSettings, correctIncorrectAnswerLabelComponent, ckEditorToolbar, colorPopupComponent } from "./components"
@@ -721,13 +720,7 @@ const steps = {
         utilities.verifyElementCount(textEntryMathPage.correctAnswersContainerResponse(), correctAnswerArray.length);
         correctAnswerArray.forEach((correctAnswer, index) => {
             utilities.verifyTextContent(utilities.getNthElement(textEntryMathPage.correctAnswersContainerResponseNumeration(), index), index + 1);
-            textEntryMathPage.correctAnswersContainerResponse()
-                .eq(index)
-                .then(($element) => {
-                    let actualText = $element[0].innerText;
-                    const actualAnswer = actualText.replace(/\u200B/g, '').replace(/\n/g, '').trim();
-                    expect(actualAnswer).to.equal(correctAnswer);
-                });
+            utilities.verifyTextContent(utilities.getNthElement(textEntryMathPage.correctAnswersContainerResponse(), index), correctAnswer);
         });
     },
 

package/cypress/pages/textEntryMathWithImagePage.js

@@ -33,50 +33,28 @@ const steps = {
 
     verifyResponsePointerStyleInPreviewTab: (style, responseIndex) => {
         const getPosition = (option) => {
-            switch (option) {
-                case 'bottom':
-                    return { top: '-24px', left: '-3px' };
-                case 'bottom right':
-                    return { top: '-29.5px', left: '-36.5px' };
-                case 'right':
-                    return { top: '-21px', left: '-37px' };
-                case 'top right':
-                    return { top: '-23.5px', left: '-35.5px' };
-                case 'top':
-                    return { top: '-22px', left: '9px' };
-                case 'top left':
-                    return { top: '-21.5px', left: '-28px' };
-                case 'left':
-                    return { top: '-28px', left: '-27px' };
-                case 'bottom left':
-                    return { top: '-24.5px', left: '-27px' };
-            }
+            const positions = {
+                'bottom': { top: '-24px', left: '-3px' },
+                'bottom right': { top: '-29.5px', left: '-36.5px' },
+                'right': { top: '-21px', left: '-37px' },
+                'top right': { top: '-23.5px', left: '-35.5px' },
+                'top': { top: '-22px', left: '9px' },
+                'top left': { top: '-21.5px', left: '-28px' },
+                'left': { top: '-28px', left: '-27px' },
+                'bottom left': { top: '-24.5px', left: '-27px' }
+            };
+            return positions[option];
         }
         const expectedPosition = getPosition(style);
-        if (style == 'bottom') {
-            textEntryMathWithImagePage.pointerPreviewTab()
-                .eq(responseIndex)
-                .should('have.css', 'margin-top', expectedPosition.top)
-                .and('have.css', 'margin-left', expectedPosition.left);
-        }
-        else if (style == 'bottom right' || style == 'right' || style == 'top right') {
-            textEntryMathWithImagePage.pointerPreviewTab()
-                .eq(responseIndex)
-                .should('have.css', 'margin-top', expectedPosition.top)
-                .and('have.css', 'margin-left', expectedPosition.left);
-        }
-        else if (style == 'none') {
+        const pointer = textEntryMathWithImagePage.pointerPreviewTab().eq(responseIndex);
+        if (style === 'none') {
             textEntryMathWithImagePage.responseFieldPreviewTab()
                 .eq(responseIndex)
                 .within(() => {
-                    textEntryMathWithImagePage.pointerPreviewTab()
-                        .should('not.exist')
+                    pointer.should('not.exist');
                 });
-        }
-        else {
-            textEntryMathWithImagePage.pointerPreviewTab()
-                .eq(responseIndex)
-                .should('have.css', 'margin-top', expectedPosition.top)
+        } else {
+            pointer.should('have.css', 'margin-top', expectedPosition.top)
                 .and('have.css', 'margin-left', expectedPosition.left);
         }
     },

package/cypress/pages/textSelectionPage.js

@@ -1,13 +1,16 @@
 import constants from "../fixtures/constants";
 import utilities from "../support/helpers/utilities";
-import { createQuestionBasePage, autoScoredScoringPreviewTab, scoringSectionBaseEditTab, questionInputFieldComponent, questionInstructionsComponent, autoScoredStudentViewSettings, correctIncorrectAnswerLabelComponent, autoScoredSpecifyCorrectAnswerSection, autoScoredScoringSectionMultiResponseType, setPointsPopupBase, commonComponents, ckEditorToolbar, equationEditorFlyout, studentViewSettingsLabelComponent, enableOuterBorderComponent, additionalSettingsPanel, additionalSettingsAccessibilitySectionComponent, styleAndLayoutCustomizationAccordionComponent, colorPopupComponent, showAvailableOptionsToStudents, showStudentMaximumNumberOfPossibleSelections } from "./components";
+import { createQuestionBasePage, autoScoredScoringPreviewTab, scoringSectionBaseEditTab, questionInstructionsComponent, autoScoredStudentViewSettings, correctIncorrectAnswerLabelComponent, autoScoredSpecifyCorrectAnswerSection, autoScoredScoringSectionMultiResponseType, setPointsPopupBase, commonComponents, ckEditorToolbar, equationEditorFlyout, studentViewSettingsLabelComponent, enableOuterBorderComponent, additionalSettingsPanel, additionalSettingsAccessibilitySectionComponent, styleAndLayoutCustomizationAccordionComponent, colorPopupComponent, showAvailableOptionsToStudents, showStudentMaximumNumberOfPossibleSelections, singleMultipleSelectionModeComponent } from "./components";
 import { dialogBoxBase } from "./dialogBoxBase";
-import { singleMultipleSelectionModeComponent } from "./components";
 const css = Cypress.env('css');
 const colorLibrary = css.textSelectionColorLibrary;
 
 const paragraphTextArray = ['All animals have a unique role to play in maintaining the balance of nature.', 'A lot of animal species exist in both, land and water. As a result, each of them has a purpose for their existence.', 'The animals divide into specific groups in biology. Amphibians are those which can live on both, land and water.', 'Mammals are ones which give birth to their offspring in the womb and have mammary glands.', 'Birds are creatures with feathers, beaks, and the ability to lay eggs.', 'Many animal species are undocumented even today.', 'Research is going on to discover new species in the far corners of the earth']
 
+const sentenceTextArray = ['All animals have a unique role to play in maintaining the balance of nature.', 'A lot of animal species exist in both, land and water.', 'As a result, each of them has a purpose for their existence.', 'The animals divide into specific groups in biology.', 'Amphibians are those which can live on both, land and water.', 'Mammals are ones which give birth to their offspring in the womb and have mammary glands.', 'Birds are creatures with feathers, beaks, and the ability to lay eggs.']
+
+const wordTextArray = ['Nature','nurtures', 'life', 'and', 'brings', 'endless', 'beauty.']
+
 const selectors = {
     ...questionInstructionsComponent,
     ...autoScoredScoringSectionMultiResponseType,
@@ -245,7 +248,7 @@ const steps = {
         textSelectionPage.questionTextWrapperPreviewTab()
             .find('span[role="math"]')
             .should('have.attr', 'aria-label', constants.CKEditorInputFieldEnteredEquationAriaLabel)
-            //  .contains(constants.CKEditorInputFieldEnteredEquationText); ;
+        //  .contains(constants.CKEditorInputFieldEnteredEquationText); ;
     },
 
     verifyLinkInPreviewTab: () => {
@@ -435,11 +438,7 @@ const steps = {
     * @description verifies the style of the selected options in specify possible option section
     */
     verifyBorderStyleInSpecifyPossibleOptions: (textSelectionBorderStyle, index, border) => {
-        if (textSelectionBorderStyle === 'outline') {
-            utilities.verifyCSS(textSelectionPage.specifyPossibleOptionsTextSpans().eq(index), {
-                'border-bottom-style': border,
-            });
-        } else if (textSelectionBorderStyle === 'underline') {
+        if (textSelectionBorderStyle === 'outline' || textSelectionBorderStyle === 'underline') {
             utilities.verifyCSS(textSelectionPage.specifyPossibleOptionsTextSpans().eq(index), {
                 'border-bottom-style': border,
             });
@@ -456,11 +455,7 @@ const steps = {
     * @description verifies the style of the selected options in specify correct answer section
     */
     verifyBorderStyleInSpecifyCorrectAnswer: (textSelectionBorderStyle, index, border) => {
-        if (textSelectionBorderStyle === 'outline') {
-            utilities.verifyCSS(textSelectionPage.specifyCorrectAnswerTextSpans().eq(index), {
-                'border-bottom-style': border,
-            });
-        } else if (textSelectionBorderStyle === 'underline') {
+        if (textSelectionBorderStyle === 'outline' || textSelectionBorderStyle === 'underline') {
             utilities.verifyCSS(textSelectionPage.specifyCorrectAnswerTextSpans().eq(index), {
                 'border-bottom-style': border,
             });
@@ -477,11 +472,7 @@ const steps = {
     * @description verifies the style of the selected options in preview section
     */
     verifyBorderStyleInPreview: (textSelectionBorderStyle, index, border) => {
-        if (textSelectionBorderStyle === 'outline') {
-            utilities.verifyCSS(textSelectionPage.previewTabQuestionTextSpans().eq(index), {
-                'border-bottom-style': border,
-            });
-        } else if (textSelectionBorderStyle === 'underline') {
+        if (textSelectionBorderStyle === 'outline' || textSelectionBorderStyle === 'underline') {
             utilities.verifyCSS(textSelectionPage.previewTabQuestionTextSpans().eq(index), {
                 'border-bottom-style': border,
             });
@@ -903,34 +894,34 @@ const steps = {
         textSelectionPage.steps.clickOnOptionInSpecifyPossibleOptionsSection(paragraphTextArray[5]);
     },
 
-    /**
-   * @param {number[]} pointsArray Array of partial different points for options
-   * @description Add points to options in set points popup
-   */
-    addPartialDifferentWeightsPointsInSetPointsPopup: (pointsArray) => {
-        textSelectionPage.setPointsButton()
-            .click();
-        setPointsPopupBase.steps.allotPointsToSetPointsPopupPointsInputField(pointsArray);
-        setPointsPopupBase.steps.saveSetPointsPopup();
+    setQuestionAndOptionsInEditTabForSentence: () => {
+        textSelectionPage.steps.clearQuestionInputField();
+        sentenceTextArray.forEach((sentenceText) => {
+            textSelectionPage.steps.addInputToQuestionInputField(`${sentenceText}{enter}`);
+        });
+        textSelectionPage.steps.addInputToQuestionInputField('{backspace}');
+        textSelectionPage.steps.switchTextSelectionMode('Sentence');
+        textSelectionPage.steps.clickOnOptionInSpecifyPossibleOptionsSection(sentenceTextArray[0]);
+        textSelectionPage.steps.clickOnOptionInSpecifyPossibleOptionsSection(sentenceTextArray[1]);
+        textSelectionPage.steps.clickOnOptionInSpecifyPossibleOptionsSection(sentenceTextArray[2]);
+        textSelectionPage.steps.clickOnOptionInSpecifyPossibleOptionsSection(sentenceTextArray[3]);
+        textSelectionPage.steps.clickOnOptionInSpecifyPossibleOptionsSection(sentenceTextArray[4]);
+        textSelectionPage.steps.clickOnOptionInSpecifyPossibleOptionsSection(sentenceTextArray[5]);
     },
 
-    /**
-     * Verify non-optional text is not interactive in preview tab
-     * @param {string} optionText Non-optional text in preview tab
-     */
-    verifyNonOptionTextIsNotInteractiveInPreviewTab: (optionText) => {
-        utilities.hoverOverElement(textSelectionPage.questionTextPreviewTab().contains(optionText));
-        utilities.verifyCSS(textSelectionPage.questionTextPreviewTab().contains(optionText), {
-            'background-color': css.color.transparent
+    setQuestionAndOptionsInEditTabForWord: () => {
+        textSelectionPage.steps.clearQuestionInputField();
+        wordTextArray.forEach((wordText) => {
+            textSelectionPage.steps.addInputToQuestionInputField(`${wordText} `);
         });
-        utilities.hoverAwayFromElement(textSelectionPage.questionTextPreviewTab().contains(optionText));
-        textSelectionPage.questionTextPreviewTab()
-            .contains(optionText)
-            .click();
-        textSelectionPage.questionTextPreviewTab()
-            .contains(optionText)
-            .should('not.have.class', 'correct_answer')
-            .and('have.attr', 'aria-checked', 'false');
+        textSelectionPage.steps.addInputToQuestionInputField('{backspace}');
+        textSelectionPage.steps.switchTextSelectionMode('Word');
+        textSelectionPage.steps.clickOnOptionInSpecifyPossibleOptionsSection(wordTextArray[0]);
+        textSelectionPage.steps.clickOnOptionInSpecifyPossibleOptionsSection(wordTextArray[1]);
+        textSelectionPage.steps.clickOnOptionInSpecifyPossibleOptionsSection(wordTextArray[2]);
+        textSelectionPage.steps.clickOnOptionInSpecifyPossibleOptionsSection(wordTextArray[3]);
+        textSelectionPage.steps.clickOnOptionInSpecifyPossibleOptionsSection(wordTextArray[4]);
+        textSelectionPage.steps.clickOnOptionInSpecifyPossibleOptionsSection(wordTextArray[5]);
     },
 
     /**

package/cypress/pages/videoResponsePage.js

@@ -181,11 +181,6 @@ const steps = {
             .click();
     },
 
-    retakeRecording: () => {
-        videoResponsePage.retakeRecordingButton()
-            .click();
-    },
-
     /**
      * @description Records a video and saves it for a specified duration.
      * @param {number} time - The duration (in milliseconds) for which the video should be recorded.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "itemengine-cypress-automation",
-  "version": "1.0.249-repoUpdated26thSept-d6c4173.0",
+  "version": "1.0.250-30SeptUpdates-a6d872b.0",
   "description": "",
   "main": "index.js",
   "scripts": {

package/cypress/pages/components/customizeHighlightPropertiesComponent.js

@@ -1,318 +0,0 @@
-import utilities from "../../support/helpers/utilities";
-const css = Cypress.env('css');
-
-const selectors = {
-    //Default
-    defaultLabel: () => cy.get('[class*=ColorStateComponentstyles__ColorStateLabel]').eq(0),
-    defaultHighlightWrapper: () => cy.get('[class*=ColorStateWrapper]').eq(0),
-    defaultFillColorLabel: () => customizeHighlightPropertiesComponent.defaultHighlightWrapper().find('[class*="ColorTypeWrapper"]').eq(0),
-    defaultBorderColorLabel: () => customizeHighlightPropertiesComponent.defaultHighlightWrapper().find('[class*="ColorTypeWrapper"]').eq(1),
-    defaultFillColorOpacityLabel: () => customizeHighlightPropertiesComponent.defaultHighlightWrapper().find('[class*=ColorStateComponentstyles__OpacityLabel]').eq(0),
-    defaultBorderColorOpacityLabel: () => customizeHighlightPropertiesComponent.defaultHighlightWrapper().find('[class*=ColorStateComponentstyles__OpacityLabel]').eq(1),
-    defaultFillColorHexCodeLabel: () => customizeHighlightPropertiesComponent.defaultHighlightWrapper().find('[class*=ColorStateComponentstyles__HexColorLabel]').eq(0),
-    defaultBorderColorHexCodeLabel: () => customizeHighlightPropertiesComponent.defaultHighlightWrapper().find('[class*=ColorStateComponentstyles__HexColorLabel]').eq(1),
-    defaultFillColorBlock: () => customizeHighlightPropertiesComponent.defaultHighlightWrapper().find('.color-picker-block').eq(0),
-    defaultBorderColorBlock: () => customizeHighlightPropertiesComponent.defaultHighlightWrapper().find('.color-picker-block').eq(1),
-    //Hover
-    hoverLabel: () => cy.get('[class*=ColorStateComponentstyles__ColorStateLabel]').eq(1),
-    hoverHighlightWrapper: () => cy.get('[class*=ColorStateWrapper]').eq(1),
-    hoverFillColorLabel: () => customizeHighlightPropertiesComponent.hoverHighlightWrapper().find('[class*="ColorTypeWrapper"]').eq(0),
-    hoverBorderColorLabel: () => customizeHighlightPropertiesComponent.hoverHighlightWrapper().find('[class*="ColorTypeWrapper"]').eq(1),
-    hoverFillColorOpacityLabel: () => customizeHighlightPropertiesComponent.hoverHighlightWrapper().find('[class*=ColorStateComponentstyles__OpacityLabel]').eq(0),
-    hoverBorderColorOpacityLabel: () => customizeHighlightPropertiesComponent.hoverHighlightWrapper().find('[class*=ColorStateComponentstyles__OpacityLabel]').eq(1),
-    hoverFillColorHexCodeLabel: () => customizeHighlightPropertiesComponent.hoverHighlightWrapper().find('[class*=ColorStateComponentstyles__HexColorLabel]').eq(0),
-    hoverBorderColorHexCodeLabel: () => customizeHighlightPropertiesComponent.hoverHighlightWrapper().find('[class*=ColorStateComponentstyles__HexColorLabel]').eq(1),
-    hoverFillColorBlock: () => customizeHighlightPropertiesComponent.hoverHighlightWrapper().find('.color-picker-block').eq(0),
-    hoverBorderColorBlock: () => customizeHighlightPropertiesComponent.hoverHighlightWrapper().find('.color-picker-block').eq(1),
-    //Active
-    activeLabel: () => cy.get('[class*=ColorStateComponentstyles__ColorStateLabel]').eq(2),
-    activeHighlightWrapper: () => cy.get('[class*=ColorStateWrapper]').eq(2),
-    activeFillColorLabel: () => customizeHighlightPropertiesComponent.activeHighlightWrapper().find('[class*="ColorTypeWrapper"]').eq(0),
-    activeBorderColorLabel: () => customizeHighlightPropertiesComponent.activeHighlightWrapper().find('[class*="ColorTypeWrapper"]').eq(1),
-    activeFillColorOpacityLabel: () => customizeHighlightPropertiesComponent.activeHighlightWrapper().find('[class*=ColorStateComponentstyles__OpacityLabel]').eq(0),
-    activeBorderColorOpacityLabel: () => customizeHighlightPropertiesComponent.activeHighlightWrapper().find('[class*=ColorStateComponentstyles__OpacityLabel]').eq(1),
-    activeFillColorHexCodeLabel: () => customizeHighlightPropertiesComponent.activeHighlightWrapper().find('[class*=ColorStateComponentstyles__HexColorLabel]').eq(0),
-    activeBorderColorHexCodeLabel: () => customizeHighlightPropertiesComponent.activeHighlightWrapper().find('[class*=ColorStateComponentstyles__HexColorLabel]').eq(1),
-    activeFillColorBlock: () => customizeHighlightPropertiesComponent.activeHighlightWrapper().find('.color-picker-block').eq(0),
-    activeBorderColorBlock: () => customizeHighlightPropertiesComponent.activeHighlightWrapper().find('.color-picker-block').eq(1),
-    applyPatternOnActiveStateLabel: () => cy.get('[class*=CustomizeHighlightPropertiesstyles] .check-btn-label'),
-    applyPatternOnActiveStateCheckbox: () => cy.get('[class*=CustomizeHighlightPropertiesstyles] input')
-}
-
-const steps = {
-    verifyApplyPatternOnActiveStateCheckboxIsChecked: () => {
-        customizeHighlightPropertiesComponent.applyPatternOnActiveStateCheckbox()
-            .should('be.checked');
-    },
-
-    verifyApplyPatternOnActiveStateCheckboxIsUnchecked: () => {
-        customizeHighlightPropertiesComponent.applyPatternOnActiveStateCheckbox()
-            .should('not.be.checked');
-    },
-
-    verifyCSSOfApplyPatternOnActiveState: () => {
-        utilities.verifyCSS(customizeHighlightPropertiesComponent.applyPatternOnActiveStateLabel(), {
-            'color': css.color.labelText,
-            'font-size': css.fontSize.normal,
-            'font-weight': css.fontWeight.regular
-        });
-        utilities.verifyCSS(customizeHighlightPropertiesComponent.applyPatternOnActiveStateCheckbox().parents('.MuiIconButton-label').find('svg'), {
-            'fill': css.color.activeButtons
-        });
-    },
-
-    /**
-     * @param {string} color background color of color block
-     * @description this function verfies the background color of default fill color block
-     */
-    verifyDefaultFillColorBlockColor: (color) => {
-        customizeHighlightPropertiesComponent.defaultFillColorBlock()
-            .should('have.css', 'background-color', color);
-    },
-
-    /**
-     * @param {string} color background color of color block
-     * @description this function verfies the background color of default border color block
-     */
-    verifyDefaultBorderColorBlockColor: (color) => {
-        customizeHighlightPropertiesComponent.defaultBorderColorBlock()
-            .should('have.css', 'background-color', color);
-    },
-
-    /**
-     * @param {string} color background color of color block
-     * @description this function verfies the background color of active fill color block
-     */
-    verifyActiveFillColorBlockColor: (color) => {
-        customizeHighlightPropertiesComponent.activeFillColorBlock()
-            .should('have.css', 'background-color', color);
-    },
-
-    /**
-     * @param {string} color background color of color block
-     * @description this function verfies the background color of active border color block
-     */
-    verifyActiveBorderColorBlockColor: (color) => {
-        customizeHighlightPropertiesComponent.activeBorderColorBlock()
-            .should('have.css', 'background-color', color);
-    },
-
-    /**
-     * @param {string} color background color of color block
-     * @description this function verfies the background color of hover fill color block
-     */
-    verifyHoverFillColorBlockColor: (color) => {
-        customizeHighlightPropertiesComponent.hoverFillColorBlock()
-            .should('have.css', 'background-color', color);
-    },
-
-    /**
-     * @param {string} color background color of color block
-     * @description this function verfies the background color of hover border color block
-     */
-    verifyHoverBorderColorBlockColor: (color) => {
-        customizeHighlightPropertiesComponent.hoverBorderColorBlock()
-            .should('have.css', 'background-color', color);
-    },
-
-    /**
-     * @param {string} hexCode hexcode label of color block
-     * @description this function verfies the hexcode label of default fill color block
-     */
-    verifyDefaultFillColorHexCodeLabel: (hexCode) => {
-        utilities.verifyInnerText(customizeHighlightPropertiesComponent.defaultFillColorHexCodeLabel(), hexCode)
-    },
-
-    /**
-    * @param {string} hexCode hexcode label of color block
-    * @description this function verfies the hexcode label of default border color block
-    */
-    verifyDefaultBorderColorHexCodeLabel: (hexCode) => {
-        utilities.verifyInnerText(customizeHighlightPropertiesComponent.defaultBorderColorHexCodeLabel(), hexCode)
-    },
-
-    /**
-    * @param {string} hexCode hexcode label of color block
-    * @description this function verfies the hexcode label of hover fill color block
-    */
-    verifyHoverFillColorHexCodeLabel: (hexCode) => {
-        utilities.verifyInnerText(customizeHighlightPropertiesComponent.hoverFillColorHexCodeLabel(), hexCode)
-    },
-
-    /**
-    * @param {string} hexCode hexcode label of color block
-    * @description this function verfies the hexcode label of hover border color block
-    */
-    verifyHoverBorderColorHexCodeLabel: (hexCode) => {
-        utilities.verifyInnerText(customizeHighlightPropertiesComponent.hoverBorderColorHexCodeLabel(), hexCode)
-    },
-
-    /**
-    * @param {string} hexCode hexcode label of color block
-    * @description this function verfies the hexcode label of active fill color block
-    */
-    verifyActiveFillColorHexCodeLabel: (hexCode) => {
-        utilities.verifyInnerText(customizeHighlightPropertiesComponent.activeFillColorHexCodeLabel(), hexCode)
-    },
-
-    /**
-    * @param {string} hexCode hexcode label of color block
-    * @description this function verfies the hexcode label of active fill color block
-    */
-    verifyActiveBorderColorHexCodeLabel: (hexCode) => {
-        utilities.verifyInnerText(customizeHighlightPropertiesComponent.activeBorderColorHexCodeLabel(), hexCode)
-    },
-
-    /**
-    * @param {string} opacityLabel opacity label of color block
-    * @description this function verfies the opacity label of default fill color block
-    */
-    verifyDefaultFillColorOpacityLabel: (opacityLabel) => {
-        utilities.verifyInnerText(customizeHighlightPropertiesComponent.defaultFillColorOpacityLabel(), opacityLabel)
-    },
-
-    /**
-    * @param {string} opacityLabel opacity label of color block
-    * @description this function verfies the opacity label of default border color block
-    */
-    verifyDefaultBorderColorOpacityLabel: (opacityLabel) => {
-        utilities.verifyInnerText(customizeHighlightPropertiesComponent.defaultBorderColorOpacityLabel(), opacityLabel)
-    },
-
-    /**
-    * @param {string} opacityLabel opacity label of color block
-    * @description this function verfies the opacity label of hover fill color block
-    */
-    verifyHoverFillColorOpacityLabel: (opacityLabel) => {
-        utilities.verifyInnerText(customizeHighlightPropertiesComponent.hoverFillColorOpacityLabel(), opacityLabel)
-    },
-
-    /**
-    * @param {string} opacityLabel opacity label of color block
-    * @description this function verfies the opacity label of hover border color block
-    */
-    verifyHoverBorderColorOpacityLabel: (opacityLabel) => {
-        utilities.verifyInnerText(customizeHighlightPropertiesComponent.hoverBorderColorOpacityLabel(), opacityLabel)
-    },
-
-    /**
-   * @param {string} opacityLabel opacity label of color block
-   * @description this function verfies the opacity label of active fill color block
-   */
-    verifyActiveFillColorOpacityLabel: (opacityLabel) => {
-        utilities.verifyInnerText(customizeHighlightPropertiesComponent.activeFillColorOpacityLabel(), opacityLabel)
-    },
-
-    /**
-    * @param {string} opacityLabel opacity label of color block
-    * @description this function verfies the opacity label of active border color block
-    */
-    verifyActiveBorderColorOpacityLabel: (opacityLabel) => {
-        utilities.verifyInnerText(customizeHighlightPropertiesComponent.activeBorderColorOpacityLabel(), opacityLabel)
-    },
-
-    verifyPatternAppliedOnActiveState: () => {
-        utilities.verifyElementVisibilityState(customizeHighlightPropertiesComponent.activeFillColorBlock().find('svg'), 'visible');
-    },
-
-    verifyHighlightColorDefaultContentCSS: () => {
-        utilities.verifyCSS(customizeHighlightPropertiesComponent.defaultLabel(), {
-            'color': css.color.labels,
-            'font-size': css.fontSize.normal,
-            'font-weight': css.fontWeight.semibold
-        });
-        const colorLabels = [customizeHighlightPropertiesComponent.defaultFillColorLabel, customizeHighlightPropertiesComponent.defaultBorderColorLabel]
-        for (let index = 0; index < colorLabels.length; index++) {
-            utilities.verifyCSS(colorLabels[index](), {
-                'color': css.color.labels,
-                'font-size': css.fontSize.normal,
-                'font-weight': css.fontWeight.regular
-            });
-        };
-        const hexCodeLabels = [customizeHighlightPropertiesComponent.defaultFillColorHexCodeLabel, customizeHighlightPropertiesComponent.defaultBorderColorHexCodeLabel]
-        for (let index = 0; index < hexCodeLabels.length; index++) {
-            utilities.verifyCSS(hexCodeLabels[index](), {
-                'color': css.color.placeholderText,
-                'font-size': css.fontSize.small,
-                'font-weight': css.fontWeight.semibold
-            });
-        };
-        const opacityLabels = [customizeHighlightPropertiesComponent.defaultFillColorOpacityLabel, customizeHighlightPropertiesComponent.defaultBorderColorOpacityLabel]
-        for (let index = 0; index < opacityLabels.length; index++) {
-            utilities.verifyCSS(opacityLabels[index](), {
-                'color': css.color.placeholderText,
-                'font-size': css.fontSize.small,
-                'font-weight': css.fontWeight.regular
-            });
-        };
-    },
-
-    verifyHighlightColorHoverContentCSS: () => {
-        utilities.verifyCSS(customizeHighlightPropertiesComponent.hoverLabel(), {
-            'color': css.color.labels,
-            'font-size': css.fontSize.normal,
-            'font-weight': css.fontWeight.semibold
-        });
-        const colorLabels = [customizeHighlightPropertiesComponent.hoverFillColorLabel, customizeHighlightPropertiesComponent.hoverBorderColorLabel]
-        for (let index = 0; index < colorLabels.length; index++) {
-            utilities.verifyCSS(colorLabels[index](), {
-                'color': css.color.labels,
-                'font-size': css.fontSize.normal,
-                'font-weight': css.fontWeight.regular
-            });
-        };
-        const hexCodeLabels = [customizeHighlightPropertiesComponent.hoverFillColorHexCodeLabel, customizeHighlightPropertiesComponent.hoverBorderColorHexCodeLabel]
-        for (let index = 0; index < hexCodeLabels.length; index++) {
-            utilities.verifyCSS(hexCodeLabels[index](), {
-                'color': css.color.placeholderText,
-                'font-size': css.fontSize.small,
-                'font-weight': css.fontWeight.semibold
-            });
-        };
-        const opacityLabels = [customizeHighlightPropertiesComponent.hoverFillColorOpacityLabel, customizeHighlightPropertiesComponent.hoverBorderColorOpacityLabel]
-        for (let index = 0; index < opacityLabels.length; index++) {
-            utilities.verifyCSS(opacityLabels[index](), {
-                'color': css.color.placeholderText,
-                'font-size': css.fontSize.small,
-                'font-weight': css.fontWeight.regular
-            });
-        };
-    },
-
-    verifyHighlightColorActiveContentCSS: () => {
-        utilities.verifyCSS(customizeHighlightPropertiesComponent.activeLabel(), {
-            'color': css.color.labels,
-            'font-size': css.fontSize.normal,
-            'font-weight': css.fontWeight.semibold
-        });
-        const colorLabels = [customizeHighlightPropertiesComponent.activeFillColorLabel, customizeHighlightPropertiesComponent.activeBorderColorLabel]
-        for (let index = 0; index < colorLabels.length; index++) {
-            utilities.verifyCSS(colorLabels[index](), {
-                'color': css.color.labels,
-                'font-size': css.fontSize.normal,
-                'font-weight': css.fontWeight.regular
-            });
-        };
-        const hexCodeLabels = [customizeHighlightPropertiesComponent.activeFillColorHexCodeLabel, customizeHighlightPropertiesComponent.activeBorderColorHexCodeLabel]
-        for (let index = 0; index < hexCodeLabels.length; index++) {
-            utilities.verifyCSS(hexCodeLabels[index](), {
-                'color': css.color.placeholderText,
-                'font-size': css.fontSize.small,
-                'font-weight': css.fontWeight.semibold
-            });
-        };
-        const opacityLabels = [customizeHighlightPropertiesComponent.activeFillColorOpacityLabel, customizeHighlightPropertiesComponent.activeBorderColorOpacityLabel]
-        for (let index = 0; index < opacityLabels.length; index++) {
-            utilities.verifyCSS(opacityLabels[index](), {
-                'color': css.color.placeholderText,
-                'font-size': css.fontSize.small,
-                'font-weight': css.fontWeight.regular
-            });
-        };
-    }
-}
-
-export const customizeHighlightPropertiesComponent = {
-    ...selectors,
-    steps
-}