itemengine-cypress-automation 1.0.204-graphQLUpdate-b0c0036.0 → 1.0.205-8thJuneFixes-5ad148f.0

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

@@ -0,0 +1,594 @@
+import { chartsDotPlotPage, dialogBoxBase } from "../../../pages";
+import utilities from "../../../support/helpers/utilities";
+import abortEarlySetup from "../../../support/helpers/abortEarly";
+const css = Cypress.env('css');
+
+describe('Charts - Dot plot: Select chart type section', () => {
+    before(() => {
+        cy.loginAs('admin');
+    });
+
+    describe('Control buttons - Select chart type section', () => {
+        abortEarlySetup();
+        before(() => {
+            chartsDotPlotPage.steps.navigateToCreateQuestion('charts');
+            cy.barsPreLoaderWait();
+            chartsDotPlotPage.steps.selectDotPlot();
+        });
+
+        it(`Undo, Redo and Reset control options should be displayed in the select chart type section and by default, control options should be in disabled state`, () => {
+            utilities.verifyElementVisibilityState(chartsDotPlotPage.controlOptionsSelectChartType('Undo'), 'visible');
+            utilities.verifyElementDisabled(chartsDotPlotPage.controlOptionsSelectChartType('Undo'));
+            utilities.verifyElementVisibilityState(chartsDotPlotPage.controlOptionsSelectChartType('Redo'), 'visible');
+            utilities.verifyElementDisabled(chartsDotPlotPage.controlOptionsSelectChartType('Redo'));
+            utilities.verifyElementVisibilityState(chartsDotPlotPage.controlOptionsSelectChartType('Reset'), 'visible');
+            utilities.verifyElementDisabled(chartsDotPlotPage.controlOptionsSelectChartType('Reset'));
+        });
+
+        it('When user has perform an action on the dot plot chart, then the undo and reset button should be displayed in enabled state', () => {
+            chartsDotPlotPage.steps.plotDotsInDotColumnSelectChartTypeSection(4, { point: 2, min: -3, interval: 0.25, defaultDots: 0 });
+            utilities.verifyElementNotDisabled(chartsDotPlotPage.controlOptionsSelectChartType('Undo'));
+            utilities.verifyElementNotDisabled(chartsDotPlotPage.controlOptionsSelectChartType('Reset'));
+        });
+
+        it('When user hovers on the enabled undo and reset button, then tooltips \'Undo\' and \'Reset\' should be displayed', () => {
+            chartsDotPlotPage.controlOptionsSelectChartType('Undo')
+                .verifyTooltip('Undo');
+            chartsDotPlotPage.controlOptionsSelectChartType('Reset')
+                .verifyTooltip('Reset');
+        });
+
+        it('CSS of the tooltip text', { tags: 'css' }, () => {
+            utilities.triggerMouseover(chartsDotPlotPage.controlOptionsSelectChartType('Undo'));
+            utilities.verifyCSS(chartsDotPlotPage.tooltipText(), {
+                'color': css.color.whiteText,
+                'font-size': css.fontSize.small,
+                'font-weight': css.fontWeight.regular,
+                'background-color': css.color.tooltipBg
+            });
+            utilities.triggerMouseout(chartsDotPlotPage.controlOptionsSelectChartType('Undo'));
+            utilities.triggerMouseover(chartsDotPlotPage.controlOptionsSelectChartType('Reset'));
+            utilities.verifyCSS(chartsDotPlotPage.tooltipText(), {
+                'color': css.color.whiteText,
+                'font-size': css.fontSize.small,
+                'font-weight': css.fontWeight.regular,
+                'background-color': css.color.tooltipBg
+            });
+            utilities.triggerMouseout(chartsDotPlotPage.controlOptionsSelectChartType('Reset'));
+        });
+
+        it('Accessibility of the tooltip text', { tags: 'a11y' }, () => {
+            utilities.triggerMouseover(chartsDotPlotPage.controlOptionsSelectChartType('Undo'));
+            utilities.verifyElementVisibilityState(chartsDotPlotPage.tooltipText(), 'visible');
+            cy.checkAccessibility(chartsDotPlotPage.tooltipText());
+            utilities.triggerMouseout(chartsDotPlotPage.controlOptionsSelectChartType('Undo'));
+            utilities.verifyElementVisibilityState(chartsDotPlotPage.tooltipText(), 'notExist');
+            utilities.triggerMouseover(chartsDotPlotPage.controlOptionsSelectChartType('Reset'));
+            utilities.verifyElementVisibilityState(chartsDotPlotPage.tooltipText(), 'visible');
+            cy.checkAccessibility(chartsDotPlotPage.tooltipText());
+            utilities.triggerMouseout(chartsDotPlotPage.controlOptionsSelectChartType('Reset'));
+            utilities.verifyElementVisibilityState(chartsDotPlotPage.tooltipText(), 'notExist');
+        });
+
+        it('When user clicks on the undo button, then the last performed action should be reverted', () => {
+            chartsDotPlotPage.steps.selectControlOptionSelectChartTypeSection('Undo');
+            chartsDotPlotPage.steps.verifyDotCountSelectChartTypeSection(3, { point: 2, min: -3, interval: 0.25 });
+        });
+
+        it('When user has clicked on undo button, then the redo button should be enabled', () => {
+            utilities.verifyElementNotDisabled(chartsDotPlotPage.controlOptionsSelectChartType('Redo'));
+        });
+
+        it('When user hovers on the enabled redo button, then tooltip \'Redo\' should be displayed', () => {
+            chartsDotPlotPage.controlOptionsSelectChartType('Redo')
+                .verifyTooltip('Redo');
+        });
+
+        it('CSS of the tooltip text', { tags: 'css' }, () => {
+            utilities.triggerMouseover(chartsDotPlotPage.controlOptionsSelectChartType('Redo'));
+            utilities.verifyCSS(chartsDotPlotPage.tooltipText(), {
+                'color': css.color.whiteText,
+                'font-size': css.fontSize.small,
+                'font-weight': css.fontWeight.regular,
+                'background-color': css.color.tooltipBg
+            });
+            utilities.triggerMouseout(chartsDotPlotPage.controlOptionsSelectChartType('Redo'));
+        });
+
+        it('Accessibility of the tooltip text', { tags: 'a11y' }, () => {
+            utilities.triggerMouseover(chartsDotPlotPage.controlOptionsSelectChartType('Redo'));
+            utilities.verifyElementVisibilityState(chartsDotPlotPage.tooltipText(), 'visible');
+            cy.checkAccessibility(chartsDotPlotPage.tooltipText());
+            utilities.triggerMouseout(chartsDotPlotPage.controlOptionsSelectChartType('Redo'));
+            utilities.verifyElementVisibilityState(chartsDotPlotPage.tooltipText(), 'notExist');
+        });
+
+        it('When the user clicks on redo button, then the last reverted action should be performed and the \'Redo\' button should be disabled again and \'Undo\' button should be enabled', () => {
+            chartsDotPlotPage.steps.selectControlOptionSelectChartTypeSection('Redo');
+            chartsDotPlotPage.steps.verifyDotCountSelectChartTypeSection(4, { point: 2, min: -3, interval: 0.25 });
+            utilities.verifyElementDisabled(chartsDotPlotPage.controlOptionsSelectChartType('Redo'));
+            utilities.verifyElementNotDisabled(chartsDotPlotPage.controlOptionsSelectChartType('Undo'));
+        });
+
+        it(`When the user reaches the initial state by performing undo actions, the \'Undo\' button should get disabled and \'Redo\' should be enabled`, () => {
+            for (var i = 0; i < 4; i++) {
+                chartsDotPlotPage.steps.selectControlOptionSelectChartTypeSection('Undo');
+            }
+            chartsDotPlotPage.steps.verifyDotCountSelectChartTypeSection(0, { point: 2, min: -3, interval: 0.25 });
+            utilities.verifyElementDisabled(chartsDotPlotPage.controlOptionsSelectChartType('Undo'));
+            utilities.verifyElementNotDisabled(chartsDotPlotPage.controlOptionsSelectChartType('Redo'));
+        });
+
+        it('When the user reaches the latest state by performing redo actions, the \'Redo\' button should get disabled and \'Undo\' should be enabled', () => {
+            for (var i = 0; i < 4; i++) {
+                chartsDotPlotPage.steps.selectControlOptionSelectChartTypeSection('Redo');
+            }
+            chartsDotPlotPage.steps.verifyDotCountSelectChartTypeSection(4, { point: 2, min: -3, interval: 0.25 });
+            utilities.verifyElementDisabled(chartsDotPlotPage.controlOptionsSelectChartType('Redo'));
+            utilities.verifyElementNotDisabled(chartsDotPlotPage.controlOptionsSelectChartType('Undo'));
+        });
+
+        it('When the user clicks on Reset button and confirms reset, then all the chart actions should be reverted and chart should be reverted to default state and control options should be in disabled state', () => {
+            chartsDotPlotPage.steps.selectControlOptionSelectChartTypeSection('Reset');
+            chartsDotPlotPage.steps.confirmReset();
+            chartsDotPlotPage.steps.verifyDotCountSelectChartTypeSection(0, { point: 2, min: -3, interval: 0.25 });
+            utilities.verifyElementDisabled(chartsDotPlotPage.controlOptionsSelectChartType('Undo'));
+            utilities.verifyElementDisabled(chartsDotPlotPage.controlOptionsSelectChartType('Redo'));
+            utilities.verifyElementDisabled(chartsDotPlotPage.controlOptionsSelectChartType('Reset'));
+        });
+
+        it('CSS of Control buttons in disabled state', { tags: 'css' }, () => {
+            utilities.verifyCSS(chartsDotPlotPage.controlOptionsSelectChartType('Undo').find('svg'), {
+                'fill': css.color.secondaryBtnDisabled
+            });
+            utilities.verifyCSS(chartsDotPlotPage.controlOptionsSelectChartType('Redo').find('svg'), {
+                'fill': css.color.secondaryBtnDisabled
+            });
+            utilities.verifyCSS(chartsDotPlotPage.controlOptionsSelectChartType('Reset').find('svg'), {
+                'fill': css.color.secondaryBtnDisabled
+            });
+        });
+
+        it('Accessibility of select chart type section contents', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(chartsDotPlotPage.controlOptionsWrapperSelectChartType().parents('.ngie-dot-plot-chart'));
+        });
+    });
+
+    describe('Select chart type - Content', () => {
+        abortEarlySetup();
+        before(() => {
+            chartsDotPlotPage.steps.navigateToCreateQuestion('charts');
+            cy.barsPreLoaderWait();
+            chartsDotPlotPage.steps.selectDotPlot();
+        });
+
+        it('Graph title button should be displayed', () => {
+            utilities.verifyInnerText(chartsDotPlotPage.selectChartTypeGraphTitleButton(), 'Graph title');
+            utilities.verifyElementVisibilityState(chartsDotPlotPage.selectChartTypeGraphTitleButton(), 'visible');
+        });
+
+        it('Min label and input field should be displayed and input field should be prefilled with 0 by default', () => {
+            utilities.verifyInnerText(chartsDotPlotPage.minLabel(), 'Min');
+            utilities.verifyElementVisibilityState(chartsDotPlotPage.minLabel(), 'visible');
+            utilities.verifyElementVisibilityState(chartsDotPlotPage.minInputField(), 'visible');
+            chartsDotPlotPage.steps.verifyTextInMinInputField(0);
+        });
+
+        it('Max label and input field should be displayed and input field should be prefilled with 5 by default', () => {
+            utilities.verifyInnerText(chartsDotPlotPage.maxLabel(), 'Max');
+            utilities.verifyElementVisibilityState(chartsDotPlotPage.maxLabel(), 'visible');
+            utilities.verifyElementVisibilityState(chartsDotPlotPage.maxInputField(), 'visible');
+            chartsDotPlotPage.steps.verifyTextInMaxInputField(5);
+        });
+
+        it('Number line axis should be displayed with labels from 0 to 5 and 20 divisions', () => {
+            utilities.verifyElementVisibilityState(chartsDotPlotPage.numberLineAxisSelectChartType(), 'exist');
+            chartsDotPlotPage.steps.verifyDivisionsOnNumberLineAxisSelectChartType({ min: 0, max: 5, interval: 0.25 });
+            chartsDotPlotPage.steps.verifyLabelsOnNumberLineAxisSelectChartType(0, 5, 4);
+        });
+
+        it('X axis label button should be displayed and by default it should be label', () => {
+            utilities.verifyInnerText(chartsDotPlotPage.selectChartTypeXAxisLabelButton(), 'Label');
+            utilities.verifyElementVisibilityState(chartsDotPlotPage.selectChartTypeXAxisLabelButton(), 'visible');
+        });
+
+        it('CSS of Select chart type section', { tags: 'css' }, () => {
+            utilities.verifyCSS(chartsDotPlotPage.selectChartTypeGraphTitleButton(), {
+                'color': css.color.activeButtons,
+                'font-size': css.fontSize.heading,
+                'font-weight': css.fontWeight.bold
+            });
+            utilities.verifyCSS(chartsDotPlotPage.minLabel(), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.semibold
+            });
+            utilities.verifyCSS(chartsDotPlotPage.minInputField(), {
+                'color': css.color.text,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular
+            });
+            utilities.verifyCSS(chartsDotPlotPage.maxLabel(), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.semibold
+            });
+            utilities.verifyCSS(chartsDotPlotPage.maxInputField(), {
+                'color': css.color.text,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular
+            });
+            utilities.verifyCSS(chartsDotPlotPage.labelsNumberLineAxisSelectChartType(), {
+                'color': css.color.text,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.semibold
+            });
+            utilities.verifyCSS(chartsDotPlotPage.selectChartTypeXAxisLabelButton(), {
+                'color': css.color.activeButtons,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.bold
+            });
+        });
+
+        it('Accessibility of Select chart type section', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(chartsDotPlotPage.selectChartTypeGraphTitleButton().parents('[class*="Chartsstyles__ChartsQuestionWrapper"]'));
+        });
+    });
+
+    describe('Select chart type - edit tab functionality', () => {
+        abortEarlySetup();
+        before(() => {
+            chartsDotPlotPage.steps.navigateToCreateQuestion('charts');
+            cy.barsPreLoaderWait();
+            chartsDotPlotPage.steps.selectDotPlot();
+        });
+
+        it('When user clicks on Graph title then popup should be displayed  with title \'Graph title\' and \'Add title\' label with input field should be displayed along with \'Save\' and \'Cancel\' button', () => {
+            chartsDotPlotPage.steps.clickOnGraphTitleButton();
+            utilities.verifyElementVisibilityState(dialogBoxBase.dialogBox(), 'visible');
+            utilities.verifyInnerText(dialogBoxBase.dialogBoxTitle(), 'Graph title');
+            utilities.verifyInnerText(chartsDotPlotPage.titlePopupAddLabelLabel(), 'Add title');
+            utilities.verifyElementVisibilityState(chartsDotPlotPage.titlePopupAddLabelInputField(), 'visible');
+            utilities.verifyInnerText(chartsDotPlotPage.titlePopupSaveButton(), 'Save');
+            utilities.verifyInnerText(chartsDotPlotPage.titlePopupCancelButton(), 'Cancel');
+        });
+
+        it('The input field should be prefilled with \'Graph title\'', () => {
+            chartsDotPlotPage.steps.verifyTextInTitlePopupAddLabelInputField('Graph title');
+        });
+
+        it('When the user edits the Graph title and clicks on \'Cancel\' button then the changes should not be displayed select chart type and specify correct answer section', () => {
+            chartsDotPlotPage.steps.enterTextInTitlePopupAddLabelInputField('Days');
+            chartsDotPlotPage.steps.clickOnTitlePopupCancelButton();
+            chartsDotPlotPage.steps.verifyGraphTitleInSelectChartType('Graph title');
+            chartsDotPlotPage.steps.verifyGraphTitleInSpecifyCorrectAnswer('Graph title');
+        });
+
+        it('When the user clicks on the \'Graph title\' then the original text should be displayed in the popup', () => {
+            chartsDotPlotPage.steps.clickOnGraphTitleButton();
+            chartsDotPlotPage.steps.verifyTextInTitlePopupAddLabelInputField('Graph title');
+        });
+
+        it('When the user clicks on \'Save\' after updating the input field the updated label should be displayed in the select chart type and specify correct answer section', () => {
+            chartsDotPlotPage.steps.enterTextInTitlePopupAddLabelInputField('Days');
+            chartsDotPlotPage.steps.clickOnTitlePopupSaveButton();
+            chartsDotPlotPage.steps.verifyGraphTitleInSelectChartType('Days');
+            chartsDotPlotPage.steps.verifyGraphTitleInSpecifyCorrectAnswer('Days');
+        });
+
+        it('When user updates Min value then it should be updated on number line axis in select chart type section and specify correct answer section', () => {
+            chartsDotPlotPage.steps.enterTextInMinInputField(-3);
+            chartsDotPlotPage.steps.verifyMinOnNumberLineAxisSpecifyCorrectAnswer(-3);
+            chartsDotPlotPage.steps.verifyMinOnNumberLineAxisSelectChartType(-3);
+        });
+
+        it('When user updates Max value then it should be updated on number line axis in select chart type section and specify correct answer section', () => {
+            chartsDotPlotPage.steps.enterTextInMaxInputField(3);
+            chartsDotPlotPage.steps.verifyMaxOnNumberLineAxisSpecifyCorrectAnswer(3);
+            chartsDotPlotPage.steps.verifyMaxOnNumberLineAxisSelectChartType(3);
+        });
+
+        it('When user hovers over dot column then it should be displayed in interactive state and tooltip should be displayed', () => {
+            utilities.hoverOverElement(utilities.getNthElement(chartsDotPlotPage.dotColumnSelectChartType(), 4));
+            utilities.verifyCSS(utilities.getNthElement(chartsDotPlotPage.dotColumnSelectChartType(), 4), {
+                'background-color': css.color.draggableOptionsContainerBg
+            });
+            utilities.verifyElementVisibilityState(chartsDotPlotPage.tooltipWrapperSelectChartType(), 'visible');
+            utilities.hoverAwayFromElement();
+            utilities.hoverOverElement(utilities.getNthElement(chartsDotPlotPage.dotColumnSpecifyCorrectAnswer(), 4));
+            utilities.verifyCSS(utilities.getNthElement(chartsDotPlotPage.dotColumnSpecifyCorrectAnswer(), 4), {
+                'background-color': css.color.draggableOptionsContainerBg
+            });
+            utilities.verifyElementVisibilityState(chartsDotPlotPage.tooltipWrapperSpecifyCorrectAnswer(), 'visible');
+            utilities.hoverAwayFromElement();
+        });
+
+        it('When user selects an empty dot column, tooltip with unlocked bar button, add button and minus button should be displayed and by default minus button should be displayed in disabled state and add button should be in enabled state', () => {
+            chartsDotPlotPage.steps.selectDotColumnInSelectChartTypeSection({ point: 0, min: -3, interval: 0.25 });
+            utilities.verifyElementVisibilityState(chartsDotPlotPage.tooltipWrapperSelectChartType(), 'visible');
+            utilities.verifyElementVisibilityState(chartsDotPlotPage.lockUnlockButtonSelectChartType(), 'visible');
+            chartsDotPlotPage.steps.verifyLockUnlockButtonIcon('Unlocked');
+            utilities.verifyElementVisibilityState(chartsDotPlotPage.addButtonSelectChartType(), 'visible');
+            utilities.verifyElementVisibilityState(chartsDotPlotPage.minusButtonSelectChartType(), 'visible');
+            utilities.verifyElementDisabled(chartsDotPlotPage.minusButtonSelectChartType());
+            utilities.verifyElementNotDisabled(chartsDotPlotPage.addButtonSelectChartType());
+            chartsDotPlotPage.steps.selectDotColumnInSpecifyCorrectAnswer({ point: 0, min: -3, interval: 0.25 });
+            utilities.verifyElementVisibilityState(chartsDotPlotPage.tooltipWrapperSpecifyCorrectAnswer(), 'visible');
+            utilities.verifyElementVisibilityState(chartsDotPlotPage.addButtonSpecifyCorrectAnswer(), 'visible');
+            utilities.verifyElementVisibilityState(chartsDotPlotPage.minusButtonSpecifyCorrectAnswer(), 'visible');
+            utilities.verifyElementDisabled(chartsDotPlotPage.minusButtonSpecifyCorrectAnswer());
+            utilities.verifyElementNotDisabled(chartsDotPlotPage.addButtonSpecifyCorrectAnswer());
+        });
+
+        it('When user hovers over unlocked bar button then \'Unlocked bar\' tooltip should be displayed', () => {
+            chartsDotPlotPage.steps.selectDotColumnInSelectChartTypeSection({ point: 0, min: -3, interval: 0.25 });
+            chartsDotPlotPage.steps.verifyTooltipInnerText(chartsDotPlotPage.lockUnlockButtonSelectChartType, 'Unlocked bar');
+            chartsDotPlotPage.steps.unselectDotColumnInSelectChartTypeSection({ point: 0, min: -3, interval: 0.25 });
+        });
+
+        it('When user hovers over add button then \'Add dot\' tooltip should be displayed', () => {
+            chartsDotPlotPage.steps.selectDotColumnInSelectChartTypeSection({ point: 0, min: -3, interval: 0.25 });
+            chartsDotPlotPage.steps.verifyTooltipInnerText(chartsDotPlotPage.addButtonSelectChartType, 'Add dot');
+            chartsDotPlotPage.steps.unselectDotColumnInSelectChartTypeSection({ point: 0, min: -3, interval: 0.25 });
+            chartsDotPlotPage.steps.selectDotColumnInSpecifyCorrectAnswer({ point: 0, min: -3, interval: 0.25 });
+            chartsDotPlotPage.steps.verifyTooltipInnerText(chartsDotPlotPage.addButtonSpecifyCorrectAnswer, 'Add dot');
+            chartsDotPlotPage.steps.unselectDotColumnInSpecifyCorrectAnswer({ point: 0, min: -3, interval: 0.25 });
+        });
+
+        it('When user hovers over minus button then \'Minus dot\' tooltip should be displayed', () => {
+            chartsDotPlotPage.steps.selectDotColumnInSelectChartTypeSection({ point: 0, min: -3, interval: 0.25 });
+            chartsDotPlotPage.steps.verifyTooltipInnerText(chartsDotPlotPage.minusButtonSelectChartType, 'Minus dot');
+            chartsDotPlotPage.steps.unselectDotColumnInSpecifyCorrectAnswer({ point: 0, min: -3, interval: 0.25 });
+            chartsDotPlotPage.steps.selectDotColumnInSpecifyCorrectAnswer({ point: 0, min: -3, interval: 0.25 });
+            chartsDotPlotPage.steps.verifyTooltipInnerText(chartsDotPlotPage.minusButtonSpecifyCorrectAnswer, 'Minus dot');
+            chartsDotPlotPage.steps.unselectDotColumnInSpecifyCorrectAnswer({ point: 0, min: -3, interval: 0.25 });
+        });
+
+        it('When user adds dots to empty dot column then added should be displayed and \'Minus dot\' button should be in enabled state in select chart type and specify correct answer section', () => {
+            chartsDotPlotPage.steps.selectDotColumnInSelectChartTypeSection({ point: 0, min: -3, interval: 0.25 });
+            chartsDotPlotPage.steps.increaseDotCountInDotColumnSelectChartTypeSection(1);
+            utilities.verifyElementNotDisabled(chartsDotPlotPage.minusButtonSelectChartType());
+            chartsDotPlotPage.steps.unselectDotColumnInSelectChartTypeSection({ point: 0, min: -3, interval: 0.25 });
+            chartsDotPlotPage.steps.selectDotColumnInSpecifyCorrectAnswer({ point: 0, min: -3, interval: 0.25 });
+            chartsDotPlotPage.steps.increaseDotCountInDotColumnSpecifyCorrectAnswer(1);
+            utilities.verifyElementNotDisabled(chartsDotPlotPage.minusButtonSpecifyCorrectAnswer());
+            chartsDotPlotPage.steps.unselectDotColumnInSpecifyCorrectAnswer({ point: 0, min: -3, interval: 0.25 });
+        });
+
+        it('When user clicks on enabled \'Minus dot\' button then previously added dot should disappear and \'Minus dot\' button should be displayed in disabled state again in select chart type and specify correct answer section', () => {
+            chartsDotPlotPage.steps.selectDotColumnInSelectChartTypeSection({ point: 0, min: -3, interval: 0.25 });
+            chartsDotPlotPage.steps.decreaseDotCountInDotColumnSelectChartTypeSection(1);
+            utilities.verifyElementDisabled(chartsDotPlotPage.minusButtonSelectChartType());
+            chartsDotPlotPage.steps.unselectDotColumnInSelectChartTypeSection({ point: 0, min: -3, interval: 0.25 });
+            chartsDotPlotPage.steps.selectDotColumnInSpecifyCorrectAnswer({ point: 0, min: -3, interval: 0.25 });
+            chartsDotPlotPage.steps.decreaseDotCountInDotColumnSpecifyCorrectAnswer(1);
+            utilities.verifyElementDisabled(chartsDotPlotPage.minusButtonSpecifyCorrectAnswer());
+            chartsDotPlotPage.steps.unselectDotColumnInSpecifyCorrectAnswer({ point: 0, min: -3, interval: 0.25 });
+        });
+
+        it('When user adds dots in dot column and locks it then locked icon should be displayed on dot column in select chart type section and specify correct answer section', () => {
+            chartsDotPlotPage.steps.plotDotsInDotColumnSelectChartTypeSection(1, { point: 0, min: -3, interval: 0.25, defaultDots: 0 });
+            chartsDotPlotPage.steps.lockDotColumn({ point: 0, min: -3, interval: 0.25 });
+            chartsDotPlotPage.steps.verifyLockedDotColumnSelectChartType({ point: 0, min: -3, interval: 0.25 });
+            chartsDotPlotPage.steps.verifyLockedDotColumnSpecifyCorrectAnswer({ point: 0, min: -3, interval: 0.25 });
+        });
+
+        it('When user has locked a dot column then unlocked bar button in tooltip should change to Locked bar button and when user hovers over it then \'Locked bar\' tooltip should be displayed', () => {
+            chartsDotPlotPage.steps.selectDotColumnInSelectChartTypeSection({ point: 0, min: -3, interval: 0.25 });
+            chartsDotPlotPage.steps.verifyLockUnlockButtonIcon('Locked');
+            chartsDotPlotPage.steps.verifyTooltipInnerText(chartsDotPlotPage.lockUnlockButtonSelectChartType, 'Locked bar');
+            chartsDotPlotPage.steps.unselectDotColumnInSelectChartTypeSection({ point: 0, min: -3, interval: 0.25 });
+        });
+
+        it('User should not be able to update dot count in locked dot column in specify correct answer section', () => {
+            chartsDotPlotPage.steps.verifyLockedDotColumnSpecifyCorrectAnswer({ point: 0, min: -3, interval: 0.25 });
+            chartsDotPlotPage.steps.verifyDotCountSpecifyCorrectAnswer(1, { point: 0, min: -3, interval: 0.25 });
+            chartsDotPlotPage.steps.selectDotColumnInSpecifyCorrectAnswer({ point: 0, min: -3, interval: 0.25 });
+            chartsDotPlotPage.steps.tooltipWrapperNotExistSpecifyCorrectAnswer();
+
+            chartsDotPlotPage.steps.increaseDotInDotColumnUsingKeyboardSpecifyCorrectAnswer(1, { point: 1, min: -3, interval: 0.25 });
+            chartsDotPlotPage.steps.verifyDotCountSpecifyCorrectAnswer(1, { point: 0, min: -3, interval: 0.25 });
+            chartsDotPlotPage.steps.decreaseDotInDotColumnUsingKeyboardSpecifyCorrectAnswer(1, { point: 0, min: -3, interval: 0.25 });
+            chartsDotPlotPage.steps.verifyDotCountSpecifyCorrectAnswer(1, { point: 0, min: -3, interval: 0.25 });
+        });
+
+        it('User should be able to update dot count in locked dot column in select chart type section', () => {
+            chartsDotPlotPage.steps.verifyLockedDotColumnSelectChartType({ point: 0, min: -3, interval: 0.25 });
+            chartsDotPlotPage.steps.selectDotColumnInSelectChartTypeSection({ point: 0, min: -3, interval: 0.25 });
+            utilities.verifyElementVisibilityState(chartsDotPlotPage.tooltipWrapperSelectChartType(), 'visible');
+            chartsDotPlotPage.steps.increaseDotCountInDotColumnSelectChartTypeSection(2, { point: 0, min: -3, interval: 0.25 });
+            chartsDotPlotPage.steps.unselectDotColumnInSelectChartTypeSection({ point: 0, min: -3, interval: 0.25 });
+            chartsDotPlotPage.steps.verifyDotCountSelectChartTypeSection(3, { point: 0, min: -3, interval: 0.25 });
+            chartsDotPlotPage.steps.verifyDotCountSpecifyCorrectAnswer(3, { point: 0, min: -3, interval: 0.25 });
+        });
+
+        it('When user unlocks the locked dot column then dot column should be displayed in unlocked state in select chart type and specify correct answer section and locked bar button should change to unlocked bar button in tooltip', () => {
+            chartsDotPlotPage.steps.unlockDotColumn({ point: 0, min: -3, interval: 0.25 });
+            chartsDotPlotPage.steps.selectDotColumnInSelectChartTypeSection({ point: 0, min: -3, interval: 0.25 });
+            chartsDotPlotPage.steps.verifyLockUnlockButtonIcon('Unlocked');
+            chartsDotPlotPage.steps.unselectDotColumnInSelectChartTypeSection({ point: 0, min: -3, interval: 0.25 });
+            chartsDotPlotPage.steps.verifyDotColumnIsUnlockedInSelectChartType({ point: 0, min: -3, interval: 0.25 });
+            chartsDotPlotPage.steps.verifyDotColumnIsUnlockedInSpecifyCorrectAnswer({ point: 0, min: -3, interval: 0.25 });
+        });
+
+        it('User should be able to add or remove dots in dot column using keyboard', () => {
+            chartsDotPlotPage.steps.selectDotColumnInSelectChartTypeSection({ point: 1, min: -3, interval: 0.25 });
+            chartsDotPlotPage.steps.increaseDotInDotColumnUsingKeyboardSelectChartType(3, { point: 1, min: -3, interval: 0.25 });
+            chartsDotPlotPage.steps.verifyDotCountSelectChartTypeSection(3, { point: 1, min: -3, interval: 0.25 });
+            chartsDotPlotPage.steps.decreaseDotInDotColumnUsingKeyboardSelectChartType(2, { point: 1, min: -3, interval: 0.25 });
+            chartsDotPlotPage.steps.verifyDotCountSelectChartTypeSection(1, { point: 1, min: -3, interval: 0.25 });
+            chartsDotPlotPage.steps.unselectDotColumnInSelectChartTypeSection({ point: 1, min: -3, interval: 0.25 });
+
+            chartsDotPlotPage.steps.selectDotColumnInSpecifyCorrectAnswer({ point: -1, min: -3, interval: 0.25 });
+            chartsDotPlotPage.steps.increaseDotInDotColumnUsingKeyboardSpecifyCorrectAnswer(3, { point: -1, min: -3, interval: 0.25 });
+            chartsDotPlotPage.steps.verifyDotCountSpecifyCorrectAnswer(3, { point: -1, min: -3, interval: 0.25 });
+            chartsDotPlotPage.steps.decreaseDotInDotColumnUsingKeyboardSpecifyCorrectAnswer(2, { point: -1, min: -3, interval: 0.25 });
+            chartsDotPlotPage.steps.verifyDotCountSpecifyCorrectAnswer(1, { point: -1, min: -3, interval: 0.25 });
+            chartsDotPlotPage.steps.unselectDotColumnInSpecifyCorrectAnswer({ point: -1, min: -3, interval: 0.25 });
+        });
+
+        it('When user tries to add more than 10 dots in a dot column then the user should be able to add only 10 dots after which \'Add\' button should be disabled', () => {
+            chartsDotPlotPage.steps.selectDotColumnInSelectChartTypeSection({ point: -1, min: -3, interval: 0.25 });
+            chartsDotPlotPage.steps.increaseDotCountInDotColumnSelectChartTypeSection(10, { point: -1, min: -3, interval: 0.25 });
+            chartsDotPlotPage.steps.verifyDotCountSelectChartTypeSection(10, { point: -1, min: -3, interval: 0.25 });
+            utilities.verifyElementDisabled(chartsDotPlotPage.addButtonSelectChartType());
+            chartsDotPlotPage.steps.unselectDotColumnInSelectChartTypeSection({ point: -1, min: -3, interval: 0.25 });
+            chartsDotPlotPage.steps.selectDotColumnInSpecifyCorrectAnswer({ point: -2, min: -3, interval: 0.25 });
+            chartsDotPlotPage.steps.increaseDotCountInDotColumnSpecifyCorrectAnswer(10, { point: -2, min: -3, interval: 0.25 });
+            chartsDotPlotPage.steps.verifyDotCountSpecifyCorrectAnswer(10, { point: -2, min: -3, interval: 0.25 });
+            utilities.verifyElementDisabled(chartsDotPlotPage.addButtonSpecifyCorrectAnswer());
+            chartsDotPlotPage.steps.unselectDotColumnInSpecifyCorrectAnswer({ point: -2, min: -3, interval: 0.25 });
+        });
+
+        it('When user removes dots from dot column having 10 dots then \'Add dot\' button should be in enabled state', () => {
+            chartsDotPlotPage.steps.selectDotColumnInSelectChartTypeSection({ point: -1, min: -3, interval: 0.25 });
+            chartsDotPlotPage.steps.decreaseDotCountInDotColumnSelectChartTypeSection(1, { point: -1, min: -3, interval: 0.25 });
+            chartsDotPlotPage.steps.verifyDotCountSelectChartTypeSection(9, { point: -1, min: -3, interval: 0.25 });
+            utilities.verifyElementNotDisabled(chartsDotPlotPage.addButtonSelectChartType());
+            chartsDotPlotPage.steps.unselectDotColumnInSelectChartTypeSection({ point: -1, min: -3, interval: 0.25 });
+            chartsDotPlotPage.steps.selectDotColumnInSpecifyCorrectAnswer({ point: -2, min: -3, interval: 0.25 });
+            chartsDotPlotPage.steps.decreaseDotCountInDotColumnSpecifyCorrectAnswer(1, { point: -2, min: -3, interval: 0.25 });
+            chartsDotPlotPage.steps.verifyDotCountSpecifyCorrectAnswer(9, { point: -2, min: -3, interval: 0.25 });
+            utilities.verifyElementNotDisabled(chartsDotPlotPage.addButtonSpecifyCorrectAnswer());
+            chartsDotPlotPage.steps.unselectDotColumnInSpecifyCorrectAnswer({ point: -2, min: -3, interval: 0.25 });
+        });
+
+        it('When user adds dot in dot column and does not lock the dot column then it should not be reflected in specify correct answer section', () => {
+            chartsDotPlotPage.steps.plotDotsInDotColumnSelectChartTypeSection(3, { point: 3, min: -3, interval: 0.25, defaultDots: 0 });
+            chartsDotPlotPage.steps.verifyDotCountSpecifyCorrectAnswer(0, { point: 3, min: -3, interval: 0.25 });
+        });
+
+        it('When user clicks on x axis label 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.clickOnXAxisLabelButton();
+            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 select chart type and specify correct answer section', () => {
+            chartsDotPlotPage.steps.enterTextInTitlePopupAddLabelInputField('Days');
+            chartsDotPlotPage.steps.clickOnTitlePopupCancelButton();
+            utilities.verifyInnerText(chartsDotPlotPage.selectChartTypeXAxisLabelButton(), 'Label');
+        });
+
+        it('When the user clicks on the X axis label then the original text should be displayed in the popup', () => {
+            chartsDotPlotPage.steps.clickOnXAxisLabelButton();
+            chartsDotPlotPage.steps.verifyTextInTitlePopupAddLabelInputField('Label');
+        });
+
+        it('When the user clicks on \'Save\' after updating the input field the updated label should be displayed in the select chart type and specify correct answer section', () => {
+            chartsDotPlotPage.steps.enterTextInTitlePopupAddLabelInputField('Days');
+            chartsDotPlotPage.steps.clickOnTitlePopupSaveButton();
+            utilities.verifyInnerText(chartsDotPlotPage.selectChartTypeXAxisLabelButton(), 'Days');
+            chartsDotPlotPage.steps.verifyXAxisLabelInSpecifyCorrectAnswer('Days');
+        });
+    });
+
+    describe('Select chart type - preview tab functionality', () => {
+        abortEarlySetup();
+        before(() => {
+            chartsDotPlotPage.steps.navigateToCreateQuestion('charts');
+            cy.barsPreLoaderWait();
+            chartsDotPlotPage.steps.selectDotPlot();
+        });
+
+        it('When the user edits the Graph title and clicks on \'Cancel\' button then the changes should not be displayed in preview tab', () => {
+            chartsDotPlotPage.steps.clickOnGraphTitleButton();
+            chartsDotPlotPage.steps.enterTextInTitlePopupAddLabelInputField('Number of Days');
+            chartsDotPlotPage.steps.clickOnTitlePopupCancelButton();
+            chartsDotPlotPage.steps.switchToPreviewTab();
+            utilities.verifyInnerText(chartsDotPlotPage.previewTabGraphTitle(), 'Graph title');
+        });
+
+        it('When the user clicks on \'Save\' after updating the input field the updated label should be displayed in preview tab', () => {
+            chartsDotPlotPage.steps.switchToEditTab();
+            chartsDotPlotPage.steps.clickOnGraphTitleButton();
+            chartsDotPlotPage.steps.enterTextInTitlePopupAddLabelInputField('Number of days');
+            chartsDotPlotPage.steps.clickOnTitlePopupSaveButton();
+            chartsDotPlotPage.steps.switchToPreviewTab();
+            utilities.verifyInnerText(chartsDotPlotPage.previewTabGraphTitle(), 'Number of days');
+        });
+
+        it('When user updates Min value then it should be updated on number line axis in preview tab', () => {
+            chartsDotPlotPage.steps.switchToEditTab();
+            chartsDotPlotPage.steps.enterTextInMinInputField(-3);
+            chartsDotPlotPage.steps.switchToPreviewTab();
+            chartsDotPlotPage.steps.verifyMinOnNumberLineAxisPreviewTab(-3);
+        });
+
+        it('When user updates Max value then it should be updated on number line axis in preview tab', () => {
+            chartsDotPlotPage.steps.switchToEditTab();
+            chartsDotPlotPage.steps.enterTextInMaxInputField(3);
+            chartsDotPlotPage.steps.switchToPreviewTab();
+            chartsDotPlotPage.steps.verifyMaxOnNumberLineAxisPreviewTab(3);
+        });
+
+        it('User should be able add dots and remove dots from dot column in preview tab', () => {
+            chartsDotPlotPage.steps.plotDotsInDotColumnPreviewTab(5, { point: 0, min: -3, interval: 0.25, defaultDots: 0 });
+            chartsDotPlotPage.steps.selectDotColumnInPreviewTab({ point: 0, min: -3, interval: 0.25 });
+            chartsDotPlotPage.steps.decreaseDotInDotColumnUsingKeyboardPreviewTab(2, { point: 0, min: -3, interval: 0.25 });
+            chartsDotPlotPage.steps.verifyDotCountPreviewTab(3, { point: 0, min: -3, interval: 0.25 });
+            chartsDotPlotPage.steps.unselectDotColumnInPreviewTab({ point: 0, min: -3, interval: 0.25 });
+        });
+
+        it('When user adds dots in dot column and locks it then locked icon should be displayed on dot column in preview tab', () => {
+            chartsDotPlotPage.steps.switchToEditTab();
+            chartsDotPlotPage.steps.plotDotsInDotColumnSelectChartTypeSection(2, { point: 1, min: -3, interval: 0.25, defaultDots: 0 });
+            chartsDotPlotPage.steps.lockDotColumn({ point: 1, min: -3, interval: 0.25 });
+            chartsDotPlotPage.steps.switchToPreviewTab();
+            chartsDotPlotPage.steps.verifyLockedDotColumnPreviewTab({ point: 1, min: -3, interval: 0.25 });
+        });
+
+        it('User should not be able to update dot count in locked dot column in preview tab', () => {
+            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 unlocks the locked dot column then dot column should be displayed in unlocked state in preview tab', () => {
+            chartsDotPlotPage.steps.switchToEditTab();
+            chartsDotPlotPage.steps.unlockDotColumn({ point: 1, min: -3, interval: 0.25 });
+            chartsDotPlotPage.steps.switchToPreviewTab();
+            chartsDotPlotPage.steps.verifyDotColumnIsUnlockedInPreviewTab({ point: 1, min: -3, interval: 0.25 });
+        });
+
+        it('When user adds dot in dot column and does not lock the dot column then it should be reflected in preview tab', () => {
+            chartsDotPlotPage.steps.switchToEditTab();
+            chartsDotPlotPage.steps.plotDotsInDotColumnSelectChartTypeSection(2, { point: 2, min: -3, interval: 0.25, defaultDots: 0 });
+            chartsDotPlotPage.steps.switchToPreviewTab();
+            chartsDotPlotPage.steps.verifyDotCountPreviewTab(2, { point: 2, min: -3, interval: 0.25 });
+            chartsDotPlotPage.steps.verifyDotColumnIsUnlockedInPreviewTab({ point: 2, min: -3, interval: 0.25 });
+        });
+
+        it('When user updates dot count in select chart type then dot count should be updated in preview tab', () => {
+            chartsDotPlotPage.steps.switchToEditTab();
+            chartsDotPlotPage.steps.plotDotsInDotColumnSelectChartTypeSection(4, { point: 2, min: -3, interval: 0.25, defaultDots: 0 });
+            chartsDotPlotPage.steps.switchToPreviewTab();
+            chartsDotPlotPage.steps.verifyDotCountPreviewTab(4, { point: 2, min: -3, interval: 0.25 });
+        });
+
+        it('When the user edits the X axis label and clicks on \'Cancel\' button then the changes should not be displayed in preview tab', () => {
+            chartsDotPlotPage.steps.switchToEditTab();
+            chartsDotPlotPage.steps.clickOnXAxisLabelButton();
+            chartsDotPlotPage.steps.enterTextInTitlePopupAddLabelInputField('Days');
+            chartsDotPlotPage.steps.clickOnTitlePopupCancelButton();
+            utilities.verifyInnerText(chartsDotPlotPage.previewTabXAxisLabelButton(), 'Label');
+        });
+
+        it('When the user clicks on \'Save\' after updating the input field the updated label should be displayed in preview tab', () => {
+            chartsDotPlotPage.steps.switchToEditTab();
+            chartsDotPlotPage.steps.clickOnXAxisLabelButton();
+            chartsDotPlotPage.steps.enterTextInTitlePopupAddLabelInputField('Days');
+            chartsDotPlotPage.steps.clickOnTitlePopupSaveButton();
+            utilities.verifyInnerText(chartsDotPlotPage.previewTabXAxisLabelButton(), 'Days');
+        });
+    });
+});

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

@@ -2,9 +2,8 @@ import { chartsDotPlotPage } from "../../../pages";
 import abortEarlySetup from "../../../support/helpers/abortEarly";
 import utilities from "../../../support/helpers/utilities";
 const css = Cypress.env('css');
-const range = 20.75;
 
-describe('Create Item page - Charts - Dot plot : Student view settings', () => {
+/*describe('Create Item page - Charts - Dot plot : Student view settings', () => {
     before(() => {
         cy.loginAs('admin');
     });
@@ -138,4 +137,4 @@ describe('Create Item page - Charts - Dot plot : Student view settings', () => {
             chartsDotPlotPage.steps.verifyCheckAnswerButtonEnabled();
         });
     });
-});
+});*/

package/cypress/fixtures/drawingToolbarOptionsAdditionalOptionsAndSpecialAndMathCharacters.js

@@ -32,7 +32,7 @@ export const drawingToolbarOptionsAndAdditionalOptions = {
             toolType: 'dialog'
         },
         {
-            displayName: 'Insert image',
+            displayName: 'Upload image',
             tooltipText: 'Upload an imageUpload an image from your device',
             toolType: 'dialog'
         },

package/cypress/fixtures/fillColorDefaultProperties.js

@@ -25,8 +25,8 @@ export const gridFillColorProperties = {
         displayName: 'Filled',
         colorProperties: {
             fillColorHexValue: '#6B8BFF',
-            fillColorRgbaValue: 'rgba(107, 139, 255, 0.7)',
-            fillColorOpacity: 70,
+            fillColorRgbaValue: 'rgb(107, 139, 255)',
+            fillColorOpacity: 100,
             borderColorHexValue: '#290080',
             borderColorRgbValue: 'rgb(41, 0, 128)',
             borderColorOpacity: 100