test: Cypress - chart widget cases (#27837)

app/client/cypress/e2e/Regression/ClientSide/Widgets/Chart/Chart_widget_spec_1.ts

@@ -0,0 +1,85 @@
+import {
+  agHelper,
+  entityExplorer,
+  deployMode,
+  draggableWidgets,
+  propPane,
+  locators,
+} from "../../../../../support/Objects/ObjectsCore";
+
+describe("", () => {
+  before(() => {
+    entityExplorer.DragNDropWidget(draggableWidgets.CHART);
+  });
+
+  afterEach(() => {
+    deployMode.NavigateBacktoEditor();
+    entityExplorer.SelectEntityByName("Chart1");
+  });
+
+  it("1. Test pie chart", () => {
+    propPane.SelectPropertiesDropDown("Chart Type", "Pie chart");
+    agHelper.AssertAutoSave();
+    deployMode.DeployApp();
+    agHelper
+      .GetElement(locators._widgetInDeployed(draggableWidgets.CHART))
+      .matchImageSnapshot("chartwidget/piechartsnapshot");
+    deployMode.NavigateBacktoEditor();
+    entityExplorer.SelectEntityByName("Chart1");
+    propPane.TogglePropertyState("Show Labels", "On");
+    deployMode.DeployApp();
+    agHelper
+      .GetElement(locators._widgetInDeployed(draggableWidgets.CHART))
+      .matchImageSnapshot("chartwidget/piechartsnapshotwithlabels");
+  });
+
+  it("2. Test line chart", () => {
+    propPane.TogglePropertyState("Show Labels", "Off");
+    propPane.SelectPropertiesDropDown("Chart Type", "Line chart");
+    agHelper.AssertAutoSave();
+    deployMode.DeployApp();
+    agHelper
+      .GetElement(locators._widgetInDeployed(draggableWidgets.CHART))
+      .matchImageSnapshot("chartwidget/linechartsnapshot");
+    deployMode.NavigateBacktoEditor();
+    entityExplorer.SelectEntityByName("Chart1");
+    propPane.TogglePropertyState("Show Labels", "On");
+    deployMode.DeployApp();
+    agHelper
+      .GetElement(locators._widgetInDeployed(draggableWidgets.CHART))
+      .matchImageSnapshot("chartwidget/linechartsnapshotwithlabels");
+  });
+
+  it("3. Test column chart", () => {
+    propPane.TogglePropertyState("Show Labels", "Off");
+    propPane.SelectPropertiesDropDown("Chart Type", "Column chart");
+    deployMode.DeployApp();
+    agHelper
+      .GetElement(locators._widgetInDeployed(draggableWidgets.CHART))
+      .matchImageSnapshot("chartwidget/columnchartsnapshot");
+    deployMode.NavigateBacktoEditor();
+    entityExplorer.SelectEntityByName("Chart1");
+    propPane.TogglePropertyState("Show Labels", "On");
+    deployMode.DeployApp();
+    agHelper
+      .GetElement(locators._widgetInDeployed(draggableWidgets.CHART))
+      .matchImageSnapshot("chartwidget/columnchartsnapshotwithlabels");
+  });
+
+  it("4. Test area chart", () => {
+    propPane.TogglePropertyState("Show Labels", "Off");
+    propPane.SelectPropertiesDropDown("Chart Type", "Area chart");
+    agHelper.AssertAutoSave();
+    deployMode.DeployApp();
+    agHelper
+      .GetElement(locators._widgetInDeployed(draggableWidgets.CHART))
+      .matchImageSnapshot("chartwidget/areachartsnapshot");
+    deployMode.NavigateBacktoEditor();
+    entityExplorer.SelectEntityByName("Chart1");
+    propPane.TogglePropertyState("Show Labels", "On");
+    deployMode.DeployApp();
+    agHelper
+      .GetElement(locators._widgetInDeployed(draggableWidgets.CHART))
+      .matchImageSnapshot("chartwidget/areachartsnapshotwithlabels");
+  });
+});

app/client/cypress/e2e/Regression/ClientSide/Widgets/Chart/Chart_widget_spec_2.ts

@@ -0,0 +1,94 @@
+import {
+  agHelper,
+  entityExplorer,
+  deployMode,
+  draggableWidgets,
+  propPane,
+  locators,
+} from "../../../../../support/Objects/ObjectsCore";
+
+describe("", () => {
+  before(() => {
+    entityExplorer.DragNDropWidget(draggableWidgets.CHART);
+  });
+
+  it("1. Test Series tile chart", () => {
+    propPane.SelectPropertiesDropDown("Chart Type", "Pie chart");
+    propPane.UpdatePropertyFieldValue(
+      "Title",
+      "Data of anime at 2020 @ December",
+    );
+    agHelper.AssertAutoSave();
+    deployMode.DeployApp();
+    agHelper
+      .GetElement(locators._widgetInDeployed(draggableWidgets.CHART))
+      .matchImageSnapshot("chartwidget/piechartsnapshotwithtitle");
+    deployMode.NavigateBacktoEditor();
+    entityExplorer.SelectEntityByName("Chart1");
+  });
+
+  it("2. Test Adaptive axis", () => {
+    propPane.SelectPropertiesDropDown("Chart Type", "Column chart");
+    agHelper.AssertAutoSave();
+    deployMode.DeployApp();
+    agHelper
+      .GetElement(locators._widgetInDeployed(draggableWidgets.CHART))
+      .matchImageSnapshot("chartwidget/columnchartsnapshotwithoutadaptiveaxis");
+    deployMode.NavigateBacktoEditor();
+    entityExplorer.SelectEntityByName("Chart1");
+    propPane.TogglePropertyState("Adaptive axis", "On");
+    deployMode.DeployApp();
+    agHelper
+      .GetElement(locators._widgetInDeployed(draggableWidgets.CHART))
+      .matchImageSnapshot("chartwidget/columnchartsnapshotwithadaptiveaxis");
+    deployMode.NavigateBacktoEditor();
+    entityExplorer.SelectEntityByName("Chart1");
+  });
+
+  it("3. Test x axis label orientation chart", () => {
+    propPane.SelectPropertiesDropDown("Chart Type", "Line chart");
+    deployMode.DeployApp();
+    agHelper
+      .GetElement(locators._widgetInDeployed(draggableWidgets.CHART))
+      .matchImageSnapshot("chartwidget/linechartWithAutoXAxisLabelOrientation");
+    deployMode.NavigateBacktoEditor();
+    entityExplorer.SelectEntityByName("Chart1");
+    propPane.SelectPropertiesDropDown("x-axis label orientation", "Slant");
+    deployMode.DeployApp();
+    agHelper
+      .GetElement(locators._widgetInDeployed(draggableWidgets.CHART))
+      .matchImageSnapshot(
+        "chartwidget/linechartWithSlantXAxisLabelOrientation",
+      );
+    deployMode.NavigateBacktoEditor();
+    entityExplorer.SelectEntityByName("Chart1");
+    propPane.SelectPropertiesDropDown("x-axis label orientation", "Rotate");
+    deployMode.DeployApp();
+    agHelper
+      .GetElement(locators._widgetInDeployed(draggableWidgets.CHART))
+      .matchImageSnapshot(
+        "chartwidget/linechartWithRotateXAxisLabelOrientation",
+      );
+    deployMode.NavigateBacktoEditor();
+    entityExplorer.SelectEntityByName("Chart1");
+  });
+
+  it("4. Test x axis label orientation absence  in Pie, Bar, Custom Fusion Charts", () => {
+    propPane.SelectPropertiesDropDown("Chart Type", "Pie chart");
+    agHelper.AssertElementAbsence(
+      propPane._selectPropDropdown("x-axis label orientation"),
+    );
+    propPane.SelectPropertiesDropDown("Chart Type", "Bar chart");
+    agHelper.AssertElementAbsence(
+      propPane._selectPropDropdown("x-axis label orientation"),
+    );
+    propPane.SelectPropertiesDropDown("Chart Type", "Custom Fusion Charts");
+    agHelper.AssertElementAbsence(
+      propPane._selectPropDropdown("x-axis label orientation"),
+    );
+    propPane.SelectPropertiesDropDown("Chart Type", "Column chart");
+    agHelper.AssertElementExist(
+      propPane._selectPropDropdown("x-axis label orientation"),
+    );
+  });
+});