[E2E] Optimize looping logic in tests for dashboard text/category filters (#24428)

* Optimize looping logic for GUI dashboard text/category filters
* Optimize looping logic for SQL dashboard text/category filters

- 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-sql-text-category.cy.spec.js

@@ -9,84 +9,83 @@ import {
   visitDashboard,
 } from "__support__/e2e/helpers";
 
-import { DASHBOARD_SQL_TEXT_FILTERS } from "./helpers/e2e-dashboard-filter-sql-data-objects";
+import {
+  DASHBOARD_SQL_TEXT_FILTERS,
+  questionDetails,
+} from "./dashboard-filters-sql-text-category";
 import { applyFilterByType } from "../native-filters/helpers/e2e-field-filter-helpers";
 
-import { SAMPLE_DATABASE } from "__support__/e2e/cypress_sample_database";
-
-const { PRODUCTS } = SAMPLE_DATABASE;
-
-Object.entries(DASHBOARD_SQL_TEXT_FILTERS).forEach(
-  ([filter, { value, representativeResult, sqlFilter }]) => {
-    describe("scenarios > dashboard > filters > SQL > text/category", () => {
-      beforeEach(() => {
-        restore();
-        cy.signInAsAdmin();
+describe("scenarios > dashboard > filters > SQL > text/category", () => {
+  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();
+  });
 
-        editDashboard();
-        setFilter("Text or Category", filter);
+  it(`should work when set through the filter widget`, () => {
+    Object.entries(DASHBOARD_SQL_TEXT_FILTERS).forEach(([filter]) => {
+      cy.log(`Make sure we can connect ${filter} filter`);
+      setFilter("Text or Category", filter);
 
-        cy.findByText("Select…").click();
-        popover().contains("Filter").click();
-      });
+      cy.findByText("Select…").click();
+      popover().contains(filter).click();
+    });
 
-      it(`should work for "${filter}" when set through the filter widget`, () => {
-        saveDashboard();
+    saveDashboard();
 
-        filterWidget().click();
+    Object.entries(DASHBOARD_SQL_TEXT_FILTERS).forEach(
+      ([filter, { value, representativeResult }], index) => {
+        filterWidget().eq(index).click();
         applyFilterByType(filter, 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 and when that filter is removed (metabase#20493)`, () => {
-        cy.findByText("Default value").next().click();
+        clearFilter(index);
+      },
+    );
+  });
 
-        applyFilterByType(filter, value);
+  it(`should work when set as the default filter and when that filter is removed (metabase#20493)`, () => {
+    setFilter("Text or Category", "Dropdown");
 
-        saveDashboard();
+    cy.findByText("Select…").click();
+    popover().contains("Dropdown").click();
 
-        cy.get(".Card").within(() => {
-          cy.contains(representativeResult);
-        });
+    cy.findByText("Default value").next().click();
 
-        filterWidget().find(".Icon-close").click();
+    applyFilterByType("Dropdown", "Gizmo");
 
-        cy.url().should("not.include", value);
+    saveDashboard();
 
-        cy.findByText("Rustic Paper Wallet");
-      });
+    cy.get(".Card").within(() => {
+      cy.contains("Rustic Paper Wallet");
     });
-  },
-);
-
-function getQuestionDetails(filter) {
-  return {
-    name: "SQL with Field Filter",
-    native: {
-      query: "select * from PRODUCTS where {{filter}}",
-      "template-tags": {
-        filter: {
-          id: "e05b9e58-3c51-676d-7334-4c2543709094",
-          name: "filter",
-          "display-name": "Filter",
-          type: "dimension",
-          dimension: ["field", PRODUCTS.CATEGORY, null],
-          "widget-type": filter,
-        },
-      },
-    },
-  };
+
+    filterWidget().find(".Icon-close").click();
+
+    cy.url().should("not.include", "Gizmo");
+
+    filterWidget().click();
+
+    applyFilterByType("Dropdown", "Doohickey");
+
+    cy.findByText("Rustic Paper Wallet").should("not.exist");
+  });
+});
+
+function clearFilter(index) {
+  filterWidget().eq(index).find(".Icon-close").click();
+  cy.wait("@dashcardQuery2");
 }

frontend/test/metabase/scenarios/dashboard-filters/dashboard-filters-sql-text-category.js

+import { SAMPLE_DATABASE } from "__support__/e2e/cypress_sample_database";
+
+const { PRODUCTS } = SAMPLE_DATABASE;
+
+export const DASHBOARD_SQL_TEXT_FILTERS = {
+  Dropdown: {
+    sqlFilter: "string/=",
+    value: "Gizmo",
+    representativeResult: "Rustic Paper Wallet",
+  },
+  "Is not": {
+    sqlFilter: "string/!=",
+    value: "Gadget",
+    representativeResult: "Rustic Paper Wallet",
+  },
+  Contains: {
+    sqlFilter: "string/contains",
+    value: "oo",
+    representativeResult: "Small Marble Shoes",
+  },
+  "Does not contain": {
+    sqlFilter: "string/does-not-contain",
+    value: "oo",
+    representativeResult: "Rustic Paper Wallet",
+  },
+  "Starts with": {
+    sqlFilter: "string/starts-with",
+    value: "G",
+    representativeResult: "Rustic Paper Wallet",
+  },
+  "Ends with": {
+    sqlFilter: "string/ends-with",
+    value: "y",
+    representativeResult: "Small Marble Shoes",
+  },
+};
+
+export const questionDetails = {
+  name: "SQL with Field Filter",
+  native: {
+    query:
+      "select * from PRODUCTS where true \n[[AND {{dropdown}}]] \n[[AND {{not}}]] \n[[AND {{contains}}]] \n[[AND {{doesntcontain}}]] \n[[AND {{startswith}}]] \n[[AND {{endswith}}]]",
+    "template-tags": {
+      dropdown: {
+        id: "bcd8b984-2e16-ffa4-82fc-2895ac8570f9",
+        name: "dropdown",
+        "display-name": "Dropdown",
+        type: "dimension",
+        dimension: ["field", PRODUCTS.CATEGORY, null],
+        "widget-type": "string/=",
+        default: null,
+      },
+      not: {
+        id: "c057de9d-dbba-3e93-1882-4409fa00629c",
+        name: "not",
+        "display-name": "Is not",
+        type: "dimension",
+        dimension: ["field", PRODUCTS.CATEGORY, null],
+        "widget-type": "string/!=",
+        default: null,
+      },
+      contains: {
+        id: "df86d80a-6575-996d-fd40-d2a4b8eb2a17",
+        name: "contains",
+        "display-name": "Contains",
+        type: "dimension",
+        dimension: ["field", PRODUCTS.CATEGORY, null],
+        "widget-type": "string/contains",
+        default: null,
+      },
+      doesntcontain: {
+        id: "ffe304fc-6c7b-6e70-d49d-33c91883e592",
+        name: "doesntcontain",
+        "display-name": "Does not contain",
+        type: "dimension",
+        dimension: ["field", PRODUCTS.CATEGORY, null],
+        "widget-type": "string/does-not-contain",
+        default: null,
+      },
+      startswith: {
+        id: "80e0894d-015a-ca28-8c4a-3b2ac4759507",
+        name: "startswith",
+        "display-name": "Starts with",
+        type: "dimension",
+        dimension: ["field", PRODUCTS.CATEGORY, null],
+        "widget-type": "string/starts-with",
+        default: null,
+      },
+      endswith: {
+        id: "25d5d9cf-bb95-2d56-507d-79d0d04fb314",
+        name: "endswith",
+        "display-name": "Ends with",
+        type: "dimension",
+        dimension: ["field", PRODUCTS.CATEGORY, null],
+        "widget-type": "string/ends-with",
+        default: null,
+      },
+    },
+  },
+};

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

@@ -8,48 +8,64 @@ import {
   visitDashboard,
 } from "__support__/e2e/helpers";
 
-import { DASHBOARD_TEXT_FILTERS } from "./helpers/e2e-dashboard-filter-data-objects";
+import { DASHBOARD_TEXT_FILTERS } from "./dashboard-filters-text-category";
 import { applyFilterByType } from "../native-filters/helpers/e2e-field-filter-helpers";
 
-Object.entries(DASHBOARD_TEXT_FILTERS).forEach(
-  ([filter, { value, representativeResult }]) => {
-    describe("scenarios > dashboard > filters > text/category", () => {
-      beforeEach(() => {
-        restore();
-        cy.signInAsAdmin();
+describe("scenarios > dashboard > filters > text/category", () => {
+  beforeEach(() => {
+    restore();
+    cy.signInAsAdmin();
 
-        visitDashboard(1);
+    visitDashboard(1);
 
-        editDashboard();
-        setFilter("Text or Category", filter);
+    editDashboard();
+  });
 
-        cy.findByText("Select…").click();
-        popover().contains("Source").click();
-      });
+  it(`should work when set through the filter widget`, () => {
+    Object.entries(DASHBOARD_TEXT_FILTERS).forEach(([filter]) => {
+      cy.log(`Make sure we can connect ${filter} filter`);
+      setFilter("Text or Category", filter);
 
-      it(`should work for "${filter}" when set through the filter widget`, () => {
-        saveDashboard();
+      cy.findByText("Select…").click();
+      popover().contains("Source").click();
+    });
 
-        filterWidget().click();
+    saveDashboard();
 
+    Object.entries(DASHBOARD_TEXT_FILTERS).forEach(
+      ([filter, { value, representativeResult }], index) => {
+        filterWidget().eq(index).click();
         applyFilterByType(filter, 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);
+      },
+    );
+  });
 
-        applyFilterByType(filter, value);
+  it(`should work when set as the default filter`, () => {
+    setFilter("Text or Category", "Dropdown");
 
-        saveDashboard();
+    cy.findByText("Select…").click();
+    popover().contains("Source").click();
 
-        cy.get(".Card").within(() => {
-          cy.contains(representativeResult);
-        });
-      });
+    cy.findByText("Default value").next().click();
+
+    applyFilterByType("Dropdown", "Organic");
+
+    saveDashboard();
+
+    cy.get(".Card").within(() => {
+      cy.contains("39.58");
     });
-  },
-);
+  });
+});
+
+function clearFilter(index = 0) {
+  filterWidget().eq(index).find(".Icon-close").click();
+  cy.wait("@dashcardQuery1");
+}

frontend/test/metabase/scenarios/dashboard-filters/dashboard-filters-text-category.js

+export const DASHBOARD_TEXT_FILTERS = {
+  Dropdown: {
+    value: "Organic",
+    representativeResult: "39.58",
+  },
+  "Is not": {
+    value: "Organic",
+    representativeResult: "37.65",
+  },
+  Contains: {
+    value: "oo",
+    representativeResult: "148.23",
+  },
+  "Does not contain": {
+    value: "oo",
+    representativeResult: "37.65",
+  },
+  "Starts with": {
+    value: "A",
+    representativeResult: "85.72",
+  },
+  "Ends with": {
+    value: "e",
+    representativeResult: "47.68",
+  },
+};

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

@@ -62,30 +62,3 @@ export const DASHBOARD_LOCATION_FILTERS = {
     representativeResult: "115.24",
   },
 };
-
-export const DASHBOARD_TEXT_FILTERS = {
-  Dropdown: {
-    value: "Organic",
-    representativeResult: "39.58",
-  },
-  "Is not": {
-    value: "Organic",
-    representativeResult: "37.65",
-  },
-  Contains: {
-    value: "oo",
-    representativeResult: "148.23",
-  },
-  "Does not contain": {
-    value: "oo",
-    representativeResult: "37.65",
-  },
-  "Starts with": {
-    value: "A",
-    representativeResult: "85.72",
-  },
-  "Ends with": {
-    value: "e",
-    representativeResult: "47.68",
-  },
-};

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

@@ -2,39 +2,6 @@ import { SAMPLE_DATABASE } from "__support__/e2e/cypress_sample_database";
 
 const { PEOPLE } = SAMPLE_DATABASE;
 
-export const DASHBOARD_SQL_TEXT_FILTERS = {
-  Dropdown: {
-    sqlFilter: "string/=",
-    value: "Gizmo",
-    representativeResult: "Rustic Paper Wallet",
-  },
-  "Is not": {
-    sqlFilter: "string/!=",
-    value: "Gadget",
-    representativeResult: "Rustic Paper Wallet",
-  },
-  Contains: {
-    sqlFilter: "string/contains",
-    value: "oo",
-    representativeResult: "Small Marble Shoes",
-  },
-  "Does not contain": {
-    sqlFilter: "string/does-not-contain",
-    value: "oo",
-    representativeResult: "Rustic Paper Wallet",
-  },
-  "Starts with": {
-    sqlFilter: "string/starts-with",
-    value: "G",
-    representativeResult: "Rustic Paper Wallet",
-  },
-  "Ends with": {
-    sqlFilter: "string/ends-with",
-    value: "y",
-    representativeResult: "Small Marble Shoes",
-  },
-};
-
 export const DASHBOARD_SQL_LOCATION_FILTERS = {
   Dropdown: {
     sqlFilter: "string/=",