itemengine-cypress-automation 1.0.128 → 1.0.130

package/cypress/pages/components/customizeSpecialCharacterComponent.js

@@ -2,6 +2,7 @@ import utilities from "../../support/helpers/utilities";
 import { specialCharacters } from "../../fixtures/drawingToolbarOptionsAdditionalOptionsAndSpecialAndMathCharacters";
 import { dialogBoxBase } from "../dialogBoxBase";
 const specialCharactersCategories = Object.values(specialCharacters.map((icon) => icon.categoryName));
+const customSpecialCharacters = ['A', '1', '#'];
 
 const selectors = {
     customizeSpecialCharactersCheckbox: () => cy.get('[data-ngie-testid="customize-special-characters-checkbox"] .ngie-checkbox input'),
@@ -100,7 +101,7 @@ const steps = {
                 .within(() => {
                     customizeSpecialCharacterComponent.specialCharactersPreviewPopupCategoryLabel()
                         .click();
-                    category.symbols.forEach((symbolARIALabel, index) => {
+                    category.forEach((symbolARIALabel, index) => {
                         customizeSpecialCharacterComponent.charactersPopupCharacterSymbol() //Check this
                             .eq(index)
                             .find('svg')
@@ -185,8 +186,7 @@ const steps = {
 
 const tests = {
     verifyCustomSpecialCharactersEditTabContent: () => {
-        it('When the user checks the \'Customize special characters\' checkbox, \'Group by language\' and \'Show only custom special characters\' labels and radio buttons should be displayed. By default \'Group by language\' radio button should be checked', () => {
-            customizeSpecialCharacterComponent.steps.checkCustomizeSpecialCharactersCheckbox();
+        it('When the user enables the \'Special characters\' functionality, \'Group by language\' and \'Show only custom special characters\' labels and radio buttons should be displayed. By default \'Group by language\' radio button should be checked', () => {
             utilities.verifyElementVisibilityState(customizeSpecialCharacterComponent.groupByLanguageRadioButton(), 'exist');
             utilities.verifyElementVisibilityState(customizeSpecialCharacterComponent.groupByLanguageLabel(), 'visible');
             utilities.verifyElementVisibilityState(customizeSpecialCharacterComponent.showOnlyCustomSpecialCharactersRadioButton(), 'exist');
@@ -201,7 +201,7 @@ const tests = {
             utilities.verifyInnerText(customizeSpecialCharacterComponent.customizeSpecialCharactersPreviewButton(), 'Preview');
         });
 
-        it(`A total of ${specialCharactersCategories.length} options should be displayed - ${specialCharactersCategories.join('')}. By default all language options should be in selected state`, () => {
+        it(`A total of ${specialCharactersCategories.length} options should be displayed - ${specialCharactersCategories.join(', ')}. By default all language options should be in selected state`, () => {
             customizeSpecialCharacterComponent.steps.verifyCustomizeSpecialCharactersCategoryTiles(specialCharactersCategories);
             customizeSpecialCharacterComponent.steps.verifySelectedCustomizeSpecialCharactersCategoryTiles(specialCharactersCategories);
         });
@@ -209,7 +209,7 @@ const tests = {
         it('When the user clicks on the \'Preview\' hyperlink, a special characters popup should be displayed with all the special characters segregated according to all the language options. The user should be able to close the popup by clicking on the \'Close[X]\' button', () => {
             customizeSpecialCharacterComponent.steps.clickOnCustomizeSpecialCharactersPreviewButton();
             utilities.verifyElementVisibilityState(dialogBoxBase.dialogBox(), 'visible');
-            //customizeSpecialCharacterComponent.steps.verifySpecialCharactersPreviewPopupInEditTab(specialCharacters);
+            customizeSpecialCharacterComponent.steps.verifySpecialCharactersPreviewPopupInEditTab(specialCharacters);
             //Add this verification once https://redmine.zeuslearning.com/issues/555008 is resolved
             cy.log('Post-step: Closing preview popup')
             dialogBoxBase.steps.closeWarningPopup();
@@ -220,11 +220,29 @@ const tests = {
             customizeSpecialCharacterComponent.steps.clickOnSpecialCharactersCategoryTile(specialCharacters[0].categoryName);
             customizeSpecialCharacterComponent.steps.verifySpecialCharacterCategoryTileIsNotSelected(specialCharacters[0].categoryName);
             customizeSpecialCharacterComponent.steps.clickOnCustomizeSpecialCharactersPreviewButton();
-            //customizeSpecialCharacterComponent.steps.verifySpecialCharactersPreviewPopupInEditTab(specialCharacters);
+            customizeSpecialCharacterComponent.steps.verifySpecialCharactersPreviewPopupInEditTab(specialCharacters);
             //Add this verification once https://redmine.zeuslearning.com/issues/555008 is resolved
             cy.log('Post-step: Closing preview popup')
             dialogBoxBase.steps.closeWarningPopup();
         });
+    },
+
+    verifyShowOnlyCustomSpecialCharactersEditTabContent: () => {
+        it('When the user checks the \'Show only custom special characters\' radio button, \'Custom special characters\' label and input field should be displayed. A \'Preview\' hyperlink should be displayed next to the label', () => {
+            customizeSpecialCharacterComponent.steps.selectShowOnlyCustomSpecialCharactersRadioButton();
+            utilities.verifyElementVisibilityState(customizeSpecialCharacterComponent.customSpecialCharactersInputField(), 'visible');
+            utilities.verifyInnerText(customizeSpecialCharacterComponent.customSpecialCharactersLabel(), 'Custom special characters');
+            utilities.verifyElementVisibilityState(customizeSpecialCharacterComponent.customSpecialCharactersLabel(), 'visible');
+            utilities.verifyElementVisibilityState(customizeSpecialCharacterComponent.customizeSpecialCharactersPreviewButton(), 'visible');
+        });
+
+        it('When the user specifies custom special characters, then on clicking on the \'Preview\' hyperlink, only the specified custom special characters should be displayed in the popup', () => {
+            customizeSpecialCharacterComponent.steps.addInputToCustomSpecialCharactersInputField(`${customSpecialCharacters.join('')}`);
+            customizeSpecialCharacterComponent.steps.clickOnCustomizeSpecialCharactersPreviewButton();
+            customizeSpecialCharacterComponent.steps.verifyCustomSpecialCharactersDisplayedInPreviewPopupEditTab(customSpecialCharacters);
+            cy.log('Post-step: Closing preview popup')
+            dialogBoxBase.steps.closeWarningPopup();
+        });
     }
 }
 

package/cypress/pages/components/draggableOptionContainer.js

@@ -7,6 +7,7 @@ const css = Cypress.env('css');
 const options = ['option 1', 'option 2'];
 const threeOptions = ['option 1', 'option 2', 'option 3'];
 
+//TODO update option container selectors when https://redmine.zeuslearning.com/issues/563159 is resolved
 const selectors = {
     draggableOption: () => cy.get('[class*="DraggableItems"][class*="style__ItemWrapper"]'),
     optionsContainerSpecifyCorrectAnswerSection: () => cy.get('.option-drag-and-drop'),

package/cypress/pages/components/fillInTheGapsDragAndDropCommonComponents.js

@@ -1,6 +1,13 @@
 import utilities from "../../support/helpers/utilities";
+import { autoScoredScoringSectionMultiResponseType } from "./autoScoredScoringSectionMultiResponseType";
 
 const selectors = {
+    dropzoneLabelSpecifyCorrectAnswerSection: () => cy.get('[class*="ResponseLabel"].title-casing'),
+
+    //Penalty points
+    penaltyPointsForEachIncorrectDropzoneInputField: () => cy.get('input[aria-label="Penalty points for each incorrect dropzone"]'),
+    specifyPointsForEachIncorrectDropzoneRadioButton: () => cy.get('input[aria-label*="Specify points for each incorrect"]'),
+
     correctAnswersNumeration: () => cy.get('[class*="__AnswerCell"] .answer-numeration-number-box'),
     correctAnswersOptions: () => cy.get('[class*="__AnswerWrapper"] .question-text-wrapper'),
     correctAnswersLabel: () => cy.get('.correct-answers-label'),
@@ -27,14 +34,45 @@ const steps = {
     verifyCorrectAnswerSectionNotExists: () => {
         utilities.verifyElementVisibilityState(fillInTheGapsDragAndDropCommonComponents.correctAnswerContainer(), 'notExist');
     },
-}
 
-const tests = {
+    verifyPointsPerResponseLabel: () => {
+        utilities.verifyInnerText(autoScoredScoringSectionMultiResponseType.pointsPerResponseLabel(), 'Points per response:\n-');
+        utilities.verifyElementVisibilityState(autoScoredScoringSectionMultiResponseType.pointsPerResponseLabel(), 'visible');
+    },
+
+    verifyPartialEqualWeightsPointsPerResponseScore: (pointsPerResponse) => {
+        autoScoredScoringSectionMultiResponseType.partialEqualWeightsPointsPerResponseScore()
+            .should('have.text', pointsPerResponse);
+    },
+
+    /**
+    * @description Verifies the penalty points value for each incorrect dropzone
+    * @param {number} points - The expected penalty points value for each incorrect dropzone.
+    */
+    verifyPenaltyPointsForEachIncorrectDropzoneValue: (points) => {
+        fillInTheGapsOverImageDragAndDropPage.penaltyPointsForEachIncorrectDropzoneInputField()
+            .should('have.value', points);
+    },
+
+    /**
+    * @description Allots penalty points for each incorrect dropzone
+    * @param {number} points - The penalty points to be allotted for each dropzone.
+    */
+    allotPenaltyPointsForEachIncorrectDropzone: (points) => {
+        fillInTheGapsOverImageDragAndDropPage.penaltyPointsForEachIncorrectDropzoneInputField()
+            .clear()
+            .type(`${points}`)
+            .should('have.value', points)
+            .blur();
+    },
 
+    selectPenaltyPointsForEachIncorrectDropzone: () => {
+        fillInTheGapsOverImageDragAndDropPage.specifyPointsForEachIncorrectDropzoneRadioButton()
+            .click();
+    }
 }
 
 export const fillInTheGapsDragAndDropCommonComponents = {
     ...selectors,
-    steps,
-    tests
+    steps
 }

package/cypress/pages/components/fillInTheGapsDropdownCommonComponent.js

@@ -10,13 +10,15 @@ const selectors = {
     //Dropdown options section
     dropdownOptionsLabel: () => cy.get('.dropdown-options-label'),
     dropdownOptionsTab: () => cy.get('.ngie-tablist-tab-button[data-ngie-testid*="dropdown"]'),
-    dropdownOptionsInputField: () => cy.get('.input-editable  input[type*="text"]'),
+    dropdownOptionsInputField: () => cy.get('.input-editable  input[type*="text"]:visible'),
     dropdownOptionsInputFieldNumeration: () => cy.get('[class*="MuiInputAdornment"]'),
 
     //Specify correct answer dropdown
     dropdownWrapperSpecifyCorrectAnswerSection: () => cy.get('.response-dropdown-wrapper'),
     dropdownSpecifyCorrectAnswerSection: () => cy.get('.response-dropdown [role="combobox"]'),
     dropdownLabelSpecifyCorrectAnswerSection: () => cy.get('.response-label'),
+    partialDifferentWeightsPointsLabel: () => cy.get('.cloze-with-text-partial-points-per-response-label'),
+    penaltyPointsForEachIncorrectDropdownInputField: () => cy.get('input[aria-label="Penalty points for each incorrect dropdown"]'),
 
     //Dropdown list
     dropdownList: () => cy.get('.dropdown-list-ul'),
@@ -45,6 +47,9 @@ const selectors = {
     correctAnswersLabel: () => cy.get('[class*="question-preview-wrapper"] [class*="correct-answer-label"]'),
     correctAnswerResponseNumeration: () => cy.get('.answer-numeration-number-box'),
     tickIconWrapper: () => cy.get('.tick-icon-wrapper [data-name*="Rectangle"]'),
+
+    //additional settings
+    enterAriaLabelInputField: () => cy.get('input[aria-label*="Enter ARIA label"]')
 }
 
 const steps = {
@@ -533,7 +538,55 @@ const steps = {
     verifyDropdownMenuOptionsNotWordWrappedPreviewTab: () => {
         fillInTheGapsDropdownCommonComponent.dropdownList()
             .should('not.have.class', 'wordwrap-dropdown-menu');
-    }
+    },
+
+    verifyOptionsInputFieldContents: (index) => {
+        optionsWrapperComponent.optionWrapper()
+            .eq(index)
+            .within(() => {
+                fillInTheGapsDropdownCommonComponent.dropdownOptionsInputField()
+                    .should('have.attr', 'placeholder', 'Enter option');
+                commonComponents.dragHandleButton()
+                    .should('exist');
+                commonComponents.deleteButton()
+                    .should('be.visible');
+                fillInTheGapsDropdownCommonComponent.dropdownOptionsInputFieldNumeration()
+                    .should('have.text', index + 1);
+            });
+    },
+
+    getOptionCount: () => {
+        return fillInTheGapsDropdownCommonComponent.dropdownOptionsInputField().its('length')
+    },
+
+    /**
+    * @description verify the displayed penalty points for each incorrect dropdown
+    * @param {number} penaltyPoints displayed penalty points 
+    */
+    verifyPenaltyPointsForEachIncorrectDropdown: (penaltyPoints) => {
+        utilities.verifyInnerText(autoScoredScoringSectionMultiResponseType.penaltyPointsDetailsSectionAllottedPointsLabel(), `Penalty points for each incorrect dropdown: ${penaltyPoints}`);
+    },
+
+    /**
+    * @description Verifies the penalty points value for each incorrect dropdown
+    * @param {number} points - The expected penalty points value for each incorrect dropdown.
+    */
+    verifyPenaltyPointsForEachIncorrectDropdownValue: (points) => {
+        fillInTheGapsDropdownCommonComponent.penaltyPointsForEachIncorrectDropdownInputField()
+            .should('have.value', points);
+    },
+
+    /**
+     * @description Allots penalty points for each incorrect dropdown
+     * @param {number} points - The penalty points to be allotted for each dropdown.
+     */
+    allotPenaltyPointsForEachIncorrectDropdown: (points) => {
+        fillInTheGapsDropdownCommonComponent.penaltyPointsForEachIncorrectDropdownInputField()
+            .clear()
+            .type(`${points}`)
+            .should('have.value', points)
+            .blur();
+    },
 }
 
 const tests = {
@@ -543,10 +596,11 @@ const tests = {
     * @example - verifySpecifyCorrectAnswerAccordionContentsAndFunctionality('Correct');
     */
     verifySpecifyCorrectAnswerAccordionContentsAndFunctionality: (accordionName) => {
-        it(`When user has added a response token in image, then its corresponding dropdown \'Dropdown 1\' should be displayed in the ${accordionName} accordion in collapsed state`, () => {
-            utilities.verifyElementCount(fillInTheGapsDropdownCommonComponent.dropdownSpecifyCorrectAnswerSection(), 1);
+        it(`The dropdowns \'Dropdown 1\' and \'Dropdown 2\' should be displayed in the ${accordionName} accordion in collapsed state`, () => {
+            utilities.verifyElementCount(fillInTheGapsDropdownCommonComponent.dropdownSpecifyCorrectAnswerSection(), 2);
             fillInTheGapsDropdownCommonComponent.steps.verifyDropdownIsCollapsedInSpecifyCorrectAnswerSection(0);
             utilities.verifyInnerText(utilities.getNthElement(fillInTheGapsDropdownCommonComponent.dropdownLabelSpecifyCorrectAnswerSection(), 0), 'Dropdown 1');
+            utilities.verifyInnerText(utilities.getNthElement(fillInTheGapsDropdownCommonComponent.dropdownLabelSpecifyCorrectAnswerSection(), 1), 'Dropdown 2');
         });
 
         it('When user expands and collapses the dropdown without selecting any option, \'Error: Please set a correct answer.\' error message should be displayed', () => {
@@ -594,10 +648,100 @@ const tests = {
                     utilities.verifyElementVisibilityState(utilities.getNthElement(fillInTheGapsDropdownCommonComponent.dropdownLabelSpecifyCorrectAnswerSection(), index), 'visible');
                 })
         });
+    },
+
+    verifyAddOptionFunctionalityForDropdownOptions: () => {
+        it('When user adds an option using \'Add Option\' button then the added option input field should be displayed and option numeration should increment', () => {
+            let initialOptionCount;
+            fillInTheGapsDropdownCommonComponent.steps.getOptionCount().then((count) => {
+                initialOptionCount = count;
+                optionsWrapperComponent.steps.addOption();
+                fillInTheGapsDropdownCommonComponent.steps.getOptionCount().should('eq', initialOptionCount + 1);
+                fillInTheGapsDropdownCommonComponent.steps.verifyOptionsInputFieldContents(initialOptionCount);
+            });
+        });
+    },
+
+    verifyDropdownAndDropdownMenuSectionContents: () => {
+        it('Dropdown label, \'User specified width\' and \'Auto scale\' toggle buttons should be displayed', () => {
+            utilities.verifyInnerText(fillInTheGapsDropdownCommonComponent.dropdownLabel(), 'Dropdown');
+            utilities.verifyElementVisibilityState(fillInTheGapsDropdownCommonComponent.dropdownLabel(), 'visible');
+            utilities.verifyInnerText(fillInTheGapsDropdownCommonComponent.userSpecifiedWidthToggleButton(), 'User specified width');
+            utilities.verifyElementVisibilityState(fillInTheGapsDropdownCommonComponent.userSpecifiedWidthToggleButton(), 'visible');
+            utilities.verifyInnerText(fillInTheGapsDropdownCommonComponent.AutoScaleToggleButton(), 'Auto scale');
+            utilities.verifyElementVisibilityState(fillInTheGapsDropdownCommonComponent.AutoScaleToggleButton(), 'visible');
+        });
+
+        it('By default \'User specified width\' toggle button should be in selected state and \'Auto scale\' should not be in selected state', () => {
+            fillInTheGapsDropdownCommonComponent.steps.verifyUserSpecifiedToggleButtonIsSelected();
+            fillInTheGapsDropdownCommonComponent.steps.verifyAutoScaleToggleButtonNotSelected();
+        });
+
+        it('\'Display multiline text in dropdown\' checkbox and label should be displayed and by default it should be unchecked', () => {
+            utilities.verifyElementVisibilityState(fillInTheGapsDropdownCommonComponent.displayMultilineTextCheckbox(), 'exist');
+            utilities.verifyInnerText(fillInTheGapsDropdownCommonComponent.displayMultilineTextCheckboxLabel(), 'Display multiline text in dropdown');
+            utilities.verifyElementVisibilityState(fillInTheGapsDropdownCommonComponent.displayMultilineTextCheckboxLabel(), 'visible');
+            fillInTheGapsDropdownCommonComponent.steps.verifyDisplayMultilineCheckboxIsNotChecked();
+        });
+
+        it('\'Dropdown menu\' label should be displayed', () => {
+            utilities.verifyInnerText(fillInTheGapsDropdownCommonComponent.dropdownMenuLabel(), 'Dropdown menu');
+            utilities.verifyElementVisibilityState(fillInTheGapsDropdownCommonComponent.dropdownMenuLabel(), 'visible');
+        });
+
+        it('\'Word wrap for dropdown menu\' checkbox and label should be displayed and by default it should be checked', () => {
+            utilities.verifyElementVisibilityState(fillInTheGapsDropdownCommonComponent.wordWrapCheckbox(), 'exist');
+            utilities.verifyInnerText(fillInTheGapsDropdownCommonComponent.wordWrapCheckboxLabel(), 'Word wrap for dropdown menu');
+            utilities.verifyElementVisibilityState(fillInTheGapsDropdownCommonComponent.wordWrapCheckboxLabel(), 'visible');
+            fillInTheGapsDropdownCommonComponent.steps.verifyWordWrapForDropdownMenuCheckboxIsChecked();
+        });
+
+        it('CSS of Dropdown and Dropdown menu section', { tags: 'css' }, () => {
+            utilities.verifyCSS(fillInTheGapsDropdownCommonComponent.dropdownLabel(), {
+                'color': css.color.sectionHeading,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.semibold
+            });
+            utilities.verifyCSS(fillInTheGapsDropdownCommonComponent.userSpecifiedWidthToggleButton(), {
+                'color': css.color.whiteText,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.bold,
+                'background-color': css.color.toggleButtonSelectedBg
+            });
+            utilities.verifyCSS(fillInTheGapsDropdownCommonComponent.AutoScaleToggleButton(), {
+                'color': css.color.UnselectedToggleButton,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.bold
+            });
+            utilities.verifyCSS(fillInTheGapsDropdownCommonComponent.displayMultilineTextCheckboxLabel(), {
+                'color': css.color.labelText,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.regular
+            });
+            utilities.verifyCSS(fillInTheGapsDropdownCommonComponent.dropdownMenuLabel(), {
+                'color': css.color.sectionHeading,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.semibold
+            });
+            utilities.verifyCSS(fillInTheGapsDropdownCommonComponent.wordWrapCheckboxLabel(), {
+                'color': css.color.labelText,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.regular
+            });
+            //Checked checkbox
+            utilities.verifyCSS(fillInTheGapsDropdownCommonComponent.wordWrapCheckbox().parent().find('g g').eq(0), {
+                'fill': css.color.activeButtons
+            });
+        });
+
+        it('Accessibility of Dropdown and Dropdown menu section', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(fillInTheGapsDropdownCommonComponent.dropdownLabel().parents('.student-view-settings-container'));
+        });
     }
 }
 
 export const fillInTheGapsDropdownCommonComponent = {
     ...selectors,
-    steps
+    steps,
+    tests
 }