itemengine-cypress-automation 1.0.129 → 1.0.131-smokeTestFixes6March-aa053ff.0

package/cypress/pages/graphingPage.js

@@ -0,0 +1,484 @@
+import utilities from "../support/helpers/utilities";
+import { questionInstructionsComponent, createQuestionBasePage, scoringSectionBaseEditTab, autoScoredScoringPreviewTab, autoScoredStudentViewSettings, autoScoredSpecifyCorrectAnswerSection, commonComponents } from "./components";
+const css = Cypress.env('css');
+
+const selectors = {
+    ...createQuestionBasePage,
+    ...questionInstructionsComponent,
+    ...autoScoredScoringPreviewTab,
+    ...commonComponents,
+
+    //Edit tab
+    graphEditTab: () => cy.get('[class*="GraphingWrapper"] .ngie-jxgbox svg'),
+    snapToGridCheckbox: () => cy.get('[data-ngie-testid="snap-to-grid-checkbox"] input'),
+    graphLine: () => cy.get('line[tabindex="null"]'),
+    graphCircle: () => cy.get('ellipse[stroke-linecap="butt"]'),
+    graphPolygon: () => cy.get('polygon'),
+    graphSine: () => cy.get('path[stroke-linecap="butt"][stroke-opacity="1"]'),
+    graphPoint: (cx, cy) => cy.get(`[class*="GraphingWrapper"] .ngie-jxgbox svg ellipse[display="inline"][cx="${cx}"][cy="${cy}"]`),
+    toolOptions: (toolOptionAriaLabel = null) => {
+        if (toolOptionAriaLabel) {
+            return cy.get('[class*="CustomizedToolBarOptionsstyles__DragAndDropWrapper"]').eq(0).find(`.icon-button-custom-format[aria-label*=${toolOptionAriaLabel}]`)
+        } else {
+            return cy.get('[class*="CustomizedToolBarOptionsstyles__DragAndDropWrapper"]').eq(0).find(`.icon-button-custom-format`)
+        }
+    },
+    graphToolOptionEditTab: (toolOptionAriaLabel = null) => {
+        if (toolOptionAriaLabel) {
+            return cy.get('.graph-tools-wrapper').eq(0).find(`.single-select-toggle-group-double button[aria-label*=${toolOptionAriaLabel}]`)
+        } else {
+            return cy.get('.graph-tools-wrapper').eq(0).find('.single-select-toggle-group-double button')
+        }
+    },
+    graphToolOptionSpecifyCorrectAnswer: (toolOptionAriaLabel = null) => {
+        if (toolOptionAriaLabel) {
+            return cy.get('.graph-tools-wrapper').eq(1).find(`.single-select-toggle-group-double button[aria-label*=${toolOptionAriaLabel}]`)
+        } else {
+            return cy.get('.graph-tools-wrapper').eq(1).find('.single-select-toggle-group-double button')
+        }
+    },
+    graphToolOptionPreviewTab: (toolOptionAriaLabel = null) => {
+        if (toolOptionAriaLabel) {
+            return cy.get(`[class*="GraphingQuestion"] .single-select-toggle-group-double button[aria-label*=${toolOptionAriaLabel}]`)
+        } else {
+            return cy.get('[class*="GraphingQuestion"] .single-select-toggle-group-double button')
+        }
+    },
+    controlOptions: (toolOptionAriaLabel = null) => {
+        if (toolOptionAriaLabel) {
+            return cy.get('[class*="CustomizedToolBarOptionsstyles__DragAndDropWrapper"]').eq(1).find(`.icon-button-custom-format[aria-label*=${toolOptionAriaLabel}]`)
+        } else {
+            return cy.get('[class*="CustomizedToolBarOptionsstyles__DragAndDropWrapper"]').eq(1).find('.icon-button-custom-format')
+        }
+    },
+    graphControlOptionEditTab: (controlOptionAriaLabel = null) => {
+        if (controlOptionAriaLabel) {
+            return cy.get('[class*="GraphingToolsstyles__ControlsWrapper"]').eq(0).find(`button[aria-label*=${controlOptionAriaLabel}]`)
+        } else {
+            return cy.get('[class*="GraphingToolsstyles__ControlsWrapper"]').eq(0).find('button')
+        }
+    },
+    graphControlOptionSpecifyCorrectAnswer: (controlOptionAriaLabel = null) => {
+        if (controlOptionAriaLabel) {
+            return cy.get('[class*="GraphingToolsstyles__ControlsWrapper"]').eq(1).find(`button[aria-label*=${controlOptionAriaLabel}]`)
+        } else {
+            return cy.get('[class*="GraphingToolsstyles__ControlsWrapper"]').eq(1).find('button')
+        }
+    },
+    graphControlOptionPreviewTab: (controlOptionAriaLabel = null) => {
+        if (controlOptionAriaLabel) {
+            return cy.get(`[class*="GraphingQuestion"] [class*="GraphingToolsstyles__ControlsWrapper"] button[aria-label*=${controlOptionAriaLabel}]`)
+        } else {
+            return cy.get('[class*="GraphingQuestion"] [class*="GraphingToolsstyles__ControlsWrapper"] button')
+        }
+    },
+    graphSpecifyCorrectAnswerSection: () => cy.get('.MuiAccordion-region .ngie-jxgbox svg'),
+    graphPreviewTab: () => cy.get('[class*="GraphingQuestion"] .ngie-jxgbox svg'),
+    graphLinePreviewTab: () => cy.get('[class*="GraphingQuestion"] .ngie-jxgbox svg').eq(0).find('line[tabindex="null"]'),
+    graphLineSegmentsPreviewTab: () => cy.get('[class*="GraphingQuestion"] .ngie-jxgbox svg').eq(0).find('line[tabindex="0"]'),
+    graphCirclePreviewTab: () => cy.get('[class*="GraphingQuestion"] .ngie-jxgbox svg').eq(0).find('ellipse[stroke-linecap="butt"]'),
+    graphPolygonPreviewTab: () => cy.get('[class*="GraphingQuestion"] .ngie-jxgbox svg').eq(0).find('polygon'),
+    graphSineAndParabolaPreviewTab: () => cy.get('[class*="GraphingQuestion"] .ngie-jxgbox svg').eq(0).find('path[stroke-linecap="butt"][stroke-opacity="1"]'),
+    graphLabelInputField: () => cy.get('.label-tool:visible'),
+
+    //Background 
+    patternRadioButton: () => cy.get('[type="radio"][aria-label="Pattern"]'),
+
+    //Reset popup
+    resetPopupConfirmResetButton: () => cy.get('.accept-button'),
+
+    //Grading view
+    gradingViewQuestionSineWave: () => cy.get('.ngie-jxgbox').eq(0).find('path[stroke-linecap="butt"][stroke-opacity="1"]'),
+    gradingViewQuestionCircle: () => cy.get('.ngie-jxgbox').eq(0).find('ellipse[stroke-linecap="butt"]'),
+    gradingViewQuestionLine: () => cy.get('.ngie-jxgbox').eq(0).find('line[tabindex="null"]'),
+
+    //Correct answer section
+    correctAnswerLabel: () => cy.get('[class*="AnswerLabel"]'),
+    graphCorrectAnswerSection: () => cy.get('[class*="GraphingQuestion"] .ngie-jxgbox svg'),
+    graphSineWaveCorrectAnswerSection: () => cy.get('[class*="GraphingQuestion"] .ngie-jxgbox').eq(1).find('path[stroke-linecap="butt"][stroke-opacity="1"]'),
+    graphCircleCorrectAnswerSection: () => cy.get('[class*="GraphingQuestion"] .ngie-jxgbox').eq(1).find('ellipse[stroke-linecap="butt"]'),
+    graphLineCorrectAnswerSection: () => cy.get('[class*="GraphingQuestion"] .ngie-jxgbox').eq(1).find('line[tabindex="null"]'),
+    graphPolygonCorrectAnswerSection: () => cy.get('[class*="GraphingQuestion"] .ngie-jxgbox').eq(1).find('polygon'),
+    graphSineWaveCorrectAnswerSection: () => cy.get('[class*="GraphingQuestion"] .ngie-jxgbox').eq(1).find('path[stroke-linecap="butt"][stroke-opacity="1"]'),
+    correctIncorrectStatusMessageText: () => cy.get('[class*="Graphingstyles__CorrectIncorrectWrapper"]'),
+    incorrectIcon: () => cy.get('[data-icon="Incorrect"]'),
+    correctIcon: () => cy.get('[data-icon="CorrectAnswer"]'),
+}
+
+const steps = {
+    ...createQuestionBasePage.steps,
+    ...questionInstructionsComponent.steps,
+    ...scoringSectionBaseEditTab.steps,
+    ...autoScoredScoringPreviewTab.steps,
+    ...autoScoredStudentViewSettings.steps,
+    ...autoScoredSpecifyCorrectAnswerSection.steps,
+
+    //Edit tab
+    /**
+     * This function selects tool options
+     * @param {string[]} toolOptionAriaLabelArray array aria-label of tool options
+     */
+    selectToolOptions: (toolOptionAriaLabelArray) => {
+        toolOptionAriaLabelArray.forEach((toolOptionAriaLabel) => {
+            graphingPage.toolOptions(toolOptionAriaLabel)
+                .click();
+        });
+    },
+
+    checkSnapToGridCheckbox: () => {
+        graphingPage.snapToGridCheckbox()
+            .click();
+    },
+
+    checkPatternBackground: () => {
+        graphingPage.patternRadioButton()
+            .click();
+    },
+
+    /**
+    * This function plots points on the graph on Edit tab
+    * @param {Object[]} coordinates - An array containing x and y coordinates along with their ranges
+    * @param {number} coordinates[].x - x coordinate to be plotted on the graph
+    * @param {number} coordinates[].xRange - range of x coordinate
+    * @param {number} coordinates[].y - y coordinate to be plotted on the graph
+    * @param {number} coordinates[].yRange - range of y coordinate
+    */
+    plotPointsOnGraphEditTab: (coordinates) => {
+        coordinates.forEach(({ x, xRange, y, yRange }) => {
+            graphingPage.graphEditTab()
+                .then(($graphElement) => {
+                    const graphWidth = $graphElement[0].clientWidth;
+                    const graphHeight = $graphElement[0].clientHeight;
+                    const originX = graphWidth / 2;
+                    const originY = graphHeight / 2;
+                    const xPixel = originX + x * (graphWidth / xRange);
+                    const yPixel = originY - y * (graphHeight / yRange);
+                    graphingPage.graphEditTab()
+                        .click(xPixel, yPixel, { force: true });
+                });
+        });
+    },
+
+    /**
+    * This function verifies the plotted points on the graph on Edit tab
+    * @param {Object[]} coordinates - An array containing x and y coordinates along with their ranges
+    * @param {number} coordinates[].x - x coordinate to be plotted on the graph
+    * @param {number} coordinates[].xRange - range of x coordinate
+    * @param {number} coordinates[].y - y coordinate to be plotted on the graph
+    * @param {number} coordinates[].yRange - range of y coordinate
+    */
+    verifyPointsPlottedOnEditTabGraph: (coordinates) => {
+        coordinates.forEach(({ x, xRange, y, yRange }) => {
+            graphingPage.graphEditTab()
+                .then(($graphElement) => {
+                    const graphWidth = $graphElement[0].clientWidth;
+                    const graphHeight = $graphElement[0].clientHeight;
+                    const originX = graphWidth / 2;
+                    const originY = graphHeight / 2;
+                    const xPixel = originX + x * (graphWidth / xRange);
+                    const yPixel = originY - y * (graphHeight / yRange);
+                    cy.get(`[class*="GraphingWrapper"] .ngie-jxgbox svg ellipse[display="inline"][cx="${xPixel}"][cy="${yPixel}"]`)
+                        .should('be.visible');
+                });
+        });
+    },
+
+    /**
+     * @description This function selects the tool option from graph
+     * @param {string} toolOption aria label of the tool option to be selected
+     */
+    selectGraphToolOptionEditTab: (toolOption) => {
+        graphingPage.graphToolOptionEditTab(toolOption)
+            .click();
+    },
+
+
+    //Specify correct answer section
+    /**
+     * This function plots points on the graph in set correct answer section
+     * @param {Object[]} coordinates - An array containing x and x coordinates along with their range
+     * @param {number} coordinates[].x - x coordinate to be plotted on the graph
+     * @param {number} coordinates[].xRange - range of x coordinate
+     * @param {number} coordinates[].y - y coordinate to be plotted on the graph
+     * @param {number} coordinates[].yRange - range of y coordinate
+     */
+    plotPointsOnGraphSpecifyCorrectAnswerSection: (coordinates) => {
+        coordinates.forEach(({ x, xRange, y, yRange }) => {
+            graphingPage.graphSpecifyCorrectAnswerSection()
+                .then(($graphElement) => {
+                    const graphWidth = $graphElement[0].clientWidth;
+                    const graphHeight = $graphElement[0].clientHeight;
+                    const originX = graphWidth / 2;
+                    const originY = graphHeight / 2;
+                    const xPixel = originX + x * (graphWidth / xRange);
+                    const yPixel = originY - y * (graphHeight / yRange);
+                    graphingPage.graphSpecifyCorrectAnswerSection()
+                        .click(xPixel, yPixel, { force: true });
+                });
+        });
+    },
+
+    /**
+    * This function verifies plotted points on the graph in set correct answer section
+    * @param {Object[]} coordinates - An array containing x and x coordinates along with their range
+    * @param {number} coordinates[].x - x coordinate to be plotted on the graph
+    * @param {number} coordinates[].xRange - range of x coordinate
+    * @param {number} coordinates[].y - y coordinate to be plotted on the graph
+    * @param {number} coordinates[].yRange - range of y coordinate
+    */
+    verifyPointsPlottedOnSpecifyCorrectAnswerSection: (coordinates) => {
+        coordinates.forEach(({ x, xRange, y, yRange }) => {
+            graphingPage.graphSpecifyCorrectAnswerSection()
+                .then(($graphElement) => {
+                    const graphWidth = $graphElement[0].clientWidth;
+                    const graphHeight = $graphElement[0].clientHeight;
+                    const originX = graphWidth / 2;
+                    const originY = graphHeight / 2;
+                    const xPixel = originX + x * (graphWidth / xRange);
+                    const yPixel = originY - y * (graphHeight / yRange);
+                    cy.get(`.MuiAccordion-region .ngie-jxgbox svg ellipse[display="inline"][cx="${xPixel}"][cy="${yPixel}"]`)
+                        .should('be.visible');
+                });
+        });
+    },
+
+    /**
+    * @description This function selects the tool option from graph
+    * @param {string} toolOption aria label of the tool option to be selected
+    */
+    selectGraphToolOptionSpecifyCorrectAnswer: (toolOption) => {
+        graphingPage.graphToolOptionSpecifyCorrectAnswer(toolOption)
+            .click();
+    },
+
+
+    //Preview tab 
+    /**
+     * This function plots points on the graph in preview tab
+     * @param {Object[]} coordinates - An array containing x and x coordinates along with their range
+     * @param {number} coordinates[].x - x coordinate to be plotted on the graph
+     * @param {number} coordinates[].xRange - range of x coordinate
+     * @param {number} coordinates[].y - y coordinate to be plotted on the graph
+     * @param {number} coordinates[].yRange - range of y coordinate
+     */
+    plotPointsOnGraphPreviewTab: (coordinates) => {
+        coordinates.forEach(({ x, xRange, y, yRange }) => {
+            graphingPage.graphPreviewTab()
+                .then(($graphElement) => {
+                    const graphWidth = $graphElement[0].clientWidth;
+                    const graphHeight = $graphElement[0].clientHeight;
+                    const originX = graphWidth / 2;
+                    const originY = graphHeight / 2;
+                    const xPixel = originX + x * (graphWidth / xRange);
+                    const yPixel = originY - y * (graphHeight / yRange);
+                    graphingPage.graphPreviewTab()
+                        .click(xPixel, yPixel, { force: true });
+                });
+        });
+    },
+
+    /**
+    * This function verifies plotted points on the graph in preview tab
+    * @param {Object[]} coordinates - An array containing x and x coordinates along with their range
+    * @param {number} coordinates[].x - x coordinate to be plotted on the graph
+    * @param {number} coordinates[].xRange - range of x coordinate
+    * @param {number} coordinates[].y - y coordinate to be plotted on the graph
+    * @param {number} coordinates[].yRange - range of y coordinate
+    */
+    verifyPointsPlottedOnPreviewTab: (coordinates) => {
+        coordinates.forEach(({ x, xRange, y, yRange }) => {
+            graphingPage.graphPreviewTab()
+                .then(($graphElement) => {
+                    const graphWidth = $graphElement[0].clientWidth;
+                    const graphHeight = $graphElement[0].clientHeight;
+                    const originX = graphWidth / 2;
+                    const originY = graphHeight / 2;
+                    const xPixel = originX + x * (graphWidth / xRange);
+                    const yPixel = originY - y * (graphHeight / yRange);
+                    cy.get(`[class*="GraphingQuestion"] .ngie-jxgbox svg ellipse[display="inline"][cx="${xPixel}"][cy="${yPixel}"]`)
+                        .should('be.visible');
+                });
+        });
+    },
+
+    /**
+     * This function verifies the plotted points are incorrect
+     * @param {Object[]} coordinates - An array containing x and x coordinates along with their range
+     * @param {number} coordinates[].x - x coordinate to be plotted on the graph
+     * @param {number} coordinates[].xRange - range of x coordinate
+     * @param {number} coordinates[].y - y coordinate to be plotted on the graph
+     * @param {number} coordinates[].yRange - range of y coordinate
+     */
+    verifyIncorrectPointsPlottedOnGraphPreviewTab: (coordinates) => {
+        coordinates.forEach(({ x, xRange, y, yRange }) => {
+            graphingPage.graphPreviewTab()
+                .then(($graphElement) => {
+                    const graphWidth = $graphElement[0].clientWidth;
+                    const graphHeight = $graphElement[0].clientHeight;
+                    const originX = graphWidth / 2;
+                    const originY = graphHeight / 2;
+                    const xPixel = originX + x * (graphWidth / xRange);
+                    const yPixel = originY - y * (graphHeight / yRange);
+                    cy.get(`[class*="GraphingQuestion"] .ngie-jxgbox svg ellipse[display="inline"][cx="${xPixel}"][cy="${yPixel}"]`)
+                        .should('have.css', 'fill', css.color.incorrectAnswer);
+                });
+        });
+    },
+
+    /**
+     * This function verifies the plotted points are correct
+     * @param {Object[]} coordinates - An array containing x and x coordinates along with their range
+     * @param {number} coordinates[].x - x coordinate to be plotted on the graph
+     * @param {number} coordinates[].xRange - range of x coordinate
+     * @param {number} coordinates[].y - y coordinate to be plotted on the graph
+     * @param {number} coordinates[].yRange - range of y coordinate
+     */
+    verifyCorrectPointsPlottedOnGraphPreviewTab: (coordinates) => {
+        coordinates.forEach(({ x, xRange, y, yRange }) => {
+            graphingPage.graphPreviewTab()
+                .then(($graphElement) => {
+                    const graphWidth = $graphElement[0].clientWidth;
+                    const graphHeight = $graphElement[0].clientHeight;
+                    const originX = graphWidth / 2;
+                    const originY = graphHeight / 2;
+                    const xPixel = originX + x * (graphWidth / xRange);
+                    const yPixel = originY - y * (graphHeight / yRange);
+                    cy.get(`[class*="GraphingQuestion"] .ngie-jxgbox svg ellipse[display="inline"][cx="${xPixel}"][cy="${yPixel}"]`)
+                        .should('have.css', 'fill', css.color.correctAnswer);
+                });
+        });
+    },
+
+    /**
+    * @description This function selects the tool option from graph
+    * @param {string} toolOption aria label of the tool option to be selected
+    */
+    selectGraphToolOptionPreviewTab: (toolOption) => {
+        graphingPage.graphToolOptionPreviewTab(toolOption)
+            .click();
+    },
+
+    /**
+    * @description This function selects the control option from graph
+    * @param {string} controlOption aria label of the control option to be selected
+    */
+    selectGraphControlOptionPreviewTab: (controlOption) => {
+        graphingPage.graphControlOptionPreviewTab(controlOption)
+            .click();
+    },
+
+    /**
+    * @description This function verifies the tool option is in selected state
+    * @param {string} toolOption aria label of the tool option to be verified selected
+    */
+    verifyToolOptionSelectedPreviewTab: (toolOptionAriaLabel) => {
+        graphingPage.graphToolOptionPreviewTab(toolOptionAriaLabel)
+            .should('have.class', 'single-select-toggle-button-selected');
+    },
+
+    /**
+   * @description This function verifies the tool option is not in selected state
+   * @param {string} toolOption aria label of the tool option to be verified not selected
+   */
+    verifyToolOptionNotSelectedPreviewTab: (toolOptionAriaLabelArray) => {
+        toolOptionAriaLabelArray.forEach((toolOptionAriaLabel) => {
+            graphingPage.graphToolOptionPreviewTab(toolOptionAriaLabel)
+                .should('not.have.class', 'single-select-toggle-button-selected');
+        });
+    },
+
+    /**
+     * This function enters text in the label input field
+     * @param {string} input Label to be input
+     */
+    enterTextInGraphLabelInputField: (input) => {
+        graphingPage.graphLabelInputField()
+            .type(input)
+            .should('have.text', input);
+    },
+
+    confirmReset: () => {
+        graphingPage.resetPopupConfirmResetButton()
+            .click();
+    },
+
+    /**
+     * This function plots points on the graph in correct answer section
+     * @param {Object[]} coordinates - An array containing x and x coordinates along with their range
+     * @param {number} coordinates[].x - x coordinate to be plotted on the graph
+     * @param {number} coordinates[].xRange - range of x coordinate
+     * @param {number} coordinates[].y - y coordinate to be plotted on the graph
+     * @param {number} coordinates[].yRange - range of y coordinate
+     */
+    verifyPointsPlottedOnCorrectAnswerSection: (coordinates) => {
+        coordinates.forEach(({ x, xRange, y, yRange }) => {
+            graphingPage.graphCorrectAnswerSection()
+                .then(($graphElement) => {
+                    const graphWidth = $graphElement[0].clientWidth;
+                    const graphHeight = $graphElement[0].clientHeight;
+                    const originX = graphWidth / 2;
+                    const originY = graphHeight / 2;
+                    const xPixel = originX + x * (graphWidth / xRange);
+                    const yPixel = originY - y * (graphHeight / yRange);
+                    cy.get('[class*="GraphingQuestion"] .ngie-jxgbox svg').eq(1).find(`ellipse[display="inline"][cx="${xPixel}"][cy="${yPixel}"]`)
+                        .should('be.visible');
+                });
+        });
+    },
+
+    /**
+     * This function verifies the plotted points are correct
+     * @param {Object[]} coordinates - An array containing x and x coordinates along with their range
+     * @param {number} coordinates[].x - x coordinate to be plotted on the graph
+     * @param {number} coordinates[].xRange - range of x coordinate
+     * @param {number} coordinates[].y - y coordinate to be plotted on the graph
+     * @param {number} coordinates[].yRange - range of y coordinate
+     */
+    verifyCorrectPointsPlottedOnGraphCorrectAnswerSection: (coordinates) => {
+        coordinates.forEach(({ x, xRange, y, yRange }) => {
+            graphingPage.graphCorrectAnswerSection()
+                .then(($graphElement) => {
+                    const graphWidth = $graphElement[0].clientWidth;
+                    const graphHeight = $graphElement[0].clientHeight;
+                    const originX = graphWidth / 2;
+                    const originY = graphHeight / 2;
+                    const xPixel = originX + x * (graphWidth / xRange);
+                    const yPixel = originY - y * (graphHeight / yRange);
+                    cy.get('[class*="GraphingQuestion"] .ngie-jxgbox svg').eq(1).find(`ellipse[display="inline"][cx="${xPixel}"][cy="${yPixel}"]`)
+                        .should('have.css', 'fill', css.color.correctAnswer);
+                });
+        });
+    },
+
+    /**
+   * @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(graphingPage.correctIncorrectStatusMessageText(), `Your answer is\n${answerStatus}`)
+        graphingPage.correctIncorrectStatusMessageText()
+            .within(() => {
+                if (answerStatus === 'correct') {
+                    utilities.verifyElementVisibilityState(graphingPage.correctIcon(), 'visible');
+                } else {
+                    utilities.verifyElementVisibilityState(graphingPage.incorrectIcon(), 'visible');
+                }
+            });
+    },
+
+    verifyCorrectAnswerSectionNotExist: () => {
+        utilities.verifyElementVisibilityState(utilities.getNthElement(graphingPage.graphCorrectAnswerSection(), 1), 'notExist');
+    }
+}
+
+const tests = {
+    ...autoScoredScoringPreviewTab.tests,
+}
+
+export const graphingPage = {
+    ...selectors,
+    steps,
+    tests
+}

package/cypress/pages/index.js

@@ -40,4 +40,7 @@ export * from './drawingResponsePage';
 export * from './protractorPage';
 export * from './textEntryMathPage';
 export * from './fillInTheGapsOverImageDragAndDropPage';
-export * from './textEntryMathWithImagePage';
+export * from './textEntryMathWithImagePage';
+export * from './graphingPage';
+export * from './simpleCalculatorPage'
+export * from './contentBlocksPage';