Bar chart e2e test

client/cypress/integration/visualizations/chart_spec.js

@@ -0,0 +1,110 @@
+/* global cy */
+
+import { getWidgetTestId } from "../../support/dashboard";
+import {
+  assertAxesAndAddLabels,
+  assertPlotPreview,
+  assertTabbedEditor,
+  createChartThroughUI,
+  createDashboardWithCharts,
+} from "../../support/visualizations/chart";
+
+const SQL = `
+  SELECT 'a' AS stage, 11 AS value1, 22 AS value2 UNION ALL
+  SELECT 'a' AS stage, 12 AS value1, 41 AS value2 UNION ALL
+  SELECT 'a' AS stage, 45 AS value1, 93 AS value2 UNION ALL
+  SELECT 'a' AS stage, 54 AS value1, 79 AS value2 UNION ALL
+  SELECT 'b' AS stage, 33 AS value1, 65 AS value2 UNION ALL
+  SELECT 'b' AS stage, 73 AS value1, 50 AS value2 UNION ALL
+  SELECT 'b' AS stage, 90 AS value1, 40 AS value2 UNION ALL
+  SELECT 'c' AS stage, 19 AS value1, 33 AS value2 UNION ALL
+  SELECT 'c' AS stage, 92 AS value1, 14 AS value2 UNION ALL
+  SELECT 'c' AS stage, 63 AS value1, 65 AS value2 UNION ALL
+  SELECT 'c' AS stage, 44 AS value1, 27 AS value2\
+`;
+
+describe("Chart", () => {
+  beforeEach(() => {
+    cy.login();
+    cy.createQuery({ name: "Chart Visualization", query: SQL })
+      .its("id")
+      .as("queryId");
+  });
+
+  it("creates Bar charts", function() {
+    cy.visit(`queries/${this.queryId}/source`);
+    cy.getByTestId("ExecuteButton").click();
+
+    const getBarChartAssertionFunction = (specificBarChartAssertionFn = () => {}) => () => {
+      // checks for TabbedEditor standard tabs
+      assertTabbedEditor();
+
+      // standard chart should be bar
+      cy.getByTestId("Chart.GlobalSeriesType").contains(".ant-select-selection-item", "Bar");
+
+      // checks the plot canvas exists and is empty
+      assertPlotPreview("not.exist");
+
+      // creates a chart and checks it is plotted
+      cy.getByTestId("Chart.ColumnMapping.x").selectAntdOption("Chart.ColumnMapping.x.stage");
+      cy.getByTestId("Chart.ColumnMapping.y").selectAntdOption("Chart.ColumnMapping.y.value1");
+      cy.getByTestId("Chart.ColumnMapping.y").selectAntdOption("Chart.ColumnMapping.y.value2");
+      assertPlotPreview("exist");
+
+      specificBarChartAssertionFn();
+    };
+
+    const chartTests = [
+      {
+        name: "Basic Bar Chart",
+        alias: "basicBarChart",
+        assertionFn: () => {
+          assertAxesAndAddLabels("Stage", "Value");
+        },
+      },
+      {
+        name: "Horizontal Bar Chart",
+        alias: "horizontalBarChart",
+        assertionFn: () => {
+          cy.getByTestId("Chart.SwappedAxes").check();
+          cy.getByTestId("VisualizationEditor.Tabs.XAxis").should("have.text", "Y Axis");
+          cy.getByTestId("VisualizationEditor.Tabs.YAxis").should("have.text", "X Axis");
+        },
+      },
+      {
+        name: "Stacked Bar Chart",
+        alias: "stackedBarChart",
+        assertionFn: () => {
+          cy.getByTestId("Chart.Stacking").selectAntdOption("Chart.Stacking.Stack");
+        },
+      },
+      {
+        name: "Normalized Bar Chart",
+        alias: "normalizedBarChart",
+        assertionFn: () => {
+          cy.getByTestId("Chart.NormalizeValues").check();
+        },
+      },
+    ];
+
+    chartTests.forEach(({ name, alias, assertionFn }) => {
+      createChartThroughUI(name, getBarChartAssertionFunction(assertionFn)).as(alias);
+    });
+
+    const chartGetters = chartTests.map(({ alias }) => alias);
+
+    const withDashboardWidgetsAssertionFn = (widgetGetters, dashboardUrl) => {
+      cy.visit(dashboardUrl);
+      widgetGetters.forEach(widgetGetter => {
+        cy.get(`@${widgetGetter}`).then(widget => {
+          cy.getByTestId(getWidgetTestId(widget)).within(() => {
+            cy.get("g.points").should("exist");
+          });
+        });
+      });
+    };
+
+    createDashboardWithCharts("Bar chart visualizations", chartGetters, withDashboardWidgetsAssertionFn);
+    cy.percySnapshot("Visualizations - Charts - Bar");
+  });
+});

client/cypress/support/visualizations/chart.js

@@ -0,0 +1,100 @@
+/**
+ * Asserts the preview canvas exists, then captures the g.points element, which should be generated by plotly and asserts whether it exists
+ * @param should Passed to should expression after plot points are captured
+ */
+export function assertPlotPreview(should = "exist") {
+  cy.getByTestId("VisualizationPreview")
+    .find("g.plot")
+    .should("exist")
+    .find("g.points")
+    .should(should);
+}
+
+export function createChartThroughUI(chartName, chartSpecificAssertionFn = () => {}) {
+  cy.getByTestId("NewVisualization").click();
+  cy.getByTestId("VisualizationType").selectAntdOption("VisualizationType.CHART");
+  cy.getByTestId("VisualizationName")
+    .clear()
+    .type(chartName);
+
+  chartSpecificAssertionFn();
+
+  cy.server();
+  cy.route("POST", "**/api/visualizations").as("SaveVisualization");
+
+  cy.getByTestId("EditVisualizationDialog")
+    .contains("button", "Save")
+    .click();
+
+  cy.getByTestId("QueryPageVisualizationTabs")
+    .contains("span", chartName)
+    .should("exist");
+
+  cy.wait("@SaveVisualization").should("have.property", "status", 200);
+
+  return cy.get("@SaveVisualization").then(xhr => {
+    const { id, name, options } = xhr.response.body;
+    return cy.wrap({ id, name, options });
+  });
+}
+
+export function assertTabbedEditor(chartSpecificTabbedEditorAssertionFn = () => {}) {
+  cy.getByTestId("Chart.GlobalSeriesType").should("exist");
+
+  cy.getByTestId("VisualizationEditor.Tabs.Series").click();
+  cy.getByTestId("VisualizationEditor")
+    .find("table")
+    .should("exist");
+
+  cy.getByTestId("VisualizationEditor.Tabs.Colors").click();
+  cy.getByTestId("VisualizationEditor")
+    .find("table")
+    .should("exist");
+
+  cy.getByTestId("VisualizationEditor.Tabs.DataLabels").click();
+  cy.getByTestId("VisualizationEditor")
+    .getByTestId("Chart.DataLabels.ShowDataLabels")
+    .should("exist");
+
+  chartSpecificTabbedEditorAssertionFn();
+
+  cy.getByTestId("VisualizationEditor.Tabs.General").click();
+}
+
+export function assertAxesAndAddLabels(xaxisLabel, yaxisLabel) {
+  cy.getByTestId("VisualizationEditor.Tabs.XAxis").click();
+  cy.getByTestId("Chart.XAxis.Type")
+    .contains(".ant-select-selection-item", "Auto Detect")
+    .should("exist");
+
+  cy.getByTestId("Chart.XAxis.Name")
+    .clear()
+    .type(xaxisLabel);
+
+  cy.getByTestId("VisualizationEditor.Tabs.YAxis").click();
+  cy.getByTestId("Chart.LeftYAxis.Type")
+    .contains(".ant-select-selection-item", "Linear")
+    .should("exist");
+
+  cy.getByTestId("Chart.LeftYAxis.Name")
+    .clear()
+    .type(yaxisLabel);
+
+  cy.getByTestId("VisualizationEditor.Tabs.General").click();
+}
+
+export function createDashboardWithCharts(title, chartGetters, widgetsAssertionFn = () => {}) {
+  cy.createDashboard(title).then(dashboard => {
+    const dashboardUrl = `/dashboards/${dashboard.id}`;
+    const widgetGetters = chartGetters.map(chartGetter => `${chartGetter}Widget`);
+
+    chartGetters.forEach((chartGetter, i) => {
+      const position = { autoHeight: false, sizeY: 8, sizeX: 3, col: (i % 2) * 3 };
+      cy.get(`@${chartGetter}`)
+        .then(chart => cy.addWidget(dashboard.id, chart.id, { position }))
+        .as(widgetGetters[i]);
+    });
+
+    widgetsAssertionFn(widgetGetters, dashboardUrl);
+  });
+}