itemengine-cypress-automation 1.0.189-e2e-execution-crash-fbb0d92.0 → 1.0.189

package/cypress/pages/components/barAndLineChartComponent.js

@@ -0,0 +1,120 @@
+import { chartsCommonComponent } from "./chartsCommonComponent";
+
+const selectors = {
+    toolsLabel: () => cy.get('[class*="SelectChartTypestyles__OptionTitle"]'),
+    addBarOrPointOptionButton: () => cy.get('#add .icon-button-custom-format'),
+    addBarOrPointOptionLabel: () => cy.get('.drag-item-label-wrapper'),
+    selectChartTypeChartToolsAddBarOrPointButton: () => cy.get('[class*="Chartsstyles__ChartsQuestionWrapper"] [class*="ChartToolsstyles__ChartToolsWrapper"] button').eq(0),
+    selectChartTypeChartToolsUndoButton: () => cy.get('[class*="Chartsstyles__ChartsQuestionWrapper"] [class*="ChartToolsstyles__ChartToolsWrapper"] button').eq(1),
+    selectChartTypeChartToolsRedoButton: () => cy.get('[class*="Chartsstyles__ChartsQuestionWrapper"] [class*="ChartToolsstyles__ChartToolsWrapper"] button').eq(1),
+    selectChartTypeChartToolsResetButton: () => cy.get('[class*="Chartsstyles__ChartsQuestionWrapper"] [class*="ChartToolsstyles__ChartToolsWrapper"] button').eq(2),
+    selectChartTypeYAxisLabelButton: () => cy.get('[class*="Chartsstyles__ChartsQuestionWrapper"] [class*="ChartsPreviewstyles__LeftWrapper"] .title-container'),
+    selectChartTypePoint: () => cy.get('[class*="Chartsstyles__ChartsQuestionWrapper"] .ngie-chart-point'),
+    barAndPointTooltipLockUnlockButton: () => cy.get('[class*="ChartTooltipstyles__LockIconWrapper"] button'),
+    barAndPointTooltipDeleteButton: () => cy.get('.charts-tooltip-delete-icon-wrapper button'),
+    barAndPointTooltipLabelButton: () => cy.get('.charts-tooltip-data-label .title-container'),
+
+    //Specify correct answer section
+    specifyCorrectAnswerToolsAddBarOrPointButton: () => cy.get('.ngie-accordion [class*="ChartToolsstyles__ChartToolsWrapper"] button').eq(0),
+    specifyCorrectAnswerToolsUndoButton: () => cy.get('.ngie-accordion [class*="ChartToolsstyles__ChartToolsWrapper"] button').eq(1),
+    specifyCorrectAnswerToolsRedoButton: () => cy.get('.ngie-accordion [class*="ChartToolsstyles__ChartToolsWrapper"] button').eq(1),
+    specifyCorrectAnswerToolsResetButton: () => cy.get('.ngie-accordion [class*="ChartToolsstyles__ChartToolsWrapper"] button').eq(2),
+
+    //Preview tab
+    previewTabToolsAddBarOrPointButton: () => cy.get('[class*="ChartsPreviewstyles__PreviewWrapper"]:visible [class*="ChartToolsstyles__ChartToolsWrapper"] button').eq(0),
+    previewTabToolsUndoButton: () => cy.get('[class*="ChartsPreviewstyles__PreviewWrapper"]:visible [class*="ChartToolsstyles__ChartToolsWrapper"] button').eq(1),
+    previewTabToolsRedoButton: () => cy.get('[class*="ChartsPreviewstyles__PreviewWrapper"]:visible [class*="ChartToolsstyles__ChartToolsWrapper"] button').eq(2),
+    previewTabToolsResetButton: () => cy.get('[class*="ChartsPreviewstyles__PreviewWrapper"]:visible [class*="ChartToolsstyles__ChartToolsWrapper"] button').eq(3),
+    previewTabYAxisLabelButton: () => cy.get('[class*="ChartsPreviewstyles__PreviewWrapper"]:visible [class*="ChartsPreviewstyles__LeftWrapper"] .title-container'),
+    previewTabYAxisCoordinate: () => cy.get('[class*="ChartsPreviewstyles__PreviewWrapper"]:visible [class*="ChartGridstyle__ValueDiv"]'),
+    previewTabChartRowHeaderContainer: () => cy.get('[class*="ChartsPreviewstyles__PreviewWrapper"]:visible [class*="ChartGridstyle__RowHeaderContainer"]'),
+}
+
+const steps = {
+    selectAddBarOrPointToolbarOption: () => {
+        barAndLineChartComponent.addBarOrPointOptionButton()
+            .click()
+        barAndLineChartComponent.addBarOrPointOptionButton()
+            .should('have.attr', 'data-aria-pressed', 'true');
+    },
+
+    addBarOrPointInChartInSelectChartTypeSection: () => {
+        barAndLineChartComponent.selectChartTypeChartToolsAddBarOrPointButton()
+            .click();
+    },
+
+    addBarOrPointInChartInSpecifyCorrectAnswerSection: () => {
+        barAndLineChartComponent.specifyCorrectAnswerToolsAddBarOrPointButton()
+            .click();
+    },
+
+    /**
+     * @description Set y axis label
+     * @param {string} text text to be set as Y axis label
+     */
+    setYAxisLabel: (text) => {
+        barAndLineChartComponent.steps.clickOnYAxisLabelButton();
+        chartsCommonComponent.steps.addInputToChartLabelPopupInputField(text);
+        chartsCommonComponent.steps.saveGraphLabelPopup();
+    },
+
+    clickOnYAxisLabelButton: () => {
+        barAndLineChartComponent.selectChartTypeYAxisLabelButton()
+            .click();
+    },
+
+    clickOnBarTooltipBarLabelButton: () => {
+        barAndLineChartComponent.barAndPointTooltipLabelButton
+    },
+
+    //Preview tab
+    /**
+     * @description edit y axis label
+     * @param {string} text text to be set as Y axis label
+     */
+    editYAxisLabelInPreviewTab: (text) => {
+        barAndLineChartComponent.steps.clickOnYAxisLabelButtonInPreviewTab();
+        chartsCommonComponent.steps.addInputToChartLabelPopupInputField(text);
+        chartsCommonComponent.steps.saveGraphLabelPopup();
+    },
+
+    clickOnYAxisLabelButtonInPreviewTab: () => {
+        barAndLineChartComponent.previewTabYAxisLabelButton()
+            .click();
+    },
+
+    addBarOrPointInChartInPreviewTab: () => {
+        barAndLineChartComponent.previewTabToolsAddBarOrPointButton()
+            .click();
+    },
+
+    clickOnUndoButtonPreviewTab: () => {
+        barAndLineChartComponent.previewTabToolsUndoButton()
+            .click();
+    },
+
+    clickOnRedoButtonPreviewTab: () => {
+        barAndLineChartComponent.previewTabToolsRedoButton()
+            .click();
+    },
+
+    clickOnResetButtonPreviewTab: () => {
+        barAndLineChartComponent.previewTabToolsResetButton()
+            .click();
+    },
+
+    /**
+     * @description edit y axis label
+     * @param {string} text text to be set as Y axis label
+     */
+    editYAxisLabelInPreviewTab: (text) => {
+        barAndLineChartComponent.steps.clickOnYAxisLabelButtonInPreviewTab();
+        chartsCommonComponent.steps.addInputToChartLabelPopupInputField(text);
+        chartsCommonComponent.steps.saveGraphLabelPopup();
+    }
+}
+
+export const barAndLineChartComponent = {
+    ...selectors,
+    steps,
+}

package/cypress/pages/components/chartsCommonComponent.js

@@ -0,0 +1,105 @@
+const selectors = {
+    selectChartTypesTitle: () => cy.get('.options-label'),
+    barToggleButton: () => cy.get('[data-ngie-testid="bar-toggle-button"]'),
+    lineToggleButton: () => cy.get('[data-ngie-testid="line-toggle-button"]'),
+    dotPlotToggleButton: () => cy.get('[data-ngie-testid="dot-plot-toggle-button"]'),
+    selectChartTypeGraphTitleButton: () => cy.get('[class*="Chartsstyles__ChartsQuestionWrapper"] [class*="ChartsPreviewstyles__TopWrapper"] .title-container'),
+    selectChartTypeXAxisLabelButton: () => cy.get('[class*="Chartsstyles__ChartsQuestionWrapper"] [class*="ChartsPreviewstyles__BottomWrapper"] .title-container'),
+    pointsInputField: () => cy.get('[class*="Chartsstyles__PointsFieldWrapper"] [class*="points-input-field"] input[type="text"]'),
+    selectChartTypesTooltipWrapper: () => cy.get('[class*="Chartsstyles__ChartsQuestionWrapper"] [class*="ChartTooltipstyles__ChartTooltipWrapper"]'),
+
+    //graph label popup
+    graphLabelPopupAddTitleLabel: () => cy.get('[aria-labelledby="alert-dialog-title"] .inline-text-property-label'),
+    graphLabelPopupAddTitleInputField: () => cy.get('[aria-labelledby="alert-dialog-title"] input'),
+    graphLabelPopupCancelButton: () => cy.get('.compact-popup-action-button-wrapper button').eq(0),
+    graphLabelPopupSaveButton: () => cy.get('.compact-popup-action-button-wrapper button').eq(1),
+
+    //preview tab
+    previewTabGraphTitle: () => cy.get('[class*="ChartsPreviewstyles__PreviewWrapper"]:visible [class*="ChartsPreviewstyles__TopWrapper"] .title-container'),
+    previewTabXAxisLabelButton: () => cy.get('[class*="ChartsPreviewstyles__PreviewWrapper"]:visible [class*="ChartsPreviewstyles__BottomWrapper"] .title-container'),
+}
+
+const steps = {
+    /**
+     * @description Set graph title
+     * @param {string} text text to be set as graph title
+     */
+    setGraphTitle: (text) => {
+        chartsCommonComponent.steps.clickOnGraphTitleButton();
+        chartsCommonComponent.steps.addInputToChartLabelPopupInputField(text);
+        chartsCommonComponent.steps.saveGraphLabelPopup();
+    },
+
+    /**
+     * @description Set x axis label
+     * @param {string} text text to be set as X axis label
+     */
+    setXAxisLabel: (text) => {
+        chartsCommonComponent.steps.clickOnXAxisLabelButton();
+        chartsCommonComponent.steps.addInputToChartLabelPopupInputField(text);
+        chartsCommonComponent.steps.saveGraphLabelPopup();
+    },
+
+    /**
+     * @description add input to chart label popup input fields
+     * @param {string} text text to be set as label
+     */
+    addInputToChartLabelPopupInputField: (text) => {
+        chartsCommonComponent.graphLabelPopupAddTitleInputField()
+            .clear()
+            .type(text);
+    },
+
+    saveGraphLabelPopup: () => {
+        chartsCommonComponent.graphLabelPopupSaveButton()
+            .click();
+    },
+
+    cancelGraphLabelPopup: () => {
+        chartsCommonComponent.graphLabelPopupCancelButton()
+            .click();
+    },
+
+    clickOnGraphTitleButton: () => {
+        chartsCommonComponent.selectChartTypeGraphTitleButton()
+            .click();
+    },
+
+    clickOnXAxisLabelButton: () => {
+        chartsCommonComponent.selectChartTypeXAxisLabelButton()
+            .click();
+    },
+
+    clickOnXAxisLabelButtonInPreviewTab: () => {
+        chartsCommonComponent.previewTabXAxisLabelButton()
+            .click();
+    },
+
+    /**
+     * @param {number} points - The points to be allotted.
+     * @description - Allots points in the scoring section.
+     */
+    allotPoints: (points) => {
+        chartsCommonComponent.pointsInputField()
+            .clear()
+            .type(`${points}`)
+            .should('have.value', points)
+            .blur();
+    },
+
+    //Preview tab
+    /**
+     * @description edit x axis label in preview tab
+     * @param {string} text text to be set as X axis label
+     */
+    editXAxisLabelInPreviewTab: (text) => {
+        chartsCommonComponent.steps.clickOnXAxisLabelButtonInPreviewTab();
+        chartsCommonComponent.steps.addInputToChartLabelPopupInputField(text);
+        chartsCommonComponent.steps.saveGraphLabelPopup();
+    },
+}
+
+export const chartsCommonComponent = {
+    ...selectors,
+    steps
+}

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

@@ -9,7 +9,7 @@ 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"]'),
+    draggableOption: () => cy.get('[class*="DraggableItems"][class*="__ItemWrapper"]'),
     optionsContainerSpecifyCorrectAnswerSection: () => cy.get('.option-drag-and-drop'),
     optionsContainerPreviewTab: () => cy.get('[class*="question-preview-wrapper"] .option-drag-and-drop'),
     groupedOptionsTitleSpecifyCorrectAnswerSection: () => cy.get('[class*="GroupTitleWrapper"]'),
@@ -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,11 @@ export * from './specifyRowsAndColumnsComponent'
 export * from './toolsAndControlsComponent';
 export * from './resetPopupComponent';
 export * from './setPointsPopupBase';
+export * from './styleAndLayoutCustomizationAccordionComponent';
 export * from './defaultToolDropdown';
+export * from './layoutSectionComponent';
+export * from './barAndLineChartComponent';
+export * from './chartsCommonComponent';
+export * from './numberLineCommonComponent';
+export * from './limitNumberOfRetakeComponent';
+export * from './allowTeachersToDownloadStudentResponseComponent';