From 911201416768074eb1398d0ccd3198c1ce8ad7f8 Mon Sep 17 00:00:00 2001
From: Aleksandr Lesnenko <alxnddr@users.noreply.github.com>
Date: Tue, 21 Jun 2022 16:49:13 +0400
Subject: [PATCH] fixes flaky visual tests (#23370)
---
.../components/FunnelNormal.jsx | 1 +
frontend/test/__support__/e2e/cypress.js | 1 +
.../e2e/helpers/e2e-visual-tests-helpers.js | 3 ++
.../dashboard/parameters-widget.cy.spec.js | 37 ++++++++-----------
.../metabase-visual/models/editor.cy.spec.js | 3 ++
.../notebook/notebook.cy.spec.js | 2 +-
.../onboarding/urls.cy.spec.js | 1 +
.../visualizations/bar.cy.spec.js | 7 +++-
.../visualizations/funnel.cy.spec.js | 2 +
.../visualizations/line.cy.spec.js | 11 +++++-
.../visualizations/row.cy.spec.js | 7 +++-
.../visualizations/scatter.cy.spec.js | 12 ++++--
.../visualizations/waterfall.cy.spec.js | 7 +++-
13 files changed, 63 insertions(+), 31 deletions(-)
create mode 100644 frontend/test/__support__/e2e/helpers/e2e-visual-tests-helpers.js
diff --git a/frontend/src/metabase/visualizations/components/FunnelNormal.jsx b/frontend/src/metabase/visualizations/components/FunnelNormal.jsx
index dca0cdab71a..766179f678e 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 0de31fd7a02..c0163bf8feb 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 00000000000..a85eec847a2
--- /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 7afbdb952ac..ffa5dd45ce1 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 0be451c5f7b..751c8c2e241 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 38b9043d077..583f9bcfaf7 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 692d5aba187..a6421a9a5e6 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 a55e7e9f2ea..4590bcba840 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 7c3fdea7708..a3afacc6ce3 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 708cf04d4a2..3a184e7c9a6 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 8a3d105b6b2..c83be56588f 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 15a47fee5b1..1e7630491ca 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 a1057326f98..09c0c655cf4 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();
});
});
--
GitLab