[E2E] Optimize looping logic in tests for dashboard date filters (#24262)

- This will connect all filter types at once
- We're reducing the number of checks for the default filter value to just one

frontend/test/metabase/scenarios/dashboard-filters/dashboard-filters-date.cy.spec.js

@@ -11,56 +11,77 @@ import {
 import { DASHBOARD_DATE_FILTERS } from "./helpers/e2e-dashboard-filter-data-objects";
 import * as DateFilter from "../native-filters/helpers/e2e-date-filter-helpers";
 
-Object.entries(DASHBOARD_DATE_FILTERS).forEach(
-  ([filter, { value, representativeResult }]) => {
-    describe("scenarios > dashboard > filters > date", () => {
-      beforeEach(() => {
-        cy.intercept("GET", "/api/table/*/query_metadata").as("metadata");
+describe("scenarios > dashboard > filters > date", () => {
+  beforeEach(() => {
+    cy.intercept("GET", "/api/table/*/query_metadata").as("metadata");
 
-        restore();
-        cy.signInAsAdmin();
+    restore();
+    cy.signInAsAdmin();
 
-        visitDashboard(1);
+    visitDashboard(1);
 
-        editDashboard();
-        setFilter("Time", filter);
+    editDashboard();
+  });
 
-        cy.findByText("Select…").click();
-        popover().contains("Created At").first().click();
-      });
+  it(`should work when set through the filter widget`, () => {
+    // Add and connect every single available date filter type
+    Object.entries(DASHBOARD_DATE_FILTERS).forEach(([filter]) => {
+      cy.log(`Make sure we can connect ${filter} filter`);
+      setFilter("Time", filter);
 
-      it(`should work for "${filter}" when set through the filter widget`, () => {
-        saveDashboard();
+      cy.findByText("Select…").click();
+      popover().contains("Created At").first().click();
+    });
+
+    saveDashboard();
 
-        filterWidget().click();
+    // Go through each of the filters and make sure they work individually
+    Object.entries(DASHBOARD_DATE_FILTERS).forEach(
+      ([filter, { value, representativeResult }], index) => {
+        filterWidget().eq(index).click();
 
         dateFilterSelector({
           filterType: filter,
           filterValue: value,
         });
 
+        cy.log(`Make sure ${filter} filter returns correct result`);
         cy.get(".Card").within(() => {
           cy.findByText(representativeResult);
         });
-      });
 
-      it(`should work for "${filter}" when set as the default filter`, () => {
-        cy.findByText("Default value").next().click();
+        clearFilter(index);
+      },
+    );
+  });
 
-        dateFilterSelector({
-          filterType: filter,
-          filterValue: value,
-        });
+  // Rather than going through every single filter type,
+  // make sure the default filter works for just one of the available options
+  it(`should work when set as the default filter`, () => {
+    setFilter("Time", "Month and Year");
+    cy.findByText("Default value").next().click();
 
-        saveDashboard();
+    DateFilter.setMonthAndYear({
+      month: "November",
+      year: "2016",
+    });
 
-        cy.get(".Card").within(() => {
-          cy.findByText(representativeResult);
-        });
-      });
+    cy.findByText("Select…").click();
+    popover().contains("Created At").first().click();
+
+    saveDashboard();
+
+    // The default value should immediately be applied
+    cy.get(".Card").within(() => {
+      cy.findByText("85.88");
     });
-  },
-);
+
+    // Make sure we can override the default value
+    cy.findByText("November, 2016").click();
+    popover().contains("June").click();
+    cy.findByText("33.9");
+  });
+});
 
 function dateFilterSelector({ filterType, filterValue } = {}) {
   switch (filterType) {
@@ -94,3 +115,8 @@ function dateFilterSelector({ filterType, filterValue } = {}) {
       throw new Error("Wrong filter type!");
   }
 }
+
+function clearFilter(index) {
+  filterWidget().eq(index).find(".Icon-close").click();
+  cy.wait("@dashcardQuery1");
+}

frontend/test/metabase/scenarios/dashboard-filters/dashboard-filters-sql-date.cy.spec.js

@@ -9,89 +9,81 @@ import {
   visitDashboard,
 } from "__support__/e2e/helpers";
 
-import { DASHBOARD_SQL_DATE_FILTERS } from "./helpers/e2e-dashboard-filter-sql-data-objects";
+import {
+  DASHBOARD_SQL_DATE_FILTERS,
+  questionDetails,
+} from "./helpers/e2e-dashboard-filter-sql-data-objects";
 import * as DateFilter from "../native-filters/helpers/e2e-date-filter-helpers";
 
-import { SAMPLE_DATABASE } from "__support__/e2e/cypress_sample_database";
-
-const { PEOPLE } = SAMPLE_DATABASE;
-
-Object.entries(DASHBOARD_SQL_DATE_FILTERS).forEach(
-  ([filter, { value, representativeResult, sqlFilter }]) => {
-    describe("scenarios > dashboard > filters > SQL > date", () => {
-      beforeEach(() => {
-        restore();
-        cy.signInAsAdmin();
+describe("scenarios > dashboard > filters > SQL > date", () => {
+  beforeEach(() => {
+    restore();
+    cy.signInAsAdmin();
 
-        const questionDetails = getQuestionDetails(sqlFilter);
+    cy.createNativeQuestionAndDashboard({ questionDetails }).then(
+      ({ body: { card_id, dashboard_id } }) => {
+        visitQuestion(card_id);
 
-        cy.createNativeQuestionAndDashboard({ questionDetails }).then(
-          ({ body: { card_id, dashboard_id } }) => {
-            visitQuestion(card_id);
-
-            visitDashboard(dashboard_id);
-          },
-        );
+        visitDashboard(dashboard_id);
+      },
+    );
 
-        editDashboard();
-        setFilter("Time", filter);
+    editDashboard();
+  });
 
-        cy.findByText("Select…").click();
-        popover().contains("Filter").click();
-      });
+  it(`should work when set through the filter widget`, () => {
+    Object.entries(DASHBOARD_SQL_DATE_FILTERS).forEach(([filter]) => {
+      cy.log(`Make sure we can connect ${filter} filter`);
+      setFilter("Time", filter);
 
-      it(`should work for "${filter}" when set through the filter widget`, () => {
-        saveDashboard();
+      cy.findByText("Select…").click();
+      popover().contains(filter).click();
+    });
 
-        filterWidget().click();
+    saveDashboard();
 
+    Object.entries(DASHBOARD_SQL_DATE_FILTERS).forEach(
+      ([filter, { value, representativeResult }], index) => {
+        filterWidget().eq(index).click();
         dateFilterSelector({
           filterType: filter,
           filterValue: value,
         });
 
+        cy.log(`Make sure ${filter} filter returns correct result`);
         cy.get(".Card").within(() => {
           cy.contains(representativeResult);
         });
-      });
 
-      it(`should work for "${filter}" when set as the default filter`, () => {
-        cy.findByText("Default value").next().click();
+        clearFilter(index);
+      },
+    );
+  });
 
-        dateFilterSelector({
-          filterType: filter,
-          filterValue: value,
-        });
+  it(`should work when set as the default filter`, () => {
+    setFilter("Time", "Month and Year");
 
-        saveDashboard();
+    cy.findByText("Default value").next().click();
+    DateFilter.setMonthAndYear({
+      month: "October",
+      year: "2017",
+    });
 
-        cy.get(".Card").within(() => {
-          cy.contains(representativeResult);
-        });
-      });
+    cy.findByText("Select…").click();
+    popover().contains("Month and Year").click();
+    saveDashboard();
+
+    // The default value should immediately be applied
+    cy.get(".Card").within(() => {
+      cy.contains("Hudson Borer");
     });
-  },
-);
-
-function getQuestionDetails(filter) {
-  return {
-    name: "SQL with Field Filter",
-    native: {
-      query:
-        "select PEOPLE.NAME, PEOPLE.CREATED_AT from people where {{filter}} limit 10",
-      "template-tags": {
-        filter: {
-          id: "7136f057-cfa6-e6fb-40c1-02046a1df9fb",
-          name: "filter",
-          "display-name": "Filter",
-          type: "dimension",
-          dimension: ["field", PEOPLE.CREATED_AT, null],
-          "widget-type": filter,
-        },
-      },
-    },
-  };
-}
+
+    // Make sure we can override the default value
+    cy.findByText("October, 2017").click();
+    popover().contains("August").click();
+    cy.findByText("Oda Brakus");
+  });
+});
 
 function dateFilterSelector({ filterType, filterValue } = {}) {
   switch (filterType) {
@@ -125,3 +117,8 @@ function dateFilterSelector({ filterType, filterValue } = {}) {
       throw new Error("Wrong filter type!");
   }
 }
+
+function clearFilter(index) {
+  filterWidget().eq(index).find(".Icon-close").click();
+  cy.wait("@dashcardQuery2");
+}

frontend/test/metabase/scenarios/dashboard-filters/helpers/e2e-dashboard-filter-sql-data-objects.js

+import { SAMPLE_DATABASE } from "__support__/e2e/cypress_sample_database";
+
+const { PEOPLE } = SAMPLE_DATABASE;
+
 export const DASHBOARD_SQL_TEXT_FILTERS = {
   Dropdown: {
     sqlFilter: "string/=",
@@ -135,3 +139,68 @@ export const DASHBOARD_SQL_DATE_FILTERS = {
     representativeResult: "Hudson Borer",
   },
 };
+
+export const questionDetails = {
+  name: "SQL with Field Filters",
+  native: {
+    query:
+      "  select PEOPLE.NAME, PEOPLE.CREATED_AT from people where true\n  [[AND {{monthyear}}]]\n  [[AND {{quarteryear}}]]\n  [[AND {{single}}]]\n  [[AND {{range}}]]\n  [[AND {{relative}}]]\n  [[AND {{date}}]]\n  limit 10",
+    "template-tags": {
+      monthyear: {
+        default: null,
+        dimension: ["field", PEOPLE.CREATED_AT, null],
+        "display-name": "Month and Year",
+        id: "5e40619a-34ff-426d-a5b8-251defe355e5",
+        name: "monthyear",
+        type: "dimension",
+        "widget-type": "date/month-year",
+      },
+      quarteryear: {
+        default: null,
+        dimension: ["field", PEOPLE.CREATED_AT, null],
+        "display-name": "Quarter and Year",
+        id: "1f4ddbaf-e071-7be3-ce5d-fdc5b4f62ab9",
+        name: "quarteryear",
+        type: "dimension",
+        "widget-type": "date/quarter-year",
+      },
+      single: {
+        default: null,
+        dimension: ["field", PEOPLE.CREATED_AT, null],
+        "display-name": "Single Date",
+        id: "726fd574-ed18-5b06-4d9d-4f901ef3378a",
+        name: "single",
+        type: "dimension",
+        "widget-type": "date/single",
+      },
+      range: {
+        default: null,
+        dimension: ["field", PEOPLE.CREATED_AT, null],
+        "display-name": "Date Range",
+        id: "f4ed832a-8882-d25a-1517-95a7ac478660",
+        name: "range",
+        type: "dimension",
+        "widget-type": "date/range",
+      },
+      relative: {
+        default: null,
+        dimension: ["field", PEOPLE.CREATED_AT, null],
+        "display-name": "Relative Date",
+        id: "4a6c70c8-8b39-7058-5b4e-7a7ede920fca",
+        name: "relative",
+        type: "dimension",
+        "widget-type": "date/relative",
+      },
+
+      date: {
+        default: null,
+        dimension: ["field", PEOPLE.CREATED_AT, null],
+        "display-name": "All Options",
+        id: "04171d50-5901-edaf-fba1-9b14211e965e",
+        name: "date",
+        type: "dimension",
+        "widget-type": "date/all-options",
+      },
+    },
+  },
+};