From 32d033fb5b75ea5d7f293da8fb5b080e5e30036e Mon Sep 17 00:00:00 2001
From: Nick Fitzpatrick <nick@metabase.com>
Date: Wed, 21 Sep 2022 13:38:49 -0300
Subject: [PATCH] Adding tests for re-ordering bar chart series (#25468)
* Adding tests for re-ordering bar chart series
* PR feedback
* more PR feedback
---
.../e2e/helpers/e2e-ui-elements-helpers.js | 12 +++
.../visualizations/bar_chart.cy.spec.js | 78 ++++++++++++++++++-
.../visualizations/funnel.cy.spec.js | 32 ++++----
3 files changed, 101 insertions(+), 21 deletions(-)
diff --git a/frontend/test/__support__/e2e/helpers/e2e-ui-elements-helpers.js b/frontend/test/__support__/e2e/helpers/e2e-ui-elements-helpers.js
index fc91ae026e1..1da8687a900 100644
--- a/frontend/test/__support__/e2e/helpers/e2e-ui-elements-helpers.js
+++ b/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 });
+};
diff --git a/frontend/test/metabase/scenarios/visualizations/bar_chart.cy.spec.js b/frontend/test/metabase/scenarios/visualizations/bar_chart.cy.spec.js
index c81a72e7ce4..6459e24ae2a 100644
--- a/frontend/test/metabase/scenarios/visualizations/bar_chart.cy.spec.js
+++ b/frontend/test/metabase/scenarios/visualizations/bar_chart.cy.spec.js
@@ -1,9 +1,15 @@
-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);
+ });
+ });
+ });
});
diff --git a/frontend/test/metabase/scenarios/visualizations/funnel.cy.spec.js b/frontend/test/metabase/scenarios/visualizations/funnel.cy.spec.js
index d00799d0d07..b7c789d3c13 100644
--- a/frontend/test/metabase/scenarios/visualizations/funnel.cy.spec.js
+++ b/frontend/test/metabase/scenarios/visualizations/funnel.cy.spec.js
@@ -1,4 +1,10 @@
-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 });
-}
--
GitLab