itemengine-cypress-automation 1.0.86 → 1.0.88

package/cypress/pages/components/index.js

@@ -49,5 +49,7 @@ export * from './correctIncorrectAnswerLabelComponent';
 export * from './acceptedStudentInputComponent';
 export * from './draggableOptionsSectionComponent';
 export * from './enableOuterBorderComponent';
+export * from './customizeSpecialCharacterComponent';
 export * from './opacityComponent';
-export * from './imageActionsComponent';
+export * from './imageActionsComponent';
+export * from './createCustomCategoryFlyout'

package/cypress/pages/components/opacityComponent.js

@@ -1,4 +1,5 @@
 import utilities from "../../support/helpers/utilities";
+const css = Cypress.env('css');
 
 const selectors = {
     opacityLabel: () => cy.get('[class*="OpacityWrapper"] [class*="Label"]').last(),
@@ -7,7 +8,7 @@ const selectors = {
 }
 
 const steps = {
-    verifyDefaultOpacityLabelSliderAndInputField: (value) => {
+    verifyDefaultOpacityLabelSliderAndInputField: () => {
         utilities.verifyInnerText(opacityComponent.opacityLabel(), 'Opacity');
         utilities.verifyElementVisibilityState(opacityComponent.opacityLabel(), 'visible');
         utilities.verifyElementVisibilityState(opacityComponent.opacitySlider(), 'visible');
@@ -33,7 +34,7 @@ const steps = {
      * @param {number} value holds value of slider
      * @description function verifies value in slider
      */
-    verifyOpacitySliderValue: (value) => {
+    verifyValueOfOpacitySlider: (value) => {
         opacityComponent.opacitySlider()
             .find('input')
             .should('have.value', value);
@@ -52,13 +53,39 @@ const steps = {
             .should('have.value', value);
     },
 
-    clickOnOpacitySlider: () => {
+    clickActionOnOpacitySlider: () => {
         opacityComponent.opacitySlider()
             .click();
     }
 }
 
+const tests = {
+    verifyOpacityCSSAndA11y: () => {
+        it('CSS of \'Opacity\' Section in Edit tab', { tags: 'css' }, () => {
+            utilities.verifyCSS(opacityComponent.opacityLabel(), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.semibold
+            });
+            utilities.verifyCSS(opacityComponent.opacityInputField(), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular
+            });
+            utilities.verifyCSS(opacityComponent.opacitySlider(), {
+                'color': css.color.activeButtons,
+                'font-weight': css.fontWeight.regular
+            });
+        });
+
+        it('Accessibility of opacity section', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(opacityComponent.opacityLabel().parents('.MuiGrid-root'));
+        });
+    }
+}
+
 export const opacityComponent = {
     ...selectors,
-    steps
+    steps,
+    tests
 }

package/cypress/pages/components/specialAndCustomSpecialCharactersComponent.js

@@ -1,3 +1,4 @@
+//This file is deprecated
 const selectors = {
     specialCharactersLabel: () => cy.get('.special-character-label'),
     displaySpecialCharactersLabel: () => cy.get('[data-ngie-testid="display-special-characters-checkbox"] .MuiFormControlLabel-label'),

package/cypress/pages/components/specialCharactersFlyoutComponent.js

@@ -1,3 +1,4 @@
+//This file is deprecated
 import { specialOrMathCharacters } from "../../fixtures/specialAndMathCharacters"
 import { dialogBoxBase } from "../dialogBoxBase";
 

package/cypress/pages/drawingResponsePage.js

@@ -1,5 +1,5 @@
 import utilities from "../support/helpers/utilities"
-import { questionInstructionsComponent, createQuestionBasePage, commonComponents, additionalSettingsPanel, scoringSectionBaseEditTab } from "./components"
+import { questionInstructionsComponent, createQuestionBasePage, commonComponents, additionalSettingsPanel, scoringSectionBaseEditTab, customizeSpecialCharacterComponent } from "./components"
 import { dialogBoxBase } from "./dialogBoxBase";
 
 const css = Cypress.env('css');
@@ -12,6 +12,7 @@ const selectors = {
     ...questionInstructionsComponent,
     ...scoringSectionBaseEditTab,
     ...createQuestionBasePage,
+    ...customizeSpecialCharacterComponent,
     //Customize toolbar options and controls
     customizeToolbarOptionsAndControlsAccordion: () => cy.get('.drawing-response-accordion .ngie-accordion-summary'),
     customizeToolbarOptionsAndControlsLabel: () => cy.get('.customized-options-label'),
@@ -49,23 +50,17 @@ const selectors = {
     //Customize special characters
     customizeSpecialCharactersCheckbox: () => cy.get('[data-ngie-testid="customize-special-characters-checkbox"] .ngie-checkbox input'),
     customizeSpecialCharactersLabel: () => cy.get('[data-ngie-testid="customize-special-characters-checkbox"] [class*="label"]'),
-    groupByLanguageRadioButton: () => cy.get('[class*="CustomizedSpecialCharacterstyles__RadioGroupWrapper"] .ngie-radio-btn input').eq(0),
-    groupByLanguageLabel: () => cy.get('[class*="CustomizedSpecialCharacterstyles__RadioGroupWrapper"] .ngie-radio-label').eq(0),
-    showOnlyCustomSpecialCharactersRadioButton: () => cy.get('[class*="CustomizedSpecialCharacterstyles__RadioGroupWrapper"] .ngie-radio-btn input').eq(1),
-    showOnlyCustomSpecialCharactersLabel: () => cy.get('[class*="CustomizedSpecialCharacterstyles__RadioGroupWrapper"] .ngie-radio-label').eq(0),
-    selectSpecialCharacterLanguagesLabel: () => cy.get('[class*="CustomizedSpecialCharacterstyles__SpecialCharLabel"]'),
-    customizeSpecialCharactersPreviewButton: () => cy.get('[class*="CustomizedSpecialCharacterstyles__PreviewLabel"]'),
-    charactersCategoryTilesWrapper: () => cy.get('[class*="CustomizedSpecialCharacterstyles__DragAndDropWrapper"]'),
-    specialAndMathCharacterTiles: (specialOrMathCharacterCategory = null) => {
-        if (specialOrMathCharacterCategory) {
-            return cy.get(`[id*="DraggableItem"] button[aria-label="${specialOrMathCharacterCategory}"]`)
+    mathCharactersCategoryTilesWrapper: () => cy.get('[class*="CustomizedSpecialCharacterstyles__DragAndDropWrapper"]'),
+    mathCharacterTiles: (mathCharacterCategory = null) => {
+        if (mathCharacterCategory) {
+            return cy.get(`[id*="DraggableItem"] button[aria-label="${mathCharacterCategory}"]`)
         } else {
             return cy.get('[id*="DraggableItem"] button')
         }
     },
-    specialAndMathCharacterTileIcon: () => cy.get('.equation-editor-icon'),
-    specialAndMathCharacterTileCategoryName: () => cy.get('.equation-editor-label-wrapper'),
-    specialAndMathCharacterTileSectionCategoriesDragIcon: () => cy.get('.drag-icon-equation-editor-button'),
+    mathCharacterTileIcon: () => cy.get('.equation-editor-icon'),
+    mathCharacterTileCategoryName: () => cy.get('.equation-editor-label-wrapper'),
+    mathCharacterTileSectionCategoriesDragIcon: () => cy.get('.drag-icon-equation-editor-button'),
 
     //Customize math characters
     customizeMathCharactersCheckbox: () => cy.get('[data-ngie-testid="customize-math-characters-checkbox"] .ngie-checkbox input'),
@@ -74,21 +69,12 @@ const selectors = {
     customizeMathCharactersPreviewButton: () => cy.get('[class*="CustomizedSpecialCharacterstyles__PreviewLabel"]'),
 
     //Preview popup
-    charactersPreviewPopupSymbol: () => cy.get('[class*="CustomizedSpecialCharacterstyles__CharacterWrapper"]'),
-
-    //Special characters preview popup
-    specialCharactersPreviewPopupCharactersCategoryWrapper: () => cy.get('[class*="special"][class*="accordion"]'),
-    specialCharactersPreviewPopupCategoryAccordionExpandIcon: () => cy.get('[class*="expandIconWrapper"]'),
-    specialCharactersPreviewPopupCategoryLabel: () => cy.get('[class*="CustomizedSpecialCharacterstyles__AccordionLabel"]'),
+    mathCharactersPreviewPopupSymbol: () => cy.get('[class*="CustomizedSpecialCharacterstyles__CharacterWrapper"]'),
 
     //Math characters preview popup
     mathCharactersPreviewPopupCharactersCategoryWrapper: () => cy.get('[class*="CustomizedSpecialCharacterstyles__AccordionWrapper"]'),
     mathCharactersPreviewPopupCategoryLabel: () => cy.get('[class*="CustomizedMathCharacterstyles__PopupTitle"]'),
 
-    //Show only custom special characters section
-    customSpecialCharactersLabel: () => cy.get('[class*="CustomizedSpecialCharacterstyles__SpecialCharLabel"]'),
-    customSpecialCharactersInputField: () => cy.get('input[aria-label="Custom special characters"]'),
-
     //Preview tab
     previewTabDrawingToolbarWrapper: () => cy.get('.edit-question-preview-wrapper .drawing-tool__toolbar'),
     previewTabDrawingToolbarOption: (drawingOption = null) => {
@@ -236,10 +222,10 @@ const selectors = {
     //Math characters popup
     mathCharactersPopupCategoryTitle: () => cy.get('[class*="characters__container"] [class*="options__characters__title"]'),
 
+    //TODO: Shift all preview tab special characters popup related selectors/steps to a common component file once https://redmine.zeuslearning.com/issues/559296 is resolved
     //Special characters popup
     specialCharactersPopupCategoryTitle: () => cy.get('[class*="characters__container"] [class*="options__accordion__header"]'),
     specialCharactersPopupCategoryAccordionIcon: () => cy.get('[class*="characters__container"] [aria-label="AccordionIcon"]'),
-    customSpecialCharactersInputField: () => cy.get('input[aria-label="Custom special characters"]'),
 
     //Edit tab color picker popup
     editTabColorPickerPopupOpacityPalette: () => cy.get('.react-colorful__last-control .react-colorful__interactive'),
@@ -268,6 +254,7 @@ const steps = {
     ...scoringSectionBaseEditTab.steps,
     ...createQuestionBasePage.steps,
     ...commonComponents.steps,
+    ...customizeSpecialCharacterComponent.steps,
     /**
      * @param {string[]} arrayOfToolbarOptions array of toolbar options to be selected
      * @description this function selects toolbar options from edit tab
@@ -778,38 +765,6 @@ const steps = {
         utilities.verifyElementVisibilityState(drawingResponsePage.charactersPopupCharactersCategoryWrapper().eq(index), 'notExist');
     },
 
-    /**
-     * @description Verify the special characters preview popup in edit tab
-     * @param {object[]} categoryAndSymbolsArray Array of list of categories and their symbols
-     */
-    verifySpecialCharactersPreviewPopupInEditTab: (categoryAndSymbolsArray) => {
-        categoryAndSymbolsArray.forEach((category, index) => {
-            utilities.verifyInnerText(drawingResponsePage.specialCharactersPreviewPopupCategoryLabel().eq(index), `${category.categoryName}`);
-            drawingResponsePage.charactersPopupCharactersCategoryWrapper()
-                .eq(index)
-                .within(() => {
-                    drawingResponsePage.specialCharactersPreviewPopupCategoryAccordionExpandIcon()
-                        .click();
-                    category.symbols.forEach((symbolARIALabel, index) => {
-                        drawingResponsePage.charactersPopupCharacterSymbol()
-                            .eq(index)
-                            .find('svg')
-                            .should('have.attr', 'aria-label', `${symbolARIALabel}`);
-                    });
-                });
-        });
-    },
-
-    /**
-    * @description Click on category accordion expand icon in special characters popup
-    * @param {number} index Index of category in popup
-    */
-    clickOnSpecialCharactersPreviewPopupCategoryAccordionExpandIcon: (index) => {
-        drawingResponsePage.specialCharactersPreviewPopupCategoryAccordionExpandIcon()
-            .eq(index)
-            .click();
-    },
-
     checkCustomizeSpecialCharactersCheckbox: () => {
         drawingResponsePage.customizeSpecialCharactersCheckbox()
             .click()
@@ -822,36 +777,31 @@ const steps = {
             .should('be.checked');
     },
 
-    verifyGroupedByLanguageRadioButtonIsSelected: () => {
-        drawingResponsePage.groupByLanguageRadioButton()
-            .should('be.checked');
-    },
-
     /**
-     * @description Verify customized special or math character category tiles in edit tab
-     * @param {string[]} charactersCategoriesArray Array of special or math character categories
+     * @description Verify customized math character category tiles in edit tab
+     * @param {string[]} charactersCategoriesArray Array of math character categories
      */
-    verifyCustomizeSpecialOrMathCharactersCategoryTiles: (charactersCategoriesArray) => {
-        drawingResponsePage.charactersCategoryTilesWrapper()
+    verifyCustomizeMathCharactersCategoryTiles: (charactersCategoriesArray) => {
+        drawingResponsePage.mathCharactersCategoryTilesWrapper()
             .within(() => {
                 charactersCategoriesArray.forEach((characterCategory, index) => {
-                    drawingResponsePage.specialAndMathCharacterTiles()
+                    drawingResponsePage.mathCharacterTiles()
                         .eq(index)
                         .should('have.attr', 'aria-label', `${characterCategory}`);
                 });
             });
-        utilities.verifyElementCount(drawingResponsePage.specialAndMathCharacterTiles(), charactersCategoriesArray.length);
+        utilities.verifyElementCount(drawingResponsePage.mathCharacterTiles(), charactersCategoriesArray.length);
     },
 
     /**
-     * @description Verify selected special or math characters category tiles 
-     * @param {string[]} selectedSpecialOrMathCharactersCategoriesArray Array of selected special or math characters categories
+     * @description Verify selected math characters category tiles 
+     * @param {string[]} selectedMathCharactersCategoriesArray Array of selected math characters categories
      */
-    verifySelectedCustomizeSpecialOrMathCharactersCategoryTiles: (selectedSpecialOrMathCharactersCategoriesArray) => {
-        drawingResponsePage.charactersCategoryTilesWrapper()
+    verifySelectedCustomizeMathCharactersCategoryTiles: (selectedMathCharactersCategoriesArray) => {
+        drawingResponsePage.mathCharactersCategoryTilesWrapper()
             .within(() => {
-                selectedSpecialOrMathCharactersCategoriesArray.forEach((characterCategory) => {
-                    drawingResponsePage.specialAndMathCharacterTiles(characterCategory)
+                selectedMathCharactersCategoriesArray.forEach((characterCategory) => {
+                    drawingResponsePage.mathCharacterTiles(characterCategory)
                         .should('have.class', 'Mui-selected')
                         .within(() => {
                             utilities.verifyElementVisibilityState(drawingResponsePage.customizeToolbarOptionsAndControlsSectionTickIcon(), 'visible');
@@ -860,11 +810,6 @@ const steps = {
             });
     },
 
-    clickOnCustomizeSpecialCharactersPreviewButton: () => {
-        drawingResponsePage.customizeSpecialCharactersPreviewButton()
-            .click();
-    },
-
     clickOnCustomizeMathCharactersPreviewButton: () => {
         drawingResponsePage.customizeMathCharactersPreviewButton()
             .click();
@@ -881,51 +826,31 @@ const steps = {
                 .eq(index)
                 .within(() => {
                     category.symbols.forEach((symbol, index) => {
-                        utilities.verifyElementVisibilityState(drawingResponsePage.charactersPreviewPopupSymbol().eq(index), 'visible');
-                        drawingResponsePage.charactersPreviewPopupSymbol()
+                        utilities.verifyElementVisibilityState(drawingResponsePage.mathCharactersPreviewPopupSymbol().eq(index), 'visible');
+                        drawingResponsePage.mathCharactersPreviewPopupSymbol()
                             .eq(index)
                             .find('path')
                             .should('have.attr', 'data-name', `${symbol}`);
                     });
-                    utilities.verifyElementCount(drawingResponsePage.charactersPreviewPopupSymbol(), category.symbols.length);
+                    utilities.verifyElementCount(drawingResponsePage.mathCharactersPreviewPopupSymbol(), category.symbols.length);
                 });
         });
         utilities.verifyElementCount(drawingResponsePage.mathCharactersPreviewPopupCharactersCategoryWrapper(), categoryAndSymbolsArray.length);
     },
 
-    clickOnSpecialOrMathCharactersCategoryTile: (categoryName) => {
-        drawingResponsePage.specialAndMathCharacterTiles(categoryName)
+    clickOnMathCharactersCategoryTile: (categoryName) => {
+        drawingResponsePage.mathCharacterTiles(categoryName)
             .click();
     },
 
-    verifySpecialCharacterCategoryTileIsSelected: (categoryName) => {
-        drawingResponsePage.specialAndMathCharacterTiles(categoryName)
-            .should('have.attr', 'aria-pressed', 'true')
-            .within(() => {
-                utilities.verifyElementVisibilityState(drawingResponsePage.customizeToolbarOptionsAndControlsSectionTickIcon(), 'visible');
-            });
-    },
-
-    verifySpecialOrMathCharacterCategoryTileIsNotSelected: (categoryName) => {
-        drawingResponsePage.specialAndMathCharacterTiles(categoryName)
+    verifyMathCharacterCategoryTileIsNotSelected: (categoryName) => {
+        drawingResponsePage.mathCharacterTiles(categoryName)
             .should('have.attr', 'aria-pressed', 'false')
             .within(() => {
                 utilities.verifyElementVisibilityState(drawingResponsePage.customizeToolbarOptionsAndControlsSectionTickIcon(), 'hidden');
             });
     },
 
-    selectShowOnlyCustomSpecialCharactersRadioButton: () => {
-        drawingResponsePage.showOnlyCustomSpecialCharactersRadioButton()
-            .click()
-            .should('be.checked');
-    },
-
-    selectGroupByLanguageRadioButton: () => {
-        drawingResponsePage.groupByLanguageRadioButton()
-            .click()
-            .should('be.checked');
-    },
-
     verifyPatternRadioButtonIsNotSelected: () => {
         drawingResponsePage.patternRadioButton()
             .should('not.be.checked');
@@ -937,24 +862,6 @@ const steps = {
             .should('be.checked');
     },
 
-    addInputToCustomSpecialCharactersInputField: (input) => {
-        drawingResponsePage.customSpecialCharactersInputField()
-            .type(`${input}`)
-            .should('have.value', `${input}`)
-    },
-
-    /**
-     * Verify custom special characters displayed in edit tab preview popup
-     * @param {string[]} customSpecialCharacters Array of custom special characters
-     */
-    verifyCustomSpecialCharactersDisplayedInPreviewPopupEditTab: (customSpecialCharacters) => {
-        customSpecialCharacters.forEach((customSpecialCharacter, index) => {
-            utilities.verifyInnerText(drawingResponsePage.charactersPreviewPopupSymbol().eq(index), `${customSpecialCharacter}`);
-            utilities.verifyElementVisibilityState(drawingResponsePage.charactersPreviewPopupSymbol().eq(index), 'visible');
-        });
-        utilities.verifyElementCount(drawingResponsePage.charactersPreviewPopupSymbol(), `${customSpecialCharacters.length}`);
-    },
-
     /**
     * Verify custom special characters displayed in characters popup in preview tab
     * @param {string[]} customSpecialCharacters Array of custom special characters
@@ -1332,12 +1239,6 @@ const steps = {
             .should('be.checked');
     },
 
-    selectShowOnlyCustomSpecialCharactersRadioButton: () => {
-        drawingResponsePage.showOnlyCustomSpecialCharactersRadioButton()
-            .click()
-            .should('be.checked');
-    },
-
     verifyFillImageToCanvasCheckboxIsUnchecked: () => {
         drawingResponsePage.fillImageToCanvasCheckbox()
             .should('not.be.checked');
@@ -1382,12 +1283,6 @@ const steps = {
             .click();
     },
 
-    addInputToCustomSpecialCharactersInputField: (input) => {
-        drawingResponsePage.customSpecialCharactersInputField()
-            .type(`${input}`)
-            .should('have.value', `${input}`)
-    },
-
     selectCustomSpecialCharacter: () => {
         drawingResponsePage.charactersPopupCharacterSymbol()
             .click();
@@ -1440,8 +1335,8 @@ const steps = {
      * @description verifies that the toolbar and controls formating options is in selected state.
      */
     verifyToolbarAndControlsOptionsSelectedState: (toolbarAndControlOption) => {
-            drawingResponsePage.toolbarOptionsAndControlsFormattingOptionsTiles(toolbarAndControlOption)
-                .should('have.class', 'Mui-selected');
+        drawingResponsePage.toolbarOptionsAndControlsFormattingOptionsTiles(toolbarAndControlOption)
+            .should('have.class', 'Mui-selected');
     }
 }