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

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

@@ -0,0 +1,223 @@
+import { chartsDotPlotPage, correctAnswerViewPage, itemPreviewPage, studentViewPage } from "../../../pages";
+import { gradingViewPage } from "../../../pages";
+import abortEarlySetup from "../../../support/helpers/abortEarly";
+import utilities from "../../../support/helpers/utilities";
+let gradingAndCorrectAnsView = ['Grading view', 'Correct answer view'];
+const views = utilities.getViews(gradingAndCorrectAnsView);
+var itemReferenceID = "";
+const css = Cypress.env('css');
+
+describe('Create item page - Dot plot charts : Grading view, Correct answer view contents', () => {
+    before(() => {
+        cy.loginAs('admin');
+    });
+
+    if (views.includes('Grading view')) {
+        describe('Grading view contents', { tags: 'smoke' }, () => {
+            abortEarlySetup();
+            before(() => {
+                chartsDotPlotPage.steps.navigateToCreateQuestion('charts');
+                cy.barsPreLoaderWait();
+                chartsDotPlotPage.steps.addTextInQuestionInstructionsInputField('Dot plot');
+                chartsDotPlotPage.steps.selectDotPlot();
+                chartsDotPlotPage.steps.enterTextInMinInputField(1);
+                chartsDotPlotPage.steps.verifyTextInMinInputField(1);
+                chartsDotPlotPage.steps.enterTextInMaxInputField(6);
+                chartsDotPlotPage.steps.verifyTextInMaxInputField(6);
+                chartsDotPlotPage.steps.setGraphTitle('Five-day observation');
+                chartsDotPlotPage.steps.setXAxisLabel('Days');
+                chartsDotPlotPage.steps.selectDotColumnInSelectChartTypeSection({ point: 1, min: 1, interval: 0.25 });
+                chartsDotPlotPage.steps.addDotInSelectChartTypeSection(2);
+                chartsDotPlotPage.steps.unselectDotColumnInSelectChartTypeSection({ point: 1, min: 1, interval: 0.25 });
+                chartsDotPlotPage.steps.lockDotColumn({ point: 1, min: 1, interval: 0.25 });
+                chartsDotPlotPage.steps.selectDotColumnInSelectChartTypeSection({ point: 2, min: 1, interval: 0.25 });
+                chartsDotPlotPage.steps.addDotInSelectChartTypeSection(1);
+                chartsDotPlotPage.steps.unselectDotColumnInSelectChartTypeSection({ point: 2, min: 1, interval: 0.25 });
+                chartsDotPlotPage.steps.allotPoints(10);
+                chartsDotPlotPage.steps.selectDotColumnInSpecifyCorrectAnswer({ point: 3, min: 1, interval: 0.25 });
+                chartsDotPlotPage.steps.addDotInSpecifyCorrectAnswer(3);
+                chartsDotPlotPage.steps.unselectDotColumnInSpecifyCorrectAnswer({ point: 3, min: 1, interval: 0.25 });
+                chartsDotPlotPage.steps.clickOnSaveQuestionButton();
+                utilities.verifyElementVisibilityState(itemPreviewPage.referenceID(), 'visible');
+                //Global variable issue, not working inside before
+                itemPreviewPage.referenceID()
+                    .invoke('text')
+                    .then(($refID) => {
+                        itemReferenceID = $refID;
+                        cy.visit(`/item-engine/demo/render-item/student-view/${utilities.base64Encoding(itemReferenceID)}`);
+                        chartsDotPlotPage.steps.verifyDotColumnIsUnlockedInPreviewTab({ point: 2, min: 1, interval: 0.25 });
+                        chartsDotPlotPage.steps.selectDotColumnInPreviewTab({ point: 2, min: 1, interval: 0.25 });
+                        chartsDotPlotPage.steps.addDotInPreviewTab(1);
+                        chartsDotPlotPage.steps.unselectDotColumnInPreviewTab({ point: 2, min: 1, interval: 0.25 });
+                        chartsDotPlotPage.steps.verifyDotCountPreviewTab(2, { point: 2, min: 1, interval: 0.25 });
+                        chartsDotPlotPage.steps.verifyDotColumnIsUnlockedInPreviewTab({ point: 2, min: 1, interval: 0.25 });
+                        chartsDotPlotPage.steps.selectDotColumnInPreviewTab({ point: 3, min: 1, interval: 0.25 });
+                        chartsDotPlotPage.steps.addDotInPreviewTab(3);
+                        chartsDotPlotPage.steps.unselectDotColumnInPreviewTab({ point: 3, min: 1, interval: 0.25 });
+                        chartsDotPlotPage.steps.verifyDotCountPreviewTab(3, { point: 3, min: 1, interval: 0.25 });
+                        studentViewPage.steps.submitResponse();
+                        studentViewPage.steps.clickOnGoToGradingViewButton();
+                    });
+            });
+
+            it('Question instructions should be visible', () => {
+                utilities.verifyInnerText(chartsDotPlotPage.questionInstructionsText(), 'Dot plot');
+                utilities.verifyElementVisibilityState(chartsDotPlotPage.questionInstructionsText(), 'visible');
+            });
+
+            it('Control options should not be displayed', () => {
+                utilities.verifyElementVisibilityState(chartsDotPlotPage.controlOptionsPreviewTab(), 'notExist');
+            });
+
+            it('Correct answer label should be displayed', () => {
+                utilities.verifyInnerText(chartsDotPlotPage.correctAnswersLabel(), 'Correct answers');
+                utilities.verifyElementVisibilityState(chartsDotPlotPage.correctAnswersLabel(), 'visible');
+            });
+
+            it('The number line axis should be displayed with labels from 1 to 6 with 20 divisions', () => {
+                utilities.verifyElementVisibilityState(chartsDotPlotPage.numberLineAxisCorrectAnswerSection(), 'exist');
+                chartsDotPlotPage.steps.verifyDivisionsOnNumberLineAxisCorrectAnswerSection({ min: 1, max: 6, interval: 0.25 });
+                chartsDotPlotPage.steps.verifyLabelsOnNumberLineAxisCorrectAnswerSection(1, 6, 4);
+            });
+
+            it('When user hovers over dot column then it should be displayed in interactive state ad tooltip should not be displayed', () => {
+                utilities.triggerMouseover(utilities.getNthElement(chartsDotPlotPage.dotColumnPreviewTab(), 2));
+                utilities.verifyCSS(utilities.getNthElement(chartsDotPlotPage.dotColumnPreviewTab(), 2), {
+                    'background-color': css.color.draggableOptionsContainerBg
+                });
+                chartsDotPlotPage.steps.tooltipWrapperNotExistPreviewTab();
+                utilities.triggerMouseout(utilities.getNthElement(chartsDotPlotPage.dotColumnPreviewTab(), 2));
+            });
+
+            it('Dot plot chart should not be editable in grading view', () => {
+                chartsDotPlotPage.steps.selectDotColumnInPreviewTab({ point: 4, min: 1, interval: 0.25 });
+                chartsDotPlotPage.steps.tooltipWrapperNotExistPreviewTab();
+                chartsDotPlotPage.steps.addDotUsingKeyboardPreviewTab(1, { point: 4, min: 1, interval: 0.25 });
+                chartsDotPlotPage.steps.verifyDotNotExistPreviewTab({ point: 4, min: 1, interval: 0.25 });
+            });
+
+            it('Locked bar with prefilled dots should be displayed in correct answer section', () => {
+                chartsDotPlotPage.steps.verifyDotColumnIsLockedInCorrectAnswerSection({ point: 1, min: 1, interval: 0.25 });
+                chartsDotPlotPage.steps.verifyDotCountCorrectAnswerSection(2, { point: 1, min: 1, interval: 0.25 });
+            });
+
+            it('Correct answer section along with dot plot attempted by the user should be displayed', () => {
+                chartsDotPlotPage.steps.verifyCorrectDotColumnPreviewTab({ point: 3, min: 1, interval: 0.25 });
+                chartsDotPlotPage.steps.verifyCorrectDotPreviewTab({ point: 3, min: 1, interval: 0.25 });
+                chartsDotPlotPage.steps.verifyIncorrectDotColumnPreviewTab({ point: 2, min: 1, interval: 0.25 });
+                chartsDotPlotPage.steps.verifyIncorrectDotPreviewTab({ point: 2, min: 1, interval: 0.25 });
+                chartsDotPlotPage.steps.verifyCorrectDotColumnCorrectAnswerSection({ point: 3, min: 1, interval: 0.25 });
+                chartsDotPlotPage.steps.verifyCorrectDotCorrectAnswerSection({ point: 3, min: 1, interval: 0.25 });
+            });
+
+            it('Points and the total score should be displayed', () => {
+                gradingViewPage.steps.verifyGradingViewScore(0, 10);
+            });
+
+            it('CSS of grading view', { tags: 'css' }, () => {
+                utilities.verifyCSS(utilities.getNthElement(chartsDotPlotPage.dotIconPreviewTab(), 0), {
+                    'background-color': css.color.activeButtons,
+                });
+                utilities.verifyCSS(chartsDotPlotPage.previewTabGraphTitle(), {
+                    'color': css.color.text,
+                    'font-size': css.fontSize.default,
+                    'font-weight': css.fontWeight.bold
+                });
+                utilities.verifyCSS(chartsDotPlotPage.graphTitleCorrectAnswerSection(), {
+                    'color': css.color.text,
+                    'font-size': css.fontSize.default,
+                    'font-weight': css.fontWeight.bold
+                });
+            });
+
+            it('Accessibility of grading view', { tags: 'a11y' }, () => {
+                cy.checkAccessibility(chartsDotPlotPage.dotPlotChartPreviewTab().parents('[class*="question-preview-wrapper"]'));
+            });
+        });
+    }
+
+    if (views.includes('Correct answer view')) {
+        describe('Correct answer view contents', { tags: 'smoke' }, () => {
+            abortEarlySetup();
+            before(() => {
+                chartsDotPlotPage.steps.navigateToCreateQuestion('charts');
+                cy.barsPreLoaderWait();
+                chartsDotPlotPage.steps.addTextInQuestionInstructionsInputField('Dot plot');
+                chartsDotPlotPage.steps.selectDotPlot();
+                chartsDotPlotPage.steps.enterTextInMinInputField(1);
+                chartsDotPlotPage.steps.verifyTextInMinInputField(1);
+                chartsDotPlotPage.steps.enterTextInMaxInputField(6);
+                chartsDotPlotPage.steps.verifyTextInMaxInputField(6);
+                chartsDotPlotPage.steps.setGraphTitle('Five-day observation');
+                chartsDotPlotPage.steps.setXAxisLabel('Days');
+                chartsDotPlotPage.steps.selectDotColumnInSelectChartTypeSection({ point: 1, min: 1, interval: 0.25 });
+                chartsDotPlotPage.steps.addDotInSelectChartTypeSection(2);
+                chartsDotPlotPage.steps.unselectDotColumnInSelectChartTypeSection({ point: 1, min: 1, interval: 0.25 });
+                chartsDotPlotPage.steps.lockDotColumn({ point: 1, min: 1, interval: 0.25 });
+                chartsDotPlotPage.steps.selectDotColumnInSelectChartTypeSection({ point: 2, min: 1, interval: 0.25 });
+                chartsDotPlotPage.steps.addDotInSelectChartTypeSection(1);
+                chartsDotPlotPage.steps.unselectDotColumnInSelectChartTypeSection({ point: 2, min: 1, interval: 0.25 });
+                chartsDotPlotPage.steps.allotPoints(10);
+                chartsDotPlotPage.steps.selectDotColumnInSpecifyCorrectAnswer({ point: 3, min: 1, interval: 0.25 });
+                chartsDotPlotPage.steps.addDotInSpecifyCorrectAnswer(3);
+                chartsDotPlotPage.steps.unselectDotColumnInSpecifyCorrectAnswer({ point: 3, min: 1, interval: 0.25 });
+                chartsDotPlotPage.steps.clickOnSaveQuestionButton();
+                utilities.verifyElementVisibilityState(itemPreviewPage.referenceID(), 'visible');
+                //Global variable issue, not working inside before
+                itemPreviewPage.referenceID()
+                    .invoke('text')
+                    .then(($refID) => {
+                        itemReferenceID = $refID
+                        cy.visit(`/item-engine/demo/render-item/correct-answer-view/${utilities.base64Encoding(itemReferenceID)}`);
+                    });
+            });
+
+            it('Question instructions should be visible', () => {
+                utilities.verifyInnerText(chartsDotPlotPage.questionInstructionsText(), 'Dot plot');
+                utilities.verifyElementVisibilityState(chartsDotPlotPage.questionInstructionsText(), 'visible');
+            });
+
+            it('Control options should not be displayed', () => {
+                utilities.verifyElementVisibilityState(chartsDotPlotPage.controlOptionsPreviewTab(), 'notExist');
+            });
+
+            it('When user hovers over dot column then it should be displayed in interactive state ad tooltip should not be displayed', () => {
+                utilities.triggerMouseover(utilities.getNthElement(chartsDotPlotPage.dotColumnPreviewTab(), 3));
+                utilities.verifyCSS(utilities.getNthElement(chartsDotPlotPage.dotColumnPreviewTab(), 3), {
+                    'background-color': css.color.draggableOptionsContainerBg
+                });
+                chartsDotPlotPage.steps.tooltipWrapperNotExistPreviewTab();
+                utilities.triggerMouseout(utilities.getNthElement(chartsDotPlotPage.dotColumnPreviewTab(), 3));
+            });
+
+            it('Locked bar with prefilled dots should be displayed', () => {
+                chartsDotPlotPage.steps.verifyDotColumnIsLockedInPreviewTab({ point: 1, min: 1, interval: 0.25 });
+                chartsDotPlotPage.steps.verifyDotCountPreviewTab(2, { point: 1, min: 1, interval: 0.25 });
+            });
+
+            it('The correct answer set by user should be displayed in the correct answer view', () => {
+                chartsDotPlotPage.steps.verifyCorrectDotColumnPreviewTab({ point: 3, min: 1, interval: 0.25 });
+                chartsDotPlotPage.steps.verifyCorrectDotPreviewTab({ point: 3, min: 1, interval: 0.25 });
+            });
+
+            it('The points alloted to the question should be displayed', () => {
+                correctAnswerViewPage.steps.verifyAvailablePoints(10);
+            });
+
+            it('CSS of correct answer section', { tags: 'css' }, () => {
+                utilities.verifyCSS(utilities.getNthElement(chartsDotPlotPage.dotIconPreviewTab(), 0), {
+                    'background-color': css.color.activeButtons,
+                });
+                utilities.verifyCSS(chartsDotPlotPage.previewTabGraphTitle(), {
+                    'color': css.color.text,
+                    'font-size': css.fontSize.default,
+                    'font-weight': css.fontWeight.bold
+                });
+            });
+
+            it('Accessibility of correct answer section', { tags: 'a11y' }, () => {
+                cy.checkAccessibility(chartsDotPlotPage.dotPlotChartPreviewTab().parents('[class*="question-preview-wrapper"]'));
+            });
+        });
+    }
+});

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

@@ -0,0 +1,402 @@
+import { chartsDotPlotPage, 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 = "";
+const controlOptions = ['Undo', 'Redo', 'Reset'];
+
+describe('Create item page: Charts - Dot - Preview contents in all views', () => {
+    before(() => {
+        cy.loginAs('admin');
+    });
+
+    views.forEach((view) => {
+        describe(`Preview tab contents - ${view}`, { tags: 'smoke' }, () => {
+            abortEarlySetup();
+            before(() => {
+                switch (view) {
+                    case 'Question preview':
+                        chartsDotPlotPage.steps.navigateToCreateQuestion('charts');
+                        cy.barsPreLoaderWait();
+                        chartsDotPlotPage.steps.addTextInQuestionInstructionsInputField('Dot plot');
+                        chartsDotPlotPage.steps.selectDotPlot();
+                        chartsDotPlotPage.steps.enterTextInMinInputField(1);
+                        chartsDotPlotPage.steps.verifyTextInMinInputField(1);
+                        chartsDotPlotPage.steps.enterTextInMaxInputField(6);
+                        chartsDotPlotPage.steps.verifyTextInMaxInputField(6);
+                        chartsDotPlotPage.steps.setGraphTitle('Five-day observation');
+                        chartsDotPlotPage.steps.setXAxisLabel('Days');
+                        chartsDotPlotPage.steps.plotDotsInDotColumnSelectChartTypeSection(2, { point: 1, min: 1, interval: 0.25, defaultDots: 0 });
+                        chartsDotPlotPage.steps.lockDotColumn({ point: 1, min: 1, interval: 0.25 });
+                        chartsDotPlotPage.steps.plotDotsInDotColumnSelectChartTypeSection(1, { point: 2, min: 1, interval: 0.25, defaultDots: 0 });
+                        chartsDotPlotPage.steps.allotPoints(10);
+                        chartsDotPlotPage.steps.plotDotsInDotColumnSpecifyCorrectAnswer(3, { point: 3, min: 1, interval: 0.25, defaultDots:0 });
+                        chartsDotPlotPage.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)}`);
+                        chartsDotPlotPage.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') {
+                    chartsDotPlotPage.steps.clickOnSaveQuestionButton();
+                    utilities.verifyElementVisibilityState(itemPreviewPage.referenceID(), 'visible');
+                    itemReferenceID = itemPreviewPage.steps.getItemReferenceID();
+                }
+            });
+
+            it('Question instructions should be visible', () => {
+                utilities.verifyInnerText(chartsDotPlotPage.questionInstructionsText(), 'Dot plot');
+                utilities.verifyElementVisibilityState(chartsDotPlotPage.questionInstructionsText(), 'visible');
+            });
+
+            it('The graph title and X axis label set by the user should be displayed', () => {
+                utilities.verifyInnerText(chartsDotPlotPage.previewTabGraphTitle(), 'Five-day observation');
+                utilities.verifyElementVisibilityState(chartsDotPlotPage.previewTabGraphTitle(), 'visible');
+                utilities.verifyInnerText(chartsDotPlotPage.previewTabXAxisLabelButton(), 'Days');
+                utilities.verifyElementVisibilityState(chartsDotPlotPage.previewTabXAxisLabelButton(), 'visible');
+            });
+
+            it('The number line axis should be displayed with labels from 1 to 6 with 20 divisions', () => {
+                utilities.verifyElementVisibilityState(chartsDotPlotPage.numberLineAxisPreviewTab(), 'exist');
+                chartsDotPlotPage.steps.verifyDivisionsOnNumberLineAxisPreviewTab({ min: 1, max: 6, interval: 0.25 });
+                chartsDotPlotPage.steps.verifyLabelsOnNumberLineAxisPreviewTab(1, 6, 4);
+            });
+
+            it('User should be able to edit the X axis labels in preview tab', () => {
+                chartsDotPlotPage.steps.editXAxisLabelInPreviewTab('Numbers of days');
+                utilities.verifyInnerText(chartsDotPlotPage.previewTabXAxisLabelButton(), 'Numbers of days');
+            });
+
+            it('When user hovers over dot column then it should be displayed in interactive state and tooltip with add and minus button should be displayed', () => {
+                utilities.triggerMouseover(utilities.getNthElement(chartsDotPlotPage.dotColumnPreviewTab(), 4));
+                utilities.verifyCSS(utilities.getNthElement(chartsDotPlotPage.dotColumnPreviewTab(), 4), {
+                    'background-color': css.color.draggableOptionsContainerBg
+                });
+                utilities.verifyElementVisibilityState(chartsDotPlotPage.tooltipWrapperPreviewTab(), 'visible');
+                utilities.verifyElementVisibilityState(chartsDotPlotPage.addButtonPreviewTab(), 'visible');
+                utilities.verifyElementVisibilityState(chartsDotPlotPage.minusButtonPreviewTab(), 'visible');
+                utilities.triggerMouseout(utilities.getNthElement(chartsDotPlotPage.dotColumnPreviewTab(), 4));
+            });
+
+            it('Accessibility of interactive dot column', { tags: 'a11y' }, () => {
+                utilities.triggerMouseover(utilities.getNthElement(chartsDotPlotPage.dotColumnPreviewTab(), 4));
+                cy.checkAccessibility(utilities.getNthElement(chartsDotPlotPage.dotColumnPreviewTab(), 4));
+                utilities.triggerMouseout(utilities.getNthElement(chartsDotPlotPage.dotColumnPreviewTab(), 4));
+            });
+
+            it('When user selects an empty dot column, tooltip with add and minus should be displayed and by default minus button should be displayed in disabled state and add button should be in enabled state', () => {
+                chartsDotPlotPage.steps.selectDotColumnInPreviewTab({ point: 4, min: 1, interval: 0.25 });
+                utilities.verifyElementVisibilityState(chartsDotPlotPage.tooltipWrapperPreviewTab(), 'visible');
+                utilities.verifyElementVisibilityState(chartsDotPlotPage.addButtonPreviewTab(), 'visible');
+                utilities.verifyElementVisibilityState(chartsDotPlotPage.minusButtonPreviewTab(), 'visible');
+                utilities.verifyElementDisabled(chartsDotPlotPage.minusButtonPreviewTab());
+                utilities.verifyElementNotDisabled(chartsDotPlotPage.addButtonPreviewTab());
+                chartsDotPlotPage.steps.unselectDotColumnInPreviewTab({ point: 4, min: 1, interval: 0.25 });
+            });
+
+            it('When user adds dots to empty dot column then \'Minus dot\' button should be in enabled state', () => {
+                chartsDotPlotPage.steps.selectDotColumnInPreviewTab({ point: 4, min: 1, interval: 0.25 });
+                chartsDotPlotPage.steps.addDotInPreviewTab(1);
+                utilities.verifyElementNotDisabled(chartsDotPlotPage.minusButtonPreviewTab());
+                chartsDotPlotPage.steps.unselectDotColumnInPreviewTab({ point: 4, min: 1, interval: 0.25 });
+            });
+
+            it('When user hovers over add button then \'Add dot\' tooltip should be displayed', () => {
+                chartsDotPlotPage.steps.selectDotColumnInPreviewTab({ point: 4, min: 1, interval: 0.25 });
+                chartsDotPlotPage.steps.verifyTooltipInnerText(chartsDotPlotPage.addButtonPreviewTab, 'Add dot');
+                chartsDotPlotPage.steps.unselectDotColumnInPreviewTab({ point: 4, min: 1, interval: 0.25 });
+            });
+
+            it('When user hovers over minus button then \'Minus dot\' tooltip should be displayed', () => {
+                chartsDotPlotPage.steps.selectDotColumnInPreviewTab({ point: 4, min: 1, interval: 0.25 });
+                chartsDotPlotPage.steps.verifyTooltipInnerText(chartsDotPlotPage.minusButtonPreviewTab, 'Minus dot');
+                chartsDotPlotPage.steps.unselectDotColumnInPreviewTab({ point: 4, min: 1, interval: 0.25 });
+            });
+
+            it('The locked DotColumn should be displayed in the locked state with added dots and when user hovers over it tooltip should not be displayed', () => {
+                chartsDotPlotPage.steps.verifyDotColumnIsLockedInPreviewTab({ point: 1, min: 1, interval: 0.25 });
+                chartsDotPlotPage.steps.verifyDotCountPreviewTab(2, { point: 1, min: 1, interval: 0.25 });
+                chartsDotPlotPage.steps.selectDotColumnInPreviewTab({ point: 1, min: 1, interval: 0.25 });
+                chartsDotPlotPage.steps.tooltipWrapperNotExistPreviewTab();
+            });
+
+            it('When user attempts the locked state DotColumn using keyboard then user should be unable to make any changes', () => {
+                chartsDotPlotPage.steps.addDotUsingKeyboardPreviewTab(1, { point: 1, min: 1, interval: 0.25 });
+                chartsDotPlotPage.steps.verifyDotCountPreviewTab(2, { point: 1, min: 1, interval: 0.25 });
+                chartsDotPlotPage.steps.minusDotUsingKeyboardPreviewTab(1, { point: 1, min: 1, interval: 0.25 });
+                chartsDotPlotPage.steps.verifyDotCountPreviewTab(2, { point: 1, min: 1, interval: 0.25 });
+            });
+
+            it('The unlocked dot column should be displayed with prefilled dots and user should be able to add dots into it in preview tab', () => {
+                chartsDotPlotPage.steps.plotDotsInDotColumnPreviewTab(3, { point: 2, min: 1, interval: 0.25 });
+            });
+
+            it('User should be able to decrease the number of dots of the dot column in preview tab', () => {
+                chartsDotPlotPage.steps.plotDotsInDotColumnPreviewTab(2, { point: 2, min: 1, interval: 0.25 });
+            });
+
+            it('User should be able to add or remove dots in dot column using keyboard', () => {
+                chartsDotPlotPage.steps.addDotUsingKeyboardPreviewTab(5, { point: 3, min: 1, interval: 0.25 });
+                chartsDotPlotPage.steps.verifyDotCountPreviewTab(5, { point: 3, min: 1, interval: 0.25 });
+                chartsDotPlotPage.steps.minusDotUsingKeyboardPreviewTab(2, { point: 3, min: 1, interval: 0.25 });
+                chartsDotPlotPage.steps.verifyDotCountPreviewTab(3, { point: 3, min: 1, interval: 0.25 });
+            });
+
+            it('When user tries to add more than 10 dots in a dot column then user should only be able to add 10 dots and \'Add\' button should be disabled', () => {
+                //using add button
+                chartsDotPlotPage.steps.plotDotsInDotColumnPreviewTab(10, { point: 5, min: 1, interval: 0.25, defaultDots: 0 });
+                chartsDotPlotPage.steps.selectDotColumnInPreviewTab({ point: 5, min: 1, interval: 0.25 });
+                utilities.verifyElementDisabled(chartsDotPlotPage.addButtonPreviewTab());
+                chartsDotPlotPage.steps.unselectDotColumnInPreviewTab({ point: 5, min: 1, interval: 0.25 });
+                //using keyboard
+                chartsDotPlotPage.steps.addDotUsingKeyboardPreviewTab(10, { point: 4, min: 1, interval: 0.25 });
+                chartsDotPlotPage.steps.verifyDotCountPreviewTab(10, { point: 4, min: 1, interval: 0.25 });
+                utilities.verifyElementDisabled(chartsDotPlotPage.addButtonPreviewTab());
+                chartsDotPlotPage.steps.unselectDotColumnInPreviewTab({ point: 4, min: 1, interval: 0.25 });
+            });
+
+            it('When user removes dots from dot column having 10 dots then \'Add dot\' button should be in enabled state', () => {
+                //using minus button
+                chartsDotPlotPage.steps.plotDotsInDotColumnPreviewTab(9, { point: 5, min: 1, interval: 0.25 });
+                chartsDotPlotPage.steps.selectDotColumnInPreviewTab({ point: 5, min: 1, interval: 0.25 });
+                utilities.verifyElementNotDisabled(chartsDotPlotPage.addButtonPreviewTab());
+                chartsDotPlotPage.steps.unselectDotColumnInPreviewTab({ point: 5, min: 1, interval: 0.25 });
+                //using keyboard
+                chartsDotPlotPage.steps.minusDotUsingKeyboardPreviewTab(1, { point: 4, min: 1, interval: 0.25 });
+                utilities.verifyElementNotDisabled(chartsDotPlotPage.addButtonPreviewTab());
+                chartsDotPlotPage.steps.unselectDotColumnInPreviewTab({ point: 4, min: 1, interval: 0.25 });
+            });
+
+            it('CSS of preview tab contents', { tags: 'css' }, () => {
+                utilities.verifyCSS(chartsDotPlotPage.previewTabGraphTitle(), {
+                    'color': css.color.text,
+                    'font-size': css.fontSize.default,
+                    'font-weight': css.fontWeight.bold
+                });
+                utilities.verifyCSS(chartsDotPlotPage.previewTabXAxisLabelButton(), {
+                    'color': css.color.activeButtons,
+                    'font-size': css.fontSize.default,
+                    'font-weight': css.fontWeight.bold
+                });
+                utilities.verifyCSS(chartsDotPlotPage.dotColumnLockIconPreviewTab().find('[id="Lock"]'), {
+                    'color': css.color.barLockIcon
+                });
+                chartsDotPlotPage.steps.selectDotColumnInPreviewTab({ point: 4, min: 1, interval: 0.25 })
+                utilities.verifyCSS(chartsDotPlotPage.tooltipWrapperPreviewTab(), {
+                    'background-color': css.color.draggableOptionsContainerBg
+                });
+                utilities.verifyCSS(chartsDotPlotPage.addButtonPreviewTab().find('rect'), {
+                    'fill': css.color.addDotButtonBg
+                });
+                utilities.verifyCSS(chartsDotPlotPage.minusButtonPreviewTab().find('rect'), {
+                    'fill': css.color.minusDotButtonBg
+                });
+                utilities.verifyCSS(utilities.getNthElement(chartsDotPlotPage.dotIconPreviewTab(), 0), {
+                    'background-color': css.color.activeButtons
+                });
+            });
+
+            it('Accessibility of preview tab contents', { tags: 'a11y' }, () => {
+                cy.checkAccessibility(chartsDotPlotPage.previewTabGraphTitle().parents('[class*="question-preview-wrapper"]'));
+            });
+        });
+    });
+
+    views.forEach((view) => {
+        describe(`Preview tab contents : Control buttons - ${view}`, { tags: 'smoke' }, () => {
+            abortEarlySetup();
+            before(() => {
+                switch (view) {
+                    case 'Question preview':
+                        chartsDotPlotPage.steps.navigateToCreateQuestion('charts');
+                        cy.barsPreLoaderWait();
+                        chartsDotPlotPage.steps.addTextInQuestionInstructionsInputField('Dot plot');
+                        chartsDotPlotPage.steps.selectDotPlot();
+                        chartsDotPlotPage.steps.enterTextInMinInputField(1);
+                        chartsDotPlotPage.steps.verifyTextInMinInputField(1);
+                        chartsDotPlotPage.steps.enterTextInMaxInputField(6);
+                        chartsDotPlotPage.steps.verifyTextInMaxInputField(6);
+                        chartsDotPlotPage.steps.setGraphTitle('Five-day observation');
+                        chartsDotPlotPage.steps.setXAxisLabel('Days');
+                        chartsDotPlotPage.steps.plotDotsInDotColumnSelectChartTypeSection(2, { point: 1, min: 1, interval: 0.25, defaultDots: 0 });
+                        chartsDotPlotPage.steps.lockDotColumn({ point: 1, min: 1, interval: 0.25 });
+                        chartsDotPlotPage.steps.plotDotsInDotColumnSelectChartTypeSection(1, { point: 2, min: 1, interval: 0.25, defaultDots: 0 });
+                        chartsDotPlotPage.steps.allotPoints(10);
+                        chartsDotPlotPage.steps.plotDotsInDotColumnSpecifyCorrectAnswer(3, { point: 3, min: 1, interval: 0.25, defaultDots:0 });
+                        chartsDotPlotPage.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)}`);
+                        chartsDotPlotPage.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') {
+                    chartsDotPlotPage.steps.clickOnSaveQuestionButton();
+                    utilities.verifyElementVisibilityState(itemPreviewPage.referenceID(), 'visible');
+                    itemReferenceID = itemPreviewPage.steps.getItemReferenceID();
+                }
+            });
+
+            it(`${controlOptions} control options should be displayed in the preview tab and by default, control options should be in disabled state`, () => {
+                utilities.verifyElementVisibilityState(chartsDotPlotPage.controlOptionsPreviewTab(controlOptions[0]), 'visible');
+                utilities.verifyElementDisabled(chartsDotPlotPage.controlOptionsPreviewTab(controlOptions[0]));
+                utilities.verifyElementVisibilityState(chartsDotPlotPage.controlOptionsPreviewTab(controlOptions[1]), 'visible');
+                utilities.verifyElementDisabled(chartsDotPlotPage.controlOptionsPreviewTab(controlOptions[1]));
+                utilities.verifyElementVisibilityState(chartsDotPlotPage.controlOptionsPreviewTab(controlOptions[2]), 'visible');
+                utilities.verifyElementDisabled(chartsDotPlotPage.controlOptionsPreviewTab(controlOptions[2]));
+            });
+
+            it('When user has perform an action on the dot plot chart, then the undo and reset button should be displayed in enabled state', () => {
+                chartsDotPlotPage.steps.plotDotsInDotColumnPreviewTab(4, { point: 2, min: 1, interval: 0.25 });
+                utilities.verifyElementNotDisabled(chartsDotPlotPage.controlOptionsPreviewTab(controlOptions[0]));
+                utilities.verifyElementNotDisabled(chartsDotPlotPage.controlOptionsPreviewTab(controlOptions[2]));
+            });
+
+            it('When user hovers on the enabled undo and reset button, then tooltips \'Undo\' and \'Reset\' should be displayed', () => {
+                chartsDotPlotPage.controlOptionsPreviewTab(controlOptions[0])
+                    .verifyTooltip('Undo');
+                chartsDotPlotPage.controlOptionsPreviewTab(controlOptions[2])
+                    .verifyTooltip('Reset');
+            });
+
+            it('CSS of the tooltip text', { tags: 'css' }, () => {
+                utilities.triggerMouseover(chartsDotPlotPage.controlOptionsPreviewTab(controlOptions[0]));
+                utilities.verifyCSS(chartsDotPlotPage.tooltipText(), {
+                    'color': css.color.whiteText,
+                    'font-size': css.fontSize.normal,
+                    'font-weight': css.fontWeight.regular,
+                    'background-color': css.color.tooltipBg
+                });
+                utilities.triggerMouseout(chartsDotPlotPage.controlOptionsPreviewTab(controlOptions[0]));
+                utilities.triggerMouseover(chartsDotPlotPage.controlOptionsPreviewTab(controlOptions[2]));
+                utilities.verifyCSS(chartsDotPlotPage.tooltipText(), {
+                    'color': css.color.whiteText,
+                    'font-size': css.fontSize.normal,
+                    'font-weight': css.fontWeight.regular,
+                    'background-color': css.color.tooltipBg
+                });
+                utilities.triggerMouseout(chartsDotPlotPage.controlOptionsPreviewTab(controlOptions[2]));
+            });
+
+            it('Accessibility of the tooltip text', { tags: 'a11y' }, () => {
+                utilities.triggerMouseover(chartsDotPlotPage.controlOptionsPreviewTab(controlOptions[0]));
+                utilities.verifyElementVisibilityState(chartsDotPlotPage.tooltipText(), 'visible');
+                cy.checkAccessibility(chartsDotPlotPage.tooltipText());
+                utilities.triggerMouseout(chartsDotPlotPage.controlOptionsPreviewTab(controlOptions[0]));
+                utilities.verifyElementVisibilityState(chartsDotPlotPage.tooltipText(), 'notExist');
+                utilities.triggerMouseover(chartsDotPlotPage.controlOptionsPreviewTab(controlOptions[2]));
+                utilities.verifyElementVisibilityState(chartsDotPlotPage.tooltipText(), 'visible');
+                cy.checkAccessibility(chartsDotPlotPage.tooltipText());
+                utilities.triggerMouseout(chartsDotPlotPage.controlOptionsPreviewTab(controlOptions[2]));
+                utilities.verifyElementVisibilityState(chartsDotPlotPage.tooltipText(), 'notExist');
+            });
+
+            it('When user clicks on the undo button, then the last performed action should be reverted', () => {
+                chartsDotPlotPage.steps.selectControlOptionPreviewTab(controlOptions[0]);
+                chartsDotPlotPage.steps.verifyDotCountPreviewTab(3, { point: 2, min: 1, interval: 0.25 });
+            });
+
+            it('When user has clicked on undo button, then the redo button should be enabled', () => {
+                utilities.verifyElementNotDisabled(chartsDotPlotPage.controlOptionsPreviewTab(controlOptions[1]));
+            });
+
+            it('When user hovers on the enabled redo button, then tooltip \'Redo\' should be displayed', () => {
+                chartsDotPlotPage.controlOptionsPreviewTab(controlOptions[1])
+                    .verifyTooltip('Redo');
+            });
+
+            it('CSS of the tooltip text', { tags: 'css' }, () => {
+                utilities.triggerMouseover(chartsDotPlotPage.controlOptionsPreviewTab(controlOptions[1]));
+                utilities.verifyCSS(chartsDotPlotPage.tooltipText(), {
+                    'color': css.color.whiteText,
+                    'font-size': css.fontSize.normal,
+                    'font-weight': css.fontWeight.regular,
+                    'background-color': css.color.tooltipBg
+                });
+                utilities.triggerMouseout(chartsDotPlotPage.controlOptionsPreviewTab(controlOptions[1]));
+            });
+
+            it('Accessibility of the tooltip text', { tags: 'a11y' }, () => {
+                utilities.triggerMouseover(chartsDotPlotPage.controlOptionsPreviewTab(controlOptions[1]));
+                utilities.verifyElementVisibilityState(chartsDotPlotPage.tooltipText(), 'visible');
+                cy.checkAccessibility(chartsDotPlotPage.tooltipText());
+                utilities.triggerMouseout(chartsDotPlotPage.controlOptionsPreviewTab(controlOptions[1]));
+                utilities.verifyElementVisibilityState(chartsDotPlotPage.tooltipText(), 'notExist');
+            });
+
+            it('When the user clicks on redo button, then the last reverted action should be performed and the \'Redo\' button should be disabled again and \'Undo\' button should be enabled', () => {
+                chartsDotPlotPage.steps.selectControlOptionPreviewTab(controlOptions[1]);
+                chartsDotPlotPage.steps.verifyDotCountPreviewTab(4, { point: 2, min: 1, interval: 0.25 });
+                utilities.verifyElementDisabled(chartsDotPlotPage.controlOptionsPreviewTab(controlOptions[1]));
+                utilities.verifyElementNotDisabled(chartsDotPlotPage.controlOptionsPreviewTab(controlOptions[0]));
+            });
+
+            it(`When the user reaches the initial state by performing undo actions, the \'Undo\' button should get disabled`, () => {
+                for (var i = 0; i < 3; i++) {
+                    chartsDotPlotPage.steps.selectControlOptionPreviewTab(controlOptions[0]);
+                }
+                chartsDotPlotPage.steps.verifyDotCountPreviewTab(1, { point: 2, min: 1, interval: 0.25 });
+                utilities.verifyElementDisabled(chartsDotPlotPage.controlOptionsPreviewTab(controlOptions[0]));
+                utilities.verifyElementNotDisabled(chartsDotPlotPage.controlOptionsPreviewTab(controlOptions[1]));
+            });
+
+            it('When the user reaches the latest state by performing redo actions, the \'Redo\' button should get disabled and error message should disappear', () => {
+                for (var i = 0; i < 3; i++) {
+                    chartsDotPlotPage.steps.selectControlOptionPreviewTab(controlOptions[1]);
+                }
+                chartsDotPlotPage.steps.verifyDotCountPreviewTab(4, { point: 2, min: 1, interval: 0.25 });
+                utilities.verifyElementDisabled(chartsDotPlotPage.controlOptionsPreviewTab(controlOptions[1]));
+                utilities.verifyElementNotDisabled(chartsDotPlotPage.controlOptionsPreviewTab(controlOptions[0]));
+            });
+
+            it('When the user clicks on Reset button and confirms reset, then all the chart actions should be reverted and chart should be reverted to default state and control options should be in disabled state', () => {
+                chartsDotPlotPage.steps.selectControlOptionPreviewTab(controlOptions[2]);
+                chartsDotPlotPage.steps.confirmReset();
+                chartsDotPlotPage.steps.verifyDotColumnIsLockedInPreviewTab({ point: 1, min: 1, interval: 0.25 });
+                chartsDotPlotPage.steps.verifyDotCountPreviewTab(2, { point: 1, min: 1, interval: 0.25 });
+                chartsDotPlotPage.steps.verifyDotCountPreviewTab(1, { point: 2, min: 1, interval: 0.25 });
+                utilities.verifyElementDisabled(chartsDotPlotPage.controlOptionsPreviewTab(controlOptions[0]));
+                utilities.verifyElementDisabled(chartsDotPlotPage.controlOptionsPreviewTab(controlOptions[1]));
+                utilities.verifyElementDisabled(chartsDotPlotPage.controlOptionsPreviewTab(controlOptions[2]));
+            });
+
+            it('CSS of preview tab contents', { tags: 'css' }, () => {
+                controlOptions.forEach((option) => {
+                    utilities.verifyCSS(chartsDotPlotPage.controlOptionsPreviewTab(option).find('svg'), {
+                        'fill': css.color.secondaryBtnDisabled
+                    });
+                });
+            });
+
+            it('Accessibility of preview tab contents', { tags: 'a11y' }, () => {
+                cy.checkAccessibility(chartsDotPlotPage.previewTabGraphTitle().parents('[class*="question-preview-wrapper"]'));
+            });
+        });
+    });
+});