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

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

@@ -0,0 +1,283 @@
+import { chartsBarPage, correctAnswerViewPage, itemPreviewPage, studentViewPage } from "../../../pages";
+import { gradingViewPage } from "../../../pages";
+import abortEarlySetup from "../../../support/helpers/abortEarly";
+import utilities from "../../../support/helpers/utilities";
+const css = Cypress.env('css');
+
+let gradingAndCorrectAnsView = ['Grading view', 'Correct answer view']
+const views = utilities.getViews(gradingAndCorrectAnsView);
+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: Grading view, Correct answer view contents', () => {
+    before(() => {
+        cy.loginAs('admin');
+    });
+
+    if (views.includes('Grading view')) {
+        describe('Grading view contents', { tags: 'smoke' }, () => {
+            abortEarlySetup();
+            before(() => {
+                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.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)}`);
+                        chartsBarPage.steps.addBarOrPointInChartInPreviewTab();
+                        chartsBarPage.steps.setBarValueInPreviewTab({ barIndex: 2, value: 5, range: 20 });
+                        chartsBarPage.steps.setBarValueInPreviewTab({ barIndex: 4, value: 10, range: 20 });
+                        studentViewPage.steps.submitResponse();
+                        studentViewPage.steps.clickOnGoToGradingViewButton();
+                    });
+            });
+
+            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('Graph title, Y axis label and X axis label set by the user should be displayed in the chart', () => {
+                utilities.verifyInnerText(chartsBarPage.previewTabGraphTitle(), 'Graph of profits');
+                utilities.verifyInnerText(chartsBarPage.previewTabYAxisLabelButton(), 'Profit');
+                utilities.verifyInnerText(chartsBarPage.previewTabXAxisLabelButton(), 'Year');
+            });
+
+            it('Toolbar, toolbar options and control actions(Undo, Redo, Reset) should not be displayed', () => {
+                utilities.verifyElementVisibilityState(chartsBarPage.previewTabTool(), 'notExist');
+                utilities.verifyElementVisibilityState(chartsBarPage.previewTabToolBarWrapper(), 'notExist');
+            });
+
+            it('The response submitted by the student should be displayed in grading view', () => {
+                chartsBarPage.steps.verifyBarHeightInPreviewTab({ barIndex: 0, barValue: 1, range: 20 });
+                chartsBarPage.steps.verifyBarHeightInPreviewTab({ barIndex: 1, barValue: 2, range: 20 });
+                chartsBarPage.steps.verifyBarHeightInPreviewTab({ barIndex: 2, barValue: 5, range: 20 });
+                chartsBarPage.steps.verifyBarHeightInPreviewTab({ barIndex: 3, barValue: 4, range: 20 });
+                chartsBarPage.steps.verifyBarHeightInPreviewTab({ barIndex: 4, barValue: 10, range: 20 });
+            });
+
+            it('The locked bar should have lock icon displayed in it', () => {
+                chartsBarPage.steps.verifyBarIsLockedInPreviewTab(1);
+            });
+
+            it('Correct and Incorrect icons should be displayed in each bar graph and locked bar should not have any correct or incorrect icon', () => {
+                chartsBarPage.steps.verifyBarCorrectIncorrectIconInPreviewTab(0, 'incorrect');
+                chartsBarPage.steps.verifyBarCorrectIncorrectIconNotExistsInPreviewTab(1);
+                chartsBarPage.steps.verifyBarCorrectIncorrectIconInPreviewTab(2, 'correct');
+                chartsBarPage.steps.verifyBarCorrectIncorrectIconInPreviewTab(3, 'incorrect');
+                chartsBarPage.steps.verifyBarCorrectIncorrectIconInPreviewTab(4, 'incorrect');
+            });
+
+            it('\'Your answer is incorrect\' label should be displayed', () => {
+                chartsBarPage.steps.verifyCorrectIncorrectAnswerLabel('incorrect');
+            });
+
+            it('All the bar graphs in grading view should be non-editable', () => {
+                chartsBarPage.steps.verifyDragHandleNotVisible();                
+                for (let index = 0; index < 5; index++) {
+                    utilities.triggerMouseover(utilities.getNthElement(chartsBarPage.previewTabBar(), index));
+                    utilities.verifyElementVisibilityState(chartsBarPage.barAndPointTooltipWrapper(), 'notExist');
+                }
+            });
+
+            it('Correct answer label should be displayed', () => {
+                utilities.verifyInnerText(chartsBarPage.correctAnswersLabel(), 'Correct answers');
+                utilities.verifyElementVisibilityState(chartsBarPage.correctAnswersLabel(), 'visible');
+            });
+
+            it('Correct answer should be displayed in the correct answer section', () => {
+                chartsBarPage.steps.verifyBarHeightInCorrectAnswerSection({ barIndex: 0, barValue: 2, range: 20 });
+                chartsBarPage.steps.verifyBarHeightInCorrectAnswerSection({ barIndex: 1, barValue: 2, range: 20 });
+                chartsBarPage.steps.verifyBarHeightInCorrectAnswerSection({ barIndex: 2, barValue: 5, range: 20 });
+                chartsBarPage.steps.verifyBarHeightInCorrectAnswerSection({ barIndex: 3, barValue: 1, range: 20 });
+                chartsBarPage.steps.verifyBarHeightInCorrectAnswerSection({ barIndex: 4, barValue: 8, range: 20 });
+                chartsBarPage.steps.verifyBarCorrectIconInCorrectAnswerSection(0);
+                chartsBarPage.steps.verifyBarCorrectIncorrectIconNotExistsInCorrectAnswerSection(1);
+                chartsBarPage.steps.verifyBarCorrectIconInCorrectAnswerSection(2);
+                chartsBarPage.steps.verifyBarCorrectIconInCorrectAnswerSection(3);
+                chartsBarPage.steps.verifyBarCorrectIconInCorrectAnswerSection(4);
+                chartsBarPage.steps.verifyGraphTitleInCorrectAnswerSection('Graph of profits');
+                chartsBarPage.steps.verifyYAxisLabelInCorrectAnswerSection('Profit');
+                chartsBarPage.steps.verifyXAxisLabelInCorrectAnswerSection('Year');
+            });
+
+            it('Points and the total score should be displayed', () => {
+                gradingViewPage.steps.verifyGradingViewScore(0, 10);
+            });
+
+            it('CSS of grading view', { tags: 'css' }, () => {
+                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.text,
+                    'font-size': css.fontSize.default,
+                    'font-weight': css.fontWeight.bold
+                });
+                utilities.verifyCSS(chartsBarPage.previewTabXAxisLabelButton(), {
+                    'color': css.color.text,
+                    'font-size': css.fontSize.default,
+                    'font-weight': css.fontWeight.bold
+                });
+                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.previewTabBar().eq(4), {
+                    'background-color': barBackgroundColor[4]
+                });
+                utilities.verifyCSS(chartsBarPage.barLockIcon(), {
+                    'background-color': css.color.defaultBackground,
+                });
+            });
+
+            it('Accessibility of grading view', { tags: 'a11y' }, () => {
+                cy.checkAccessibility(chartsBarPage.previewTabBar().parents('[class*="question-preview-wrapper"]'));
+            });
+        });
+    }
+
+    if (views.includes('Correct answer view')) {
+        describe('Correct answer view contents', { tags: 'smoke' }, () => {
+            abortEarlySetup();
+            before(() => {
+                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.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(chartsBarPage.questionInstructionsText(), 'Set the bar on the chart for the profits of the years');
+                utilities.verifyElementVisibilityState(chartsBarPage.questionInstructionsText(), 'visible');
+            });
+
+            it('Graph title, Y axis label and X axis label set by the user should be displayed in the chart', () => {
+                utilities.verifyInnerText(chartsBarPage.previewTabGraphTitle(), 'Graph of profits');
+                utilities.verifyInnerText(chartsBarPage.previewTabYAxisLabelButton(), 'Profit');
+                utilities.verifyInnerText(chartsBarPage.previewTabXAxisLabelButton(), 'Year');
+            });
+
+            it('Toolbar and control actions(Undo, Redo, Reset) should not be displayed', () => {
+                utilities.verifyElementVisibilityState(chartsBarPage.previewTabTool(), 'notExist');
+                utilities.verifyElementVisibilityState(chartsBarPage.previewTabToolBarWrapper(), 'notExist');
+            });
+
+            it('The correct answer set by user should be displayed in the correct answer view', () => {
+                chartsBarPage.steps.verifyBarHeightInPreviewTab({ barIndex: 0, barValue: 2, range: 20 });
+                chartsBarPage.steps.verifyBarHeightInPreviewTab({ barIndex: 1, barValue: 2, range: 20 });
+                chartsBarPage.steps.verifyBarHeightInPreviewTab({ barIndex: 2, barValue: 5, range: 20 });
+                chartsBarPage.steps.verifyBarHeightInPreviewTab({ barIndex: 3, barValue: 1, range: 20 });
+                chartsBarPage.steps.verifyBarHeightInPreviewTab({ barIndex: 4, barValue: 8, range: 20 });
+                chartsBarPage.steps.verifyBarCorrectIncorrectIconInPreviewTab(0, 'correct');
+                chartsBarPage.steps.verifyBarCorrectIncorrectIconNotExistsInPreviewTab(1);
+                chartsBarPage.steps.verifyBarIsLockedInPreviewTab(1);
+                chartsBarPage.steps.verifyBarCorrectIncorrectIconInPreviewTab(2, 'correct');
+                chartsBarPage.steps.verifyBarCorrectIncorrectIconInPreviewTab(3, 'correct');
+                chartsBarPage.steps.verifyBarCorrectIncorrectIconInPreviewTab(4, 'correct');
+            });
+
+            it('The points alloted to the question should be displayed', () => {
+                correctAnswerViewPage.steps.verifyAvailablePoints(10);
+            });
+
+            it('CSS of correct answer section', { tags: 'css' }, () => {
+                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.text,
+                    'font-size': css.fontSize.default,
+                    'font-weight': css.fontWeight.bold
+                });
+                utilities.verifyCSS(chartsBarPage.previewTabXAxisLabelButton(), {
+                    'color': css.color.text,
+                    'font-size': css.fontSize.default,
+                    'font-weight': css.fontWeight.bold
+                });
+                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.previewTabBar().eq(4), {
+                    'background-color': barBackgroundColor[4]
+                });
+                utilities.verifyCSS(chartsBarPage.barLockIcon(), {
+                    'background-color': css.color.defaultBackground,
+                });
+            });
+
+            it('Accessibility of correct answer section', { tags: 'a11y' }, () => {
+                cy.checkAccessibility(chartsBarPage.previewTabBar().parents('[class*="question-preview-wrapper"]'));
+            });
+        });
+    }
+});