itemengine-cypress-automation 1.0.204 → 1.0.205

package/cypress/e2e/ILC/ChartsBar/gridSettings.js

@@ -0,0 +1,439 @@
+import { chartsBarPage } from "../../../pages";
+import abortEarlySetup from "../../../support/helpers/abortEarly";
+import utilities from "../../../support/helpers/utilities";
+const css = Cypress.env('css');
+
+describe('Create item: Charts- Bar : Select chart type', () => {
+    before(() => {
+        cy.loginAs('admin');
+    });
+
+    describe('Select chart type - Grid  and Bar options section : Contents', () => {
+        abortEarlySetup();
+        before(() => {
+            chartsBarPage.steps.navigateToCreateQuestion('charts');
+            chartsBarPage.steps.addTextInQuestionInstructionsInputField('Bar chart');
+            cy.barsPreLoaderWait();
+        });
+
+        it('Grid label should be displayed', () => {
+            utilities.verifyInnerText(chartsBarPage.gridLabel(), 'Grid');
+            utilities.verifyElementVisibilityState(chartsBarPage.gridLabel(), 'visible');
+        });
+
+        it('Show gridlines label should be displayed', () => {
+            utilities.verifyInnerText(chartsBarPage.showGridLinesLabel(), 'Show gridlines');
+            utilities.verifyElementVisibilityState(chartsBarPage.showGridLinesLabel(), 'visible');
+        });
+
+        it('Two show gridlines options \'Vertical\' and \'Horizontal\' label and checkbox should be displayed and by default both checkboxes should be checked', () => {
+            utilities.verifyInnerText(chartsBarPage.verticalGridlinesLabel(), 'Vertical');
+            utilities.verifyElementVisibilityState(chartsBarPage.verticalGridlinesLabel(), 'visible');
+            utilities.verifyInnerText(chartsBarPage.horizontalGridlinesLabel(), 'Horizontal');
+            utilities.verifyElementVisibilityState(chartsBarPage.horizontalGridlinesLabel(), 'visible');
+            chartsBarPage.steps.verifyHorizontalCheckboxChecked();
+            chartsBarPage.steps.verifyVerticalCheckboxChecked();
+        });
+
+        it('Interval label and input field should be displayed by default, input field should have \'1\' pre-filled in it', () => {
+            utilities.verifyInnerText(chartsBarPage.intervalLabel(), 'Interval');
+            utilities.verifyElementVisibilityState(chartsBarPage.intervalLabel(), 'visible');
+            utilities.verifyElementVisibilityState(chartsBarPage.intervalInputField(), 'visible');
+            chartsBarPage.steps.verifyTextInIntervalInputField(1);
+        });
+
+        it('Annotate every label and input field should be displayed by default, input field should have \'1\' pre-filled in it', () => {
+            utilities.verifyInnerText(chartsBarPage.annotateEveryLabel(), 'Annotate every');
+            utilities.verifyElementVisibilityState(chartsBarPage.annotateEveryLabel(), 'visible');
+            utilities.verifyElementVisibilityState(chartsBarPage.annotateEveryInputField(), 'visible');
+            chartsBarPage.steps.verifyTextInAnnotateEveryInputField(1);
+        });
+
+        it('Grid snapping label and input field should be displayed by default, input field should have \'1\' pre-filled in it', () => {
+            utilities.verifyInnerText(chartsBarPage.gridSnappingLabel(), 'Grid snapping');
+            utilities.verifyElementVisibilityState(chartsBarPage.gridSnappingLabel(), 'visible');
+            utilities.verifyElementVisibilityState(chartsBarPage.gridSnappingInputField(), 'visible');
+            chartsBarPage.steps.verifyValueInGridSnappingInputField(1);
+        });
+
+        it('Bar options label should be displayed', () => {
+            utilities.verifyInnerText(chartsBarPage.barOptionsLabel(), 'Bar options');
+            utilities.verifyElementVisibilityState(chartsBarPage.barOptionsLabel(), 'visible');
+        });
+
+        it('Direction label should be displayed', () => {
+            utilities.verifyInnerText(chartsBarPage.directionLabel(), 'Direction');
+            utilities.verifyElementVisibilityState(chartsBarPage.directionLabel(), 'visible');
+        });
+
+        it('Two direction options \'Vertical\' and \'Horizontal\' labels and radio buttons should be displayed and by default, \'Vertical\' radio button should be selected', () => {
+            utilities.verifyInnerText(chartsBarPage.verticalDirectionLabel(), 'Vertical');
+            utilities.verifyElementVisibilityState(chartsBarPage.verticalDirectionLabel(), 'visible');
+            utilities.verifyInnerText(chartsBarPage.horizontalDirectionLabel(), 'Horizontal');
+            utilities.verifyElementVisibilityState(chartsBarPage.horizontalDirectionLabel(), 'visible');
+            chartsBarPage.steps.verifyVerticalDirectionRadioButtonSelected();
+        });
+
+        it('Bar spacing label should be displayed', () => {
+            utilities.verifyInnerText(chartsBarPage.barSpacingLabel(), 'Bar spacing');
+            utilities.verifyElementVisibilityState(chartsBarPage.barSpacingLabel(), 'visible');
+        });
+
+        it('Add gap between bars label and checkbox should be displayed and by default, checkbox should be checked', () => {
+            utilities.verifyInnerText(chartsBarPage.addGapBetweenBarsLabel(), 'Add gap between bars');
+            utilities.verifyElementVisibilityState(chartsBarPage.addGapBetweenBarsLabel(), 'visible');
+            chartsBarPage.steps.verifyAddGapBetweenBarsCheckboxChecked();
+        });
+
+        it('Max bar count label and input field should be displayed and input field should have \'1\' pre-filled in it and it should be in disabled state', () => {
+            utilities.verifyInnerText(chartsBarPage.maxBarCountLabel(), 'Max bar count');
+            utilities.verifyElementVisibilityState(chartsBarPage.maxBarCountLabel(), 'visible');
+            chartsBarPage.steps.verifyMaxBarCountValue(1);
+            utilities.verifyElementDisabled(chartsBarPage.selectChartTypeMaxBarCountInputField());
+        });
+
+        it('CSS of grid section', { tags: 'css' }, () => {
+            utilities.verifyCSS(chartsBarPage.gridLabel(), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.semibold
+            });
+            utilities.verifyCSS(chartsBarPage.showGridLinesLabel(), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.semibold
+            });
+            utilities.verifyCSS(chartsBarPage.verticalGridlinesLabel(), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.regular
+            });
+            utilities.verifyCSS(chartsBarPage.verticalGridlinesCheckbox().parents('span').find('.checkbox-icon-border-rect'), {
+                'fill': css.color.activeButtons
+            });
+            utilities.verifyCSS(chartsBarPage.horizontalGridlinesCheckbox().parents('span').find('.checkbox-icon-border-rect'), {
+                'fill': css.color.activeButtons
+            });
+            utilities.verifyCSS(chartsBarPage.horizontalGridlinesLabel(), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.regular
+            });
+            utilities.verifyCSS(chartsBarPage.intervalInputField(), {
+                'color': css.color.text,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular
+            });
+            utilities.verifyCSS(chartsBarPage.intervalLabel(), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.semibold
+            });
+            utilities.verifyCSS(chartsBarPage.annotateEveryInputField(), {
+                'color': css.color.text,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular
+            });
+            utilities.verifyCSS(chartsBarPage.annotateEveryLabel(), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.semibold
+            });
+            utilities.verifyCSS(chartsBarPage.gridSnappingInputField(), {
+                'color': css.color.text,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular
+            });
+            utilities.verifyCSS(chartsBarPage.gridSnappingLabel(), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.semibold
+            });
+            utilities.verifyCSS(chartsBarPage.barOptionsLabel(), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.semibold
+            });
+            utilities.verifyCSS(chartsBarPage.directionLabel(), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.semibold
+            });
+            utilities.verifyCSS(chartsBarPage.barSpacingLabel(), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.semibold
+            });
+            utilities.verifyCSS(chartsBarPage.verticalDirectionLabel(), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.regular
+            });
+            utilities.verifyCSS(chartsBarPage.horizontalDirectionLabel(), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.regular
+            });
+            utilities.verifyCSS(chartsBarPage.verticalDirectionRadioButton().parents('span').find('[data-name="Radio button - Selected"]'), {
+                'fill': css.color.activeButtons
+            });
+            utilities.verifyCSS(chartsBarPage.horizontalDirectionRadioButton().parents('span').find('.radio-btn-deselected'), {
+                'fill': css.color.uncheckedCheckbox
+            });
+            utilities.verifyCSS(chartsBarPage.addGapBetweenBarsLabel(), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.regular
+            });
+            utilities.verifyCSS(chartsBarPage.addGapBetweenBarsCheckbox().parents('span').find('.checkbox-icon-border-rect'), {
+                'fill': css.color.activeButtons
+            });
+            utilities.verifyCSS(chartsBarPage.maxBarCountLabel(), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.semibold
+            });
+        });
+
+        it('Accessibility of grid section', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(chartsBarPage.gridLabel().parents('.ngie-charts-authoring'));
+        });
+    });
+
+    describe('Select chart type - Grid section : Edit tab functionality', () => {
+        abortEarlySetup();
+        before(() => {
+            chartsBarPage.steps.navigateToCreateQuestion('charts');
+            chartsBarPage.steps.addTextInQuestionInstructionsInputField('Bar chart');
+            cy.barsPreLoaderWait();
+        });
+
+        it('When both Vertical and Horizontal checkboxes are checked then vertical and horizontal gridlines should be displayed in select chart type and specify correct answer section', () => {
+            chartsBarPage.steps.verifyHorizontalCheckboxChecked();
+            chartsBarPage.steps.verifyVerticalCheckboxChecked();
+            chartsBarPage.steps.verifyVerticalGridlinesVisibleSelectChartType();
+            chartsBarPage.steps.verifyHorizontalGridlinesVisibleSelectChartType();
+            chartsBarPage.steps.verifyVerticalGridlinesVisibleSpecifyCorrectAnswer();
+            chartsBarPage.steps.verifyHorizontalGridlinesVisibleSpecifyCorrectAnswer();
+        });
+
+        it('When user unchecks Vertical checkbox then vertical gridlines should not be displayed and horizontal gridlines should be displayed in select chart type and specify correct answer section', () => {
+            chartsBarPage.steps.uncheckVerticalCheckbox();
+            chartsBarPage.steps.verifyVerticalGridlinesNotVisibleSelectChartType();
+            chartsBarPage.steps.verifyHorizontalGridlinesVisibleSelectChartType();
+            chartsBarPage.steps.verifyVerticalGridlinesNotVisibleSpecifyCorrectAnswer();
+            chartsBarPage.steps.verifyHorizontalGridlinesVisibleSpecifyCorrectAnswer();
+        });
+
+        it('When user unchecks Horizontal checkbox then horizontal gridlines should not be displayed in select chart type and specify correct answer section', () => {
+            chartsBarPage.steps.uncheckHorizontalCheckbox();
+            chartsBarPage.steps.verifyVerticalGridlinesNotVisibleSelectChartType();
+            chartsBarPage.steps.verifyHorizontalGridlinesNotVisibleSelectChartType();
+            chartsBarPage.steps.verifyVerticalGridlinesNotVisibleSpecifyCorrectAnswer();
+            chartsBarPage.steps.verifyHorizontalGridlinesNotVisibleSpecifyCorrectAnswer();
+        });
+
+        //Note- Can't check ticks are not annotated so adding it to manual sheet
+        it('When user updates value in Interval input field then interval of labels and ticks should be updated in select chart type and specify correct answer section', () => {
+            chartsBarPage.steps.enterTextInIntervalInputField(0.25);
+            chartsBarPage.steps.verifyTextInIntervalInputField(0.25);
+            chartsBarPage.steps.verifyLabelsInSelectChartType(10, 0.25);
+            chartsBarPage.steps.verifyLabelsInSpecifyCorrectAnswer(10, 0.25);
+        });
+
+        //Note- Can't check ticks are not annotated so adding it to manual sheet
+        it('When user updates value in Annotate every input field then labels should be annotated appropriately and ticks should not get annotated for the number line in the select chart type and the specify correct answer section.', () => {
+            cy.log('Changing interval input fields value to its default value');
+            chartsBarPage.steps.enterTextInIntervalInputField(1);
+            chartsBarPage.steps.enterTextInAnnotateEveryInputField(2);
+            chartsBarPage.steps.verifyTextInAnnotateEveryInputField(2);
+            chartsBarPage.steps.verifyAnnotatedLabelsSelectChartType(10, 2);
+            chartsBarPage.steps.verifyAnnotatedLabelsSpecifyCorrectAnswer(10, 2);
+        });
+
+        it('When user updates value in Grid snapping input field and sets bar on charts then the bar\'s placement should align with the specified grid snapping value in select chart type and the specify correct answer section', () => {
+            chartsBarPage.steps.enterValueInGridSnappingInputField(2);
+            chartsBarPage.steps.verifyValueInGridSnappingInputField(2);
+            chartsBarPage.steps.keyBoardUpBarInSelectChartType(0);
+            chartsBarPage.steps.verifyBarHeightInSelectChartType({ barIndex: 0, barValue: 2, range: 10 });
+            chartsBarPage.steps.keyBoardUpBarInSpecifyCorrectAnswer(0);
+            chartsBarPage.steps.verifyBarHeightInSpecifyCorrectAnswer({ barIndex: 0, barValue: 2, range: 10 });
+        });
+    });
+
+    describe('Select chart type - Grid section : Preview tab functionality', () => {
+        abortEarlySetup();
+        before(() => {
+            chartsBarPage.steps.navigateToCreateQuestion('charts');
+            chartsBarPage.steps.addTextInQuestionInstructionsInputField('Bar chart');
+            cy.barsPreLoaderWait();
+        });
+
+        it('When both Vertical and Horizontal checkboxes are checked then vertical and horizontal gridlines should be displayed in preview tab', () => {
+            chartsBarPage.steps.verifyHorizontalCheckboxChecked();
+            chartsBarPage.steps.verifyVerticalCheckboxChecked();
+            chartsBarPage.steps.switchToPreviewTab();
+            chartsBarPage.steps.verifyVerticalGridlinesVisiblePreviewTab();
+            chartsBarPage.steps.verifyHorizontalGridlinesVisiblePreviewTab();
+        });
+
+        it('When user unchecks Vertical checkbox then vertical gridlines should not be displayed in preview tab', () => {
+            chartsBarPage.steps.switchToEditTab();
+            chartsBarPage.steps.uncheckVerticalCheckbox();
+            chartsBarPage.steps.switchToPreviewTab();
+            chartsBarPage.steps.verifyVerticalGridlinesNotVisiblePreviewTab();
+            chartsBarPage.steps.verifyHorizontalGridlinesVisiblePreviewTab();
+        });
+
+        it('When user unchecks Horizontal checkbox then horizontal gridlines should not be displayed in preview tab', () => {
+            chartsBarPage.steps.switchToEditTab();
+            chartsBarPage.steps.uncheckHorizontalCheckbox();
+            chartsBarPage.steps.switchToPreviewTab();
+            chartsBarPage.steps.verifyVerticalGridlinesNotVisiblePreviewTab();
+            chartsBarPage.steps.verifyHorizontalGridlinesNotVisiblePreviewTab();
+        });
+
+        //Note- Can't check ticks are not annotated so adding it to manual sheet
+        it('When user updates value in Interval input field then interval of labels and ticks should be updated in preview tab', () => {
+            chartsBarPage.steps.switchToEditTab();
+            chartsBarPage.steps.enterTextInIntervalInputField(0.25);
+            chartsBarPage.steps.verifyTextInIntervalInputField(0.25);
+            chartsBarPage.steps.switchToPreviewTab();
+            chartsBarPage.steps.verifyLabelsInPreviewTab(10, 0.25);
+        });
+
+        //Note- Can't check ticks are not annotated so adding it to manual sheet
+        it('When user updates value in Annotate every input field then labels should be annotated appropriately and ticks should not get annotated for the number line in the preview tab', () => {
+            chartsBarPage.steps.switchToEditTab();
+            cy.log('Changing interval input fields value to its default value');
+            chartsBarPage.steps.enterTextInIntervalInputField(1);
+            chartsBarPage.steps.enterTextInAnnotateEveryInputField(2);
+            chartsBarPage.steps.verifyTextInAnnotateEveryInputField(2);
+            chartsBarPage.steps.switchToPreviewTab();
+            chartsBarPage.steps.verifyAnnotatedLabelsPreviewTab(10, 2);
+        });
+
+        it('When user updates value in Grid snapping input field and sets bar on charts then the bar\'s placement should align with the specified grid snapping value in preview tab', () => {
+            chartsBarPage.steps.switchToEditTab();
+            chartsBarPage.steps.enterValueInGridSnappingInputField(2);
+            chartsBarPage.steps.verifyValueInGridSnappingInputField(2);
+            chartsBarPage.steps.switchToPreviewTab();
+            chartsBarPage.steps.keyBoardUpBarInPreviewTab(0);
+            chartsBarPage.steps.verifyBarHeightInPreviewTab({ barIndex: 0, barValue: 2, range: 10 });
+        });
+    });
+
+    describe('Select chart type - Bar options : Edit tab functionality', () => {
+        abortEarlySetup();
+        before(() => {
+            chartsBarPage.steps.navigateToCreateQuestion('charts');
+            chartsBarPage.steps.addTextInQuestionInstructionsInputField('Bar chart');
+            cy.barsPreLoaderWait();
+            chartsBarPage.steps.setBarValueInSelectChartTypeSection({ barIndex: 0, value: 2, range: 10 });
+            chartsBarPage.steps.setBarValueInSpecifyCorrectAnswerSection({ barIndex: 0, value: 2, range: 10 });
+        });
+
+        it('When Vertical direction radio button is selected then vertical chart should be displayed in select chart type and specify correct answer section', () => {
+            chartsBarPage.steps.verifyVerticalDirectionRadioButtonSelected();
+            chartsBarPage.steps.verifyChartOrientationSelectChartType('Vertical');
+            chartsBarPage.steps.verifyChartOrientationSpecifyCorrectAnswer('Vertical');
+        });
+
+        it('When user selects Horizontal direction radio button, then horizontal chart should be displayed in select chart type and specify correct answer section', () => {
+            chartsBarPage.steps.selectHorizontalDirectionRadioButton();
+            chartsBarPage.steps.verifyChartOrientationSelectChartType('Horizontal');
+            chartsBarPage.steps.verifyChartOrientationSpecifyCorrectAnswer('Horizontal');
+        });
+
+        it('When Horizontal direction radio button is selected then Graph title, X axis label and Y axis label should not be affected in select chart type and specify correct answer section', () => {
+            utilities.verifyInnerText(chartsBarPage.selectChartTypeGraphTitleButton(), 'Bar chart');
+            utilities.verifyInnerText(chartsBarPage.selectChartTypeXAxisLabelButton(), 'Days');
+            utilities.verifyInnerText(chartsBarPage.selectChartTypeYAxisLabelButton(), 'Profit');
+            utilities.verifyInnerText(chartsBarPage.specifyCorrectAnswerGraphTitleButton(), 'Bar chart');
+            utilities.verifyInnerText(chartsBarPage.xAxisLabelSpecifyCorrectAnswer(), 'Days');
+            utilities.verifyInnerText(chartsBarPage.yAxisLabelSpecifyCorrectAnswer(), 'Profit');
+        });
+
+        it('When Horizontal direction radio button is selected then Max Y label should change to Max X label and value in the input field should remain the same in select chart type and specify correct answer section', () => {
+            utilities.verifyInnerText(chartsBarPage.selectChartTypeMaxXAndYLabel(), 'Max X');
+            utilities.verifyElementVisibilityState(chartsBarPage.selectChartTypeMaxXAndYLabel(), 'visible');
+            chartsBarPage.steps.verifyMaxXAndYValue(10);
+            chartsBarPage.steps.verifyBarLabelHorizontalSelectChartType([0, 'Bar 1'], [1, 'Bar 2'], [2, 'Bar 3']);
+            chartsBarPage.steps.verifyBarLabelHorizontalSpecifyCorrectAnswer([0, 'Bar 1'], [1, 'Bar 2'], [2, 'Bar 3']);
+            chartsBarPage.steps.verifyLabelsInHorizontalSelectChartType(0, 1);
+            chartsBarPage.steps.verifyLabelsInHorizontalSpecifyCorrectAnswer(0, 1);
+        });
+
+        it('When user selects Vertical direction again then Vertical chart should be displayed in select chart type and specify correct answer section', () => {
+            chartsBarPage.steps.selectVerticalDirectionRadioButton();
+            chartsBarPage.steps.verifyChartOrientationPreviewTab('Vertical');
+        });
+
+        it('When Add gap between bars checkbox is checked then space should be present between the bars in select chart type and specify correct answer section', () => {
+            chartsBarPage.steps.verifyAddGapBetweenBarsCheckboxChecked();
+            chartsBarPage.steps.verifySpaceBetweenBarsSelectChartType();
+            chartsBarPage.steps.verifySpaceBetweenBarsSpecifyCorrectAnswer();
+        });
+
+        it('When user unchecks Add gap between bars checkbox then space should not be present between the bars in select chart type and specify correct answer section', () => {
+            chartsBarPage.steps.uncheckAddGapBetweenBarsCheckboxCheckbox();
+            chartsBarPage.steps.verifyNoSpaceBetweenBarsSelectChartType();
+            chartsBarPage.steps.verifyNoSpaceBetweenBarsSpecifyCorrectAnswer();
+        });
+    });
+
+    describe('Select chart type - Bar options : Preview tab functionality', () => {
+        abortEarlySetup();
+        before(() => {
+            chartsBarPage.steps.navigateToCreateQuestion('charts');
+            chartsBarPage.steps.addTextInQuestionInstructionsInputField('Bar chart');
+            cy.barsPreLoaderWait();
+            chartsBarPage.steps.setGraphTitle('Bar chart');
+            chartsBarPage.steps.setXAxisLabel('Days');
+            chartsBarPage.steps.setYAxisLabel('Profit');
+            chartsBarPage.steps.setBarValueInSelectChartTypeSection({ barIndex: 0, value: 2, range: 10 });
+        });
+
+        it('When Vertical direction radio button is selected then vertical chart should be displayed in preview tab', () => {
+            chartsBarPage.steps.verifyVerticalDirectionRadioButtonSelected();
+            chartsBarPage.steps.switchToPreviewTab();
+            chartsBarPage.steps.verifyChartOrientationPreviewTab('Vertical');
+        });
+
+        it('When user selects Horizontal direction radio button, then horizontal chart should be displayed in preview tab', () => {
+            chartsBarPage.steps.switchToEditTab();
+            chartsBarPage.steps.selectHorizontalDirectionRadioButton();
+            chartsBarPage.steps.switchToPreviewTab();
+            chartsBarPage.steps.verifyChartOrientationPreviewTab('Horizontal');
+        });
+
+        it('When Horizontal direction radio button is selected then Graph title, X axis label and Y axis label should not be affected and X axis and Y axis labels should interchange', () => {
+            utilities.verifyInnerText(chartsBarPage.previewTabGraphTitle(), 'Bar chart');
+            utilities.verifyInnerText(chartsBarPage.previewTabXAxisLabelButton(), 'Days');
+            utilities.verifyInnerText(chartsBarPage.previewTabYAxisLabelButton(), 'Profit');
+            chartsBarPage.steps.verifyBarLabelHorizontalPreviewTab([0, 'Bar 1'], [1, 'Bar 2'], [2, 'Bar 3']);
+            chartsBarPage.steps.verifyLabelsInHorizontalPreviewTab(0, 1);
+        });
+
+        it('When user selects Vertical direction again then Vertical chart should be displayed in preview tab', () => {
+            chartsBarPage.steps.switchToEditTab();
+            chartsBarPage.steps.selectVerticalDirectionRadioButton();
+            chartsBarPage.steps.switchToPreviewTab();
+            chartsBarPage.steps.verifyChartOrientationPreviewTab('Vertical');
+        });
+
+        it('When Add gap between bars checkbox is checked then space should be present between the bars in preview tab', () => {
+            chartsBarPage.steps.switchToEditTab();
+            chartsBarPage.steps.verifyAddGapBetweenBarsCheckboxChecked();
+            chartsBarPage.steps.switchToPreviewTab();
+            chartsBarPage.steps.verifySpaceBetweenBarsPreviewTab();
+        });
+
+        it('When user unchecks Add gap between bars checkbox then space should not be present between the bars in preview tab', () => {
+            chartsBarPage.steps.switchToEditTab();
+            chartsBarPage.steps.uncheckAddGapBetweenBarsCheckboxCheckbox();
+            chartsBarPage.steps.switchToPreviewTab();
+            chartsBarPage.steps.verifyNoSpaceBetweenBarsPreviewTab();
+        });
+    });
+});

package/cypress/e2e/ILC/ChartsBar/headerSection.js

@@ -0,0 +1,105 @@
+import abortEarlySetup from "../../../support/helpers/abortEarly";
+import { chartsBarPage } from "../../../pages";
+import utilities from "../../../support/helpers/utilities";
+const css = Cypress.env('css');
+
+describe('Create item page - Charts - Bar: Header section and saving question', () => {
+    before(() => {
+        cy.loginAs('admin');
+    });
+
+    describe('Header section contents', () => {
+        abortEarlySetup();
+        before(() => {
+            chartsBarPage.steps.navigateToCreateQuestion('charts');
+            cy.barsPreLoaderWait();
+        });
+
+        chartsBarPage.tests.verifyCreateQuestionPageQuestionTypeHeader('Charts');
+    });
+
+    describe('Tabs section', () => {
+        abortEarlySetup();
+        before(() => {
+            chartsBarPage.steps.navigateToCreateQuestion('charts');
+            cy.barsPreLoaderWait();
+        });
+
+        chartsBarPage.tests.verifyTabsSection();
+    });
+
+    describe('Cancel button', () => {
+        abortEarlySetup();
+        before(() => {
+            chartsBarPage.steps.navigateToCreateQuestion('charts');
+            cy.barsPreLoaderWait();
+        });
+
+        it('When user has made some edits/changes and clicks on cancel button, a popup should be displayed with message \'Are you sure you want to leave this page? Your changes have not been saved.\'', () => {
+            chartsBarPage.steps.addTextInQuestionInstructionsInputField('Edited');
+            chartsBarPage.steps.allotPoints(20);
+            chartsBarPage.steps.clickOnCancelButton();
+            utilities.verifyElementVisibilityState(chartsBarPage.dialogBox(), 'visible');
+            utilities.verifyInnerText(chartsBarPage.dialogBoxContentText(), 'Are you sure you want to leave this page? Your changes have not been saved.');
+            utilities.verifyInnerText(chartsBarPage.buttonAccept(), 'Yes, I want to leave this page');
+            utilities.verifyInnerText(chartsBarPage.buttonReject(), 'No, I\'d like to go back');
+        });
+
+        it('CSS of popup', { tags: 'css' }, () => {
+            utilities.verifyCSS(chartsBarPage.dialogBox(), {
+                'background-color': css.color.defaultBackground
+            })
+
+            utilities.verifyCSS(chartsBarPage.dialogBoxContent(), {
+                'color': css.color.sectionHeading,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular
+            });
+            utilities.verifyCSS(chartsBarPage.buttonAccept(), {
+                'color': css.color.primaryBtn,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.semibold,
+                'background-color': css.color.primaryBtnBg
+            });
+            utilities.verifyCSS(chartsBarPage.buttonReject(), {
+                'color': css.color.secondaryBtn,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.semibold,
+                'background-color': css.color.transparent
+            });
+        });
+
+        it('Accessibility of popup', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(chartsBarPage.dialogBox());
+        });
+
+        it(`Clicking on \'No, I'd like to go back\' button should close the popup and user should remain on the edit interface of the question`, () => {
+            chartsBarPage.steps.clickOnRejectButtonInDialogBox();
+            chartsBarPage.steps.verifyEditTabSelectedState();
+            utilities.verifyTextContent(chartsBarPage.questionInstructionsInputField(), 'Edited');
+        });
+
+        it(`Clicking on \'Yes, I want to leave this page\' button should should discard all changes and direct the user to the \'Select a question\' page.`, () => {
+            chartsBarPage.steps.clickOnCancelButton();
+            chartsBarPage.steps.clickOnAcceptButtonInDialogBox();
+            utilities.verifyElementVisibilityState(chartsBarPage.selectAQuestionHeaderText(), 'visible');
+            utilities.verifyElementVisibilityState(chartsBarPage.questionTypeOptionTitle(), 'visible');
+        });
+    });
+
+    describe('Save Question button', () => {
+        abortEarlySetup();
+        before(() => {
+            chartsBarPage.steps.navigateToCreateQuestion('charts');
+            cy.barsPreLoaderWait();
+        });
+
+        chartsBarPage.tests.verifyCreateItemWrapperContentsA11y();
+
+        it('When user clicks on "Save question" button, then the question should get saved and a snackbar with text \'Saved successfully!\' should be displayed', () => {
+            chartsBarPage.steps.saveAQuestionAndVerifySnackbar();
+        });
+
+        chartsBarPage.tests.verifySavedSuccessfullySnackbarCSSAndA11y();
+    });
+});