itemengine-cypress-automation 1.0.216 → 1.0.218-numberLineFixes-382e88a.0

package/cypress/pages/components/layoutSectionComponent.js

@@ -1,7 +1,7 @@
 import utilities from "../../support/helpers/utilities";
 import { dialogBoxBase } from "../dialogBoxBase";
 const css = Cypress.env('css');
-const orientationToggleButton = ['Horizontal', 'Vertical'];
+const orientationToggleButton = ['Sideways', 'Upright'];
 const lineSettingsOptions = ['Whole numbers', 'Decimals', 'Fractions', 'Mixed fractions'];
 
 const selectors = {
@@ -30,18 +30,18 @@ const selectors = {
     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'),
+    showMinArrowLabel: () => cy.get('[data-ngie-testid="display-minimum-arrow-checkbox"] .MuiFormControlLabel-label'),
+    showMinArrowCheckbox: () => cy.get('[data-ngie-testid="display-minimum-arrow-checkbox"] input'),
+    showMaxArrowLabel: () => cy.get('[data-ngie-testid="display-maximum-arrow-checkbox"] .MuiFormControlLabel-label'),
+    showMaxArrowCheckbox: () => cy.get('[data-ngie-testid="display-maximum-arrow-checkbox"] input'),
+    stackResponsesLabel: () => cy.get('[data-ngie-testid="stack-segment/ray-checkbox"] .MuiFormControlLabel-label'),
+    stackResponsesCheckbox: () => cy.get('[data-ngie-testid="stack-segment/ray-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'),
+    showLabelsLabel: () => cy.get('[data-ngie-testid="display-values-checkbox"] .MuiFormControlLabel-label'),
+    showLabelsCheckbox: () => cy.get('[data-ngie-testid="display-values-checkbox"] input'),
+    showTicksLabel: () => cy.get('[data-ngie-testid="display-nodes-checkbox"] .MuiFormControlLabel-label'),
+    showTicksCheckbox: () => cy.get('[data-ngie-testid="display-nodes-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'),
@@ -221,19 +221,19 @@ const steps = {
 
     /**
      * @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.
+     * @param {('Stagger response'|'Display values'|'Display nodes'|'Show min'|'Show max'|'Limit number of responses'|'Display minimum arrow'|'Display maximum arrow'|'Stack segment/ray')} checkboxName - The name of the checkbox to verify.
      */
     verifyCheckboxChecked: (checkboxName) => {
         switch (checkboxName) {
-            case 'Show min arrow':
+            case 'Display minimum arrow':
                 layoutSectionComponent.showMinArrowCheckbox()
                     .should('be.checked');
                 break;
-            case 'Show max arrow':
+            case 'Display maximum arrow':
                 layoutSectionComponent.showMaxArrowCheckbox()
                     .should('be.checked');
                 break;
-            case 'Stack responses':
+            case 'Stack segment/ray':
                 layoutSectionComponent.stackResponsesCheckbox()
                     .should('be.checked');
                 break;
@@ -241,11 +241,11 @@ const steps = {
                 layoutSectionComponent.staggerResponseCheckbox()
                     .should('be.checked');
                 break;
-            case 'Show labels':
+            case 'Display values':
                 layoutSectionComponent.showLabelsCheckbox()
                     .should('be.checked');
                 break;
-            case 'Show ticks':
+            case 'Display nodes':
                 layoutSectionComponent.showTicksCheckbox()
                     .should('be.checked');
                 break;
@@ -268,19 +268,19 @@ const steps = {
 
     /**
      * @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.
+     * @param {('Stagger response'|'Display values'|'Display nodes'|'Show min'|'Show max'|'Limit number of responses'|'Display minimum arrow'|'Display maximum arrow'|'Stack segment/ray')} checkboxName - The name of the checkbox to verify.
      */
     verifyCheckboxUnchecked: (checkboxName) => {
         switch (checkboxName) {
-            case 'Show min arrow':
+            case 'Display minimum arrow':
                 layoutSectionComponent.showMinArrowCheckbox()
                     .should('not.be.checked');
                 break;
-            case 'Show max arrow':
+            case 'Display maximum arrow':
                 layoutSectionComponent.showMaxArrowCheckbox()
                     .should('not.be.checked');
                 break;
-            case 'Stack responses':
+            case 'Stack segment/ray':
                 layoutSectionComponent.stackResponsesCheckbox()
                     .should('not.be.checked');
                 break;
@@ -288,11 +288,11 @@ const steps = {
                 layoutSectionComponent.staggerResponseCheckbox()
                     .should('not.be.checked');
                 break;
-            case 'Show labels':
+            case 'Display values':
                 layoutSectionComponent.showLabelsCheckbox()
                     .should('not.be.checked');
                 break;
-            case 'Show ticks':
+            case 'Display nodes':
                 layoutSectionComponent.showTicksCheckbox()
                     .should('not.be.checked');
                 break;
@@ -315,21 +315,21 @@ const steps = {
 
     /**
     *@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.
+    * @param {('Stagger response'|'Display values'|'Display nodes'|'Show min'|'Show max'|'Limit number of responses'|'Display minimum arrow'|'Display maximum arrow'|'Stack segment/ray')} checkboxName - The name of the checkbox.
     */
     checkCheckbox: (checkboxName) => {
         switch (checkboxName) {
-            case 'Show min arrow':
+            case 'Display minimum arrow':
                 layoutSectionComponent.showMinArrowCheckbox()
                     .click()
                     .should('be.checked');
                 break;
-            case 'Show max arrow':
+            case 'Display maximum arrow':
                 layoutSectionComponent.showMaxArrowCheckbox()
                     .click()
                     .should('be.checked');
                 break;
-            case 'Stack responses':
+            case 'Stack segment/ray':
                 layoutSectionComponent.stackResponsesCheckbox()
                     .click()
                     .should('be.checked');
@@ -339,12 +339,12 @@ const steps = {
                     .click()
                     .should('be.checked');
                 break;
-            case 'Show labels':
+            case 'Display values':
                 layoutSectionComponent.showLabelsCheckbox()
                     .click()
                     .should('be.checked');
                 break;
-            case 'Show ticks':
+            case 'Display nodes':
                 layoutSectionComponent.showTicksCheckbox()
                     .click()
                     .should('be.checked');
@@ -371,21 +371,21 @@ const steps = {
 
     /**
      *@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.
+     * @param {('Stagger response'|'Display values'|'Display nodes'|'Show min'|'Show max'|'Limit number of responses'|'Display minimum arrow'|'Display maximum arrow'|'Stack segment/ray')} checkboxName - The name of the checkbox.
      */
     uncheckCheckbox: (checkboxName) => {
         switch (checkboxName) {
-            case 'Show min arrow':
+            case 'Display minimum arrow':
                 layoutSectionComponent.showMinArrowCheckbox()
                     .click()
                     .should('not.be.checked');
                 break;
-            case 'Show max arrow':
+            case 'Display maximum arrow':
                 layoutSectionComponent.showMaxArrowCheckbox()
                     .click()
                     .should('not.be.checked');
                 break;
-            case 'Stack responses':
+            case 'Stack segment/ray':
                 layoutSectionComponent.stackResponsesCheckbox()
                     .click()
                     .should('not.be.checked');
@@ -395,12 +395,12 @@ const steps = {
                     .click()
                     .should('not.be.checked');
                 break;
-            case 'Show labels':
+            case 'Display values':
                 layoutSectionComponent.showLabelsCheckbox()
                     .click()
                     .should('not.be.checked');
                 break;
-            case 'Show ticks':
+            case 'Display nodes':
                 layoutSectionComponent.showTicksCheckbox()
                     .click()
                     .should('not.be.checked');
@@ -427,7 +427,7 @@ const steps = {
 
     /**
      * 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.
+     * @param {("Sideways"|"Upright")} ariaLabel - The ARIA label of the orientation toggle button to select.
      */
     selectOrientationToggleButton: (ariaLabel) => {
         layoutSectionComponent.orientationToggleButton(ariaLabel)
@@ -437,7 +437,7 @@ const steps = {
 
     /**
      * 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.
+     * @param {("Sideways"|"Upright")}} ariaLabel - The ARIA label of the toggle button to verify.
      */
     verifyOrientationToggleButtonSelected: (ariaLabel) => {
         layoutSectionComponent.orientationToggleButton(ariaLabel)
@@ -446,7 +446,7 @@ const steps = {
 
     /**
     * 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.
+    * @param {("Sideways"|"Upright")}} ariaLabel - The ARIA label of the toggle button to verify.
     */
     verifyOrientationToggleButtonUnselected: (ariaLabel) => {
         layoutSectionComponent.orientationToggleButton(ariaLabel)
@@ -455,11 +455,11 @@ const steps = {
 
     /**
      * 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} orientation - The orientation of the number line section ('Sideways' or 'Upright').
      * @param {string} value - The value representing the width or height of the number line section.
      */
     verifyNumberLineOrientationAndSizeNumberLineSection: (orientation, value) => {
-        if (orientation === 'Horizontal') {
+        if (orientation === 'Sideways') {
             layoutSectionComponent.numberLineNumberLineSection()
                 .should('have.attr', 'width', value)
         } else {
@@ -509,16 +509,18 @@ const steps = {
 
     /**
      * Verifies the visibility and text of labels on the number line section.
-     * @param {string} value - The initial value of the labels.
+     * @param {string} min - The initial value of the labels.
      * @param {number} interval - The interval between consecutive labels.
      */
-    verifyLabelsVisibleOnNumberLineNumberLineSection: (value, interval) => {
+    verifyLabelsVisibleOnNumberLineNumberLineSection: (min, 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++) {
+                const length = len - 3;
+                let value = min + 1;
+                for (let index = 0; index < length; index++) {
                     layoutSectionComponent.numberLineNumberLineSection()
                         .parents('.ngie-jxgbox')
                         .find('.number-line-tick-font')
@@ -526,6 +528,16 @@ const steps = {
                         .should('have.text', value);
                     value += interval;
                 }
+                layoutSectionComponent.numberLineNumberLineSection()
+                    .parents('.ngie-jxgbox')
+                    .find('.number-line-tick-font')
+                    .eq(len - 2)
+                    .should('have.text', min);
+                layoutSectionComponent.numberLineNumberLineSection()
+                    .parents('.ngie-jxgbox')
+                    .find('.number-line-tick-font')
+                    .eq(len - 1)
+                    .should('have.text', `${value + 1}`);
             });
     },
 
@@ -802,15 +814,15 @@ const steps = {
 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').
+     * @param {string} orientation - The orientation of the layout section ('Sideways' or 'Upright').
      */
     verifyLayoutSectionContent: (orientation) => {
         const labelCheckboxPairs = [
-            { getLabelElement: layoutSectionComponent.showMinArrowLabel, label: 'Show min arrow', defaultChecked: false },
-            { getLabelElement: layoutSectionComponent.showMaxArrowLabel, label: 'Show max arrow', defaultChecked: false },
+            { getLabelElement: layoutSectionComponent.showMinArrowLabel, label: 'Display minimum arrow', defaultChecked: false },
+            { getLabelElement: layoutSectionComponent.showMaxArrowLabel, label: 'Display maximum arrow', 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.showLabelsLabel, label: 'Display values', defaultChecked: true },
+            { getLabelElement: layoutSectionComponent.showTicksLabel, label: 'Display nodes', 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 },
@@ -833,7 +845,7 @@ const tests = {
         });
 
         it(`Orientation label and 2 toggle buttons ${orientationToggleButton} should be displayed`, () => {
-            utilities.verifyInnerText(layoutSectionComponent.orientationLabel(), 'Orientation');
+            utilities.verifyInnerText(layoutSectionComponent.orientationLabel(), 'Direction');
             utilities.verifyElementVisibilityState(layoutSectionComponent.orientationLabel(), 'visible');
             utilities.verifyElementVisibilityState(layoutSectionComponent.orientationToggleButton(), 'visible');
             utilities.verifyElementCount(layoutSectionComponent.orientationToggleButton(), 2);
@@ -843,7 +855,7 @@ const tests = {
             });
         });
 
-        if (orientation === "Horizontal") {
+        if (orientation === "Sideways") {
             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');
@@ -915,7 +927,7 @@ const tests = {
                 'font-size': css.fontSize.normal,
                 'font-weight': css.fontWeight.regular
             });
-            if (orientation === "Horizontal") {
+            if (orientation === "Sideways") {
                 utilities.verifyCSS(layoutSectionComponent.widthLabel(), {
                     'color': css.color.labels,
                     'font-size': css.fontSize.normal,
@@ -999,10 +1011,10 @@ const tests = {
 
     /**
      * Verifies the content of the number line section based on the orientation.
-     * @param {string} orientation - The orientation of the layout section ('Horizontal' or 'Vertical').
+     * @param {string} orientation - The orientation of the layout section ('Sideways' or 'Upright').
      */
     verifyNumberLineSectionContent: (orientation) => {
-        const displayNumbersOptions = (orientation === "Horizontal") ? ["Below line", "Above line"] : ["Left of line", "Right of line"];
+        const displayNumbersOptions = (orientation === "Sideways") ? ["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');