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

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

@@ -0,0 +1,281 @@
+import { chartsLinePage, 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 = "";
+
+
+describe('Create item page - Charts - Line: Grading view, Correct answer view contents', () => {
+    before(() => {
+        cy.loginAs('admin');
+    });
+
+    if (views.includes('Grading view')) {
+        describe('Grading view contents', { tags: 'smoke' }, () => {
+            abortEarlySetup();
+            before(() => {
+                chartsLinePage.steps.navigateToCreateQuestion('charts');
+                cy.barsPreLoaderWait();
+                chartsLinePage.steps.addTextInQuestionInstructionsInputField('Set the points on the chart for the profits of the years');
+                chartsLinePage.steps.selectLineButton();
+                chartsLinePage.steps.selectAddBarOrPointToolbarOption();
+                chartsLinePage.steps.addBarOrPointInChartInSelectChartTypeSection();
+                chartsLinePage.steps.setGraphTitle('Graph of profits');
+                chartsLinePage.steps.setYAxisLabel('Profit');
+                chartsLinePage.steps.setXAxisLabel('Year');
+                chartsLinePage.steps.setMaxYValue(20);
+                chartsLinePage.steps.setPointValueInSelectChartTypeSection({ pointIndex: 0, value: 1, range: 20 });
+                chartsLinePage.steps.setPointValueInSelectChartTypeSection({ pointIndex: 1, value: 2, range: 20 });
+                chartsLinePage.steps.setPointValueInSelectChartTypeSection({ pointIndex: 2, value: 3, range: 20 });
+                chartsLinePage.steps.setPointValueInSelectChartTypeSection({ pointIndex: 3, value: 4, range: 20 });
+                chartsLinePage.steps.lockPoint(1);
+                chartsLinePage.steps.allotPoints(10);
+                chartsLinePage.steps.setPointValueInSpecifyCorrectAnswerSection({ pointIndex: 0, value: 2, range: 20 });
+                chartsLinePage.steps.setPointValueInSpecifyCorrectAnswerSection({ pointIndex: 2, value: 5, range: 20 });
+                chartsLinePage.steps.setPointValueInSpecifyCorrectAnswerSection({ pointIndex: 3, value: 1, range: 20 });
+                chartsLinePage.steps.addBarOrPointInChartInSpecifyCorrectAnswerSection();
+                chartsLinePage.steps.setPointValueInSpecifyCorrectAnswerSection({ pointIndex: 4, value: 8, range: 20 });
+                chartsLinePage.steps.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)}`);
+                        chartsLinePage.steps.addBarOrPointInChartInPreviewTab();
+                        chartsLinePage.steps.setPointValueInPreviewTab({ pointIndex: 2, value: 5, range: 20 });
+                        chartsLinePage.steps.setPointValueInPreviewTab({ pointIndex: 4, value: 10, range: 20 });
+                        studentViewPage.steps.submitResponse();
+                        studentViewPage.steps.clickOnGoToGradingViewButton();
+                    });
+            });
+
+            it('Question instructions should be visible', () => {
+                utilities.verifyInnerText(chartsLinePage.questionInstructionsText(), 'Set the points on the chart for the profits of the years');
+                utilities.verifyElementVisibilityState(chartsLinePage.questionInstructionsText(), 'visible');
+            });
+
+            it('Graph title, Y axis label and X axis label should be displayed in the chart', () => {
+                utilities.verifyInnerText(chartsLinePage.previewTabGraphTitle(), 'Graph of profits');
+                utilities.verifyInnerText(chartsLinePage.previewTabYAxisLabelButton(), 'Profit');
+                utilities.verifyInnerText(chartsLinePage.previewTabXAxisLabelButton(), 'Year');
+            });
+
+            it('Toolbar, toolbar options and control actions(Undo, Redo, Reset) should not be displayed', () => {
+                utilities.verifyElementVisibilityState(chartsLinePage.previewTabTool(), 'notExist');
+                utilities.verifyElementVisibilityState(chartsLinePage.previewTabToolBarWrapper(), 'notExist');
+            });
+
+            it('The response submitted by the student should be displayed in grading view', () => {
+                chartsLinePage.steps.verifyPointValueInPreviewTab({ pointIndex: 0, value: 1, range: 20 });
+                chartsLinePage.steps.verifyPointValueInPreviewTab({ pointIndex: 1, value: 2, range: 20 });
+                chartsLinePage.steps.verifyPointValueInPreviewTab({ pointIndex: 2, value: 5, range: 20 });
+                chartsLinePage.steps.verifyPointValueInPreviewTab({ pointIndex: 3, value: 4, range: 20 });
+                chartsLinePage.steps.verifyPointValueInPreviewTab({ pointIndex: 4, value: 10, range: 20 });
+            });
+
+            it('The locked point should have lock icon displayed in it', () => {
+                chartsLinePage.steps.verifyPointIsLockedInPreviewTab(1);
+            });
+
+            it('Correct and Incorrect icons should be displayed in each line graph and locked point should not have any correct or incorrect icon', () => {
+                chartsLinePage.steps.verifyPointCorrectIncorrectIconInPreviewTab(0, 'incorrect');
+                chartsLinePage.steps.verifyPointCorrectIncorrectIconNotExistsInPreviewTab(1);
+                chartsLinePage.steps.verifyPointCorrectIncorrectIconInPreviewTab(2, 'correct');
+                chartsLinePage.steps.verifyPointCorrectIncorrectIconInPreviewTab(3, 'incorrect');
+                chartsLinePage.steps.verifyPointCorrectIncorrectIconInPreviewTab(4, 'incorrect');
+            });
+
+            it('\'Your answer is incorrect\' label should be displayed', () => {
+                chartsLinePage.steps.verifyCorrectIncorrectAnswerLabel('incorrect');
+            });
+
+            it('All the points in grading view should be non-editable', () => {
+                chartsLinePage.steps.keyBoardUpPointInPreviewTab(0);                
+                chartsLinePage.steps.keyBoardUpPointInPreviewTab(1);  
+                chartsLinePage.steps.verifyPointValueInPreviewTab({ pointIndex: 0, value: 1, range: 20 });
+                chartsLinePage.steps.verifyPointValueInPreviewTab({ pointIndex: 1, value: 2, range: 20 });          
+                for (let index = 0; index < 5; index++) {
+                    utilities.triggerMouseover(utilities.getNthElement(chartsLinePage.previewTabPoint(), index));
+                    utilities.verifyElementVisibilityState(chartsLinePage.barAndPointTooltipWrapper(), 'notExist');
+                }
+            });
+
+            it('Correct answer label should be displayed', () => {
+                utilities.verifyInnerText(chartsLinePage.correctAnswersLabel(), 'Correct answers');
+                utilities.verifyElementVisibilityState(chartsLinePage.correctAnswersLabel(), 'visible');
+            });
+
+            it('Correct answer should be displayed in the correct answer section', () => {
+                chartsLinePage.steps.verifyPointValueInCorrectAnswerSection({ pointIndex: 0, value: 2, range: 20 });
+                chartsLinePage.steps.verifyPointValueInCorrectAnswerSection({ pointIndex: 1, value: 2, range: 20 });
+                chartsLinePage.steps.verifyPointValueInCorrectAnswerSection({ pointIndex: 2, value: 5, range: 20 });
+                chartsLinePage.steps.verifyPointValueInCorrectAnswerSection({ pointIndex: 3, value: 1, range: 20 });
+                chartsLinePage.steps.verifyPointValueInCorrectAnswerSection({ pointIndex: 4, value: 8, range: 20 });
+                chartsLinePage.steps.verifyPointCorrectIconInCorrectAnswerSection(0);
+                chartsLinePage.steps.verifyPointCorrectIncorrectIconNotExistsInCorrectAnswerSection(1);
+                chartsLinePage.steps.verifyPointCorrectIconInCorrectAnswerSection(2);
+                chartsLinePage.steps.verifyPointCorrectIconInCorrectAnswerSection(3);
+                chartsLinePage.steps.verifyPointCorrectIconInCorrectAnswerSection(4);
+                chartsLinePage.steps.verifyGraphTitleInCorrectAnswerSection('Graph of profits');
+                chartsLinePage.steps.verifyYAxisLabelInCorrectAnswerSection('Profit');
+                chartsLinePage.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(chartsLinePage.previewTabGraphTitle(), {
+                    'color': css.color.text,
+                    'font-size': css.fontSize.default,
+                    'font-weight': css.fontWeight.bold
+                });
+                utilities.verifyCSS(chartsLinePage.previewTabYAxisLabelButton(), {
+                    'color': css.color.text,
+                    'font-size': css.fontSize.default,
+                    'font-weight': css.fontWeight.bold
+                });
+                utilities.verifyCSS(chartsLinePage.previewTabXAxisLabelButton(), {
+                    'color': css.color.text,
+                    'font-size': css.fontSize.default,
+                    'font-weight': css.fontWeight.bold
+                });
+                utilities.verifyCSS(chartsLinePage.lineChartDragIcon().eq(0), {
+                    'background-color': css.color.incorrectAnswer
+                });
+                utilities.verifyCSS(chartsLinePage.lineChartDragIcon().eq(1), {
+                    'background-color': css.color.lineChartDragIcon
+                });
+                utilities.verifyCSS(chartsLinePage.lineChartDragIcon().last(), {
+                    'background-color': css.color.correctAnswer
+                });
+                utilities.verifyCSS(chartsLinePage.previewTabConnectorLine().eq(0), {
+                    'background-color': css.color.lineChartConnectorLine
+                });
+                utilities.verifyCSS(chartsLinePage.previewTabConnectorLine().last(), {
+                    'background-color': css.color.lineChartConnectorLine
+                });
+                utilities.verifyCSS(chartsLinePage.pointLockIcon(), {
+                    'background-color': css.color.defaultBackground,
+                });
+            });
+
+            it('Accessibility of grading view', { tags: 'a11y' }, () => {
+                cy.checkAccessibility(chartsLinePage.previewTabPoint().parents('[class*="question-preview-wrapper"]'));
+            });
+        });
+    }
+
+    if (views.includes('Correct answer view')) {
+        describe('Correct answer view contents', { tags: 'smoke' }, () => {
+            abortEarlySetup();
+            before(() => {
+                chartsLinePage.steps.navigateToCreateQuestion('charts');
+                cy.barsPreLoaderWait();
+                chartsLinePage.steps.addTextInQuestionInstructionsInputField('Set the points on the chart for the profits of the years');
+                chartsLinePage.steps.selectLineButton();
+                chartsLinePage.steps.selectAddBarOrPointToolbarOption();
+                chartsLinePage.steps.addBarOrPointInChartInSelectChartTypeSection();
+                chartsLinePage.steps.setGraphTitle('Graph of profits');
+                chartsLinePage.steps.setYAxisLabel('Profit');
+                chartsLinePage.steps.setXAxisLabel('Year');
+                chartsLinePage.steps.setMaxYValue(20);
+                chartsLinePage.steps.setPointValueInSelectChartTypeSection({ pointIndex: 0, value: 1, range: 20 });
+                chartsLinePage.steps.setPointValueInSelectChartTypeSection({ pointIndex: 1, value: 2, range: 20 });
+                chartsLinePage.steps.setPointValueInSelectChartTypeSection({ pointIndex: 2, value: 3, range: 20 });
+                chartsLinePage.steps.setPointValueInSelectChartTypeSection({ pointIndex: 3, value: 4, range: 20 });
+                chartsLinePage.steps.lockPoint(1);
+                chartsLinePage.steps.allotPoints(10);
+                chartsLinePage.steps.setPointValueInSpecifyCorrectAnswerSection({ pointIndex: 0, value: 2, range: 20 });
+                chartsLinePage.steps.setPointValueInSpecifyCorrectAnswerSection({ pointIndex: 2, value: 5, range: 20 });
+                chartsLinePage.steps.setPointValueInSpecifyCorrectAnswerSection({ pointIndex: 3, value: 1, range: 20 });
+                chartsLinePage.steps.addBarOrPointInChartInSpecifyCorrectAnswerSection();
+                chartsLinePage.steps.setPointValueInSpecifyCorrectAnswerSection({ pointIndex: 4, value: 8, range: 20 });
+                chartsLinePage.steps.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(chartsLinePage.questionInstructionsText(), 'Set the points on the chart for the profits of the years');
+                utilities.verifyElementVisibilityState(chartsLinePage.questionInstructionsText(), 'visible');
+            });
+
+            it('Graph title, Y axis label and X axis label should be displayed in the chart', () => {
+                utilities.verifyInnerText(chartsLinePage.previewTabGraphTitle(), 'Graph of profits');
+                utilities.verifyInnerText(chartsLinePage.previewTabYAxisLabelButton(), 'Profit');
+                utilities.verifyInnerText(chartsLinePage.previewTabXAxisLabelButton(), 'Year');
+            });
+
+            it('Toolbar, toolbar options and control actions(Undo, Redo, Reset) should not be displayed', () => {
+                utilities.verifyElementVisibilityState(chartsLinePage.previewTabTool(), 'notExist');
+                utilities.verifyElementVisibilityState(chartsLinePage.previewTabToolBarWrapper(), 'notExist');
+            });
+
+            it('The correct answer set by user should be displayed in the correct answer view', () => {
+                chartsLinePage.steps.verifyPointValueInPreviewTab({ pointIndex: 0, value: 2, range: 20 });
+                chartsLinePage.steps.verifyPointValueInPreviewTab({ pointIndex: 1, value: 2, range: 20 });
+                chartsLinePage.steps.verifyPointValueInPreviewTab({ pointIndex: 2, value: 5, range: 20 });
+                chartsLinePage.steps.verifyPointValueInPreviewTab({ pointIndex: 3, value: 1, range: 20 });
+                chartsLinePage.steps.verifyPointValueInPreviewTab({ pointIndex: 4, value: 8, range: 20 });
+                chartsLinePage.steps.verifyPointCorrectIncorrectIconInPreviewTab(0, 'correct');
+                chartsLinePage.steps.verifyPointCorrectIncorrectIconNotExistsInPreviewTab(1);
+                chartsLinePage.steps.verifyPointIsLockedInPreviewTab(1);
+                chartsLinePage.steps.verifyPointCorrectIncorrectIconInPreviewTab(2, 'correct');
+                chartsLinePage.steps.verifyPointCorrectIncorrectIconInPreviewTab(3, 'correct');
+                chartsLinePage.steps.verifyPointCorrectIncorrectIconInPreviewTab(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(chartsLinePage.previewTabGraphTitle(), {
+                    'color': css.color.text,
+                    'font-size': css.fontSize.default,
+                    'font-weight': css.fontWeight.bold
+                });
+                utilities.verifyCSS(chartsLinePage.previewTabYAxisLabelButton(), {
+                    'color': css.color.text,
+                    'font-size': css.fontSize.default,
+                    'font-weight': css.fontWeight.bold
+                });
+                utilities.verifyCSS(chartsLinePage.previewTabXAxisLabelButton(), {
+                    'color': css.color.text,
+                    'font-size': css.fontSize.default,
+                    'font-weight': css.fontWeight.bold
+                });
+                utilities.verifyCSS(chartsLinePage.lineChartDragIcon().eq(0), {
+                    'background-color': css.color.correctAnswer
+                });
+                utilities.verifyCSS(chartsLinePage.lineChartDragIcon().eq(1), {
+                    'background-color': css.color.lineChartDragIcon
+                });
+                utilities.verifyCSS(chartsLinePage.previewTabConnectorLine().eq(0), {
+                    'background-color': css.color.lineChartConnectorLine
+                });
+                utilities.verifyCSS(chartsLinePage.pointLockIcon(), {
+                    'background-color': css.color.defaultBackground,
+                });
+            });
+
+            it('Accessibility of correct answer section', { tags: 'a11y' }, () => {
+                cy.checkAccessibility(chartsLinePage.previewTabPoint().parents('[class*="question-preview-wrapper"]'));
+            });
+        });
+    }
+});