Simplify time-series binning e2e test (#20237)

* Limit Orders table to 50 rows

* Export time options into a separate file

* Apply the same principle to longitude options

frontend/test/metabase/scenarios/binning/correctness/constants.js

+export const TIME_OPTIONS = {
+  Minute: {
+    selected: "by minute",
+    representativeValues: ["April 30, 2016, 6:56 PM", "May 10, 2016, 9:38 AM"],
+  },
+  Hour: {
+    selected: "by hour",
+    representativeValues: ["April 30, 2016, 6:00 PM", "May 10, 2016, 9:00 AM"],
+  },
+  Day: {
+    selected: "by day",
+    representativeValues: ["April 30, 2016", "May 10, 2016"],
+  },
+  Week: {
+    selected: "by week",
+    representativeValues: [
+      "April 24, 2016 – April 30, 2016",
+      "May 8, 2016 – May 14, 2016",
+    ],
+  },
+  Month: {
+    selected: "by month",
+    representativeValues: ["April, 2016", "May, 2016"],
+  },
+  Quarter: {
+    selected: "by quarter",
+    representativeValues: ["Q2 - 2016", "Q1 - 2017", "Q1 - 2018", "Q1 - 2019"],
+  },
+  Year: {
+    selected: "by year",
+    representativeValues: ["2016", "2017", "2018", "2019", "2020"],
+  },
+  "Minute of Hour": {
+    selected: "by minute of hour",
+    representativeValues: ["0", "5", "8", "13"],
+    type: "extended",
+  },
+  "Hour of Day": {
+    selected: "by hour of day",
+    representativeValues: ["12:00 AM", "2:00 AM", "12:00 PM", "8:00 PM"],
+  },
+  "Day of Week": {
+    selected: "by day of week",
+    representativeValues: ["Saturday", "Tuesday", "Friday", "Sunday"],
+  },
+  "Day of Month": {
+    selected: "by day of month",
+    representativeValues: ["5", "10", "15", "30"],
+  },
+  "Day of Year": {
+    selected: "by day of year",
+    representativeValues: ["1", "10", "12"],
+  },
+  "Week of Year": {
+    selected: "by week of year",
+    representativeValues: ["1st", "2nd", "3rd", "10th"],
+  },
+  "Month of Year": {
+    selected: "by month of year",
+    representativeValues: ["January", "June", "December"],
+  },
+  "Quarter of Year": {
+    selected: "by quarter of year",
+    representativeValues: ["Q1", "Q2", "Q3", "Q4"],
+  },
+};
+
+export const LONGITUDE_OPTIONS = {
+  "Auto bin": {
+    selected: "Auto binned",
+    representativeValues: ["170° W", "100° W", "60° W"],
+  },
+  "Bin every 0.1 degrees": {
+    selected: "0.1°",
+    representativeValues: null,
+  },
+  "Bin every 1 degree": {
+    selected: "1°",
+    representativeValues: ["167° W", "164° W", "67° W"],
+  },
+  "Bin every 10 degrees": {
+    selected: "10°",
+    representativeValues: ["170° W", "100° W", "60° W"],
+  },
+  "Bin every 20 degrees": {
+    selected: "20°",
+    representativeValues: ["180° W", "160° W", "100° W", "80° W", "60° W"],
+  },
+};

frontend/test/metabase/scenarios/binning/correctness/longitude.cy.spec.js

 import { restore, popover, openPeopleTable } from "__support__/e2e/cypress";
 
-const LONGITUDE_OPTIONS = {
-  "Auto bin": {
-    selected: "Auto binned",
-    representativeValues: ["170° W", "100° W", "60° W"],
-  },
-  "Bin every 0.1 degrees": {
-    selected: "0.1°",
-    representativeValues: null,
-  },
-  "Bin every 1 degree": {
-    selected: "1°",
-    representativeValues: ["167° W", "164° W", "67° W"],
-  },
-  "Bin every 10 degrees": {
-    selected: "10°",
-    representativeValues: ["170° W", "100° W", "60° W"],
-  },
-  "Bin every 20 degrees": {
-    selected: "20°",
-    representativeValues: ["180° W", "160° W", "100° W", "80° W", "60° W"],
-  },
-};
+import { LONGITUDE_OPTIONS } from "./constants";
 
 describe("scenarios > binning > correctness > longitude", () => {
   beforeEach(() => {

frontend/test/metabase/scenarios/binning/correctness/time-series.cy.spec.js

 import {
   restore,
   popover,
-  openOrdersTable,
   getBinningButtonForDimension,
 } from "__support__/e2e/cypress";
 
-const TIME_OPTIONS = {
-  Minute: {
-    selected: "by minute",
-    representativeValues: [
-      "January 1, 2017, 12:00 AM",
-      "January 1, 2018, 12:00 AM",
-    ],
-    type: "basic",
-  },
-  Hour: {
-    selected: "by hour",
-    representativeValues: [
-      "January 1, 2017, 12:00 AM",
-      "January 1, 2018, 12:00 AM",
-      "January 1, 2019, 12:00 AM",
-    ],
-    type: "basic",
-  },
-  Day: {
-    selected: "by day",
-    representativeValues: [
-      "January 1, 2017",
-      "January 1, 2018",
-      "January 1, 2019",
-      "January 1, 2020",
-    ],
-    type: "basic",
-  },
-  Week: {
-    selected: "by week",
-    representativeValues: [
-      "January, 2017",
-      "January, 2018",
-      "January, 2019",
-      "January, 2020",
-    ],
-    type: "basic",
-  },
-  Month: {
-    selected: "by month",
-    representativeValues: [
-      "January, 2017",
-      "January, 2018",
-      "January, 2019",
-      "January, 2020",
-    ],
-    type: "basic",
-  },
-  Quarter: {
-    selected: "by quarter",
-    representativeValues: ["Q1 - 2017", "Q1 - 2018", "Q1 - 2019", "Q1 - 2020"],
-    type: "basic",
-  },
-  Year: {
-    selected: "by year",
-    representativeValues: ["2016", "2017", "2018", "2019", "2020"],
-    type: "basic",
-  },
-  "Minute of Hour": {
-    selected: "by minute of hour",
-    representativeValues: ["0", "5", "25", "55"],
-    type: "extended",
-  },
-  "Hour of Day": {
-    selected: "by hour of day",
-    representativeValues: ["12:00 AM", "2:00 AM", "12:00 PM", "8:00 PM"],
-    type: "extended",
-  },
-  "Day of Week": {
-    selected: "by day of week",
-    representativeValues: ["Saturday", "Tuesday", "Friday", "Sunday"],
-    type: "extended",
-  },
-  "Day of Month": {
-    selected: "by day of month",
-    representativeValues: ["5", "10", "15", "30"],
-    type: "extended",
-  },
-  "Day of Year": {
-    selected: "by day of year",
-    representativeValues: ["50", "100", "150", "300"],
-    type: "extended",
-  },
-  "Week of Year": {
-    selected: "by week of year",
-    representativeValues: ["5th", "10th", "50th"],
-    type: "extended",
-  },
-  "Month of Year": {
-    selected: "by month of year",
-    representativeValues: ["January", "June", "December"],
-    type: "extended",
-  },
-  "Quarter of Year": {
-    selected: "by quarter of year",
-    representativeValues: ["Q1", "Q2", "Q3", "Q4"],
-    type: "extended",
+import { TIME_OPTIONS } from "./constants";
+
+import { SAMPLE_DATABASE } from "__support__/e2e/cypress_sample_database";
+
+const { ORDERS_ID } = SAMPLE_DATABASE;
+
+const questionDetails = {
+  name: "Test Question",
+  query: {
+    "source-table": ORDERS_ID,
+    limit: 50,
   },
 };
 
@@ -112,16 +25,17 @@ describe("scenarios > binning > correctness > time series", () => {
 
     cy.intercept("POST", "/api/dataset").as("dataset");
 
-    openOrdersTable();
+    cy.createQuestion(questionDetails, { visitQuestion: true });
+
     cy.findByText("Summarize").click();
     openPopoverFromDefaultBucketSize("Created At", "by month");
   });
 
   Object.entries(TIME_OPTIONS).forEach(
-    ([bucketSize, { selected, representativeValues, type }]) => {
+    ([bucketSize, { selected, representativeValues }]) => {
       // We are forced to ignore the case here because we construct titles like so:
       // "Day of Month" (bucket) -> "Day of month" (title)
-      // This feels weird and is probably worth investigating it further.
+      // This feels weird and is probably worth investigating further.
       const titleRegex = new RegExp(`Count by Created At: ${bucketSize}`, "i");
       const bucketRegex = new RegExp(bucketSize, "i");
 
@@ -140,10 +54,9 @@ describe("scenarios > binning > correctness > time series", () => {
         cy.findByTestId("sidebar-right").should("not.be.visible");
 
         getTitle(titleRegex);
-        getVisualization(type);
 
-        assertOnXYAxisLabels();
-        assertOnXAxisTicks(representativeValues);
+        assertOnHeaderCells(bucketSize);
+        assertOnTableValues(representativeValues);
 
         assertOnTimeSeriesFooter(bucketRegex);
       });
@@ -154,40 +67,29 @@ describe("scenarios > binning > correctness > time series", () => {
 function openPopoverFromDefaultBucketSize(name, bucket) {
   getBinningButtonForDimension({ name })
     .should("have.text", bucket)
-    .click();
+    .click({ force: true });
 }
 
 function getTitle(title) {
   cy.findByText(title);
 }
 
-function getVisualization(binningType) {
-  const selector = binningType === "basic" ? "circle" : ".bar";
+function assertOnHeaderCells(bucketSize) {
+  const headerRegex = new RegExp(`Created At: ${bucketSize}`, "i");
 
-  cy.get(selector);
-}
+  cy.get(".cellData")
+    .eq(0)
+    .contains(headerRegex);
 
-function assertOnXYAxisLabels() {
-  cy.get(".y-axis-label")
-    .should("be.visible")
-    .invoke("text")
-    .should("eq", "Count");
-  cy.get(".x-axis-label")
-    .should("be.visible")
-    .invoke("text")
-    .should("eq", "Created At");
+  cy.get(".cellData")
+    .eq(1)
+    .contains("Count");
 }
 
-function assertOnXAxisTicks(values) {
-  if (values) {
-    cy.get(".axis.x").within(() => {
-      values.forEach(value => {
-        cy.findByText(value);
-      });
-    });
-  } else {
-    cy.get(".axis.x").should("not.exist");
-  }
+function assertOnTableValues(values) {
+  values.map(v => {
+    cy.findByText(v);
+  });
 }
 
 function assertOnTimeSeriesFooter(regex) {