itemengine-cypress-automation 1.0.193-packageUpdated-b3f3d0b.0 → 1.0.193

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

@@ -0,0 +1,595 @@
+import { chartsLinePage, itemPreviewPage } from "../../../pages";
+import abortEarlySetup from "../../../support/helpers/abortEarly";
+import utilities from "../../../support/helpers/utilities";
+const css = Cypress.env('css');
+
+const previewContentViews = ['Question preview'];
+const views = utilities.getViews(previewContentViews);
+var itemReferenceID = "";
+
+describe('Create item page: Charts - Line - Preview contents in all views', () => {
+    before(() => {
+        cy.loginAs('admin');
+    });
+
+    views.forEach((view) => {
+        describe(`Preview tab contents - Edit line graphs, graph labels, locked graph ${view}`, { tags: 'smoke' }, () => {
+            abortEarlySetup();
+            before(() => {
+                switch (view) {
+                    case 'Question preview':
+                        chartsLinePage.steps.navigateToCreateQuestion('charts');
+                        cy.barsPreLoaderWait();
+                        chartsLinePage.steps.addTextInQuestionInstructionsInputField('Set the points on the chart for the profits of the years');
+                        chartsLinePage.steps.selectLineButton();
+                        chartsLinePage.steps.selectAddBarOrPointToolbarOption();
+                        chartsLinePage.steps.addBarOrPointInChartInSelectChartTypeSection();
+                        chartsLinePage.steps.setGraphTitle('Graph of profits');
+                        chartsLinePage.steps.setYAxisLabel('Profit');
+                        chartsLinePage.steps.setXAxisLabel('Year');
+                        chartsLinePage.steps.setMaxYValue(20);
+                        chartsLinePage.steps.setPointValueInSelectChartTypeSection({ pointIndex: 0, value: 1, range: 20 });
+                        chartsLinePage.steps.setPointValueInSelectChartTypeSection({ pointIndex: 1, value: 2, range: 20 });
+                        chartsLinePage.steps.setPointValueInSelectChartTypeSection({ pointIndex: 2, value: 3, range: 20 });
+                        chartsLinePage.steps.setPointValueInSelectChartTypeSection({ pointIndex: 3, value: 4, range: 20 });
+                        chartsLinePage.steps.lockPoint(1);
+                        chartsLinePage.steps.allotPoints(10);
+                        chartsLinePage.steps.setPointValueInSpecifyCorrectAnswerSection({ pointIndex: 0, value: 2, range: 20 });
+                        chartsLinePage.steps.setPointValueInSpecifyCorrectAnswerSection({ pointIndex: 2, value: 5, range: 20 });
+                        chartsLinePage.steps.setPointValueInSpecifyCorrectAnswerSection({ pointIndex: 3, value: 1, range: 20 });
+                        chartsLinePage.steps.addBarOrPointInChartInSpecifyCorrectAnswerSection();
+                        chartsLinePage.steps.setPointValueInSpecifyCorrectAnswerSection({ pointIndex: 4, value: 8, range: 20 });
+                        chartsLinePage.steps.switchToPreviewTab();
+                        break;
+                    case 'Item view':
+                        cy.visit(`/item-engine/demo/edit-item/${utilities.base64Encoding(itemReferenceID)}`);
+                        break;
+                    case 'Item preview':
+                        cy.visit(`/item-engine/demo/edit-item/${utilities.base64Encoding(itemReferenceID)}`);
+                        chartsLinePage.steps.switchToPreviewTab();
+                        break;
+                    case 'Student view':
+                        cy.visit(`/item-engine/demo/render-item/student-view/${utilities.base64Encoding(itemReferenceID)}`);
+                        break;
+                    default:
+                        throw new Error('Invalid view');
+                }
+            });
+
+            after(() => {
+                if (view === 'Question preview') {
+                    chartsLinePage.steps.clickOnSaveQuestionButton();
+                    utilities.verifyElementVisibilityState(itemPreviewPage.referenceID(), 'visible');
+                    itemReferenceID = itemPreviewPage.steps.getItemReferenceID();
+                }
+            });
+
+            it('Question instructions should be visible', () => {
+                utilities.verifyInnerText(chartsLinePage.questionInstructionsText(), 'Set the points on the chart for the profits of the years');
+                utilities.verifyElementVisibilityState(chartsLinePage.questionInstructionsText(), 'visible');
+            });
+
+            it('The toolbar options - Add point, Undo, Redo and Reset should be displayed in the preview tab and only Add point button should be enabled', () => {
+                utilities.verifyElementVisibilityState(chartsLinePage.previewTabToolsAddBarOrPointButton(), 'visible');
+                utilities.verifyElementNotDisabled(chartsLinePage.previewTabToolsAddBarOrPointButton());
+                utilities.verifyElementVisibilityState(chartsLinePage.previewTabToolsUndoButton(), 'visible');
+                utilities.verifyElementDisabled(chartsLinePage.previewTabToolsUndoButton());
+                utilities.verifyElementVisibilityState(chartsLinePage.previewTabToolsRedoButton(), 'visible');
+                utilities.verifyElementDisabled(chartsLinePage.previewTabToolsRedoButton());
+                utilities.verifyElementVisibilityState(chartsLinePage.previewTabToolsResetButton(), 'visible');
+                utilities.verifyElementDisabled(chartsLinePage.previewTabToolsResetButton());
+            });
+
+            it('The graph title, Y axis label, X axis label and point labels should be displayed', () => {
+                utilities.verifyInnerText(chartsLinePage.previewTabGraphTitle(), 'Graph of profits');
+                utilities.verifyElementVisibilityState(chartsLinePage.previewTabGraphTitle(), 'visible');
+                utilities.verifyInnerText(chartsLinePage.previewTabYAxisLabelButton(), 'Profit');
+                utilities.verifyElementVisibilityState(chartsLinePage.previewTabYAxisLabelButton(), 'visible');
+                utilities.verifyInnerText(chartsLinePage.previewTabXAxisLabelButton(), 'Year');
+                utilities.verifyElementVisibilityState(chartsLinePage.previewTabXAxisLabelButton(), 'visible');
+                utilities.verifyInnerText(utilities.getNthElement(chartsLinePage.previewTabPointLabel(), 0), 'Bar 1');
+                utilities.verifyInnerText(utilities.getNthElement(chartsLinePage.previewTabPointLabel(), 1), 'Bar 2');
+                utilities.verifyInnerText(utilities.getNthElement(chartsLinePage.previewTabPointLabel(), 2), 'Bar 3');
+                utilities.verifyInnerText(utilities.getNthElement(chartsLinePage.previewTabPointLabel(), 3), '1');
+            });
+
+            it('The graph max value should be as set in the Max Y input field and it should affect the chart division', () => {
+                utilities.verifyTextContent(utilities.getNthElement(chartsLinePage.previewTabYAxisCoordinate(), 0), 20);
+                utilities.verifyElementCount(chartsLinePage.previewTabChartRowHeaderContainer(), 21);
+            });
+
+            it('User should be able to edit the Y axis and X axis labels in preview tab', () => {
+                chartsLinePage.steps.editYAxisLabelInPreviewTab('Edited Y axis label');
+                utilities.verifyInnerText(chartsLinePage.previewTabYAxisLabelButton(), 'Edited Y axis label');
+                chartsLinePage.steps.editXAxisLabelInPreviewTab('Edited X axis label');
+                utilities.verifyInnerText(chartsLinePage.previewTabXAxisLabelButton(), 'Edited X axis label');
+            });
+
+            it('The charts and graphs should be visible as set by the user in select chart type section', () => {
+                chartsLinePage.steps.verifyPointValueInPreviewTab({ pointIndex: 0, value: 1, range: 20 });
+                chartsLinePage.steps.verifyPointValueInPreviewTab({ pointIndex: 1, value: 2, range: 20 });
+                chartsLinePage.steps.verifyPointValueInPreviewTab({ pointIndex: 2, value: 3, range: 20 });
+                chartsLinePage.steps.verifyPointValueInPreviewTab({ pointIndex: 3, value: 4, range: 20 });
+            });
+
+            it('The locked point should be displayed in the locked state in preview tab and it should not have a drag handle', () => {
+                chartsLinePage.steps.verifyPointIsLockedInPreviewTab(1);
+            });
+
+            it('User should not be able to edit the locked point height', () => {
+                chartsLinePage.steps.verifyLockedPointIsUneditableInPreviewTab(1);
+            });
+
+            it('User should be able to increase the point height in preview tab', () => {
+                chartsLinePage.steps.setPointValueInPreviewTab({ pointIndex: 0, value: 20, range: 20 });
+            });
+
+            it('User should be able to decrease the height of the point in preview tab', () => {
+                chartsLinePage.steps.setPointValueInPreviewTab({ pointIndex: 2, value: 0, range: 20 });
+            });
+
+            it('When point is at the topmost value and the user still tries to increase its value, then the point value should not increase', () => {
+                chartsLinePage.steps.keyBoardUpPointInPreviewTab(0);
+                chartsLinePage.steps.keyBoardUpPointInPreviewTab(0);
+                chartsLinePage.steps.verifyPointValueInPreviewTab({ pointIndex: 0, value: 20, range: 20 });
+            });
+
+            it('When point is at the bottommost value and the user still tries to decrease its value, then the point value should not decrease', () => {
+                chartsLinePage.steps.keyBoardDownPointInPreviewTab(2);
+                chartsLinePage.steps.keyBoardDownPointInPreviewTab(2);
+                chartsLinePage.steps.verifyPointValueInPreviewTab({ pointIndex: 2, value: 0, range: 20 });
+            });
+
+            chartsLinePage.tests.verifyPointTooltipContentsCSSAndA11yInPreviewTab('0', 'Bar 1');
+
+            it('User should be able to edit the point label', () => {
+                chartsLinePage.steps.editPointLabelInPreviewTab(0, '2000');
+            });
+
+            it('CSS of preview tab contents', { tags: 'css' }, () => {
+                utilities.verifyCSS(chartsLinePage.previewTabToolsAddBarOrPointButton(), {
+                    'background-color': css.color.activeButtons
+                });
+                utilities.verifyCSS(chartsLinePage.previewTabGraphTitle(), {
+                    'color': css.color.text,
+                    'font-size': css.fontSize.default,
+                    'font-weight': css.fontWeight.bold
+                });
+                utilities.verifyCSS(chartsLinePage.previewTabYAxisLabelButton(), {
+                    'color': css.color.activeButtons,
+                    'font-size': css.fontSize.default,
+                    'font-weight': css.fontWeight.bold
+                });
+                utilities.verifyCSS(chartsLinePage.previewTabXAxisLabelButton(), {
+                    'color': css.color.activeButtons,
+                    'font-size': css.fontSize.default,
+                    'font-weight': css.fontWeight.bold
+                });
+                utilities.verifyCSS(chartsLinePage.previewTabPointLabel(), {
+                    'color': css.color.text,
+                    'font-size': css.fontSize.default,
+                    'font-weight': css.fontWeight.semibold
+                });
+                utilities.verifyCSS(chartsLinePage.previewTabYAxisCoordinate(), {
+                    'color': css.color.text,
+                    'font-size': css.fontSize.normal,
+                    'font-weight': css.fontWeight.semibold
+                });
+                utilities.verifyCSS(chartsLinePage.previewTabPoint().eq(0), {
+                    'background-color': css.color.lineChartDragIcon
+                });
+                utilities.verifyCSS(chartsLinePage.previewTabConnectorLine().eq(0), {
+                    'background-color': css.color.lineChartConnectorLine
+                });
+                utilities.verifyCSS(chartsLinePage.pointLockIcon(), {
+                    'background-color': css.color.defaultBackground,
+                });
+            });
+
+            it('Accessibility of preview tab contents', { tags: 'a11y' }, () => {
+                cy.checkAccessibility(chartsLinePage.previewTabGraphTitle().parents('[class*="ChartsPreviewstyles__PreviewWrapper"]'));
+            });
+        });
+    });
+
+    views.forEach((view) => {
+        describe(`Preview tab contents - Add and delete point ${view}`, { tags: 'smoke' }, () => {
+            abortEarlySetup();
+            before(() => {
+                switch (view) {
+                    case 'Question preview':
+                        chartsLinePage.steps.navigateToCreateQuestion('charts');
+                        cy.barsPreLoaderWait();
+                        chartsLinePage.steps.addTextInQuestionInstructionsInputField('Set the point on the chart for the profits of the years');
+                        chartsLinePage.steps.selectLineButton();
+                        chartsLinePage.steps.selectAddBarOrPointToolbarOption();
+                        chartsLinePage.steps.setPointValueInSelectChartTypeSection({ pointIndex: 0, value: 1, range: 10 });
+                        chartsLinePage.steps.setPointValueInSelectChartTypeSection({ pointIndex: 1, value: 2, range: 10 });
+                        chartsLinePage.steps.setPointValueInSelectChartTypeSection({ pointIndex: 2, value: 3, range: 10 });
+                        chartsLinePage.steps.allotPoints(10);
+                        chartsLinePage.steps.setPointValueInSpecifyCorrectAnswerSection({ pointIndex: 0, value: 2, range: 10 });
+                        chartsLinePage.steps.setPointValueInSpecifyCorrectAnswerSection({ pointIndex: 1, value: 4, range: 10 });
+                        chartsLinePage.steps.setPointValueInSpecifyCorrectAnswerSection({ pointIndex: 2, value: 5, range: 10 });
+                        chartsLinePage.steps.switchToPreviewTab();
+                        break;
+                    case 'Item view':
+                        cy.visit(`/item-engine/demo/edit-item/${utilities.base64Encoding(itemReferenceID)}`);
+                        break;
+                    case 'Item preview':
+                        cy.visit(`/item-engine/demo/edit-item/${utilities.base64Encoding(itemReferenceID)}`);
+                        chartsLinePage.steps.switchToPreviewTab();
+                        break;
+                    case 'Student view':
+                        cy.visit(`/item-engine/demo/render-item/student-view/${utilities.base64Encoding(itemReferenceID)}`);
+                        break;
+                    default:
+                        throw new Error('Invalid view');
+                }
+            });
+
+            after(() => {
+                if (view === 'Question preview') {
+                    chartsLinePage.steps.clickOnSaveQuestionButton();
+                    utilities.verifyElementVisibilityState(itemPreviewPage.referenceID(), 'visible');
+                    itemReferenceID = itemPreviewPage.steps.getItemReferenceID();
+                }
+            });
+
+            it('When user hovers on the enabled add point button, then tooltip \'Add point\' should be displayed', () => {
+                chartsLinePage.previewTabToolsAddBarOrPointButton()
+                    .verifyTooltip('Add point');
+            });
+
+            it('CSS of the tooltip text', { tags: 'css' }, () => {
+                utilities.hoverOverElement(chartsLinePage.previewTabToolsAddBarOrPointButton());
+                utilities.verifyCSS(chartsLinePage.tooltipText(), {
+                    'color': css.color.whiteText,
+                    'font-size': css.fontSize.small,
+                    'font-weight': css.fontWeight.regular,
+                    'background-color': css.color.tooltipBg
+                });
+                utilities.hoverAwayFromElement();
+            });
+
+            it('Accessibility of the tooltip text', { tags: 'a11y' }, () => {
+                utilities.hoverOverElement(chartsLinePage.previewTabToolsAddBarOrPointButton());
+                utilities.verifyElementVisibilityState(chartsLinePage.tooltipText(), 'visible');
+                cy.checkAccessibility(chartsLinePage.tooltipText().parents('[role="tooltip"]'));
+                utilities.hoverAwayFromElement();
+                utilities.verifyElementVisibilityState(chartsLinePage.tooltipText(), 'notExist');
+            });
+
+            it('User should be able to add a point in chart and the added point should be displayed at 0 height with the label \'4\'', () => {
+                chartsLinePage.steps.addBarOrPointInChartInPreviewTab();
+                utilities.verifyElementCount(chartsLinePage.previewTabPoint(), 4);
+                chartsLinePage.steps.verifyPointValueInPreviewTab({ pointIndex: 3, value: 0, range: 20 });
+                utilities.verifyInnerText(utilities.getNthElement(chartsLinePage.previewTabPointLabel(), 3), '1');
+            });
+
+            it('CSS of newly added point in preview tab', { tags: 'css' }, () => {
+                utilities.verifyCSS(chartsLinePage.previewTabPoint().eq(4).find('.line-chart-drag-icon'), {
+                    'background-color': css.color.lineChartDragIcon
+                });
+            });
+
+            it('Accessibility of newly added point in preview tab', { tags: 'a11y' }, () => {
+                cy.checkAccessibility(chartsLinePage.previewTabGraphTitle().parents('[class*="ChartsPreviewstyles__PreviewWrapper"]'));
+            });
+
+            it('When user deletes a point, then that point should be deleted and the add point button should be enabled again', () => {
+                chartsLinePage.steps.deletePointInPreviewTab(3);
+                utilities.verifyElementCount(chartsLinePage.previewTabPoint(), 3);
+                utilities.verifyElementVisibilityState(utilities.getNthElement(chartsLinePage.previewTabPointLabel(), 4), 'notExist');
+            });
+        });
+    });
+
+    views.forEach((view) => {
+        describe(`Preview tab contents - Undo, Redo and Reset buttons ${view}`, { tags: 'smoke' }, () => {
+            abortEarlySetup();
+            before(() => {
+                switch (view) {
+                    case 'Question preview':
+                        chartsLinePage.steps.navigateToCreateQuestion('charts');
+                        cy.barsPreLoaderWait();
+                        chartsLinePage.steps.addTextInQuestionInstructionsInputField('Set the point on the chart for the profits of the years');
+                        chartsLinePage.steps.selectLineButton();
+                        chartsLinePage.steps.selectAddBarOrPointToolbarOption();
+                        chartsLinePage.steps.addBarOrPointInChartInSelectChartTypeSection();
+                        chartsLinePage.steps.setPointValueInSelectChartTypeSection({ pointIndex: 0, value: 1, range: 10 });
+                        chartsLinePage.steps.setPointValueInSelectChartTypeSection({ pointIndex: 1, value: 2, range: 10 });
+                        chartsLinePage.steps.setPointValueInSelectChartTypeSection({ pointIndex: 2, value: 3, range: 10 });
+                        chartsLinePage.steps.setPointValueInSelectChartTypeSection({ pointIndex: 3, value: 4, range: 10 });
+                        chartsLinePage.steps.allotPoints(10);
+                        chartsLinePage.steps.setPointValueInSpecifyCorrectAnswerSection({ pointIndex: 0, value: 2, range: 10 });
+                        chartsLinePage.steps.setPointValueInSpecifyCorrectAnswerSection({ pointIndex: 1, value: 4, range: 10 });
+                        chartsLinePage.steps.setPointValueInSpecifyCorrectAnswerSection({ pointIndex: 2, value: 5, range: 10 });
+                        chartsLinePage.steps.setPointValueInSpecifyCorrectAnswerSection({ pointIndex: 3, value: 1, range: 10 });
+                        chartsLinePage.steps.switchToPreviewTab();
+                        break;
+                    case 'Item view':
+                        cy.visit(`/item-engine/demo/edit-item/${utilities.base64Encoding(itemReferenceID)}`);
+                        break;
+                    case 'Item preview':
+                        cy.visit(`/item-engine/demo/edit-item/${utilities.base64Encoding(itemReferenceID)}`);
+                        chartsLinePage.steps.switchToPreviewTab();
+                        break;
+                    case 'Student view':
+                        cy.visit(`/item-engine/demo/render-item/student-view/${utilities.base64Encoding(itemReferenceID)}`);
+                        break;
+                    default:
+                        throw new Error('Invalid view');
+                }
+            });
+
+            after(() => {
+                if (view === 'Question preview') {
+                    chartsLinePage.steps.clickOnSaveQuestionButton();
+                    utilities.verifyElementVisibilityState(itemPreviewPage.referenceID(), 'visible');
+                    itemReferenceID = itemPreviewPage.steps.getItemReferenceID();
+                }
+            });
+
+            //Point labels
+            it('When user updates a point label, then the undo and reset button should be displayed in enabled state', () => {
+                chartsLinePage.steps.editPointLabelInPreviewTab(0, 'Edited point 1');
+                utilities.verifyElementNotDisabled(chartsLinePage.previewTabToolsUndoButton());
+                utilities.verifyElementNotDisabled(chartsLinePage.previewTabToolsResetButton());
+            });
+
+            it('When user hovers on the enabled undo and reset button, then tooltips \'Undo\' and \'Reset\' should be displayed', () => {
+                chartsLinePage.previewTabToolsUndoButton()
+                    .verifyTooltip('Undo');
+                chartsLinePage.previewTabToolsResetButton()
+                    .verifyTooltip('Reset');
+            });
+
+            it('CSS of the tooltip text', { tags: 'css' }, () => {
+                utilities.triggerMouseover(chartsLinePage.previewTabToolsUndoButton());
+                utilities.verifyCSS(chartsLinePage.tooltipText(), {
+                    'color': css.color.whiteText,
+                    'font-size': css.fontSize.small,
+                    'font-weight': css.fontWeight.regular,
+                    'background-color': css.color.tooltipBg
+                });
+                utilities.triggerMouseout(chartsLinePage.previewTabToolsUndoButton());
+                utilities.triggerMouseover(chartsLinePage.previewTabToolsResetButton());
+                utilities.verifyCSS(chartsLinePage.tooltipText(), {
+                    'color': css.color.whiteText,
+                    'font-size': css.fontSize.small,
+                    'font-weight': css.fontWeight.regular,
+                    'background-color': css.color.tooltipBg
+                });
+                utilities.triggerMouseout(chartsLinePage.previewTabToolsResetButton());
+            });
+
+            it('Accessibility of the tooltip text', { tags: 'a11y' }, () => {
+                utilities.triggerMouseover(chartsLinePage.previewTabToolsUndoButton());
+                utilities.verifyElementVisibilityState(chartsLinePage.tooltipText(), 'visible');
+                cy.checkAccessibility(chartsLinePage.tooltipText().parents('[role="tooltip"]'));
+                utilities.triggerMouseout(chartsLinePage.previewTabToolsUndoButton());
+                utilities.verifyElementVisibilityState(chartsLinePage.tooltipText(), 'notExist');
+                utilities.triggerMouseover(chartsLinePage.previewTabToolsResetButton());
+                utilities.verifyElementVisibilityState(chartsLinePage.tooltipText(), 'visible');
+                cy.checkAccessibility(chartsLinePage.tooltipText().parents('[role="tooltip"]'));
+                utilities.triggerMouseout(chartsLinePage.previewTabToolsResetButton());
+                utilities.verifyElementVisibilityState(chartsLinePage.tooltipText(), 'notExist');
+            });
+
+            it('When user clicks on a undo button, then the previously performed action should be reverted', () => {
+                chartsLinePage.steps.clickOnUndoButtonPreviewTab();
+                utilities.verifyInnerText(utilities.getNthElement(chartsLinePage.previewTabPointLabel(), 0), 'Bar 1');
+            });
+
+            it('When user has clicked on undo button, then the redo button should be enabled', () => {
+                utilities.verifyElementNotDisabled(chartsLinePage.previewTabToolsRedoButton());
+            });
+
+            it('When user hovers on the enabled redo button, then tooltip \'Redo\' should be displayed', () => {
+                chartsLinePage.previewTabToolsRedoButton()
+                    .verifyTooltip('Redo');
+            });
+
+            it('CSS of the tooltip text', { tags: 'css' }, () => {
+                utilities.triggerMouseover(chartsLinePage.previewTabToolsRedoButton());
+                utilities.verifyCSS(chartsLinePage.tooltipText(), {
+                    'color': css.color.whiteText,
+                    'font-size': css.fontSize.small,
+                    'font-weight': css.fontWeight.regular,
+                    'background-color': css.color.tooltipBg
+                });
+                utilities.triggerMouseout(chartsLinePage.previewTabToolsRedoButton());
+            });
+
+            it('Accessibility of the tooltip text', { tags: 'a11y' }, () => {
+                utilities.triggerMouseover(chartsLinePage.previewTabToolsRedoButton());
+                utilities.verifyElementVisibilityState(chartsLinePage.tooltipText(), 'visible');
+                cy.checkAccessibility(chartsLinePage.tooltipText().parents('[role="tooltip"]'));
+                utilities.triggerMouseout(chartsLinePage.previewTabToolsRedoButton());
+                utilities.verifyElementVisibilityState(chartsLinePage.tooltipText(), 'notExist');
+            });
+
+            it('When the user clicks on redo button, then the last reverted action should be performed again and the button should be disabled and undo button should be enabled', () => {
+                chartsLinePage.steps.clickOnRedoButtonPreviewTab();
+                utilities.verifyInnerText(utilities.getNthElement(chartsLinePage.previewTabPointLabel(), 0), 'Edited point 1');
+                utilities.verifyElementDisabled(chartsLinePage.previewTabToolsRedoButton());
+                utilities.verifyElementNotDisabled(chartsLinePage.previewTabToolsUndoButton());
+            });
+
+            it('When user performs more than 1 actions and then clicks on undo button, then undo button should be enabled' ,() => {
+                cy.log('Pre-step: Reset the chart');
+                chartsLinePage.steps.clickOnResetButtonPreviewTab();
+                chartsLinePage.steps.confirmReset();
+                chartsLinePage.steps.editPointLabelInPreviewTab(0, 'Edited point 1');
+                chartsLinePage.steps.editPointLabelInPreviewTab(1, 'Edited point 2');
+                chartsLinePage.steps.clickOnUndoButtonPreviewTab();
+                utilities.verifyElementNotDisabled(chartsLinePage.previewTabToolsUndoButton());
+            });
+
+            it('When the user clicks on undo button until the graph reaches its initial state, then the undo button should be disabled', () => {
+                chartsLinePage.steps.clickOnUndoButtonPreviewTab();
+                utilities.verifyElementDisabled(chartsLinePage.previewTabToolsUndoButton());
+            });
+
+            //Point value/height
+            it('When user updates a point value and clicks on undo button, then the previously performed action should be reverted', () => {
+                cy.log('Pre-step: Reset the chart');
+                chartsLinePage.steps.clickOnResetButtonPreviewTab();
+                chartsLinePage.steps.confirmReset();
+                chartsLinePage.steps.setPointValueInPreviewTab({ pointIndex: 0, value: 4, range: 10 });
+                chartsLinePage.steps.clickOnUndoButtonPreviewTab();
+                chartsLinePage.steps.verifyPointValueInPreviewTab({ pointIndex: 0, value: 3, range: 10 });
+            });
+
+            it('When user has clicked on undo button, then the redo button should be enabled', () => {
+                utilities.verifyElementNotDisabled(chartsLinePage.previewTabToolsRedoButton());
+            });
+
+            it('When the user clicks on redo button, then the last reverted action should be performed again and the button should be disabled and undo button should be enabled', () => {
+                chartsLinePage.steps.clickOnRedoButtonPreviewTab();
+                chartsLinePage.steps.verifyPointValueInPreviewTab({ pointIndex: 0, value: 4, range: 10 });
+                utilities.verifyElementDisabled(chartsLinePage.previewTabToolsRedoButton());
+                utilities.verifyElementNotDisabled(chartsLinePage.previewTabToolsUndoButton());
+            });
+
+            it('When user performs more than 1 actions and then clicks on undo button, then undo button should be enabled' ,() => {
+                cy.log('Reset the chart');
+                chartsLinePage.steps.clickOnResetButtonPreviewTab();
+                chartsLinePage.steps.confirmReset();
+                chartsLinePage.steps.setPointValueInPreviewTab({ pointIndex: 0, value: 3, range: 10 });
+                chartsLinePage.steps.clickOnUndoButtonPreviewTab();
+                utilities.verifyElementNotDisabled(chartsLinePage.previewTabToolsUndoButton());
+            });
+
+            it('When the user clicks on undo button until the graph reaches its initial state, then the undo button should be disabled', () => {
+                chartsLinePage.steps.clickOnUndoButtonPreviewTab();
+                utilities.verifyElementDisabled(chartsLinePage.previewTabToolsUndoButton());
+            });
+
+            //Add point
+            it('When user adds a point and and clicks on undo button, then the previously performed action should be reverted', () => {
+                cy.log('Pre-step: Reset the chart');
+                chartsLinePage.steps.clickOnResetButtonPreviewTab();
+                chartsLinePage.steps.confirmReset();
+                chartsLinePage.steps.addBarOrPointInChartInPreviewTab();
+                chartsLinePage.steps.clickOnUndoButtonPreviewTab();
+                utilities.verifyElementCount(chartsLinePage.previewTabPoint(), 4);
+            });
+
+            it('When user has clicked on undo button, then the redo button should be enabled', () => {
+                utilities.verifyElementNotDisabled(chartsLinePage.previewTabToolsRedoButton());
+            });
+
+            it('When the user clicks on redo button, then the last reverted action should be performed again and the button should be disabled and undo button should be enabled', () => {
+                chartsLinePage.steps.clickOnRedoButtonPreviewTab();
+                utilities.verifyElementCount(chartsLinePage.previewTabPoint(), 5);
+                utilities.verifyElementDisabled(chartsLinePage.previewTabToolsRedoButton());
+                utilities.verifyElementNotDisabled(chartsLinePage.previewTabToolsUndoButton());
+            });
+
+            it('When user performs more than 1 actions and then clicks on undo button, then undo button should be enabled' ,() => {
+                cy.log('Reset the chart');
+                chartsLinePage.steps.clickOnResetButtonPreviewTab();
+                chartsLinePage.steps.confirmReset();
+                chartsLinePage.steps.addBarOrPointInChartInPreviewTab();
+                chartsLinePage.steps.addBarOrPointInChartInPreviewTab();
+                chartsLinePage.steps.clickOnUndoButtonPreviewTab();
+                utilities.verifyElementNotDisabled(chartsLinePage.previewTabToolsUndoButton());
+            });
+
+            it('When the user clicks on undo button until the graph reaches its initial state, then the undo button should be disabled', () => {
+                chartsLinePage.steps.clickOnUndoButtonPreviewTab();
+                utilities.verifyElementDisabled(chartsLinePage.previewTabToolsUndoButton());
+            });
+
+            //Delete point
+            it('When user deletes a point and clicks on a undo button, then the previously performed action should be reverted', () => {
+                cy.log('Pre-step: Reset the chart');
+                chartsLinePage.steps.clickOnResetButtonPreviewTab();
+                chartsLinePage.steps.confirmReset();
+                chartsLinePage.steps.deletePointInPreviewTab(0);
+                chartsLinePage.steps.clickOnUndoButtonPreviewTab();
+                utilities.verifyElementCount(chartsLinePage.previewTabPoint(), 4);
+            });
+
+            it('When user has clicked on undo button, then the redo button should be enabled', () => {
+                utilities.verifyElementNotDisabled(chartsLinePage.previewTabToolsRedoButton());
+            });
+
+            it('When the user clicks on redo button, then the last reverted action should be performed again and the button should be disabled and undo button should be enabled', () => {
+                chartsLinePage.steps.clickOnRedoButtonPreviewTab();
+                utilities.verifyElementCount(chartsLinePage.previewTabPoint(), 3);
+                utilities.verifyElementDisabled(chartsLinePage.previewTabToolsRedoButton());
+                utilities.verifyElementNotDisabled(chartsLinePage.previewTabToolsUndoButton());
+            });
+
+            it('When user performs more than 1 actions and then clicks on undo button, then undo button should be enabled' ,() => {
+                cy.log('Reset the chart');
+                chartsLinePage.steps.clickOnResetButtonPreviewTab();
+                chartsLinePage.steps.confirmReset();
+                chartsLinePage.steps.deletePointInPreviewTab(0);
+                chartsLinePage.steps.deletePointInPreviewTab(0);
+                chartsLinePage.steps.clickOnUndoButtonPreviewTab();
+                utilities.verifyElementNotDisabled(chartsLinePage.previewTabToolsUndoButton());
+            });
+
+            it('When the user clicks on undo button until the graph reaches its initial state, then the undo button should be disabled', () => {
+                chartsLinePage.steps.clickOnUndoButtonPreviewTab();
+                utilities.verifyElementDisabled(chartsLinePage.previewTabToolsUndoButton());
+            });
+
+            //Reset button
+            it('When the user clicks on Reset button then reset popup should be displayed', () => {
+                cy.log('Pre-step: Editing the graph');
+                chartsLinePage.steps.setPointValueInPreviewTab({ pointIndex: 0, value: 10, range: 10 });
+                chartsLinePage.steps.setPointValueInPreviewTab({ pointIndex: 1, value: 2, range: 10 });
+                chartsLinePage.steps.setPointValueInPreviewTab({ pointIndex: 2, value: 0, range: 10 });
+                chartsLinePage.steps.setPointValueInPreviewTab({ pointIndex: 3, value: 6, range: 10 });
+                chartsLinePage.steps.clickOnResetButtonPreviewTab();
+                utilities.verifyElementVisibilityState(chartsLinePage.dialogBox(), 'visible');
+            });
+
+            chartsLinePage.tests.verifyResetPopupContentWithCSSAndA11y('chart');
+
+            it('When user clicks on cancel button in reset popup, then reset popup should close and chart should not be reset', () => {
+                chartsLinePage.steps.cancelReset();
+                chartsLinePage.steps.verifyPointValueInPreviewTab({ pointIndex: 0, value: 10, range: 10 });
+                chartsLinePage.steps.verifyPointValueInPreviewTab({ pointIndex: 1, value: 2, range: 10 });
+                chartsLinePage.steps.verifyPointValueInPreviewTab({ pointIndex: 2, value: 0, range: 10 });
+                chartsLinePage.steps.verifyPointValueInPreviewTab({ pointIndex: 3, value: 6, range: 10 });
+            });
+
+            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', () => {
+                chartsLinePage.steps.clickOnResetButtonPreviewTab();
+                chartsLinePage.steps.confirmReset();
+                utilities.verifyElementNotDisabled(chartsLinePage.previewTabToolsAddBarOrPointButton());
+                utilities.verifyElementVisibilityState(chartsLinePage.previewTabToolsUndoButton(), 'visible');
+                utilities.verifyElementDisabled(chartsLinePage.previewTabToolsUndoButton());
+                utilities.verifyElementVisibilityState(chartsLinePage.previewTabToolsRedoButton(), 'visible');
+                utilities.verifyElementDisabled(chartsLinePage.previewTabToolsRedoButton());
+                utilities.verifyElementVisibilityState(chartsLinePage.previewTabToolsResetButton(), 'visible');
+                utilities.verifyElementDisabled(chartsLinePage.previewTabToolsResetButton());
+                utilities.verifyInnerText(utilities.getNthElement(chartsLinePage.previewTabPointLabel(), 0), 'Bar 1');
+                utilities.verifyInnerText(utilities.getNthElement(chartsLinePage.previewTabPointLabel(), 1), 'Bar 2');
+                utilities.verifyInnerText(utilities.getNthElement(chartsLinePage.previewTabPointLabel(), 2), 'Bar 3');
+                utilities.verifyInnerText(utilities.getNthElement(chartsLinePage.previewTabPointLabel(), 3), '1');
+                chartsLinePage.steps.verifyPointValueInPreviewTab({ pointIndex: 0, value: 1, range: 10 });
+                chartsLinePage.steps.verifyPointValueInPreviewTab({ pointIndex: 1, value: 2, range: 10 });
+                chartsLinePage.steps.verifyPointValueInPreviewTab({ pointIndex: 2, value: 3, range: 10 });
+                chartsLinePage.steps.verifyPointValueInPreviewTab({ pointIndex: 3, value: 4, range: 10 });
+            });
+
+            it('CSS of preview tab contents', { tags: 'css' }, () => {
+                utilities.verifyCSS(chartsLinePage.previewTabToolsUndoButton().find('svg'), {
+                    'fill': css.color.secondaryBtnDisabled
+                });
+                utilities.verifyCSS(chartsLinePage.previewTabToolsRedoButton().find('svg'), {
+                    'fill': css.color.secondaryBtnDisabled
+                });
+                utilities.verifyCSS(chartsLinePage.previewTabToolsUndoButton().find('svg'), {
+                    'fill': css.color.secondaryBtnDisabled
+                });
+            });
+        });
+    });
+});