itemengine-cypress-automation 1.0.2

package/cypress/pages/components/editCategoryFlyout.js

@@ -0,0 +1,40 @@
+import { equationEditorCategoriesAndSymbols } from "../../fixtures/equationEditorCategoriesAndSymbols ";
+import { dialogBoxBase } from "../dialogBoxBase";
+import { essayResponsePage } from "../essayResponsePage";
+
+const selectors = {
+    ...dialogBoxBase,
+    selectSymbolsToDisplayLabel: () => cy.get('.select-to-display'),
+    categoryLabel: () => cy.get('.accordian-label'),
+    categoryCheckbox: () => cy.get('.accordian-checkbox input[type="checkbox"]'),
+    categoryCharacters: (ariaLabel = null) => {
+        if (ariaLabel) {
+            return cy.get(`.edit-custom-category-flyout .icon-button-custom-format[aria-label="${ariaLabel}"]`)
+        } else {
+            return cy.get('.edit-custom-category-flyout .icon-button-custom-format')
+        }
+    },
+    characterDragIcon: () => cy.get('.drag-icon-button-custom-format'),
+    characterTickIcon: () => cy.get('.tick-icon-wrapper'),
+    buttonReset: () => cy.get('.reset-btn-equation-editor'),
+    resetIcon: () => cy.get('.reset-btn-icon-wrapper svg'),
+    buttonSave: () => cy.get('.action-btn-wrapper button').eq(0),
+    buttonCancel: () => cy.get('.action-btn-wrapper button').eq(1)
+}
+
+const steps = {
+    openEditCategoryFlyout: () => {
+        essayResponsePage.equationEditorSectionCategories()
+            .contains(`${equationEditorCategoriesAndSymbols['keypad'].displayName}`)
+            .parents('[id*="DraggableItem"]')
+            .within(() => {
+                essayResponsePage.equationEditorSectionCategoriesEditIcon()
+                    .click();
+            });
+    }
+}
+
+export const editCategoryFlyout = {
+    ...selectors,
+    steps
+}

package/cypress/pages/components/equationEditorFlyout.js

@@ -0,0 +1,158 @@
+import { equationEditorCategoriesAndSymbols } from "../../fixtures/equationEditorCategoriesAndSymbols ";
+import constants from "../../fixtures/constants";
+import { dialogBoxBase } from "../dialogBoxBase";
+import { essayResponsePage } from "../essayResponsePage";
+const css = Cypress.env('css');
+
+const selectors = {
+    ...dialogBoxBase,
+    buttonOk: () => cy.get('.ok-btn'),
+    previewInputField: () => cy.get('.mq-editable-field'),
+    categoryTab: (categoryName = null) => {
+        if (categoryName) {
+            return cy.get('.tool-wrapper').contains(categoryName)
+        } else {
+            return cy.get('.tool-wrapper')
+        }
+    },
+    categoryCharactersWrapper: () => cy.get('.subtools-container'),
+    categoryCharacters: (ariaLabel = null) => {
+        if (ariaLabel) {
+            return cy.get(`.subtools-icon-wrapper[tabindex="0"][aria-label="${ariaLabel}"]`)
+        } else {
+            return cy.get('.subtools-icon-wrapper[tabindex="0"]')
+        }
+    },
+    categoryTabIcon: () => cy.get('.tool-icon-wrapper'),
+    categoryTabTitle: () => cy.get('.tool-title'),
+    buttonCancel: () => cy.get('.cancel-btn'),
+    buttonNext: () => cy.get('.next-btn'),
+    buttonPrevious: () => cy.get('.previous-btn'),
+    inputFieldCursor: () => cy.get('.mq-hasCursor'),
+    inputFieldFirstEmptyBox: () => cy.get('.mq-empty').eq(0),
+    categoryTooltip: () => cy.get('.__react_component_tooltip')
+}
+
+const steps = {
+    addGenericEquationUsingEquationEditorToCKEditorInputField: () => {
+        equationEditorFlyout.categoryTab(equationEditorCategoriesAndSymbols['basic'].displayName)
+            .click();
+        equationEditorFlyout.previewInputField()
+            .type('x');
+        equationEditorFlyout.categoryCharacters(equationEditorCategoriesAndSymbols.basic.symbols.equalTo.ariaLabel)
+            .click()
+        equationEditorFlyout.categoryCharacters(equationEditorCategoriesAndSymbols.basic.symbols.cubeRoot.ariaLabel)
+            .click()
+        equationEditorFlyout.inputFieldCursor()
+            .type('8{rightarrow}');
+        equationEditorFlyout.categoryCharacters(equationEditorCategoriesAndSymbols.basic.symbols.comma.ariaLabel)
+            .click();
+        equationEditorFlyout.previewInputField()
+            .type('What is the value of x');
+        equationEditorFlyout.categoryCharacters(equationEditorCategoriesAndSymbols.basic.symbols.questionMark.ariaLabel)
+            .click();
+        equationEditorFlyout.previewInputField()
+            .contains(constants.CKEditorEquationEditorPopupInputFieldEnteredEquationText);
+        equationEditorFlyout.buttonOk()
+            .click();
+    }
+}
+
+const tests = {
+    verifyEquationEditorFlyoutCategoryTooltip: (categoryName) => {
+        it(`When user hovers over the ${equationEditorCategoriesAndSymbols[categoryName].displayName} category a ${equationEditorCategoriesAndSymbols[categoryName].displayName} tooltip should be displayed`, () => {
+            equationEditorFlyout.categoryTab()
+                .contains(`${equationEditorCategoriesAndSymbols[categoryName].displayName}`, { matchCase: false })
+                .parents('.tool-wrapper')
+                .as('tool-wrapper')
+                .within(() => {
+                    equationEditorFlyout.categoryTabTitle()
+                        .realHover();
+                });
+            equationEditorFlyout.categoryTooltip()
+                .verifyInnerText(`${equationEditorCategoriesAndSymbols[categoryName].displayName}`)
+            cy.get('@tool-wrapper')
+                .within(() => {
+                    equationEditorFlyout.categoryTabTitle()
+                        .trigger('mouseout');
+                });
+            equationEditorFlyout.categoryTooltip()
+                .should('not.exist');
+        });
+    },
+
+    verifyCSSAnda11yOfEquationEditorInputField: (categoryName) => {
+        it(`CSS of added input text for ${equationEditorCategoriesAndSymbols[categoryName].displayName} category`, { tags: 'css' }, () => {
+            equationEditorFlyout.previewInputField()
+                .find('.mq-root-block')
+                .should('have.css', 'color', css.color.text);
+        });
+
+        it(`Accessibility of added input text for ${equationEditorCategoriesAndSymbols[categoryName].displayName} category`, { tags: 'a11y' }, () => {
+            cy.checkAccessibility(equationEditorFlyout.previewInputField())
+        });
+    },
+
+    verifyEquationEditorFlyoutSymbolCategoriesTabs: (categoryName) => {
+        it(`On clicking the ${equationEditorCategoriesAndSymbols[categoryName].displayName} category in the Equation Editor flyout, then the ${equationEditorCategoriesAndSymbols[categoryName].displayName} category tab should get selected`, () => {
+            equationEditorFlyout.categoryTab()
+                .contains(`${equationEditorCategoriesAndSymbols[categoryName].displayName}`, { matchCase: false })
+                .parents('.tool-wrapper')
+                .click()
+                .within(() => {
+                    equationEditorFlyout.categoryTabTitle()
+                        .verifyInnerText(`${equationEditorCategoriesAndSymbols[categoryName].displayName}`)
+                        .should('have.class', 'selected-tool-content-color');
+                });
+        });
+
+        it(`Symbols of ${equationEditorCategoriesAndSymbols[categoryName].displayName} category symbols should be displayed in the flyout`, () => {
+            const symbolsArray = Object.values(equationEditorCategoriesAndSymbols[categoryName].symbols)
+            equationEditorFlyout.categoryCharacters()
+                .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());
+                            cy.wrap($el)
+                                .find('title')
+                                .should('have.text', symbolsArray[index].title);
+                            if (symbolsArray[index].textElement) {
+                                cy.wrap($el)
+                                    .verifyInnerText(symbolsArray[index].textElement)
+                            }
+                        });
+                });
+        });
+    },
+
+    verifyEquationEditorFlyoutSymbolCategoriesFunctionality: (categoryName, wordCount) => {
+        let symbols = Object.values(equationEditorCategoriesAndSymbols[categoryName].symbols)
+        let mappedArr = symbols.map(x => x.displayText)
+        it('If the user clicks on the symbol then that symbol should be displayed in the Equation Editor flyout input field', () => {
+            equationEditorFlyout.categoryCharacters()
+                .then($elements => {
+                    const selectorLength = $elements.length;
+                    for (let index = 0; index < selectorLength; index++) {
+                        equationEditorFlyout.categoryCharacters()
+                            .eq(index)
+                            .click();
+                    }
+                });
+            //The equation editor input Field equation is not checked.
+        });
+
+        equationEditorFlyout.tests.verifyCSSAnda11yOfEquationEditorInputField(categoryName)
+        if (categoryName === 'keypad') {
+            essayResponsePage.tests.insertEquationAndVerifyInputFieldContentsAndWordCount(`1234567890·,+−×÷`, wordCount);
+        } else {
+            essayResponsePage.tests.insertEquationAndVerifyInputFieldContentsAndWordCount(mappedArr.toString().replaceAll(',', ''), wordCount)
+        }
+    }
+}
+export const equationEditorFlyout = {
+    ...selectors,
+    steps,
+    tests
+}

package/cypress/pages/components/essayResponseCommonComponents.js

@@ -0,0 +1,86 @@
+const selectors = {
+    //Basic section
+    setWordLimitLabel: () => cy.get('[class*="EssayResponseComponentstyles__PropertyLabel"]'),
+    setWordLimitInputField: () => cy.get('.essay-response-question-word-limit-setting-wrapper input[type="text"]'),
+    displayWordLimitLabel: () => cy.get('[id="Display-Word-Limit-dropdown-label"]'),
+    displayWordLimitDropdown: () => cy.get('#Display-word-limit-select'),
+    displayWordLimitDropdownListOptions: (optionIndex) => cy.get('.dropdown-list-ul [role="option"]').eq(optionIndex),
+    allowSubmissionOverWordLimitLabel: () => cy.get('.essay-response-question-word-limit-check-box-form-group').eq(0),
+    allowSubmissionOverWordLimitCheckbox: () => cy.get('.essay-response-question-word-limit-check-box-form-group [type="checkbox"]').eq(0),
+    showWordCountLabel: () => cy.get('.essay-response-question-word-limit-check-box-form-group').eq(1),
+    showWordCountCheckbox: () => cy.get('.essay-response-question-word-limit-check-box-form-group [type="checkbox"]').eq(1),
+    previewTabToolbarWrapper: () => cy.get('.toolbar-overlay'),
+    previewTabToolbarOption: (formattingOption) => cy.get(`.essay-preview-wrapper a[title = "${formattingOption}"]`),
+    //Additional settings
+    studentResponseAndLayoutLabel: () => cy.get('.layout-text'),
+    predefinedTextLabel: () => cy.get('[class*="EssayResponsestyles__PropertyLabel"]'),
+    predefinedTextInputField: () => cy.get('[title="Predefined Text"]'),
+    placeholderTextLabel: () => cy.get('.place-holder-text .text-label'),
+    placeholderTextInputField: () => cy.get('[aria-label="Placeholder Text"]'),
+    minHeightLabel: () => cy.get('.size-wrapper .text-label').eq(0),
+    minHeightInputField: () => cy.get('[aria-label="Minimum Height (px)"]'),
+    maxHeightLabel: () => cy.get('.size-wrapper .text-label').eq(1),
+    maxHeightInputField: () => cy.get('[aria-label="Maximum Height (px)"]'),
+    disableAutoHyperlinkingLabel: () => cy.get('[data-ngie-testid="disable-automatic-hyperlinking-checkbox"] .MuiFormControlLabel-label'),
+    disableAutoHyperlinkingCheckbox: () => cy.get('[data-ngie-testid="disable-automatic-hyperlinking-checkbox"] input'),
+    spellCheckLabel: () => cy.get('[data-ngie-testid="spell-check-checkbox"] .MuiFormControlLabel-label'),
+    spellCheckCheckbox: () => cy.get('[data-ngie-testid="spell-check-checkbox"] input'),
+    customSpecialCharacterLabel: () => cy.get('[class*="InlineTextFieldWithDebouncestyles__PropertyLabel"]').eq(1),
+    customSpecialCharacterInputField: () => cy.get('input[aria-label="Custom Special Characters"]'),
+    wordLimitReachedWarningMessage: () => cy.get('[data-at="limit-reached"]'),
+    //Preview tab
+    responseField: () => cy.get('[title="Enter your response to the question here."]'),
+    responseFieldWordCount: () => cy.get('[data-at="character-count"]'),
+}
+
+const steps = {
+    //TODO: need to improve this, we are passing two parameters here, only one should suffice
+    openAndSelectOptionFromDisplayWordLimitDropdown: (optionIndex, optionName) => {
+        essayResponseCommonComponents.displayWordLimitDropdown()
+            .click();
+        essayResponseCommonComponents.displayWordLimitDropdownListOptions(optionIndex)
+            .click();
+        essayResponseCommonComponents.displayWordLimitDropdown()
+            .should('have.text', optionName);
+    },
+
+    setWordLimit: (wordLimit) => {
+        essayResponseCommonComponents.setWordLimitInputField()
+            .clear()
+            .type(wordLimit)
+            .blur()
+            .should('have.value', wordLimit);
+    },
+
+    enterTextInResponseField: (textContent) => {
+        essayResponseCommonComponents.responseField()
+            .type(textContent)
+            .find('p')
+            .should('have.text', textContent);
+    },
+
+    verifyResponseFieldWordCount: (countValue) => {
+        essayResponseCommonComponents.responseFieldWordCount()
+            .should('have.text', countValue);
+    },
+
+    verifyWordLimitReachedWarningMessage: () => {
+        essayResponseCommonComponents.wordLimitReachedWarningMessage()
+            .should('have.text', 'Word limit reached')
+            .and('be.visible');
+    },
+
+    resetPreviewTabResponseField: () => {
+        cy.log('clearing and resetting the response field');
+        essayResponseCommonComponents.responseField()
+            .clear()
+            .blur();
+        essayResponseCommonComponents.responseField()
+            .type('{backspace}');
+    },
+}
+
+export const essayResponseCommonComponents = {
+    ...selectors,
+    steps
+}