itemengine-cypress-automation 1.0.173 → 1.0.174

package/cypress/pages/feedbackScalePage.js

@@ -1,4 +1,4 @@
-import { additionalSettingsPanel, commonComponents, createQuestionBasePage, questionInstructionsComponent, autoScoredScoringPreviewTab } from "./components"
+import { additionalSettingsPanel, commonComponents, createQuestionBasePage, questionInstructionsComponent, autoScoredScoringPreviewTab, studentViewSettingsLabelComponent } from "./components"
 import utilities from "../support/helpers/utilities";
 const css = Cypress.env('css');
 
@@ -33,7 +33,7 @@ const selectors = {
     optionAccordionWrapper: () => cy.get('.feedback-scale-panel'),
     optionAccordionLabel: () => cy.get('.feedback-scale-panel-label'),
     optionAccordionPointsLabel: () => cy.get('.feedback-scale-points'),
-    deleteOptionAccordionButton: () => cy.get('[aria-label*="Delete Option"]'),
+    deleteOptionAccordionButton: () => cy.get('[aria-label*="Delete"][aria-label*="ption"]'),
     optionTextInputField: () => cy.get('input[aria-label="Option text"]'),
     legendTextLabel: () => cy.get('.legend-wrapper [class*="LabelWrapper"]'),
     legendTextInputField: () => cy.get('.legend-wrapper input'),
@@ -50,6 +50,7 @@ const selectors = {
     colorSectionListItem: () => cy.get('.feedback-color-row'),
     feedbackButton: () => cy.get('.feedback-scale-label-btn'),
     feedbackButtonLabelText: () => cy.get('[class*="FeedbackScalestyles__LabelText"]'),
+    feedbackNumberButton: () => cy.get('.feedbackType-number'),
     feedbackButtonNumberText: () => cy.get('[class*="FeedbackScalestyles__NumberBox"]'),
     colorPickerBlock: () => cy.get('.color-picker-block'),
     feedbackButtonColorBlock: () => cy.get('[class*="FeedbackScalestyles__ColorBlock"]'),
@@ -73,8 +74,26 @@ const selectors = {
     feedbackHeartButton: () => cy.get('.feedback-scale-label-star-btn'),
     editColorButton: () => cy.get('.icon-pencil'),
     allowStudentsToAddCommentCheckbox: () => cy.get('[data-ngie-testid="allow-students-to-add-comment-checkbox"] input'),
+    allowStudentsToAddCommentCheckboxLabel: () => cy.get('[data-ngie-testid="allow-students-to-add-comment-checkbox"] .MuiFormControlLabel-label'),
     commentLabel: () => cy.get('.describe-your-experience .inline-text-property-label'),
     commentInputField: () => cy.get('input[aria-label="Comment"]'),
+    legendSectionLabel: () => cy.get('.feedback-legend-wrapper [class*="LegendLabelWrapper"]'),
+    showLegendCheckboxLabel: () => cy.get('[data-ngie-testid="show-legend-checkbox"] .MuiFormControlLabel-label'),
+    showLegendCheckbox: () => cy.get('[data-ngie-testid="show-legend-checkbox"] input'),
+    legendVisibilityLabel: () => cy.get('[class*="FeedbackScalestyles__LegendInnerLabel"]').eq(0),
+    expandedRadioButton: () => cy.get('[type="radio"][value="expanded"]'),
+    expandedRadioButtonLabel: () => cy.get('[data-value="expanded"] label'),
+    collapsedRadioButton: () => cy.get('[type="radio"][value="collapsed"]'),
+    collapsedRadioButtonLabel: () => cy.get('[data-value="collapsed"] label'),
+    legendPlacementLabel: () => cy.get('[class*="FeedbackScalestyles__LegendInnerLabel"]').eq(1),
+    topRadioButton: () => cy.get('[type="radio"][value="top"]'),
+    topRadioButtonLabel: () => cy.get('[data-value="top"] label'),
+    bottomRadioButton: () => cy.get('[type="radio"][value="bottom"]'),
+    bottomRadioButtonLabel: () => cy.get('[data-value="bottom"] label'),
+    scoringLabel: () => cy.get('[class*="ScoringLabel"]'),
+    scoringHelpText: () => cy.get('[class*="ScoringText"]'),
+    studentViewSettingsLabel: () => cy.get('[class*="StudentViewSettingsLabel"]'),
+    legendAccordionWrapper: () => cy.get('[class*="feedback-layout-accordion"]')
 }
 
 const steps = {
@@ -810,6 +829,126 @@ const steps = {
                 feedbackScalePage.legendTextColorBlock()
                     .should('have.css', 'background-color', colorBlock);
             });
+    },
+
+    /**
+     * @param {number} buttonIndex index of the number feedback button
+     * @param {string} buttonText text content of the number feedback button
+     * @description this function verifies the visibility and text content of a number feedback button in the preview tab
+     */
+    verifyNumberFeedbackButtonInPreviewTab: (buttonIndex, buttonText) => {
+        utilities.verifyInnerText(utilities.getNthElement(feedbackScalePage.feedbackNumberButton(), buttonIndex), buttonText);
+        utilities.verifyElementVisibilityState(utilities.getNthElement(feedbackScalePage.feedbackNumberButton(), buttonIndex), 'visible');
+    },
+
+    /**
+     * @param {number} buttonIndex index of the number feedback button
+     * @description this function is used to click on a number feedback button
+     */
+    clickOnNumberFeedbackButton: (buttonIndex) => {
+        utilities.getNthElement(feedbackScalePage.feedbackNumberButton(), buttonIndex)
+            .click();
+    },
+
+    verifyShowLegendCheckboxCheckedState: () => {
+        feedbackScalePage.showLegendCheckbox()
+            .should('be.checked');
+    },
+
+    checkShowLegendCheckbox: () => {
+        feedbackScalePage.showLegendCheckbox()
+            .click()
+            .should('be.checked');
+    },
+
+    uncheckShowLegendCheckbox: () => {
+        feedbackScalePage.showLegendCheckbox()
+            .click()
+            .should('not.be.checked');
+    },
+
+    verifyExpandedRadioButtonCheckedState: () => {
+        feedbackScalePage.expandedRadioButton()
+            .should('be.checked');
+    },
+
+    verifyBottomRadioButtonCheckedState: () => {
+        feedbackScalePage.bottomRadioButton()
+            .should('be.checked');
+    },
+
+    /**
+     * Selects a legend visibility button.
+     * @param {('Collapsed' | 'Expanded')} option - The default legend visibility state of legend accordion.
+     * @throws {Error} Thrown if an invalid radio button is provided.
+     */
+    selectLegendVisibilityRadioButton: (option) => {
+        switch (option) {
+            case 'Collapsed':
+                feedbackScalePage.collapsedRadioButton()
+                    .click()
+                    .should('be.checked');
+                break;
+            case 'Expanded':
+                feedbackScalePage.expandedRadioButton()
+                    .click()
+                    .should('be.checked');
+                break;
+            default:
+                throw new Error('Invalid radio button');
+        }
+    },
+
+    verifyAllowStudentsToAddCommentCheckboxUncheckedState: () => {
+        feedbackScalePage.allowStudentsToAddCommentCheckbox()
+            .should('not.be.checked');
+    },
+
+    verifyAllowStudentsToAddCommentCheckboxCheckedState: () => {
+        feedbackScalePage.allowStudentsToAddCommentCheckbox()
+            .should('be.checked');
+    },
+
+    /**
+     * Selects the legend placement radio button based on the given option.
+     * @param {('Top' | 'Bottom')} option - The legend placement option.
+     * @throws {Error} Thrown if an invalid radio button option is provided.
+     */
+    selectLegendPlacementRadioButton: (option) => {
+        switch (option) {
+            case 'Top':
+                feedbackScalePage.topRadioButton()
+                    .click()
+                    .should('be.checked');
+                break;
+            case 'Bottom':
+                feedbackScalePage.bottomRadioButton()
+                    .click()
+                    .should('be.checked');
+                break;
+            default:
+                throw new Error('Invalid radio button');
+        }
+    },
+
+    /**
+     * Verifies the placement of the legend accordion.
+     * @param {('Top' | 'Bottom')} position - The expected position of the legend accordion.
+     * @throws {Error} Thrown if an invalid position is provided.
+     */
+    verifyLegendAccordionPlacement: (position) => {
+        switch (position) {
+            case 'Bottom':
+                feedbackScalePage.legendAccordionWrapper()
+                    .should('have.class', 'feedback-layout-accordion');
+                break;
+            case 'Top':
+                feedbackScalePage.legendAccordionWrapper()
+                    .should('have.class', 'feedback-layout-accordion-top');
+                break;
+            default:
+                throw new Error('Invalid radio button');
+        }
     }
 }
 
@@ -818,6 +957,8 @@ const tests = {
     ...additionalSettingsPanel.tests,
     ...createQuestionBasePage.tests,
     ...commonComponents.tests,
+    ...autoScoredScoringPreviewTab.tests,
+    ...studentViewSettingsLabelComponent.tests,
     verifyLegendAccordionDefaultState: () => {
         it('A \'Legend\' accordion should be present and by default it should be in expanded state', () => {
             utilities.verifyInnerText(feedbackScalePage.legendAccordion(), 'Legend');

package/cypress/pages/fillInTheGapsDragAndDropPage.js

@@ -274,7 +274,7 @@ const steps = {
             .contains(optionText)
             .click({ force: true });
         fillInTheGapsDragAndDropPage.optionsContainerSpecifyCorrectAnswerSection()
-            .click();
+            .click({ position: 'right' });
     },
 
     /**

package/cypress/pages/fillInTheGapsOverImageDragAndDropPage.js

@@ -181,7 +181,7 @@ const steps = {
         draggableOptionContainer.groupedOptionsContainerSpecifyCorrectAnswerSection()
             .find('[class*="DraggableGroupItemsstyle__DraggableWrapper"]')
             .eq(0)
-            .click();
+            .click({ position: 'right' });
     },
 
     /**
@@ -324,7 +324,7 @@ const steps = {
             .and('match', /0px none/);
     },
 
-    clickAndDropOptionInOptionsContainerInPreviewTab: (optionText, groupIndex=0) => {
+    clickAndDropOptionInOptionsContainerInPreviewTab: (optionText, groupIndex = 0) => {
         fillInTheGapsOverImageDragAndDropPage.dropzonePreviewTab()
             .contains(optionText)
             .click();
@@ -480,32 +480,32 @@ const steps = {
     verifyDropzonePointerStyleInPreviewTab: (style, dropzoneIndex) => {
         const getPosition = (option) => {
             switch (option) {
-                case 'Bottom':
+                case 'bottom':
                     return { top: '-31.5px', left: '-37.5px' };
-                case 'Bottom right':
+                case 'bottom right':
                     return { top: '-25px', left: '-40px' };
-                case 'Right':
+                case 'right':
                     return { top: '-21px', left: '-36.5px' };
-                case 'Top right':
+                case 'top right':
                     return { top: '-19px', left: '-31px' };
-                case 'Top':
+                case 'top':
                     return { top: '-22.5px', left: '-25.5px' };
-                case 'Top left':
+                case 'top left':
                     return { top: '-27px', left: '-24px' };
-                case 'Left':
+                case 'left':
                     return { bottom: '-20px', left: '-27px' };
-                case 'Bottom left':
+                case 'bottom left':
                     return { bottom: '-18px', left: '-32px' };
             }
         }
         const expectedPosition = getPosition(style);
-        if (style == 'Left' || style == 'Bottom left') {
+        if (style == 'left' || style == 'bottom left') {
             fillInTheGapsOverImageDragAndDropPage.dropzonePointerInPreviewTab()
                 .eq(dropzoneIndex)
                 .should('have.css', 'bottom', expectedPosition.bottom)
                 .and('have.css', 'left', expectedPosition.left);
         }
-        else if (style == 'None') {
+        else if (style == 'none') {
             fillInTheGapsOverImageDragAndDropPage.dropzonePointerInPreviewTab()
                 .eq(dropzoneIndex)
                 .should('not.have.css', 'bottom')

package/cypress/pages/graphingPage.js

@@ -48,8 +48,8 @@ const selectors = {
             return cy.get('[class*="GraphingWrapper"] .ngie-jxgbox .JXGtext')
         }
     },
-    xAxisLabelGraphEditTab: () => cy.get('.graph-left-wrapper .title-casing'),
-    yAxisLabelGraphEditTab: () => cy.get('.graph-footer .title-casing'),
+    xAxisLabelGraphEditTab: () => cy.get('.graph-left-wrapper .title-container').eq(0),
+    yAxisLabelGraphEditTab: () => cy.get('.graph-footer .title-container').eq(0),
     graphToolOptionEditTab: (toolOptionAriaLabel = null) => {
         if (toolOptionAriaLabel) {
             return cy.get('.graph-tools-wrapper').eq(0).find(`.single-select-toggle-group-double button[aria-label*=${toolOptionAriaLabel}]`)
@@ -448,7 +448,7 @@ const steps = {
                     const originY = graphHeight / 2;
                     const xPixel = originX + x * (graphWidth / (xRange + 1));
                     const yPixel = originY - y * (graphHeight / (yRange + 1));
-                    cy.get(`[class*="GraphingWrapper"] .ngie-jxgbox svg ellipse[display="inline"][cx*="${xPixel}"][cy*="${yPixel}"]`)
+                    cy.get(`[class*="GraphingWrapper"] .ngie-jxgbox svg ellipse[display="inline"][cx*="${Math.floor(xPixel)}"][cy*="${Math.floor(yPixel)}"]`)
                         .should('be.visible');
                 });
         });
@@ -472,7 +472,7 @@ const steps = {
                     const originY = graphHeight / 2;
                     const xPixel = originX + x * (graphWidth / (xRange + 1));
                     const yPixel = originY - y * (graphHeight / (yRange + 1));
-                    cy.get(`[class*="GraphingWrapper"] .ngie-jxgbox svg ellipse[display="inline"][cx*="${xPixel}"][cy*="${yPixel}"]`)
+                    cy.get(`[class*="GraphingWrapper"] .ngie-jxgbox svg ellipse[display="inline"][cx*="${Math.floor(xPixel)}"][cy*="${Math.floor(yPixel)}"]`)
                         .should('not.exist');
                 });
         });
@@ -1127,7 +1127,7 @@ const steps = {
                     const originY = graphHeight / 2;
                     const xPixel = originX + x * (graphWidth / (xRange + 1));
                     const yPixel = originY - y * (graphHeight / (yRange + 1));
-                    cy.get(`.MuiAccordion-region .ngie-jxgbox svg ellipse[display="inline"][cx*="${xPixel}"][cy*="${yPixel}"]`)
+                    cy.get(`.MuiAccordion-region .ngie-jxgbox svg ellipse[display="inline"][cx*="${Math.floor(xPixel)}"][cy*="${Math.floor(yPixel)}"]`)
                         .should('exist');
                 });
         });
@@ -1151,7 +1151,7 @@ const steps = {
                     const originY = graphHeight / 2;
                     const xPixel = originX + x * (graphWidth / (xRange + 1));
                     const yPixel = originY - y * (graphHeight / (yRange + 1));
-                    cy.get(`.MuiAccordion-region .ngie-jxgbox svg ellipse[display="inline"][cx*="${xPixel}"][cy*="${yPixel}"]`)
+                    cy.get(`.MuiAccordion-region .ngie-jxgbox svg ellipse[display="inline"][cx*="${Math.floor(xPixel)}"][cy*="${Math.floor(yPixel)}"]`)
                         .should('not.exist');
                 });
         });

package/cypress/pages/gridFillPage.js

@@ -479,10 +479,10 @@ const steps = {
                     .click()
                     .invoke('attr', 'aria-label')
                     .should('include', 'Hide cell');
-                utilities.getNthElement(gridFillPage.cellInCustomizeLayout(), columnIndex)
-                    .within(() => {
-                        utilities.verifyElementVisibilityState(gridFillPage.hiddenCellIcon(), 'exist');
-                    });
+                /* utilities.getNthElement(gridFillPage.cellInCustomizeLayout(), columnIndex)
+                     .within(() => {
+                         utilities.verifyElementVisibilityState(gridFillPage.hiddenCellIcon(), 'exist');
+                     });*/
             });
     },
 
@@ -756,6 +756,63 @@ const steps = {
             });
     },
 
+    verifyDefaultResponseBackgroundColorPreviewTab: (rowIndex, columnIndex) => {
+        gridFillPage.gridWrapperPreviewTab()
+            .eq(0)
+            .within(() => {
+                utilities.getNthElement(gridFillPage.rowsWrapperPreviewTab(), rowIndex)
+                    .within(() => {
+                        utilities.getNthElement(gridFillPage.cellInPreviewTab(), columnIndex)
+                            .then(($element) => {
+                                cy.window().then((win) => {
+                                    const element = $element[0];
+                                    const pseudoStyle = win.getComputedStyle(element, '::after');
+                                    const pseudoBackgroundColor = pseudoStyle.getPropertyValue('background-color');
+                                    expect(pseudoBackgroundColor).to.equal(css.color.gridCellDefaultStateBg);
+                                });
+                            });
+                    });
+            });
+    },
+
+    verifySelectedResponseBackgroundColorPreviewTab: (rowIndex, columnIndex) => {
+        gridFillPage.gridWrapperPreviewTab()
+            .eq(0)
+            .within(() => {
+                utilities.getNthElement(gridFillPage.rowsWrapperPreviewTab(), rowIndex)
+                    .within(() => {
+                        utilities.getNthElement(gridFillPage.cellInPreviewTab(), columnIndex)
+                            .then(($element) => {
+                                cy.window().then((win) => {
+                                    const element = $element[0];
+                                    const pseudoStyle = win.getComputedStyle(element, '::after');
+                                    const pseudoBackgroundColor = pseudoStyle.getPropertyValue('background-color');
+                                    expect(pseudoBackgroundColor).to.equal(css.color.gridCellSelectedStateBg);
+                                });
+                            });
+                    });
+            });
+    },
+
+    verifyHideCellBackgroundColorPreviewTab: (rowIndex, columnIndex) => {
+        gridFillPage.gridWrapperPreviewTab()
+            .eq(0)
+            .within(() => {
+                utilities.getNthElement(gridFillPage.rowsWrapperPreviewTab(), rowIndex)
+                    .within(() => {
+                        utilities.getNthElement(gridFillPage.cellInPreviewTab(), columnIndex)
+                            .then(($element) => {
+                                cy.window().then((win) => {
+                                    const element = $element[0];
+                                    const pseudoStyle = win.getComputedStyle(element, '::after');
+                                    const pseudoBackgroundColor = pseudoStyle.getPropertyValue('background-color');
+                                    expect(pseudoBackgroundColor).to.equal(css.color.defaultBackground);
+                                });
+                            });
+                    });
+            });
+    },
+
     /**
      * Verifies if the incorrect response background color is applied to a cell in the preview tab.
      * @param {number} rowIndex - The index of the row containing the cell.
@@ -962,7 +1019,7 @@ const steps = {
                     .should('have.class', 'cell-container');
             }
         }
-        if (expectedRow < 20 && expectedColumn < 20) {
+        if (expectedRow < 9 && expectedColumn < 17) {
             cy.get(`.add-rows-cols-grid-container [id*="cell-${expectedRow}-${expectedColumn}"]`)
                 .invoke('attr', 'aria-label')
                 .should('include', 'not selected');
@@ -2854,8 +2911,8 @@ const tests = {
         it('When user selects a scoring type then in the \'Correct\' accordion, all the contents should be displayed', () => {
             utilities.verifyElementCount(gridFillPage.correctAnswerAccordion(), 1);
             gridFillPage.steps.verifyCorrectAnswerAccordionIsExpanded();
-            utilities.verifyInnerText(gridFillPage.correctAnswerLabel(), 'Correct');
-            utilities.verifyElementVisibilityState(gridFillPage.gridWrapperPreviewTab(), 'visible');
+            utilities.verifyInnerText(gridFillPage.correctAnswerAccordionLabel(), 'Correct');
+            utilities.verifyElementVisibilityState(gridFillPage.gridWrapper(), 'visible');
         });
     },
 

package/cypress/pages/matchingPage.js

@@ -26,7 +26,7 @@ const selectors = {
 
     //Edit tab
     promptInputField: () => cy.get('.edit-mcq-stems-wrapper [role="textbox"]'),
-    promptInputFieldWrapper: () => cy.get('.edit-mcq-stems-wrapper [class*="SingleOptionstyle__EditorBlockWrapper"]'),
+    promptInputFieldWrapper: () => cy.get('.edit-mcq-stems-wrapper .edit-mcq-option-wrapper'),
     optionInputField: () => cy.get('.edit-mcq-options-wrapper [data-rbd-draggable-id*="option-draggable"] [role="textbox"]'),
     optionsLabel: () => cy.get('.cloze-with-drag-and-drop-options-label'),
     optionWrapper: () => cy.get('.response-options-wrapper [data-rbd-draggable-id*="option-draggable"]'),
@@ -47,7 +47,7 @@ const selectors = {
     addPromptButton: () => cy.get('.add-option-wrapper-cls button').contains('Add prompt'),
     deletePromptButton: () => cy.get('[aria-label*="Delete prompt "]'),
     optionNumeration: () => cy.get('.response-options-wrapper [class*="SingleOptionstyle__AdornmentDiv"]'),
-    promptSpecifyCorrectAnswerSection: () => cy.get('.stem-container [data-testid="question-instruction-element"]'),
+    promptSpecifyCorrectAnswerSection: () => cy.get('.correct-answer-wrapper .stem-container [data-testid="question-instruction-element"]'),
     draggableOptionInDropzoneInSpecifyCorrectAnswer: () => cy.get('.item-content-wrapper'),
     droppedDraggableOptionInDropzoneSpecifyCorrectAnswerSection: () => cy.get('[class*="MultipleDroppedItemstyles__ItemWrapper"]'),
     optionsContainerSpecifyCorrectAnswerSection: () => cy.get('.draggable-wrapper'),
@@ -955,7 +955,7 @@ const steps = {
         draggableOptionsSectionComponent.steps.addGroup();
         draggableOptionsSectionComponent.steps.addGroupTitle(groupTitle);
         for (let i = 0; i < numOptionsToAdd; i++) {
-            optionsWrapperComponent.steps.addOption();
+            matchingPage.steps.addOptionButton();
         }
         matchingPage.steps.enterTextInOptionInputField(optionArray);
     },