itemengine-cypress-automation 1.0.2

package/cypress/pages/components/createQuestionBasePage.js

@@ -0,0 +1,225 @@
+import { createItemPage } from "../createItemPage";
+import { dialogBoxBase } from "../dialogBoxBase";
+import { selectQuestionResourceToolPage } from "../selectQuestionResourceToolPage";
+import { commonComponents } from "./commonComponents";
+import { questionInstructionsComponent } from "./questionInstructionsComponent";
+import { scoringSectionBase } from "./scoringSectionBase";
+const css = Cypress.env('css');
+
+const selectors = {
+    previewTab: () => cy.get('[data-ngie-testid="preview-tab"]'),
+    editTab: () => cy.get('[data-ngie-testid="edit-tab"]'),
+    headerTitle: () => cy.get('div[class*="HeaderComponentstyles__BlockLabel"]'),
+    cancelButton: () => cy.get('[class*="header-wrapper"] .ngie-button').eq(0),
+    saveQuestionButton: () => cy.get('[class*="header-wrapper"] .ngie-button').eq(1),
+    editTabWrapper: () => cy.get('[class*="EditTabWrapper"]')
+}
+
+const steps = {
+    navigateToCreateQuestion: (questionType) => {
+        cy.visit('/item-engine/demo/create-item');
+        createItemPage.steps.clickOnAddQuestion();
+        selectQuestionResourceToolPage.steps.selectQuestionType(questionType);
+    },
+
+    navigateToCreateResource: (resourceType) => {
+        cy.visit('/item-engine/demo/create-item');
+        createItemPage.steps.clickOnAddResource();
+        selectQuestionResourceToolPage.steps.selectResourceType(resourceType);
+    },
+
+    switchToEditTab: () => {
+        createQuestionBasePage.editTab()
+            .click()
+            .should('have.attr', 'aria-selected', 'true');
+    },
+
+    switchToPreviewTab: () => {
+        createQuestionBasePage.previewTab()
+            .click()
+            .should('have.attr', 'aria-selected', 'true');
+    },
+
+    saveAQuestionAndVerifySnackbar: () => {
+        createQuestionBasePage.saveQuestionButton()
+            .click();
+        commonComponents.snackbar()
+            .should('have.text', 'Saved successfully!')
+            .should('be.visible');
+    },
+
+    //V3 - This function should be updated in all files
+    resetQuestionPreview: () => {
+        cy.log('Switching to edit tab and back to preview tab to reset the question preview')
+        createQuestionBasePage.steps.switchToEditTab();
+        createQuestionBasePage.steps.switchToPreviewTab();
+    }
+}
+
+const tests = {
+    verifyCreateQuestionPageQuestionTypeHeader: (questionType) => {
+        it('CSS of Header section', { tags: 'css' }, () => {
+            createItemPage.createQuestionPageQuestionTypeHeader()
+                .verifyCSS(css.color.questionHeading, css.fontSize.heading, css.fontWeight.bold);
+            createQuestionBasePage.cancelButton()
+                .verifyCSS(css.color.secondaryBtn, css.fontSize.default, css.fontWeight.semibold)
+                .should('have.css', 'background-color', css.color.transparent);
+            createQuestionBasePage.saveQuestionButton()
+                .verifyCSS(css.color.successBtn, css.fontSize.default, css.fontWeight.semibold)
+                .should('have.css', 'background-color', css.color.successBtnBg);
+        });
+
+        it(`Accessibility of ${questionType} Header section`, { tags: 'a11y' }, () => {
+            cy.checkAccessibility(createItemPage.createQuestionPageQuestionTypeHeader().parents('[class*="header-wrapper"]'));
+        });
+
+        it(`${questionType} label should be displayed`, () => {
+            createItemPage.createQuestionPageQuestionTypeHeader()
+                .verifyInnerText(questionType);
+        });
+
+        it('\'Cancel\' button should be displayed', () => {
+            createQuestionBasePage.cancelButton()
+                .verifyInnerText('Cancel');
+        });
+
+        it('\'Save\' button should be displayed', () => {
+            if (questionType === 'Passage' || questionType === 'Reading ruler' || questionType === 'Audio Player') {
+                createQuestionBasePage.saveQuestionButton()
+                    .verifyInnerText('Save');
+            }
+            else {
+                createQuestionBasePage.saveQuestionButton()
+                    .verifyInnerText('Save question');
+            }
+        });
+    },
+
+    verifyCancelButton: (questionType) => {
+        it('When user has made no edits and clicks on cancel button, the user should be directed back to the \'Select a Question\' page', () => {
+            createQuestionBasePage.cancelButton()
+                .click();
+            selectQuestionResourceToolPage.selectAQuestionHeaderText()
+                .should('be.visible');
+            selectQuestionResourceToolPage.questionTypeOptionTitle()
+                .should('be.visible');
+        });
+
+        it('When user has made some edits/changes and clicks on cancel button, a popup should be displayed with message \'Are you sure you want to leave this page? Your changes have not been saved.\'', () => {
+            selectQuestionResourceToolPage.steps.selectQuestionType(questionType);
+            questionInstructionsComponent.questionInstructionsInputField()
+                .should('be.visible')
+                .type('Edited')
+                .should('have.text', 'Edited');
+            if (questionType !== 'feedback scale') {
+                scoringSectionBase.steps.allotPoints(20);
+            };
+            createQuestionBasePage.cancelButton()
+                .click();
+            dialogBoxBase.dialogBox()
+                .should('be.visible');
+            dialogBoxBase.dialogBoxContent()
+                .verifyInnerText('Are you sure you want to leave this page? Your changes have not been saved.');
+            dialogBoxBase.buttonAccept()
+                .verifyInnerText('Yes, I want to leave this page');
+            dialogBoxBase.buttonReject()
+                .verifyInnerText('No, I\'d like to go back');
+        });
+
+        it('CSS of popup', { tags: 'css' }, () => {
+            dialogBoxBase.dialogBox()
+                .should('have.css', 'background-color', css.color.defaultBackground);
+            dialogBoxBase.dialogBoxContent()
+                .verifyCSS(css.color.sectionHeading, css.fontSize.default, css.fontWeight.regular);
+            dialogBoxBase.buttonAccept()
+                .verifyCSS(css.color.primaryBtn, css.fontSize.default, css.fontWeight.semibold)
+                .should('have.css', 'background-color', css.color.primaryBtnBg);
+            dialogBoxBase.buttonReject()
+                .verifyCSS(css.color.secondaryBtn, css.fontSize.default, css.fontWeight.semibold)
+                .should('have.css', 'background-color', css.color.transparent);
+        });
+
+        it('Accessibility of popup', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(dialogBoxBase.dialogBox());
+        });
+
+        it(`Clicking on \'No, I'd like to go back\' button should close the popup and user should remain on the edit interface of the question`, () => {
+            dialogBoxBase.buttonReject()
+                .click();
+            createQuestionBasePage.editTab()
+                .should('have.attr', 'aria-selected')
+                .and('eq', 'true');
+            questionInstructionsComponent.questionInstructionsInputField()
+                .verifyInnerText('Edited');
+        });
+
+        it(`Clicking on \'Yes, I want to leave this page\' button should should discard all changes and direct the user to the \'Select a question\' page.`, () => {
+            createQuestionBasePage.cancelButton()
+                .click();
+            dialogBoxBase.buttonAccept()
+                .click();
+            selectQuestionResourceToolPage.selectAQuestionHeaderText()
+                .should('be.visible');
+            selectQuestionResourceToolPage.questionTypeOptionTitle()
+                .should('be.visible');
+        });
+    },
+
+    verifySavedSuccessfullySnackbarCSSanda11y: () => {
+        it('CSS of Saved successfully snackbar', { tags: 'css' }, () => {
+            commonComponents.snackbar()
+                .verifyCSS(css.color.whiteText, css.fontSize.normal, css.fontWeight.regular);
+        });
+
+        it('Accessibility of Saved successfully snackbar', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(commonComponents.snackbar());
+        });
+    },
+
+    verifyTabsSection: () => {
+        it('CSS of Tabs section', { tags: 'css' }, () => {
+            //CSS of active Edit tab
+            createQuestionBasePage.editTab()
+                .verifyCSS(css.color.activeButtons, css.fontSize.default, css.fontWeight.bold);
+            //CSS of inactive Preview tab
+            createQuestionBasePage.previewTab()
+                .verifyCSS(css.color.sectionHeading, css.fontSize.default, css.fontWeight.bold);
+        });
+
+        //Note: a11y covered in Header section
+
+        it('\'Edit\' and \'Preview\' tabs should be present', () => {
+            createQuestionBasePage.editTab()
+                .verifyInnerText('Edit');
+            createQuestionBasePage.previewTab()
+                .verifyInnerText('Preview');
+        });
+
+        it('\'Edit\' tab should be selected by default', () => {
+            createQuestionBasePage.editTab()
+                .should('have.attr', 'aria-selected', 'true');
+        });
+
+        it('User should be able to switch to the \'Preview\' tab', () => {
+            createQuestionBasePage.steps.switchToPreviewTab();
+            createQuestionBasePage.editTab()
+                .should('not.have.class', 'active');
+            createQuestionBasePage.editTabWrapper()
+                .should('not.be.visible');
+        });
+
+        it('User should be able to switch back to the \'Edit\' tab', () => {
+            createQuestionBasePage.steps.switchToEditTab();
+            createQuestionBasePage.editTab()
+                .should('have.attr', 'aria-selected', 'true');
+            createQuestionBasePage.editTabWrapper()
+                .should('be.visible');
+        });
+    }
+}
+
+export const createQuestionBasePage = {
+    ...selectors,
+    steps,
+    tests
+}

package/cypress/pages/components/customizeHighlightPropertiesComponent.js

@@ -0,0 +1,318 @@
+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.hoverFillColorBlock()
+            .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
+}