itemengine-cypress-automation 1.0.204-graphQLUpdate-b0c0036.0 → 1.0.204

package/cypress/e2e/ILC/chartsDotsPlot/allOrNothingForAllViews.smoke.js

@@ -382,14 +382,14 @@ describe('Create Item page - Charts - Dot: All or nothing ', () => {
                 chartsDotPlotPage.steps.allotMinimumPoints(2);
                 chartsDotPlotPage.steps.switchToPreviewTab();
                 chartsDotPlotPage.steps.switchToGradingView();
-                chartsDotPlotPage.steps.verifyPreviewScore(2, 20);
+                chartsDotPlotPage.steps.verifyPreviewScore(2, 10);
                 chartsDotPlotPage.steps.verifyQuestionPreviewStateWhenSwitchingBackToStudentView();
             });
 
             it('When the user has selected \'Award minimum score\' from the minimum scoring dropdown, attempts the question incorrectly and switches to grading view, the user should be awarded with minimum points', () => {
                 chartsDotPlotPage.steps.resetQuestionPreview();
                 chartsDotPlotPage.steps.plotDotsInDotColumnPreviewTab(2, { point: 3, min: 1, interval: 0.25 });
-                chartsDotPlotPage.steps.verifyPreviewScore(2, 20);
+                chartsDotPlotPage.steps.verifyPreviewScore(2, 10);
                 chartsDotPlotPage.steps.verifyQuestionPreviewStateWhenSwitchingBackToStudentView();
             });
 
@@ -400,14 +400,14 @@ describe('Create Item page - Charts - Dot: All or nothing ', () => {
                 chartsDotPlotPage.steps.allotMinimumPoints(2);
                 chartsDotPlotPage.steps.switchToPreviewTab();
                 chartsDotPlotPage.steps.switchToGradingView();
-                chartsDotPlotPage.steps.verifyPreviewScore(0, 20);
+                chartsDotPlotPage.steps.verifyPreviewScore(0, 10);
                 chartsDotPlotPage.steps.verifyQuestionPreviewStateWhenSwitchingBackToStudentView();
             });
 
             it('When the user has selected \'Award minimum score\' from the minimum scoring dropdown, attempts the question incorrectly and switches to grading view, the user should be awarded with minimum points', () => {
                 chartsDotPlotPage.steps.resetQuestionPreview();
                 chartsDotPlotPage.steps.plotDotsInDotColumnPreviewTab(2, { point: 3, min: 1, interval: 0.25, defaultDots });
-                chartsDotPlotPage.steps.verifyPreviewScore(2, 20);
+                chartsDotPlotPage.steps.verifyPreviewScore(2, 10);
             });
         });
     };

package/cypress/e2e/ILC/chartsDotsPlot/dotTypeFunctionality.js

@@ -0,0 +1,235 @@
+
+import { chartsDotPlotPage, dialogBoxBase } from "../../../pages";
+import utilities from "../../../support/helpers/utilities";
+import abortEarlySetup from "../../../support/helpers/abortEarly";
+
+describe('Dot plot - Dot type and Label options', () => {
+    before(() => {
+        cy.loginAs('admin');
+    });
+
+    describe('Dot type - content and edit tab functionality', () => {
+        abortEarlySetup();
+        before(() => {
+            chartsDotPlotPage.steps.navigateToCreateQuestion('charts');
+            cy.barsPreLoaderWait();
+            chartsDotPlotPage.steps.selectDotPlot();
+        });
+
+        it('Dot type label should be displayed', () => {
+            utilities.verifyInnerText(chartsDotPlotPage.dotTypeLabel(), 'Dot type');
+            utilities.verifyElementVisibilityState(chartsDotPlotPage.dotTypeLabel(), 'visible');
+        });
+
+        it('Dot and X mark labels and radio button should be displayed and by default \'Dot\' radio button should be selected', () => {
+            utilities.verifyInnerText(chartsDotPlotPage.dotLabel(), 'Dot');
+            utilities.verifyElementVisibilityState(chartsDotPlotPage.dotLabel(), 'visible');
+            utilities.verifyInnerText(chartsDotPlotPage.xMarkLabel(), 'X mark');
+            utilities.verifyElementVisibilityState(chartsDotPlotPage.xAxisLabelSelectChartType(), 'visible');
+            chartsDotPlotPage.steps.verifyDotRadioButtonSelected();
+        });
+
+        it('When Dot radio button is selected then on plotting response in dot column \'Dots\' should be displayed in select chart type and specify correct answer section', () => {
+            chartsDotPlotPage.steps.verifyDotRadioButtonSelected();
+            chartsDotPlotPage.steps.plotDotsInDotColumnSelectChartTypeSection(2, { point: 0, min: 0, interval: 0.25, defaultDots: 0 });
+            chartsDotPlotPage.steps.verifyDotTypeSelectChartType('Dot', { point: 0, min: 0, interval: 0.25 });
+            chartsDotPlotPage.steps.plotDotsInDotColumnSpecifyCorrectAnswer(2, { point: 0, min: 0, interval: 0.25, defaultDots: 0 });
+            chartsDotPlotPage.steps.verifyDotTypeSpecifyCorrectAnswer('Dot', { point: 0, min: 0, interval: 0.25 });
+        });
+
+        it('When user selects X mark radio button  then added response in dot column should change to \'X\' mark in select chart type and specify correct answer section', () => {
+            chartsDotPlotPage.steps.selectXMarkRadioButton();
+            chartsDotPlotPage.steps.verifyDotTypeSelectChartType('XMark', { point: 0, min: 0, interval: 0.25 });
+            chartsDotPlotPage.steps.verifyDotTypeSpecifyCorrectAnswer('XMark', { point: 0, min: 0, interval: 0.25 });
+        });
+
+        it('When user hovers over add button then \'Add cross\' tooltip should be displayed', () => {
+            chartsDotPlotPage.steps.selectDotColumnInSelectChartTypeSection({ point: 0, min: 0, interval: 0.25 });
+            chartsDotPlotPage.steps.verifyTooltipInnerText(chartsDotPlotPage.addButtonSelectChartType, 'Add cross');
+            chartsDotPlotPage.steps.unselectDotColumnInSelectChartTypeSection({ point: 0, min: 0, interval: 0.25 });
+        });
+
+        it('When user hovers over minus button then \'Minus cross\' tooltip should be displayed', () => {
+            chartsDotPlotPage.steps.selectDotColumnInSelectChartTypeSection({ point: 0, min: 0, interval: 0.25 });
+            chartsDotPlotPage.steps.verifyTooltipInnerText(chartsDotPlotPage.minusButtonSelectChartType, 'Minus cross');
+            chartsDotPlotPage.steps.unselectDotColumnInSpecifyCorrectAnswer({ point: 0, min: 0, interval: 0.25 });
+        });
+
+        it('When user selects Dot radio button again then added response in dot column should change to \'Dot\' in select chart type and specify correct answer section', () => {
+            chartsDotPlotPage.steps.selectDotRadioButton();
+            chartsDotPlotPage.steps.verifyDotTypeSelectChartType('Dot', { point: 0, min: 0, interval: 0.25 });
+            chartsDotPlotPage.steps.verifyDotTypeSpecifyCorrectAnswer('Dot', { point: 0, min: 0, interval: 0.25 });
+        });
+
+        it('CSS of grid section', { tags: 'css' }, () => {
+            utilities.verifyCSS(chartsDotPlotPage.dotTypeLabel(), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.semibold
+            });
+            utilities.verifyCSS(chartsDotPlotPage.dotLabel(), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.regular
+            });
+            utilities.verifyCSS(chartsDotPlotPage.dotRadioButton().parents('.radio-option-checked').find('[data-name="Radio button - Selected"]'), {
+                'fill': css.color.activeButtons
+            });
+            utilities.verifyCSS(chartsDotPlotPage.xMarkLabel(), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.regular
+            });
+            utilities.verifyCSS(chartsDotPlotPage.xMarkRadioButton().parents('span').find('.radio-btn-deselected'), {
+                'fill': css.color.uncheckedCheckbox
+            });
+        });
+
+        it('Accessibility of Dot type section', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(chartsDotPlotPage.selectChartTypeGraphTitleButton().parents('[class*="Chartsstyles__ChartsQuestionWrapper"]'));
+        });
+    });
+
+    describe('Dot type - preview tab functionality', () => {
+        abortEarlySetup();
+        before(() => {
+            chartsDotPlotPage.steps.navigateToCreateQuestion('charts');
+            cy.barsPreLoaderWait();
+            chartsDotPlotPage.steps.selectDotPlot();
+        });
+
+        it('When Dot radio button is selected then on plotting response in dot column, dots should be displayed in preview tab', () => {
+            chartsDotPlotPage.steps.verifyDotRadioButtonSelected();
+            chartsDotPlotPage.steps.switchToPreviewTab();
+            chartsDotPlotPage.steps.plotDotsInDotColumnPreviewTab(2, { point: 0, min: 0, interval: 0.25, defaultDots: 0 });
+            chartsDotPlotPage.steps.verifyDotTypePreviewTab('Dot', { point: 0, min: 0, interval: 0.25 });
+        });
+
+        it('When user selects X mark radio button in edit tab and plots response in dot column then \'X\' mark should be displayed in preview tab', () => {
+            chartsDotPlotPage.steps.switchToEditTab();
+            chartsDotPlotPage.steps.selectXMarkRadioButton();
+            chartsDotPlotPage.steps.switchToPreviewTab();
+            chartsDotPlotPage.steps.selectDotColumnInPreviewTab({ point: 0, min: 0, interval: 0.25 });
+            chartsDotPlotPage.steps.increaseDotCountInDotColumnPreviewTab(2, { point: 0, min: 0, interval: 0.25, defaultDots: 0 });
+            chartsDotPlotPage.steps.verifyDotTypePreviewTab('XMark', { point: 0, min: 0, interval: 0.25 });
+        });
+
+        it('When user selects Dot radio button again in edit tab and plots response in dot column  then dot should be displayed in preview tab', () => {
+            chartsDotPlotPage.steps.switchToEditTab();
+            chartsDotPlotPage.steps.selectDotRadioButton();
+            chartsDotPlotPage.steps.switchToPreviewTab();
+            chartsDotPlotPage.steps.plotDotsInDotColumnPreviewTab(2, { point: 0, min: 0, interval: 0.25, defaultDots: 0 });
+            chartsDotPlotPage.steps.verifyDotTypePreviewTab('Dot', { point: 0, min: 0, interval: 0.25 });
+        });
+    });
+
+    describe('Label options - content', () => {
+        abortEarlySetup();
+        before(() => {
+            chartsDotPlotPage.steps.navigateToCreateQuestion('charts');
+            cy.barsPreLoaderWait();
+            chartsDotPlotPage.steps.selectDotPlot();
+        });
+
+        it('Label options label should be displayed', () => {
+            utilities.verifyInnerText(chartsDotPlotPage.labelOptionsLabel(), 'Label options');
+            utilities.verifyElementVisibilityState(chartsDotPlotPage.labelOptionsLabel(), 'visible');
+        });
+
+        it('Allow students to edit label should be displayed', () => {
+            utilities.verifyInnerText(chartsDotPlotPage.allowStudentsToEditLabel(), 'Allow students to edit');
+            utilities.verifyElementVisibilityState(chartsDotPlotPage.allowStudentsToEditLabel(), 'visible');
+        });
+
+        it('X Axis label and checkbox should be displayed and by default checkbox should be checked', () => {
+            utilities.verifyInnerText(chartsDotPlotPage.xAxisLabelSelectChartType(), 'X Axis');
+            utilities.verifyElementVisibilityState(chartsDotPlotPage.xAxisLabelSelectChartType(), 'visible');
+            chartsDotPlotPage.steps.verifyXAxisCheckboxChecked();
+        });
+
+        it('CSS of grid section', { tags: 'css' }, () => {
+            utilities.verifyCSS(chartsDotPlotPage.labelOptionsLabel(), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.semibold
+            });
+            utilities.verifyCSS(chartsDotPlotPage.allowStudentsToEditLabel(), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.semibold
+            });
+            utilities.verifyCSS(chartsDotPlotPage.xAxisCheckBox().parents('span').find('svg g .checkbox-icon-border-rect'), {
+                'fill': css.color.activeButtons
+            });
+            utilities.verifyCSS(chartsDotPlotPage.xAxisLabel(), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.regular
+            });
+        });
+
+        it('Accessibility of Label options', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(chartsDotPlotPage.labelOptionsLabel().parents('[class*="Chartsstyles__ChartsQuestionWrapper"]'));
+        });
+    });
+
+    describe('Label options - preview tab functionality', () => {
+        abortEarlySetup();
+        before(() => {
+            chartsDotPlotPage.steps.navigateToCreateQuestion('charts');
+            cy.barsPreLoaderWait();
+            chartsDotPlotPage.steps.selectDotPlot();
+            chartsDotPlotPage.steps.switchToPreviewTab();
+        });
+
+        it('When X Axis checkbox is checked in edit tab and user clicks on X axis label in preview tab then popup should be displayed  with title \'X axis label\' and \'Add label\' label with input field should be displayed along with \'Save\' and \'Cancel\' button', () => {
+            chartsDotPlotPage.steps.clickOnXAxisLabelButtonInPreviewTab();
+            utilities.verifyElementVisibilityState(dialogBoxBase.dialogBox(), 'visible');
+            utilities.verifyInnerText(dialogBoxBase.dialogBoxTitle(), 'X axis label');
+            utilities.verifyInnerText(chartsDotPlotPage.titlePopupAddLabelLabel(), 'Add label');
+            utilities.verifyElementVisibilityState(chartsDotPlotPage.titlePopupAddLabelInputField(), 'visible');
+            utilities.verifyInnerText(chartsDotPlotPage.titlePopupSaveButton(), 'Save');
+            utilities.verifyInnerText(chartsDotPlotPage.titlePopupCancelButton(), 'Cancel');
+        });
+
+        it('The input field should be prefilled with \'Label\'', () => {
+            chartsDotPlotPage.steps.verifyTextInTitlePopupAddLabelInputField('Label');
+        });
+
+        it('When the user edits the X axis label and clicks on \'Cancel\' button then the changes should not be displayed in the preview tab', () => {
+            chartsDotPlotPage.steps.enterTextInTitlePopupAddLabelInputField('Days');
+            chartsDotPlotPage.steps.clickOnTitlePopupCancelButton();
+            utilities.verifyInnerText(chartsDotPlotPage.previewTabXAxisLabelButton(), 'Label');
+        });
+
+        it('When the user clicks on the \'X axis label\' then the original text should be displayed in the popup', () => {
+            chartsDotPlotPage.steps.clickOnXAxisLabelButtonInPreviewTab();
+            chartsDotPlotPage.steps.verifyTextInTitlePopupAddLabelInputField('Label');
+        });
+
+        it('When the user clicks on \'Save\' after updating the input field the updated label should be displayed in the Preview tab', () => {
+            chartsDotPlotPage.steps.enterTextInTitlePopupAddLabelInputField('Days');
+            chartsDotPlotPage.steps.clickOnTitlePopupSaveButton();
+            utilities.verifyInnerText(chartsDotPlotPage.previewTabXAxisLabelButton(), 'Days');
+        });
+
+        it('Changes made to the x axis label in the preview tab should not reflect for the charts in the edit tab', () => {
+            chartsDotPlotPage.steps.switchToEditTab();
+            utilities.verifyInnerText(chartsDotPlotPage.xAxisLabelSpecifyCorrectAnswer(), 'Label');
+            utilities.verifyInnerText(chartsDotPlotPage.xAxisLabel(), 'Label');
+        });
+
+        it('When user revisits preview tab, then previously made changes in x axis label should no longer exist', () => {
+            chartsDotPlotPage.steps.switchToPreviewTab();
+            utilities.verifyInnerText(chartsDotPlotPage.previewTabXAxisLabelButton(), 'Label');
+        });
+
+        it('When user unchecks X Axis label checkbox in edit tab, then on clicking on the x axis label, popup should not be displayed', () => {
+            chartsDotPlotPage.steps.switchToEditTab();
+            chartsDotPlotPage.steps.uncheckXAxisCheckbox();
+            chartsDotPlotPage.steps.switchToPreviewTab();
+            chartsDotPlotPage.steps.clickOnXAxisLabelButtonInPreviewTab();
+            utilities.verifyElementVisibilityState(dialogBoxBase.dialogBox(), 'notExist');
+        });
+    });
+})

package/cypress/e2e/ILC/chartsDotsPlot/minimumScoringPenaltyPointsAndRoundingDropdown.js

@@ -66,16 +66,16 @@ describe('Create item page - Charts - Dot plot: Minimum scoring, Penalty scoring
         });
 
         it('When the user removes a label from number line axis, then \'points for each incorrect option\' should get updated accordingly', () => {
-            chartsDotPlotPage.steps.enterTextInMaxInputField(5);
-            chartsDotPlotPage.steps.verifyPenaltyPointsForEachIncorrectDotPlot(1);
+            chartsDotPlotPage.steps.enterTextInMaxInputField(4);
+            chartsDotPlotPage.steps.verifyPenaltyPointsForEachIncorrectDotPlot(1.2);
         });
 
         it('When the user adds a label on number line axis, then \'points for each incorrect option\' should get updated accordingly', () => {
             chartsDotPlotPage.steps.enterTextInMaxInputField(6);
-            chartsDotPlotPage.steps.verifyPenaltyPointsForEachIncorrectDotPlot(1);
+            chartsDotPlotPage.steps.verifyPenaltyPointsForEachIncorrectDotPlot(0.86);
         });
 
-        it.skip('CSS of the penalty points section - Total penalty points', { tags: 'css' }, () => {
+        it('CSS of the penalty points section - Total penalty points', { tags: 'css' }, () => {
             utilities.verifyCSS(chartsDotPlotPage.automaticallySetPenaltyPointsCheckboxLabel(), {
                 'color': css.color.labels,
                 'font-size': css.fontSize.default,
@@ -145,7 +145,7 @@ describe('Create item page - Charts - Dot plot: Minimum scoring, Penalty scoring
             chartsDotPlotPage.steps.verifyTotalPenaltyPoints(7);
         });
 
-        it.skip('CSS of the penalty points section - Penalty points for each incorrect dot plot', { tags: 'css' }, () => {
+        it('CSS of the penalty points section - Penalty points for each incorrect dot plot', { tags: 'css' }, () => {
             utilities.verifyCSS(chartsDotPlotPage.penaltyPointsDetailsSectionInputFieldLabel(), {
                 'color': css.color.labels,
                 'font-size': css.fontSize.default,

package/cypress/e2e/ILC/chartsDotsPlot/numberLineAxisSettings.js

@@ -0,0 +1,265 @@
+import { chartsDotPlotPage } from "../../../pages";
+import utilities from "../../../support/helpers/utilities";
+import abortEarlySetup from "../../../support/helpers/abortEarly";
+const css = Cypress.env('css');
+
+const displayNumbersOptions = ["Below line", "Above line"]
+const lineSettingsOptions = ['Whole numbers', 'Decimals', 'Fractions', 'Mixed fractions'];
+const numbers = ['0.25', '1\n4', "0\n1\n4"];
+
+describe('Select chart type section', () => {
+    before(() => {
+        cy.loginAs('admin');
+    });
+
+    describe('Number line axis settings - content and edit tab functionality', () => {
+        abortEarlySetup();
+        before(() => {
+            chartsDotPlotPage.steps.navigateToCreateQuestion('charts');
+            cy.barsPreLoaderWait();
+            chartsDotPlotPage.steps.selectDotPlot();
+        });
+
+        it('Interval label and input field should be displayed and by default, input field should have \'0.25\' pre-filled in it', () => {
+            utilities.verifyInnerText(chartsDotPlotPage.intervalLabel(), 'Interval');
+            utilities.verifyElementVisibilityState(chartsDotPlotPage.intervalLabel(), 'visible');
+            utilities.verifyElementVisibilityState(chartsDotPlotPage.intervalInputField(), 'visible');
+            chartsDotPlotPage.steps.verifyTextInIntervalInputField(0.25);
+        });
+
+        it('Annotate every label and input field should be displayed and by default, input field should have \'4\' pre-filled in it', () => {
+            utilities.verifyInnerText(chartsDotPlotPage.annotateEveryLabel(), 'Annotate every');
+            utilities.verifyElementVisibilityState(chartsDotPlotPage.annotateEveryLabel(), 'visible');
+            utilities.verifyElementVisibilityState(chartsDotPlotPage.annotateEveryInputField(), 'visible');
+            chartsDotPlotPage.steps.verifyTextInAnnotateEveryInputField(4);
+        });
+
+        it(`Display numbers label and 2 options ${displayNumbersOptions} should be displayed and by default, ${displayNumbersOptions[0]} should be selected`, () => {
+            utilities.verifyInnerText(chartsDotPlotPage.displayNumbersLabel(), 'Display numbers');
+            utilities.verifyElementVisibilityState(chartsDotPlotPage.displayNumbersLabel(), 'visible');
+            utilities.verifyElementVisibilityState(chartsDotPlotPage.displayNumbersToggleButton(), 'visible');
+            utilities.verifyElementCount(chartsDotPlotPage.displayNumbersToggleButton(), 2);
+            displayNumbersOptions.forEach((label) => {
+                utilities.verifyInnerText(chartsDotPlotPage.displayNumbersToggleButton(label), label);
+                utilities.verifyElementVisibilityState(chartsDotPlotPage.displayNumbersToggleButton(label), 'visible');
+            });
+            chartsDotPlotPage.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(chartsDotPlotPage.lineSettingsLabel(), 'Line settings');
+            utilities.verifyElementVisibilityState(chartsDotPlotPage.lineSettingsLabel(), 'visible');
+            utilities.verifyElementVisibilityState(chartsDotPlotPage.lineSettingsToggleButton(), 'visible');
+            utilities.verifyElementCount(chartsDotPlotPage.lineSettingsToggleButton(), 4);
+            lineSettingsOptions.forEach((label) => {
+                utilities.verifyInnerText(chartsDotPlotPage.lineSettingsToggleButton(label), label);
+                utilities.verifyElementVisibilityState(chartsDotPlotPage.lineSettingsToggleButton(label), 'visible');
+            });
+            chartsDotPlotPage.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(chartsDotPlotPage.displaySpecificAnnotationLabel(), 'Display specific annotation (use semicolons to separate)');
+            utilities.verifyElementVisibilityState(chartsDotPlotPage.displaySpecificAnnotationLabel(), 'visible');
+            utilities.verifyElementVisibilityState(chartsDotPlotPage.displaySpecificAnnotationInputField(), 'visible');
+            utilities.verifyInnerText(chartsDotPlotPage.displaySpecificAnnotationInputField(), '');
+        });
+
+        it('When user updates value in Interval input field and Annotate every input field then interval of labels and ticks should be updated in select chart type section and specify correct answer section', () => {
+            chartsDotPlotPage.steps.selectLineSettingsToggleButton('Whole numbers');
+            chartsDotPlotPage.steps.enterTextInIntervalInputField(1);
+            chartsDotPlotPage.steps.verifyTextInIntervalInputField(1);
+            chartsDotPlotPage.steps.enterTextInAnnotateEveryInputField(1);
+            chartsDotPlotPage.steps.verifyTextInAnnotateEveryInputField(1);
+            chartsDotPlotPage.steps.verifyLabelsOnNumberLineAxisSelectChartType(0, 5, 1);
+            chartsDotPlotPage.steps.verifyLabelsOnNumberLineAxisSpecifyCorrectAnswer(0, 5, 1);
+        });
+
+        it(`When "${displayNumbersOptions[0]}" is selected, labels should be displayed below the number line axis in both the select chart type section and the specify correct answer section.`, () => {
+            chartsDotPlotPage.steps.verifyDisplayNumbersToggleButtonSelected(displayNumbersOptions[0]);
+            chartsDotPlotPage.steps.verifyDisplayNumbersOrientationOnChartSelectChartType('Below');
+            chartsDotPlotPage.steps.verifyDisplayNumbersOrientationOnChartSpecifyCorrectAnswer('Below');
+        });
+
+        it(`When "${displayNumbersOptions[1]}" is selected, labels should be displayed above the number line axis in both the select chart type section and the specify correct answer section.`, () => {
+            chartsDotPlotPage.steps.selectDisplayNumbersToggleButton(displayNumbersOptions[1]);
+            chartsDotPlotPage.steps.verifyDisplayNumbersOrientationOnChartSelectChartType('Above');
+            chartsDotPlotPage.steps.verifyDisplayNumbersOrientationOnChartSpecifyCorrectAnswer('Above');
+        });
+
+        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', () => {
+            chartsDotPlotPage.steps.selectLineSettingsToggleButton(lineSettingsOptions[0]);
+            chartsDotPlotPage.steps.enterTextInDisplaySpecificAnnotationInputField('-9; -8;');
+            chartsDotPlotPage.steps.verifyTextInDisplaySpecificAnnotationInputField('-9; -8;');
+            chartsDotPlotPage.steps.verifyLabelOnNumberLineAxisSpecifyCorrectAnswer([{ value: -9, index: 0 }, { value: -8, index: 1 }]);
+            chartsDotPlotPage.steps.verifyLabelOnNumberLineAxisSelectChartType([{ value: -9, index: 0 }, { value: -8, index: 1 }]);
+        });
+
+        it('CSS of Number line axis settings', { tags: 'css' }, () => {
+            utilities.verifyCSS(chartsDotPlotPage.intervalLabel(), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.semibold
+            });
+            utilities.verifyCSS(chartsDotPlotPage.intervalInputField(), {
+                'color': css.color.text,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular
+            });
+            utilities.verifyCSS(chartsDotPlotPage.annotateEveryLabel(), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.semibold
+            });
+            utilities.verifyCSS(chartsDotPlotPage.annotateEveryInputField(), {
+                'color': css.color.text,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular
+            });
+            utilities.verifyCSS(chartsDotPlotPage.displayNumbersLabel(), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.semibold
+            });
+            utilities.verifyCSS(chartsDotPlotPage.displayNumbersToggleButton(displayNumbersOptions[0]), {
+                'background-color': css.color.activeButtons,
+                'color': css.color.primaryBtn,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.bold
+            });
+            utilities.verifyCSS(chartsDotPlotPage.displayNumbersToggleButton(displayNumbersOptions[1]), {
+                'background-color': css.color.transparent,
+                'color': css.color.closeIcon,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.bold
+            });
+            utilities.verifyCSS(chartsDotPlotPage.displaySpecificAnnotationLabel(), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.semibold
+            });
+            utilities.verifyCSS(chartsDotPlotPage.displaySpecificAnnotationInputField(), {
+                'color': css.color.text,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular
+            });
+            utilities.verifyCSS(chartsDotPlotPage.lineSettingsLabel(), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.semibold
+            });
+            utilities.verifyCSS(chartsDotPlotPage.lineSettingsToggleButton(lineSettingsOptions[1]), {
+                'background-color': css.color.transparent,
+                'color': css.color.closeIcon,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.bold
+            });
+            utilities.verifyCSS(chartsDotPlotPage.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 axis settings', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(chartsDotPlotPage.intervalLabel().parents('.number-line-grid-setting'));
+        });
+    });
+
+    describe('Line settings section - Edit tab functionality', () => {
+        abortEarlySetup();
+        before(() => {
+            chartsDotPlotPage.steps.navigateToCreateQuestion('charts');
+            cy.barsPreLoaderWait();
+            chartsDotPlotPage.steps.selectDotPlot();
+            chartsDotPlotPage.steps.enterTextInAnnotateEveryInputField(1);
+        });
+
+        it(`When \'Whole numbers\' is selected in line settings section, then number displayed on number line should be ${lineSettingsOptions[0]} in select chart type and specify correct answer section`, () => {
+            chartsDotPlotPage.steps.verifyLineSettingsToggleButtonSelected('Whole numbers');
+            chartsDotPlotPage.steps.verifyLabelOnNumberLineAxisSpecifyCorrectAnswer([{ value: 0, index: 0 }]);
+            chartsDotPlotPage.steps.verifyLabelOnNumberLineAxisSelectChartType([{ value: 0, index: 0 }]);
+        });
+
+        const lineSettingsOption = ['Decimals', 'Fractions', 'Mixed fractions'];
+        lineSettingsOption.forEach((option, index) => {
+            it(`When user selects ${option} in line settings section, then number displayed on number line should be ${option} in select chart type and specify correct answer section`, () => {
+                chartsDotPlotPage.steps.selectLineSettingsToggleButton(option);
+                chartsDotPlotPage.steps.verifyLineSettingsToggleButtonSelected(option);
+                chartsDotPlotPage.steps.verifyLabelOnNumberLineAxisSpecifyCorrectAnswer([{ value: numbers[index], index: 1 }]);
+                chartsDotPlotPage.steps.verifyLabelOnNumberLineAxisSelectChartType([{ value: numbers[index], index: 1 }]);
+            });
+        });
+    })
+
+    describe('Number line axis settings - preview tab functionality', () => {
+        abortEarlySetup();
+        before(() => {
+            chartsDotPlotPage.steps.navigateToCreateQuestion('charts');
+            cy.barsPreLoaderWait();
+            chartsDotPlotPage.steps.selectDotPlot();
+        });
+
+        //Note- Can't check ticks are not annotated so adding it to manual sheet
+        it('When user updates value in Interval input field and Annotate every input field then interval of labels and ticks should be updated in preview  tab', () => {
+            chartsDotPlotPage.steps.enterTextInIntervalInputField(1);
+            chartsDotPlotPage.steps.verifyTextInIntervalInputField(1);
+            chartsDotPlotPage.steps.enterTextInAnnotateEveryInputField(1);
+            chartsDotPlotPage.steps.verifyTextInAnnotateEveryInputField(1);
+            chartsDotPlotPage.steps.switchToPreviewTab();
+            chartsDotPlotPage.steps.verifyLabelsOnNumberLineAxisPreviewTab(0, 5, 1);
+        });
+
+        it(`When ${displayNumbersOptions[0]} is selected then labels should be displayed below the number line axis in the preview tab.`, () => {
+            chartsDotPlotPage.steps.switchToEditTab();
+            chartsDotPlotPage.steps.verifyDisplayNumbersToggleButtonSelected(displayNumbersOptions[0]);
+            chartsDotPlotPage.steps.switchToPreviewTab();
+            chartsDotPlotPage.steps.verifyDisplayNumbersOrientationOnChartPreviewTab('Below');
+        });
+
+        it(`When user selects ${displayNumbersOptions[1]} then labels should be displayed above the number line axis in the preview tab.`, () => {
+            chartsDotPlotPage.steps.switchToEditTab();
+            chartsDotPlotPage.steps.selectDisplayNumbersToggleButton(displayNumbersOptions[1]);
+            chartsDotPlotPage.steps.switchToPreviewTab();
+            chartsDotPlotPage.steps.verifyDisplayNumbersOrientationOnChartPreviewTab('Above');
+        });
+
+        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', () => {
+            chartsDotPlotPage.steps.switchToEditTab();
+            chartsDotPlotPage.steps.selectLineSettingsToggleButton(lineSettingsOptions[0]);
+            chartsDotPlotPage.steps.enterTextInDisplaySpecificAnnotationInputField('-9; -8;');
+            chartsDotPlotPage.steps.verifyTextInDisplaySpecificAnnotationInputField('-9; -8;');
+            chartsDotPlotPage.steps.switchToPreviewTab();
+            chartsDotPlotPage.steps.verifyLabelOnNumberLineAxisPreviewTab([{ value: -9, index: 0 }, { value: -8, index: 1 }]);
+        });
+    });
+
+    describe('Line settings section - preview tab functionality', () => {
+        abortEarlySetup();
+        before(() => {
+            chartsDotPlotPage.steps.navigateToCreateQuestion('charts');
+            cy.barsPreLoaderWait();
+            chartsDotPlotPage.steps.selectDotPlot();
+            chartsDotPlotPage.steps.enterTextInAnnotateEveryInputField(1);
+        });
+
+        it(`When \'Whole numbers\' is selected in line settings section, then number displayed on number line should be ${lineSettingsOptions[0]} in preview tab`, () => {
+            chartsDotPlotPage.steps.verifyLineSettingsToggleButtonSelected('Whole numbers');
+            chartsDotPlotPage.steps.switchToPreviewTab();
+            chartsDotPlotPage.steps.verifyLabelOnNumberLineAxisPreviewTab([{ value: 0, index: 0 }]);
+        });
+
+        const lineSettingsOption = ['Decimals', 'Fractions', 'Mixed fractions'];
+        lineSettingsOption.forEach((option, index) => {
+            it(`When user selects ${option} in line settings section, then number displayed on number line should be ${option} in preview tab`, () => {
+                chartsDotPlotPage.steps.switchToEditTab();
+                chartsDotPlotPage.steps.selectLineSettingsToggleButton(option);
+                chartsDotPlotPage.steps.verifyLineSettingsToggleButtonSelected(option);
+                chartsDotPlotPage.steps.switchToPreviewTab();
+                chartsDotPlotPage.steps.verifyLabelOnNumberLineAxisPreviewTab([{ value: numbers[index], index: 1 }]);
+            });
+        });
+    });
+});

package/cypress/e2e/ILC/chartsDotsPlot/previewContentsForAllViews.smoke.js

@@ -83,20 +83,20 @@ describe('Create item page: Charts - Dot - Preview contents in all views', () =>
             });
 
             it('When user hovers over dot column then it should be displayed in interactive state and tooltip with add and minus button should be displayed', () => {
-                utilities.triggerMouseover(utilities.getNthElement(chartsDotPlotPage.dotColumnPreviewTab(), 4));
+                utilities.hoverOverElement(utilities.getNthElement(chartsDotPlotPage.dotColumnPreviewTab(), 4));
                 utilities.verifyCSS(utilities.getNthElement(chartsDotPlotPage.dotColumnPreviewTab(), 4), {
                     'background-color': css.color.draggableOptionsContainerBg
                 });
                 utilities.verifyElementVisibilityState(chartsDotPlotPage.tooltipWrapperPreviewTab(), 'visible');
                 utilities.verifyElementVisibilityState(chartsDotPlotPage.addButtonPreviewTab(), 'visible');
                 utilities.verifyElementVisibilityState(chartsDotPlotPage.minusButtonPreviewTab(), 'visible');
-                utilities.triggerMouseout(utilities.getNthElement(chartsDotPlotPage.dotColumnPreviewTab(), 4));
+                utilities.hoverAwayFromElement();
             });
 
             it('Accessibility of interactive dot column', { tags: 'a11y' }, () => {
-                utilities.triggerMouseover(utilities.getNthElement(chartsDotPlotPage.dotColumnPreviewTab(), 4));
+                utilities.hoverOverElement(utilities.getNthElement(chartsDotPlotPage.dotColumnPreviewTab(), 4));
                 cy.checkAccessibility(utilities.getNthElement(chartsDotPlotPage.dotColumnPreviewTab(), 4));
-                utilities.triggerMouseout(utilities.getNthElement(chartsDotPlotPage.dotColumnPreviewTab(), 4));
+                utilities.hoverAwayFromElement();
             });
 
             it('When user selects an empty dot column, tooltip with add and minus should be displayed and by default minus button should be displayed in disabled state and add button should be in enabled state', () => {
@@ -128,14 +128,14 @@ describe('Create item page: Charts - Dot - Preview contents in all views', () =>
                 chartsDotPlotPage.steps.unselectDotColumnInPreviewTab({ point: 4, min: 1, interval: 0.25 });
             });
 
-            it('The locked DotColumn should be displayed in the locked state with added dots and when user hovers over it tooltip should not be displayed', () => {
+            it('The locked Dot column should be displayed in the locked state with added dots and when user hovers over it tooltip should not be displayed', () => {
                 chartsDotPlotPage.steps.verifyDotColumnIsLockedInPreviewTab({ point: 1, min: 1, interval: 0.25 });
                 chartsDotPlotPage.steps.verifyDotCountPreviewTab(2, { point: 1, min: 1, interval: 0.25 });
                 chartsDotPlotPage.steps.selectDotColumnInPreviewTab({ point: 1, min: 1, interval: 0.25 });
                 chartsDotPlotPage.steps.tooltipWrapperNotExistPreviewTab();
             });
 
-            it('When user attempts the locked state DotColumn using keyboard then user should be unable to make any changes', () => {
+            it('When user attempts the locked state Dot column using keyboard then user should be unable to make any changes', () => {
                 chartsDotPlotPage.steps.increaseDotInDotColumnUsingKeyboardPreviewTab(1, { point: 1, min: 1, interval: 0.25 });
                 chartsDotPlotPage.steps.verifyDotCountPreviewTab(2, { point: 1, min: 1, interval: 0.25 });
                 chartsDotPlotPage.steps.decreaseDotInDotColumnUsingKeyboardPreviewTab(1, { point: 1, min: 1, interval: 0.25 });

package/cypress/e2e/ILC/chartsDotsPlot/scoring/manualAndNonScoredScoring.js

@@ -1,6 +1,6 @@
-import { chartsDotPlotPage } from "../../../pages";
-import abortEarlySetup from "../../../support/helpers/abortEarly";
-import utilities from "../../../support/helpers/utilities";
+import { chartsDotPlotPage } from "../../../../pages";
+import abortEarlySetup from "../../../../support/helpers/abortEarly";
+import utilities from "../../../../support/helpers/utilities";
 
 describe('Create Item page - Charts - Dot plot: Manually and non scored', () => {
     before(() => {