itemengine-cypress-automation 1.0.129 → 1.0.131-updateILCrepo6March-02c78d1.0

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
 }