itemengine-cypress-automation 1.0.184-e2e-execution-crash-3b9d0d0.0 → 1.0.185-repoUpdate26April-b17eb46.0

package/cypress/pages/components/layoutSectionComponent.js

@@ -0,0 +1,1191 @@
+import utilities from "../../support/helpers/utilities";
+import { dialogBoxBase } from "../dialogBoxBase";
+const css = Cypress.env('css');
+const orientationToggleButton = ['Horizontal', 'Vertical'];
+const lineSettingsOptions = ['Whole numbers', 'Decimals', 'Fractions', 'Mixed fractions'];
+
+const selectors = {
+    //layout
+    layoutLabel: () => cy.get('.customized-options-label'),
+    layoutAccordionChevronButton: () => cy.get('.number-line-response-accordion [class*="MuiAccordionSummary-expandIconWrapper"]'),
+    layoutAccordionButton: () => cy.get('.number-line-response-accordion .ngie-accordion-summary'),
+    orientationLabel: () => cy.get('.number-line-layout-options .single-select-toggle-group-title'),
+    orientationToggleButton: (ariaLabel = null) => {
+        if (ariaLabel !== null) {
+            return cy.get(`.number-line-layout-options [class*="SingleSelectToggleGroupstyles__ButtonContainer"] button[aria-label*="${ariaLabel}"]`);
+        } else {
+            return cy.get('.number-line-layout-options [class*="SingleSelectToggleGroupstyles__ButtonContainer"] button');
+        }
+    },
+    widthLabel: () => cy.get('.number-line-layout-options [aria-labelledby="Width (px)"]'),
+    widthInputField: () => cy.get('.number-line-layout-options input[aria-label="Width (px)"]'),
+    heightLabel: () => cy.get('.number-line-layout-options [aria-labelledby="Height (px)"]'),
+    heightInputField: () => cy.get('.number-line-layout-options input[aria-label="Height (px)"]'),
+    marginLabel: () => cy.get('.margin-input-wrapper [aria-labelledby="Margin (px)"]'),
+    marginInputField: () => cy.get('.number-line-layout-options input[aria-label="Margin (px)"]'),
+    responseSpacingLabel: () => cy.get('.dropdown-wrapper [aria-labelledby="Response Spacing"]'),
+    responseSpacingInputField: () => cy.get('.dropdown-wrapper input[aria-label="Response Spacing"]'),
+    makeResponsiveLabel: () => cy.get('.mobile-responsive-wrapper .MuiFormControlLabel-label'),
+    makeResponsiveCheckbox: () => cy.get('.mobile-responsive-wrapper input'),
+    makeResponsiveCheckboxIcon: () => cy.get('.mobile-responsive-wrapper .MuiSwitch-thumb'),
+    whatIsThisLabel: () => cy.get('.what-is-wrapper [class*="StyledLink"]'),
+    makeResponsiveHelpText: () => cy.get('[class*="WhatIsThisDescriptionWrapper"]'),
+    showMinArrowLabel: () => cy.get('[data-ngie-testid="show-min-arrow-checkbox"] .MuiFormControlLabel-label'),
+    showMinArrowCheckbox: () => cy.get('[data-ngie-testid="show-min-arrow-checkbox"] input'),
+    showMaxArrowLabel: () => cy.get('[data-ngie-testid="show-max-arrow-checkbox"] .MuiFormControlLabel-label'),
+    showMaxArrowCheckbox: () => cy.get('[data-ngie-testid="show-max-arrow-checkbox"] input'),
+    stackResponsesLabel: () => cy.get('[data-ngie-testid="stack-responses-checkbox"] .MuiFormControlLabel-label'),
+    stackResponsesCheckbox: () => cy.get('[data-ngie-testid="stack-responses-checkbox"] input'),
+    staggerResponseLabel: () => cy.get('[data-ngie-testid="stagger-response-checkbox"] .MuiFormControlLabel-label'),
+    staggerResponseCheckbox: () => cy.get('[data-ngie-testid="stagger-response-checkbox"] input'),
+    showLabelsLabel: () => cy.get('[data-ngie-testid="show-labels-checkbox"] .MuiFormControlLabel-label'),
+    showLabelsCheckbox: () => cy.get('[data-ngie-testid="show-labels-checkbox"] input'),
+    showTicksLabel: () => cy.get('[data-ngie-testid="show-ticks-checkbox"] .MuiFormControlLabel-label'),
+    showTicksCheckbox: () => cy.get('[data-ngie-testid="show-ticks-checkbox"] input'),
+    showMinLabel: () => cy.get('[data-ngie-testid="show-min-checkbox"] .MuiFormControlLabel-label'),
+    showMinCheckbox: () => cy.get('[data-ngie-testid="show-min-checkbox"] input'),
+    showMaxLabel: () => cy.get('[data-ngie-testid="show-max-checkbox"] .MuiFormControlLabel-label'),
+    showMaxCheckbox: () => cy.get('[data-ngie-testid="show-max-checkbox"] input'),
+    limitNumbersOfResponsesLabel: () => cy.get('[data-ngie-testid="limit-number-of-responses-checkbox"] .MuiFormControlLabel-label'),
+    limitNumbersOfResponsesCheckbox: () => cy.get('[data-ngie-testid="limit-number-of-responses-checkbox"] input'),
+    limitNumbersOfResponsesInputField: () => cy.get('.limit-number-line-response-wrapper .text-input-field input'),
+
+    //Number line section
+    titlePopupAddLabelLabel: () => cy.get('[aria-labelledby="alert-dialog-title"] .inline-text-property-label'),
+    titlePopupAddLabelInputField: () => cy.get('[aria-labelledby="alert-dialog-title"] input'),
+    titlePopupCancelButton: () => cy.get('.compact-popup-action-button-wrapper button').eq(0),
+    titlePopupSaveButton: () => cy.get('.compact-popup-action-button-wrapper button').eq(1),
+    numberLineNumberLineSection: () => cy.get('.number-line-grid-setting .ngie-jxgbox svg'),
+    numberLineAxisNumberLineSection: () => cy.get('.number-line-grid-setting .ngie-jxgbox svg line'),
+    numberLineTitleNumberLineSection: () => cy.get('[class*="LineGraphComponentsstyles__TitleContainer"]'),
+    minLabel: () => cy.get('[class*="LineGraphComponentsstyles__GraphRightLeft"] [class*="LineGraphComponentsstyles__CustomInputFieldLabel"]').eq(0),
+    minInputField: () => cy.get('[class*="LineGraphComponentsstyles__GraphRightLeft"] input').eq(0),
+    maxLabel: () => cy.get('[class*="LineGraphComponentsstyles__GraphRightLeft"] [class*="LineGraphComponentsstyles__CustomInputFieldLabel"]').eq(1),
+    maxInputField: () => cy.get('[class*="LineGraphComponentsstyles__GraphRightLeft"] input').eq(1),
+    intervalLabel: () => cy.get('[class*="LineGridSettingstyles__LineSettingFlexWrapper"] [aria-labelledby="Interval"]'),
+    intervalInputField: () => cy.get('[class*="LineGridSettingstyles__LineSettingFlexWrapper"] input[id="Interval"]'),
+    annotateEveryLabel: () => cy.get('[class*="LineGridSettingstyles__LineSettingFlexWrapper"] [aria-labelledby="Annotate every"]'),
+    annotateEveryInputField: () => cy.get('[class*="LineGridSettingstyles__LineSettingFlexWrapper"] input[id="Annotate every"]'),
+    lineSettingsToggleButtonWrapper: () => cy.get('[class*="LineGridSettingstyles__LineSettingFlexWrapper"] [class*="SingleSelectToggleGroupstyles__ToggleButtonWrapper"]').eq(0),
+    lineSettingsLabel: () => cy.get('[class*="LineGridSettingstyles__LineSettingFlexWrapper"] .single-select-toggle-group-title').eq(0),
+    lineSettingsToggleButton: (ariaLabel = null) => {
+        if (ariaLabel !== null) {
+            return cy.get('[class*="LineGridSettingstyles__LineSettingFlexWrapper"] [class*="SingleSelectToggleGroupstyles__ButtonContainer"]').eq(0).find(`button[aria-label*="${ariaLabel}"]`);
+        } else {
+            return cy.get('[class*="LineGridSettingstyles__LineSettingFlexWrapper"] [class*="SingleSelectToggleGroupstyles__ButtonContainer"]').eq(0).find('button');
+        }
+    },
+    displayNumbersToggleButtonWrapper: () => cy.get('[class*="LineGridSettingstyles__LineSettingFlexWrapper"] [class*="SingleSelectToggleGroupstyles__ToggleButtonWrapper"]').eq(1),
+    displayNumbersLabel: () => cy.get('[class*="LineGridSettingstyles__LineSettingFlexWrapper"] .single-select-toggle-group-title').eq(1),
+    displayNumbersToggleButton: (ariaLabel = null) => {
+        if (ariaLabel !== null) {
+            return cy.get('[class*="LineGridSettingstyles__LineSettingFlexWrapper"] [class*="SingleSelectToggleGroupstyles__ButtonContainer"]').eq(1).find(`button[aria-label*="${ariaLabel}"]`);
+        } else {
+            return cy.get('[class*="LineGridSettingstyles__LineSettingFlexWrapper"] [class*="SingleSelectToggleGroupstyles__ButtonContainer"]').eq(1).find('button');
+        }
+    },
+    displaySpecificAnnotationLabel: () => cy.get('[class*="LineGridSettingstyles__SpecificAnnotationWrapper"] .inline-text-property-label'),
+    displaySpecificAnnotationInputField: () => cy.get('[class*="LineGridSettingstyles__SpecificAnnotationWrapper"] input')
+}
+
+const steps = {
+    verifyLayoutAccordionIsCollapsed: () => {
+        layoutSectionComponent.layoutAccordionButton()
+            .should('have.attr', 'aria-expanded', 'false');
+        layoutSectionComponent.layoutAccordionChevronButton()
+            .should('not.have.class', 'Mui-expanded');
+    },
+
+    verifyLayoutAccordionIsExpanded: () => {
+        layoutSectionComponent.layoutAccordionButton()
+            .should('have.attr', 'aria-expanded', 'true');
+        layoutSectionComponent.layoutAccordionChevronButton()
+            .should('have.class', 'Mui-expanded');
+    },
+
+    expandLayoutAccordion: () => {
+        layoutSectionComponent.layoutAccordionButton()
+            .click();
+        layoutSectionComponent.layoutAccordionButton()
+            .should('have.attr', 'aria-expanded', 'true');
+        layoutSectionComponent.layoutAccordionChevronButton()
+            .should('have.class', 'Mui-expanded');
+    },
+
+    collapseLayoutAccordion: () => {
+        layoutSectionComponent.layoutAccordionButton()
+            .click();
+        layoutSectionComponent.layoutAccordionButton()
+            .should('have.attr', 'aria-expanded', 'false');
+        layoutSectionComponent.layoutAccordionChevronButton()
+            .should('not.have.class', 'Mui-expanded');
+    },
+
+    verifyMakeResponsiveCheckboxChecked: () => {
+        layoutSectionComponent.makeResponsiveCheckboxIcon()
+            .should('have.class', 'icon-ILC-tick-icon');
+    },
+
+    verifyMakeResponsiveCheckboxUnchecked: () => {
+        layoutSectionComponent.makeResponsiveCheckboxIcon()
+            .should('have.class', 'icon-x-circle');
+    },
+
+    checkMakeResponsiveCheckbox: () => {
+        layoutSectionComponent.makeResponsiveCheckboxIcon()
+            .click({ force: true });
+        steps.verifyMakeResponsiveCheckboxChecked();
+    },
+
+    uncheckMakeResponsiveCheckbox: () => {
+        layoutSectionComponent.makeResponsiveCheckboxIcon()
+            .click({ force: true });
+        steps.verifyMakeResponsiveCheckboxUnchecked();
+    },
+
+    /**
+     * Enters the specified value into the input field.
+     * @param {number} value - The value to enter into the input field.
+     */
+    enterTextInWidthInputField: (value) => {
+        layoutSectionComponent.widthInputField()
+            .clear()
+            .type(value);
+    },
+
+    /**
+    * Verifies that the input field has the specified value.
+    * @param {number} value - The expected value of the input field   
+    */
+    verifyTextInWidthInputField: (value) => {
+        layoutSectionComponent.widthInputField()
+            .should('have.value', value);
+    },
+
+    /**
+    * Enters the specified value into the input field.
+    * @param {number} value - The value to enter into the input field.
+    */
+    enterTextInMarginInputField: (value) => {
+        layoutSectionComponent.marginInputField()
+            .clear()
+            .type(value);
+    },
+
+    /**
+    * Verifies that the input field has the specified value.
+    * @param {number} value - The expected value of the input field   
+    */
+    verifyTextInMarginInputField: (value) => {
+        layoutSectionComponent.marginInputField()
+            .should('have.value', value);
+    },
+
+    /**
+    * Enters the specified value into the input field.
+    * @param {number} value - The value to enter into the input field.
+    */
+    enterTextInResponseSpacingInputField: (value) => {
+        layoutSectionComponent.responseSpacingInputField()
+            .clear()
+            .type(value);
+    },
+
+    /**
+    * Verifies that the input field has the specified value.
+    * @param {number} value - The expected value of the input field   
+    */
+    verifyTextInResponseSpacingInputField: (value) => {
+        layoutSectionComponent.responseSpacingInputField()
+            .should('have.value', value);
+    },
+
+    /**
+    * Enters the specified value into the input field.
+    * @param {number} value - The value to enter into the input field.
+    */
+    enterTextInLimitNumberOfResponsesInputField: (value) => {
+        layoutSectionComponent.limitNumbersOfResponsesInputField()
+            .clear()
+            .type(value);
+    },
+
+    /**
+    * Verifies that the input field has the specified value.
+    * @param {number} value - The expected value of the input field   
+    */
+    verifyTextInLimitNumberOfResponsesInputField: (value) => {
+        layoutSectionComponent.limitNumbersOfResponsesInputField()
+            .should('have.value', value);
+    },
+
+    /**
+     * @description Verify that the specified checkbox is checked.
+     * @param {('Stagger response'|'Show labels'|'Show ticks'|'Show min'|'Show max'|'Limit number of responses'|'Show min arrow'|'Show max arrow'|'Stack responses')} checkboxName - The name of the checkbox to verify.
+     */
+    verifyCheckboxChecked: (checkboxName) => {
+        switch (checkboxName) {
+            case 'Show min arrow':
+                layoutSectionComponent.showMinArrowCheckbox()
+                    .should('be.checked');
+                break;
+            case 'Show max arrow':
+                layoutSectionComponent.showMaxArrowCheckbox()
+                    .should('be.checked');
+                break;
+            case 'Stack responses':
+                layoutSectionComponent.stackResponsesCheckbox()
+                    .should('be.checked');
+                break;
+            case 'Stagger response':
+                layoutSectionComponent.staggerResponseCheckbox()
+                    .should('be.checked');
+                break;
+            case 'Show labels':
+                layoutSectionComponent.showLabelsCheckbox()
+                    .should('be.checked');
+                break;
+            case 'Show ticks':
+                layoutSectionComponent.showTicksCheckbox()
+                    .should('be.checked');
+                break;
+            case 'Show min':
+                layoutSectionComponent.showMinCheckbox()
+                    .should('be.checked');
+                break;
+            case 'Show max':
+                layoutSectionComponent.showMaxCheckbox()
+                    .should('be.checked');
+                break;
+            case 'Limit number of responses':
+                layoutSectionComponent.limitNumbersOfResponsesCheckbox()
+                    .should('be.checked');
+                break;
+            default:
+                throw new Error('invalid state string');
+        }
+    },
+
+    /**
+     * @description Verify that the specified checkbox is unchecked.
+     * @param {('Stagger response'|'Show labels'|'Show ticks'|'Show min'|'Show max'|'Limit number of responses'|'Show min arrow'|'Show max arrow'|'Stack responses')} checkboxName - The name of the checkbox to verify.
+     */
+    verifyCheckboxUnchecked: (checkboxName) => {
+        switch (checkboxName) {
+            case 'Show min arrow':
+                layoutSectionComponent.showMinArrowCheckbox()
+                    .should('not.be.checked');
+                break;
+            case 'Show max arrow':
+                layoutSectionComponent.showMaxArrowCheckbox()
+                    .should('not.be.checked');
+                break;
+            case 'Stack responses':
+                layoutSectionComponent.stackResponsesCheckbox()
+                    .should('not.be.checked');
+                break;
+            case 'Stagger response':
+                layoutSectionComponent.staggerResponseCheckbox()
+                    .should('not.be.checked');
+                break;
+            case 'Show labels':
+                layoutSectionComponent.showLabelsCheckbox()
+                    .should('not.be.checked');
+                break;
+            case 'Show ticks':
+                layoutSectionComponent.showTicksCheckbox()
+                    .should('not.be.checked');
+                break;
+            case 'Show min':
+                layoutSectionComponent.showMinCheckbox()
+                    .should('not.be.checked');
+                break;
+            case 'Show max':
+                layoutSectionComponent.showMaxCheckbox()
+                    .should('not.be.checked');
+                break;
+            case 'Limit number of responses':
+                layoutSectionComponent.limitNumbersOfResponsesCheckbox()
+                    .should('not.be.checked');
+                break;
+            default:
+                throw new Error('invalid state string');
+        }
+    },
+
+    /**
+    *@description Checks the specified checkbox
+    * @param {('Stagger response'|'Show labels'|'Show ticks'|'Show min'|'Show max'|'Limit number of responses'|'Show min arrow'|'Show max arrow'|'Stack responses')} checkboxName - The name of the checkbox.
+    */
+    checkCheckbox: (checkboxName) => {
+        switch (checkboxName) {
+            case 'Show min arrow':
+                layoutSectionComponent.showMinArrowCheckbox()
+                    .click()
+                    .should('be.checked');
+                break;
+            case 'Show max arrow':
+                layoutSectionComponent.showMaxArrowCheckbox()
+                    .click()
+                    .should('be.checked');
+                break;
+            case 'Stack responses':
+                layoutSectionComponent.stackResponsesCheckbox()
+                    .click()
+                    .should('be.checked');
+                break;
+            case 'Stagger response':
+                layoutSectionComponent.staggerResponseCheckbox()
+                    .click()
+                    .should('be.checked');
+                break;
+            case 'Show labels':
+                layoutSectionComponent.showLabelsCheckbox()
+                    .click()
+                    .should('be.checked');
+                break;
+            case 'Show ticks':
+                layoutSectionComponent.showTicksCheckbox()
+                    .click()
+                    .should('be.checked');
+                break;
+            case 'Show min':
+                layoutSectionComponent.showMinCheckbox()
+                    .click()
+                    .should('be.checked');
+                break;
+            case 'Show max':
+                layoutSectionComponent.showMaxCheckbox()
+                    .click()
+                    .should('be.checked');
+                break;
+            case 'Limit number of responses':
+                layoutSectionComponent.limitNumbersOfResponsesCheckbox()
+                    .click()
+                    .should('be.checked');
+                break;
+            default:
+                throw new Error('invalid state string');
+        }
+    },
+
+    /**
+     *@description Unchecks the specified checkbox
+     * @param {('Stagger response'|'Show labels'|'Show ticks'|'Show min'|'Show max'|'Limit number of responses'|'Show min arrow'|'Show max arrow'|'Stack responses')} checkboxName - The name of the checkbox.
+     */
+    uncheckCheckbox: (checkboxName) => {
+        switch (checkboxName) {
+            case 'Show min arrow':
+                layoutSectionComponent.showMinArrowCheckbox()
+                    .click()
+                    .should('not.be.checked');
+                break;
+            case 'Show max arrow':
+                layoutSectionComponent.showMaxArrowCheckbox()
+                    .click()
+                    .should('not.be.checked');
+                break;
+            case 'Stack responses':
+                layoutSectionComponent.stackResponsesCheckbox()
+                    .click()
+                    .should('not.be.checked');
+                break;
+            case 'Stagger response':
+                layoutSectionComponent.staggerResponseCheckbox()
+                    .click()
+                    .should('not.be.checked');
+                break;
+            case 'Show labels':
+                layoutSectionComponent.showLabelsCheckbox()
+                    .click()
+                    .should('not.be.checked');
+                break;
+            case 'Show ticks':
+                layoutSectionComponent.showTicksCheckbox()
+                    .click()
+                    .should('not.be.checked');
+                break;
+            case 'Show min':
+                layoutSectionComponent.showMinCheckbox()
+                    .click()
+                    .should('not.be.checked');
+                break;
+            case 'Show max':
+                layoutSectionComponent.showMaxCheckbox()
+                    .click()
+                    .should('not.be.checked');
+                break;
+            case 'Limit number of responses':
+                layoutSectionComponent.limitNumbersOfResponsesCheckbox()
+                    .click()
+                    .should('not.be.checked');
+                break;
+            default:
+                throw new Error('invalid state string');
+        }
+    },
+
+    /**
+     * Clicks on the orientation toggle button with the specified ARIA label and verifies it is selected.
+     * @param {("Horizontal"|"Vertical")} ariaLabel - The ARIA label of the orientation toggle button to select.
+     */
+    selectOrientationToggleButton: (ariaLabel) => {
+        layoutSectionComponent.orientationToggleButton(ariaLabel)
+            .click();
+        steps.verifyOrientationToggleButtonSelected(ariaLabel);
+    },
+
+    /**
+     * Verifies that the toggle button with the specified ARIA label is selected.
+     * @param {("Horizontal"|"Vertical")}} ariaLabel - The ARIA label of the toggle button to verify.
+     */
+    verifyOrientationToggleButtonSelected: (ariaLabel) => {
+        layoutSectionComponent.orientationToggleButton(ariaLabel)
+            .should('have.attr', 'aria-pressed', 'true');
+    },
+
+    /**
+    * Verifies that the toggle button with the specified ARIA label is unselected.
+    * @param {("Horizontal"|"Vertical")}} ariaLabel - The ARIA label of the toggle button to verify.
+    */
+    verifyOrientationToggleButtonUnselected: (ariaLabel) => {
+        layoutSectionComponent.orientationToggleButton(ariaLabel)
+            .should('have.attr', 'aria-pressed', 'false');
+    },
+
+    /**
+     * Verifies the orientation and size of the number line section.
+     * @param {string} orientation - The orientation of the number line section ('Horizontal' or 'Vertical').
+     * @param {string} value - The value representing the width or height of the number line section.
+     */
+    verifyNumberLineOrientationAndSizeNumberLineSection: (orientation, value) => {
+        const isHorizontal = orientation === 'Horizontal';
+        const width = isHorizontal ? value : '120';
+        const height = isHorizontal ? '120' : value;
+        layoutSectionComponent.numberLineNumberLineSection()
+            .should('have.attr', 'width', width)
+            .and('have.attr', 'height', height);
+    },
+
+    /**
+     * 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.
+     */
+    verifyMinArrowVisibilityNumberLineSection: (visibility) => {
+        if (visibility === 'visible') {
+            layoutSectionComponent.numberLineAxisNumberLineSection()
+                .should('have.attr', 'marker-start');
+        }
+        else if (visibility === 'hidden') {
+            layoutSectionComponent.numberLineAxisNumberLineSection()
+                .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.
+     */
+    verifyMaxArrowVisibilityNumberLineSection: (visibility) => {
+        if (visibility === 'visible') {
+            layoutSectionComponent.numberLineAxisNumberLineSection()
+                .should('have.attr', 'marker-end');
+        }
+        else if (visibility === 'hidden') {
+            layoutSectionComponent.numberLineAxisNumberLineSection()
+                .should('not.have.attr', 'marker-end');
+        }
+        else {
+            throw new Error('invalid state string');
+        }
+    },
+
+    /**
+     * Verifies the visibility and text of labels on the number line section.
+     * @param {string} value - The initial value of the labels.
+     * @param {number} interval - The interval between consecutive labels.
+     */
+    verifyLabelsVisibleOnNumberLineNumberLineSection: (value, interval) => {
+        cy.wait(3000);
+        layoutSectionComponent.numberLineNumberLineSection()
+            .parents('.ngie-jxgbox')
+            .find('.number-line-tick-font')
+            .its('length').then((len) => {
+                for (let index = 0; index < len; index++) {
+                    layoutSectionComponent.numberLineNumberLineSection()
+                        .parents('.ngie-jxgbox')
+                        .find('.number-line-tick-font')
+                        .eq(index)
+                        .should('have.text', value);
+                    value += interval;
+                }
+            });
+    },
+
+    verifyLabelsNotVisibleOnNumberLineNumberLineSection: () => {
+        layoutSectionComponent.numberLineNumberLineSection()
+            .parents('.ngie-jxgbox')
+            .find('.number-line-tick-font')
+            .should('not.exist');
+    },
+
+    /**
+    * Enters the specified value into the input field.
+    * @param {number} value - The value to enter into the input field.
+    */
+    enterTextInMinInputField: (value) => {
+        layoutSectionComponent.minInputField()
+            .clear()
+            .type(value)
+            .blur();
+    },
+
+    /**
+    * Verifies that the input field has the specified value.
+    * @param {number} value - The expected value of the input field   
+    */
+    verifyTextInMinInputField: (value) => {
+        layoutSectionComponent.minInputField()
+            .should('have.value', value);
+    },
+
+    /**
+    * Enters the specified value into the input field.
+    * @param {number} value - The value to enter into the input field.
+    */
+    enterTextInMaxInputField: (value) => {
+        layoutSectionComponent.maxInputField()
+            .clear()
+            .type(value);
+    },
+
+    /**
+    * Verifies that the input field has the specified value.
+    * @param {number} value - The expected value of the input field   
+    */
+    verifyTextInMaxInputField: (value) => {
+        layoutSectionComponent.maxInputField()
+            .should('have.value', value);
+    },
+
+    /**
+    * Enters the specified value into the input field.
+    * @param {number} value - The value to enter into the input field.
+    */
+    enterTextInIntervalInputField: (value) => {
+        layoutSectionComponent.intervalInputField()
+            .clear()
+            .type(value);
+    },
+
+    /**
+    * Verifies that the input field has the specified value.
+    * @param {number} value - The expected value of the input field   
+    */
+    verifyTextInIntervalInputField: (value) => {
+        layoutSectionComponent.intervalInputField()
+            .should('have.value', value);
+    },
+
+    /**
+    * Enters the specified value into the input field.
+    * @param {number} value - The value to enter into the input field.
+    */
+    enterTextInAnnotateEveryInputField: (value) => {
+        layoutSectionComponent.annotateEveryInputField()
+            .clear()
+            .type(value);
+    },
+
+    /**
+    * Verifies that the input field has the specified value.
+    * @param {number} value - The expected value of the input field   
+    */
+    verifyTextInAnnotateEveryInputField: (value) => {
+        layoutSectionComponent.annotateEveryInputField()
+            .should('have.value', value);
+    },
+
+    /**
+    * Enters the specified value into the input field.
+    * @param {number} value - The value to enter into the input field.
+    */
+    enterTextInDisplaySpecificAnnotationInputField: (value) => {
+        layoutSectionComponent.displaySpecificAnnotationInputField()
+            .clear()
+            .type(value);
+    },
+
+    /**
+    * Verifies that the input field has the specified value.
+    * @param {number} value - The expected value of the input field   
+    */
+    verifyTextInDisplaySpecificAnnotationInputField: (value) => {
+        layoutSectionComponent.displaySpecificAnnotationInputField()
+            .should('have.value', value);
+    },
+
+    /**
+     * Clicks on the toggle button with the specified ARIA label and verifies it is selected.
+     * @param {string} ariaLabel - The ARIA label of the toggle button to select.
+     */
+    selectDisplayNumbersToggleButton: (ariaLabel) => {
+        layoutSectionComponent.displayNumbersToggleButton(ariaLabel)
+            .click();
+        steps.verifyDisplayNumbersToggleButtonSelected(ariaLabel);
+    },
+
+    /**
+   * Verifies that the toggle button with the specified ARIA label is selected.
+   * @param {string} ariaLabel - The ARIA label of the toggle button to verify.
+   */
+    verifyDisplayNumbersToggleButtonSelected: (ariaLabel) => {
+        layoutSectionComponent.displayNumbersToggleButton(ariaLabel)
+            .should('have.attr', 'aria-pressed', 'true');
+    },
+
+    /**
+    * Verifies that the toggle button with the specified ARIA label is unselected.
+    * @param {string} ariaLabel - The ARIA label of the toggle button to verify.
+    */
+    verifyDisplayNumbersToggleButtonUnselected: (ariaLabel) => {
+        layoutSectionComponent.displayNumbersToggleButton(ariaLabel)
+            .should('have.attr', 'aria-pressed', 'false');
+    },
+
+    /**
+     * Clicks on the toggle button with the specified ARIA label and verifies it is selected.
+     * @param {string} ariaLabel - The ARIA label of the toggle button to select.
+     */
+    selectLineSettingsToggleButton: (ariaLabel) => {
+        layoutSectionComponent.lineSettingsToggleButton(ariaLabel)
+            .click();
+        steps.verifyLineSettingsToggleButtonSelected(ariaLabel);
+    },
+
+    /**
+   * Verifies that the toggle button with the specified ARIA label is selected.
+   * @param {string} ariaLabel - The ARIA label of the toggle button to verify.
+   */
+    verifyLineSettingsToggleButtonSelected: (ariaLabel) => {
+        layoutSectionComponent.lineSettingsToggleButton(ariaLabel)
+            .should('have.attr', 'aria-pressed', 'true');
+    },
+
+    /**
+   * Verifies that the toggle button with the specified ARIA label is unselected.
+   * @param {string} ariaLabel - The ARIA label of the toggle button to verify.
+   */
+    verifyLineSettingsToggleButtonUnselected: (ariaLabel) => {
+        layoutSectionComponent.lineSettingsToggleButton(ariaLabel)
+            .should('have.attr', 'aria-pressed', 'false');
+    },
+
+    /**
+    * Verifies the label on the number line.
+    * @param {Array} values - An array of objects containing the value and index of each label.
+    */
+    verifyLabelOnNumberLineNumberLineSection: (values) => {
+        values.forEach(({ value, index }) => {
+            layoutSectionComponent.numberLineNumberLineSection()
+                .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 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);
+    },
+
+    clickOnNumberLineTitle: () => {
+        layoutSectionComponent.numberLineTitleNumberLineSection()
+            .click();
+    },
+
+    /**
+    * Enters the specified value into the input field.
+    * @param {number} value - The value to enter into the input field.
+    */
+    enterTextInTitlePopupAddLabelInputField: (text) => {
+        layoutSectionComponent.titlePopupAddLabelInputField()
+            .clear()
+            .type(text)
+            .should('have.value', text);
+    },
+
+    /**
+    * Verifies that the input field has the specified value.
+    * @param {number} value - The expected value of the input field   
+    */
+    verifyTextInTitlePopupAddLabelInputField: (text) => {
+        layoutSectionComponent.titlePopupAddLabelInputField()
+            .should('have.value', text);
+    },
+
+    clickOnTitlePopupCancelButton: () => {
+        layoutSectionComponent.titlePopupCancelButton()
+            .click();
+    },
+
+    clickOnTitlePopupSaveButton: () => {
+        layoutSectionComponent.titlePopupSaveButton()
+            .click();
+    },
+
+    /**
+     * Verifies the annotated labels on the number line section.
+     * @param {string} value - The value of the annotated label.
+     * @param {number} annotateEvery - The frequency of annotation.
+     */
+    verifyAnnotatedLabelsOnNumberLineNumberLineSection: (value, annotateEvery) => {
+        cy.wait(3000);
+        layoutSectionComponent.numberLineNumberLineSection()
+            .parents('.ngie-jxgbox')
+            .find('.number-line-tick-font')
+            .each(($element, index) => {
+                if (index % annotateEvery === 0) {
+                    cy.wrap($element).should('have.text', value);
+                    value += annotateEvery;
+                }
+            });
+    },
+
+    verifyDisplayNumbersAndLineSettingsSectionDisabled: () => {
+        utilities.verifyCSS(layoutSectionComponent.lineSettingsToggleButtonWrapper(), {
+            'opacity': '0.4'
+        });
+        utilities.verifyCSS(layoutSectionComponent.displayNumbersToggleButtonWrapper(), {
+            'opacity': '0.4'
+        });
+    },
+
+    verifyDisplayNumbersAndLineSettingsSectionEnabled: () => {
+        utilities.verifyCSS(layoutSectionComponent.lineSettingsToggleButtonWrapper(), {
+            'opacity': '1'
+        });
+        utilities.verifyCSS(layoutSectionComponent.displayNumbersToggleButtonWrapper(), {
+            'opacity': '1'
+        });
+    },
+
+    /**
+    * Enters the specified value into the input field.
+    * @param {number} value - The value to enter into the input field.
+    */
+    enterTextInHeightInputField: (value) => {
+        layoutSectionComponent.heightInputField()
+            .clear()
+            .type(value);
+    },
+
+    /**
+    * Verifies that the input field has the specified value.
+    * @param {number} value - The expected value of the input field   
+    */
+    verifyTextInHeightInputField: (value) => {
+        layoutSectionComponent.heightInputField()
+            .should('have.value', value);
+    }
+}
+
+const tests = {
+    /**
+     * Verifies the content of the layout section based on the orientation.
+     * @param {string} orientation - The orientation of the layout section ('Horizontal' or 'Vertical').
+     */
+    verifyLayoutSectionContent: (orientation) => {
+        const labelCheckboxPairs = [
+            { getLabelElement: layoutSectionComponent.showMinArrowLabel, label: 'Show min arrow', defaultChecked: false },
+            { getLabelElement: layoutSectionComponent.showMaxArrowLabel, label: 'Show max arrow', defaultChecked: false },
+            { getLabelElement: layoutSectionComponent.stackResponsesLabel, label: 'Stack responses', defaultChecked: false },
+            { getLabelElement: layoutSectionComponent.staggerResponseLabel, label: 'Stagger response', defaultChecked: true },
+            { getLabelElement: layoutSectionComponent.showLabelsLabel, label: 'Show labels', defaultChecked: true },
+            { getLabelElement: layoutSectionComponent.showTicksLabel, label: 'Show ticks', defaultChecked: true },
+            { getLabelElement: layoutSectionComponent.showMinLabel, label: 'Show min', defaultChecked: true },
+            { getLabelElement: layoutSectionComponent.showMaxLabel, label: 'Show max', defaultChecked: true },
+            { getLabelElement: layoutSectionComponent.limitNumbersOfResponsesLabel, label: 'Limit number of responses', defaultChecked: true },
+        ];
+
+        it('Layout label should be displayed', () => {
+            utilities.verifyInnerText(layoutSectionComponent.layoutLabel(), 'Layout');
+            utilities.verifyElementVisibilityState(layoutSectionComponent.layoutLabel(), 'visible');
+        });
+
+        it('Layout accordion should be displayed in expanded form', () => {
+            layoutSectionComponent.steps.verifyLayoutAccordionIsExpanded();
+        });
+
+        it('User should be able to collapse and expand the Layout accordion', () => {
+            layoutSectionComponent.steps.collapseLayoutAccordion();
+            layoutSectionComponent.steps.verifyLayoutAccordionIsCollapsed();
+            layoutSectionComponent.steps.expandLayoutAccordion();
+            layoutSectionComponent.steps.verifyLayoutAccordionIsExpanded();
+        });
+
+        it(`Orientation label and 2 toggle buttons ${orientationToggleButton} should be displayed`, () => {
+            utilities.verifyInnerText(layoutSectionComponent.orientationLabel(), 'Orientation');
+            utilities.verifyElementVisibilityState(layoutSectionComponent.orientationLabel(), 'visible');
+            utilities.verifyElementVisibilityState(layoutSectionComponent.orientationToggleButton(), 'visible');
+            utilities.verifyElementCount(layoutSectionComponent.orientationToggleButton(), 2);
+            orientationToggleButton.forEach((label) => {
+                utilities.verifyInnerText(layoutSectionComponent.orientationToggleButton(label), label);
+                utilities.verifyElementVisibilityState(layoutSectionComponent.orientationToggleButton(label), 'visible');
+            });
+        });
+
+        if (orientation === "Horizontal") {
+            it(`Width(px) label and input field should be displayed and by default, input field should have 640 and user should be able to update the value of input field`, () => {
+                utilities.verifyInnerText(layoutSectionComponent.widthLabel(), 'Width (px)');
+                utilities.verifyElementVisibilityState(layoutSectionComponent.widthLabel(), 'visible');
+                layoutSectionComponent.steps.verifyTextInWidthInputField(640);
+                utilities.verifyElementVisibilityState(layoutSectionComponent.widthInputField(), 'visible');
+                layoutSectionComponent.steps.enterTextInWidthInputField(600);
+                layoutSectionComponent.steps.verifyTextInWidthInputField(600);
+            });
+        } else {
+            it(`Height(px) label and input field should be displayed and by default, input field should have 640 and user should be able to update the value of input field`, () => {
+                utilities.verifyInnerText(layoutSectionComponent.heightLabel(), 'Height (px)');
+                utilities.verifyElementVisibilityState(layoutSectionComponent.heightLabel(), 'visible');
+                layoutSectionComponent.steps.verifyTextInHeightInputField(640);
+                utilities.verifyElementVisibilityState(layoutSectionComponent.heightInputField(), 'visible');
+                layoutSectionComponent.steps.enterTextInHeightInputField(600);
+                layoutSectionComponent.steps.verifyTextInHeightInputField(600);
+            });
+        }
+
+        it(`Margin (px) label and input field should be displayed and by default, input field should have 10 and user should be able to update the value of input field`, () => {
+            utilities.verifyInnerText(layoutSectionComponent.marginLabel(), 'Margin (px)');
+            utilities.verifyElementVisibilityState(layoutSectionComponent.marginLabel(), 'visible');
+            layoutSectionComponent.steps.verifyTextInMarginInputField(10);
+            utilities.verifyElementVisibilityState(layoutSectionComponent.marginInputField(), 'visible');
+            layoutSectionComponent.steps.enterTextInMarginInputField(9);
+            layoutSectionComponent.steps.verifyTextInMarginInputField(9);
+        });
+
+        it('Response spacing label and input field should be displayed and by default, input field should have 30 and user should be able to update the value of input field', () => {
+            utilities.verifyInnerText(layoutSectionComponent.responseSpacingLabel(), 'Response spacing');
+            utilities.verifyElementVisibilityState(layoutSectionComponent.responseSpacingLabel(), 'visible');
+            layoutSectionComponent.steps.verifyTextInResponseSpacingInputField(30);
+            utilities.verifyElementVisibilityState(layoutSectionComponent.responseSpacingInputField(), 'visible');
+            layoutSectionComponent.steps.enterTextInResponseSpacingInputField(25);
+            layoutSectionComponent.steps.verifyTextInResponseSpacingInputField(25);
+        });
+
+        it('Make responsive label and slider should be displayed and by default, slider should be checked', () => {
+            utilities.verifyInnerText(layoutSectionComponent.makeResponsiveLabel(), 'Make responsive for mobile');
+            utilities.verifyElementVisibilityState(layoutSectionComponent.makeResponsiveLabel(), 'visible');
+            layoutSectionComponent.steps.verifyMakeResponsiveCheckboxChecked();
+        });
+
+        it('\'What is this?\' label should be displayed and when user hovers over it tooltip should be displayed', () => {
+            utilities.verifyInnerText(layoutSectionComponent.whatIsThisLabel(), 'What is this?');
+        });
+
+        it('User should be able to uncheck Make responsive slider', () => {
+            layoutSectionComponent.steps.uncheckMakeResponsiveCheckbox();
+        });
+
+        labelCheckboxPairs.forEach(({ getLabelElement, label, defaultChecked }) => {
+            it(`${label} label and checkbox should be displayed and by default, checkbox should be ${defaultChecked ? 'checked' : 'unchecked'}`, () => {
+                utilities.verifyInnerText(getLabelElement(), label);
+                utilities.verifyElementVisibilityState(getLabelElement(), 'visible');
+                if (defaultChecked) {
+                    layoutSectionComponent.steps.verifyCheckboxChecked(label);
+                } else {
+                    layoutSectionComponent.steps.verifyCheckboxUnchecked(label);
+                }
+            });
+        });
+
+        it('When Limit number of responses checkbox is checked then input field should be displayed beside the label and input field should have 5 pre-filled in it', () => {
+            layoutSectionComponent.steps.verifyCheckboxChecked('Limit number of responses');
+            utilities.verifyElementVisibilityState(layoutSectionComponent.limitNumbersOfResponsesInputField(), 'visible');
+            layoutSectionComponent.steps.verifyTextInLimitNumberOfResponsesInputField(5);
+        });
+
+        it('CSS of layout section', { tags: 'css' }, () => {
+            utilities.verifyCSS(layoutSectionComponent.layoutLabel(), {
+                'color': css.color.activeButtons,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.bold
+            });
+            utilities.verifyCSS(layoutSectionComponent.layoutAccordionChevronButton(), {
+                'color': css.color.activeButtons,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.regular
+            });
+            if (orientation === "Horizontal") {
+                utilities.verifyCSS(layoutSectionComponent.widthLabel(), {
+                    'color': css.color.labels,
+                    'font-size': css.fontSize.normal,
+                    'font-weight': css.fontWeight.semibold
+                });
+                utilities.verifyCSS(layoutSectionComponent.widthInputField(), {
+                    'color': css.color.text,
+                    'font-size': css.fontSize.default,
+                    'font-weight': css.fontWeight.regular
+                });
+                utilities.verifyCSS(layoutSectionComponent.orientationToggleButton(orientationToggleButton[0]), {
+                    'background-color': css.color.activeButtons,
+                    'color': css.color.primaryBtn,
+                    'font-size': css.fontSize.normal,
+                    'font-weight': css.fontWeight.bold
+                });
+                utilities.verifyCSS(layoutSectionComponent.orientationToggleButton(orientationToggleButton[1]), {
+                    'background-color': css.color.transparent,
+                    'color': css.color.closeIcon,
+                    'font-size': css.fontSize.normal,
+                    'font-weight': css.fontWeight.bold
+                });
+            } else {
+                utilities.verifyCSS(layoutSectionComponent.heightLabel(), {
+                    'color': css.color.labels,
+                    'font-size': css.fontSize.normal,
+                    'font-weight': css.fontWeight.semibold
+                });
+                utilities.verifyCSS(layoutSectionComponent.heightInputField(), {
+                    'color': css.color.text,
+                    'font-size': css.fontSize.default,
+                    'font-weight': css.fontWeight.regular
+                });
+                utilities.verifyCSS(layoutSectionComponent.orientationToggleButton(orientationToggleButton[1]), {
+                    'background-color': css.color.activeButtons,
+                    'color': css.color.primaryBtn,
+                    'font-size': css.fontSize.normal,
+                    'font-weight': css.fontWeight.bold
+                });
+                utilities.verifyCSS(layoutSectionComponent.orientationToggleButton(orientationToggleButton[0]), {
+                    'background-color': css.color.transparent,
+                    'color': css.color.closeIcon,
+                    'font-size': css.fontSize.normal,
+                    'font-weight': css.fontWeight.bold
+                });
+            }
+            utilities.verifyCSS(layoutSectionComponent.makeResponsiveLabel().find('.title-casing'), {
+                'color': css.color.UnselectedToggleButton,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.semibold
+            });
+            layoutSectionComponent.steps.checkMakeResponsiveCheckbox();
+            utilities.verifyCSS(layoutSectionComponent.whatIsThisLabel(), {
+                'color': css.color.activeButtons,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.bold
+            });
+            utilities.verifyCSS(layoutSectionComponent.makeResponsiveCheckbox().parents('.mobile-responsive-wrapper').find('.MuiSwitch-track'), {
+                'background-color': css.color.enabledSwitchBg,
+            });
+            layoutSectionComponent.steps.uncheckMakeResponsiveCheckbox();
+            utilities.verifyCSS(layoutSectionComponent.makeResponsiveCheckbox().parents('.mobile-responsive-wrapper').find('.MuiSwitch-track'), {
+                'background-color': css.color.secondaryBtn,
+            });
+            utilities.verifyCSS(layoutSectionComponent.showMinArrowLabel(), {
+                'color': css.color.labelText,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.regular
+            });
+            utilities.verifyCSS(layoutSectionComponent.orientationLabel(), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.semibold
+            });
+        });
+
+        it('Accessibility of layout contents', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(layoutSectionComponent.layoutLabel().parents('.ngie-accordion'));
+        });
+    },
+
+    /**
+     * Verifies the content of the number line section based on the orientation.
+     * @param {string} orientation - The orientation of the layout section ('Horizontal' or 'Vertical').
+     */
+    verifyNumberLineSectionContent: (orientation) => {
+        const displayNumbersOptions = (orientation === "Horizontal") ? ["Below line", "Above line"] : ["Left of line", "Right of line"];
+
+        it('Number line title and number line should be displayed', () => {
+            utilities.verifyInnerText(layoutSectionComponent.numberLineTitleNumberLineSection(), 'Number line title');
+            utilities.verifyElementVisibilityState(layoutSectionComponent.numberLineTitleNumberLineSection(), 'visible');
+            utilities.verifyElementVisibilityState(layoutSectionComponent.numberLineNumberLineSection(), 'visible');
+        });
+
+        it('Min label and input field should be displayed and by default, input field should have \'-10\' pre-filled in it', () => {
+            utilities.verifyInnerText(layoutSectionComponent.minLabel(), 'Min');
+            utilities.verifyElementVisibilityState(layoutSectionComponent.minLabel(), 'visible');
+            utilities.verifyElementVisibilityState(layoutSectionComponent.minInputField(), 'visible');
+            layoutSectionComponent.steps.verifyTextInMinInputField(-10);
+        });
+
+        it('Max label and input field should be displayed and by default, input field should have \'10\' pre-filled in it', () => {
+            utilities.verifyInnerText(layoutSectionComponent.maxLabel(), 'Max');
+            utilities.verifyElementVisibilityState(layoutSectionComponent.maxLabel(), 'visible');
+            utilities.verifyElementVisibilityState(layoutSectionComponent.maxInputField(), 'visible');
+            layoutSectionComponent.steps.verifyTextInMaxInputField(10);
+        });
+
+        it('Interval label and input field should be displayed and by default, input field should have \'1\' pre-filled in it', () => {
+            utilities.verifyInnerText(layoutSectionComponent.intervalLabel(), 'Interval');
+            utilities.verifyElementVisibilityState(layoutSectionComponent.intervalLabel(), 'visible');
+            utilities.verifyElementVisibilityState(layoutSectionComponent.intervalInputField(), 'visible');
+            layoutSectionComponent.steps.verifyTextInIntervalInputField(1);
+        });
+
+        it('Annotate every label and input field should be displayed and by default, input field should have \'1\' pre-filled in it', () => {
+            utilities.verifyInnerText(layoutSectionComponent.annotateEveryLabel(), 'Annotate every');
+            utilities.verifyElementVisibilityState(layoutSectionComponent.annotateEveryLabel(), 'visible');
+            utilities.verifyElementVisibilityState(layoutSectionComponent.annotateEveryInputField(), 'visible');
+            layoutSectionComponent.steps.verifyTextInAnnotateEveryInputField(1);
+        });
+
+        it(`Display numbers label and 2 options ${displayNumbersOptions} should be displayed and by default, ${displayNumbersOptions[0]} should be selected`, () => {
+            utilities.verifyInnerText(layoutSectionComponent.displayNumbersLabel(), 'Display numbers');
+            utilities.verifyElementVisibilityState(layoutSectionComponent.displayNumbersLabel(), 'visible');
+            utilities.verifyElementVisibilityState(layoutSectionComponent.displayNumbersToggleButton(), 'visible');
+            utilities.verifyElementCount(layoutSectionComponent.displayNumbersToggleButton(), 2);
+            displayNumbersOptions.forEach((label) => {
+                utilities.verifyInnerText(layoutSectionComponent.displayNumbersToggleButton(label), label);
+                utilities.verifyElementVisibilityState(layoutSectionComponent.displayNumbersToggleButton(label), 'visible');
+            });
+            layoutSectionComponent.steps.verifyDisplayNumbersToggleButtonSelected(displayNumbersOptions[0]);
+        });
+
+        it(`Line settings label and 4 options ${lineSettingsOptions} should be displayed and by default ${lineSettingsOptions[0]} should be selected`, () => {
+            utilities.verifyInnerText(layoutSectionComponent.lineSettingsLabel(), 'Line settings');
+            utilities.verifyElementVisibilityState(layoutSectionComponent.lineSettingsLabel(), 'visible');
+            utilities.verifyElementVisibilityState(layoutSectionComponent.lineSettingsToggleButton(), 'visible');
+            utilities.verifyElementCount(layoutSectionComponent.lineSettingsToggleButton(), 4);
+            lineSettingsOptions.forEach((label) => {
+                utilities.verifyInnerText(layoutSectionComponent.lineSettingsToggleButton(label), label);
+                utilities.verifyElementVisibilityState(layoutSectionComponent.lineSettingsToggleButton(label), 'visible');
+            });
+            layoutSectionComponent.steps.verifyLineSettingsToggleButtonSelected(lineSettingsOptions[0]);
+        });
+
+        it('Display specific annotation (use semicolons to separate) label and input field should be displayed and by default input field should be empty', () => {
+            utilities.verifyInnerText(layoutSectionComponent.displaySpecificAnnotationLabel(), 'Display specific annotation (use semicolons to separate)');
+            utilities.verifyElementVisibilityState(layoutSectionComponent.displaySpecificAnnotationLabel(), 'visible');
+            utilities.verifyElementVisibilityState(layoutSectionComponent.displaySpecificAnnotationInputField(), 'visible');
+            layoutSectionComponent.steps.verifyTextInDisplaySpecificAnnotationInputField('');
+        });
+
+        it('CSS of number line section', { tags: 'css' }, () => {
+            utilities.verifyCSS(layoutSectionComponent.numberLineTitleNumberLineSection(), {
+                'color': css.color.activeButtons,
+                'font-size': css.fontSize.heading,
+                'font-weight': css.fontWeight.bold
+            });
+            utilities.verifyCSS(layoutSectionComponent.intervalLabel(), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.semibold
+            });
+            utilities.verifyCSS(layoutSectionComponent.intervalInputField(), {
+                'color': css.color.text,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular
+            });
+            utilities.verifyCSS(layoutSectionComponent.displayNumbersLabel(), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.semibold
+            });
+            utilities.verifyCSS(layoutSectionComponent.displayNumbersToggleButton(displayNumbersOptions[0]), {
+                'background-color': css.color.activeButtons,
+                'color': css.color.primaryBtn,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.bold
+            });
+            utilities.verifyCSS(layoutSectionComponent.displayNumbersToggleButton(displayNumbersOptions[1]), {
+                'background-color': css.color.transparent,
+                'color': css.color.closeIcon,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.bold
+            });
+            utilities.verifyCSS(layoutSectionComponent.displaySpecificAnnotationLabel(), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.semibold
+            });
+            utilities.verifyCSS(layoutSectionComponent.displaySpecificAnnotationInputField(), {
+                'color': css.color.text,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular
+            });
+            utilities.verifyCSS(layoutSectionComponent.lineSettingsLabel(), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.semibold
+            });
+            utilities.verifyCSS(layoutSectionComponent.lineSettingsToggleButton(lineSettingsOptions[1]), {
+                'background-color': css.color.transparent,
+                'color': css.color.closeIcon,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.bold
+            });
+            utilities.verifyCSS(layoutSectionComponent.lineSettingsToggleButton(lineSettingsOptions[0]), {
+                'color': css.color.primaryBtn,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.bold,
+                'background-color': css.color.activeButtons
+            });
+        });
+
+        it('Accessibility of number line section contents', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(layoutSectionComponent.numberLineNumberLineSection().parents('.number-line-grid-setting'));
+        });
+    },
+
+    verifyNumberLineTitlePopupContent: () => {
+        it('When the user clicks on the \'Number line title\' a popup with title \'Number line title\' and \'Add label\' label with input field should be displayed along with \'Save\' and \'Cancel\' button', () => {
+            layoutSectionComponent.steps.clickOnNumberLineTitle();
+            utilities.verifyInnerText(dialogBoxBase.dialogBoxTitle(), 'Number line title');
+            utilities.verifyInnerText(layoutSectionComponent.titlePopupAddLabelLabel(), 'Add title');
+            utilities.verifyElementVisibilityState(layoutSectionComponent.titlePopupAddLabelInputField(), 'visible');
+            utilities.verifyInnerText(layoutSectionComponent.titlePopupSaveButton(), 'Save');
+            utilities.verifyInnerText(layoutSectionComponent.titlePopupCancelButton(), 'Cancel');
+        });
+
+        it('The input field should be prefilled with \'Number line title\' and the user should be able to edit it', () => {
+            layoutSectionComponent.steps.verifyTextInTitlePopupAddLabelInputField('Number line title');
+        });
+    }
+}
+
+export const layoutSectionComponent = {
+    ...selectors,
+    steps,
+    tests
+}