From 388b549de90a55530052bb737d4e7cfe8e477db5 Mon Sep 17 00:00:00 2001
From: Alexander Polyankin <alexander.polyankin@metabase.com>
Date: Mon, 17 Jul 2023 15:33:55 +0300
Subject: [PATCH] Add more e2e tests for drill options (#32431)
---
.../drillthroughs/chart_drill.cy.spec.js | 125 +++++++++++
.../drillthroughs/dash_drill.cy.spec.js | 1 -
.../drillthroughs/table_drills.cy.spec.js | 201 ++++++++++++++++++
.../modes/components/modes/TimeseriesMode.jsx | 2 +-
4 files changed, 327 insertions(+), 2 deletions(-)
create mode 100644 e2e/test/scenarios/visualizations/drillthroughs/table_drills.cy.spec.js
diff --git a/e2e/test/scenarios/visualizations/drillthroughs/chart_drill.cy.spec.js b/e2e/test/scenarios/visualizations/drillthroughs/chart_drill.cy.spec.js
index e92eb421969..a493fc843c3 100644
--- a/e2e/test/scenarios/visualizations/drillthroughs/chart_drill.cy.spec.js
+++ b/e2e/test/scenarios/visualizations/drillthroughs/chart_drill.cy.spec.js
@@ -640,6 +640,131 @@ describe("scenarios > visualizations > drillthroughs > chart drill", () => {
cy.findByText("Doohickey").should("not.exist");
});
});
+
+ it("should display proper drills on chart click for line chart", () => {
+ cy.createQuestion(
+ {
+ name: "Line chart drills",
+ query: {
+ "source-table": ORDERS_ID,
+ aggregation: [["count"]],
+ breakout: [
+ [
+ "field",
+ PRODUCTS.CREATED_AT,
+ { "source-field": ORDERS.PRODUCT_ID, "temporal-unit": "month" },
+ ],
+ ["field", PRODUCTS.CATEGORY, { "source-field": ORDERS.PRODUCT_ID }],
+ ],
+ },
+ display: "line",
+ },
+ { visitQuestion: true },
+ );
+
+ cy.get(".LineAreaBarChart").get(".dot").first().click({ force: true });
+ popover().within(() => {
+ cy.findByText(`See these Orders`).should("be.visible");
+
+ cy.findByText(`See this month by week`).should("be.visible");
+
+ cy.findByText(`Break out by…`).should("be.visible");
+ cy.findByText(`Automatic insights…`).should("be.visible");
+
+ cy.findByText(`>`).should("be.visible");
+ cy.findByText(`<`).should("be.visible");
+ cy.findByText(`=`).should("be.visible");
+ cy.findByText(`≠`).should("be.visible");
+ });
+
+ cy.findByTestId("timeseries-mode-bar").within(() => {
+ cy.findByText(`View`).should("be.visible");
+ cy.findByText(`All Time`).should("be.visible");
+ cy.findByText(`by`).should("be.visible");
+ cy.findByText(`Month`).should("be.visible");
+ });
+ });
+
+ it("should display proper drills on chart click for bar chart", () => {
+ cy.createQuestion(
+ {
+ name: "Line chart drills",
+ query: {
+ "source-table": ORDERS_ID,
+ aggregation: [["count"]],
+ breakout: [
+ [
+ "field",
+ PRODUCTS.CREATED_AT,
+ { "source-field": ORDERS.PRODUCT_ID, "temporal-unit": "month" },
+ ],
+ ["field", PRODUCTS.CATEGORY, { "source-field": ORDERS.PRODUCT_ID }],
+ ],
+ },
+ display: "bar",
+ },
+ { visitQuestion: true },
+ );
+
+ cy.get(".LineAreaBarChart").findAllByTestId("legend-item").first().click();
+
+ popover().within(() => {
+ cy.findByText(`See these Orders`).should("be.visible");
+ cy.findByText(`Automatic insights…`).should("be.visible");
+ });
+
+ cy.get(".LineAreaBarChart").get(".bar").first().click({ force: true });
+ popover().within(() => {
+ cy.findByText(`See these Orders`).should("be.visible");
+
+ cy.findByText(`See this month by week`).should("be.visible");
+
+ cy.findByText(`Break out by…`).should("be.visible");
+ cy.findByText(`Automatic insights…`).should("be.visible");
+
+ cy.findByText(`>`).should("be.visible");
+ cy.findByText(`<`).should("be.visible");
+ cy.findByText(`=`).should("be.visible");
+ cy.findByText(`≠`).should("be.visible");
+ });
+
+ cy.findByTestId("timeseries-mode-bar").within(() => {
+ cy.findByText(`View`).should("be.visible");
+ cy.findByText(`All Time`).should("be.visible");
+ cy.findByText(`by`).should("be.visible");
+ cy.findByText(`Month`).should("be.visible");
+ });
+ });
+
+ it("should display proper drills on chart click for query grouped by state", () => {
+ cy.createQuestion(
+ {
+ name: "Line chart drills",
+ query: {
+ "source-table": PEOPLE_ID,
+ aggregation: [["count"]],
+ breakout: [["field", PEOPLE.STATE, null]],
+ },
+ display: "map",
+ },
+ { visitQuestion: true },
+ );
+
+ cy.get(".CardVisualization").get("path.cursor-pointer").first().click();
+
+ popover().within(() => {
+ cy.findByText(`See these People`).should("be.visible");
+ cy.findByText(`Zoom in`).should("be.visible");
+
+ cy.findByText(`Break out by…`).should("be.visible");
+ cy.findByText(`Automatic insights…`).should("be.visible");
+
+ cy.findByText(`>`).should("be.visible");
+ cy.findByText(`<`).should("be.visible");
+ cy.findByText(`=`).should("be.visible");
+ cy.findByText(`≠`).should("be.visible");
+ });
+ });
});
function hoverLineDot({ index } = {}) {
diff --git a/e2e/test/scenarios/visualizations/drillthroughs/dash_drill.cy.spec.js b/e2e/test/scenarios/visualizations/drillthroughs/dash_drill.cy.spec.js
index 400b86438cb..086947bea53 100644
--- a/e2e/test/scenarios/visualizations/drillthroughs/dash_drill.cy.spec.js
+++ b/e2e/test/scenarios/visualizations/drillthroughs/dash_drill.cy.spec.js
@@ -1,4 +1,3 @@
-// Imported from drillthroughs.e2e.spec.js
import {
addOrUpdateDashboardCard,
restore,
diff --git a/e2e/test/scenarios/visualizations/drillthroughs/table_drills.cy.spec.js b/e2e/test/scenarios/visualizations/drillthroughs/table_drills.cy.spec.js
new file mode 100644
index 00000000000..35ea70089da
--- /dev/null
+++ b/e2e/test/scenarios/visualizations/drillthroughs/table_drills.cy.spec.js
@@ -0,0 +1,201 @@
+import { openReviewsTable, popover, restore } from "e2e/support/helpers";
+import { SAMPLE_DATABASE } from "e2e/support/cypress_sample_database";
+
+const { REVIEWS, REVIEWS_ID } = SAMPLE_DATABASE;
+
+describe("scenarios > visualizations > drillthroughs > table_drills", function () {
+ beforeEach(() => {
+ restore();
+ cy.signInAsAdmin();
+ });
+
+ it("should display proper drills on cell click for unaggregated query", () => {
+ openReviewsTable({ limit: 3 });
+
+ // FK cell drills
+ cy.get(".Table-FK").findByText("1").first().click();
+ popover().within(() => {
+ cy.findByText(`View this Product's Reviews`).should("be.visible");
+ cy.findByText(`View details`).should("be.visible");
+ });
+
+ // Short text cell drills
+ cy.get(".cellData").contains("christ").click();
+ popover().within(() => {
+ cy.findByText(`Is christ`).should("be.visible");
+ cy.findByText(`Is not christ`).should("be.visible");
+ cy.findByText(`View details`).should("be.visible");
+ });
+
+ // Number cell drills
+ cy.get(".cellData").contains("5").first().click();
+ popover().within(() => {
+ cy.findByText(`>`).should("be.visible");
+ cy.findByText(`<`).should("be.visible");
+ cy.findByText(`=`).should("be.visible");
+ cy.findByText(`≠`).should("be.visible");
+ cy.findByText(`View details`).should("be.visible");
+ });
+
+ cy.get(".cellData").contains("Ad perspiciatis quis").click();
+ popover().within(() => {
+ cy.findByText(`Contains…`).should("be.visible");
+ cy.findByText(`Does not contain…`).should("be.visible");
+ cy.findByText(`View details`).should("be.visible");
+ });
+
+ cy.get(".cellData").contains("May 15, 20").click();
+ popover().within(() => {
+ cy.findByText(`Before`).should("be.visible");
+ cy.findByText(`After`).should("be.visible");
+ cy.findByText(`On`).should("be.visible");
+ cy.findByText(`Not on`).should("be.visible");
+ cy.findByText(`View details`).should("be.visible");
+ });
+
+ cy.get(".cellData").contains("ID").click({ force: true });
+ popover().within(() => {
+ cy.icon("arrow_down").should("be.visible");
+ cy.icon("arrow_up").should("be.visible");
+ cy.icon("gear").should("be.visible");
+
+ cy.findByText(`Filter by this column`).should("be.visible");
+ cy.findByText(`Distinct values`).should("be.visible");
+ });
+
+ cy.get(".cellData").contains("Reviewer").click();
+ popover().within(() => {
+ cy.icon("arrow_down").should("be.visible");
+ cy.icon("arrow_up").should("be.visible");
+ cy.icon("gear").should("be.visible");
+
+ cy.findByText(`Filter by this column`).should("be.visible");
+ cy.findByText(`Distribution`).should("be.visible");
+ cy.findByText(`Distinct values`).should("be.visible");
+ });
+
+ cy.get(".cellData").contains("Rating").click();
+ popover().within(() => {
+ cy.icon("arrow_down").should("be.visible");
+ cy.icon("arrow_up").should("be.visible");
+ cy.icon("gear").should("be.visible");
+
+ cy.findByText(`Filter by this column`).should("be.visible");
+ cy.findByText(`Sum over time`).should("be.visible");
+ cy.findByText(`Distribution`).should("be.visible");
+
+ cy.findByText(`Sum`).should("be.visible");
+ cy.findByText(`Avg`).should("be.visible");
+ cy.findByText(`Distinct values`).should("be.visible");
+ });
+ });
+
+ it(`should display proper drills on cell click for query aggregated by category`, () => {
+ cy.createQuestion(
+ {
+ query: {
+ "source-table": REVIEWS_ID,
+ aggregation: [["count"]],
+ breakout: [["field", REVIEWS.REVIEWER, null]],
+ limit: 10,
+ },
+ },
+ { visitQuestion: true },
+ );
+
+ cy.get(".cellData").contains("abbey-heidenreich").click();
+ popover().within(() => {
+ cy.findByText(`Is abbey-heidenreich`).should("be.visible");
+ cy.findByText(`Is not abbey-heidenreich`).should("be.visible");
+ });
+
+ cy.get(".cellData").contains("1").first().click();
+ popover().within(() => {
+ cy.findByText(`See this Review`).should("be.visible");
+
+ cy.findByText(`Automatic insights…`).should("be.visible");
+
+ cy.findByText(`>`).should("be.visible");
+ cy.findByText(`<`).should("be.visible");
+ cy.findByText(`=`).should("be.visible");
+ cy.findByText(`≠`).should("be.visible");
+ });
+
+ cy.get(".cellData").contains("Reviewer").click();
+ popover().within(() => {
+ cy.icon("arrow_down").should("be.visible");
+ cy.icon("arrow_up").should("be.visible");
+ cy.icon("gear").should("be.visible");
+
+ cy.findByText(`Filter by this column`).should("be.visible");
+ });
+
+ cy.get(".cellData").contains("Count").click();
+ popover().within(() => {
+ cy.icon("arrow_down").should("be.visible");
+ cy.icon("arrow_up").should("be.visible");
+ cy.icon("gear").should("be.visible");
+
+ cy.findByText(`Filter by this column`).should("be.visible");
+ });
+ });
+
+ it(`should display proper drills on cell click for query aggregated by date`, () => {
+ cy.createQuestion(
+ {
+ query: {
+ "source-table": REVIEWS_ID,
+ aggregation: [["count"]],
+ breakout: [
+ ["field", REVIEWS.CREATED_AT, { "temporal-unit": "month" }],
+ ],
+ limit: 10,
+ },
+ },
+ { visitQuestion: true },
+ );
+
+ cy.get(".cellData").contains("June,").first().click();
+ popover().within(() => {
+ cy.findByText(`Before`).should("be.visible");
+ cy.findByText(`After`).should("be.visible");
+ cy.findByText(`On`).should("be.visible");
+ cy.findByText(`Not on`).should("be.visible");
+ });
+
+ cy.get(".cellData").contains("4").first().click();
+ popover().within(() => {
+ cy.findByText(`See this month by week`).should("be.visible");
+
+ cy.findByText(`Break out by…`).should("be.visible");
+ cy.findByText(`Automatic insights…`).should("be.visible");
+
+ cy.findByText(`>`).should("be.visible");
+ cy.findByText(`<`).should("be.visible");
+ cy.findByText(`=`).should("be.visible");
+ cy.findByText(`≠`).should("be.visible");
+ });
+
+ cy.findByTestId("timeseries-mode-bar").within(() => {
+ cy.findByText(`View`).should("be.visible");
+ cy.findByText(`All Time`).should("be.visible");
+ cy.findByText(`by`).should("be.visible");
+ cy.findByText(`Month`).should("be.visible");
+ });
+ });
+
+ it(`should display proper drills for native query`, () => {
+ cy.createNativeQuestion(
+ {
+ name: "table_drills",
+ native: { query: `select * from orders limit 3` },
+ },
+ { visitQuestion: true },
+ );
+
+ cy.get(".cellData").contains("1").first().click();
+ popover()
+ .findByText(`Drill-through doesn’t work on SQL questions.`)
+ .should("be.visible");
+ });
+});
diff --git a/frontend/src/metabase/modes/components/modes/TimeseriesMode.jsx b/frontend/src/metabase/modes/components/modes/TimeseriesMode.jsx
index 7fb00a71d65..e18d248c1b1 100644
--- a/frontend/src/metabase/modes/components/modes/TimeseriesMode.jsx
+++ b/frontend/src/metabase/modes/components/modes/TimeseriesMode.jsx
@@ -12,7 +12,7 @@ const TimeseriesModeFooter = props => {
};
return (
- <div className="flex layout-centered">
+ <div className="flex layout-centered" data-testid="timeseries-mode-bar">
<span className="mr1">{t`View`}</span>
<TimeseriesFilterWidget {...props} card={props.lastRunCard} />
<span className="mx1">{t`by`}</span>
--
GitLab