redash/client/cypress/integration/visualizations/chart_spec.js

/* 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.wait(1500); // eslint-disable-line cypress/no-unnecessary-waiting
    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");
  });
  it("colors Bar charts", function () {
    cy.visit(`queries/${this.queryId}/source`);
    cy.wait(1500); // eslint-disable-line cypress/no-unnecessary-waiting
    cy.getByTestId("ExecuteButton").click();
    cy.getByTestId("NewVisualization").click();
    cy.getByTestId("Chart.ColumnMapping.x").selectAntdOption("Chart.ColumnMapping.x.stage");
    cy.getByTestId("Chart.ColumnMapping.y").selectAntdOption("Chart.ColumnMapping.y.value1");
    cy.getByTestId("VisualizationEditor.Tabs.Colors").click();
    cy.getByTestId("ColorScheme").click();
    cy.getByTestId("ColorOptionViridis").click();
    cy.getByTestId("ColorScheme").click();
    cy.getByTestId("ColorOptionTableau 10").click();
    cy.getByTestId("ColorScheme").click();
    cy.getByTestId("ColorOptionD3 Category 10").click();
  });
  it("colors Pie charts", function () {
    cy.visit(`queries/${this.queryId}/source`);
    cy.wait(1500); // eslint-disable-line cypress/no-unnecessary-waiting
    cy.getByTestId("ExecuteButton").click();
    cy.getByTestId("NewVisualization").click();
    cy.getByTestId("Chart.GlobalSeriesType").click();
    cy.getByTestId("Chart.ChartType.pie").click();
    cy.getByTestId("Chart.ColumnMapping.x").selectAntdOption("Chart.ColumnMapping.x.stage");
    cy.getByTestId("Chart.ColumnMapping.y").selectAntdOption("Chart.ColumnMapping.y.value1");
    cy.getByTestId("VisualizationEditor.Tabs.Colors").click();
    cy.getByTestId("ColorScheme").click();
    cy.getByTestId("ColorOptionViridis").click();
    cy.getByTestId("ColorScheme").click();
    cy.getByTestId("ColorOptionTableau 10").click();
    cy.getByTestId("ColorScheme").click();
    cy.getByTestId("ColorOptionD3 Category 10").click();
  });
});