itemengine-cypress-automation 1.0.189-e2e-execution-crash-83cdbd4.0 → 1.0.189

package/cypress/pages/numberLinePage.js

@@ -1,7 +1,8 @@
 import utilities from '../support/helpers/utilities';
-import { createQuestionBasePage, toolsAndControlsComponent, questionInstructionsComponent, resetPopupComponent, scoringSectionBaseEditTab, autoScoredScoringPreviewTab, autoScoredSpecifyCorrectAnswerSection, commonComponents, autoScoredScoringSectionMultiResponseType, toolSettingsComponent, additionalSettingsPanel, additionalSettingsAccessibilitySectionComponent, autoScoredStudentViewSettings, randomizeOptionsComponent, studentViewSettingsLabelComponent, defaultToolDropdown } from './components';
+import { createQuestionBasePage, toolsAndControlsComponent, questionInstructionsComponent, resetPopupComponent, scoringSectionBaseEditTab, autoScoredScoringPreviewTab, autoScoredSpecifyCorrectAnswerSection, commonComponents, autoScoredScoringSectionMultiResponseType, toolSettingsComponent, additionalSettingsPanel, additionalSettingsAccessibilitySectionComponent, autoScoredStudentViewSettings, randomizeOptionsComponent, studentViewSettingsLabelComponent, defaultToolDropdown, layoutSectionComponent, numberLineCommonComponent } from './components';
+import { dialogBoxBase } from './dialogBoxBase';
 const css = Cypress.env('css');
-const range = 20.4472843;
+const range = 20.75;
 
 const selectors = {
     ...toolsAndControlsComponent,
@@ -14,11 +15,11 @@ const selectors = {
     ...commonComponents,
     ...defaultToolDropdown,
     ...autoScoredScoringSectionMultiResponseType,
-    //layout
-    staggerResponseCheckbox: () => cy.get('[data-ngie-testid="stagger-response-checkbox"] input'),
-    limitNumberOfResponsesInputField: () => cy.get('.limit-number-line-response-wrapper .text-input-field input'),
+    ...dialogBoxBase,
+    ...numberLineCommonComponent,
+    ...layoutSectionComponent,
+
     //Specify correct answer
-    numberLineSpecifyCorrectAnswer: () => cy.get('.ngie-accordion .ngie-jxgbox svg'),
     numberLineToolOptionSpecifyCorrectAnswer: (toolOptionAriaLabel = null) => {
         if (toolOptionAriaLabel) {
             return cy.get(`.graph-tools-wrapper .single-select-toggle-group-double button[aria-label*="${toolOptionAriaLabel}"]`).eq(0)
@@ -33,13 +34,10 @@ const selectors = {
             return cy.get('[class*="GraphingToolsstyles__ControlsWrapper"] button')
         }
     },
-    numberLineTitleSpecifyCorrectAnswerSection: () => cy.get('.correct-answer-accordion [class*="LineGraphstyles__TitleText"]'),
     plotNumberLineToggleButton: () => cy.get('[data-ngie-testid="plot-number-line-tab"]'),
     partialEqualWeightsPointsPerResponseScore: () => cy.get('.alternate-points-points-per-value-span'),
 
     //Preview Tab
-    numberLinePreviewTab: () => cy.get('[class*="question-preview-wrapper"] .ngie-jxgbox svg').eq(0),
-    numberLinePointPreviewTab: () => cy.get('[class*="question-preview-wrapper"] .ngie-jxgbox').eq(0).find('svg ellipse[display="inline"]'),
     numberLineSegmentPreviewTab: () => cy.get('[class*="question-preview-wrapper"] .ngie-jxgbox').eq(0).find('[stroke-linecap="butt"]'),
     numberLineToolOptionPreviewTab: (toolOptionAriaLabel = null) => {
         if (toolOptionAriaLabel) {
@@ -55,16 +53,10 @@ const selectors = {
             return cy.get('[class*="question-preview-wrapper"] [class*="ControlsWrapper"] button')
         }
     },
-    numberLineTitlePreviewTab: () => cy.get('.edit-question-preview-wrapper [class*="LineGraphstyles__TitleText"]'),
 
     //Correct answer section
-    correctAnswersLabel: () => cy.get('[class*="AnswerLabel"]'),
-    correctIcon: () => cy.get('[data-icon="CorrectAnswer"]'),
-    incorrectIcon: () => cy.get('[data-icon="Incorrect"]'),
     numberLineCorrectAnswerSection: () => cy.get('[class*="question-preview-wrapper"] .ngie-jxgbox svg:visible').eq(1),
     numberLinePointCorrectAnswerSection: () => cy.get('[class*="question-preview-wrapper"] .ngie-jxgbox').eq(1).find('svg ellipse[display="inline"]'),
-    correctIncorrectAnswerTextWrapper: () => cy.get('[class*="CorrectIncorrectWrapper"]'),
-    numberLineTitleCorrectAnswerSection: () => cy.get('[class*="LineGraphstyles__TitleText"]').last()
 }
 
 const steps = {
@@ -80,6 +72,8 @@ const steps = {
     ...commonComponents.steps,
     ...autoScoredScoringSectionMultiResponseType.steps,
     ...defaultToolDropdown.steps,
+    ...numberLineCommonComponent.steps,
+    ...layoutSectionComponent.steps,
 
     /**
      * @description This function selects the tool option from graph
@@ -117,7 +111,7 @@ const steps = {
                     numberLinePage.numberLineSpecifyCorrectAnswer()
                         .click(xPixel, originY, { force: true });
                 } else {
-                    const yPixel = originY - coordinate * (graphWidth / range);
+                    const yPixel = originY - coordinate * (graphHeight / range);
                     numberLinePage.numberLineSpecifyCorrectAnswer()
                         .click(originX, yPixel, { force: true });
                 }
@@ -173,18 +167,18 @@ const steps = {
      * @param {number} startingPoint - It representing the starting point of the ray.
      */
     verifyRayOnNumberLineSpecifyCorrectAnswer: (direction, range, startingPoint) => {
-            numberLinePage.numberLineSpecifyCorrectAnswer()
-                .then(($graphElement) => {
-                    const graphWidth = $graphElement[0].clientWidth;
-                    const graphHeight = $graphElement[0].clientHeight;
-                    const originX = graphWidth / 2;
-                    const originY = graphHeight / 2;
-                    const x1Pixel = originX + startingPoint * (graphWidth / range);
-                    const rayArrowWidth = 42;
-                    const x2Pixel = direction === "left" ? rayArrowWidth : graphWidth - rayArrowWidth;
-                    cy.get(`.ngie-accordion .ngie-jxgbox svg [stroke-linecap="butt"][x1*="${Math.floor(x1Pixel)}"][y1*="${Math.floor(originY)}"][x2*="${Math.floor(x2Pixel)}"][y2*="${Math.floor(originY)}"]`)
-                        .should('be.visible');
-                });
+        numberLinePage.numberLineSpecifyCorrectAnswer()
+            .then(($graphElement) => {
+                const graphWidth = $graphElement[0].clientWidth;
+                const graphHeight = $graphElement[0].clientHeight;
+                const originX = graphWidth / 2;
+                const originY = graphHeight / 2;
+                const x1Pixel = originX + startingPoint * (graphWidth / range);
+                const rayArrowWidth = 42;
+                const x2Pixel = direction === "left" ? rayArrowWidth : graphWidth - rayArrowWidth;
+                cy.get(`.ngie-accordion .ngie-jxgbox svg [stroke-linecap="butt"][x1*="${Math.floor(x1Pixel)}"][y1*="${Math.floor(originY)}"][x2*="${Math.floor(x2Pixel)}"][y2*="${Math.floor(originY)}"]`)
+                    .should('be.visible');
+            });
     },
 
     /**
@@ -240,7 +234,7 @@ const steps = {
                     numberLinePage.numberLinePreviewTab()
                         .click(xPixel, originY, { force: true });
                 } else {
-                    const yPixel = originY + coordinate * (graphWidth / range);
+                    const yPixel = originY - coordinate * (graphHeight / range);
                     numberLinePage.numberLinePreviewTab()
                         .click(originX, yPixel, { force: true });
                 }
@@ -356,18 +350,18 @@ const steps = {
      * @param {number} startingPoint - It representing the starting point of the ray.
      */
     verifyRayOnNumberLinePreviewTab: (direction, range, startingPoint) => {
-            numberLinePage.numberLinePreviewTab()
-                .then(($graphElement) => {
-                    const graphWidth = $graphElement[0].clientWidth;
-                    const graphHeight = $graphElement[0].clientHeight;
-                    const originX = graphWidth / 2;
-                    const originY = graphHeight / 2;
-                    const x1Pixel = originX + startingPoint * (graphWidth / range);
-                    const rayArrowWidth = 42;
-                    const x2Pixel = direction === "left" ? rayArrowWidth : graphWidth - rayArrowWidth;
-                    cy.get('[class*="question-preview-wrapper"] .ngie-jxgbox').eq(0).find(`[stroke-linecap="butt"][x1*="${Math.floor(x1Pixel)}"][y1*="${Math.floor(originY)}"][x2*="${Math.floor(x2Pixel)}"][y2*="${Math.floor(originY)}"]`)
-                        .should('be.visible');
-                });
+        numberLinePage.numberLinePreviewTab()
+            .then(($graphElement) => {
+                const graphWidth = $graphElement[0].clientWidth;
+                const graphHeight = $graphElement[0].clientHeight;
+                const originX = graphWidth / 2;
+                const originY = graphHeight / 2;
+                const x1Pixel = originX + startingPoint * (graphWidth / range);
+                const rayArrowWidth = 42;
+                const x2Pixel = direction === "left" ? rayArrowWidth : graphWidth - rayArrowWidth;
+                cy.get('[class*="question-preview-wrapper"] .ngie-jxgbox').eq(0).find(`[stroke-linecap="butt"][x1*="${Math.floor(x1Pixel)}"][y1*="${Math.floor(originY)}"][x2*="${Math.floor(x2Pixel)}"][y2*="${Math.floor(originY)}"]`)
+                    .should('be.visible');
+            });
     },
 
     /**
@@ -398,18 +392,18 @@ const steps = {
      * @param {number} startingPoint -It representing the starting point of the ray.
      */
     verifyCorrectRayOnNumberLinePreviewTab: (direction, range, startingPoint) => {
-            numberLinePage.numberLinePreviewTab()
-                .then(($graphElement) => {
-                    const graphWidth = $graphElement[0].clientWidth;
-                    const graphHeight = $graphElement[0].clientHeight;
-                    const originX = graphWidth / 2;
-                    const originY = graphHeight / 2;
-                    const x1Pixel = originX + startingPoint * (graphWidth / range);
-                    const rayArrowWidth = 42;
-                    const x2Pixel = direction === "left" ? rayArrowWidth : graphWidth - rayArrowWidth;
-                    cy.get('[class*="question-preview-wrapper"] .ngie-jxgbox').eq(0).find(`[stroke-linecap="butt"][x1*="${Math.floor(x1Pixel)}"][y1*="${Math.floor(originY)}"][x2*="${Math.floor(x2Pixel)}"][y2*="${Math.floor(originY)}"]`)
-                        .should('have.css', 'stroke', css.color.correctAnswer);
-                });
+        numberLinePage.numberLinePreviewTab()
+            .then(($graphElement) => {
+                const graphWidth = $graphElement[0].clientWidth;
+                const graphHeight = $graphElement[0].clientHeight;
+                const originX = graphWidth / 2;
+                const originY = graphHeight / 2;
+                const x1Pixel = originX + startingPoint * (graphWidth / range);
+                const rayArrowWidth = 42;
+                const x2Pixel = direction === "left" ? rayArrowWidth : graphWidth - rayArrowWidth;
+                cy.get('[class*="question-preview-wrapper"] .ngie-jxgbox').eq(0).find(`[stroke-linecap="butt"][x1*="${Math.floor(x1Pixel)}"][y1*="${Math.floor(originY)}"][x2*="${Math.floor(x2Pixel)}"][y2*="${Math.floor(originY)}"]`)
+                    .should('have.css', 'stroke', css.color.correctAnswer);
+            });
     },
 
     /**
@@ -440,18 +434,18 @@ const steps = {
      * @param {number} startingPoint- It representing the starting point of the ray.
      */
     verifyIncorrectRayOnNumberLinePreviewTab: (direction, range, startingPoint) => {
-            numberLinePage.numberLinePreviewTab()
-                .then(($graphElement) => {
-                    const graphWidth = $graphElement[0].clientWidth;
-                    const graphHeight = $graphElement[0].clientHeight;
-                    const originX = graphWidth / 2;
-                    const originY = graphHeight / 2;
-                    const x1Pixel = originX + startingPoint * (graphWidth / range);
-                    const rayArrowWidth = 42;
-                    const x2Pixel = direction === "left" ? rayArrowWidth : graphWidth - rayArrowWidth;
-                    cy.get('[class*="question-preview-wrapper"] .ngie-jxgbox').eq(0).find(`[stroke-linecap="butt"][x1*="${Math.floor(x1Pixel)}"][y1*="${Math.floor(originY)}"][x2*="${Math.floor(x2Pixel)}"][y2*="${Math.floor(originY)}"]`)
-                        .should('have.css', 'stroke', css.color.incorrectAnswer);
-                });
+        numberLinePage.numberLinePreviewTab()
+            .then(($graphElement) => {
+                const graphWidth = $graphElement[0].clientWidth;
+                const graphHeight = $graphElement[0].clientHeight;
+                const originX = graphWidth / 2;
+                const originY = graphHeight / 2;
+                const x1Pixel = originX + startingPoint * (graphWidth / range);
+                const rayArrowWidth = 42;
+                const x2Pixel = direction === "left" ? rayArrowWidth : graphWidth - rayArrowWidth;
+                cy.get('[class*="question-preview-wrapper"] .ngie-jxgbox').eq(0).find(`[stroke-linecap="butt"][x1*="${Math.floor(x1Pixel)}"][y1*="${Math.floor(originY)}"][x2*="${Math.floor(x2Pixel)}"][y2*="${Math.floor(originY)}"]`)
+                    .should('have.css', 'stroke', css.color.incorrectAnswer);
+            });
     },
 
     /**
@@ -754,24 +748,603 @@ const steps = {
             });
     },
 
+    //Layout
+
+    clickOnToolOptionsSpecifyCorrectAnswer: () => {
+        cy.log('Clicking on control options to remove error message');
+        numberLinePage.numberLineToolOptionSpecifyCorrectAnswer()
+            .parents('.graph-tools-wrapper')
+            .click();
+    },
+
+    clickOnToolOptionsPreviewTab: () => {
+        cy.log('Clicking on control options to remove error message');
+        numberLinePage.numberLineToolOptionPreviewTab()
+            .parents('.graph-tools-wrapper')
+            .click();
+    },
+
+    //Vertical orientation
+    /**
+    * This function verifies plotted points on the vertical number line on the specify correct answer section.
+    * @param {number} range - The range of y coordinates.
+    * @param {number[]} coordinates - An array containing y coordinates to be plotted on the graph.
+    */
+    verifyPointsPlottedOnVerticalNumberLineSpecifyCorrectAnswer: (range, coordinates) => {
+        coordinates.forEach(y => {
+            numberLinePage.numberLineSpecifyCorrectAnswer()
+                .then(($graphElement) => {
+                    const graphWidth = $graphElement[0].clientWidth;
+                    const graphHeight = $graphElement[0].clientHeight;
+                    const originX = graphWidth / 2;
+                    const originY = graphHeight / 2;
+                    const yPixel = originY - y * (graphHeight / range);
+                    cy.get(`.ngie-accordion .ngie-jxgbox svg ellipse[cx*="${Math.floor(originX)}"][cy*="${Math.floor(yPixel)}"][tabindex="0"]`)
+                        .should('exist');
+                });
+        });
+    },
+
     /**
-     * Enters a value into the Limit Number of Responses input field.
-     * @param {string | number} value - The value to be entered into the input field.
-     * @description This function clears the input field and then enters the specified value into the Limit Number of Responses input field on the page.
+    * This function verifies plotted points on the vertical number line do not exist on the Edit tab.
+    * @param {number} range - The range of y coordinates.
+    * @param {number[]} coordinates - An array containing y coordinates to be plotted on the graph.
+    */
+    verifyPointsPlottedOnVerticalNumberLineNotExistSpecifyCorrectAnswer: (range, coordinates) => {
+        coordinates.forEach(y => {
+            numberLinePage.numberLineSpecifyCorrectAnswer()
+                .then(($graphElement) => {
+                    const graphWidth = $graphElement[0].clientWidth;
+                    const graphHeight = $graphElement[0].clientHeight;
+                    const originX = graphWidth / 2;
+                    const originY = graphHeight / 2;
+                    const yPixel = originY + y * (graphHeight / range);
+                    cy.get(`.ngie-accordion .ngie-jxgbox svg ellipse[cx*="${Math.floor(originX)}"][cy*="${Math.floor(yPixel)}"][tabindex="0"]`)
+                        .should('not.exist');
+                });
+        });
+    },
+
+    /**
+    * This function verifies plotted points on the vertical number line on the preview tab.
+    * @param {number} range - The range of y coordinates.
+    * @param {number[]} coordinates - An array containing y coordinates to be plotted on the graph.
+    */
+    verifyPointsPlottedOnVerticalNumberLinePreviewTab: (range, coordinates) => {
+        coordinates.forEach(y => {
+            numberLinePage.numberLinePreviewTab()
+                .then(($graphElement) => {
+                    const graphWidth = $graphElement[0].clientWidth;
+                    const graphHeight = $graphElement[0].clientHeight;
+                    const originX = graphWidth / 2;
+                    const originY = graphHeight / 2;
+                    const yPixel = originY - y * (graphHeight / range);
+                    cy.get('[class*="question-preview-wrapper"] .ngie-jxgbox').eq(0).find(`svg ellipse[cx*="${Math.floor(originX)}"][cy*="${Math.floor(yPixel)}"][tabindex="0"]`)
+                        .should('exist');
+                });
+        });
+    },
+
+    verifyCorrectPointsOnVerticalNumberLinePreviewTab: (range, coordinates) => {
+        coordinates.forEach(y => {
+            numberLinePage.numberLinePreviewTab()
+                .then(($graphElement) => {
+                    const graphWidth = $graphElement[0].clientWidth;
+                    const graphHeight = $graphElement[0].clientHeight;
+                    const originX = graphWidth / 2;
+                    const originY = graphHeight / 2;
+                    const yPixel = originY - y * (graphHeight / range);
+                    cy.get('[class*="question-preview-wrapper"] .ngie-jxgbox').eq(0).find(`svg ellipse[cx*="${Math.floor(originX)}"][cy*="${Math.floor(yPixel)}"][display="inline"]`)
+                        .should('have.css', 'stroke', css.color.correctAnswer);
+                });
+        });
+    },
+
+    verifyIncorrectPointsOnVerticalNumberLinePreviewTab: (range, coordinates) => {
+        coordinates.forEach(y => {
+            numberLinePage.numberLinePreviewTab()
+                .then(($graphElement) => {
+                    const graphWidth = $graphElement[0].clientWidth;
+                    const graphHeight = $graphElement[0].clientHeight;
+                    const originX = graphWidth / 2;
+                    const originY = graphHeight / 2;
+                    const yPixel = originY - y * (graphHeight / range);
+                    cy.get('[class*="question-preview-wrapper"] .ngie-jxgbox').eq(0).find(`svg ellipse[cx*="${Math.floor(originX)}"][cy*="${Math.floor(yPixel)}"][display="inline"]`)
+                        .should('have.css', 'stroke', css.color.incorrectAnswer);
+                });
+        });
+    },
+
+    /**
+     * Verifies that the points do not exist on the vertical number line in the preview tab.
+     * @param {number} range - The range of the number line.
+     * @param {number[]} coordinates - The y-coordinates of the points.
      */
-    enterValueInLimitNumberOfResponsesInputField: (value) => {
-        numberLinePage.limitNumberOfResponsesInputField()
-            .clear()
-            .type(value)
-            .blur()
+    verifyPointsNotExistOnVerticalNumberLinePreviewTab: (range, coordinates) => {
+        coordinates.forEach(y => {
+            numberLinePage.numberLinePreviewTab()
+                .then(($graphElement) => {
+                    const graphWidth = $graphElement[0].clientWidth;
+                    const graphHeight = $graphElement[0].clientHeight;
+                    const originX = graphWidth / 2;
+                    const originY = graphHeight / 2;
+                    const yPixel = originY - y * (graphHeight / range);
+                    cy.get('[class*="question-preview-wrapper"] .ngie-jxgbox').eq(0).find(`svg ellipse[cx*="${Math.floor(originX)}"][cy*="${Math.floor(yPixel)}"][tabindex="0"]`)
+                        .should('not.exist');
+                });
+        });
     },
 
-    uncheckStaggerResponseCheckbox: () => {
-        numberLinePage.staggerResponseCheckbox()
-            .click();
-    }
+    /**
+    * This function verifies plotted points on the vertical number line on c 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
+    */
+    verifyPointsPlottedOnVerticalNumberLineCorrectAnswerSection: (range, coordinates) => {
+        coordinates.forEach(y => {
+            numberLinePage.numberLineCorrectAnswerSection()
+                .then(($graphElement) => {
+                    const graphWidth = $graphElement[0].clientWidth;
+                    const graphHeight = $graphElement[0].clientHeight;
+                    const originX = graphWidth / 2;
+                    const originY = graphHeight / 2;
+                    const yPixel = originY - y * (graphHeight / range);
+                    cy.get('[class*="question-preview-wrapper"] .ngie-jxgbox').eq(1).find(`svg ellipse[cx*="${Math.floor(originX)}"][cy*="${Math.floor(yPixel)}"][pointer-events="visiblePainted"]`)
+                        .should('exist');
+                });
+        });
+    },
+
+    /**
+    * Verifies that the correct points exist on the vertical number line in the correct answer section.
+    * @param {number} range - The range of the number line.
+    * @param {number[]} coordinates - The y-coordinates of the points.
+    */
+    verifyCorrectPointsOnVerticalNumberLineCorrectAnswerSection: (range, coordinates) => {
+        coordinates.forEach(y => {
+            numberLinePage.numberLineCorrectAnswerSection()
+                .then(($graphElement) => {
+                    const graphWidth = $graphElement[0].clientWidth;
+                    const graphHeight = $graphElement[0].clientHeight;
+                    const originX = graphWidth / 2;
+                    const originY = graphHeight / 2;
+                    const yPixel = originY - y * (graphHeight / range);
+                    cy.get('[class*="question-preview-wrapper"] .ngie-jxgbox').eq(1).find(`svg ellipse[cx*="${Math.floor(originX)}"][cy*="${Math.floor(yPixel)}"][display="inline"]`)
+                        .should('have.css', 'stroke', css.color.correctAnswer);
+                });
+        });
+    },
+
+    /**
+     * Verifies the line segment on the vertical number line in the specify correct answer section.
+     * @param {number} range - The range of the number line.
+     * @param {Object[]} coordinates - The coordinates of the line segment.
+     * @param {number} coordinates[].y1 - The y-coordinate of the starting point.
+     * @param {number} coordinates[].y2 - The y-coordinate of the ending point.
+     */
+    verifyLineSegmentOnVerticalNumberLineSpecifyCorrectAnswer: (range, coordinates) => {
+        coordinates.forEach(({ y1, y2 }) => {
+            numberLinePage.numberLineSpecifyCorrectAnswer()
+                .then(($graphElement) => {
+                    const graphWidth = $graphElement[0].clientWidth;
+                    const graphHeight = $graphElement[0].clientHeight;
+                    const originX = graphWidth / 2;
+                    const originY = graphHeight / 2;
+                    const y1Pixel = originY - y1 * (graphHeight / range);
+                    const y2Pixel = originY - y2 * (graphHeight / range);
+                    cy.get(`.ngie-accordion .ngie-jxgbox svg [stroke-linecap="butt"][x1*="${Math.floor(originX)}"][y1*="${Math.floor(y1Pixel)}"][x2*="${Math.floor(originX)}"][y2*="${Math.floor(y2Pixel)}"]`)
+                        .should('be.visible');
+                });
+        });
+    },
+
+    /**
+     * Verifies the line segment on the vertical number line preview tab.
+     * @param {number} range - The range of the number line.
+     * @param {Object[]} coordinates - The coordinates of the line segment.
+     * @param {number} coordinates[].y1 - The y-coordinate of the starting point.
+     * @param {number} coordinates[].y2 - The y-coordinate of the ending point.
+     */
+    verifyLineSegmentOnVerticalNumberLinePreviewTab: (range, coordinates) => {
+        coordinates.forEach(({ y1, y2 }) => {
+            numberLinePage.numberLinePreviewTab()
+                .then(($graphElement) => {
+                    const graphWidth = $graphElement[0].clientWidth;
+                    const graphHeight = $graphElement[0].clientHeight;
+                    const originX = graphWidth / 2;
+                    const originY = graphHeight / 2;
+                    const y1Pixel = originY - y1 * (graphHeight / range);
+                    const y2Pixel = originY - y2 * (graphHeight / range);
+                    cy.get('[class*="question-preview-wrapper"] .ngie-jxgbox').eq(0).find(`[stroke-linecap="butt"][x1*="${Math.floor(originX)}"][y1*="${Math.floor(y1Pixel)}"][x2*="${Math.floor(originX)}"][y2*="${Math.floor(y2Pixel)}"]`)
+                        .should('be.visible');
+                });
+        });
+    },
+
+    /**
+     * Verifies the correct line segment on the vertical number line preview tab.
+     * @param {number} range - The range of the number line.
+     * @param {Object[]} coordinates - The coordinates of the line segment.
+     * @param {number} coordinates[].y1 - The y-coordinate of the starting point.
+     * @param {number} coordinates[].y2 - The y-coordinate of the ending point.
+     */
+    verifyCorrectLineSegmentOnVerticalNumberLinePreviewTab: (range, coordinates) => {
+        coordinates.forEach(({ y1, y2 }) => {
+            numberLinePage.numberLinePreviewTab()
+                .then(($graphElement) => {
+                    const graphWidth = $graphElement[0].clientWidth;
+                    const graphHeight = $graphElement[0].clientHeight;
+                    const originX = graphWidth / 2;
+                    const originY = graphHeight / 2;
+                    const y1Pixel = originY - y1 * (graphHeight / range);
+                    const y2Pixel = originY - y2 * (graphHeight / range);
+                    cy.get('[class*="question-preview-wrapper"] .ngie-jxgbox').eq(0).find(`[stroke-linecap="butt"][x1*="${Math.floor(originX)}"][y1*="${Math.floor(y1Pixel)}"][x2*="${Math.floor(originX)}"][y2*="${Math.floor(y2Pixel)}"]`)
+                        .should('have.css', 'stroke', css.color.correctAnswer);
+                });
+        });
+    },
+
+    /**
+     * Verifies the incorrect line segment on the vertical number line in the preview tab.
+     * @param {number} range - The range of the number line.
+     * @param {Object[]} coordinates - The coordinates of the line segment.
+     * @param {number} coordinates[].y1 - The y-coordinate of the starting point.
+     * @param {number} coordinates[].y2 - The y-coordinate of the ending point.
+     */
+    verifyIncorrectLineSegmentOnVerticalNumberLinePreviewTab: (range, coordinates) => {
+        coordinates.forEach(({ y1, y2 }) => {
+            numberLinePage.numberLinePreviewTab()
+                .then(($graphElement) => {
+                    const graphWidth = $graphElement[0].clientWidth;
+                    const graphHeight = $graphElement[0].clientHeight;
+                    const originX = graphWidth / 2;
+                    const originY = graphHeight / 2;
+                    const y1Pixel = originY - y1 * (graphHeight / range);
+                    const y2Pixel = originY - y2 * (graphHeight / range);
+                    cy.get('[class*="question-preview-wrapper"] .ngie-jxgbox').eq(0).find(`[stroke-linecap="butt"][x1*="${Math.floor(originX)}"][y1*="${Math.floor(y1Pixel)}"][x2*="${Math.floor(originX)}"][y2*="${Math.floor(y2Pixel)}"]`)
+                        .should('have.css', 'stroke', css.color.incorrectAnswer);
+                });
+        });
+    },
+
+    /**
+     * Verifies that the line segment on the vertical number line does not exist in the preview tab.
+    * @param {number} range - The range of the number line.
+    * @param {Object[]} coordinates - The coordinates of the line segment.
+    * @param {number} coordinates[].y1 - The y-coordinate of the starting point.
+    * @param {number} coordinates[].y2 - The y-coordinate of the ending point.
+    */
+    verifyLineSegmentOnVerticalNumberLineNotExistPreviewTab: (range, coordinates) => {
+        coordinates.forEach(({ y1, y2 }) => {
+            numberLinePage.numberLinePreviewTab()
+                .then(($graphElement) => {
+                    const graphWidth = $graphElement[0].clientWidth;
+                    const graphHeight = $graphElement[0].clientHeight;
+                    const originX = graphWidth / 2;
+                    const originY = graphHeight / 2;
+                    const y1Pixel = originY - y1 * (graphHeight / range);
+                    const y2Pixel = originY - y2 * (graphHeight / range);
+                    cy.get('[class*="question-preview-wrapper"] .ngie-jxgbox').eq(0).find(`[stroke-linecap="butt"][x1*="${Math.floor(originX)}"][y1*="${Math.floor(y1Pixel)}"][x2*="${Math.floor(originX)}"][y2*="${Math.floor(y2Pixel)}"]`)
+                        .should('not.exist');
+                });
+        });
+    },
+
+    /**
+     * Verifies that the line segment on the vertical number line exists in the correct answer section.
+     * @param {number} range - The range of the number line.
+     * @param {Object[]} coordinates - The coordinates of the line segment.
+     * @param {number} coordinates[].y1 - The y-coordinate of the starting point.
+     * @param {number} coordinates[].y2 - The y-coordinate of the ending point.
+     */
+    verifyLineSegmentOnVerticalNumberLineCorrectAnswerSection: (range, coordinates) => {
+        coordinates.forEach(({ y1, y2 }) => {
+            numberLinePage.numberLineCorrectAnswerSection()
+                .then(($graphElement) => {
+                    const graphWidth = $graphElement[0].clientWidth;
+                    const graphHeight = $graphElement[0].clientHeight;
+                    const originX = graphWidth / 2;
+                    const originY = graphHeight / 2;
+                    const y1Pixel = originY - y1 * (graphHeight / range);
+                    const y2Pixel = originY - y2 * (graphHeight / range);
+                    cy.get('[class*="question-preview-wrapper"] .ngie-jxgbox').eq(1).find(`[stroke-linecap="butt"][x1*="${Math.floor(originX)}"][y1*="${Math.floor(y1Pixel)}"][x2*="${Math.floor(originX)}"][y2*="${Math.floor(y2Pixel)}"]`)
+                        .should('be.visible');
+                });
+        });
+    },
+
+    /**
+     * Verifies that the line segment on the vertical number line in the correct answer section has the correct appearance.
+     * @param {number} range - The range of the number line.
+     * @param {Object[]} coordinates - The coordinates of the line segment.
+     * @param {number} coordinates[].y1 - The y-coordinate of the starting point.
+     * @param {number} coordinates[].y2 - The y-coordinate of the ending point.
+     */
+    verifyCorrectLineSegmentOnVerticalNumberLineCorrectAnswerSection: (range, coordinates) => {
+        coordinates.forEach(({ y1, y2 }) => {
+            numberLinePage.numberLineCorrectAnswerSection()
+                .then(($graphElement) => {
+                    const graphWidth = $graphElement[0].clientWidth;
+                    const graphHeight = $graphElement[0].clientHeight;
+                    const originX = graphWidth / 2;
+                    const originY = graphHeight / 2;
+                    const y1Pixel = originY - y1 * (graphHeight / range);
+                    const y2Pixel = originY - y2 * (graphHeight / range);
+                    cy.get('[class*="question-preview-wrapper"] .ngie-jxgbox').eq(1).find(`[stroke-linecap="butt"][x1*="${Math.floor(originX)}"][y1*="${Math.floor(y1Pixel)}"][x2*="${Math.floor(originX)}"][y2*="${Math.floor(y2Pixel)}"]`)
+                        .should('have.css', 'stroke', css.color.correctAnswer);
+                });
+        });
+    },
+
+    /**
+     * Verifies that the line segment on the vertical number line does not exist in the correct answer section.
+     * @param {number} range - The range of the number line.
+     * @param {Object[]} coordinates - The coordinates of the line segment.
+     * @param {number} coordinates[].y1 - The y-coordinate of the starting point.
+     * @param {number} coordinates[].y2 - The y-coordinate of the ending point.
+     */
+    verifyLineSegmentOnVerticalNumberLineNotExistCorrectAnswerSection: (range, coordinates) => {
+        coordinates.forEach(({ y1, y2 }) => {
+            numberLinePage.numberLineCorrectAnswerSection()
+                .then(($graphElement) => {
+                    const graphWidth = $graphElement[0].clientWidth;
+                    const graphHeight = $graphElement[0].clientHeight;
+                    const originX = graphWidth / 2;
+                    const originY = graphHeight / 2;
+                    const y1Pixel = originY - y1 * (graphHeight / range);
+                    const y2Pixel = originY - y2 * (graphHeight / range);
+                    cy.get('[class*="question-preview-wrapper"] .ngie-jxgbox').eq(1).find(`svg [stroke-linecap="butt"][x1*="${Math.floor(originX)}"][y1*="${Math.floor(y1Pixel)}"][x2*="${Math.floor(originX)}"][y2*="${Math.floor(y2Pixel)}"]`)
+                        .should('not.exist');
+                });
+        });
+    },
+
+    /**
+     * Verifies the ray on the vertical number line in the specify correct answer section.
+     * @param {string} direction - The direction of the ray ('left' or 'right').
+     * @param {number} range - The range of the number line.
+     * @param {number} startingPoint - The starting point of the ray.
+     */
+    verifyRayOnVerticalNumberLineSpecifyCorrectAnswer: (direction, range, startingPoint) => {
+        numberLinePage.numberLineSpecifyCorrectAnswer().then(($graphElement) => {
+            const graphWidth = $graphElement[0].clientWidth;
+            const graphHeight = $graphElement[0].clientHeight;
+            const originX = graphWidth / 2;
+            const originY = graphHeight / 2;
+            const y1Pixel = originY - startingPoint * (graphHeight / range);
+            const rayArrowHeight = 42;
+            const y2Pixel = direction === 'up' ? rayArrowHeight : graphHeight - rayArrowHeight;
+            cy.get(`.ngie-accordion .ngie-jxgbox svg [stroke-linecap="butt"][x1*="${Math.floor(originX)}"][y1*="${Math.floor(y1Pixel)}"][x2*="${Math.floor(originX)}"][y2*="${Math.floor(y2Pixel)}"]`)
+                .should('be.visible');
+        });
+    },
+
+    /**
+     * Verifies the ray on the vertical number line preview tab.
+     * @param {string} direction - The direction of the ray ('up' or 'down').
+     * @param {number} range - The range of the number line.
+     * @param {number} startingPoint - The starting point of the ray.
+     */
+    verifyRayOnVerticalNumberLinePreviewTab: (direction, range, startingPoint) => {
+        numberLinePage.numberLinePreviewTab().then(($graphElement) => {
+            const graphWidth = $graphElement[0].clientWidth;
+            const graphHeight = $graphElement[0].clientHeight;
+            const originX = graphWidth / 2;
+            const originY = graphHeight / 2;
+            const y1Pixel = originY - startingPoint * (graphHeight / range);
+            const rayArrowHeight = 42;
+            const y2Pixel = direction === 'up' ? rayArrowHeight : graphHeight - rayArrowHeight;
+            cy.get('[class*="question-preview-wrapper"] .ngie-jxgbox').eq(0).find(`[stroke-linecap="butt"][x1*="${Math.floor(originX)}"][y1*="${Math.floor(y1Pixel)}"][x2*="${Math.floor(originX)}"][y2*="${Math.floor(y2Pixel)}"]`)
+                .should('be.visible');
+        });
+    },
+
+    /**
+     * Verifies the correct ray on the vertical number line preview tab.
+     * @param {string} direction - The direction of the ray ('up' or 'down').
+     * @param {number} range - The range of the number line.
+     * @param {number} startingPoint - The starting point of the ray.
+     */
+    verifyCorrectRayOnVerticalNumberLinePreviewTab: (direction, range, startingPoint) => {
+        numberLinePage.numberLinePreviewTab()
+            .then(($graphElement) => {
+                const graphWidth = $graphElement[0].clientWidth;
+                const graphHeight = $graphElement[0].clientHeight;
+                const originX = graphWidth / 2;
+                const originY = graphHeight / 2;
+                const y1Pixel = originY - startingPoint * (graphHeight / range);
+                const rayArrowHeight = 42;
+                const y2Pixel = direction === "up" ? rayArrowHeight : graphHeight - rayArrowHeight;
+                cy.get('[class*="question-preview-wrapper"] .ngie-jxgbox').eq(0).find(`[stroke-linecap="butt"][x1*="${Math.floor(originX)}"][y1*="${Math.floor(y1Pixel)}"][x2*="${Math.floor(originX)}"][y2*="${Math.floor(y2Pixel)}"]`)
+                    .should('have.css', 'stroke', css.color.correctAnswer);
+            });
+    },
+
+    /**
+     * Verifies the incorrect ray on the vertical number line preview tab.
+     * @param {string} direction - The direction of the ray ('up' or 'down').
+     * @param {number} range - The range of the number line.
+     * @param {number} startingPoint - The starting point of the ray.
+     */
+    verifyIncorrectRayOnVerticalNumberLinePreviewTab: (direction, range, startingPoint) => {
+        numberLinePage.numberLinePreviewTab().then(($graphElement) => {
+            const graphWidth = $graphElement[0].clientWidth;
+            const graphHeight = $graphElement[0].clientHeight;
+            const originX = graphWidth / 2;
+            const originY = graphHeight / 2;
+            const y1Pixel = originY - startingPoint * (graphHeight / range);
+            const rayArrowHeight = 42;
+            const y2Pixel = direction === "up" ? rayArrowHeight : graphHeight - rayArrowHeight;
+            cy.get('[class*="question-preview-wrapper"] .ngie-jxgbox').eq(0).find(`[stroke-linecap="butt"][x1*="${Math.floor(originX)}"][y1*="${Math.floor(y1Pixel)}"][x2*="${Math.floor(originX)}"][y2*="${Math.floor(y2Pixel)}"]`)
+                .should('have.css', 'stroke', css.color.incorrectAnswer);
+        });
+    },
+
+    /**
+     * Verifies the ray on the vertical number line does not exist on the preview tab.
+     * @param {string} direction - The direction of the ray ('up' or 'down').
+     * @param {number} range - The range of the number line.
+     * @param {number} startingPoint - The starting point of the ray.
+     */
+    verifyRayOnVerticalNumberLineNotExistPreviewTab: (direction, range, startingPoint) => {
+        numberLinePage.numberLinePreviewTab().then(($graphElement) => {
+            const graphWidth = $graphElement[0].clientWidth;
+            const graphHeight = $graphElement[0].clientHeight;
+            const originX = graphWidth / 2;
+            const originY = graphHeight / 2;
+            const y1Pixel = originY - startingPoint * (graphHeight / range);
+            const rayArrowHeight = 42;
+            const y2Pixel = direction === "up" ? rayArrowHeight : graphHeight - rayArrowHeight;
+            cy.get('[class*="question-preview-wrapper"] .ngie-jxgbox').eq(0).find(`[stroke-linecap="butt"][x1*="${Math.floor(originX)}"][y1*="${Math.floor(y1Pixel)}"][x2*="${Math.floor(originX)}"][y2*="${Math.floor(y2Pixel)}"]`)
+                .should('not.exist');
+        });
+    },
+
+    /**
+ * Verifies the ray on the vertical number line in the correct answer section.
+ * @param {string} direction - The direction of the ray ('up' or 'down').
+ * @param {number} range - The range of the number line.
+ * @param {number} startingPoint - The starting point of the ray.
+ */
+    verifyRayOnVerticalNumberLineCorrectAnswerSection: (direction, range, startingPoint) => {
+        numberLinePage.numberLineCorrectAnswerSection().then(($graphElement) => {
+            const graphWidth = $graphElement[0].clientWidth;
+            const graphHeight = $graphElement[0].clientHeight;
+            const originX = graphWidth / 2;
+            const originY = graphHeight / 2;
+            const y1Pixel = originY - startingPoint * (graphHeight / range);
+            const rayArrowHeight = 42;
+            const y2Pixel = direction === "up" ? rayArrowHeight : graphHeight - rayArrowHeight;
+            cy.get('[class*="question-preview-wrapper"] .ngie-jxgbox').eq(1).find(`[stroke-linecap="butt"][x1*="${Math.floor(originX)}"][y1*="${Math.floor(y1Pixel)}"][x2*="${Math.floor(originX)}"][y2*="${Math.floor(y2Pixel)}"]`)
+                .should('be.visible');
+        });
+    },
+
+    /**
+     * Verifies the correct ray on the vertical number line in the correct answer section.
+     * @param {string} direction - The direction of the ray ('up' or 'down').
+     * @param {number} range - The range of the number line.
+     * @param {number} startingPoint - The starting point of the ray.
+     */
+    verifyCorrectRayOnVerticalNumberLineCorrectAnswerSection: (direction, range, startingPoint) => {
+        numberLinePage.numberLineCorrectAnswerSection().then(($graphElement) => {
+            const graphWidth = $graphElement[0].clientWidth;
+            const graphHeight = $graphElement[0].clientHeight;
+            const originX = graphWidth / 2;
+            const originY = graphHeight / 2;
+            const y1Pixel = originY - startingPoint * (graphHeight / range);
+            const rayArrowHeight = 42;
+            const y2Pixel = direction === "up" ? rayArrowHeight : graphHeight - rayArrowHeight;
+            cy.get('[class*="question-preview-wrapper"] .ngie-jxgbox').eq(1).find(`[stroke-linecap="butt"][x1*="${Math.floor(originX)}"][y1*="${Math.floor(y1Pixel)}"][x2*="${Math.floor(originX)}"][y2*="${Math.floor(y2Pixel)}"]`)
+                .should('have.css', 'stroke', css.color.correctAnswer);
+        });
+    },
+
+    /**
+     * Verifies that the ray does not exist on the vertical number line in the correct answer section.
+     * @param {string} direction - The direction of the ray ('up' or 'down').
+     * @param {number} range - The range of the number line.
+     * @param {number} startingPoint - The starting point of the ray.
+     */
+    verifyRayOnVerticalNumberLineNotExistCorrectAnswerSection: (direction, range, startingPoint) => {
+        numberLinePage.numberLineCorrectAnswerSection().then(($graphElement) => {
+            const graphWidth = $graphElement[0].clientWidth;
+            const graphHeight = $graphElement[0].clientHeight;
+            const originX = graphWidth / 2;
+            const originY = graphHeight / 2;
+            const y1Pixel = originY - startingPoint * (graphHeight / range);
+            const rayArrowHeight = 42;
+            const y2Pixel = direction === "up" ? rayArrowHeight : graphHeight - rayArrowHeight;
+            cy.get('[class*="question-preview-wrapper"] .ngie-jxgbox').eq(1).find(`svg [stroke-linecap="butt"][x1*="${Math.floor(originX)}"][y1*="${Math.floor(y1Pixel)}"][x2*="${Math.floor(originX)}"][y2*="${Math.floor(y2Pixel)}"]`)
+                .should('not.exist');
+        });
+    },
+
+    /**
+   * Verifies the display numbers orientation in the specify correct answer section of the number line.
+   * @param {string} numberLineOrientation - The orientation of the number line ('Horizontal' or 'Vertical').
+   * @param {string} numberOrientation - The orientation of the numbers ('Below' or 'Left').
+   * @throws {Error} Thrown if the number line orientation is invalid.
+   */
+    verifyDisplayNumbersOrientationSpecifyCorrectAnswerSection: (numberLineOrientation, numberOrientation) => {
+        let property, value;
+        switch (numberLineOrientation) {
+            case 'Horizontal':
+                property = numberOrientation === 'Below' ? 'top' : 'bottom';
+                value = '83px';
+                break;
+            case 'Vertical':
+                property = numberOrientation === 'Left of' ? 'right' : 'left';
+                value = '85px';
+                break;
+            default:
+                throw new Error('Invalid Number line orientation');
+        }
+        numberLineCommonComponent.numberLineSpecifyCorrectAnswer()
+            .parents('.ngie-jxgbox')
+            .find('.number-line-tick-font')
+            .eq(0)
+            .should('have.css', property, value);
+    },
+
+    /**
+    * Verifies the display numbers orientation in the number line section.
+    * @param {string} numberLineOrientation - The orientation of the number line ('Horizontal' or 'Vertical').
+    * @param {string} numberOrientation - The orientation of the numbers ('Below' or 'Left').
+    * @throws {Error} Thrown if the number line orientation is invalid.
+    */
+    verifyDisplayNumbersOrientationPreviewTab: (numberLineOrientation, numberOrientation) => {
+        let property, value;
+        switch (numberLineOrientation) {
+            case 'Horizontal':
+                property = numberOrientation === 'Below' ? 'top' : 'bottom';
+                value = '83px';
+                break;
+            case 'Vertical':
+                property = numberOrientation === 'Left of' ? 'right' : 'left';
+                value = '85px';
+                break;
+            default:
+                throw new Error('Invalid Number line orientation');
+        }
+
+        numberLineCommonComponent.numberLinePreviewTab()
+            .parents('.ngie-jxgbox')
+            .find('.number-line-tick-font')
+            .eq(0)
+            .should('have.css', property, value);
+    },
+
+    /**
+     * Verifies the display numbers orientation in the number line section.
+     * @param {string} numberLineOrientation - The orientation of the number line ('Horizontal' or 'Vertical').
+     * @param {string} numberOrientation - The orientation of the numbers ('Below' or 'Left').
+     * @throws {Error} Thrown if the number line orientation is invalid.
+     */
+    verifyDisplayNumbersOrientationNumberLineSection: (numberLineOrientation, numberOrientation) => {
+        let property, value;
+        switch (numberLineOrientation) {
+            case 'Horizontal':
+                property = numberOrientation === 'Below' ? 'top' : 'bottom';
+                value = '83px';
+                break;
+            case 'Vertical':
+                property = numberOrientation === 'Left of' ? 'right' : 'left';
+                value = '85px';
+                break;
+            default:
+                throw new Error('Invalid Number line orientation');
+        }
+        layoutSectionComponent.numberLineNumberLineSection()
+            .parents('.ngie-jxgbox')
+            .find('.number-line-tick-font')
+            .eq(0)
+            .should('have.css', property, value);
+    },
 }
 
+
 const tests = {
     ...resetPopupComponent.tests,
     ...toolSettingsComponent.tests,
@@ -786,6 +1359,8 @@ const tests = {
     ...defaultToolDropdown.tests,
     ...scoringSectionBaseEditTab.tests,
     ...autoScoredScoringSectionMultiResponseType.tests,
+    ...layoutSectionComponent.tests,
+    ...numberLineCommonComponent.tests,
 
     verifyContentsOfSpecifyCorrectAnswerSection: () => {
         it('When user selects a scoring type then in the \'Correct\' accordion, all the contents should be displayed', () => {
@@ -839,8 +1414,51 @@ const tests = {
         it('Accessibility of \'Correct\' accordion contents', { tags: 'a11y' }, () => {
             cy.checkAccessibility(numberLinePage.numberLineSpecifyCorrectAnswer());
         });
-    }
+    },
+
+     /**
+     * Verifies the functionality of the number line section in the edit tab.
+     * @param {string} orientation - The orientation of the number line ('Horizontal' or 'Vertical').
+     */
+    verifyDisplayNumberSettingsFunctionalitySpecifyCorrectAnswerSection: (orientation) => {
+        const displayNumbersOptions = (orientation === "Horizontal") ? ["Below line", "Above line"] : ["Left of line", "Right of line"];
+        const direction = (orientation === "Horizontal") ? "Below" : "Left of";
+        it(`When "${displayNumbersOptions[0]}" is selected, labels should be displayed ${direction} number line in both the number line section and the specify correct answer section.`, () => {
+            numberLineCommonComponent.steps.verifyDisplayNumbersToggleButtonSelected(displayNumbersOptions[0]);
+            numberLinePage.steps.verifyDisplayNumbersOrientationNumberLineSection(orientation, direction);
+            numberLinePage.steps.verifyDisplayNumbersOrientationSpecifyCorrectAnswerSection(orientation, direction);
+        });
+
+        const oppositeDirection = (orientation === "Horizontal") ? "Above" : "Right of";
+        it(`When "${displayNumbersOptions[1]}" is selected, labels should be displayed ${oppositeDirection} number line in both the number line section and the specify correct answer section.`, () => {
+            numberLineCommonComponent.steps.selectDisplayNumbersToggleButton(displayNumbersOptions[1]);
+            numberLinePage.steps.verifyDisplayNumbersOrientationNumberLineSection(orientation, oppositeDirection);
+            numberLinePage.steps.verifyDisplayNumbersOrientationSpecifyCorrectAnswerSection(orientation, oppositeDirection);
+        });
+    },
+
+     /**
+     * Verifies the functionality of the number line section in the preview tab.
+     * @param {string} orientation - The orientation of the number line ('Horizontal' or 'Vertical').
+     */
+    verifyDisplayNumberSettingsFunctionalityPreviewTab: (orientation) => {
+        const displayNumbersOptions = (orientation === "Horizontal") ? ["Below line", "Above line"] : ["Left of line", "Right of line"];
+        const direction = (orientation === "Horizontal") ? "Below" : "Left of";
+        it(`When ${displayNumbersOptions[0]} is selected then labels should be displayed ${direction} number line in the preview tab.`, () => {
+            numberLineCommonComponent.steps.switchToEditTab();
+            numberLineCommonComponent.steps.verifyDisplayNumbersToggleButtonSelected(displayNumbersOptions[0]);
+            numberLineCommonComponent.steps.switchToPreviewTab();
+            numberLinePage.steps.verifyDisplayNumbersOrientationPreviewTab(orientation, direction);
+        });
 
+        const oppositeDirection = (orientation === "Horizontal") ? "Above" : "Right of";
+        it(`When user selects ${displayNumbersOptions[1]} then labels should be displayed ${oppositeDirection} number line in the preview tab.`, () => {
+            numberLineCommonComponent.steps.switchToEditTab();
+            numberLineCommonComponent.steps.selectDisplayNumbersToggleButton(displayNumbersOptions[1]);
+            numberLineCommonComponent.steps.switchToPreviewTab();
+            numberLinePage.steps.verifyDisplayNumbersOrientationPreviewTab(orientation, oppositeDirection);
+        });
+    }
 }
 
 export const numberLinePage = {