itemengine-cypress-automation 1.0.180-essayResponseLazyLoadingFix-3170a00.0 → 1.0.181

package/cypress/pages/components/autoScoredSpecifyCorrectAnswerSection.js

@@ -183,8 +183,8 @@ const tests = {
                 case 'list sorting':
                     helpText = 'You can set the correct answer by sorting the correct answer(s) in the response area(s).';
                     break;
-                case 'highlight':
-                    helpText = 'You can set the correct answer by highlighting the correct answer(s) in the response area(s).';
+                case 'text selection':
+                    helpText = 'You can set the correct answer by selecting the correct answer selection(s).';
                     break;
                 case 'highlight image':
                     helpText = 'You can set the correct answer by selecting the correct answer(s) in the response area(s).';
@@ -205,7 +205,7 @@ const tests = {
                     helpText = 'You can set the correct answer by entering the correct answer(s) in the response area(s)';
                     break;
                 case 'grid fill':
-                    helpText = 'You can set the correct answer by selecting the correct cell(s) in the grid.';
+                    helpText = 'You can set the correct answer by selecting the correct answer cell(s).';
                     break;
                 case 'number line':
                     helpText = 'You can set the correct answer by entering the correct answer(s) in the response area(s)';

package/cypress/pages/components/autoScoredStudentViewSettings.js

@@ -9,11 +9,11 @@ const selectors = {
     allowStudentToCheckAnswerCheckbox: () => cy.get('[data-ngie-testid="allow-students-to-check-answer-checkbox"] input'),
     maximumCheckAnswerAttemptsDropdownLabel: () => cy.get('#Maximum-check-answer-attempts-dropdown-label'),
     maximumCheckAnswerAttemptsDropdown: () => cy.get('#Maximum-check-answer-attempts-select'),
-    maximumCheckAnswerAttemptsDropdownListOptions: (ariaLabel = null) => {
-        if (ariaLabel) {
-            return cy.get(`[aria-labelledby*="Maximum-check-answer-attempts-dropdown-label"] [role="option"][aria-label*="${ariaLabel}"]`)
+    maximumCheckAnswerAttemptsDropdownListOptions: (dataValue = null) => {
+        if (dataValue) {
+            return cy.get(`[aria-labelledby*="Maximum-check-answer-attempts-dropdown-label"] [role="option"][data-value="${dataValue}"]`)
         } else {
-            return cy.get('[aria-labelledby*="Maximum-check-answer-attempts-dropdown-label"] [role="option"]')
+            return cy.get('[aria-labelledby*="Maximum-check-answer-attempts-dropdown-label"] [role="option"]').eq(0)
         }
     },
     disablePreviousIncorrectOptionLabel: () => cy.get('[data-ngie-testid="disable-previous-incorrect-options-checkbox"] .MuiFormControlLabel-label'),

package/cypress/pages/components/commonComponents.js

@@ -11,6 +11,7 @@ const selectors = {
     errorMessage: () => cy.get('.error-text-message:visible'),
     nextGenCreateItemWrapper: () => cy.get('#nextgen-assess-create-item'),
     dropdownList: () => cy.get('.dropdown-list'),
+    dropdownListOption: () => cy.get('.dropdown-menu-item'),
     dragHandleButton: () => cy.get('.dragicon-button'),
     deleteButton: () => cy.get('button[aria-label*="Delete option"]'),
     tickIconForOptionButtons: () => cy.get('.ngie-toggle-button-tick-icon'),

package/cypress/pages/components/draggableOptionContainer.js

@@ -470,6 +470,7 @@ const tests = {
 
         it('When the user enters text in options input fields then the entered text should be displayed in the respective draggable options in a group in the options container of the specify correct answer section', () => {
             optionsWrapperComponent.steps.addInputToOptionsInputField(options);
+            cy.wait(200) //Added wait as this is failing due to page updating
             draggableOptionContainer.steps.verifyGroupedContainerContentsInSpecifyCorrectAnswerSection(0, options);
         });
 

package/cypress/pages/components/equationEditorFlyout.js

@@ -244,7 +244,7 @@ const steps = {
         equationEditorFlyout.categoryCharacters('Comma')
             .click();
         equationEditorFlyout.previewInputField()
-            .type('What is the value of x?');
+            .type('What is the value of x');
         equationEditorFlyout.categoryCharacters('QuestionMark')
             .click();
         equationEditorFlyout.previewInputField()
@@ -383,9 +383,10 @@ const tests = {
 
     verifyEquationEditorFlyoutSymbolCategoriesTabs: (categoryName) => {
         it(`On clicking the ${equationEditorCategoriesAndSymbols[categoryName].displayName} category in the Equation Editor flyout, then the ${equationEditorCategoriesAndSymbols[categoryName].displayName} category tab should get selected`, () => {
-            equationEditorFlyout.categoryTab()
+            equationEditorFlyout.categoryTabTitle()
                 .contains(`${equationEditorCategoriesAndSymbols[categoryName].displayName}`, { matchCase: false })
                 .click()
+                .parents('.tool-wrapper')
                 .within(() => {
                     equationEditorFlyout.categoryTabTitle()
                         .verifyInnerText(`${equationEditorCategoriesAndSymbols[categoryName].displayName}`)

package/cypress/pages/components/essayResponseCommonComponents.js

@@ -369,8 +369,14 @@ const steps = {
         essayResponseCommonComponents.customizeFormattingOptionsTiles()
             .each(($button, count) => {
                 cy.wrap($button)
-                    .should('have.attr', 'title', customizeOptions[count])
-                    .and('have.attr', 'data-aria-pressed', stateOfFormattingOption[count])
+                    .invoke('attr', 'aria-label')
+                    .then((ariaLabel) => {
+                        const normalizedAriaLabel = ariaLabel.trim();
+                        const isOptionIncluded = customizeOptions.some(option => normalizedAriaLabel.includes(option));
+                        expect(isOptionIncluded).to.be.true;
+                        cy.wrap($button)
+                            .and('have.attr', 'data-aria-pressed', stateOfFormattingOption[count])
+                    });
             });
     },
 

package/cypress/pages/components/fillInTheGapsDropdownCommonComponent.js

@@ -683,6 +683,7 @@ const tests = {
             utilities.verifyInnerText(utilities.getNthElement(fillInTheGapsDropdownCommonComponent.dropdownLabelSpecifyCorrectAnswerSection(), 1), 'Dropdown 2');
         });
 
+        //Note: Need to find a solution for this, not working
         it('When user expands and collapses the dropdown without selecting any option, \'Error: Please set a correct answer.\' error message should be displayed', () => {
             fillInTheGapsDropdownCommonComponent.steps.expandAndCollapseDropdownInSpecifyCorrectAnswerSection(0);
             utilities.verifyElementVisibilityState(commonComponents.errorMessage(), 'visible');

package/cypress/pages/components/imageCanvasComponent.js

@@ -568,7 +568,8 @@ const steps = {
             imageCanvasComponent.responseAreaStyle()
                 .eq(index)
                 .trigger('mouseover', { force: true });
-            utilities.verifyInnerText(commonComponents.tooltipText(), dropzonePointer);
+            commonComponents.tooltipText()
+                .should('have.text', dropzonePointer, { matchCase: true });
             imageCanvasComponent.responseAreaStyle()
                 .eq(index)
                 .trigger('mouseout', { force: true });

package/cypress/pages/components/index.js

@@ -63,4 +63,5 @@ export * from './specifyRowsAndColumnsComponent'
 export * from './toolsAndControlsComponent';
 export * from './resetPopupComponent';
 export * from './setPointsPopupBase';
+export * from './styleAndLayoutCustomizationAccordionComponent';
 export * from './defaultToolDropdown';

package/cypress/pages/components/optionsWrapperComponent.js

@@ -140,6 +140,17 @@ const steps = {
             .should('have.text', '​​​​​​​This is a bold option');
     },
 
+    /**
+    * @param {number} index of the option input field
+    * @description this function add input to options input field which contains an image
+    */
+    addTextInputToOptionsInputFieldWithImage: (index) => {
+        optionsWrapperComponent.optionsInputField()
+            .eq(index)
+            .type('Petals')
+            .should('have.text', '​​​​​​​Petals');
+    },
+
     /**
      * @param {number} index of option
      * @description this function verifies bold text in options input fields

package/cypress/pages/components/styleAndLayoutCustomizationAccordionComponent.js

@@ -0,0 +1,46 @@
+import utilities from "../../support/helpers/utilities";
+
+const css = Cypress.env('css');
+
+const selectors = {
+    styleAndLayoutCustomizationAccordion: () => cy.get('.style-and-layout-customization-wrapper .MuiAccordionSummary-root'),
+}
+
+const steps = {
+    expandStyleAndLayoutCustomizationAccordion: () => {
+        styleAndLayoutCustomizationAccordionComponent.styleAndLayoutCustomizationAccordion()
+            .click()
+            .should('have.attr', 'aria-expanded', 'true');
+    },
+}
+
+const tests = {
+    verifyStyleAndLayoutCustomizationAccordionProperties: () => {
+        it('By default \'Style and layout customization\' accordion should be collapsed and by clicking on the \'Style and layout customization\' accordion, user should be able to expand the accordion', () => {
+            styleAndLayoutCustomizationAccordionComponent.styleAndLayoutCustomizationAccordion()
+                .should('have.attr', 'aria-expanded', 'false');
+            styleAndLayoutCustomizationAccordionComponent.steps.expandStyleAndLayoutCustomizationAccordion();
+        });
+
+        it('CSS of \'Style and layout customization\' accordion', { tags: 'css' }, () => {
+            utilities.verifyCSS(styleAndLayoutCustomizationAccordionComponent.styleAndLayoutCustomizationAccordion().find('.accordion_label'), {
+                'color': css.color.accordionLabel,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.bold
+            });
+            utilities.verifyCSS(styleAndLayoutCustomizationAccordionComponent.styleAndLayoutCustomizationAccordion().find('svg'), {
+                'fill': css.color.activeButtons
+            });
+        });
+
+        it('Accessibility of \'Style and layout customization\' accordion', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(styleAndLayoutCustomizationAccordionComponent.styleAndLayoutCustomizationAccordion().parents('.style-and-layout-customization-wrapper'));
+        });
+    }
+}
+
+export const styleAndLayoutCustomizationAccordionComponent = {
+    ...selectors,
+    steps,
+    tests
+}

package/cypress/pages/components/toolSettingsComponent.js

@@ -13,6 +13,7 @@ const selectors = {
     toolLabel: () => cy.get('.tool-settings-customization-wrapper [class*="DragItemstyles__ButtonLabel"]'),
     toolDragHandleButton: () => cy.get('.tool-settings-customization-wrapper [class*="DragItemstyles__DragIconWrapper"]'),
     toolEditIcon: () => cy.get('.tool-settings-customization-wrapper [class*="DragItemstyles__ItemContainer"] .icon-pencil'),
+    okButton: () => cy.get('.action-button').eq(1)
 }
 
 const steps = {
@@ -87,6 +88,11 @@ const steps = {
     clickOnToolEditIcon: (toolIndex) => {
         utilities.getNthElement(toolSettingsComponent.toolEditIcon(), toolIndex)
             .click();
+    },
+
+    clickOnOkButton: () => {
+        toolSettingsComponent.okButton()
+            .click();
     }
 }
 

package/cypress/pages/contentBlocksPage.js

@@ -591,8 +591,8 @@ const steps = {
             .within(() => {
                 utilities.verifyInnerText(createItemPage.questionTitle().eq(questionIndex), questionTitle);
                 utilities.verifyElementVisibilityState(createItemPage.questionTitle().eq(questionIndex), 'visible');
-                utilities.verifyInnerText(contentBlocksPage.contentWrapperPreviewTab().eq(questionIndex), questionInstructions);
-                utilities.verifyElementVisibilityState(contentBlocksPage.contentWrapperPreviewTab().eq(questionIndex), 'visible');
+                utilities.verifyInnerText(contentBlocksPage.contentWrapperPreviewTab(), questionInstructions);
+                utilities.verifyElementVisibilityState(contentBlocksPage.contentWrapperPreviewTab(), 'visible');
             });
     },
 }

package/cypress/pages/createItemPage.js

@@ -21,6 +21,7 @@ const selectors = {
     rowQuestionWrapper: () => cy.get('[class*="Widgetstyles__RowWrapper"]'),
     columnQuestionWrapper: () => cy.get('[class*="ColumnComponentstyles__WidgetsWrapper"]'),
     panelWrapper: () => cy.get('.column-tab-without-scroll'),
+    itemContainer: () => cy.get('.item-layout-columns-wrapper-without-scroll'),
     questionTitle: () => cy.get('.question-type-text'),
     sectionsTitleWrapper: () => cy.get('[class*="TabsComponentstyles__TabListWrapper"]'),
     sectionsTitleBoxWrapper: () => cy.get('[class*="TabsComponentstyles__TabListWrapper"] .ngie-tablist-box-wrapper'),
@@ -504,7 +505,35 @@ const steps = {
             });
     },
 
+    /**
+     * This function verifies the Panel width is half of the item width
+     * @param {number} panelIndex index of the panel 
+     */
+    verifyPanelWidthIsHalfOfItemWidth: (panelIndex) => {
+        createItemPage.itemContainer()
+            .then(($el) => {
+                const itemWidth = $el[0].clientWidth;
+                const expectedPanelWidth = itemWidth / 2
+                createItemPage.panelWrapper()
+                    .eq(panelIndex)
+                    .then(($el) => {
+                        const panelWidth = $el[0].clientWidth;
+                        expect(expectedPanelWidth).to.be.closeTo(Math.floor(panelWidth), 1);
+                    });
+            });
+    },
 
+    verifyPanelWidthEqualToItemWidth: () => {
+        createItemPage.itemContainer()
+            .then(($el) => {
+                const itemWidth = $el[0].clientWidth;
+                createItemPage.panelWrapper()
+                    .then(($el) => {
+                        const panelWidth = $el[0].clientWidth;
+                        expect(itemWidth).to.be.eq(panelWidth);
+                    });
+            });
+    }
 }
 
 export const createItemPage = {

package/cypress/pages/dialogBoxBase.js

@@ -6,8 +6,8 @@ const selectors = {
     dialogBox: () => cy.get('[aria-labelledby="alert-dialog-title"]'),
     dialogBoxTitle: () => cy.get('.dialog-title'),
     dialogBoxContent: () => cy.get('[class*="dialog-content"]'),
-    buttonReject: () => cy.get('.save-action-btn-wrapper button').eq(0),
-    buttonAccept: () => cy.get('.save-action-btn-wrapper button').eq(1),
+    buttonReject: () => cy.get('[data-testid="reject-button"]'),
+    buttonAccept: () => cy.get('[data-testid="accept-button"]'),
     buttonClose: () => cy.get('[aria-label="CLOSE"]')
 }
 

package/cypress/pages/drawingResponsePage.js

@@ -59,8 +59,8 @@ const selectors = {
         }
     },
     previewTabToolbarOptionTooltip: () => cy.get('.edit-question-preview-wrapper [role="tooltip"][class*="Tooltipstyles__TooltipContent"]'),
-    previewTabLowerCanvas: () => cy.get('.edit-question-preview-wrapper .lower-canvas'),
-    previewTabUpperCanvas: () => cy.get('.edit-question-preview-wrapper .upper-canvas'),
+    previewTabLowerCanvas: () => cy.get('.question-preview-wrapper .lower-canvas'),
+    previewTabUpperCanvas: () => cy.get('.question-preview-wrapper .upper-canvas'),
     previewTabSecondaryToolbarOptionLabel: () => cy.get('.edit-question-preview-wrapper .drawing-tool__secondary-toolbar__tool-name'),
     previewTabSecondaryToolbarOption: (ariaLabel = null) => {
         if (ariaLabel) {
@@ -198,7 +198,7 @@ const selectors = {
     editTabColorPickerPopupOpacityPalette: () => cy.get('.react-colorful__last-control .react-colorful__interactive'),
     editTabColorPickerPopupOpacityPicker: () => cy.get('.react-colorful__last-control .react-colorful__pointer'),
     editTabColorPickerPopupCancelButton: () => cy.get('.compact-popup-action-button-wrapper button').eq(0),
-    editTabColorPickerPopupOkButton: () => cy.get('.compact-popup-action-button-wrapper button').eq(2),
+    editTabColorPickerPopupOkButton: () => cy.get('.compact-popup-action-button-wrapper button').eq(1),
 
     //TODO: Student view: Need to remove once https://redmine.zeuslearning.com/issues/556302 is fixed
     studentAndGradingViewDrawingToolbarOption: (drawingOption = null) => {
@@ -208,7 +208,8 @@ const selectors = {
             return cy.get('.drawing-tool__button')
         }
     },
-    studentViewUpperCanvas: () => cy.get('.upper-canvas').eq(0)
+    studentViewUpperCanvas: () => cy.get('.upper-canvas').eq(0),
+    gradingViewPlayFeatureButton: () => cy.get('[class*="DrawingResponsePreviewstyles__PlayBtnWrapper"] button')
 }
 
 const steps = {
@@ -1225,6 +1226,24 @@ const steps = {
                 });
         });
     },
+
+    /**
+     * This function sets basic question and saves it
+     * @param {string} inputQuestion input for the question instruction
+     * @param {number} points for the question
+     */
+    createBasicDrawingResponseQuestion: (inputQuestion, points) => {
+        drawingResponsePage.questionInstructionsInputField()
+            .type(inputQuestion);
+        drawingResponsePage.pointsInputField()
+            .type(points);
+        drawingResponsePage.saveQuestionButton()
+    },
+
+    clickOnPlayButtonInGradingView: () => {
+        drawingResponsePage.gradingViewPlayFeatureButton()
+            .click();
+    }
 }
 
 const tests = {

package/cypress/pages/feedbackScalePage.js

@@ -1,11 +1,13 @@
 import { additionalSettingsPanel, commonComponents, createQuestionBasePage, questionInstructionsComponent, autoScoredScoringPreviewTab, studentViewSettingsLabelComponent } from "./components"
 import utilities from "../support/helpers/utilities";
+import { selectQuestionResourceToolPage } from "./selectQuestionResourceToolPage";
 const css = Cypress.env('css');
 
 const selectors = {
     ...questionInstructionsComponent,
     ...commonComponents,
     ...additionalSettingsPanel,
+    ...selectQuestionResourceToolPage,
     specifyFeedbackScaleOptionsLabel: () => cy.get('[class*="FeedbackScalestyles__SpecifyFeedbackLabel"]'),
     feedbackScaleStyleDropdownLabel: () => cy.get('#feedback-scale-style-dropdown-label'),
     feedbackScaleStyleDropdown: () => cy.get('#feedback-scale-style-select'),
@@ -103,6 +105,7 @@ const steps = {
     ...additionalSettingsPanel.steps,
     ...questionInstructionsComponent.steps,
     ...autoScoredScoringPreviewTab.steps,
+    ...selectQuestionResourceToolPage.steps,
     /**
      * Adds legend text to a specific option in the Legend Text accordion.
      * @param {number} optionIndex - The index of the option in the Legend Text accordion.

package/cypress/pages/graphingPage.js

@@ -1664,6 +1664,24 @@ const steps = {
 
     verifyCorrectAnswerSectionNotExist: () => {
         utilities.verifyElementVisibilityState(utilities.getNthElement(graphingPage.graphCorrectAnswerSection(), 1), 'notExist');
+    },
+
+    /**
+    * This function sets basic question and saves it
+    * @param {string} inputQuestion input for the question instruction
+    * @param {number} points for the question
+    */
+    createBasicGraphingResponseQuestion: (inputQuestion, points) => {
+        graphingPage.questionInstructionsInputField()
+            .type(inputQuestion);
+        graphingPage.pointsInputField()
+            .type(points);
+        graphingPage.steps.selectGraphToolOptionEditTab('Line');
+        graphingPage.steps.plotPointsOnGraphEditTab([{ x: 2, xRange: 20, y: 1, yRange: 20 }, { x: 2, xRange: 20, y: -5, yRange: 20 }]);
+        graphingPage.steps.selectGraphToolOptionSpecifyCorrectAnswer('Line');
+        graphingPage.steps.plotPointsOnGraphSpecifyCorrectAnswerSection([{ x: -4, xRange: 20, y: 0, yRange: 20 }, { x: 0, xRange: 20, y: 4, yRange: 20 }]);
+        graphingPage.saveQuestionButton()
+            .click();
     }
 }
 

package/cypress/pages/gridFillPage.js

@@ -787,7 +787,7 @@ const steps = {
                                     const element = $element[0];
                                     const pseudoStyle = win.getComputedStyle(element, '::after');
                                     const pseudoBackgroundColor = pseudoStyle.getPropertyValue('background-color');
-                                    expect(pseudoBackgroundColor).to.equal(css.color.gridCellSelectedStateBg);
+                                    expect(pseudoBackgroundColor).to.equal(css.color.titleContainerBorder);
                                 });
                             });
                     });
@@ -954,7 +954,11 @@ const steps = {
      * @param {number} lengthRows - The expected count of rows.
      */
     verifyRowsCountPreviewTab: (lengthRows) => {
-        utilities.verifyElementCount(gridFillPage.rowsWrapperPreviewTab(), lengthRows);
+        gridFillPage.gridWrapperPreviewTab()
+            .eq(0)
+            .within(() => {
+                utilities.verifyElementCount(gridFillPage.rowsWrapperPreviewTab(), lengthRows);
+            });
     },
 
     /**
@@ -968,6 +972,18 @@ const steps = {
             });
     },
 
+    /**
+     * @description Verifies the count of cells in a grid in the preview tab.
+     * @param {number} expectedCount - The expected count of cells in the grid.
+     */
+    getCellCountInGridPreviewTab:(expectedCount)=>{
+        gridFillPage.gridWrapperPreviewTab()
+        .eq(0)
+        .within(() => {
+            utilities.verifyElementCount(gridFillPage.cellInPreviewTab(), expectedCount);
+        });
+    },
+
     expandOpenTheGridSelectorDropdown: () => {
         gridFillPage.openTheGridSelectorDropdownButton()
             .click()

package/cypress/pages/index.js

@@ -47,4 +47,4 @@ export * from './geoGebraToolsPage';
 export * from './matchingPage';
 export * from './brainingCampManipulativePage';
 export * from './numberLinePage';
-export * from './textSelectionPage';
+export * from './textSelectionPage';

package/cypress/pages/itemPreviewSettingsPage.js

@@ -7,6 +7,8 @@ import { scoringSectionBase } from "./components";
 import { questionInstructionsComponent } from "./components";
 import { contentBlocksPage } from "./contentBlocksPage";
 import { createQuestionBasePage } from "./components";
+import { graphingPage } from "./graphingPage";
+import { drawingResponsePage } from "./drawingResponsePage";
 
 const selectors = {
     ...createItemPage,
@@ -105,6 +107,8 @@ const steps = {
     ...scoringSectionBase.steps,
     ...questionInstructionsComponent.steps,
     ...selectQuestionResourceToolPage.steps,
+    ...graphingPage.steps,
+    ...drawingResponsePage.steps,
 
     verifyEnableSideBySidePanelsCheckboxUnchecked: () => {
         itemPreviewSettingsPage.enableSideBySidePanelsCheckbox()