itemengine-cypress-automation 1.0.115 → 1.0.116

package/cypress/pages/fillInTheGapsOverImageDropdownPage.js

@@ -2,17 +2,22 @@ import utilities from "../support/helpers/utilities";
 import { figOverImageCanvasComponent, autoScoredScoringPreviewTab, optionsWrapperComponent, commonComponents, createQuestionBasePage, backgroundImageUploadComponent, scoringSectionBaseEditTab, questionInstructionsComponent, correctIncorrectAnswerLabelComponent, autoScoredStudentViewSettings, autoScoredSpecifyCorrectAnswerSection, autoScoredScoringSectionMultiResponseType } from "./components";
 const css = Cypress.env('css');
 
+const optionsForDropdown = ['Flower', 'Petal', 'Stem', 'Branch'];
+
 const selectors = {
     ...questionInstructionsComponent,
     ...figOverImageCanvasComponent,
     ...autoScoredScoringPreviewTab,
     ...correctIncorrectAnswerLabelComponent,
+    ...autoScoredScoringSectionMultiResponseType,
+    ...autoScoredSpecifyCorrectAnswerSection,
     //Dropdown options section
     dropdownOptionsTab: () => cy.get('.ngie-tablist-tab-button[data-ngie-testid*="dropdown"]'),
     dropdownOptionsInputField: () => cy.get('.input-editable  input[type*="text"]'),
 
     //Specify correct answer dropdown
     dropdownSpecifyCorrectAnswerSection: () => cy.get('.response-dropdown [role="combobox"]'),
+    dropdownLabelSpecifyCorrectAnswerSection: () => cy.get('.response-label'),
 
     //Dropdown list
     dropdownListOptions: (ariaLabel = null) => {
@@ -87,7 +92,7 @@ const steps = {
     /**
     * @param {number} dropdownIndex Index of the dropdown
     * @param {string} dropdownOption Option to be selected in the dropdown
-    * @description Select option from dropdown in set correct answer section
+    * @description Select option from dropdown in specify correct answer section
     */
     selectResponseFromDropdownSpecifyCorrectAnswerSection: (dropdownIndex, dropdownOption) => {
         fillInTheGapsOverImageDropdownPage.steps.expandResponseDropdownInSpecifyCorrectAnswerSection(dropdownIndex)
@@ -106,8 +111,8 @@ const steps = {
     },
 
     /**
-    * @param {number} responseDropdownIndex Index of response dropdown in set correct answer section
-    * @description Expand response dropdown in set correct answer section
+    * @param {number} responseDropdownIndex Index of response dropdown in specify correct answer section
+    * @description Expand response dropdown in specify correct answer section
     */
     expandResponseDropdownInSpecifyCorrectAnswerSection: (responseDropdownIndex) => {
         utilities.getNthElement(fillInTheGapsOverImageDropdownPage.dropdownSpecifyCorrectAnswerSection(), responseDropdownIndex)
@@ -116,6 +121,36 @@ const steps = {
             .should('have.attr', 'aria-expanded', 'true');
     },
 
+    /**
+    * @param {number} responseDropdownIndex Index of response dropdown in specify correct answer section
+    * @description Verify dropdown is expanded in specify correct answer section
+    */
+    verifyDropdownIsExpandedInSpecifyCorrectAnswerSection: (responseDropdownIndex) => {
+        utilities.getNthElement(fillInTheGapsOverImageDropdownPage.dropdownSpecifyCorrectAnswerSection(), responseDropdownIndex)
+            .should('have.attr', 'aria-expanded', 'true');
+    },
+
+    /**
+    * @param {number} responseDropdownIndex Index of response dropdown in specify correct answer section
+    * @description Verify dropdown is collapsed in specify correct answer section
+    */
+    verifyDropdownIsCollapsedInSpecifyCorrectAnswerSection: (responseDropdownIndex) => {
+        utilities.getNthElement(fillInTheGapsOverImageDropdownPage.dropdownSpecifyCorrectAnswerSection(), responseDropdownIndex)
+            .should('have.attr', 'aria-expanded', 'false');
+        utilities.verifyElementVisibilityState(commonComponents.dropdownList(), 'notExist');
+    },
+
+    /**
+    * @param {number} responseDropdownIndex Index of response dropdown in specify correct answer section
+    * @description Expand and collapse dropdown in specify correct answer section
+    */
+    expandAndCollapseDropdownInSpecifyCorrectAnswerSection: (responseDropdownIndex) => {
+        utilities.getNthElement(fillInTheGapsOverImageDropdownPage.dropdownSpecifyCorrectAnswerSection(), responseDropdownIndex)
+            .click({ position: "right" });
+        cy.get('body')
+            .click();
+    },
+
     /**
     * @param {Object[]} CorrectAnswerArray - An array of objects containing the dropdownIndex and dropdownOption to be selected.
     * @param {number} CorrectAnswerArray[].dropdownIndex - The index of dropdown in preview tab
@@ -243,10 +278,84 @@ const steps = {
     verifyDropdownIsDisabled: (dropdownIndex) => {
         utilities.verifyElementDisabledClass(utilities.getNthElement(fillInTheGapsOverImageDropdownPage.dropdownPreviewTab(), dropdownIndex));
     },
+
+    verifyPointsPerResponseLabel: () => {
+        utilities.verifyInnerText(autoScoredScoringSectionMultiResponseType.pointsPerResponseLabel(), 'Points per response: -');
+        utilities.verifyElementVisibilityState(autoScoredScoringSectionMultiResponseType.pointsPerResponseLabel(), 'visible');
+    },
+
+    /**
+     * @description Verify points per response score displayed for partial equal weights
+     * @param {number} pointsPerResponse points per response score 
+     */
+    verifyPartialEqualWeightsPointsPerResponseScore: (pointsPerResponse) => {
+        utilities.verifyInnerText(autoScoredScoringSectionMultiResponseType.pointsPerResponseLabel(), `Points per response: ${pointsPerResponse}`);
+    },
 }
 
 const tests = {
     ...autoScoredScoringPreviewTab.tests,
+    ...autoScoredSpecifyCorrectAnswerSection.tests,
+    ...scoringSectionBaseEditTab.tests,
+    ...autoScoredScoringSectionMultiResponseType.tests,
+    /**
+    * Verifies the contents and functionality of the 'Specify correct answer' accordion for fill in the gaps over image dropdown question.
+    * @param {{'Correct' | 'Alternative'}} accordionName - The name of the accordion to be used in the validation.
+    * @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(fillInTheGapsOverImageDropdownPage.dropdownSpecifyCorrectAnswerSection(), 1);
+            fillInTheGapsOverImageDropdownPage.steps.verifyDropdownIsCollapsedInSpecifyCorrectAnswerSection(0);
+            utilities.verifyInnerText(utilities.getNthElement(fillInTheGapsOverImageDropdownPage.dropdownLabelSpecifyCorrectAnswerSection(), 0), 'Dropdown 1');
+        });
+
+        it('When user expands and collapses the dropdown without selecting any option, \'Error: Please set a correct answer.\' error message should be displayed', () => {
+            fillInTheGapsOverImageDropdownPage.steps.expandAndCollapseDropdownInSpecifyCorrectAnswerSection(0);
+            utilities.verifyElementVisibilityState(commonComponents.errorMessage(), 'visible');
+            utilities.verifyInnerText(commonComponents.errorMessage(), 'Error: Please set a correct answer.');
+        });
+
+        it('When the user selects any option from the dropdown, then error message should disappear and that option should be displayed on the dropdown', () => {
+            fillInTheGapsOverImageDropdownPage.steps.selectResponseFromDropdownSpecifyCorrectAnswerSection(0, optionsForDropdown[0]);
+            commonComponents.steps.verifyErrorMessageIsNotDisplayed();
+        });
+
+        autoScoredSpecifyCorrectAnswerSection.tests.verifyAutoScoredPointsErrorMessageWhenPointsFieldIsEmpty(accordionName);
+
+        it(`CSS of ${accordionName} accordion contents`, { tags: 'css' }, () => {
+            utilities.verifyCSS(fillInTheGapsOverImageDropdownPage.dropdownLabelSpecifyCorrectAnswerSection(), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular
+            });
+            utilities.verifyCSS(fillInTheGapsOverImageDropdownPage.dropdownSpecifyCorrectAnswerSection(), {
+                'background-color': css.color.figActiveComponentBg,
+                'border': `1px solid ${css.color.activeComponentBorder}`
+            });
+            //CSS of selected dropdown option which appears on dropdown
+            utilities.verifyCSS(fillInTheGapsOverImageDropdownPage.dropdownSpecifyCorrectAnswerSection(), {
+                'color': css.color.liText,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular
+            });
+        });
+
+        it(`Accessibility of ${accordionName} accordion contents`, { tags: 'a11y' }, () => {
+            cy.checkAccessibility(utilities.getNthElement(fillInTheGapsOverImageDropdownPage.dropdownSpecifyCorrectAnswerSection(), 0).parents('[aria-label="Specify correct answer section"]'));
+        });
+    },
+
+    verifyContentsOfSpecifyCorrectAnswerSection: () => {
+        it('When user selects a scoring type then in the \'Correct\' accordion, all the contents should be displayed', () => {
+            fillInTheGapsOverImageDropdownPage.dropdownSpecifyCorrectAnswerSection()
+                .each(($element, index) => {
+                    utilities.verifyElementVisibilityState(cy.wrap($element), 'visible');
+                    utilities.verifyInnerText(utilities.getNthElement(fillInTheGapsOverImageDropdownPage.dropdownLabelSpecifyCorrectAnswerSection(), index), `Dropdown ${index + 1}`);
+                    utilities.verifyElementVisibilityState(utilities.getNthElement(fillInTheGapsOverImageDropdownPage.dropdownLabelSpecifyCorrectAnswerSection(), index), 'visible');
+                })
+        });
+    },
 }
 
 export const fillInTheGapsOverImageDropdownPage = {

package/cypress/pages/fillInTheGapsOverImageTextPage.js

@@ -36,7 +36,7 @@ const selectors = {
     responseContainerInPreviewTab: () => cy.get('[class*="AddTextResponseOnImagestyles__DraggableInput"]'),
     canvasInPreviewTab: () => cy.get('[class*="PreviewTabstyles__ContentWrapper"] .image-container'),
     correctAnswerSectionWrapper: () => cy.get('.cloze-with-text-correct-answer-wrapper'),
-    correctAnswersLabel: () => cy.get('.correct-answers-label'),
+    correctAnswersLabel: () => cy.get('.label-image-with-text-correct-answer-label'),
     responseStatusWrapper: () => cy.get('.cloze-with-text-answer-status-response-preview-wrapper:visible'),
     tickIconWrapper: () => cy.get('.tick-icon-wrapper [data-name*="Rectangle"]'),
     responseAreaNumeration: () => cy.get('.response-input-adornment'),

package/cypress/pages/readingRulerPage.js

@@ -50,11 +50,11 @@ const selectors = {
 }
 
 const steps = {
+    ...colorPopupComponent.steps,
     ...createQuestionBasePage.steps,
     ...additionalSettingsPanel.steps,
     ...dialogBoxBase.steps,
     ...selectQuestionResourceToolPage.steps,
-    ...colorPopupComponent.steps,
 
     verifyDisplayButtonToStudentCheckboxIsChecked: () => {
         readingRulerPage.displayButtonToStudentCheckbox()

package/cypress/pages/shortTextResponsePage.js

@@ -8,8 +8,8 @@ const selectors = {
     ...autoScoredSpecifyCorrectAnswerSection,
     
     correctAnswerAccordionLabel: () => cy.get('[class*="AnswerAccordionstyles__Label"]'),
-    specifyCorrectAnswerResponseField: () => cy.get('.short-text-response-input-field input'),
-    specifyCorrectAnswerResponseFieldWrapper: () => cy.get('.short-text-response-input-field input').parents('.MuiTextField-root'),
+    answerInputFieldSpecifyCorrectAnswerSection: () => cy.get('.short-text-response-input-field input'),
+    answerInputFieldSpecifyCorrectAnswerSectionWrapper: () => cy.get('.short-text-response-input-field input').parents('.MuiTextField-root'),
     exactRadioOptionLabel: () => cy.get('.ngie-radio-label').eq(0),
     containsTextRadioOptionLabel: () => cy.get('.ngie-radio-label').eq(1),
     caseSensitiveCheckboxLabel: () => cy.get('[data-ngie-testid="case-sensitive-checkbox"] .MuiFormControlLabel-label'),
@@ -98,7 +98,7 @@ const steps = {
             .type(inputQuestion);
         shortTextResponsePage.pointsInputField()
             .type(points);
-        shortTextResponsePage.specifyCorrectAnswerResponseField()
+        shortTextResponsePage.answerInputFieldSpecifyCorrectAnswerSection()
             .type(inputAnswer);
         shortTextResponsePage.saveQuestionButton()
             .click();
@@ -108,13 +108,13 @@ const steps = {
      * @param {string} text text to entered in set correct answer input field
      */
     enterTextInAnswerInputFieldSpecifyCorrectAnswerSection: (text) => {
-        shortTextResponsePage.specifyCorrectAnswerResponseField()
+        shortTextResponsePage.answerInputFieldSpecifyCorrectAnswerSection()
             .type(text)
             .should('have.value', text);
     },
 
-    clearAndFocusOutOfSpecifyCorrectAnswerInputField: (text) => {
-        shortTextResponsePage.setCorrectAnswerResponseField()
+    clearAndFocusOutOfSpecifyCorrectAnswerInputField: () => {
+        shortTextResponsePage.answerInputFieldSpecifyCorrectAnswerSection()
             .clear()
             .blur();
     },
@@ -237,8 +237,8 @@ const tests = {
 
     verifyContentsOfSpecifyCorrectAnswerSection: () => {
         it('In the \'Correct\' accordion, one answer input field should be visible', () => {
-            utilities.verifyElementVisibilityState(shortTextResponsePage.specifyCorrectAnswerResponseField(), 'visible');
-            utilities.verifyElementCount(shortTextResponsePage.specifyCorrectAnswerResponseField(), 1);
+            utilities.verifyElementVisibilityState(shortTextResponsePage.answerInputFieldSpecifyCorrectAnswerSection(), 'visible');
+            utilities.verifyElementCount(shortTextResponsePage.answerInputFieldSpecifyCorrectAnswerSection(), 1);
         });
     },
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "itemengine-cypress-automation",
-  "version": "1.0.115",
+  "version": "1.0.116",
   "description": "",
   "main": "index.js",
   "scripts": {
@@ -35,4 +35,4 @@
     "node-fetch": "^3.3.2",
     "react-uuid": "^2.0.0"
   }
-}
+}