itemengine-cypress-automation 1.0.493-update-script-deb721f.0 → 1.0.496-IEI-3121-3c97b0a.0

package/cypress/config-files/ilprod.json

@@ -5,7 +5,7 @@
         "GRAPHQL_URL": "/api/graphql",
         "SANDBOX_GRAPHQL_SERVICES_URL": "https://itemengine-sandbox-graph.itemengine-prod.il-apps.com/api/graphql",
         "SANDBOX_SERVICES_URL": "https://sandbox.itemengine-prod.il-apps.com",
-        "SERVICES_URL": "https://itemengine-graph.itemengine-prod.il-apps.com",
+        "SERVICES_URL": "https://itemengine-graph-api.itemengine-prod.il-apps.com",
         "AUTH_URL": "https://itemengine-sandbox-auth.itemengine-prod.il-apps.com/api/auth",
         "scriptSrc": "https://assets.itemengine-prod.il-apps.com/Author.loader.js",
         "admin_username": "demouser-ilc",

package/cypress/e2e/ILC/NumberLine/thousandSeparatorSection.js

@@ -0,0 +1,51 @@
+import { numberLinePage } from "../../../pages";
+import abortEarlySetup from "../../../support/helpers/abortEarly";
+
+describe('Create item - Number line : Thousands separator section', () => {
+
+    before(() => {
+        cy.loginAs('admin');
+    });
+
+    describe('Thousands separator - Edit tab content', () => {
+        abortEarlySetup();
+        before(() => {
+            numberLinePage.steps.navigateToCreateQuestion('Number line');
+            cy.barsPreLoaderWait();
+            numberLinePage.steps.addTextInQuestionInstructionsInputField('Plot points on the number line');
+        });
+
+        numberLinePage.tests.verifyThousandSeparatorContent();
+    });
+
+    describe('Thousands separator - Edit tab functionality', () => {
+        abortEarlySetup();
+        before(() => {
+            numberLinePage.steps.navigateToCreateQuestion('Number line');
+            cy.barsPreLoaderWait();
+            numberLinePage.steps.addTextInQuestionInstructionsInputField('Plot points on the number line');
+            numberLinePage.steps.enterTextInIntervalInputField(500);
+            numberLinePage.steps.enterTextInAnnotateEveryInputField(10);
+            numberLinePage.steps.enterTextInMinInputField(1000.5);
+            numberLinePage.steps.enterTextInMaxInputField(10000.5);
+        });
+
+        numberLinePage.tests.verifyThousandSeparatorFunctionality();
+    });
+
+    describe('Thousands separator - Preview tab functionality', () => {
+        abortEarlySetup();
+        before(() => {
+            numberLinePage.steps.navigateToCreateQuestion('Number line');
+            cy.barsPreLoaderWait();
+            numberLinePage.steps.addTextInQuestionInstructionsInputField('Plot points on the number line');
+            numberLinePage.steps.enterTextInIntervalInputField(500);
+            numberLinePage.steps.enterTextInAnnotateEveryInputField(10);
+            numberLinePage.steps.enterTextInMinInputField(1000.5);
+            numberLinePage.steps.enterTextInMaxInputField(10000.5);
+            numberLinePage.steps.switchToPreviewTab();
+        });
+
+        numberLinePage.tests.verifyThousandSeparatorPreviewTabFunctionality();
+    });
+});

package/cypress/e2e/ILC/NumberLineLabel/thousandSeparatorSection.js

@@ -0,0 +1,54 @@
+import { numberLineLabelPage } from "../../../pages";
+import abortEarlySetup from "../../../support/helpers/abortEarly";
+
+describe('Create item - Number line : Thousands separator section', () => {
+
+    before(() => {
+        cy.loginAs('admin');
+    });
+
+    describe('Thousands separator - Edit tab content', () => {
+        abortEarlySetup();
+        before(() => {
+            numberLineLabelPage.steps.navigateToCreateQuestion('Number line');
+            cy.barsPreLoaderWait();
+            numberLineLabelPage.steps.navigateToLabelNumberLineTab();
+            numberLineLabelPage.steps.addTextInQuestionInstructionsInputField('Label on the number line');
+        });
+
+        numberLineLabelPage.tests.verifyThousandSeparatorContent();
+    });
+
+    describe('Thousands separator - Edit tab functionality', () => {
+        abortEarlySetup();
+        before(() => {
+            numberLineLabelPage.steps.navigateToCreateQuestion('Number line');
+            cy.barsPreLoaderWait();
+            numberLineLabelPage.steps.navigateToLabelNumberLineTab();
+            numberLineLabelPage.steps.addTextInQuestionInstructionsInputField('Label on the number line');
+            numberLineLabelPage.steps.enterTextInIntervalInputField(500);
+            numberLineLabelPage.steps.enterTextInAnnotateEveryInputField(10);
+            numberLineLabelPage.steps.enterTextInMinInputField(1000.5);
+            numberLineLabelPage.steps.enterTextInMaxInputField(10000.5);
+        });
+
+        numberLineLabelPage.tests.verifyThousandSeparatorFunctionality();
+    });
+
+    describe('Thousands separator - Preview tab functionality', () => {
+        abortEarlySetup();
+        before(() => {
+            numberLineLabelPage.steps.navigateToCreateQuestion('Number line');
+            cy.barsPreLoaderWait();
+            numberLineLabelPage.steps.navigateToLabelNumberLineTab();
+            numberLineLabelPage.steps.addTextInQuestionInstructionsInputField('Label on the number line');
+            numberLineLabelPage.steps.enterTextInIntervalInputField(500);
+            numberLineLabelPage.steps.enterTextInAnnotateEveryInputField(10);
+            numberLineLabelPage.steps.enterTextInMinInputField(1000.5);
+            numberLineLabelPage.steps.enterTextInMaxInputField(10000.5);
+            numberLineLabelPage.steps.switchToPreviewTab();
+        });
+
+        numberLineLabelPage.tests.verifyThousandSeparatorPreviewTabFunctionality();
+    });
+});

package/cypress/pages/components/numberLineCommonComponent.js

@@ -2,8 +2,13 @@ import utilities from "../../support/helpers/utilities";
 import { createQuestionBasePage } from "./createQuestionBasePage";
 import { layoutSectionComponent } from "./layoutSectionComponent";
 import { commonComponents } from "./commonComponents";
-const lineSettingsOptions = ['Integers', 'Decimals', 'Fractions', 'Mixed fractions'];
+const lineSettingsOptions = ['Decimals', 'Fractions', 'Mixed fractions', 'Integers'];
 const numbers = ['-9.50', "-\n19\n2", "-9\n1\n2"]
+const thousandsSeparatorOptions = ['Comma', 'Space', 'None'];
+const decimalValues =['6,000.5', '6 000.5', '6000.5']
+const fractionValues =['12001\n2', '12001\n2', '12001\n2']
+const mixedFractionValues =['6,000\n1\n2', '6 000\n1\n2', '6000\n1\n2']
+const integerNumberValues =['1,000.5', '1 000.5', '1000.5']
 
 const selectors = {
     ...layoutSectionComponent,
@@ -30,6 +35,13 @@ const selectors = {
     // toleranceThresholdInputField: () => cy.get('[class*="AllocatedPointsstyles__PointsWrapper"] input'),
     pointsInputField: () => cy.get('.ngie-accordion-detail .points-input-field input[type="text"]'),
     pointsInputFieldForManualScoring: () => cy.get('.points-input-field input[type="text"]'),
+
+    //thousand separator section
+    thousandSeparatorLabel: () => cy.get('.number-line-grid-setting .single-select-toggle-group-title').eq(2),
+    thousandSeparatorToggleButtonContainer: () => cy.get('.number-line-grid-setting [class*="SingleSelectToggleGroupstyles__ButtonContainer"]').eq(2),
+    thousandSeparatorToggleButton: (ariaLabel) => {
+        return cy.get(`div[role="group"] button[aria-label="Thousands separator ${ariaLabel}"]`);
+    },
 }
 
 const steps = {
@@ -392,6 +404,123 @@ const steps = {
             .blur();
     },
 
+    /**
+     * Verifies that the toggle button with the specified ARIA label is selected.
+     * @param {string} ariaLabel - The ARIA label of the toggle button to verify.
+     */
+    verifyThousandSeparatorToggleButtonSelected: (ariaLabel) => {
+        numberLineCommonComponent.thousandSeparatorToggleButton(ariaLabel)
+            .should('have.attr', 'aria-pressed', 'true');
+    },
+
+    /**
+     * Selects the toggle button with the specified ARIA label.
+     * @param {string} ariaLabel - The ARIA label of the toggle button to select.
+     */
+    selectThousandSeparatorToggleButton: (ariaLabel) => {
+        numberLineCommonComponent.thousandSeparatorToggleButton(ariaLabel)
+            .click();
+    },
+
+    /**
+    * Verifies the label on the number line.
+    * @param {Array} values - An array of objects containing the value and index of each label.
+    */
+    verifyThousandSeparatorLabelOnNumberLineNumberLineSection: (values) => {
+        values.forEach(({ value, index }) => {
+            utilities.verifyInnerText(numberLineCommonComponent.numberLineNumberLineSection()
+                .parents('.ngie-jxgbox')
+                .find('.number-line-tick-font')
+                .eq(index)
+                , value
+            );
+        });
+    },
+
+    /**
+    * Verifies the label on the number line PreviewTab.
+    * @param {Array} values - An array of objects containing the value and index of each label.
+    */
+    verifyThousandSeparatorLabelOnNumberLineNumberLineSectionPreviewTab: (values) => {
+        values.forEach(({ value, index }) => {
+            utilities.verifyInnerText(numberLineCommonComponent.numberLinePreviewTab()
+                .parents('.ngie-jxgbox')
+                .find('.number-line-tick-font')
+                .eq(index)
+                , value
+            );
+        });
+    },
+
+    /**
+    * Verifies the label on the number line in specify correct answer section.
+    * @param {Array} values - An array of objects containing the value and index of each label.
+    */
+    verifyThousandSeparatorLabelOnNumberLineSpecifyCorrectAnswerSection: (values) => {
+        values.forEach(({ value, index }) => {
+            utilities.verifyInnerText(numberLineCommonComponent.numberLineSpecifyCorrectAnswer()
+                .parents('.ngie-jxgbox')
+                .find('.number-line-tick-font')
+                .eq(index)
+                , value
+            );
+        });
+    },
+
+    /**
+    * Returns the value and its corresponding index on the number line 
+    * based on the selected line settings option and inner index.
+    *
+    * @param {string} option - The selected line settings option ('Decimals', 'Fractions', etc.).
+    * @param {number} innerIndex - The index used to retrieve the correct value from the data array.
+    * @returns {{ value: string, index: number } | null} An object containing the value and index, or null if option is unrecognized.
+    */
+    getThousandSeparatorValue:(option, innerIndex) =>{
+        switch (option) {
+            case 'Integers':
+                return { value: integerNumberValues[innerIndex], index: 0 };
+            case 'Decimals':
+                return { value: decimalValues[innerIndex], index: 10 };
+            case 'Fractions':
+                return { value: fractionValues[innerIndex], index: 10 };
+            case 'Mixed fractions':
+                return { value: mixedFractionValues[innerIndex], index: 10 };
+            default:
+                console.log(`Unrecognized option: ${option}`);
+        }
+    },
+
+    /**
+    * Verifies the presence of the correct thousand separator label in one or more UI sections
+    * based on the selected line settings option and inner index.
+    *
+    * @param {string} option - The selected line settings option ('Decimals', 'Fractions', etc.).
+    * @param {number} innerIndex - The index used to retrieve the correct value from the data array.
+    * @param {string[]} sections - The list of sections to perform verification in.
+    *        Valid values: ['preview', 'numberLine', 'correctAnswer']
+    */
+    verifyThousandSeparatorForSections: (option, innerIndex, sections = []) => {
+        const valueObj = numberLineCommonComponent.steps.getThousandSeparatorValue(option, innerIndex);
+        if (!valueObj) return;
+
+        sections.forEach((section) => {
+            switch (section) {
+                case 'preview':
+                    numberLineCommonComponent.steps.verifyThousandSeparatorLabelOnNumberLineNumberLineSectionPreviewTab([valueObj]);
+                    break;
+                case 'numberLine':
+                    numberLineCommonComponent.steps.verifyThousandSeparatorLabelOnNumberLineNumberLineSection([valueObj]);
+                    break;
+                case 'correctAnswer':
+                    numberLineCommonComponent.steps.verifyThousandSeparatorLabelOnNumberLineSpecifyCorrectAnswerSection([valueObj]);
+                    break;
+                default:
+                    console.log(`Unknown verification section: ${section}`);
+                    break;
+            }
+        });
+    },
+
 }
 
 const tests = {
@@ -758,7 +887,7 @@ const tests = {
         });
 
         it('When user enters value in Display specific annotation (use semicolons to separate) input field then it should be displayed on number line in Number line section and Specify correct answer section', () => {
-            numberLineCommonComponent.steps.selectLineSettingsToggleButton(lineSettingsOptions[1]);
+            numberLineCommonComponent.steps.selectLineSettingsToggleButton(lineSettingsOptions[0]);
             numberLineCommonComponent.steps.enterTextInDisplaySpecificAnnotationInputField('-9.25;');
             numberLineCommonComponent.steps.verifyTextInDisplaySpecificAnnotationInputField('-9.25;');
             cy.wait(200);
@@ -789,7 +918,7 @@ const tests = {
 
         it('When user enters value in Display specific annotation (use semicolons to separate) input field then it should be displayed on number line in preview tab', () => {
             numberLineCommonComponent.steps.switchToEditTab();
-            numberLineCommonComponent.steps.selectLineSettingsToggleButton(lineSettingsOptions[1]);
+            numberLineCommonComponent.steps.selectLineSettingsToggleButton(lineSettingsOptions[0]);
             numberLineCommonComponent.steps.enterTextInDisplaySpecificAnnotationInputField('-9.25;');
             numberLineCommonComponent.steps.verifyTextInDisplaySpecificAnnotationInputField('-9.25;');
             numberLineCommonComponent.steps.switchToPreviewTab();
@@ -819,6 +948,49 @@ const tests = {
     //         numberLineCommonComponent.steps.setToleranceThresholdValue(2);
     //     });
     // }
+
+    verifyThousandSeparatorContent: () => {
+        it(`Thousand separator label and 3 options ${thousandsSeparatorOptions} should be displayed and by default ${thousandsSeparatorOptions[0]} should be selected`, () => {
+            utilities.verifyInnerText(numberLineCommonComponent.thousandSeparatorLabel(), 'Thousands separator');
+            utilities.verifyElementVisibilityState(numberLineCommonComponent.thousandSeparatorLabel(), 'visible');
+            utilities.verifyElementVisibilityState(numberLineCommonComponent.thousandSeparatorToggleButtonContainer(), 'visible');
+            thousandsSeparatorOptions.forEach((label) => {
+                utilities.verifyInnerText(numberLineCommonComponent.thousandSeparatorToggleButton(label), label);
+                utilities.verifyElementVisibilityState(numberLineCommonComponent.thousandSeparatorToggleButton(label), 'visible');
+            });
+            numberLineCommonComponent.steps.verifyThousandSeparatorToggleButtonSelected(thousandsSeparatorOptions[2]);
+        });
+    },
+
+    verifyThousandSeparatorFunctionality: () => {
+        lineSettingsOptions.forEach((option, index) => {
+            thousandsSeparatorOptions.forEach((thousandsOption, innerIndex) => {
+                it(`When user selects ${option} in line settings section and selects ${thousandsOption} in thousands separator section, then number displayed on number line should be updated to ${thousandsOption} in number line section and specify correct answer section`, () => {
+                    numberLineCommonComponent.steps.selectLineSettingsToggleButton(option);
+                    numberLineCommonComponent.steps.verifyLineSettingsToggleButtonSelected(option);
+                    numberLineCommonComponent.steps.selectThousandSeparatorToggleButton(thousandsOption);
+                    numberLineCommonComponent.steps.verifyThousandSeparatorToggleButtonSelected(thousandsOption);
+                    numberLineCommonComponent.steps.verifyThousandSeparatorForSections(option, innerIndex, ['numberLine', 'correctAnswer']);
+                });
+            });
+        });
+    },
+
+    verifyThousandSeparatorPreviewTabFunctionality: () => {
+        lineSettingsOptions.forEach((option, index) => {
+            thousandsSeparatorOptions.forEach((thousandsOption, innerIndex) => {
+                it(`When user selects ${option} in line settings section and selects ${thousandsOption} in thousands separator section, then number displayed on number line should be updated to ${thousandsOption} in preview tab`, () => {
+                    numberLineCommonComponent.steps.switchToEditTab();
+                    numberLineCommonComponent.steps.selectLineSettingsToggleButton(option);
+                    numberLineCommonComponent.steps.verifyLineSettingsToggleButtonSelected(option);
+                    numberLineCommonComponent.steps.selectThousandSeparatorToggleButton(thousandsOption);
+                    numberLineCommonComponent.steps.verifyThousandSeparatorToggleButtonSelected(thousandsOption);
+                    numberLineCommonComponent.steps.switchToPreviewTab();
+                    numberLineCommonComponent.steps.verifyThousandSeparatorForSections(option, innerIndex, ['preview']);
+                });
+            });
+        });
+    }
 }
 
 export const numberLineCommonComponent = {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "itemengine-cypress-automation",
-  "version": "1.0.493-update-script-deb721f.0",
+  "version": "1.0.496-IEI-3121-3c97b0a.0",
   "description": "",
   "main": "index.js",
   "scripts": {