itemengine-cypress-automation 1.0.2

package/cypress/pages/components/colorPopupComponent.js

@@ -0,0 +1,293 @@
+import utilities from "../../support/helpers/utilities";
+const css = Cypress.env('css');
+
+const selectors = {
+    colorBlock: () => cy.get('.color-picker-block'),
+    colorSaturationPalette: () => cy.get('.react-colorful__saturation'),
+    colorSaturationPicker: () => cy.get('.react-colorful__saturation-pointer .react-colorful__pointer-fill'),
+    colorHuePalette: () => cy.get('.react-colorful__hue'),
+    colorHuePicker: () => cy.get('.react-colorful__hue-pointer .react-colorful__pointer-fill'),
+    selectedColorLabel: () => cy.get('[class*="ColorPickerstyles__SelectedColorWrapper"]'),
+    selectedColorBlock: () => cy.get('.color-wrapper'),
+    hexLabel: () => cy.get('.hex-settings-wrapper .inline-text-property-label'),
+    hexInputField: () => cy.get('.hex-settings-wrapper input'),
+    opacityLabel: () => cy.get('[class*="ColorPickerstyles__SliderWrapper"]'),
+    opacitySlider: () => cy.get('[class*="ColorPickerstyles__SliderWrapper"] .color-slider'),
+    opacityInputField: () => cy.get('.opacity-wrapper [aria-label="Opacity"]'),
+    recommendedColorsLabel: () => cy.get('.color-picker-footer-wrapper'),
+    recommendedColorBlock: () => cy.get('[class*="ColorPickerstyles__ColorBlockWrapper"] .color-picker-block'),
+    recommendedColorBlockSelectedIcon: () => cy.get('.selected-button-icon'),
+    recommendedColorBlockLabel: () => cy.get('[class*="ColorPickerstyles__ColorLabel"]'),
+    cancelButton: () => cy.get('.compact-popup-action-button-wrapper button').eq(0),
+    okButton: () => cy.get('.compact-popup-action-button-wrapper button').eq(1),
+    dialogBox: () => cy.get('[aria-describedby="alert-dialog-description"]'),
+    dialogBoxTitle: () => cy.get('#alert-dialog-title')
+}
+
+const steps = {
+    /**
+     * @param {string} color on the saturation palette in rgb format
+     * @description this function is used to verify color on the saturation palette
+     */
+    verifySaturationPaletteColor: (color) => {
+        utilities.verifyCSS(colorPopupComponent.colorSaturationPicker(), {
+            'background-color': color
+        });
+    },
+
+    /**
+     * @param {string} color on the hue palette in rgb format
+     * @description this function is used to verify color on the hue palette
+     */
+    verifyHuePaletteColor: (color) => {
+        utilities.verifyCSS(colorPopupComponent.colorHuePicker(), {
+            'background-color': color
+        });
+    },
+
+    /**
+     * @param {string} hexValue value of the color in hex code format
+     * @description this function is used to verify the hex code value in the hex input field of the color popup
+     */
+    verifyHexValue: (hexValue) => {
+        colorPopupComponent.hexInputField()
+            .should('have.value', hexValue)
+    },
+
+    /**
+     * @param {string} color in the selected color block in rgb/rgba format
+     * @description this function is used to verify in the selected color block of the color popup
+     */
+    verifySelectedColorBlock: (color) => {
+        utilities.verifyCSS(colorPopupComponent.selectedColorBlock(), {
+            'background-color': color
+        });
+    },
+
+    /**
+     * @param {string} opacityValue value of opacity of the selected color
+     * @description this function is used to verify the opacity value in the opacity input field
+     */
+    verifyOpacityInputFieldValue: (opacityValue) => {
+        colorPopupComponent.opacityInputField()
+            .should('have.value', opacityValue)
+    },
+
+    /**
+     * @param {string} opacityValue value of opacity of the selected color on the opacity slider
+     * @description this function is used to verify the opacity value on the opacity slider
+     */
+    verifyOpacitySliderValue: (opacityValue) => {
+        colorPopupComponent.opacitySlider()
+            .find('input')
+            .should('have.value', opacityValue)
+    },
+
+    clickOnColorBlock: (optionAccordionIndex) => {
+        colorPopupComponent.colorBlock()
+            .eq(optionAccordionIndex)
+            .click();
+    },
+
+    clickInColorSaturationPalette: () => {
+        colorPopupComponent.colorSaturationPalette()
+            .click();
+    },
+
+    clickInColorHuePalette: () => {
+        colorPopupComponent.colorHuePalette()
+            .click();
+    },
+
+    addInputToHexInputField: (value) => {
+        colorPopupComponent.hexInputField()
+            .clear()
+            .type(value, { delay: 0 })
+    },
+
+    clickOnOpacitySlider: () => {
+        colorPopupComponent.opacitySlider()
+            .click();
+    },
+
+    /**
+     * @param {number} blockIndex index of the color block in the recommended colors section
+     * @description this function is used to select a recommended color block
+     */
+    selectRecommendedColorBlock: (blockIndex) => {
+        colorPopupComponent.recommendedColorBlock()
+            .eq(blockIndex)
+            .click();
+    },
+
+    /**
+     * @param {string} value to be entered in the opacity input field
+     * @description this function is used to add input to the opacity input field
+     */
+    addInputToOpacityInputField: (value) => {
+        colorPopupComponent.opacityInputField()
+            .clear()
+            .type(value, { delay: 0 })
+    },
+
+    clickOnCancelButton: () => {
+        colorPopupComponent.cancelButton()
+            .click();
+    },
+
+    clickOnOkButton: () => {
+        colorPopupComponent.okButton()
+            .click();
+    },
+
+    /**
+    * @param {number} optionAccordionIndex index of the option accordion
+    * @param {string} color to be verified present on the color block of an option accordion in rgb format
+    * @description this function is used to verify the color of the color block in an option accordion
+    */
+    verifyColorBlockInOptionAccordion: (optionAccordionIndex, color) => {
+        utilities.verifyCSS(colorPopupComponent.colorBlock().eq(optionAccordionIndex), {
+            'background-color': color
+        });
+    },
+
+    verifyColorPopupIsDisplayed: () => {
+        utilities.verifyElementVisibilityState(colorPopupComponent.dialogBox(), 'visible');
+    },
+
+    verifyColorPopupSelectColorTitle: () => {
+        utilities.verifyInnerText(colorPopupComponent.dialogBoxTitle(), 'Select color');
+        utilities.verifyElementVisibilityState(colorPopupComponent.dialogBoxTitle(), 'visible');
+    },
+
+    verifyColorSaturationPaletteAndPicker: () => {
+        utilities.verifyElementVisibilityState(colorPopupComponent.colorSaturationPalette(), 'visible');
+        utilities.verifyElementVisibilityState(colorPopupComponent.colorSaturationPicker(), 'visible');
+    },
+
+    verifyColorHuePaletteAndPicker: () => {
+        utilities.verifyElementVisibilityState(colorPopupComponent.colorHuePalette(), 'visible');
+        utilities.verifyElementVisibilityState(colorPopupComponent.colorHuePicker(), 'visible');
+    },
+
+    verifySelectedColorLabelAndSelectedColorBlock: () => {
+        utilities.verifyInnerText(colorPopupComponent.selectedColorLabel(), 'Selected color');
+        utilities.verifyElementVisibilityState(colorPopupComponent.selectedColorLabel(), 'visible');
+        utilities.verifyElementVisibilityState(colorPopupComponent.selectedColorBlock(), 'visible');
+    },
+
+    verifyHexLabelAndInputField: () => {
+        utilities.verifyInnerText(colorPopupComponent.hexLabel(), 'Hex');
+        utilities.verifyElementVisibilityState(colorPopupComponent.hexLabel(), 'visible');
+        utilities.verifyElementVisibilityState(colorPopupComponent.hexInputField(), 'visible');
+    },
+
+    verifyOpacityLabelSliderAndInputField: () => {
+        utilities.verifyInnerText(colorPopupComponent.opacityLabel(), 'Opacity');
+        utilities.verifyElementVisibilityState(colorPopupComponent.opacityLabel(), 'visible');
+        utilities.verifyElementVisibilityState(colorPopupComponent.opacitySlider(), 'visible');
+        utilities.verifyElementVisibilityState(colorPopupComponent.opacityInputField(), 'visible');
+    },
+
+    verifyRecommendedColorsLabel: () => {
+        colorPopupComponent.recommendedColorsLabel()
+            .should('contain', 'Recommended colors');
+    },
+
+    verifyRecommendedColorBlocksLabel: () => {
+        const recommendedColors = ['Red', 'Yellow', 'Green', 'Black'];
+        const colorValues = ['rgb(229, 76, 25)', 'rgb(255, 240, 25)', 'rgb(9, 179, 33)', 'rgb(0, 0, 0)'];
+        utilities.verifyElementCount(colorPopupComponent.recommendedColorBlock(), 4);
+        recommendedColors.forEach((color, blockIndex) => {
+            colorPopupComponent.steps.verifyRecommendedColorBlock(blockIndex, color, colorValues[blockIndex]);
+        });
+    },
+
+    verifyColorPopupCancelButton: () => {
+        utilities.verifyInnerText(colorPopupComponent.cancelButton(), 'Cancel');
+        utilities.verifyElementVisibilityState(colorPopupComponent.cancelButton(), 'visible');
+    },
+
+    verifyColorPopupOkButton: () => {
+        utilities.verifyInnerText(colorPopupComponent.okButton(), 'Ok');
+        utilities.verifyElementVisibilityState(colorPopupComponent.okButton(), 'visible');
+    },
+
+    /**
+     * @param {number} blockIndex index of the color block in the recommended colors section
+     * @param {string} colorLabel label of the recommended color block
+     * @param {string} color recommended color in rgb format
+     * @description this function verifies the label and color of the recommended color block
+     */
+    verifyRecommendedColorBlock: (blockIndex, colorLabel, color) => {
+        utilities.verifyCSS(colorPopupComponent.recommendedColorBlock().eq(blockIndex), {
+            'background-color': color
+        });
+        utilities.verifyInnerText(colorPopupComponent.recommendedColorBlockLabel().eq(blockIndex), colorLabel);
+    },
+
+    /**
+     * @param {number} blockIndex index of the color block in the recommended colors section
+     * @description this function verifies the selected state of a recommended color block
+     */
+    verifyRecommendedColorBlockSelectedState: (blockIndex) => {
+        colorPopupComponent.recommendedColorBlock()
+            .eq(blockIndex)
+            .within(() => {
+                utilities.verifyElementVisibilityState(colorPopupComponent.recommendedColorBlockSelectedIcon(), 'visible');
+            });
+    }
+}
+
+const tests = {
+    verifyCSSAnda11yOfColourPopupContents: () => {
+        it('CSS of color popup contents', { tags: 'css' }, () => {
+            const labels = [colorPopupComponent.selectedColorLabel, colorPopupComponent.hexLabel, colorPopupComponent.opacityLabel, colorPopupComponent.recommendedColorsLabel]
+            const inputFields = [colorPopupComponent.hexInputField, colorPopupComponent.opacityInputField];
+            labels.forEach(label => {
+                utilities.verifyCSS(label(), {
+                    'color': css.color.labels,
+                    'font-size': css.fontSize.normal,
+                    'font-weight': css.fontWeight.semibold
+
+                });
+            });
+            inputFields.forEach(inputField => {
+                utilities.verifyCSS(inputField(), {
+                    'color': css.color.text,
+                    'font-size': css.fontSize.default,
+                    'font-weight': css.fontWeight.regular
+
+                });
+            });
+            utilities.verifyCSS(colorPopupComponent.recommendedColorBlockLabel(), {
+                'color': css.color.labelText,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.regular
+            });
+            utilities.verifyCSS(colorPopupComponent.okButton(), {
+                'color': css.color.text,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular,
+                'background-color': css.color.successBtnBg
+            });
+            utilities.verifyCSS(colorPopupComponent.cancelButton(), {
+                'color': css.color.secondaryBtn,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular,
+                'background-color': css.color.secondaryBtnBg
+            });
+        });
+
+        //Failing due to https://redmine.zeuslearning.com/issues/539391
+        it('Accessibility of color popup contents', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(colorPopupComponent.dialogBox());
+        });
+    }
+}
+
+export const colorPopupComponent = {
+    ...selectors,
+    steps,
+    tests
+}

package/cypress/pages/components/commonComponents.js

@@ -0,0 +1,93 @@
+import utilities from "../../support/helpers/utilities";
+
+const css = Cypress.env('css');
+
+const selectors = {
+    previewTabQuestionWrapper: () => cy.get('.edit-question-preview-wrapper'),
+    tooltipText: () => cy.get('.MuiTooltip-tooltip'),
+    snackbar: () => cy.get('.MuiSnackbarContent-message'),
+    snackbarCloseButton: () => cy.get('.MuiSnackbarContent-action'),
+    errorMessage: () => cy.get('.error-text-message'),
+    nextGenCreateItemWrapper: () => cy.get('#nextgen-assess-create-item'),
+    dropdownList: () => cy.get('.dropdown-list'),
+    dragHandleButton: () => cy.get('.dragicon-button'),
+    deleteButton: () => cy.get('button[aria-label*="Delete option"]'),
+    tickIconForOptionButtons: () => cy.get('.ngie-toggle-button-tick-icon')
+}
+
+const steps = {
+    //Note: The functions below need to be used henceforth 
+    verifyDeleteButtonDisabled: () => {
+        commonComponents.deleteButton()
+            .should('be.disabled');
+    },
+
+    verifyDeleteButtonEnabled: () => {
+        commonComponents.deleteButton()
+            .should('be.enabled');
+    },
+
+    verifyErrorMessageIsNotDisplayed: () => {
+        commonComponents.errorMessage()
+            .should('not.exist');
+    },
+
+    //V3 - Need to update in all files
+    verifyDragHandleButtonTooltip: () => {
+        commonComponents.dragHandleButton()
+            .eq(0)
+            .verifyTooltip('Drag to reorder');
+    },
+
+    //V3 - Need to update in all files
+    verifyDeleteButtonTooltip: () => {
+        commonComponents.deleteButton()
+            .eq(0)
+            .verifyTooltip('Delete option');
+    },
+
+    //V3 - Need to update in all files
+    verifyDisabledDeleteButtonTooltip: () => {
+        commonComponents.deleteButton()
+            .eq(0)
+            .trigger('mouseover', { force: true })
+        commonComponents.tooltipText()
+            .should('have.text', 'Minimum two options are required');
+        commonComponents.deleteButton()
+            .eq(0)
+            .trigger('mouseout', { force: true });
+        commonComponents.tooltipText()
+            .should('not.exist');
+    },
+
+    closeSnackBar: () => {
+        commonComponents.snackbarCloseButton()
+            .click();
+        utilities.verifyElementVisibilityState(commonComponents.snackbar(), 'notExist');
+    }
+}
+
+const tests = {
+    verifya11yOfCreateItemWrapperContents: () => {
+        it('Accessibility of create item wrapper contents', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(commonComponents.nextGenCreateItemWrapper())
+        });
+    },
+
+    verifyCSSAnda11yOfErrorMessage: () => {
+        it('CSS of error message', { tags: 'css' }, () => {
+            commonComponents.errorMessage()
+                .verifyCSS(css.color.errorText, css.fontSize.small, css.fontWeight.regular);
+        });
+
+        it('Accessibility of error message', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(commonComponents.errorMessage());
+        });
+    }
+}
+
+export const commonComponents = {
+    ...selectors,
+    steps,
+    tests
+}

package/cypress/pages/components/createCustomCategoryFlyout.js

@@ -0,0 +1,138 @@
+import { equationEditorCategoriesAndSymbols } from "../../fixtures/equationEditorCategoriesAndSymbols ";
+import { dialogBoxBase } from "../dialogBoxBase";
+import { essayResponsePage } from "../essayResponsePage";
+
+const selectors = {
+    ...dialogBoxBase,
+    createCustomCategoryFlyoutTitle: () => cy.get('.custom-category-popup-header'),
+    categoryNameLabel: () => cy.get('.custom-category-flyout-content .input-label').eq(0),
+    categoryIconLabel: () => cy.get('.custom-category-flyout-content .input-label').eq(1),
+    selectedSymbolsLabel: () => cy.get('.custom-category-flyout-content .input-label').eq(2),
+    selectSymbolsToDisplayLabel: () => cy.get('.custom-category-flyout-content .input-label').eq(3),
+    categoryNameInputField: () => cy.get('.input-field-custom-category input').eq(0),
+    categoryIconInputField: () => cy.get('.input-field-custom-category input').eq(1),
+    selectedSymbols: () => cy.get('.EqEditorPopup .drag-item-flex-parent-wrapper'),
+    selectedSymbolsWrapper: () => cy.get('.EqEditorPopup.essay-response-grid-wrapper'),
+    categoryAccordions: () => cy.get('.accordian-structure-equation-editor .MuiExpansionPanelSummary-root'),
+    categoryAccordionIcon: () => cy.get('[class*="expandIcon"]'),
+    categoryAccordionCheckbox: () => cy.get('.accordian-checkbox [type="checkbox"]'),
+    categoryAccordionLabel: () => cy.get('.accordian-label'),
+    buttonSave: () => cy.get('.action-btn-wrapper button').eq(0),
+    buttonCancel: () => cy.get('.action-btn-wrapper button').eq(1),
+    cateogoryCharacters: (ariaLabel = null) => {
+        if (ariaLabel) {
+            return cy.get(`.icon-button-custom-format[aria-label="${ariaLabel}"]`)
+        } else {
+            return cy.get('.icon-button-custom-format')
+        }
+    },
+    selectedCharacterDragIcon: () => cy.get('.drag-icon-button-custom-format')
+}
+
+const steps = {
+    createCustomCategoryWithMultipleCategoryCharacters: () => {
+        cy.log('Creating a custom category by selecting \'Keypad\' category, partially selecting \'Basic\' and \'Greek\' categories')
+        essayResponsePage.createCustomCategoryButton()
+            .click();
+        createCustomCategoryFlyout.categoryAccordions()
+            .contains(`${equationEditorCategoriesAndSymbols['keypad'].displayName}`)
+            .parents('.accordian-structure-equation-editor')
+            .within(() => {
+                createCustomCategoryFlyout.categoryAccordionCheckbox()
+                    .click();
+            });
+        createCustomCategoryFlyout.categoryAccordions()
+            .contains(`${equationEditorCategoriesAndSymbols['basic'].displayName}`)
+            .parents('.accordian-structure-equation-editor')
+            .within(() => {
+                createCustomCategoryFlyout.categoryAccordionCheckbox()
+                    .should('have.attr', 'data-indeterminate', 'true');
+            });
+        createCustomCategoryFlyout.categoryAccordions()
+            .contains(`${equationEditorCategoriesAndSymbols['greek'].displayName}`)
+            .click()
+            .parents('.accordian-structure-equation-editor')
+            .within(() => {
+                createCustomCategoryFlyout.cateogoryCharacters(equationEditorCategoriesAndSymbols.greek.symbols.gamma.ariaLabel)
+                    .click();
+                createCustomCategoryFlyout.cateogoryCharacters(equationEditorCategoriesAndSymbols.greek.symbols.delta.ariaLabel)
+                    .click();
+            });
+        createCustomCategoryFlyout.categoryNameInputField()
+            .type('Custom category with name.');
+        createCustomCategoryFlyout.buttonSave()
+            .click();
+        createCustomCategoryFlyout.dialogBox()
+            .should('not.exist');
+    },
+
+    createCustomCategory: () => {
+        cy.log('Creating a category by selecting \'Arrows\' category')
+        essayResponsePage.createCustomCategoryButton()
+            .click();
+        createCustomCategoryFlyout.categoryAccordions()
+            .contains(`${equationEditorCategoriesAndSymbols['arrows'].displayName}`)
+            .parents('.accordian-structure-equation-editor')
+            .within(() => {
+                createCustomCategoryFlyout.categoryAccordionCheckbox()
+                    .click();
+            });
+        createCustomCategoryFlyout.categoryNameInputField()
+            .type('Custom category with name and icon.');
+        createCustomCategoryFlyout.categoryIconInputField()
+            .type('#');
+        createCustomCategoryFlyout.buttonSave()
+            .click();
+    }
+}
+
+const tests = {
+    verifyCustomCategoryFlyoutContents: (categoryName) => {
+        it(`On clicking the ${equationEditorCategoriesAndSymbols[categoryName].displayName} category accordion the category should be expanded`, () => {
+            createCustomCategoryFlyout.categoryAccordionLabel()
+                .contains(`${equationEditorCategoriesAndSymbols[categoryName].displayName}`, { matchCase: false })
+                .click()
+                .parents('.accordian-structure-equation-editor')
+                .within(() => {
+                    createCustomCategoryFlyout.categoryAccordionIcon()
+                        .should('have.class', 'Mui-expanded');
+                });
+        });
+
+        it(`The ${equationEditorCategoriesAndSymbols[categoryName].displayName} category accordian should display all the ${equationEditorCategoriesAndSymbols[categoryName].displayName} category Symbols. By default, all the symbols should be deselected`, () => {
+            const symbolsArray = Object.values(equationEditorCategoriesAndSymbols[categoryName].symbols)
+            createCustomCategoryFlyout.categoryAccordions()
+                .contains(`${equationEditorCategoriesAndSymbols[categoryName].displayName}`, { matchCase: false })
+                .parents('.accordian-structure-equation-editor')
+                .within(() => {
+                    createCustomCategoryFlyout.cateogoryCharacters()
+                        .should('not.have.class', 'Mui-selected')
+                        .each(($el, index) => {
+                            cy.wrap($el)
+                                .invoke('attr', 'aria-label')
+                                .then((ariaLabel) => {
+                                    const expectedValue = symbolsArray[index].ariaLabel;
+                                    expect(ariaLabel.trim().toLowerCase()).to.equal(expectedValue.toLowerCase());
+                                    if (symbolsArray[index].textElement) {
+                                        cy.wrap($el)
+                                            .verifyInnerText(symbolsArray[index].textElement)
+                                    }
+                                });
+                        });
+                });
+        });
+
+        it(`On clicking the expanded ${equationEditorCategoriesAndSymbols[categoryName].displayName} category accordion the category should collapse`, () => {
+            createCustomCategoryFlyout.categoryAccordions()
+                .contains(`${equationEditorCategoriesAndSymbols[categoryName].displayName}`, { matchCase: false })
+                .click()
+                .should('not.have.class', 'Mui-expanded');
+        });
+    }
+}
+
+export const createCustomCategoryFlyout = {
+    ...selectors,
+    steps,
+    tests
+}