itemengine-cypress-automation 1.0.577-IEI-7065-Improve-test-coverage-for-essay-response-1a0a73e.0 → 1.0.578-IEI-7079-de6e553.0

package/cypress/pages/chartsBarPage.js

@@ -1,5 +1,5 @@
 import utilities from "../support/helpers/utilities"
-import { barAndLineChartComponent, chartsCommonComponent, createQuestionBasePage, questionInstructionsComponent, resetPopupComponent, scoringSectionBaseEditTab, commonComponents, autoScoredStudentViewSettings, autoScoredScoringPreviewTab, autoScoredScoringSectionMultiResponseType, autoScoredSpecifyCorrectAnswerSection, correctIncorrectAnswerLabelComponent, studentViewSettingsLabelComponent, layoutSectionComponent, additionalSettingsPanel, additionalSettingsAccessibilitySectionComponent } from "./components";
+import { barAndLineChartComponent, chartsCommonComponent, createQuestionBasePage, questionInstructionsComponent, resetPopupComponent, scoringSectionBaseEditTab, commonComponents, autoScoredStudentViewSettings, autoScoredScoringPreviewTab, autoScoredScoringSectionMultiResponseType, autoScoredSpecifyCorrectAnswerSection, correctIncorrectAnswerLabelComponent, studentViewSettingsLabelComponent, layoutSectionComponent, additionalSettingsPanel, additionalSettingsAccessibilitySectionComponent, showAlternativeAnswersComponent } from "./components";
 import { selectQuestionResourceToolPage } from "./selectQuestionResourceToolPage";
 import { createItemPage } from "./createItemPage";
 import { dialogBoxBase } from "./dialogBoxBase";
@@ -20,6 +20,7 @@ const selectors = {
     ...selectQuestionResourceToolPage,
     ...autoScoredScoringSectionMultiResponseType,
     ...chartsCommonComponent,
+    ...showAlternativeAnswersComponent,
 
     barDragHandle: () => cy.get('.bar-drag-handle'),
     bar: () => cy.get('.ngie-chart-point'),
@@ -93,6 +94,7 @@ const steps = {
     ...selectQuestionResourceToolPage.steps,
     ...commonComponents.steps,
     ...createItemPage.steps,
+    ...showAlternativeAnswersComponent.steps,
 
     /**
      * @description set the bar height/value in the select chart type section chart
@@ -726,6 +728,47 @@ const steps = {
             });
     },
 
+
+    /**
+     * Verify that a bar has the expected value and also has a tick icon in a specific answer section
+     * @param {Object} barProperties - The properties of the bar to verify
+     * @param {number} barProperties.barIndex - Index of the bar
+     * @param {number} barProperties.barValue - Expected value/height of the bar
+     * @param {number} barProperties.range - Maximum value of the axis
+     * @param {number} barProperties.sectionIndex - Index of the chart section (1 for correct, 2 for alternative)
+     * @example verifyBarValueAndTickIconInSpecificSection({ barIndex: 0, barValue: 4, range: 10, sectionIndex: 2 })
+     */
+    verifyBarValueAndTickIconInSpecificSection: ({ barIndex, barValue, range, sectionIndex }) => {
+        const expectedHeight = barValue / range;
+        
+        chartsBarPage.previewTabChartWrapper()
+            .eq(sectionIndex)
+            .within(() => {
+                utilities.getNthElement(chartsBarPage.bar(), barIndex)
+                    .should('have.attr', 'height', expectedHeight)
+                    .within(() => {
+                        chartsBarPage.tickIconWrapper()
+                            .should('be.visible')
+                            .and('have.class', 'correct-option-icon');
+                    });
+            });
+    },
+
+    /**
+     * Verify that all bars have the expected values and tick icons in a specific answer section
+     * @param {Object[]} barsData - Array of bar properties objects
+     * @param {number} barsData[].barIndex - Index of the bar
+     * @param {number} barsData[].barValue - Expected value/height of the bar
+     * @param {number} barsData[].range - Maximum value of the axis
+     * @param {number} sectionIndex - Index of the chart section (1 for correct, 2 for alternative)
+     * @example verifyAllBarsValueAndTickIconInSpecificSection(barsData, 2)
+     */
+    verifyAllBarsValueAndTickIconInSpecificSection: (barsData, sectionIndex) => {
+        barsData.forEach(({ barIndex, barValue, range }) => {
+            chartsBarPage.steps.verifyBarValueAndTickIconInSpecificSection({ barIndex, barValue, range, sectionIndex });
+        });
+    },
+
     /**
     * Verify the correct/incorrect icon not exists for bar in preview tab
     * @param {number} barIndex index of the bar 

package/cypress/pages/chartsDotPlotPage.js

@@ -1,5 +1,5 @@
 import utilities from "../support/helpers/utilities"
-import { createQuestionBasePage, questionInstructionsComponent, resetPopupComponent, scoringSectionBaseEditTab, chartsCommonComponent, commonComponents, autoScoredStudentViewSettings, autoScoredScoringPreviewTab, layoutSectionComponent, autoScoredSpecifyCorrectAnswerSection, correctIncorrectAnswerLabelComponent, autoScoredScoringSectionMultiResponseType, additionalSettingsPanel, additionalSettingsAccessibilitySectionComponent, studentViewSettingsLabelComponent } from "./components";
+import { createQuestionBasePage, questionInstructionsComponent, resetPopupComponent, scoringSectionBaseEditTab, chartsCommonComponent, commonComponents, autoScoredStudentViewSettings, autoScoredScoringPreviewTab, layoutSectionComponent, autoScoredSpecifyCorrectAnswerSection, correctIncorrectAnswerLabelComponent, autoScoredScoringSectionMultiResponseType, additionalSettingsPanel, additionalSettingsAccessibilitySectionComponent, studentViewSettingsLabelComponent, showAlternativeAnswersComponent } from "./components";
 import { selectQuestionResourceToolPage } from "./selectQuestionResourceToolPage";
 import { dialogBoxBase } from "./dialogBoxBase";
 import { createItemPage } from "./createItemPage";
@@ -96,6 +96,8 @@ const selectors = {
     //Correct answer section
     correctAnswersLabel: () => cy.get('[class*="CorrectAnswerHeader"]:visible'),
     dotPlotChartCorrectAnswerSection: () => cy.get('[class*="question-preview-wrapper"] [class*="DotPlotChartstyles__ChartWrapper"]').eq(1),
+    //alternate answer section
+    dotPlotChartAlternateAnswerSection: () => cy.get('[class*="question-preview-wrapper"] [class*="DotPlotChartstyles__ChartWrapper"]').eq(2),
     dotColumnCorrectAnswerSection: () => cy.get('.ngie-chart-point'),
     dotIconCorrectAnswerSection: () => cy.get('.dot-icon'),
     numberLineAxisCorrectAnswerSection: () => cy.get('[class*="question-preview-wrapper"] .number-line-wrapper').eq(0),
@@ -119,6 +121,7 @@ const steps = {
     ...dialogBoxBase.steps,
     ...commonComponents.steps,
     ...createItemPage.steps,
+    ...showAlternativeAnswersComponent.steps,
 
     //select chart type
     selectDotPlot: () => {
@@ -1425,6 +1428,22 @@ const steps = {
         }
     },
 
+    verifyCorrectDotColumnAlternateAnswerSection: ({ point, min, interval, defaultDots = null }) => {
+        const index = Math.round((point - min) / interval);
+        chartsDotPlotPage.dotPlotChartAlternateAnswerSection()
+            .within(() => {
+                chartsDotPlotPage.dotColumnCorrectAnswerSection()
+                    .eq(index)
+                    .should('have.class', 'correct-bar-indicator')
+                    .should('have.css', 'background-color', css.color.correctAnswerLabelBg)
+                    .find('.icon-correct')
+                    .should('exist');
+            });
+        if (defaultDots === null) {
+            steps.verifyCorrectDotAlternateAnswerSection({ point, min, interval });
+        }
+    },
+
     /**
      * Verifies that the empty dot column 
      * @param {object} options - The options object containing point, min, and interval.
@@ -1454,6 +1473,28 @@ const steps = {
             });
     },
 
+    verifyEmptyDotColumnAlternateAnswerSection: ({ point, min, interval }) => {
+        const index = Math.round((point - min) / interval);
+        chartsDotPlotPage.dotPlotChartAlternateAnswerSection()
+            .within(() => {
+                chartsDotPlotPage.dotColumnCorrectAnswerSection()
+                    .eq(index)
+                    .should('have.not.class', 'correct-bar-indicator')
+                    .should('have.css', 'background-color', css.color.transparent)
+                    .find('.icon-correct')
+                    .should('not.exist');
+                chartsDotPlotPage.dotColumnCorrectAnswerSection()
+                    .eq(index)
+                    .should('not.have.class', 'inCorrect-bar-indicator')
+                    .find('.icon-incorrect')
+                    .should('not.exist');
+                chartsDotPlotPage.dotColumnCorrectAnswerSection()
+                    .eq(index)
+                    .find('.dot-icon')
+                    .should('not.exist');
+            });
+    },
+
     /**
      * Verifies that the correct dot exists in the specified column 
      * @param {object} options - The options object containing point, min, and interval.
@@ -1477,6 +1518,22 @@ const steps = {
             });
     },
 
+    verifyCorrectDotAlternateAnswerSection: ({ point, min, interval }) => {
+        const index = Math.round((point - min) / interval);
+        chartsDotPlotPage.dotPlotChartAlternateAnswerSection()
+            .within(() => {
+                chartsDotPlotPage.dotColumnCorrectAnswerSection()
+                    .eq(index)
+                    .within(() => {
+                        chartsDotPlotPage.dotIconCorrectAnswerSection()
+                            .each((el) => {
+                                cy.wrap(el)
+                                    .should('have.css', 'background-color', css.color.correctAnswer)
+                            });
+                    });
+            });
+    },
+
     /**
     * Verifies that the default dot exists in the specified column 
     * @param {object} options - The options object containing point, min, and interval.
@@ -1500,6 +1557,22 @@ const steps = {
             });
     },
 
+    verifyDefaultDotAlternateAnswerSection: ({ point, min, interval }) => {
+        const index = Math.round((point - min) / interval);
+        chartsDotPlotPage.dotPlotChartAlternateAnswerSection()
+            .within(() => {
+                chartsDotPlotPage.dotColumnCorrectAnswerSection()
+                    .eq(index)
+                    .within(() => {
+                        chartsDotPlotPage.dotIconCorrectAnswerSection()
+                            .each((el) => {
+                                cy.wrap(el)
+                                    .should('have.css', 'background-color', css.color.activeButtons)
+                            });
+                    });
+            });
+    },
+
     /**
     * Verify the dot column is locked in preview tab
     * @param {number} index index of the dot column
@@ -1514,6 +1587,16 @@ const steps = {
             });
     },
 
+    verifyDotColumnIsLockedInAlternateAnswerSection: ({ point, min, interval }) => {
+        const index = Math.round((point - min) / interval);
+        chartsDotPlotPage.dotPlotChartAlternateAnswerSection()
+            .within(() => {
+                utilities.getNthElement(chartsDotPlotPage.dotColumnCorrectAnswerSection(), index)
+                    .find('[class*="LockIconWrapper"]')
+                    .should('exist');
+            });
+    },
+
     /**
       * Verifies the expected number of dots 
       * @param {number} expectedDotCount - The expected number of dots.
@@ -1594,6 +1677,21 @@ const steps = {
         steps.verifyDefaultDotCorrectAnswerSection({ point, min, interval });
     },
 
+    verifyLockedDotColumnAlternateAnswerSection: ({ point, min, interval }) => {
+        const index = Math.round((point - min) / interval);
+        chartsDotPlotPage.dotPlotChartAlternateAnswerSection()
+            .within(() => {
+                chartsDotPlotPage.dotColumnCorrectAnswerSection()
+                    .eq(index)
+                    .should('not.have.class', 'correct-bar-indicator')
+                    .and('not.have.class', 'inCorrect-bar-indicator')
+                    .and('not.have.css', 'background-color', css.color.correctAnswerLabelBg)
+                    .and('not.have.css', 'background-color', css.color.correctAnswerLabelBg)
+            });
+        steps.verifyDotColumnIsLockedInAlternateAnswerSection({ point, min, interval });
+        steps.verifyDefaultDotAlternateAnswerSection({ point, min, interval });
+    },
+
     /**
     * @param {number} points - The points to be allotted.
     * @description - Allots points in the scoring section.

package/cypress/pages/chartsLinePage.js

@@ -1,5 +1,5 @@
 import utilities from "../support/helpers/utilities";
-import { additionalSettingsAccessibilitySectionComponent, additionalSettingsPanel, autoScoredScoringPreviewTab, autoScoredScoringSectionMultiResponseType, autoScoredSpecifyCorrectAnswerSection, autoScoredStudentViewSettings, barAndLineChartComponent, chartsCommonComponent, commonComponents, correctIncorrectAnswerLabelComponent, createQuestionBasePage, questionInstructionsComponent, resetPopupComponent, scoringSectionBaseEditTab, layoutSectionComponent } from "./components";
+import { additionalSettingsAccessibilitySectionComponent, additionalSettingsPanel, autoScoredScoringPreviewTab, autoScoredScoringSectionMultiResponseType, autoScoredSpecifyCorrectAnswerSection, autoScoredStudentViewSettings, barAndLineChartComponent, chartsCommonComponent, commonComponents, correctIncorrectAnswerLabelComponent, createQuestionBasePage, questionInstructionsComponent, resetPopupComponent, scoringSectionBaseEditTab, layoutSectionComponent, showAlternativeAnswersComponent } from "./components";
 import { dialogBoxBase } from "./dialogBoxBase";
 import { selectQuestionResourceToolPage } from "./selectQuestionResourceToolPage";
 import { createItemPage } from "./createItemPage";
@@ -17,6 +17,7 @@ const selectors = {
     ...chartsCommonComponent,
     ...layoutSectionComponent,
     ...autoScoredSpecifyCorrectAnswerSection,
+    ...showAlternativeAnswersComponent,
     point: () => cy.get('.ngie-chart-point'),
     selectChartTypePoint: () => cy.get('[class*="Chartsstyles__ChartsQuestionWrapper"] .ngie-chart-point'),
     pointLockIcon: () => cy.get('[class*="ChartGridstyle__LineLockIconWrapper"]'),
@@ -54,6 +55,7 @@ const steps = {
     ...commonComponents.steps,
     ...createItemPage.steps,
     ...layoutSectionComponent.steps,
+    ...showAlternativeAnswersComponent.steps,
 
     /**
      * @description set the point height/value in the select chart type section chart
@@ -345,6 +347,23 @@ const steps = {
             });
     },
 
+    /**
+     * Verify the point value in correct answer section tab
+     * @param {Object} pointProperties - The properties of the point
+     * @param {number} pointProperties.pointIndex index of the point
+     * @param {number} pointProperties.value Height of the point as per the axis
+     * @param {number} pointProperties.range Maximum value of the axis on which point value is determined
+     */
+    verifyPointValueInAlternativeAnswerSection: ({ pointIndex, value, range }) => {
+        let pointValue = value / range
+        chartsLinePage.previewTabChartWrapper()
+            .eq(2)
+            .within(() => {
+                utilities.getNthElement(chartsLinePage.point(), pointIndex)
+                    .should('have.attr', 'height', pointValue);
+            });
+    },
+
     /**
      * Verify the correct/incorrect icon of point in correct answer section
      * @param {number} pointIndex index of the point 
@@ -379,6 +398,17 @@ const steps = {
             });
     },
 
+    verifyPointCorrectIncorrectIconNotExistsInAlternativeAnswerSection: (pointIndex) => {
+        chartsLinePage.previewTabChartWrapper()
+            .eq(2)
+            .within(() => {
+                utilities.getNthElement(chartsLinePage.point(), pointIndex)
+                    .within(() => {
+                        utilities.verifyElementVisibilityState(chartsLinePage.tickIconWrapper(), 'notExist');
+                    });
+            });
+    },
+
     /**
      * Verify the correct/incorrect icon of point in preview tab
      * @param {number} pointIndex index of the point 
@@ -431,6 +461,12 @@ const steps = {
         chartsLinePage.steps.verifyPointCorrectIncorrectIconNotExistsInCorrectAnswerSection(pointIndex);
     },
 
+    verifyLockedPointInAlternativeAnswerSection: ({ pointIndex, value, range }) => {
+        chartsLinePage.steps.verifyPointValueInAlternativeAnswerSection({ pointIndex: pointIndex, value: value, range: range });
+        chartsLinePage.steps.verifyPointIsLockedInAlternativeAnswerSection(pointIndex);
+        chartsLinePage.steps.verifyPointCorrectIncorrectIconNotExistsInAlternativeAnswerSection(pointIndex);
+    },
+
     /**
      * Verify the point is locked in correct answer section
      * @param {number} pointIndex index of the point
@@ -446,6 +482,17 @@ const steps = {
             });
     },
 
+    verifyPointIsLockedInAlternativeAnswerSection: (pointIndex) => {
+        chartsLinePage.previewTabChartWrapper()
+            .eq(2)
+            .within(() => {
+                utilities.getNthElement(chartsLinePage.point(), pointIndex)
+                    .within(() => {
+                        utilities.verifyElementVisibilityState(chartsLinePage.pointLockIcon(), 'visible');
+                    });
+            });
+    },
+
 
     /**
     * verify the displayed penalty points for each incorrect point

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "itemengine-cypress-automation",
-  "version": "1.0.577-IEI-7065-Improve-test-coverage-for-essay-response-1a0a73e.0",
+  "version": "1.0.578-IEI-7079-de6e553.0",
   "description": "",
   "main": "index.js",
   "scripts": {