itemengine-cypress-automation 1.0.189-e2e-execution-crash-fbb0d92.0 → 1.0.189

package/cypress/pages/components/numberLineCommonComponent.js

@@ -0,0 +1,685 @@
+import utilities from "../../support/helpers/utilities";
+import { createQuestionBasePage } from "./createQuestionBasePage";
+import { layoutSectionComponent } from "./layoutSectionComponent";
+const lineSettingsOptions = ['Whole numbers', 'Decimals', 'Fractions', 'Mixed fractions'];
+const numbers = ['-10', '-10.00', "−\n10\n1", "−\n10\n0\n1"]
+
+const selectors = {
+    ...layoutSectionComponent,
+    numberLineSpecifyCorrectAnswer: () => cy.get('.ngie-accordion .ngie-jxgbox svg').eq(0),
+    numberLineTitleSpecifyCorrectAnswerSection: () => cy.get('.correct-answer-accordion [class*="LineGraphstyles__TitleText"]'),
+    numberLineAxisSpecifyCorrectAnswer: () => cy.get('.ngie-accordion .ngie-jxgbox svg line'),
+    numberLineTitleCorrectAnswerSection: () => cy.get('[class*="LineGraphstyles__TitleText"]').last(),
+    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"]'),
+    numberLineTitlePreviewTab: () => cy.get('.edit-question-preview-wrapper [class*="LineGraphstyles__TitleText"]'),
+    numberLineAxisPreviewTab: () => cy.get('[class*="question-preview-wrapper"] .ngie-jxgbox svg line').eq(0),
+    correctAnswersLabel: () => cy.get('[class*="AnswerLabel"]:visible'),
+    correctIcon: () => cy.get('[data-icon="CorrectAnswer"]'),
+    incorrectIcon: () => cy.get('[data-icon="Incorrect"]'),
+    correctIncorrectAnswerTextWrapper: () => cy.get('[class*="CorrectIncorrectWrapper"]'),
+    warningMessage: () => cy.get('.disabled-wrapper-cls [class*="DisabledTextWrapper"]'),
+    warningMessageContainer: () => cy.get('.disabled-wrapper-cls'),
+}
+
+const steps = {
+    ...layoutSectionComponent.steps,
+    ...createQuestionBasePage.steps,
+    /**
+        * @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(numberLineCommonComponent.correctIncorrectAnswerTextWrapper(), `Your answer is\n${answerStatus}`)
+        numberLineCommonComponent.correctIncorrectAnswerTextWrapper()
+            .within(() => {
+                if (answerStatus === 'correct') {
+                    utilities.verifyElementVisibilityState(numberLineCommonComponent.correctIcon(), 'visible');
+                } else {
+                    utilities.verifyElementVisibilityState(numberLineCommonComponent.incorrectIcon(), 'visible');
+                }
+            });
+    },
+
+    /**
+     * Verifies the orientation and size of the specify correct answer section.
+     * @param {string} orientation - The orientation of the specify correct answer section ('Horizontal' or 'Vertical').
+     * @param {string} value - The value representing the width or height of the specify correct answer section.
+     */
+    verifyNumberLineOrientationAndSizeSpecifyCorrectAnswerSection: (orientation, value) => {
+        if (orientation === 'Horizontal') {
+            numberLineCommonComponent.numberLineSpecifyCorrectAnswer()
+                .should('have.attr', 'width', value)
+        } else {
+            numberLineCommonComponent.numberLineSpecifyCorrectAnswer()
+                .should('have.attr', 'height', value);
+        }
+    },
+
+    /**
+    * Verifies the margin for the specify correct answer section of the number line.
+    * @param {number} value - The expected margin value in pixels.
+    */
+    verifyMarginForNumberLineSpecifyCorrectAnswerSection: (value) => {
+        numberLineCommonComponent.numberLineSpecifyCorrectAnswer()
+            .parents('[class*="LineGraphstyles__GraphContainer"]')
+            .should('have.css', 'padding', `${value}px`);
+    },
+
+    /**
+    * Verifies the response spacing for the specify correct answer section of the number line.
+    * @param {string} orientation - The orientation of the number line ('Horizontal' or 'Vertical').
+    * @param {number} value - The expected response spacing value.
+    */
+    verifyResponseSpacingSpecifyCorrectAnswerSection: (orientation, value) => {
+        const attribute = orientation === 'Horizontal' ? 'height' : 'width';
+        numberLineCommonComponent.numberLineSpecifyCorrectAnswer()
+            .should('have.attr', attribute, value * 4);
+    },
+
+    /**
+     * Verifies the visibility of the minimum arrow .
+     * @param {string} visibility - The expected visibility ('visible' or 'hidden').
+     * @throws {Error} Throws an error if the provided visibility string is invalid.
+     */
+    verifyMinArrowVisibilitySpecifyCorrectAnswerSection: (visibility) => {
+        if (visibility === 'visible') {
+            numberLineCommonComponent.numberLineAxisSpecifyCorrectAnswer()
+                .should('have.attr', 'marker-start');
+        }
+        else if (visibility === 'hidden') {
+            numberLineCommonComponent.numberLineAxisSpecifyCorrectAnswer()
+                .should('not.have.attr', 'marker-start');
+        }
+        else {
+            throw new Error('invalid state string');
+        }
+    },
+
+    /**
+     * Verifies the visibility of the maximum arrow 
+     * @param {string} visibility - The expected visibility ('visible' or 'hidden').
+     * @throws {Error} Throws an error if the provided visibility string is invalid.
+     */
+    verifyMaxArrowVisibilitySpecifyCorrectAnswerSection: (visibility) => {
+        if (visibility === 'visible') {
+            numberLineCommonComponent.numberLineAxisSpecifyCorrectAnswer()
+                .should('have.attr', 'marker-end');
+        }
+        else if (visibility === 'hidden') {
+            numberLineCommonComponent.numberLineAxisSpecifyCorrectAnswer()
+                .should('not.have.attr', 'marker-end');
+        }
+        else {
+            throw new Error('invalid state string');
+        }
+    },
+
+
+    verifyLabelsNotVisibleOnNumberLineSpecifyCorrectAnswerSection: () => {
+        numberLineCommonComponent.numberLineSpecifyCorrectAnswer()
+            .parents('.ngie-jxgbox')
+            .find('.number-line-tick-font')
+            .should('not.exist');
+    },
+
+    /**
+    * Verifies the visibility and text of labels on the specify correct answer section of the number line.
+    * @param {string} value - The initial value of the labels.
+    * @param {number} interval - The interval between consecutive labels.
+    */
+    verifyLabelsVisibleOnNumberLineSpecifyCorrectAnswerSection: (value, interval) => {
+        cy.log('Wait added to make sure all the labels are visible after checking the checkbox')
+        cy.wait(3000)
+        numberLineCommonComponent.numberLineSpecifyCorrectAnswer()
+            .parents('.ngie-jxgbox')
+            .find('.number-line-tick-font')
+            .its('length').then((len) => {
+                for (let index = 0; index < len; index++) {
+                    numberLineCommonComponent.numberLineSpecifyCorrectAnswer()
+                        .parents('.ngie-jxgbox')
+                        .find('.number-line-tick-font')
+                        .eq(index)
+                        .should('have.text', value);
+                    value += interval;
+                }
+            });
+    },
+
+    /**
+     * Verifies the orientation and size of the preview tab of the number line.
+     * @param {string} orientation - The orientation of the preview tab ('Horizontal' or 'Vertical').
+     * @param {string} value - The value representing the width or height of the preview tab.
+     */
+    verifyNumberLineOrientationAndSizePreviewTab: (orientation, value) => {
+        if (orientation === 'Horizontal') {
+            numberLineCommonComponent.numberLinePreviewTab()
+                .should('have.attr', 'width', value)
+        } else {
+            numberLineCommonComponent.numberLinePreviewTab()
+                .should('have.attr', 'height', value);
+        }
+    },
+
+    /**
+     * Verifies the margin for the preview tab of the number line.
+     * @param {number} value - The expected margin value in pixels.
+     */
+    verifyMarginForNumberLinePreviewTab: (value) => {
+        numberLineCommonComponent.numberLinePreviewTab()
+            .parents('[class*="LineGraphstyles__GraphContainer"]')
+            .should('have.css', 'padding', `${value}px`);
+    },
+
+    /**
+     * Verifies the response spacing for the preview tab of the number line.
+     * @param {string} orientation - The orientation of the number line ('Horizontal' or 'Vertical').
+     * @param {number} value - The expected response spacing value.
+     */
+    verifyResponseSpacingPreviewTab: (orientation, value) => {
+        const attribute = orientation === 'Horizontal' ? 'height' : 'width';
+        numberLineCommonComponent.numberLinePreviewTab()
+            .should('have.attr', attribute, value * 4);
+    },
+
+    /**
+    * Verifies the visibility of the minimum arrow 
+    * @param {string} visibility - The expected visibility ('visible' or 'hidden').
+    * @throws {Error} Throws an error if the provided visibility string is invalid.
+    */
+    verifyMinArrowVisibilityPreviewTab: (visibility) => {
+        if (visibility === 'visible') {
+            numberLineCommonComponent.numberLineAxisPreviewTab()
+                .should('have.attr', 'marker-start');
+        }
+        else if (visibility === 'hidden') {
+            numberLineCommonComponent.numberLineAxisPreviewTab()
+                .should('not.have.attr', 'marker-start');
+        }
+        else {
+            throw new Error('invalid state string');
+        }
+    },
+
+    /**
+    * Verifies the visibility of the maximum arrow 
+    * @param {string} visibility - The expected visibility ('visible' or 'hidden').
+    * @throws {Error} Throws an error if the provided visibility string is invalid.
+   */
+    verifyMaxArrowVisibilityPreviewTab: (visibility) => {
+        if (visibility === 'visible') {
+            numberLineCommonComponent.numberLineAxisPreviewTab()
+                .should('have.attr', 'marker-end');
+        }
+        else if (visibility === 'hidden') {
+            numberLineCommonComponent.numberLineAxisPreviewTab()
+                .should('not.have.attr', 'marker-end');
+        }
+        else {
+            throw new Error('invalid state string');
+        }
+    },
+
+    /**
+    * Verifies the visibility and text of labels on the preview tab of the number line.
+    * @param {string} value - The initial value of the labels.
+    * @param {number} interval - The interval between consecutive labels.
+    */
+    verifyLabelsVisibleOnNumberLinePreviewTab: (value, interval) => {
+        numberLineCommonComponent.numberLinePreviewTab()
+            .parents('.ngie-jxgbox')
+            .find('.number-line-tick-font')
+            .its('length').then((len) => {
+                for (let index = 0; index < len; index++) {
+                    numberLineCommonComponent.numberLinePreviewTab()
+                        .parents('.ngie-jxgbox')
+                        .find('.number-line-tick-font')
+                        .eq(index)
+                        .should('have.text', value);
+                    value += interval;
+                }
+            });
+    },
+
+    verifyLabelsNotVisibleOnNumberLinePreviewTab: () => {
+        numberLineCommonComponent.numberLinePreviewTab()
+            .parents('.ngie-jxgbox')
+            .find('.number-line-tick-font')
+            .should('not.exist');
+    },
+
+    /**
+     * Verifies the label on the number line.
+     * @param {Array} values - An array of objects containing the value and index of each label.
+     */
+    verifyLabelOnNumberLineSpecifyCorrectAnswerSection: (values) => {
+        values.forEach(({ value, index }) => {
+            numberLineCommonComponent.numberLineSpecifyCorrectAnswer()
+                .parents('.ngie-jxgbox')
+                .find('.number-line-tick-font')
+                .eq(index)
+                .then(($el) => {
+                    const innerText = $el[0].innerText;
+                    expect(innerText.trim()).to.equal(value.toString());
+                });
+        });
+    },
+
+    /**
+     * Verifies the annotated labels on the number line.
+     * @param {string} value - The value of the annotated label.
+     * @param {number} annotateEvery - The frequency of annotation.
+     */
+    verifyAnnotatedLabelsOnNumberLineSpecifyCorrectAnswerSection: (value, annotateEvery) => {
+        cy.wait(3000);
+        numberLineCommonComponent.numberLineSpecifyCorrectAnswer()
+            .parents('.ngie-jxgbox')
+            .find('.number-line-tick-font')
+            .each(($element, index) => {
+                if (index % annotateEvery === 0) {
+                    cy.wrap($element).should('have.text', value);
+                    value += annotateEvery;
+                }
+            });
+    },
+
+    /**
+   * Verifies the label on the number line.
+   * @param {Array} values - An array of objects containing the value and index of each label.
+   */
+    verifyLabelOnNumberLinePreviewTab: (values) => {
+        values.forEach(({ value, index }) => {
+            numberLineCommonComponent.numberLinePreviewTab()
+                .parents('.ngie-jxgbox')
+                .find('.number-line-tick-font')
+                .eq(index)
+                .then(($el) => {
+                    const innerText = $el[0].innerText;
+                    expect(innerText.trim()).to.equal(value.toString());
+                });
+        });
+    },
+
+    /**
+     * Verifies the annotated labels on the number line.
+     * @param {string} value - The value of the annotated label.
+     * @param {number} annotateEvery - The frequency of annotation.
+     */
+    verifyAnnotatedLabelsOnNumberLinePreviewTab: (value, annotateEvery) => {
+        numberLineCommonComponent.numberLinePreviewTab()
+            .parents('.ngie-jxgbox')
+            .find('.number-line-tick-font')
+            .each(($element, index) => {
+                if (index % annotateEvery === 0) {
+                    cy.wrap($element).should('have.text', value);
+                    value += annotateEvery;
+                }
+            });
+    }
+}
+
+const tests = {
+    /**
+    * Verifies the functionality of the layout section in the edit tab.
+    * @param {('Horizontal'|'Vertical')} orientation - The orientation of the number line
+    */
+    verifyLayoutSectionEditTabFunctionality: (orientation) => {
+        it(`When user selects ${orientation} orientation, then number line in Number line section and Specify correct answer section should be updated to ${orientation} number line`, () => {
+            numberLineCommonComponent.steps.selectOrientationToggleButton(orientation);
+            numberLineCommonComponent.steps.verifyNumberLineOrientationAndSizeNumberLineSection(orientation, '640');
+            numberLineCommonComponent.steps.verifyNumberLineOrientationAndSizeSpecifyCorrectAnswerSection(orientation, '640');
+        });
+
+        if (orientation === "Horizontal") {
+            it('When user updates value for Width input field, it should get updated in Number line section and Specify correct answer section', () => {
+                numberLineCommonComponent.steps.enterTextInWidthInputField(600);
+                numberLineCommonComponent.steps.verifyTextInWidthInputField(600);
+                numberLineCommonComponent.steps.verifyNumberLineOrientationAndSizeNumberLineSection(orientation, '600');
+                numberLineCommonComponent.steps.verifyNumberLineOrientationAndSizeSpecifyCorrectAnswerSection(orientation, '600');
+                numberLineCommonComponent.steps.enterTextInWidthInputField(640);
+            });
+        } else {
+            it('When user updates value for Height input field, it should get updated in Number line section and Specify correct answer section', () => {
+                numberLineCommonComponent.steps.enterTextInHeightInputField(600);
+                numberLineCommonComponent.steps.verifyTextInHeightInputField(600);
+                numberLineCommonComponent.steps.verifyNumberLineOrientationAndSizeNumberLineSection(orientation, '600');
+                numberLineCommonComponent.steps.verifyNumberLineOrientationAndSizeSpecifyCorrectAnswerSection(orientation, '600');
+                numberLineCommonComponent.steps.enterTextInHeightInputField(640);
+            });
+        }
+
+        it('When user updates value for Margin input field, it should get updated in Specify correct answer section', () => {
+            numberLineCommonComponent.steps.enterTextInMarginInputField(12);
+            numberLineCommonComponent.steps.verifyTextInMarginInputField(12);
+            numberLineCommonComponent.steps.verifyMarginForNumberLineSpecifyCorrectAnswerSection(12);
+            numberLineCommonComponent.steps.enterTextInMarginInputField(10);
+        });
+
+        it('When user checks Show min arrow checkbox, then arrow should be displayed on left end of number line and arrow should not be displayed on right end of number line in number line section and specify correct answer section', () => {
+            numberLineCommonComponent.steps.checkCheckbox('Show min arrow');
+            numberLineCommonComponent.steps.verifyMinArrowVisibilitySpecifyCorrectAnswerSection('visible');
+            numberLineCommonComponent.steps.verifyMinArrowVisibilityNumberLineSection('visible');
+        });
+
+        it('When user unchecks Show min arrow checkbox, then arrow should not be displayed on left end of number line in number line section and specify correct answer section', () => {
+            numberLineCommonComponent.steps.uncheckCheckbox('Show min arrow');
+            numberLineCommonComponent.steps.verifyMinArrowVisibilitySpecifyCorrectAnswerSection('hidden');
+            numberLineCommonComponent.steps.verifyMinArrowVisibilityNumberLineSection('hidden');
+        });
+
+        it('When user checks Show max arrow checkbox, then arrow should be displayed on right end of number line and arrow should not be displayed on left end of number line in number line section and specify correct answer section', () => {
+            numberLineCommonComponent.steps.checkCheckbox('Show max arrow');
+            numberLineCommonComponent.steps.verifyMaxArrowVisibilitySpecifyCorrectAnswerSection('visible');
+            numberLineCommonComponent.steps.verifyMaxArrowVisibilityNumberLineSection('visible');
+        });
+
+        it('When user unchecks Show max arrow checkbox, then arrow should not be displayed on right end of number line in number line section and specify correct answer section', () => {
+            numberLineCommonComponent.steps.uncheckCheckbox('Show max arrow');
+            numberLineCommonComponent.steps.verifyMaxArrowVisibilitySpecifyCorrectAnswerSection('hidden');
+            numberLineCommonComponent.steps.verifyMaxArrowVisibilityNumberLineSection('hidden');
+        });
+
+        //Note: Only for Label number line
+        it('When user unchecks Stagger response checkbox', () => {
+            numberLineCommonComponent.steps.uncheckCheckbox('Stagger response');
+        });
+
+        //Note: Only for Label number line
+        it('When user uncheck Stagger response checkbox', () => {
+            numberLineCommonComponent.steps.checkCheckbox('Stagger response');
+        });
+
+        it('When user unchecks Show labels checkbox, then labels on number line should disappear in number line section and specify correct answer section', () => {
+            numberLineCommonComponent.steps.uncheckCheckbox('Show labels');
+            numberLineCommonComponent.steps.verifyLabelsNotVisibleOnNumberLineNumberLineSection();
+            numberLineCommonComponent.steps.verifyLabelsNotVisibleOnNumberLineSpecifyCorrectAnswerSection();
+        });
+
+        it('When Show labels checkbox is unchecked, then Line settings and Display numbers section should be in disabled state', () => {
+            numberLineCommonComponent.steps.verifyDisplayNumbersAndLineSettingsSectionDisabled();
+        });
+
+        it('When user checks Show labels checkbox, then labels on number line should be displayed in number line section and specify correct answer section', () => {
+            numberLineCommonComponent.steps.checkCheckbox('Show labels');
+            numberLineCommonComponent.steps.verifyLabelsVisibleOnNumberLineNumberLineSection(-10, 1);
+            numberLineCommonComponent.steps.verifyLabelsVisibleOnNumberLineSpecifyCorrectAnswerSection(-10, 1);
+        });
+
+        it('When Show labels checkbox is checked, then Line settings and Display numbers section should be in enabled state', () => {
+            numberLineCommonComponent.steps.verifyDisplayNumbersAndLineSettingsSectionEnabled();
+        });
+
+        //Note: Unable to check on cypress, added to manual sheet
+        it('When user unchecks Show ticks checkbox, then ticks on number line should disappear in number line section and specify correct answer section', () => {
+
+        });
+
+        //Note: Unable to check on cypress, added to manual sheet
+        it('When user checks Show ticks checkbox, then ticks on number line should be displayed in number line section and specify correct answer section', () => {
+
+        });
+    },
+
+    /**
+    * Verifies the functionality of the layout section in the preview tab.
+    * @param {string} orientation - The orientation of the number line ('Horizontal' or 'Vertical').
+    */
+    verifyLayoutSectionPreviewTabFunctionality: (orientation) => {
+        it(`When user selects ${orientation} orientation, then ${orientation} number line should be displayed in preview tab`, () => {
+            numberLineCommonComponent.steps.switchToEditTab();
+            numberLineCommonComponent.steps.selectOrientationToggleButton(orientation);
+            numberLineCommonComponent.steps.switchToPreviewTab();
+            numberLineCommonComponent.steps.verifyNumberLineOrientationAndSizePreviewTab(orientation, '640');
+        });
+
+        if (orientation === "Horizontal") {
+            it('When user updates value for Width input field, it should get updated in preview tab', () => {
+                numberLineCommonComponent.steps.switchToEditTab();
+                numberLineCommonComponent.steps.enterTextInWidthInputField(600);
+                numberLineCommonComponent.steps.verifyTextInWidthInputField(600);
+                numberLineCommonComponent.steps.switchToPreviewTab();
+                numberLineCommonComponent.steps.verifyNumberLineOrientationAndSizePreviewTab(orientation, '600');
+                numberLineCommonComponent.steps.switchToEditTab();
+                numberLineCommonComponent.steps.enterTextInWidthInputField(640);
+            });
+        } else {
+            it('When user updates value for Height input field, it should get updated in preview tab', () => {
+                numberLineCommonComponent.steps.switchToEditTab();
+                numberLineCommonComponent.steps.enterTextInHeightInputField(600);
+                numberLineCommonComponent.steps.verifyTextInHeightInputField(600);
+                numberLineCommonComponent.steps.switchToPreviewTab();
+                numberLineCommonComponent.steps.verifyNumberLineOrientationAndSizePreviewTab(orientation, '600');
+                numberLineCommonComponent.steps.switchToEditTab();
+                numberLineCommonComponent.steps.enterTextInHeightInputField(640);
+            });
+        }
+
+        it('When user updates value for Margin input field, it should get updated in preview tab', () => {
+            numberLineCommonComponent.steps.enterTextInMarginInputField(12);
+            numberLineCommonComponent.steps.verifyTextInMarginInputField(12);
+            numberLineCommonComponent.steps.switchToPreviewTab();
+            numberLineCommonComponent.steps.verifyMarginForNumberLinePreviewTab(12);
+        });
+
+        it('When user checks Show min arrow checkbox, then arrow should be displayed on left end of number line and arrow should not be displayed on right end of number line in preview tab', () => {
+            numberLineCommonComponent.steps.switchToEditTab();
+            numberLineCommonComponent.steps.enterTextInMarginInputField(10);
+            numberLineCommonComponent.steps.checkCheckbox('Show min arrow');
+            numberLineCommonComponent.steps.switchToPreviewTab();
+            numberLineCommonComponent.steps.verifyMinArrowVisibilityPreviewTab('visible');
+        });
+
+        it('When user unchecks Show min arrow checkbox, then arrow should not be displayed on left end of number line in preview tab', () => {
+            numberLineCommonComponent.steps.switchToEditTab();
+            numberLineCommonComponent.steps.uncheckCheckbox('Show min arrow');
+            numberLineCommonComponent.steps.switchToPreviewTab();
+            numberLineCommonComponent.steps.verifyMinArrowVisibilityPreviewTab('hidden');
+        });
+
+        it('When user checks Show max arrow checkbox, then arrow should be displayed on right end of number line and arrow should not be displayed on left end of number line in preview tab', () => {
+            numberLineCommonComponent.steps.switchToEditTab();
+            numberLineCommonComponent.steps.checkCheckbox('Show max arrow');
+            numberLineCommonComponent.steps.switchToPreviewTab();
+            numberLineCommonComponent.steps.verifyMaxArrowVisibilityPreviewTab('visible');
+        });
+
+        it('When user unchecks Show max arrow checkbox, then arrow should not be displayed on right end of number line in preview tab', () => {
+            numberLineCommonComponent.steps.switchToEditTab();
+            numberLineCommonComponent.steps.uncheckCheckbox('Show max arrow');
+            numberLineCommonComponent.steps.switchToPreviewTab();
+            numberLineCommonComponent.steps.verifyMaxArrowVisibilityPreviewTab('hidden');
+        });
+
+        it('When user unchecks Show labels checkbox, then labels on number line should disappear in preview tab', () => {
+            numberLineCommonComponent.steps.switchToEditTab();
+            numberLineCommonComponent.steps.uncheckCheckbox('Show labels');
+            numberLineCommonComponent.steps.switchToPreviewTab();
+            numberLineCommonComponent.steps.verifyLabelsNotVisibleOnNumberLinePreviewTab();
+        });
+
+        it('When user checks Show labels checkbox, then labels on number line should be displayed in preview tab', () => {
+            numberLineCommonComponent.steps.switchToEditTab();
+            numberLineCommonComponent.steps.checkCheckbox('Show labels');
+            numberLineCommonComponent.steps.switchToPreviewTab();
+            numberLineCommonComponent.steps.verifyLabelsVisibleOnNumberLinePreviewTab(-10, 1);
+        });
+
+        //Note: Unable to check on cypress, added to manual sheet
+        it('When user unchecks Show ticks checkbox, then ticks on number line should disappear in preview tab', () => {
+
+        });
+
+        //Note: Unable to check on cypress, added to manual sheet
+        it('When user checks Show ticks checkbox, then ticks on number line should be displayed in preview tab', () => {
+
+        });
+    },
+
+    /**
+   * Verifies the functionality of the number line title popup in the edit tab.
+   * @param {string} orientation - The orientation of the number line ('Horizontal' or 'Vertical').
+   */
+    verifyNumberLineTitlePopupEditTabFunctionality: (title) => {
+        it('When the user edits the Number line title and clicks on \'Cancel\' button then the changes should not be displayed in the Number line section and \'Specify correct answer\' section Number line', () => {
+            layoutSectionComponent.steps.enterTextInTitlePopupAddLabelInputField(title);
+            layoutSectionComponent.steps.clickOnTitlePopupCancelButton();
+            utilities.verifyInnerText(numberLineCommonComponent.numberLineTitleNumberLineSection(), 'Number line title');
+            utilities.verifyInnerText(numberLineCommonComponent.numberLineTitleSpecifyCorrectAnswerSection(), 'Number line title');
+        });
+
+        it('When the user clicks on the \'Number line title\' then the original text should be displayed in the popup', () => {
+            layoutSectionComponent.steps.clickOnNumberLineTitle();
+            layoutSectionComponent.steps.verifyTextInTitlePopupAddLabelInputField('Number line title');
+        });
+
+        it('When the user clicks on \'Save\' after updating the input field the updated label should be displayed in the Number line section and \'Specify correct answer\' section Number line', () => {
+            layoutSectionComponent.steps.enterTextInTitlePopupAddLabelInputField(title);
+            layoutSectionComponent.steps.clickOnTitlePopupSaveButton();
+            utilities.verifyInnerText(numberLineCommonComponent.numberLineTitleNumberLineSection(), title);
+            utilities.verifyInnerText(numberLineCommonComponent.numberLineTitleSpecifyCorrectAnswerSection(), title);
+        });
+    },
+
+    verifyNumberLineSectionEditTabFunctionality: () => {
+        it('When user updates value in Min input field then it should be updated in Specify correct answer section', () => {
+            numberLineCommonComponent.steps.enterTextInMinInputField(-12);
+            numberLineCommonComponent.steps.verifyTextInMinInputField(-12);
+            numberLineCommonComponent.steps.verifyLabelOnNumberLineNumberLineSection([{ value: -12, index: 0 }]);
+            numberLineCommonComponent.steps.verifyLabelOnNumberLineSpecifyCorrectAnswerSection([{ value: -12, index: 0 }]);
+        });
+
+        it('When user updates value in Max input field then it should be updated in Specify correct answer section', () => {
+            numberLineCommonComponent.steps.enterTextInMaxInputField(12);
+            numberLineCommonComponent.steps.verifyTextInMaxInputField(12);
+            numberLineCommonComponent.steps.verifyLabelOnNumberLineNumberLineSection([{ value: 12, index: 24 }]);
+            numberLineCommonComponent.steps.verifyLabelOnNumberLineSpecifyCorrectAnswerSection([{ value: 12, index: 24 }]);
+        });
+
+        //Note- Can't check ticks are not annotated so adding it to manual sheet
+        it('When user updates value in Interval input field then interval of labels and ticks should be updated in number line section and specify correct answer section', () => {
+            numberLineCommonComponent.steps.enterTextInIntervalInputField(2);
+            numberLineCommonComponent.steps.verifyTextInIntervalInputField(2);
+            numberLineCommonComponent.steps.verifyLabelsVisibleOnNumberLineNumberLineSection(-12, 2);
+            numberLineCommonComponent.steps.verifyLabelsVisibleOnNumberLineSpecifyCorrectAnswerSection(-12, 2);
+        });
+
+        //Note- Can't check ticks are not annotated so adding it to manual sheet
+        it('When user updates value in Annotate every input field then labels should be annotated appropriately and ticks should not get annotated for the number line in the number line section and the specify correct answer section.', () => {
+            cy.log('Changing interval input fields value to its default value');
+            numberLineCommonComponent.steps.enterTextInIntervalInputField(1);
+            numberLineCommonComponent.steps.enterTextInAnnotateEveryInputField(2);
+            numberLineCommonComponent.steps.verifyTextInAnnotateEveryInputField(2);
+            numberLineCommonComponent.steps.verifyAnnotatedLabelsOnNumberLineNumberLineSection(-12, 2);
+            numberLineCommonComponent.steps.verifyAnnotatedLabelsOnNumberLineSpecifyCorrectAnswerSection(-12, 2);
+        });
+    },
+
+    /**
+    * Verifies the functionality of the number line title popup in the preview tab.
+    * @param {string} orientation - The orientation of the number line ('Horizontal' or 'Vertical').
+    */
+    verifyNumberLineTitlePopupPreviewTabFunctionality: (title) => {
+        it('When the user edits the number line title and clicks on \'Cancel\' button then the changes should not be displayed in the preview tab', () => {
+            numberLineCommonComponent.steps.clickOnNumberLineTitle();
+            numberLineCommonComponent.steps.enterTextInTitlePopupAddLabelInputField(title);
+            numberLineCommonComponent.steps.clickOnTitlePopupCancelButton();
+            numberLineCommonComponent.steps.switchToPreviewTab();
+            utilities.verifyInnerText(numberLineCommonComponent.numberLineTitlePreviewTab(), 'Number line title');
+        });
+
+        it('When the user clicks on \'Save\' after updating the input field the updated label should be displayed in the preview tab', () => {
+            numberLineCommonComponent.steps.switchToEditTab();
+            numberLineCommonComponent.steps.clickOnNumberLineTitle();
+            numberLineCommonComponent.steps.enterTextInTitlePopupAddLabelInputField(title);
+            numberLineCommonComponent.steps.clickOnTitlePopupSaveButton();
+            numberLineCommonComponent.steps.switchToPreviewTab();
+            utilities.verifyInnerText(numberLineCommonComponent.numberLineTitlePreviewTab(), title);
+        });
+    },
+
+    verifyNumberLineSectionPreviewTabFunctionality: () => {
+        it('When user updates value in Min input field then it should be updated in preview tab', () => {
+            numberLineCommonComponent.steps.switchToEditTab();
+            numberLineCommonComponent.steps.enterTextInMinInputField(-12);
+            numberLineCommonComponent.steps.verifyTextInMinInputField(-12);
+            numberLineCommonComponent.steps.switchToPreviewTab();
+            numberLineCommonComponent.steps.verifyLabelOnNumberLinePreviewTab([{ value: -12, index: 0 }]);
+        });
+
+        it('When user updates value in Max input field then it should be updated in preview  tab', () => {
+            numberLineCommonComponent.steps.switchToEditTab();
+            numberLineCommonComponent.steps.enterTextInMaxInputField(12);
+            numberLineCommonComponent.steps.verifyTextInMaxInputField(12);
+            numberLineCommonComponent.steps.switchToPreviewTab();
+            numberLineCommonComponent.steps.verifyLabelOnNumberLinePreviewTab([{ value: 12, index: 24 }]);
+        });
+
+        //Note- Can't check ticks are not annotated so adding it to manual sheet
+        it('When user updates value in Interval input field then interval of labels and ticks should be updated in preview  tab', () => {
+            numberLineCommonComponent.steps.switchToEditTab();
+            numberLineCommonComponent.steps.enterTextInIntervalInputField(2);
+            numberLineCommonComponent.steps.verifyTextInIntervalInputField(2);
+            numberLineCommonComponent.steps.switchToPreviewTab();
+            numberLineCommonComponent.steps.verifyLabelsVisibleOnNumberLinePreviewTab(-12, 2);
+        });
+
+        //Note- Can't check ticks are not annotated so adding it to manual sheet
+        it('When user updates value in Annotate every input field then labels should be annotated appropriately for the number line and ticks should not get annotated in the preview tab.', () => {
+            numberLineCommonComponent.steps.switchToEditTab();
+            cy.log('Changing interval input fields value to its default value');
+            numberLineCommonComponent.steps.enterTextInIntervalInputField(1);
+            numberLineCommonComponent.steps.enterTextInAnnotateEveryInputField(2);
+            numberLineCommonComponent.steps.verifyTextInAnnotateEveryInputField(2);
+            numberLineCommonComponent.steps.switchToPreviewTab();
+            numberLineCommonComponent.steps.verifyAnnotatedLabelsOnNumberLinePreviewTab(-12, 2);
+        });
+    },
+
+    verifyDisplaySpecificAnnotationAndLineSettingsEditTabFunctionality: () => {
+        lineSettingsOptions.forEach((option, index) => {
+            it(`When user selects ${option} in line settings section, then number displayed on number line should be ${option} in number line section and specify correct answer section`, () => {
+                numberLineCommonComponent.steps.selectLineSettingsToggleButton(option);
+                numberLineCommonComponent.steps.verifyLineSettingsToggleButtonSelected(option);
+                numberLineCommonComponent.steps.verifyLabelOnNumberLineNumberLineSection([{ value: numbers[index], index: 0 }]);
+                numberLineCommonComponent.steps.verifyLabelOnNumberLineSpecifyCorrectAnswerSection([{ value: numbers[index], index: 0 }]);
+            });
+        });
+
+        it('When user enters value in Display specific annotation (use semicolons to separate) input field then it should be displayed on number line in Number line section and Specify correct answer section', () => {
+            numberLineCommonComponent.steps.selectLineSettingsToggleButton(lineSettingsOptions[0]);
+            numberLineCommonComponent.steps.enterTextInDisplaySpecificAnnotationInputField('-9;');
+            numberLineCommonComponent.steps.verifyTextInDisplaySpecificAnnotationInputField('-9;');
+            numberLineCommonComponent.steps.verifyLabelOnNumberLineSpecifyCorrectAnswerSection([{ value: -9, index: 1 }]);
+            numberLineCommonComponent.steps.verifyLabelOnNumberLineNumberLineSection([{ value: -9, index: 1 }]);
+        });
+    },
+
+    verifyDisplaySpecificAnnotationAndLineSettingsPreviewTabFunctionality: () => {
+        lineSettingsOptions.forEach((option, index) => {
+            it(`When user selects ${option} in line settings section, then number displayed on number line should be ${option} in preview tab`, () => {
+                numberLineCommonComponent.steps.switchToEditTab();
+                numberLineCommonComponent.steps.selectLineSettingsToggleButton(option);
+                numberLineCommonComponent.steps.verifyLineSettingsToggleButtonSelected(option);
+                numberLineCommonComponent.steps.switchToPreviewTab();
+                numberLineCommonComponent.steps.verifyLabelOnNumberLinePreviewTab([{ value: numbers[index], index: 0 }]);
+            });
+        });
+
+        it('When user enters value in Display specific annotation (use semicolons to separate) input field then it should be displayed on number line in preview tab', () => {
+            numberLineCommonComponent.steps.switchToEditTab();
+            numberLineCommonComponent.steps.selectLineSettingsToggleButton(lineSettingsOptions[0]);
+            numberLineCommonComponent.steps.enterTextInDisplaySpecificAnnotationInputField('-9;');
+            numberLineCommonComponent.steps.verifyTextInDisplaySpecificAnnotationInputField('-9;');
+            numberLineCommonComponent.steps.switchToPreviewTab();
+            numberLineCommonComponent.steps.verifyLabelOnNumberLinePreviewTab([{ value: -9, index: 1 }]);
+        });
+    },
+}
+
+export const numberLineCommonComponent = {
+    ...selectors,
+    steps,
+    tests
+}