itemengine-cypress-automation 1.0.193-packageUpdated-7f1e306.0 → 1.0.193-packageUpdated-0af2e49.0

package/cypress/pages/chartsDotPlotPage.js

@@ -1,8 +1,991 @@
+import utilities from "../support/helpers/utilities"
+import { createQuestionBasePage, questionInstructionsComponent, resetPopupComponent, scoringSectionBaseEditTab, chartsCommonComponent, commonComponents, autoScoredStudentViewSettings, autoScoredScoringPreviewTab, layoutSectionComponent, autoScoredSpecifyCorrectAnswerSection, correctIncorrectAnswerLabelComponent } from "./components";
+const css = Cypress.env('css');
+
 const selectors = {
-    minInputField: () => cy.get('input[aria-label="Min"]'),
-    maxInputField: () => cy.get('input[aria-label="Max"]')
+    ...questionInstructionsComponent,
+    ...chartsCommonComponent,
+    ...commonComponents,
+    ...autoScoredStudentViewSettings,
+    ...correctIncorrectAnswerLabelComponent,
+
+    dotPlotToggleButton: () => cy.get('[data-ngie-testid="dot-plot-toggle-button"]'),
+    minInputFieldSelectChartType: () => cy.get('input[aria-label="Min"]'),
+    maxInputFieldSelectChartType: () => cy.get('input[aria-label="Max"]'),
+    dotColumnSelectChartType: () => cy.get('.ngie-dot-plot-chart .ngie-chart-point'),
+    lockUnlockButtonSelectChartType: () => cy.get('.ngie-dot-plot-chart .lock-reset-icon-wrapper button'),
+    dotColumnLockIcon: () => cy.get('[class*="LockIconWrapper"]'),
+    tooltipWrapperSelectChartType: () => cy.get('.ngie-dot-plot-chart .charts-tooltip-wrapper'),
+    addButtonSelectChartType: () => cy.get('.ngie-dot-plot-chart .charts-tooltip-wrapper [aria-label*="plus"]'),
+    minusButtonSelectChartType: () => cy.get('.ngie-dot-plot-chart .charts-tooltip-wrapper [aria-label*="minus"]'),
+    dotIconSelectChartType: () => cy.get('.ngie-dot-plot-chart .dot-icon'),
+    controlOptionsWrapperSelectChartType: () => cy.get('.ngie-dot-plot-chart .charts-toolbar-wrapper'),
+    controlOptionsSelectChartType: (toolOptionAriaLabel = null) => {
+        if (toolOptionAriaLabel) {
+            return cy.get(`.ngie-dot-plot-chart .chart-controls button[aria-label*="${toolOptionAriaLabel}"]`)
+        } else {
+            return cy.get('.ngie-dot-plot-chart .chart-controls button')
+        }
+    },
+    //Specify correct answer
+    dotColumnSpecifyCorrectAnswer: () => cy.get('.ngie-accordion-detail .ngie-chart-point'),
+    addButtonSpecifyCorrectAnswer: () => cy.get('.ngie-accordion-detail .charts-tooltip-wrapper [aria-label*="plus"]'),
+    minusButtonSpecifyCorrectAnswer: () => cy.get('.ngie-accordion-detail .charts-tooltip-wrapper [aria-label*="minus"]'),
+    controlOptionsWrapperSpecifyCorrectAnswer: () => cy.get('.ngie-accordion-detail .charts-toolbar-wrapper'),
+    controlOptionsSpecifyCorrectAnswer: (toolOptionAriaLabel = null) => {
+        if (toolOptionAriaLabel) {
+            return cy.get(`.ngie-accordion-detail .chart-controls button[aria-label*="${toolOptionAriaLabel}"]`)
+        } else {
+            return cy.get('.ngie-accordion-detail .chart-controls button')
+        }
+    },
+    dotIconSpecifyCorrectAnswer: () => cy.get('.ngie-accordion-detail .dot-icon'),
+    tooltipWrapperSpecifyCorrectAnswer: () => cy.get('.ngie-accordion-detail .charts-tooltip-wrapper'),
+
+    //preview tab
+    dotColumnPreviewTab: () => cy.get('.ngie-chart-point:visible'),
+    tooltipWrapperPreviewTab: () => cy.get('[class*="question-preview-wrapper"] .charts-tooltip-wrapper'),
+    addButtonPreviewTab: () => cy.get('[class*="question-preview-wrapper"] .charts-tooltip-wrapper [aria-label*="plus"]'),
+    minusButtonPreviewTab: () => cy.get('[class*="question-preview-wrapper"] .charts-tooltip-wrapper [aria-label*="minus"]'),
+    dotIconPreviewTab: () => cy.get('.dot-icon:visible'),
+    controlOptionsWrapperPreviewTab: () => cy.get('[class*="question-preview-wrapper"] .charts-toolbar-wrapper:visible'),
+    controlOptionsPreviewTab: (toolOptionAriaLabel = null) => {
+        if (toolOptionAriaLabel) {
+            return cy.get(`[class*="question-preview-wrapper"] .chart-controls button[aria-label*="${toolOptionAriaLabel}"]:visible`)
+        } else {
+            return cy.get('[class*="question-preview-wrapper"] .chart-controls button')
+        }
+    },
+    dotColumnLockIconPreviewTab: () => cy.get('[class*="LockIconWrapper"]:visible'),
+    dotPlotChartPreviewTab: () => cy.get('[class*="question-preview-wrapper"] [class*="DotPlotChartstyles__ChartWrapper"]').eq(0),
+    numberLineAxisPreviewTab: () => cy.get('[class*="question-preview-wrapper"] .number-line-wrapper').eq(0),
+    labelsNumberLineAxisPreviewTab: () => cy.get('[class*="question-preview-wrapper"] [class*="DotPlotChartstyles__BottomWrapper"]').eq(0).find('.label-wrapper [class*="DotPlotChartstyles__Label"]'),
+    //Correct answer section
+    correctAnswersLabel: () => cy.get('[class*="CorrectAnswerHeader"]:visible'),
+    correctIcon: () => cy.get('.icon-correct'),
+    incorrectIcon: () => cy.get('.icon-incorrect'),
+    correctIncorrectAnswerTextWrapper: () => cy.get('[class*="AnswerStatusWrapper"]'),
+    dotPlotChartCorrectAnswerSection: () => cy.get('[class*="question-preview-wrapper"] [class*="DotPlotChartstyles__ChartWrapper"]').eq(1),
+    dotColumnCorrectAnswerSection: () => cy.get('.ngie-chart-point'),
+    dotIconCorrectAnswerSection: () => cy.get('.dot-icon'),
+    graphTitleCorrectAnswerSection: () => cy.get('.title-container'),
+    numberLineAxisCorrectAnswerSection: () => cy.get('[class*="question-preview-wrapper"] .number-line-wrapper').eq(0),
+    labelsNumberLineAxisCorrectAnswerSection: () => cy.get('[class*="question-preview-wrapper"] [class*="DotPlotChartstyles__BottomWrapper"]').eq(0).find('.label-wrapper [class*="DotPlotChartstyles__Label"]'),
+}
+
+const steps = {
+    ...scoringSectionBaseEditTab.steps,
+    ...chartsCommonComponent.steps,
+    ...createQuestionBasePage.steps,
+    ...questionInstructionsComponent.steps,
+    ...resetPopupComponent.steps,
+    ...autoScoredStudentViewSettings.steps,
+    ...autoScoredScoringPreviewTab.steps,
+    ...layoutSectionComponent.steps,
+    ...autoScoredSpecifyCorrectAnswerSection.steps,
+
+    /**
+     * @param {string} element denotes element
+     * @param {string} text denotes tooltip text
+     * @description function is used to hover over element and verify inner text of its tooltip
+     */
+    verifyTooltipInnerText: (element, text, index = null) => {
+        element()
+            .eq(index)
+            .trigger('mouseover', { force: true });
+        utilities.verifyInnerText(commonComponents.tooltipText().eq(1), text);
+        element()
+            .eq(index)
+            .trigger('mouseout', { force: true });
+    },
+
+    //select chart type
+    selectDotPlot: () => {
+        chartsDotPlotPage.dotPlotToggleButton()
+            .click();
+    },
+
+    /**
+    * Enters text into the minimum input field
+    * @param {string} value - The value to be entered into the input field.
+    */
+    enterTextInMinInputField: (value) => {
+        chartsDotPlotPage.minInputFieldSelectChartType()
+            .clear()
+            .type(value)
+            .blur();
+    },
+
+    /**
+     * Verifies text into the minimum input field.
+     * @param {string} value - The value to be verified into the input field.
+     */
+    verifyTextInMinInputField: (value) => {
+        chartsDotPlotPage.minInputFieldSelectChartType()
+            .should('have.value', value)
+    },
+
+    /**
+     * Enters text into the max input field.
+     * @param {string} value - The value to be entered into the input field.
+     */
+    enterTextInMaxInputField: (value) => {
+        chartsDotPlotPage.maxInputFieldSelectChartType()
+            .clear()
+            .type(value)
+            .blur();
+    },
+
+    /**
+      * Verifies text into the max input field.
+      * @param {string} value - The value to be verified into the input field.
+      */
+    verifyTextInMaxInputField: (value) => {
+        chartsDotPlotPage.maxInputFieldSelectChartType()
+            .should('have.value', value)
+    },
+
+    /**
+     * Selects a dot column in the chart type selection section based on the given point, minimum, and interval.
+     * @param {object} options - The options for selecting the dot column.
+     * @param {number} options.point - The point at which the dot column is located.
+     * @param {number} options.min - The minimum value of the number line axis.
+     * @param {number} options.interval - The interval value.
+     */
+    selectDotColumnInSelectChartTypeSection: ({ point, min, interval }) => {
+        const index = Math.round((point - min) / interval);
+        chartsDotPlotPage.dotColumnSelectChartType()
+            .eq(index)
+            .click()
+            .should('have.class', 'selected');
+        chartsDotPlotPage.tooltipWrapperSelectChartType()
+            .should('exist');
+    },
+
+    /**
+     * Plot dots in a dot column in select chart type.
+     * @param {number} expectedDots - The expected number of dots to be plotted.
+     * @param {number} options.point - The point value.
+     * @param {number} options.min - The minimum value.
+     * @param {number} options.interval - The interval value.
+     * @param {number|null} [options.defaultDots=null] - The default number of dots. Defaults to null.
+     */
+    plotDotsInDotColumnSelectChartTypeSection: (expectedDots, { point, min, interval, defaultDots = null }) => {
+        const index = Math.round((point - min) / interval);
+        steps.selectDotColumnInSelectChartTypeSection({ point, min, interval });
+        if (defaultDots === 0) {
+            steps.increaseDotCountInDotColumnSelectChartTypeSection(expectedDots);
+        } else {
+            const getCount = () => {
+                return chartsDotPlotPage.dotColumnSelectChartType()
+                    .eq(index)
+                    .find('.dot-icon')
+                    .its('length')
+                    .as('count')
+                    .then(() => {
+                        return cy.get('@count').then(count => count);
+                    });
+            };
+            getCount().then(count => {
+                const difference = expectedDots - count;
+                const magnitude = Math.abs(difference);
+                if (difference > 0) {
+                    steps.increaseDotCountInDotColumnSelectChartTypeSection(magnitude);
+                    steps.verifyDotCountSelectChartTypeSection(expectedDots, { point, min, interval });
+                } else if (difference < 0) {
+                    steps.decreaseDotCountInDotColumnSelectChartTypeSection(magnitude);
+                    steps.verifyDotCountSelectChartTypeSection(expectedDots, { point, min, interval });
+                }
+            });
+        }
+        steps.unselectDotColumnInSelectChartTypeSection({ point, min, interval });
+    },
+
+    /**
+     * Adds dots 
+     * @param {number} numberOfDots - The number of dots to add.
+     */
+    increaseDotCountInDotColumnSelectChartTypeSection: (numberOfDots) => {
+        for (let i = 0; i < numberOfDots; i++) {
+            chartsDotPlotPage.addButtonSelectChartType()
+                .click();
+        }
+    },
+
+
+    /**
+     * Removes dots 
+     * @param {number} numberOfDots - The number of dots to be removed
+     */
+    decreaseDotCountInDotColumnSelectChartTypeSection: (numberOfDots) => {
+        for (let i = 0; i < numberOfDots; i++) {
+            chartsDotPlotPage.minusButtonSelectChartType()
+                .click();
+        }
+    },
+
+    /**
+     * Unselects a dot column in the chart type selection section based on the given point, minimum, and interval.
+     * @param {object} options - The options for selecting the dot column.
+     * @param {number} options.point - The point at which the dot column is located.
+     * @param {number} options.min - The minimum value of the number line axis.
+     * @param {number} options.interval - The interval value.
+     */
+    unselectDotColumnInSelectChartTypeSection: ({ point, min, interval }) => {
+        const index = Math.round((point - min) / interval);
+        chartsDotPlotPage.controlOptionsWrapperSelectChartType()
+            .click();
+        chartsDotPlotPage.tooltipWrapperSelectChartType()
+            .should('not.exist');
+        chartsDotPlotPage.dotColumnSelectChartType()
+            .eq(index)
+            .should('not.have.class', 'selected');
+    },
+
+    /**
+      * Verifies the expected number of dots
+      * @param {number} expectedDotCount - The expected number of dots.
+      * @param {Object} options - Options object containing point, min, and interval values.
+      * @param {number} options.point - The point value.
+      * @param {number} options.min - The minimum value.
+      * @param {number} options.interval - The interval value.
+      */
+    verifyDotCountSelectChartTypeSection: (expectedDotCount, { point, min, interval }) => {
+        const index = Math.round((point - min) / interval);
+        chartsDotPlotPage.dotColumnSelectChartType()
+            .eq(index)
+            .within(() => {
+                chartsDotPlotPage.dotIconSelectChartType()
+                    .should('have.length', expectedDotCount);
+            });
+    },
+
+    /**
+      * Selects a control option
+      * @param {string} controlOption - The control option to select.
+      */
+    selectControlOptionSelectChartTypeSection: (controlOption) => {
+        chartsDotPlotPage.controlOptionsSelectChartType(controlOption)
+            .click();
+    },
+
+    /**
+      * @description Lock the bar in select chart type section
+      * @param {number} index Index of the bar to be locked 
+      */
+    lockDotColumn: ({ point, min, interval }) => {
+        const index = Math.round((point - min) / interval);
+        steps.selectDotColumnInSelectChartTypeSection({ point, min, interval });
+        chartsDotPlotPage.lockUnlockButtonSelectChartType()
+            .click();
+        chartsDotPlotPage.lockUnlockButtonSelectChartType()
+            .should('have.attr', 'aria-label', 'locked bar');
+        steps.unselectDotColumnInSelectChartTypeSection({ point, min, interval });
+        utilities.getNthElement(chartsDotPlotPage.dotColumnSelectChartType(), index)
+            .within(() => {
+                utilities.verifyElementVisibilityState(chartsDotPlotPage.dotColumnLockIcon(), 'visible');
+            });
+    },
+
+    //specify correct answer
+
+    /**
+     * selects a dot column in the chart type selection section based on the given point, minimum, and interval.
+     * @param {object} options - The options for selecting the dot column.
+     * @param {number} options.point - The point at which the dot column is located.
+     * @param {number} options.min - The minimum value of the number line axis.
+     * @param {number} options.interval - The interval value.
+     */
+    selectDotColumnInSpecifyCorrectAnswer: ({ point, min, interval }) => {
+        const index = Math.round((point - min) / interval);
+        chartsDotPlotPage.dotColumnSpecifyCorrectAnswer()
+            .eq(index)
+            .click()
+            .should('have.class', 'selected');
+        chartsDotPlotPage.tooltipWrapperSpecifyCorrectAnswer()
+            .should('exist');
+    },
+
+    /**
+   * Adds dots 
+   * @param {number} numberOfDots - The number of dots to add.
+   */
+    increaseDotCountInDotColumnSpecifyCorrectAnswer: (numberOfDots) => {
+        for (let i = 0; i < numberOfDots; i++) {
+            chartsDotPlotPage.addButtonSpecifyCorrectAnswer()
+                .click();
+        }
+    },
+
+    /**
+      * Removes dots 
+      * @param {number} numberOfDots - The number of dots to be removed
+      */
+    decreaseDotCountInDotColumnSpecifyCorrectAnswer: (numberOfDots) => {
+        for (let i = 0; i < numberOfDots; i++) {
+            chartsDotPlotPage.minusButtonSpecifyCorrectAnswer()
+                .click();
+        }
+    },
+
+    /**
+      * Unselects a dot column based on the given point, minimum, and interval.
+      * @param {object} options - The options for selecting the dot column.
+      * @param {number} options.point - The point at which the dot column is located.
+      * @param {number} options.min - The minimum value of the number line axis.
+      * @param {number} options.interval - The interval value.
+      */
+    unselectDotColumnInSpecifyCorrectAnswer: ({ point, min, interval }) => {
+        const index = Math.round((point - min) / interval);
+        chartsDotPlotPage.controlOptionsWrapperSpecifyCorrectAnswer()
+            .click();
+        chartsDotPlotPage.tooltipWrapperSpecifyCorrectAnswer()
+            .should('not.exist');
+        chartsDotPlotPage.dotColumnSpecifyCorrectAnswer()
+            .eq(index)
+            .should('not.have.class', 'selected');
+    },
+
+    /**
+      * Selects a control option 
+      * @param {string} controlOption - The control option to select.
+      */
+    selectControlOptionSpecifyCorrectAnswer: (controlOption) => {
+        controlOptionsSpecifyCorrectAnswer(controlOption)
+            .click();
+    },
+
+    /**
+      * Verifies the expected number of dots
+      * @param {number} expectedDotCount - The expected number of dots.
+      * @param {Object} options - Options object containing point, min, and interval values.
+      * @param {number} options.point - The point value.
+      * @param {number} options.min - The minimum value.
+      * @param {number} options.interval - The interval value.
+      */
+    verifyDotCountSpecifyCorrectAnswer: (expectedDotCount, { point, min, interval }) => {
+        const index = Math.round((point - min) / interval);
+        chartsDotPlotPage.dotColumnSpecifyCorrectAnswer()
+            .eq(index)
+            .within(() => {
+                chartsDotPlotPage.dotIconSpecifyCorrectAnswer()
+                    .should('have.length', expectedDotCount);
+            });
+    },
+
+    /**
+     * Plot dots in a dot column in specify correct answer
+     * @param {number} expectedDots - The expected number of dots to be plotted.
+     * @param {number} options.point - The point value.
+     * @param {number} options.min - The minimum value.
+     * @param {number} options.interval - The interval value.
+     * @param {number|null} [options.defaultDots=null] - The default number of dots. Defaults to null.
+     */
+    plotDotsInDotColumnSpecifyCorrectAnswer: (expectedDots, { point, min, interval, defaultDots = null }) => {
+        const index = Math.round((point - min) / interval);
+        steps.selectDotColumnInSpecifyCorrectAnswer({ point, min, interval });
+        if (defaultDots === 0) {
+            steps.increaseDotCountInDotColumnSpecifyCorrectAnswer(expectedDots);
+        } else {
+            const getCount = () => {
+                return chartsDotPlotPage.dotColumnSpecifyCorrectAnswer()
+                    .eq(index)
+                    .find('.dot-icon')
+                    .its('length')
+                    .as('count')
+                    .then(() => {
+                        return cy.get('@count').then(count => count);
+                    });
+            };
+            getCount().then(count => {
+                const difference = expectedDots - count;
+                const magnitude = Math.abs(difference);
+                if (difference > 0) {
+                    steps.increaseDotCountInDotColumnSpecifyCorrectAnswer(magnitude);
+                    steps.verifyDotCountSpecifyCorrectAnswer(expectedDots, { point, min, interval });
+                } else if (difference < 0) {
+                    steps.decreaseDotCountInDotColumnSpecifyCorrectAnswer(magnitude);
+                    steps.verifyDotCountSpecifyCorrectAnswer(expectedDots, { point, min, interval });
+                }
+            });
+        }
+        steps.unselectDotColumnInSpecifyCorrectAnswer({ point, min, interval });
+    },
+
+    //preview tab
+    /**
+     * Unselects a dot column based on the given point, minimum, and interval.
+     * @param {object} options - The options for selecting the dot column.
+     * @param {number} options.point - The point at which the dot column is located.
+     * @param {number} options.min - The minimum value of the number line axis.
+     * @param {number} options.interval - The interval value.
+     */
+    selectDotColumnInPreviewTab: ({ point, min, interval }) => {
+        const index = Math.round((point - min) / interval);
+        chartsDotPlotPage.dotColumnPreviewTab()
+            .eq(index)
+            .click();
+    },
+
+    /**
+  * Adds dots 
+  * @param {number} numberOfDots - The number of dots to add.
+  */
+    increaseDotCountInDotColumnPreviewTab: (numberOfDots) => {
+        for (let i = 0; i < numberOfDots; i++) {
+            chartsDotPlotPage.addButtonPreviewTab()
+                .click();
+        }
+    },
+
+    /**
+      * Adds dots using keyboard navigation 
+      * @param {number} numberOfDots - The number of dots to subtract.
+      * @param {object} options - The options object containing point, min, and interval.
+      * @param {number} options.point - The point value.
+      * @param {number} options.min - The minimum value.
+      * @param {number} options.interval - The interval value.
+      */
+    increaseDotInDotColumnUsingKeyboardPreviewTab: (numberOfDots, { point, min, interval }) => {
+        const index = Math.round((point - min) / interval);
+        steps.selectDotColumnInPreviewTab({ point, min, interval });
+        for (let i = 0; i < numberOfDots; i++) {
+            chartsDotPlotPage.dotColumnPreviewTab()
+                .eq(index)
+                .type('{upArrow}');
+        }
+    },
+
+    /**
+     * Removes dots 
+     * @param {number} numberOfDots - The number of dots to be removed
+     */
+    decreaseDotCountInDotColumnPreviewTab: (numberOfDots) => {
+        for (let i = 0; i < numberOfDots; i++) {
+            chartsDotPlotPage.minusButtonPreviewTab()
+                .click();
+        }
+    },
+
+    /**
+      * Removes dots using keyboard navigation 
+      * @param {number} numberOfDots - The number of dots to subtract.
+      * @param {object} options - The options object containing point, min, and interval.
+      * @param {number} options.point - The point value.
+      * @param {number} options.min - The minimum value.
+      * @param {number} options.interval - The interval value.
+      */
+    decreaseDotInDotColumnUsingKeyboardPreviewTab: (numberOfDots, { point, min, interval }) => {
+        const index = Math.round((point - min) / interval);
+        steps.selectDotColumnInPreviewTab({ point, min, interval });
+        for (let i = 0; i < numberOfDots; i++) {
+            chartsDotPlotPage.dotColumnPreviewTab()
+                .eq(index)
+                .type('{downArrow}');
+        }
+    },
+
+    /**
+    * Unselects a dot column in the chart type selection section based on the given point, minimum, and interval.
+    * @param {object} options - The options for selecting the dot column.
+    * @param {number} options.point - The point at which the dot column is located.
+    * @param {number} options.min - The minimum value of the number line axis.
+    * @param {number} options.interval - The interval value.
+    */
+    unselectDotColumnInPreviewTab: ({ point, min, interval }) => {
+        const index = Math.round((point - min) / interval);
+        chartsDotPlotPage.controlOptionsWrapperPreviewTab()
+            .click();
+        chartsDotPlotPage.tooltipWrapperPreviewTab()
+            .should('not.exist');
+        chartsDotPlotPage.dotColumnPreviewTab()
+            .eq(index)
+            .should('not.have.class', 'selected');
+    },
+
+    /**
+     * Plot dots in a dot column in preview tab
+     * @param {number} expectedDots - The expected number of dots to be plotted.
+     * @param {number} options.point - The point value.
+     * @param {number} options.min - The minimum value.
+     * @param {number} options.interval - The interval value.
+     * @param {number|null} [options.defaultDots=null] - The default number of dots. Defaults to null.
+     */
+    plotDotsInDotColumnPreviewTab: (expectedDots, { point, min, interval, defaultDots = null }) => {
+        const index = Math.round((point - min) / interval);
+        steps.selectDotColumnInPreviewTab({ point, min, interval });
+        if (defaultDots === 0) {
+            steps.increaseDotCountInDotColumnPreviewTab(expectedDots);
+            steps.verifyDotCountPreviewTab(expectedDots, { point, min, interval });
+        } else {
+            const getCount = () => {
+                return chartsDotPlotPage.dotColumnPreviewTab()
+                    .eq(index)
+                    .find('.dot-icon')
+                    .its('length')
+                    .as('count')
+                    .then(() => {
+                        return cy.get('@count').then(count => count);
+                    });
+            };
+            getCount().then(count => {
+                const difference = expectedDots - count;
+                const magnitude = Math.abs(difference);
+                if (expectedDots === 0) {
+                    steps.decreaseDotCountInDotColumnPreviewTab(count);
+                    steps.verifyDotCountPreviewTab(expectedDots, { point, min, interval });
+                }
+                else if (difference > 0) {
+                    steps.increaseDotCountInDotColumnPreviewTab(magnitude);
+                    steps.verifyDotCountPreviewTab(expectedDots, { point, min, interval });
+                } else if (difference < 0) {
+                    steps.decreaseDotCountInDotColumnPreviewTab(magnitude);
+                    steps.verifyDotCountPreviewTab(expectedDots, { point, min, interval });
+                }
+            });
+        }
+        steps.unselectDotColumnInPreviewTab({ point, min, interval });
+    },
+
+    tooltipWrapperNotExistPreviewTab: () => {
+        chartsDotPlotPage.tooltipWrapperPreviewTab()
+            .should('not.exist');
+    },
+
+    /**
+      * Verifies the expected number of dots 
+      * @param {number} expectedDotCount - The expected number of dots.
+      * @param {Object} options - Options object containing point, min, and interval values.
+      * @param {number} options.point - The point value.
+      * @param {number} options.min - The minimum value.
+      * @param {number} options.interval - The interval value.
+      */
+    verifyDotCountPreviewTab: (expectedDotCount, { point, min, interval }) => {
+        const index = Math.round((point - min) / interval);
+        chartsDotPlotPage.dotColumnPreviewTab()
+            .eq(index)
+            .within(() => {
+                chartsDotPlotPage.dotIconPreviewTab()
+                    .should('have.length', expectedDotCount);
+            });
+    },
+
+    /**
+    * Verifies that dots do not exist in the specified column
+    * @param {object} options - The options object containing point, min, and interval.
+    * @param {number} options.point - The point value.
+    * @param {number} options.min - The minimum value.
+    * @param {number} options.interval - The interval value.
+    */
+    verifyDotNotExistPreviewTab: ({ point, min, interval }) => {
+        const index = Math.round((point - min) / interval);
+        chartsDotPlotPage.dotColumnPreviewTab()
+            .eq(index)
+            .within(() => {
+                chartsDotPlotPage.dotIconPreviewTab()
+                    .should('not.exist');
+            });
+    },
+
+    /**
+     * Selects a control option 
+     * @param {string} controlOption - The control option to select.
+     */
+    selectControlOptionPreviewTab: (controlOption) => {
+        chartsDotPlotPage.controlOptionsPreviewTab(controlOption)
+            .click();
+    },
+
+    /**
+     * Verify the bar is locked in preview tab
+     * @param {number} index index of the bar
+     */
+    verifyDotColumnIsLockedInPreviewTab: ({ point, min, interval }) => {
+        const index = Math.round((point - min) / interval);
+        utilities.getNthElement(chartsDotPlotPage.dotColumnPreviewTab(), index)
+            .within(() => {
+                utilities.verifyElementVisibilityState(chartsDotPlotPage.dotColumnLockIconPreviewTab(), 'visible');
+            });
+        utilities.getNthElement(chartsDotPlotPage.dotColumnPreviewTab(), index)
+            .should('have.css', 'background-color', css.color.lockedDotColumnBg);
+    },
+
+    /**
+     * Verify the bar is unlocked in preview tab
+     * @param {number} index index of the bar
+     */
+    verifyDotColumnIsUnlockedInPreviewTab: ({ point, min, interval }) => {
+        const index = Math.round((point - min) / interval);
+        utilities.getNthElement(chartsDotPlotPage.dotColumnPreviewTab(), index)
+            .within(() => {
+                utilities.verifyElementVisibilityState(chartsDotPlotPage.dotColumnLockIconPreviewTab(), 'notExist');
+            });
+    },
+
+    /**
+      * Verifies that the correct dot  column 
+      * @param {object} options - The options object containing point, min, and interval.
+      * @param {number} options.point - The point value.
+      * @param {number} options.min - The minimum value.
+      * @param {number} options.interval - The interval value.
+      */
+    verifyCorrectDotColumnPreviewTab: ({ point, min, interval, defaultDots = null }) => {
+        const index = Math.round((point - min) / interval);
+        chartsDotPlotPage.dotPlotChartPreviewTab()
+            .within(() => {
+                chartsDotPlotPage.dotColumnPreviewTab()
+                    .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.verifyCorrectDotPreviewTab({ point, min, interval });
+        }
+    },
+
+    /**
+     * Verifies that the incorrect dot column 
+     * @param {object} options - The options object containing point, min, and interval.
+     * @param {number} options.point - The point value.
+     * @param {number} options.min - The minimum value.
+     * @param {number} options.interval - The interval value.
+     */
+    verifyIncorrectDotColumnPreviewTab: ({ point, min, interval, defaultDots = null }) => {
+        const index = Math.round((point - min) / interval);
+        chartsDotPlotPage.dotPlotChartPreviewTab()
+            .within(() => {
+                chartsDotPlotPage.dotColumnPreviewTab()
+                    .eq(index)
+                    .should('have.class', 'inCorrect-bar-indicator')
+                    .should('have.css', 'background-color', css.color.incorrectAnswerLabelBg)
+                    .find('.icon-incorrect')
+                    .should('exist');
+            });
+        if (defaultDots === null) {
+            steps.verifyIncorrectDotPreviewTab({ point, min, interval });
+        }
+    },
+
+    /**
+      * Verifies that the default dot column
+      * @param {object} options - The options object containing point, min, and interval.
+      * @param {number} options.point - The point value.
+      * @param {number} options.min - The minimum value.
+      * @param {number} options.interval - The interval value.
+      */
+    verifyLockedDotColumnPreviewTab: ({ point, min, interval }) => {
+        const index = Math.round((point - min) / interval);
+        chartsDotPlotPage.dotPlotChartPreviewTab()
+            .within(() => {
+                chartsDotPlotPage.dotColumnPreviewTab()
+                    .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.verifyDotColumnIsLockedInPreviewTab({ point, min, interval });
+        steps.verifyDefaultDotPreviewTab({ point, min, interval });
+    },
+
+    /**
+     * Verifies that the correct dot exists in the specified column 
+     * @param {object} options - The options object containing point, min, and interval.
+     * @param {number} options.point - The point value.
+     * @param {number} options.min - The minimum value.
+     * @param {number} options.interval - The interval value.
+     */
+    verifyCorrectDotPreviewTab: ({ point, min, interval }) => {
+        const index = Math.round((point - min) / interval);
+        chartsDotPlotPage.dotPlotChartPreviewTab()
+            .within(() => {
+                chartsDotPlotPage.dotColumnPreviewTab()
+                    .eq(index)
+                    .within(() => {
+                        chartsDotPlotPage.dotIconPreviewTab()
+                            .each((el) => {
+                                cy.wrap(el)
+                                    .should('have.css', 'background-color', css.color.correctAnswer)
+                            });
+                    });
+            });
+    },
+
+    /**
+      * Verifies that the incorrect dot exists in the specified column 
+      * @param {object} options - The options object containing point, min, and interval.
+      * @param {number} options.point - The point value.
+      * @param {number} options.min - The minimum value.
+      * @param {number} options.interval - The interval value.
+      */
+    verifyIncorrectDotPreviewTab: ({ point, min, interval }) => {
+        const index = Math.round((point - min) / interval);
+        chartsDotPlotPage.dotPlotChartPreviewTab()
+            .within(() => {
+                chartsDotPlotPage.dotColumnPreviewTab()
+                    .eq(index)
+                    .within(() => {
+                        chartsDotPlotPage.dotIconPreviewTab()
+                            .each((el) => {
+                                cy.wrap(el)
+                                    .should('have.css', 'background-color', css.color.incorrectAnswer)
+                            });
+                    });
+            });
+    },
+
+    /**
+      * Verifies that the default dot exists in the specified column 
+      * @param {object} options - The options object containing point, min, and interval.
+      * @param {number} options.point - The point value.
+      * @param {number} options.min - The minimum value.
+      * @param {number} options.interval - The interval value.
+      */
+    verifyDefaultDotPreviewTab: ({ point, min, interval }) => {
+        const index = Math.round((point - min) / interval);
+        chartsDotPlotPage.dotPlotChartPreviewTab()
+            .within(() => {
+                chartsDotPlotPage.dotColumnPreviewTab()
+                    .eq(index)
+                    .within(() => {
+                        chartsDotPlotPage.dotIconPreviewTab()
+                            .each((el) => {
+                                cy.wrap(el)
+                                    .should('have.css', 'background-color', css.color.activeButtons)
+                            });
+                    });
+            });
+    },
+
+    /**
+      * Verifies the number of divisions on the number line axis in the preview tab.
+      * @param {object} options - The options object containing min, max, and interval values.
+      * @param {number} options.min - The minimum value.
+      * @param {number} options.max - The maximum value.
+      * @param {number} options.interval - The interval value.
+      */
+    verifyDivisionsOnNumberLineAxisPreviewTab: ({ min, max, interval }) => {
+        const expectedDivisions = Math.round((max - min) / interval);
+        chartsDotPlotPage.numberLineAxisPreviewTab()
+            .find('.number-line')
+            .its('length')
+            .then((len) => {
+                expect(len).to.equal(expectedDivisions);
+            });
+    },
+
+    /**
+      * Verifies the labels on the number line axis in the preview tab.
+      * @param {number} min - The minimum value.
+      * @param {number} max - The maximum value.
+      */
+    verifyLabelsOnNumberLineAxisPreviewTab: (min, max, annotateEvery) => {
+        let expectedLabelsIndex = [];
+        chartsDotPlotPage.labelsNumberLineAxisPreviewTab()
+            .each((value, index) => {
+                if (index % annotateEvery === 0) {
+                    expectedLabelsIndex.push(index.toString());
+                }
+                for (var i = min; i < max; i++) {
+                    chartsDotPlotPage.labelsNumberLineAxisPreviewTab()
+                        .eq(expectedLabelsIndex[i - 1])
+                        .should('have.text', i)
+                }
+            });
+    },
+
+    //correct answer section
+    /**
+    * @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(chartsDotPlotPage.correctIncorrectAnswerTextWrapper(), `Your answer is${answerStatus}`)
+        chartsDotPlotPage.correctIncorrectAnswerTextWrapper()
+            .within(() => {
+                if (answerStatus === 'correct') {
+                    utilities.verifyElementVisibilityState(chartsDotPlotPage.correctIcon(), 'visible');
+                } else {
+                    utilities.verifyElementVisibilityState(chartsDotPlotPage.incorrectIcon(), 'visible');
+                }
+            });
+    },
+
+    verifyCorrectAnswerSectionNotExists: () => {
+        utilities.verifyElementVisibilityState(chartsDotPlotPage.dotPlotChartCorrectAnswerSection(), 'notExist');
+    },
+
+    /**
+     * Verifies that the correct dot  column 
+     * @param {object} options - The options object containing point, min, and interval.
+     * @param {number} options.point - The point value.
+     * @param {number} options.min - The minimum value.
+     * @param {number} options.interval - The interval value.
+     */
+    verifyCorrectDotColumnCorrectAnswerSection: ({ point, min, interval, defaultDots = null }) => {
+        const index = Math.round((point - min) / interval);
+        chartsDotPlotPage.dotPlotChartCorrectAnswerSection()
+            .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.verifyCorrectDotCorrectAnswerSection({ point, min, interval });
+        }
+    },
+
+    /**
+     * Verifies that the correct dot exists in the specified column 
+     * @param {object} options - The options object containing point, min, and interval.
+     * @param {number} options.point - The point value.
+     * @param {number} options.min - The minimum value.
+     * @param {number} options.interval - The interval value.
+     */
+    verifyCorrectDotCorrectAnswerSection: ({ point, min, interval }) => {
+        const index = Math.round((point - min) / interval);
+        chartsDotPlotPage.dotPlotChartCorrectAnswerSection()
+            .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.
+    * @param {number} options.point - The point value.
+    * @param {number} options.min - The minimum value.
+    * @param {number} options.interval - The interval value.
+    */
+    verifyDefaultDotCorrectAnswerSection: ({ point, min, interval }) => {
+        const index = Math.round((point - min) / interval);
+        chartsDotPlotPage.dotPlotChartCorrectAnswerSection()
+            .within(() => {
+                chartsDotPlotPage.dotColumnCorrectAnswerSection()
+                    .eq(index)
+                    .within(() => {
+                        chartsDotPlotPage.dotIconCorrectAnswerSection()
+                            .each((el) => {
+                                cy.wrap(el)
+                                    .should('have.css', 'background-color', css.color.activeButtons)
+                            });
+                    });
+            });
+    },
+
+    /**
+    * Verify the bar is locked in preview tab
+    * @param {number} index index of the bar
+    */
+    verifyDotColumnIsLockedInCorrectAnswerSection: ({ point, min, interval }) => {
+        const index = Math.round((point - min) / interval);
+        chartsDotPlotPage.dotPlotChartCorrectAnswerSection()
+            .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.
+      * @param {Object} options - Options object containing point, min, and interval values.
+      * @param {number} options.point - The point value.
+      * @param {number} options.min - The minimum value.
+      * @param {number} options.interval - The interval value.
+      */
+    verifyDotCountCorrectAnswerSection: (expectedDotCount, { point, min, interval }) => {
+        const index = Math.round((point - min) / interval);
+        chartsDotPlotPage.dotColumnCorrectAnswerSection()
+            .eq(index)
+            .within(() => {
+                chartsDotPlotPage.dotIconCorrectAnswerSection()
+                    .should('have.length', expectedDotCount);
+            });
+    },
+
+    /**
+     * Verifies the number of divisions on the number line axis in the preview tab.
+     * @param {object} options - The options object containing min, max, and interval values.
+     * @param {number} options.min - The minimum value.
+     * @param {number} options.max - The maximum value.
+     * @param {number} options.interval - The interval value.
+     */
+    verifyDivisionsOnNumberLineAxisCorrectAnswerSection: ({ min, max, interval }) => {
+        const expectedDivisions = Math.round((max - min) / interval);
+        chartsDotPlotPage.numberLineAxisCorrectAnswerSection()
+            .find('.number-line')
+            .its('length')
+            .then((len) => {
+                expect(len).to.equal(expectedDivisions);
+            });
+    },
+
+    /**
+    * Verifies the labels on the number line axis 
+    * @param {number} min - The minimum value.
+    * @param {number} max - The maximum value.
+    */
+    verifyLabelsOnNumberLineAxisCorrectAnswerSection: (min, max, annotateEvery) => {
+        let expectedLabelsIndex = [];
+        chartsDotPlotPage.labelsNumberLineAxisCorrectAnswerSection()
+            .each((value, index) => {
+                if (index % annotateEvery === 0) {
+                    expectedLabelsIndex.push(index.toString());
+                }
+                for (var i = min; i < max; i++) {
+                    chartsDotPlotPage.labelsNumberLineAxisCorrectAnswerSection()
+                        .eq(expectedLabelsIndex[i - 1])
+                        .should('have.text', i)
+                }
+            });
+    },
+
+    /**
+  * Verifies that the default dot exists in the specified column 
+  * @param {object} options - The options object containing point, min, and interval.
+  * @param {number} options.point - The point value.
+  * @param {number} options.min - The minimum value.
+  * @param {number} options.interval - The interval value.
+  */
+    verifyLockedDotColumnCorrectAnswerSection: ({ point, min, interval }) => {
+        const index = Math.round((point - min) / interval);
+        chartsDotPlotPage.dotPlotChartCorrectAnswerSection()
+            .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.verifyDotColumnIsLockedInCorrectAnswerSection({ point, min, interval });
+        steps.verifyDefaultDotCorrectAnswerSection({ point, min, interval });
+    },
+}
+
+const tests = {
+    ...autoScoredScoringPreviewTab.tests
 }
 
 export const chartsDotPlotPage = {
-    ...selectors
+    ...selectors,
+    steps,
+    tests
 }