itemengine-cypress-automation 1.0.185-repoUpdate26April-b17eb46.0 → 1.0.186-packageUpdate-5632086.0

package/cypress/pages/components/layoutSectionComponent.js

@@ -1,1191 +0,0 @@
-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
-}