Bar chart e2e test

[rafawendel]

What type of PR is this?

• Other

Description

According to the checklist proposed on issue #5208, adding chart end-to-end tests with Cypress is top priority test-wise.

This is a boilerplate of test that covers making a query and using it to generate a bar chart. The test will verify all tabs of VisualizationEditor and then plot a chart and verify that it is plotted by Plotly.

Todos:

• Create boilerplate
• Add prints
• Add update test
• Create final snapshot

[gabrieldutra]

Although it's good to check the chart exists in the Dialog, this doesn't get us as much value as the Percy snapshots (they track both rendering differences and the non-existence of the Charts). So for this I was thinking about having the createChartThroughUI able to create all sorts of charts and having this spec like this:

function createChartThroughUI(visualizationName, extraStepsFunction = () => {}) {
  // basic Chart setup with shared steps
  extraStepsFunction(); // may need better naming, but the idea is to configure extra options and assertions here
  // assert chart is rendered in the Dialog preview
  // save it
  return visualizationId; // this will be useful to later build a dashboard
}

it("creates Bar charts", function() {
  const basicBarChart = createChartThroughUI("Basic Bar Chart");
  const barChartWithSwappedAxes = createChartThroughUI("Bar Chart with Swapped Axes", () => {
    // swap axes
    // any extra ui assertions, e.g.: check it correctly swaps the Labels in the editor
  });
  // any other Bar Chart variations we want to cover with testing

  createDashboardWithVisualizations([basicBarChart, barChartWithSwappedAxes]).then(dashboardUrl => {
    cy.visit(dashboardUrl);
    cy.percySnapshot("Bar Chart");
  });
})

For building a dashboard with multiple visualizations there is an example with the Pivot table:

I'm not sure if the code is perfect to be reused, but I'd love to help with that as I think building dashboards with different configured visualizations are a way to cover many things at once 🙂.

LMK your opinion

[gabrieldutra]

As we are doing this multiple times, let's create a helper assertChartExistsInPreview

[rafawendel]

Well I found out the trouble was that my loop would fill the array after it ran (because the push ran inside a .then). I read about this class of problems in Cypress and there doesn't seem to be a good solution. The cy.all Gabriel added some time ago shares the same limitations.

What I did at the end of the day was combining as and get statements to achieve the desired asynchronous behavior. It's quite cumbersome to use, but it is what it is.