diff --git a/frontend/src/metabase/visualizations/components/FunnelNormal.jsx b/frontend/src/metabase/visualizations/components/FunnelNormal.jsx
index dca0cdab71af20cb414c64a402fd9f046e931793..766179f678e069c100ac2c948a5d531d928f8111 100644
--- a/frontend/src/metabase/visualizations/components/FunnelNormal.jsx
+++ b/frontend/src/metabase/visualizations/components/FunnelNormal.jsx
@@ -116,6 +116,7 @@ export default class FunnelNormal extends Component {
return (
<div
+ data-testid="funnel-chart"
className={cx(className, styles.Funnel, "flex", {
[styles["Funnel--narrow"]]: isNarrow,
p1: isSmall,
diff --git a/frontend/test/__support__/e2e/cypress.js b/frontend/test/__support__/e2e/cypress.js
index 0de31fd7a027c781b59cf98c6e599d74abdf8678..c0163bf8feb9f68edb96fb51b36f7f1888ebc401 100644
--- a/frontend/test/__support__/e2e/cypress.js
+++ b/frontend/test/__support__/e2e/cypress.js
@@ -30,5 +30,6 @@ export * from "./helpers/e2e-bi-basics-helpers";
export * from "./helpers/e2e-boolean-helpers";
export * from "./helpers/e2e-embedding-helpers";
export * from "./helpers/e2e-permissions-helpers";
+export * from "./helpers/e2e-visual-tests-helpers";
Cypress.on("uncaught:exception", (err, runnable) => false);
diff --git a/frontend/test/__support__/e2e/helpers/e2e-visual-tests-helpers.js b/frontend/test/__support__/e2e/helpers/e2e-visual-tests-helpers.js
new file mode 100644
index 0000000000000000000000000000000000000000..a85eec847a2cb0097a3f12b22a260905f4ee899a
--- /dev/null
+++ b/frontend/test/__support__/e2e/helpers/e2e-visual-tests-helpers.js
@@ -0,0 +1,3 @@
+export function ensureDcChartVisibility() {
+ cy.get(".dc-chart");
+}
diff --git a/frontend/test/metabase-visual/dashboard/parameters-widget.cy.spec.js b/frontend/test/metabase-visual/dashboard/parameters-widget.cy.spec.js
index 7afbdb952acd3d61a64482f70303e48314b6dc86..ffa5dd45ce13ad7c1a1163237930d29f185a67e4 100644
--- a/frontend/test/metabase-visual/dashboard/parameters-widget.cy.spec.js
+++ b/frontend/test/metabase-visual/dashboard/parameters-widget.cy.spec.js
@@ -14,6 +14,8 @@ const parameter = {
type: "category",
};
+const MOBILE_WIDTH = 375; // iPhone SE
+
describe(`visual tests > dashboard > parameters widget`, () => {
const parametersShort = new Array(5).fill(parameter);
const parametersLong = new Array(12).fill(parameter);
@@ -40,13 +42,14 @@ describe(`visual tests > dashboard > parameters widget`, () => {
cy.editDashboardCard(card, updatedSize);
visitDashboard(dashboard_id);
+
+ cy.findByText("test question");
+ cy.findByText("Rustic Paper Wallet");
});
});
describe(`desktop`, () => {
it("is sticky in view mode", () => {
- cy.findByText("test question");
-
cy.get("main")
.scrollTo(0, 264)
.then(() => {
@@ -61,8 +64,6 @@ describe(`visual tests > dashboard > parameters widget`, () => {
});
it("is sticky in edit mode", () => {
- cy.findByText("test question");
-
cy.icon("pencil").click();
cy.findByTestId("dashboard-parameters-and-cards")
@@ -81,14 +82,12 @@ describe(`visual tests > dashboard > parameters widget`, () => {
describe(`mobile`, () => {
it("is sticky in view mode", () => {
- cy.findByText("test question");
-
- cy.viewport(375, 667); // iPhone SE
+ cy.viewport(MOBILE_WIDTH, 667);
cy.get("main")
.scrollTo(0, 264)
.then(() => {
- cy.percySnapshot();
+ cy.percySnapshot(null, { widths: [MOBILE_WIDTH] });
});
cy.findByTestId("dashboard-parameters-widget-container").should(
@@ -99,16 +98,14 @@ describe(`visual tests > dashboard > parameters widget`, () => {
});
it("is sticky in edit mode", () => {
- cy.findByText("test question");
-
- cy.viewport(375, 667); // iPhone SE
+ cy.viewport(MOBILE_WIDTH, 667);
cy.icon("pencil").click();
cy.findByTestId("dashboard-parameters-and-cards")
.scrollTo(0, 464)
.then(() => {
- cy.percySnapshot();
+ cy.percySnapshot(null, { widths: [MOBILE_WIDTH] });
});
cy.findByTestId("edit-dashboard-parameters-widget-container").should(
@@ -142,13 +139,13 @@ describe(`visual tests > dashboard > parameters widget`, () => {
cy.editDashboardCard(card, updatedSize);
visitDashboard(dashboard_id);
+ cy.findByText("test question");
+ cy.findByText("Rustic Paper Wallet");
});
});
describe(`desktop`, () => {
it("is sticky in view mode", () => {
- cy.findByText("test question");
-
cy.get("main")
.scrollTo(0, 264)
.then(() => {
@@ -183,14 +180,12 @@ describe(`visual tests > dashboard > parameters widget`, () => {
describe(`mobile`, () => {
it("is not sticky in view mode", () => {
- cy.findByText("test question");
-
- cy.viewport(375, 667); // iPhone SE
+ cy.viewport(MOBILE_WIDTH, 667);
cy.get("main")
.scrollTo(0, 264)
.then(() => {
- cy.percySnapshot();
+ cy.percySnapshot(null, { widths: [MOBILE_WIDTH] });
});
cy.findByTestId("dashboard-parameters-widget-container").should(
@@ -201,16 +196,14 @@ describe(`visual tests > dashboard > parameters widget`, () => {
});
it("is not sticky in edit mode", () => {
- cy.findByText("test question");
-
- cy.viewport(375, 667); // iPhone SE
+ cy.viewport(MOBILE_WIDTH, 667);
cy.icon("pencil").click();
cy.findByTestId("dashboard-parameters-and-cards")
.scrollTo(0, 464)
.then(() => {
- cy.percySnapshot();
+ cy.percySnapshot(null, { widths: [MOBILE_WIDTH] });
});
cy.findByTestId("edit-dashboard-parameters-widget-container").should(
diff --git a/frontend/test/metabase-visual/models/editor.cy.spec.js b/frontend/test/metabase-visual/models/editor.cy.spec.js
index 0be451c5f7b641072fe8582cb2591a6f2adda7d3..751c8c2e2418641aa37d69d0a5741c93f3742040 100644
--- a/frontend/test/metabase-visual/models/editor.cy.spec.js
+++ b/frontend/test/metabase-visual/models/editor.cy.spec.js
@@ -20,6 +20,7 @@ describe("visual tests > models > editor", () => {
cy.visit(`/model/${MODEL_ID}/query`);
cy.wait("@cardQuery");
cy.findByText(/Doing science/).should("not.exist");
+ cy.wait(100); // waits for the colums widths calculation
cy.percySnapshot(
"visual tests > models > editor > GUI query > renders query editor correctly",
);
@@ -35,6 +36,7 @@ describe("visual tests > models > editor", () => {
cy.visit(`/model/${MODEL_ID}/metadata`);
cy.wait("@cardQuery");
cy.findByText(/Doing science/).should("not.exist");
+ cy.wait(100); // waits for the colums widths calculation
cy.percySnapshot(
"visual tests > models > editor > GUI query > renders metadata editor correctly",
);
@@ -71,6 +73,7 @@ describe("visual tests > models > editor", () => {
cy.visit(`/model/${MODEL_ID}/metadata`);
cy.wait("@cardQuery");
cy.findByText(/Doing science/).should("not.exist");
+ cy.wait(100); // waits for the colums widths calculation
cy.percySnapshot(
"visual tests > models > editor > native query > renders metadata editor correctly",
);
diff --git a/frontend/test/metabase-visual/notebook/notebook.cy.spec.js b/frontend/test/metabase-visual/notebook/notebook.cy.spec.js
index 38b9043d0778fa8d0a947fc3caf1cabd442e40f1..583f9bcfaf732190cc3f1c6b36c9d81916e2cd68 100644
--- a/frontend/test/metabase-visual/notebook/notebook.cy.spec.js
+++ b/frontend/test/metabase-visual/notebook/notebook.cy.spec.js
@@ -92,7 +92,7 @@ describe("visual tests > notebook > Run buttons", () => {
cy.findByText("SQL query").click();
// Check that we're on the blank question page
- cy.findByText("Here's where your results will appear");
+ cy.findByText("Here's where your results will appear").click();
cy.percySnapshot(
"visual tests > notebook > Run buttons in Native Query render correctly",
{
diff --git a/frontend/test/metabase-visual/onboarding/urls.cy.spec.js b/frontend/test/metabase-visual/onboarding/urls.cy.spec.js
index 692d5aba1873d4838079541216f61b36a35d50d2..a6421a9a5e6804659f7102fe2dbd8225a98367f2 100644
--- a/frontend/test/metabase-visual/onboarding/urls.cy.spec.js
+++ b/frontend/test/metabase-visual/onboarding/urls.cy.spec.js
@@ -36,6 +36,7 @@ describe("visual tests > onboarding > URLs", () => {
cy.findByText("First collection");
cy.findByText("Your personal collection");
+ cy.findByText("Orders");
cy.percySnapshot();
});
diff --git a/frontend/test/metabase-visual/visualizations/bar.cy.spec.js b/frontend/test/metabase-visual/visualizations/bar.cy.spec.js
index a55e7e9f2ea3cac8fc5fab1fb15d098803deb2a4..4590bcba840fb9f7538007221518f21a9b323a13 100644
--- a/frontend/test/metabase-visual/visualizations/bar.cy.spec.js
+++ b/frontend/test/metabase-visual/visualizations/bar.cy.spec.js
@@ -1,4 +1,8 @@
-import { restore, visitQuestionAdhoc } from "__support__/e2e/cypress";
+import {
+ restore,
+ visitQuestionAdhoc,
+ ensureDcChartVisibility,
+} from "__support__/e2e/cypress";
import { SAMPLE_DB_ID } from "__support__/e2e/cypress_data";
describe("visual tests > visualizations > bar", () => {
@@ -28,6 +32,7 @@ describe("visual tests > visualizations > bar", () => {
},
});
+ ensureDcChartVisibility();
cy.percySnapshot();
});
diff --git a/frontend/test/metabase-visual/visualizations/funnel.cy.spec.js b/frontend/test/metabase-visual/visualizations/funnel.cy.spec.js
index 7c3fdea7708e8ea5a94ae53026f8766a087701ed..a3afacc6ce3ed4e2e5c0bd78192b791573c9e582 100644
--- a/frontend/test/metabase-visual/visualizations/funnel.cy.spec.js
+++ b/frontend/test/metabase-visual/visualizations/funnel.cy.spec.js
@@ -27,6 +27,7 @@ describe("visual tests > visualizations > funnel", () => {
},
});
+ cy.findByTestId("funnel-chart");
cy.percySnapshot();
});
@@ -52,6 +53,7 @@ describe("visual tests > visualizations > funnel", () => {
},
});
+ cy.findByTestId("funnel-chart");
cy.percySnapshot();
});
});
diff --git a/frontend/test/metabase-visual/visualizations/line.cy.spec.js b/frontend/test/metabase-visual/visualizations/line.cy.spec.js
index 708cf04d4a219a278b2a27ee6254544ef5bf73fa..3a184e7c9a64e50816d954a96750ee4f4a14f619 100644
--- a/frontend/test/metabase-visual/visualizations/line.cy.spec.js
+++ b/frontend/test/metabase-visual/visualizations/line.cy.spec.js
@@ -1,4 +1,8 @@
-import { restore, visitQuestionAdhoc } from "__support__/e2e/cypress";
+import {
+ restore,
+ visitQuestionAdhoc,
+ ensureDcChartVisibility,
+} from "__support__/e2e/cypress";
import { SAMPLE_DB_ID } from "__support__/e2e/cypress_data";
import { SAMPLE_DATABASE } from "__support__/e2e/cypress_sample_database";
@@ -38,6 +42,7 @@ describe("visual tests > visualizations > line", () => {
},
});
+ ensureDcChartVisibility();
cy.percySnapshot();
});
@@ -74,6 +79,7 @@ describe("visual tests > visualizations > line", () => {
},
});
+ ensureDcChartVisibility();
cy.percySnapshot();
});
@@ -110,6 +116,7 @@ describe("visual tests > visualizations > line", () => {
},
});
+ ensureDcChartVisibility();
cy.percySnapshot();
});
@@ -149,6 +156,7 @@ describe("visual tests > visualizations > line", () => {
},
});
+ ensureDcChartVisibility();
cy.percySnapshot();
});
@@ -189,6 +197,7 @@ describe("visual tests > visualizations > line", () => {
},
});
+ ensureDcChartVisibility();
cy.percySnapshot();
});
});
diff --git a/frontend/test/metabase-visual/visualizations/row.cy.spec.js b/frontend/test/metabase-visual/visualizations/row.cy.spec.js
index 8a3d105b6b20294e8607ca6cf8f2b4c3b9cd1092..c83be56588f20c5f8179c41820760167a01f4757 100644
--- a/frontend/test/metabase-visual/visualizations/row.cy.spec.js
+++ b/frontend/test/metabase-visual/visualizations/row.cy.spec.js
@@ -1,4 +1,8 @@
-import { restore, visitQuestionAdhoc } from "__support__/e2e/cypress";
+import {
+ restore,
+ visitQuestionAdhoc,
+ ensureDcChartVisibility,
+} from "__support__/e2e/cypress";
import { SAMPLE_DB_ID } from "__support__/e2e/cypress_data";
import { SAMPLE_DATABASE } from "__support__/e2e/cypress_sample_database";
@@ -33,6 +37,7 @@ describe("visual tests > visualizations > row", () => {
},
});
+ ensureDcChartVisibility();
cy.percySnapshot();
});
});
diff --git a/frontend/test/metabase-visual/visualizations/scatter.cy.spec.js b/frontend/test/metabase-visual/visualizations/scatter.cy.spec.js
index 15a47fee5b159e7b01ad2e6bb3782aba70ad6d63..1e7630491ca6b225a9f8f37faa5b8d8f27d1f089 100644
--- a/frontend/test/metabase-visual/visualizations/scatter.cy.spec.js
+++ b/frontend/test/metabase-visual/visualizations/scatter.cy.spec.js
@@ -1,4 +1,8 @@
-import { restore, visitQuestionAdhoc } from "__support__/e2e/cypress";
+import {
+ restore,
+ visitQuestionAdhoc,
+ ensureDcChartVisibility,
+} from "__support__/e2e/cypress";
import { SAMPLE_DB_ID } from "__support__/e2e/cypress_data";
import { SAMPLE_DATABASE } from "__support__/e2e/cypress_sample_database";
@@ -37,7 +41,7 @@ describe("visual tests > visualizations > scatter", () => {
},
});
- cy.get(".dc-chart");
+ ensureDcChartVisibility();
cy.percySnapshot();
});
@@ -65,7 +69,7 @@ describe("visual tests > visualizations > scatter", () => {
},
});
- cy.get(".dc-chart");
+ ensureDcChartVisibility();
cy.percySnapshot();
});
@@ -92,7 +96,7 @@ union all select 5, -20, 70`,
},
});
- cy.get(".dc-chart");
+ ensureDcChartVisibility();
cy.percySnapshot();
});
});
diff --git a/frontend/test/metabase-visual/visualizations/waterfall.cy.spec.js b/frontend/test/metabase-visual/visualizations/waterfall.cy.spec.js
index a1057326f98d05144b55b555a9f88ccb359c12f4..09c0c655cf4ea69a9fae7f3998e0ebdaa682480c 100644
--- a/frontend/test/metabase-visual/visualizations/waterfall.cy.spec.js
+++ b/frontend/test/metabase-visual/visualizations/waterfall.cy.spec.js
@@ -1,4 +1,8 @@
-import { restore, visitQuestionAdhoc } from "__support__/e2e/cypress";
+import {
+ restore,
+ visitQuestionAdhoc,
+ ensureDcChartVisibility,
+} from "__support__/e2e/cypress";
import { SAMPLE_DB_ID } from "__support__/e2e/cypress_data";
import { SAMPLE_DATABASE } from "__support__/e2e/cypress_sample_database";
@@ -40,6 +44,7 @@ describe("visual tests > visualizations > waterfall", () => {
},
});
+ ensureDcChartVisibility();
cy.percySnapshot();
});
});