itemengine-cypress-automation 1.0.189-e2e-execution-crash-83cdbd4.0 → 1.0.190-7thMayFixes-fcaf7b8.0

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

@@ -0,0 +1,625 @@
+import { chartsBarPage, itemPreviewPage } from "../../../pages";
+import abortEarlySetup from "../../../support/helpers/abortEarly";
+import utilities from "../../../support/helpers/utilities";
+const css = Cypress.env('css');
+
+const previewContentViews = ['Question preview', 'Item view', 'Item preview', 'Student view'];
+const views = utilities.getViews(previewContentViews);
+var itemReferenceID = "";
+const barBackgroundColor = ['rgb(46, 169, 89)', 'rgb(6, 117, 244)', 'rgb(219, 124, 0)', 'rgb(156, 105, 39)', 'rgb(219, 60, 0)'];
+
+describe('Create item page: Charts - Bar - Preview contents in all views', () => {
+    before(() => {
+        cy.loginAs('admin');
+    });
+
+    views.forEach((view) => {
+        describe(`Preview tab contents - Edit bar graphs, graph labels, locked graph ${view}`, { tags: 'smoke' }, () => {
+            abortEarlySetup();
+            before(() => {
+                switch (view) {
+                    case 'Question preview':
+                        chartsBarPage.steps.navigateToCreateQuestion('charts');
+                        cy.barsPreLoaderWait();
+                        chartsBarPage.steps.addTextInQuestionInstructionsInputField('Set the bar on the chart for the profits of the years');
+                        chartsBarPage.steps.selectAddBarOrPointToolbarOption();
+                        chartsBarPage.steps.addBarOrPointInChartInSelectChartTypeSection();
+                        chartsBarPage.steps.setGraphTitle('Graph of profits');
+                        chartsBarPage.steps.setYAxisLabel('Profit');
+                        chartsBarPage.steps.setXAxisLabel('Year');
+                        chartsBarPage.steps.setMaxYValue(20);
+                        chartsBarPage.steps.setBarValueInSelectChartTypeSection({ barIndex: 0, value: 1, range: 20 });
+                        chartsBarPage.steps.setBarValueInSelectChartTypeSection({ barIndex: 1, value: 2, range: 20 });
+                        chartsBarPage.steps.setBarValueInSelectChartTypeSection({ barIndex: 2, value: 3, range: 20 });
+                        chartsBarPage.steps.setBarValueInSelectChartTypeSection({ barIndex: 3, value: 4, range: 20 });
+                        chartsBarPage.steps.lockBar(1);
+                        chartsBarPage.steps.allotPoints(10);
+                        chartsBarPage.steps.setBarValueInSpecifyCorrectAnswerSection({ barIndex: 0, value: 2, range: 20 });
+                        chartsBarPage.steps.setBarValueInSpecifyCorrectAnswerSection({ barIndex: 2, value: 5, range: 20 });
+                        chartsBarPage.steps.setBarValueInSpecifyCorrectAnswerSection({ barIndex: 3, value: 1, range: 20 });
+                        chartsBarPage.steps.addBarOrPointInChartInSpecifyCorrectAnswerSection();
+                        chartsBarPage.steps.setBarValueInSpecifyCorrectAnswerSection({ barIndex: 4, value: 8, range: 20 });
+                        chartsBarPage.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)}`);
+                        chartsBarPage.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') {
+                    chartsBarPage.steps.clickOnSaveQuestionButton();
+                    utilities.verifyElementVisibilityState(itemPreviewPage.referenceID(), 'visible');
+                    itemReferenceID = itemPreviewPage.steps.getItemReferenceID();
+                }
+            });
+
+            it('Question instructions should be visible', () => {
+                utilities.verifyInnerText(chartsBarPage.questionInstructionsText(), 'Set the bar on the chart for the profits of the years');
+                utilities.verifyElementVisibilityState(chartsBarPage.questionInstructionsText(), 'visible');
+            });
+
+            it('The toolbar options - Add bar, Undo, Redo and Reset should be displayed in the preview tab and only Add bar button should be enabled', () => {
+                utilities.verifyElementVisibilityState(chartsBarPage.previewTabToolsAddBarOrPointButton(), 'visible');
+                utilities.verifyElementNotDisabled(chartsBarPage.previewTabToolsAddBarOrPointButton());
+                utilities.verifyElementVisibilityState(chartsBarPage.previewTabToolsUndoButton(), 'visible');
+                utilities.verifyElementDisabled(chartsBarPage.previewTabToolsUndoButton());
+                utilities.verifyElementVisibilityState(chartsBarPage.previewTabToolsRedoButton(), 'visible');
+                utilities.verifyElementDisabled(chartsBarPage.previewTabToolsRedoButton());
+                utilities.verifyElementVisibilityState(chartsBarPage.previewTabToolsResetButton(), 'visible');
+                utilities.verifyElementDisabled(chartsBarPage.previewTabToolsResetButton());
+            });
+
+            it('The graph title, Y axis label, X axis label and bar labels should be displayed', () => {
+                utilities.verifyInnerText(chartsBarPage.previewTabGraphTitle(), 'Graph of profits');
+                utilities.verifyElementVisibilityState(chartsBarPage.previewTabGraphTitle(), 'visible');
+                utilities.verifyInnerText(chartsBarPage.previewTabYAxisLabelButton(), 'Profit');
+                utilities.verifyElementVisibilityState(chartsBarPage.previewTabYAxisLabelButton(), 'visible');
+                utilities.verifyInnerText(chartsBarPage.previewTabXAxisLabelButton(), 'Year');
+                utilities.verifyElementVisibilityState(chartsBarPage.previewTabXAxisLabelButton(), 'visible');
+                utilities.verifyInnerText(utilities.getNthElement(chartsBarPage.previewTabBarLabel(), 0), 'Bar 1');
+                utilities.verifyInnerText(utilities.getNthElement(chartsBarPage.previewTabBarLabel(), 1), 'Bar 2');
+                utilities.verifyInnerText(utilities.getNthElement(chartsBarPage.previewTabBarLabel(), 2), 'Bar 3');
+                utilities.verifyInnerText(utilities.getNthElement(chartsBarPage.previewTabBarLabel(), 3), 'Bar 4');
+            });
+
+            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(chartsBarPage.previewTabYAxisCoordinate(), 0), 20);
+                utilities.verifyElementCount(chartsBarPage.previewTabChartRowHeaderContainer(), 21);
+            });
+
+            it('User should be able to edit the Y axis and X axis labels in preview tab', () => {
+                chartsBarPage.steps.editYAxisLabelInPreviewTab('Edited Y axis label');
+                utilities.verifyInnerText(chartsBarPage.previewTabYAxisLabelButton(), 'Edited Y axis label');
+                chartsBarPage.steps.editXAxisLabelInPreviewTab('Edited X axis label');
+                utilities.verifyInnerText(chartsBarPage.previewTabXAxisLabelButton(), 'Edited X axis label');
+            });
+
+            it('The charts and graphs should be visible as set by the user in select chart type section', () => {
+                chartsBarPage.steps.verifyBarHeightInPreviewTab({ barIndex: 0, barValue: 1, range: 20 });
+                chartsBarPage.steps.verifyBarHeightInPreviewTab({ barIndex: 1, barValue: 2, range: 20 });
+                chartsBarPage.steps.verifyBarHeightInPreviewTab({ barIndex: 2, barValue: 3, range: 20 });
+                chartsBarPage.steps.verifyBarHeightInPreviewTab({ barIndex: 3, barValue: 4, range: 20 });
+            });
+
+            it('The locked bar should be displayed in the locked state in preview tab and it should not have a drag handle', () => {
+                chartsBarPage.steps.verifyBarIsLockedInPreviewTab(1);
+            });
+
+            it('User should not be able to edit the locked bar height', () => {
+                chartsBarPage.steps.verifyLockedBarIsUneditableInPreviewTab(1);
+            });
+
+            it('User should be able to increase the bar height in preview tab', () => {
+                chartsBarPage.steps.setBarValueInPreviewTab({ barIndex: 0, value: 20, range: 20 });
+            });
+
+            it('User should be able to decrease the height of the bar in preview tab', () => {
+                chartsBarPage.steps.setBarValueInPreviewTab({ barIndex: 2, value: 0, range: 20 });
+            });
+
+            it('When bar is at the topmost value and the user still tries to increase its value, then the bar value should not increase', () => {
+                chartsBarPage.steps.keyBoardUpBarInPreviewTab(0);
+                chartsBarPage.steps.keyBoardUpBarInPreviewTab(0);
+                chartsBarPage.steps.verifyBarHeightInPreviewTab({ barIndex: 0, barValue: 20, range: 20 });
+            });
+
+            it('When bar is at the bottommost value and the user still tries to decrease its value, then the bar value should not decrease', () => {
+                chartsBarPage.steps.keyBoardDownBarInPreviewTab(2);
+                chartsBarPage.steps.keyBoardDownBarInPreviewTab(2);
+                chartsBarPage.steps.verifyBarHeightInPreviewTab({ barIndex: 2, barValue: 0, range: 20 });
+            });
+
+            chartsBarPage.tests.verifyBarTooltipContentsCSSAndA11yInPreviewTab('0', barBackgroundColor[0], 'Bar 1');
+
+            chartsBarPage.tests.verifyBarTooltipContentsCSSAndA11yInPreviewTab('3', barBackgroundColor[3], 'Bar 4');
+
+            it('User should be able to edit the label a bar', () => {
+                chartsBarPage.steps.editBarLabelInPreviewTab(0, '2000');
+                chartsBarPage.steps.editBarLabelInPreviewTab(1, '2001');
+            });
+
+            it('CSS of preview tab contents', { tags: 'css' }, () => {
+                utilities.verifyCSS(chartsBarPage.previewTabToolsAddBarOrPointButton(), {
+                    'background-color': css.color.activeButtons
+                });
+                utilities.verifyCSS(chartsBarPage.previewTabGraphTitle(), {
+                    'color': css.color.text,
+                    'font-size': css.fontSize.default,
+                    'font-weight': css.fontWeight.bold
+                });
+                utilities.verifyCSS(chartsBarPage.previewTabYAxisLabelButton(), {
+                    'color': css.color.activeButtons,
+                    'font-size': css.fontSize.default,
+                    'font-weight': css.fontWeight.bold
+                });
+                utilities.verifyCSS(chartsBarPage.previewTabXAxisLabelButton(), {
+                    'color': css.color.activeButtons,
+                    'font-size': css.fontSize.default,
+                    'font-weight': css.fontWeight.bold
+                });
+                utilities.verifyCSS(chartsBarPage.previewTabBarLabel(), {
+                    'color': css.color.text,
+                    'font-size': css.fontSize.default,
+                    'font-weight': css.fontWeight.semibold
+                });
+                utilities.verifyCSS(chartsBarPage.previewTabYAxisCoordinate(), {
+                    'color': css.color.text,
+                    'font-size': css.fontSize.normal,
+                    'font-weight': css.fontWeight.semibold
+                });
+                utilities.verifyCSS(chartsBarPage.previewTabBarDragHandle().find('svg'), {
+                    'background-color': css.color.defaultBackground
+                });
+                utilities.verifyCSS(chartsBarPage.previewTabBarDragHandle().find('path').eq(1), {
+                    'fill': css.color.secondaryBtn
+                });
+                utilities.verifyCSS(chartsBarPage.previewTabBar().eq(0), {
+                    'background-color': barBackgroundColor[0]
+                });
+                utilities.verifyCSS(chartsBarPage.previewTabBar().eq(1), {
+                    'background-color': barBackgroundColor[1]
+                });
+                utilities.verifyCSS(chartsBarPage.previewTabBar().eq(2), {
+                    'background-color': barBackgroundColor[2]
+                });
+                utilities.verifyCSS(chartsBarPage.previewTabBar().eq(3), {
+                    'background-color': barBackgroundColor[3]
+                });
+                utilities.verifyCSS(chartsBarPage.barLockIcon(), {
+                    'background-color': css.color.defaultBackground,
+                });
+            });
+
+            it('Accessibility of preview tab contents', { tags: 'a11y' }, () => {
+                cy.checkAccessibility(chartsBarPage.previewTabGraphTitle().parents('[class*="ChartsPreviewstyles__PreviewWrapper"]'));
+            });
+        });
+    });
+
+    views.forEach((view) => {
+        describe(`Preview tab contents - Add and delete bar ${view}`, { tags: 'smoke' }, () => {
+            abortEarlySetup();
+            before(() => {
+                switch (view) {
+                    case 'Question preview':
+                        chartsBarPage.steps.navigateToCreateQuestion('charts');
+                        cy.barsPreLoaderWait();
+                        chartsBarPage.steps.addTextInQuestionInstructionsInputField('Set the bar on the chart for the profits of the years');
+                        chartsBarPage.steps.selectAddBarOrPointToolbarOption();
+                        chartsBarPage.steps.addBarOrPointInChartInSelectChartTypeSection();
+                        chartsBarPage.steps.setBarValueInSelectChartTypeSection({ barIndex: 0, value: 1, range: 10 });
+                        chartsBarPage.steps.setBarValueInSelectChartTypeSection({ barIndex: 1, value: 2, range: 10 });
+                        chartsBarPage.steps.setBarValueInSelectChartTypeSection({ barIndex: 2, value: 3, range: 10 });
+                        chartsBarPage.steps.setBarValueInSelectChartTypeSection({ barIndex: 3, value: 4, range: 10 });
+                        chartsBarPage.steps.allotPoints(10);
+                        chartsBarPage.steps.setBarValueInSpecifyCorrectAnswerSection({ barIndex: 0, value: 2, range: 10 });
+                        chartsBarPage.steps.setBarValueInSpecifyCorrectAnswerSection({ barIndex: 1, value: 4, range: 10 });
+                        chartsBarPage.steps.setBarValueInSpecifyCorrectAnswerSection({ barIndex: 2, value: 5, range: 10 });
+                        chartsBarPage.steps.setBarValueInSpecifyCorrectAnswerSection({ barIndex: 3, value: 1, range: 10 });
+                        chartsBarPage.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)}`);
+                        chartsBarPage.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') {
+                    chartsBarPage.steps.clickOnSaveQuestionButton();
+                    utilities.verifyElementVisibilityState(itemPreviewPage.referenceID(), 'visible');
+                    itemReferenceID = itemPreviewPage.steps.getItemReferenceID();
+                }
+            });
+
+            it('When user hovers on the enabled add bar button, then tooltip \'Add bar\' should be displayed', () => {
+                chartsBarPage.previewTabToolsAddBarOrPointButton()
+                    .verifyTooltip('Add bar');
+            });
+
+            it('CSS of the tooltip text', { tags: 'css' }, () => {
+                utilities.triggerMouseover(chartsBarPage.previewTabToolsAddBarOrPointButton());
+                utilities.verifyCSS(chartsBarPage.tooltipText(), {
+                    'color': css.color.whiteText,
+                    'font-size': css.fontSize.small,
+                    'font-weight': css.fontWeight.regular,
+                    'background-color': css.color.tooltipBg
+                });
+                utilities.triggerMouseout(chartsBarPage.previewTabToolsAddBarOrPointButton());
+            });
+
+            it('Accessibility of the tooltip text', { tags: 'a11y' }, () => {
+                utilities.triggerMouseover(chartsBarPage.previewTabToolsAddBarOrPointButton());
+                utilities.verifyElementVisibilityState(chartsBarPage.tooltipText(), 'visible');
+                cy.checkAccessibility(chartsBarPage.tooltipText().parents('[role="tooltip"]'));
+                utilities.triggerMouseout(chartsBarPage.previewTabToolsAddBarOrPointButton());
+                utilities.verifyElementVisibilityState(chartsBarPage.tooltipText(), 'notExist');
+            });
+
+            it('User should be able to add a bar in chart and the added bar should be displayed at 0 height with the label \'Bar 5\'', () => {
+                chartsBarPage.steps.addBarOrPointInChartInPreviewTab();
+                utilities.verifyElementCount(chartsBarPage.previewTabBar(), 5);
+                chartsBarPage.steps.verifyBarHeightInPreviewTab({ barIndex: 4, barValue: 0, range: 20 });
+                utilities.verifyInnerText(utilities.getNthElement(chartsBarPage.previewTabBarLabel(), 4), 'Bar 5');
+            });
+
+            it('CSS of newly added bar in preview tab', { tags: 'css' }, () => {
+                utilities.verifyCSS(chartsBarPage.previewTabBar().eq(4), {
+                    'background-color': barBackgroundColor[4]
+                });
+            });
+
+            it('Accessibility of newly added bar in preview tab', { tags: 'a11y' }, () => {
+                cy.checkAccessibility(chartsBarPage.previewTabGraphTitle().parents('[class*="ChartsPreviewstyles__PreviewWrapper"]'));
+            });
+
+            it('When add bar limit is set to 1 and user has added a bar, then the add bar toolbar button should be disabled', () => {
+                utilities.verifyElementDisabled(chartsBarPage.previewTabToolsAddBarOrPointButton());
+            });
+
+            it('When user deletes a bar, then that bar should be deleted and the add bar button should be enabled again', () => {
+                chartsBarPage.steps.deleteBarInPreviewTab(3);
+                utilities.verifyElementCount(chartsBarPage.previewTabBar(), 4);
+                utilities.verifyElementVisibilityState(utilities.getNthElement(chartsBarPage.previewTabBarLabel(), 4), 'notExist');
+                utilities.verifyElementNotDisabled(chartsBarPage.previewTabToolsAddBarOrPointButton());
+            });
+
+            it('When user has deleted 2 bars and adds a bar, then the add bar button should still be enabled', () => {
+                chartsBarPage.steps.deleteBarInPreviewTab(2);
+                chartsBarPage.steps.addBarOrPointInChartInPreviewTab();
+                utilities.verifyElementNotDisabled(chartsBarPage.previewTabToolsAddBarOrPointButton());
+            });
+
+            it('When user adds a bar again and the number of extra bars reaches the maximum set value i.e. 1, then the add bar button should be disabled', () => {
+                chartsBarPage.steps.addBarOrPointInChartInPreviewTab();
+                utilities.verifyElementDisabled(chartsBarPage.previewTabToolsAddBarOrPointButton());
+            });
+        });
+    });
+
+    views.forEach((view) => {
+        describe(`Preview tab contents - Undo, Redo and Reset buttons ${view}`, { tags: 'smoke' }, () => {
+            abortEarlySetup();
+            before(() => {
+                switch (view) {
+                    case 'Question preview':
+                        chartsBarPage.steps.navigateToCreateQuestion('charts');
+                        cy.barsPreLoaderWait();
+                        chartsBarPage.steps.addTextInQuestionInstructionsInputField('Set the bar on the chart for the profits of the years');
+                        chartsBarPage.steps.selectAddBarOrPointToolbarOption();
+                        chartsBarPage.steps.addBarOrPointInChartInSelectChartTypeSection();
+                        chartsBarPage.steps.setBarValueInSelectChartTypeSection({ barIndex: 0, value: 1, range: 10 });
+                        chartsBarPage.steps.setBarValueInSelectChartTypeSection({ barIndex: 1, value: 2, range: 10 });
+                        chartsBarPage.steps.setBarValueInSelectChartTypeSection({ barIndex: 2, value: 3, range: 10 });
+                        chartsBarPage.steps.setBarValueInSelectChartTypeSection({ barIndex: 3, value: 4, range: 10 });
+                        chartsBarPage.steps.setMaxBarCountValue(2);
+                        chartsBarPage.steps.allotPoints(10);
+                        chartsBarPage.steps.setBarValueInSpecifyCorrectAnswerSection({ barIndex: 0, value: 2, range: 10 });
+                        chartsBarPage.steps.setBarValueInSpecifyCorrectAnswerSection({ barIndex: 1, value: 4, range: 10 });
+                        chartsBarPage.steps.setBarValueInSpecifyCorrectAnswerSection({ barIndex: 2, value: 5, range: 10 });
+                        chartsBarPage.steps.setBarValueInSpecifyCorrectAnswerSection({ barIndex: 3, value: 1, range: 10 });
+                        chartsBarPage.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)}`);
+                        chartsBarPage.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') {
+                    chartsBarPage.steps.clickOnSaveQuestionButton();
+                    utilities.verifyElementVisibilityState(itemPreviewPage.referenceID(), 'visible');
+                    itemReferenceID = itemPreviewPage.steps.getItemReferenceID();
+                }
+            });
+
+            //Bar labels
+            it('When user updates a bar label, then the undo and reset button should be displayed in enabled state', () => {
+                chartsBarPage.steps.editBarLabelInPreviewTab(0, 'Edited bar 1');
+                utilities.verifyElementNotDisabled(chartsBarPage.previewTabToolsUndoButton());
+                utilities.verifyElementNotDisabled(chartsBarPage.previewTabToolsResetButton());
+            });
+
+            it('When user hovers on the enabled undo and reset button, then tooltips \'Undo\' and \'Reset\' should be displayed', () => {
+                chartsBarPage.previewTabToolsUndoButton()
+                    .verifyTooltip('Undo');
+                chartsBarPage.previewTabToolsResetButton()
+                    .verifyTooltip('Reset');
+            });
+
+            it('CSS of the tooltip text', { tags: 'css' }, () => {
+                utilities.triggerMouseover(chartsBarPage.previewTabToolsUndoButton());
+                utilities.verifyCSS(chartsBarPage.tooltipText(), {
+                    'color': css.color.whiteText,
+                    'font-size': css.fontSize.small,
+                    'font-weight': css.fontWeight.regular,
+                    'background-color': css.color.tooltipBg
+                });
+                utilities.triggerMouseout(chartsBarPage.previewTabToolsUndoButton());
+                utilities.triggerMouseover(chartsBarPage.previewTabToolsResetButton());
+                utilities.verifyCSS(chartsBarPage.tooltipText(), {
+                    'color': css.color.whiteText,
+                    'font-size': css.fontSize.small,
+                    'font-weight': css.fontWeight.regular,
+                    'background-color': css.color.tooltipBg
+                });
+                utilities.triggerMouseout(chartsBarPage.previewTabToolsResetButton());
+            });
+
+            it('Accessibility of the tooltip text', { tags: 'a11y' }, () => {
+                utilities.triggerMouseover(chartsBarPage.previewTabToolsUndoButton());
+                utilities.verifyElementVisibilityState(chartsBarPage.tooltipText(), 'visible');
+                cy.checkAccessibility(chartsBarPage.tooltipText().parents('[role="tooltip"]'));
+                utilities.triggerMouseout(chartsBarPage.previewTabToolsUndoButton());
+                utilities.verifyElementVisibilityState(chartsBarPage.tooltipText(), 'notExist');
+                utilities.triggerMouseover(chartsBarPage.previewTabToolsResetButton());
+                utilities.verifyElementVisibilityState(chartsBarPage.tooltipText(), 'visible');
+                cy.checkAccessibility(chartsBarPage.tooltipText().parents('[role="tooltip"]'));
+                utilities.triggerMouseout(chartsBarPage.previewTabToolsResetButton());
+                utilities.verifyElementVisibilityState(chartsBarPage.tooltipText(), 'notExist');
+            });
+
+            it('When user clicks on a undo button, then the previously performed action should be reverted', () => {
+                chartsBarPage.steps.clickOnUndoButtonPreviewTab();
+                utilities.verifyInnerText(utilities.getNthElement(chartsBarPage.previewTabBarLabel(), 0), 'Bar 1');
+            });
+
+            it('When user has clicked on undo button, then the redo button should be enabled', () => {
+                utilities.verifyElementNotDisabled(chartsBarPage.previewTabToolsRedoButton());
+            });
+
+            it('When user hovers on the enabled redo button, then tooltip \'Redo\' should be displayed', () => {
+                chartsBarPage.previewTabToolsRedoButton()
+                    .verifyTooltip('Redo');
+            });
+
+            it('CSS of the tooltip text', { tags: 'css' }, () => {
+                utilities.triggerMouseover(chartsBarPage.previewTabToolsRedoButton());
+                utilities.verifyCSS(chartsBarPage.tooltipText(), {
+                    'color': css.color.whiteText,
+                    'font-size': css.fontSize.small,
+                    'font-weight': css.fontWeight.regular,
+                    'background-color': css.color.tooltipBg
+                });
+                utilities.triggerMouseout(chartsBarPage.previewTabToolsRedoButton());
+            });
+
+            it('Accessibility of the tooltip text', { tags: 'a11y' }, () => {
+                utilities.triggerMouseover(chartsBarPage.previewTabToolsRedoButton());
+                utilities.verifyElementVisibilityState(chartsBarPage.tooltipText(), 'visible');
+                cy.checkAccessibility(chartsBarPage.tooltipText().parents('[role="tooltip"]'));
+                utilities.triggerMouseout(chartsBarPage.previewTabToolsRedoButton());
+                utilities.verifyElementVisibilityState(chartsBarPage.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', () => {
+                chartsBarPage.steps.clickOnRedoButtonPreviewTab();
+                utilities.verifyInnerText(utilities.getNthElement(chartsBarPage.previewTabBarLabel(), 0), 'Edited bar 1');
+                utilities.verifyElementDisabled(chartsBarPage.previewTabToolsRedoButton());
+                utilities.verifyElementNotDisabled(chartsBarPage.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');
+                chartsBarPage.steps.clickOnResetButtonPreviewTab();
+                chartsBarPage.steps.confirmReset();
+                chartsBarPage.steps.editBarLabelInPreviewTab(0, 'Edited bar 1');
+                chartsBarPage.steps.editBarLabelInPreviewTab(1, 'Edited bar 2');
+                chartsBarPage.steps.clickOnUndoButtonPreviewTab();
+                utilities.verifyElementNotDisabled(chartsBarPage.previewTabToolsUndoButton());
+            });
+
+            it('When the user clicks on undo button until the graph reaches its initial state, then the undo button should be disabled', () => {
+                chartsBarPage.steps.clickOnUndoButtonPreviewTab();
+                utilities.verifyElementDisabled(chartsBarPage.previewTabToolsUndoButton());
+            });
+
+            //Bar value/height
+            it('When user updates a bar value and clicks on undo button, then the previously performed action should be reverted', () => {
+                cy.log('Pre-step: Reset the chart');
+                chartsBarPage.steps.clickOnResetButtonPreviewTab();
+                chartsBarPage.steps.confirmReset();
+                chartsBarPage.steps.setBarValueInPreviewTab({ barIndex: 0, value: 4, range: 10 });
+                chartsBarPage.steps.clickOnUndoButtonPreviewTab();
+                chartsBarPage.steps.verifyBarHeightInPreviewTab({ barIndex: 0, barValue: 3, range: 10 });
+            });
+
+            it('When user has clicked on undo button, then the redo button should be enabled', () => {
+                utilities.verifyElementNotDisabled(chartsBarPage.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', () => {
+                chartsBarPage.steps.clickOnRedoButtonPreviewTab();
+                chartsBarPage.steps.verifyBarHeightInPreviewTab({ barIndex: 0, barValue: 4, range: 10 });
+                utilities.verifyElementDisabled(chartsBarPage.previewTabToolsRedoButton());
+                utilities.verifyElementNotDisabled(chartsBarPage.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');
+                chartsBarPage.steps.clickOnResetButtonPreviewTab();
+                chartsBarPage.steps.confirmReset();
+                chartsBarPage.steps.setBarValueInPreviewTab({ barIndex: 0, value: 3, range: 10 });
+                chartsBarPage.steps.clickOnUndoButtonPreviewTab();
+                utilities.verifyElementNotDisabled(chartsBarPage.previewTabToolsUndoButton());
+            });
+
+            it('When the user clicks on undo button until the graph reaches its initial state, then the undo button should be disabled', () => {
+                chartsBarPage.steps.clickOnUndoButtonPreviewTab();
+                utilities.verifyElementDisabled(chartsBarPage.previewTabToolsUndoButton());
+            });
+
+            //Add bar
+            it('When user adds a bar and and clicks on undo button, then the previously performed action should be reverted', () => {
+                cy.log('Pre-step: Reset the chart');
+                chartsBarPage.steps.clickOnResetButtonPreviewTab();
+                chartsBarPage.steps.confirmReset();
+                chartsBarPage.steps.addBarOrPointInChartInPreviewTab();
+                chartsBarPage.steps.clickOnUndoButtonPreviewTab();
+                utilities.verifyElementCount(chartsBarPage.previewTabBar(), 4);
+            });
+
+            it('When user has clicked on undo button, then the redo button should be enabled', () => {
+                utilities.verifyElementNotDisabled(chartsBarPage.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', () => {
+                chartsBarPage.steps.clickOnRedoButtonPreviewTab();
+                utilities.verifyElementCount(chartsBarPage.previewTabBar(), 5);
+                utilities.verifyElementDisabled(chartsBarPage.previewTabToolsRedoButton());
+                utilities.verifyElementNotDisabled(chartsBarPage.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');
+                chartsBarPage.steps.clickOnResetButtonPreviewTab();
+                chartsBarPage.steps.confirmReset();
+                chartsBarPage.steps.addBarOrPointInChartInPreviewTab();
+                chartsBarPage.steps.addBarOrPointInChartInPreviewTab();
+                chartsBarPage.steps.clickOnUndoButtonPreviewTab();
+                utilities.verifyElementNotDisabled(chartsBarPage.previewTabToolsUndoButton());
+            });
+
+            it('When the user clicks on undo button until the graph reaches its initial state, then the undo button should be disabled', () => {
+                chartsBarPage.steps.clickOnUndoButtonPreviewTab();
+                utilities.verifyElementDisabled(chartsBarPage.previewTabToolsUndoButton());
+            });
+
+            //Delete bar
+            it('When user deletes a bar and clicks on a undo button, then the previously performed action should be reverted', () => {
+                cy.log('Pre-step: Reset the chart');
+                chartsBarPage.steps.clickOnResetButtonPreviewTab();
+                chartsBarPage.steps.confirmReset();
+                chartsBarPage.steps.deleteBarInPreviewTab(0);
+                chartsBarPage.steps.clickOnUndoButtonPreviewTab();
+                utilities.verifyElementCount(chartsBarPage.previewTabBar(), 4);
+            });
+
+            it('When user has clicked on undo button, then the redo button should be enabled', () => {
+                utilities.verifyElementNotDisabled(chartsBarPage.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', () => {
+                chartsBarPage.steps.clickOnRedoButtonPreviewTab();
+                utilities.verifyElementCount(chartsBarPage.previewTabBar(), 3);
+                utilities.verifyElementDisabled(chartsBarPage.previewTabToolsRedoButton());
+                utilities.verifyElementNotDisabled(chartsBarPage.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');
+                chartsBarPage.steps.clickOnResetButtonPreviewTab();
+                chartsBarPage.steps.confirmReset();
+                chartsBarPage.steps.deleteBarInPreviewTab(0);
+                chartsBarPage.steps.deleteBarInPreviewTab(0);
+                chartsBarPage.steps.clickOnUndoButtonPreviewTab();
+                utilities.verifyElementNotDisabled(chartsBarPage.previewTabToolsUndoButton());
+            });
+
+            it('When the user clicks on undo button until the graph reaches its initial state, then the undo button should be disabled', () => {
+                chartsBarPage.steps.clickOnUndoButtonPreviewTab();
+                utilities.verifyElementDisabled(chartsBarPage.previewTabToolsUndoButton());
+            });
+
+            //Reset button
+            it('When the user clicks on Reset button then reset popup should be displayed', () => {
+                chartsBarPage.steps.clickOnResetButtonPreviewTab();
+                utilities.verifyElementVisibilityState(chartsBarPage.dialogBox(), 'visible');
+            });
+
+            chartsBarPage.tests.verifyResetPopupContentWithCSSAndA11y('chart');
+
+            it('When user clicks on cancel button in reset popup, then reset popup should close and chart should not be reset', () => {
+                chartsBarPage.steps.cancelReset();
+                chartsBarPage.steps.editBarLabelInPreviewTab(0, '2000');
+                chartsBarPage.steps.editBarLabelInPreviewTab(1, '2001');
+                chartsBarPage.steps.verifyBarHeightInPreviewTab({ barIndex: 0, barValue: 20, range: 20 });
+                chartsBarPage.steps.verifyBarHeightInPreviewTab({ barIndex: 1, barValue: 2, range: 20 });
+                chartsBarPage.steps.verifyBarHeightInPreviewTab({ barIndex: 2, barValue: 0, range: 20 });
+                chartsBarPage.steps.verifyBarHeightInPreviewTab({ barIndex: 3, barValue: 4, range: 20 });
+            });
+
+            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', () => {
+                chartsBarPage.steps.clickOnResetButtonPreviewTab();
+                chartsBarPage.steps.confirmReset();
+                utilities.verifyElementNotDisabled(chartsBarPage.previewTabToolsAddBarOrPointButton());
+                utilities.verifyElementVisibilityState(chartsBarPage.previewTabToolsUndoButton(), 'visible');
+                utilities.verifyElementDisabled(chartsBarPage.previewTabToolsUndoButton());
+                utilities.verifyElementVisibilityState(chartsBarPage.previewTabToolsRedoButton(), 'visible');
+                utilities.verifyElementDisabled(chartsBarPage.previewTabToolsRedoButton());
+                utilities.verifyElementVisibilityState(chartsBarPage.previewTabToolsResetButton(), 'visible');
+                utilities.verifyElementDisabled(chartsBarPage.previewTabToolsResetButton());
+                utilities.verifyInnerText(utilities.getNthElement(chartsBarPage.previewTabBarLabel(), 0), 'Bar 1');
+                utilities.verifyInnerText(utilities.getNthElement(chartsBarPage.previewTabBarLabel(), 1), 'Bar 2');
+                utilities.verifyInnerText(utilities.getNthElement(chartsBarPage.previewTabBarLabel(), 2), 'Bar 3');
+                utilities.verifyInnerText(utilities.getNthElement(chartsBarPage.previewTabBarLabel(), 3), 'Bar 4');
+                chartsBarPage.steps.verifyBarHeightInPreviewTab({ barIndex: 0, barValue: 1, range: 10 });
+                chartsBarPage.steps.verifyBarHeightInPreviewTab({ barIndex: 1, barValue: 2, range: 10 });
+                chartsBarPage.steps.verifyBarHeightInPreviewTab({ barIndex: 2, barValue: 3, range: 10 });
+                chartsBarPage.steps.verifyBarHeightInPreviewTab({ barIndex: 3, barValue: 4, range: 10 });
+            });
+
+            it('CSS of preview tab contents', { tags: 'css' }, () => {
+                utilities.verifyCSS(chartsBarPage.previewTabToolsUndoButton().find('svg'), {
+                    'fill': css.color.secondaryBtnDisabled
+                });
+                utilities.verifyCSS(chartsBarPage.previewTabToolsRedoButton().find('svg'), {
+                    'fill': css.color.secondaryBtnDisabled
+                });
+                utilities.verifyCSS(chartsBarPage.previewTabToolsUndoButton().find('svg'), {
+                    'fill': css.color.secondaryBtnDisabled
+                });
+            });
+        });
+    });
+});

package/cypress/e2e/ILC/DragAndDropIntoCategoriesNew/additionalSettingsBasic.js

@@ -62,8 +62,8 @@ describe('Drag and drop into categories - Additional settings', () => {
             cy.barsPreLoaderWait();
             dragAndDropIntoCategoriesPage.steps.addTextInQuestionInstructionsInputField('Drag and drop into categories');
             dragAndDropIntoCategoriesPage.steps.addInputToOptionsInputField(options);
-            dragAndDropIntoCategoriesPage.steps.clickAndDropOptionInDropzoneSpecifyCorrectAnswerSection({ 'Bat': 0, 'Eagle': 1 });
             dragAndDropIntoCategoriesPage.steps.expandAdditionalSettings();
+            dragAndDropIntoCategoriesPage.steps.clickAndDropOptionInDropzoneSpecifyCorrectAnswerSection({ 'Bat': 0, 'Eagle': 1 });
         });
 
         Object.keys(fontSizes).forEach((option) => {

package/cypress/e2e/ILC/DragAndDropIntoCategoriesNew/clickAndDrop.js

@@ -327,7 +327,7 @@ describe('Create Item Page: Drag and drop into categories: Click and drop cases
 
         it('When the user selects a filled option and clicks in the options container, the selected option should get back in the options container', () => {
             dragAndDropIntoCategoriesPage.steps.clickAndDropOptionFromDropzoneToOptionContainerPreviewTab('Eagle', 0);
-            dragAndDropIntoCategoriesPage.steps.verifyDraggableOptionsInOptionsContainerPreviewTab(['Whale', 'Platypus', 'Eagle']);
+            dragAndDropIntoCategoriesPage.steps.verifyDraggableOptionsInOptionsContainerPreviewTab(['Parrot', 'Whale', 'Eagle']);
         });
     });