itemengine-cypress-automation 1.0.189-e2e-execution-crash-83cdbd4.0 → 1.0.190-7thMayFixes-fcaf7b8.0

package/cypress/pages/imageHighlightPage.js

@@ -0,0 +1,364 @@
+import utilities from "../support/helpers/utilities";
+import { autoScoredScoringPreviewTab, autoScoredStudentViewSettings, backgroundImageUploadComponent, createQuestionBasePage, imageCanvasComponent, questionInstructionsComponent, scoringSectionBaseEditTab, singleMultipleSelectionModeComponent } from "./components"
+const css = Cypress.env('css');
+let imageWidth = 768;
+let imageHeight = 432;
+
+const selectors = {
+    ...questionInstructionsComponent,
+
+    //Specify possible options
+    specifyPossibleOptionsImageWrapper: () => cy.get('.drawing-tool__wrapper .drawing-tool__canvas'),
+    specifyPossibleOptionsImageCanvas: () => cy.get('.drawing-tool__wrapper .upper-canvas'),
+    freeformTool: () => cy.get('.drawing-tool__button-polygon'),
+    //Specify correct answer section
+    specifyCorrectAnswerSectionImage: () => cy.get('.highlight-svg-responseive image'),
+    specifyCorrectAnswerSectionHighlight: () => cy.get('[class*="HighlightImageControlstyles__ShapeWrapper"] a'),
+    //preview tab
+    imagePreviewTab: () => cy.get('[class*="question-preview-wrapper"] .highlight-svg-responseive image'),
+    highlightPreviewTab: () => cy.get('[class*="question-preview-wrapper"] [class*="HighlightImageControlstyles__ShapeWrapper"] a'),
+    highlightPolygonPreviewTab: () => cy.get('[class*="question-preview-wrapper"] [class*="HighlightImageControlstyles__PolygonWrapper"]'),
+    checkMarkIcon: () => cy.get('.correct-option-icon [data-name*="Rectangle"]'),
+    crossMarkIcon: () => cy.get('.incorrect-option-icon [data-name*="Rectangle"]'),
+    correctAnswersLabel: () => cy.get('[class*="__AnswerLabel"]'),
+    highlightNumerationPreviewTab: () => cy.get('[class*="__TextWrapper"]'),
+    correctAnswerContainerAnswerWrapper: () => cy.get('[class*="__AnswersWrapper"]'),
+    correctAnswerNumeration: () => cy.get('[class*="CellIndexWrapper"]'),
+    correctIncorrectAnswerTextWrapper: () => cy.get('[class*="_CorrectIncorrectWrapper"]'),
+    incorrectIcon: () => cy.get('[data-icon="Incorrect"]'),
+    correctIcon: () => cy.get('[data-icon="CorrectAnswer"]')
+}
+
+const steps = {
+    ...createQuestionBasePage.steps,
+    ...questionInstructionsComponent.steps,
+    ...backgroundImageUploadComponent.steps,
+    ...singleMultipleSelectionModeComponent.steps,
+    ...scoringSectionBaseEditTab.steps,
+    ...imageCanvasComponent.steps,
+    ...autoScoredScoringPreviewTab.steps,
+    ...autoScoredStudentViewSettings.steps,
+    //Specify possible options
+    clickOnFreeformTool: () => {
+        imageHighlightPage.freeformTool()
+            .click()
+            .blur();
+    },
+
+    verifyImageUploadedInSpecifyPossibleOptionsSection: () => {
+        imageHighlightPage.specifyPossibleOptionsImageWrapper()
+            .should('be.visible')
+            .and('have.css', 'background-image');
+        imageHighlightPage.specifyPossibleOptionsImageWrapper()
+            .should('have.css', 'background-size')
+            .and('eq', 'auto');
+        imageHighlightPage.specifyPossibleOptionsImageCanvas()
+            .should('be.visible')
+            .should('have.css', 'cursor');
+    },
+
+    /**
+     * @param {number[]} arrayOfPoints co-ordinates of the region to be highlighted
+     * @description this function draws the region to be highlighted
+     */
+    highlightRegionInImage: (arrayOfPoints) => {
+        imageHighlightPage.steps.clickOnFreeformTool();
+        imageHighlightPage.specifyPossibleOptionsImageCanvas()
+            .then(($element) => {
+                const clientWidth = $element[0].clientWidth;
+                arrayOfPoints.forEach((coordinates) => {
+                    imageHighlightPage.specifyPossibleOptionsImageCanvas()
+                        .click(coordinates[0] * clientWidth / 100, coordinates[1] * clientWidth / 100);
+                });
+                imageHighlightPage.specifyPossibleOptionsImageCanvas()
+                    .click(arrayOfPoints[0][0] * clientWidth / 100, arrayOfPoints[0][1] * clientWidth / 100);
+            });
+        cy.wait(200);
+    },
+
+    //Specify correct answer section
+    verifyImageUploadedSpecifyCorrectAnswer: () => {
+        utilities.verifyElementVisibilityState(imageHighlightPage.specifyCorrectAnswerSectionImage(), 'visible')
+    },
+
+    /**
+     * @param {number} index of region to be highlighted in set correct answer section
+     * @description this function verifies if the region is highlighted
+     */
+    verifySelectedHighlightRegionInSetCorrectAnswerSection: (index) => {
+        imageHighlightPage.specifyCorrectAnswerSectionHighlight()
+            .eq(index)
+            .should('have.attr', 'aria-checked', 'true');
+    },
+
+    /**
+    * @param {number} index of highlight region
+    * @description this function verifies if a highlight region is not selected
+    */
+    verifyRegionIsNotHighlightedInSetCorrectAnswerSection: (index) => {
+        imageHighlightPage.specifyCorrectAnswerSectionHighlight()
+            .eq(index)
+            .should('have.attr', 'aria-checked', 'false');
+    },
+
+    /**
+   * @param {number} index of highlight region
+   * @description this functions highlights a region in set correct answer section
+   */
+    highlightARegionInSpecifyCorrectAnswerSection: (index) => {
+        imageHighlightPage.specifyCorrectAnswerSectionHighlight()
+            .eq(index)
+            .click();
+        steps.verifySelectedHighlightRegionInSetCorrectAnswerSection(index);
+    },
+
+    /**
+   * @param {number} index of highlight region
+   * @description this functions highlights a region in set correct answer section
+   */
+    removeHighlightOfARegionInSetCorrectAnswerSection: (index) => {
+        imageHighlightPage.specifyCorrectAnswerSectionHighlight()
+            .eq(index)
+            .click();
+        steps.verifyRegionIsNotHighlightedInSetCorrectAnswerSection(index);
+    },
+
+    //Preview tab
+    verifyImageUploadedPreviewTab: () => {
+        utilities.verifyElementVisibilityState(imageHighlightPage.imagePreviewTab(), 'visible')
+    },
+
+    /**
+    * This function verifies the alt text of the image
+    * @param {string} altText for the image in preview tab
+    */
+    verifyImageUploadedAltTextPreviewTab: (altText) => {
+        imageHighlightPage.imagePreviewTab()
+            .should('have.attr', 'alt', altText)
+    },
+
+    /**
+     * This function verifies the image width and height
+     * @param {number} width of the image
+     * @param {number} height of the image
+     */
+    verifyImageUploadedWidthAndHeightPreviewTab: (width, height) => {
+        imageHighlightPage.imagePreviewTab()
+            .should('have.attr', 'width', width)
+            .should('have.attr', 'height', height)
+    },
+
+    /**
+     * @description verify count of highlight in preview tab
+     * @param {number} count count of the highlight
+     */
+    verifyHighlightRegionCountInPreviewTab: (count) => {
+        imageHighlightPage.highlightPreviewTab()
+            .should('have.length', count);
+    },
+
+    /**
+     * @description verify hidden state of highlight in preview tab
+     * @param {number} count count of the highlight
+     */
+    verifyHiddenHighlightRegion: (index) => {
+        utilities.getNthElement(imageHighlightPage.highlightPolygonPreviewTab(), index)
+            .should('have.attr', 'stroke-opacity', 'transparent');
+    },
+
+    /**
+     * @description verify hover state of highlight in preview tab
+     * @param {number} count count of the highlight
+     */
+    verifyHoverStateOfHighlightRegion: (index) => {
+        utilities.getNthElement(imageHighlightPage.highlightPolygonPreviewTab(), index)
+            .should('have.attr', 'stroke-opacity', '100')
+            .and('have.attr', 'fill-opacity', '40');
+    },
+
+    /**
+     * @param {number} index of highlighted region
+     * @param {number[]} hotspotCoordsInPercentage co-ordinates of the highlighted image in preview tab
+     * @description this function verifies the co-ordinates of region highlighted in preview tab
+     */
+    verifyHighlightRegionsInPreviewTab: (index, hotspotCoordsInPercentage) => {
+        let flattenedArr = hotspotCoordsInPercentage.flat();
+        imageHighlightPage.highlightPolygonPreviewTab()
+            .eq(index)
+            .then(($element) => {
+                const pointsValue = $element.attr('points');
+                const pointsArray = pointsValue.split(',');
+                let wholeNumbersArray = pointsArray.map((point) => {
+                    return Math.floor(Number(point))
+                });
+                wholeNumbersArray.forEach((actualValue, index) => {
+                    const targetValue = flattenedArr[index] * imageWidth / 100;
+                    cy.wrap(actualValue).should('be.closeTo', targetValue, 2);
+                });
+            });
+    },
+
+    /**
+    * @param {number} index of region to be highlighted in set correct answer section
+    * @description this function verifies if the region is highlighted
+    */
+    verifySelectedHighlightRegionInPreviewTab: (index) => {
+        imageHighlightPage.highlightPreviewTab()
+            .eq(index)
+            .should('have.attr', 'aria-checked', 'true');
+    },
+
+    /**
+     * @param {number} index of highlight region
+     * @description this function verifies if aa highlight region is not selected
+     */
+    verifyRegionIsNotHighlightedPreviewTab: (index) => {
+        imageHighlightPage.highlightPreviewTab()
+            .eq(index)
+            .should('have.attr', 'aria-checked', 'false');
+    },
+
+    /**
+     * @param {number} index of highlight region
+     * @description this functions highlights a region in preview tab
+     */
+    clickOnARegionInPreviewTab: (index) => {
+        imageHighlightPage.highlightPolygonPreviewTab()
+            .eq(index)
+            .click();
+    },
+
+    /**
+     * @param {number} index of highlight region
+     * @description this functions highlights a region in preview tab
+     */
+    highlightARegionInPreviewTab: (index) => {
+        imageHighlightPage.highlightPolygonPreviewTab()
+            .eq(index)
+            .click();
+        steps.verifySelectedHighlightRegionInPreviewTab(index);
+    },
+
+    /**
+    * @param {number} index of highlight region
+    * @description this functions highlights a region in set correct answer section
+    */
+    removeHighlightOfARegionInPreviewTab: (index) => {
+        imageHighlightPage.highlightPolygonPreviewTab()
+            .eq(index)
+            .click();
+        steps.verifyRegionIsNotHighlightedPreviewTab(index)
+    },
+
+    /**
+    * @param {*} index of highlight region
+    * @description this function verifies the highlight region is in default state
+    */
+    verifyDefaultHighlightRegion: (index) => {
+        utilities.verifyCSS(imageHighlightPage.highlightPolygonPreviewTab().eq(index), {
+            'stroke': css.color.activeButtons
+        });
+    },
+
+    /**
+    * @param {*} index of highlight region
+    * @description this function verifies the highlight region is correct
+    */
+    verifyCorrectHighlightRegion: (index) => {
+        utilities.verifyCSS(imageHighlightPage.highlightPolygonPreviewTab().eq(index), {
+            'fill': css.color.correctAnswerHighlightRegion,
+            'stroke': css.color.correctAnswer
+        });
+        imageHighlightPage.highlightPreviewTab()
+            .eq(index)
+            .within(() => {
+                utilities.verifyCSS(imageHighlightPage.checkMarkIcon(), {
+                    'fill': css.color.correctAnswer
+                });
+            });
+    },
+
+    /**
+     * @param {*} index of highlight region
+     * @description this function verifies the highlight region is incorrect
+     */
+    verifyIncorrectHighlightRegion: (index) => {
+        utilities.verifyCSS(imageHighlightPage.highlightPolygonPreviewTab().eq(index), {
+            'fill': css.color.incorrectAnswerHighlightRegion,
+            'stroke': css.color.incorrectAnswer
+        });
+        imageHighlightPage.highlightPreviewTab()
+            .eq(index)
+            .within(() => {
+                utilities.verifyCSS(imageHighlightPage.crossMarkIcon(), {
+                    'fill': css.color.incorrectAnswer
+                });
+            });
+    },
+
+    verifyHighlightRegionNumerationPreviewTab: () => {
+        imageHighlightPage.highlightNumerationPreviewTab()
+            .each(($el, index) => {
+                cy.wrap($el)
+                    .should('have.text', `${index + 1}`);
+            });
+    },
+
+    /**
+   * @param {string[]} numerationArray array of numeration numbers, lowercase, uppercase
+   * @description this function verifies the numeration of Correct Answer Container
+   */
+    verifyCorrectAnswerContainerNumeration: (numerationArray) => {
+        numerationArray.forEach((optionNumeration, index) => {
+            imageHighlightPage.correctAnswerNumeration()
+                .eq(index)
+                .should('have.text', optionNumeration);
+        });
+    },
+
+    /**
+     * @param {string[]} optionsTextArray array of options in the correct answer container
+     * @param {string[]} numerationArray array of numeration numbers, lowercase, uppercase
+     * @description this function verifies the contents of Correct Answer Container
+     */
+    verifyCorrectAnswerContainerContents: (optionsTextArray, numerationArray) => {
+        optionsTextArray.forEach((optionsText, index) => {
+            imageHighlightPage.correctAnswerContainerAnswerWrapper()
+                .eq(index)
+                .should('have.text', optionsText);
+        });
+        steps.verifyCorrectAnswerContainerNumeration(numerationArray);
+    },
+
+    verifyCorrectAnswerSectionNotExists: () => {
+        utilities.verifyElementVisibilityState(imageHighlightPage.correctAnswerContainerAnswerWrapper(), 'notExist');
+    },
+
+    /**
+    * @param {("correct" | "incorrect")} answerStatus - The status of the answer.
+    * @description Verifies the visibility and content of the correct/incorrect answer label block.
+    * If the answer is correct, it also verifies the visibility of the correct icon;
+    * otherwise, it verifies the visibility of the incorrect icon.
+    */
+    verifyCorrectIncorrectAnswerLabel: (answerStatus) => {
+        utilities.verifyInnerText(imageHighlightPage.correctIncorrectAnswerTextWrapper(), `Your answer is\n${answerStatus}`)
+        imageHighlightPage.correctIncorrectAnswerTextWrapper()
+            .within(() => {
+                if (answerStatus === 'correct') {
+                    utilities.verifyElementVisibilityState(imageHighlightPage.correctIcon(), 'visible');
+                } else {
+                    utilities.verifyElementVisibilityState(imageHighlightPage.incorrectIcon(), 'visible');
+                }
+            });
+    },
+}
+
+const tests = {
+    ...autoScoredScoringPreviewTab.tests,
+}
+
+export const imageHighlightPage = {
+    ...selectors,
+    steps,
+    tests
+}

package/cypress/pages/index.js

@@ -47,4 +47,9 @@ export * from './geoGebraToolsPage';
 export * from './matchingPage';
 export * from './brainingCampManipulativePage';
 export * from './numberLinePage';
-export * from './textSelectionPage';
+export * from './textSelectionPage';
+export * from './chartsBarPage';
+export * from './chartsLinePage';
+export * from './numberLineLabelPage';
+export * from './chartsDotPlotPage';
+export * from './imageHighlightPage';

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()