itemengine-cypress-automation 1.0.190-repoUpdate3May-f180558.0 → 1.0.191-7thMayFixes-2faebef.0

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

@@ -14,7 +14,7 @@ describe('Create item page: Charts - Bar - Preview contents in all views', () =>
     });
 
     views.forEach((view) => {
-        describe(`Preview tab contents - ${view}`, { tags: 'smoke' }, () => {
+        describe(`Preview tab contents - Edit bar graphs, graph labels, locked graph ${view}`, { tags: 'smoke' }, () => {
             abortEarlySetup();
             before(() => {
                 switch (view) {
@@ -80,30 +80,6 @@ describe('Create item page: Charts - Bar - Preview contents in all views', () =>
                 utilities.verifyElementDisabled(chartsBarPage.previewTabToolsResetButton());
             });
 
-            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.normal,
-                    '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());
-                utilities.triggerMouseout(chartsBarPage.previewTabToolsAddBarOrPointButton());
-                utilities.verifyElementVisibilityState(chartsBarPage.tooltipText(), 'notExist');
-            });
-
             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');
@@ -119,7 +95,7 @@ describe('Create item page: Charts - Bar - Preview contents in all views', () =>
 
             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(), 11); //Chart has 10 rows but checking 11 as table also contains bar labels
+                utilities.verifyElementCount(chartsBarPage.previewTabChartRowHeaderContainer(), 21);
             });
 
             it('User should be able to edit the Y axis and X axis labels in preview tab', () => {
@@ -140,58 +116,166 @@ describe('Create item page: Charts - Bar - Preview contents in all views', () =>
                 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('When user has perform an action on the bar chart, then the undo and reset button should be displayed in enabled state', () => {
-                utilities.verifyElementNotDisabled(chartsBarPage.previewTabToolsUndoButton());
-                utilities.verifyElementNotDisabled(chartsBarPage.previewTabToolsResetButton());
+            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 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('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('CSS of the tooltip text', { tags: 'css' }, () => {
-                utilities.triggerMouseover(chartsBarPage.previewTabToolsUndoButton());
-                utilities.verifyCSS(chartsBarPage.tooltipText(), {
-                    'color': css.color.whiteText,
+            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.regular,
-                    'background-color': css.color.tooltipBg
+                    'font-weight': css.fontWeight.semibold
                 });
-                utilities.triggerMouseout(chartsBarPage.previewTabToolsUndoButton());
-                utilities.triggerMouseover(chartsBarPage.previewTabToolsResetButton());
+                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.normal,
+                    'font-size': css.fontSize.small,
                     'font-weight': css.fontWeight.regular,
                     'background-color': css.color.tooltipBg
                 });
-                utilities.triggerMouseout(chartsBarPage.previewTabToolsResetButton());
+                utilities.triggerMouseout(chartsBarPage.previewTabToolsAddBarOrPointButton());
             });
 
             it('Accessibility of the tooltip text', { tags: 'a11y' }, () => {
-                utilities.triggerMouseover(chartsBarPage.previewTabToolsUndoButton());
-                utilities.verifyElementVisibilityState(chartsBarPage.tooltipText(), 'visible');
-                cy.checkAccessibility(chartsBarPage.tooltipText());
-                utilities.triggerMouseout(chartsBarPage.previewTabToolsUndoButton());
-                utilities.verifyElementVisibilityState(chartsBarPage.tooltipText(), 'notExist');
-                utilities.triggerMouseover(chartsBarPage.previewTabToolsResetButton());
+                utilities.triggerMouseover(chartsBarPage.previewTabToolsAddBarOrPointButton());
                 utilities.verifyElementVisibilityState(chartsBarPage.tooltipText(), 'visible');
-                cy.checkAccessibility(chartsBarPage.tooltipText());
-                utilities.triggerMouseout(chartsBarPage.previewTabToolsResetButton());
+                cy.checkAccessibility(chartsBarPage.tooltipText().parents('[role="tooltip"]'));
+                utilities.triggerMouseout(chartsBarPage.previewTabToolsAddBarOrPointButton());
                 utilities.verifyElementVisibilityState(chartsBarPage.tooltipText(), 'notExist');
             });
 
-            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('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);
@@ -213,19 +297,121 @@ describe('Create item page: Charts - Bar - Preview contents in all views', () =>
                 utilities.verifyElementDisabled(chartsBarPage.previewTabToolsAddBarOrPointButton());
             });
 
-            it('User should be able to increase and decrease the height of the newly added bar', () => {
-                chartsBarPage.steps.setBarValueInPreviewTab({ barIndex: 4, value: 8, range: 20 });
-                chartsBarPage.steps.setBarValueInPreviewTab({ barIndex: 4, value: 3, range: 20 });
+            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('User should be able to edit the label a bar', () => {
-                chartsBarPage.steps.editBarLabelInPreviewTab(0, '2000');
-                chartsBarPage.steps.editBarLabelInPreviewTab(1, '2001');
+            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 the undo button, then the last performed action should be reverted', () => {
+            it('When user clicks on a undo button, then the previously performed action should be reverted', () => {
                 chartsBarPage.steps.clickOnUndoButtonPreviewTab();
-                chartsBarPage.steps.editBarLabelInPreviewTab(1, 'Bar 2');
+                utilities.verifyInnerText(utilities.getNthElement(chartsBarPage.previewTabBarLabel(), 0), 'Bar 1');
             });
 
             it('When user has clicked on undo button, then the redo button should be enabled', () => {
@@ -241,7 +427,7 @@ describe('Create item page: Charts - Bar - Preview contents in all views', () =>
                 utilities.triggerMouseover(chartsBarPage.previewTabToolsRedoButton());
                 utilities.verifyCSS(chartsBarPage.tooltipText(), {
                     'color': css.color.whiteText,
-                    'font-size': css.fontSize.normal,
+                    'font-size': css.fontSize.small,
                     'font-weight': css.fontWeight.regular,
                     'background-color': css.color.tooltipBg
                 });
@@ -251,22 +437,156 @@ describe('Create item page: Charts - Bar - Preview contents in all views', () =>
             it('Accessibility of the tooltip text', { tags: 'a11y' }, () => {
                 utilities.triggerMouseover(chartsBarPage.previewTabToolsRedoButton());
                 utilities.verifyElementVisibilityState(chartsBarPage.tooltipText(), 'visible');
-                cy.checkAccessibility(chartsBarPage.tooltipText());
+                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 last reverted action should be performed and the button should be disabled again', () => {
+            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(), 1), '2001');
+                utilities.verifyInnerText(utilities.getNthElement(chartsBarPage.previewTabBarLabel(), 0), 'Edited bar 1');
                 utilities.verifyElementDisabled(chartsBarPage.previewTabToolsRedoButton());
+                utilities.verifyElementNotDisabled(chartsBarPage.previewTabToolsUndoButton());
             });
 
-            it('When user deletes a bar, then that bar should be deleted and the add bar button should be enabled again', () => {
-                chartsBarPage.steps.deleteBarInPreviewTab(4);
+            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);
-                utilities.verifyElementVisibilityState(utilities.getNthElement(chartsBarPage.previewTabBarLabel(), 4), 'notExist');
-                utilities.verifyElementNotDisabled(chartsBarPage.previewTabToolsAddBarOrPointButton());
+            });
+
+            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', () => {
@@ -283,17 +603,13 @@ describe('Create item page: Charts - Bar - Preview contents in all views', () =>
                 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: 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 });
-                chartsBarPage.steps.verifyBarIsLockedInPreviewTab(1);
+                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.previewTabToolsAddBarOrPointButton(), {
-                    'background-color': css.color.activeButtons
-                });
                 utilities.verifyCSS(chartsBarPage.previewTabToolsUndoButton().find('svg'), {
                     'fill': css.color.secondaryBtnDisabled
                 });
@@ -303,56 +619,6 @@ describe('Create item page: Charts - Bar - Preview contents in all views', () =>
                 utilities.verifyCSS(chartsBarPage.previewTabToolsUndoButton().find('svg'), {
                     'fill': css.color.secondaryBtnDisabled
                 });
-                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"]'));
             });
         });
     });

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) => {