Adding tests for re-ordering bar chart series (#25468)

* Adding tests for re-ordering bar chart series

* PR feedback

* more PR feedback

frontend/test/__support__/e2e/helpers/e2e-ui-elements-helpers.js

@@ -83,3 +83,15 @@ export const questionInfoButton = () => {
 export const undo = () => {
   cy.findByTestId("toast-undo").findByText("Undo").click();
 };
+
+export const getDraggableElements = () => {
+  return cy.findAllByTestId(/draggable-item/);
+};
+
+export const moveColumnDown = (column, distance) => {
+  column
+    .trigger("mousedown", 0, 0, { force: true })
+    .trigger("mousemove", 5, 5, { force: true })
+    .trigger("mousemove", 0, distance * 50, { force: true })
+    .trigger("mouseup", 0, distance * 50, { force: true });
+};

frontend/test/metabase/scenarios/visualizations/bar_chart.cy.spec.js

-import { restore, visitQuestionAdhoc } from "__support__/e2e/helpers";
+import {
+  restore,
+  visitQuestionAdhoc,
+  sidebar,
+  getDraggableElements,
+  moveColumnDown,
+} from "__support__/e2e/helpers";
 
 import { SAMPLE_DB_ID } from "__support__/e2e/cypress_data";
 import { SAMPLE_DATABASE } from "__support__/e2e/cypress_sample_database";
 
-const { ORDERS, ORDERS_ID } = SAMPLE_DATABASE;
+const { ORDERS, ORDERS_ID, PEOPLE, PRODUCTS } = SAMPLE_DATABASE;
 
 describe("scenarios > visualizations > bar chart", () => {
   beforeEach(() => {
@@ -103,4 +109,72 @@ describe("scenarios > visualizations > bar chart", () => {
       cy.get(".value-labels").should("contain", "19").and("contain", "20.0M");
     });
   });
+
+  describe("with x-axis series", () => {
+    beforeEach(() => {
+      visitQuestionAdhoc({
+        display: "bar",
+        dataset_query: {
+          type: "query",
+          query: {
+            "source-table": ORDERS_ID,
+            aggregation: [["count"]],
+            breakout: [
+              ["field", PEOPLE.SOURCE, { "source-field": ORDERS.USER_ID }],
+              [
+                "field",
+                PRODUCTS.CATEGORY,
+                { "source-field": ORDERS.PRODUCT_ID },
+              ],
+            ],
+          },
+          database: SAMPLE_DB_ID,
+        },
+      });
+
+      cy.findByText("Settings").click();
+      sidebar().findByText("Data").click();
+    });
+
+    it("should allow you to show/hide and reorder columns", () => {
+      moveColumnDown(getDraggableElements().eq(0), 2);
+
+      getDraggableElements().each((element, index) => {
+        const draggableName = element[0].innerText;
+        cy.findAllByTestId("legend-item").eq(index).contains(draggableName);
+      });
+
+      const columnIndex = 1;
+
+      getDraggableElements()
+        .eq(columnIndex)
+        .within(() => {
+          cy.icon("eye_filled").click();
+        });
+
+      getDraggableElements()
+        .eq(columnIndex)
+        .invoke("text")
+        .then(columnName => {
+          cy.get(".Visualization").findByText(columnName).should("not.exist");
+          cy.findAllByTestId("legend-item").should("have.length", 3);
+          cy.get(".enable-dots").should("have.length", 3);
+        });
+
+      getDraggableElements()
+        .eq(columnIndex)
+        .within(() => {
+          cy.icon("eye_crossed_out").click();
+        });
+
+      getDraggableElements()
+        .eq(columnIndex)
+        .invoke("text")
+        .then(columnName => {
+          cy.get(".Visualization").findByText(columnName).should("exist");
+          cy.findAllByTestId("legend-item").should("have.length", 4);
+          cy.get(".enable-dots").should("have.length", 4);
+        });
+    });
+  });
 });

frontend/test/metabase/scenarios/visualizations/funnel.cy.spec.js

-import { restore, visitQuestionAdhoc, sidebar } from "__support__/e2e/helpers";
+import {
+  restore,
+  visitQuestionAdhoc,
+  sidebar,
+  getDraggableElements,
+  moveColumnDown,
+} from "__support__/e2e/helpers";
 
 import { SAMPLE_DB_ID } from "__support__/e2e/cypress_data";
 import { SAMPLE_DATABASE } from "__support__/e2e/cypress_sample_database";
@@ -28,9 +34,9 @@ describe("scenarios > visualizations > funnel chart", () => {
 
   it("hould allow you to reorder and show/hide rows", () => {
     cy.log("ensure that rows are shown");
-    getDraggableRows().should("have.length", 5);
+    getDraggableElements().should("have.length", 5);
 
-    getDraggableRows()
+    getDraggableElements()
       .first()
       .invoke("text")
       .then(name => {
@@ -39,9 +45,9 @@ describe("scenarios > visualizations > funnel chart", () => {
           .first()
           .should("have.text", name);
 
-        moveColumnDown(getDraggableRows().first(), 2);
+        moveColumnDown(getDraggableElements().first(), 2);
 
-        getDraggableRows().eq(2).should("have.text", name);
+        getDraggableElements().eq(2).should("have.text", name);
 
         cy.findAllByTestId("funnel-chart-header")
           .eq(2)
@@ -49,14 +55,14 @@ describe("scenarios > visualizations > funnel chart", () => {
       });
 
     cy.log("toggle row visibility");
-    getDraggableRows()
+    getDraggableElements()
       .eq(1)
       .within(() => {
         cy.icon("eye_filled").click();
       });
     cy.findAllByTestId("funnel-chart-header").should("have.length", 4);
 
-    getDraggableRows()
+    getDraggableElements()
       .eq(1)
       .within(() => {
         cy.icon("eye_crossed_out").click();
@@ -64,15 +70,3 @@ describe("scenarios > visualizations > funnel chart", () => {
     cy.findAllByTestId("funnel-chart-header").should("have.length", 5);
   });
 });
-
-function getDraggableRows() {
-  return cy.findAllByTestId(/draggable-item/);
-}
-
-function moveColumnDown(column, distance) {
-  column
-    .trigger("mousedown", 0, 0, { force: true })
-    .trigger("mousemove", 5, 5, { force: true })
-    .trigger("mousemove", 0, distance * 50, { force: true })
-    .trigger("mouseup", 0, distance * 50, { force: true });
-}