#13832 Repro: Filters should use cached results after the first DB call [ci skip] (#14571)

frontend/test/__support__/cypress.js

@@ -232,6 +232,16 @@ export function createBasicAlert({ firstAlert, includeNormal } = {}) {
   cy.findByText("Let's set up your alert").should("not.exist");
 }
 
+export function expectedRouteCalls({ route_alias, calls } = {}) {
+  const requestsCount = alias =>
+    cy.state("requests").filter(req => req.alias === alias);
+  // It is hard and unreliable to assert that something didn't happen in Cypress
+  // This solution was the only one that worked out of all others proposed in this SO topic: https://stackoverflow.com/a/59302542/8815185
+  cy.get("@" + route_alias).then(() => {
+    expect(requestsCount(route_alias)).to.have.length(calls);
+  });
+}
+
 /*****************************************
  **            QA DATABASES             **
  ******************************************/

frontend/test/metabase/scenarios/dashboard/dashboard.cy.spec.js

@@ -6,6 +6,7 @@ import {
   signIn,
   signInAsAdmin,
   selectDashboardFilter,
+  expectedRouteCalls,
 } from "__support__/cypress";
 
 import { SAMPLE_DATASET } from "__support__/cypress_sample_dataset";
@@ -435,6 +436,76 @@ describe("scenarios > dashboard", () => {
     }
   });
 
+  it.skip("should cache filter results after the first DB call (metabase#13832)", () => {
+    // In this test we're using already present dashboard ("Orders in a dashboard")
+    const FILTER_ID = "d7988e02";
+
+    cy.log("**-- 1. Add filter to the dashboard --**");
+    cy.request("PUT", "/api/dashboard/1", {
+      parameters: [
+        {
+          id: FILTER_ID,
+          name: "Category",
+          slug: "category",
+          type: "category",
+        },
+      ],
+    });
+
+    cy.log("**-- 2. Connect filter to the existing card --**");
+    cy.request("PUT", "/api/dashboard/1/cards", {
+      cards: [
+        {
+          id: 1,
+          card_id: 1,
+          row: 0,
+          col: 0,
+          sizeX: 12,
+          sizeY: 8,
+          parameter_mappings: [
+            {
+              parameter_id: FILTER_ID,
+              card_id: 1,
+              target: [
+                "dimension",
+                [
+                  "fk->",
+                  ["field-id", ORDERS.PRODUCT_ID],
+                  ["field-id", PRODUCTS.CATEGORY],
+                ],
+              ],
+            },
+          ],
+          visualization_settings: {},
+        },
+      ],
+    });
+
+    cy.server();
+    cy.route(`/api/dashboard/1/params/${FILTER_ID}/values`).as("fetchFromDB");
+
+    cy.visit("/dashboard/1");
+
+    cy.get("fieldset")
+      .as("filterWidget")
+      .click();
+    expectedRouteCalls({ route_alias: "fetchFromDB", calls: 1 });
+
+    // Make sure all filters were fetched (should be cached after this)
+    ["Doohickey", "Gadget", "Gizmo", "Widget"].forEach(category => {
+      cy.findByText(category);
+    });
+
+    // Get rid of the popover
+    cy.findByText("Orders in a dashboard").click();
+
+    cy.log(
+      "**-- Clicking on the filter again should NOT send another query to the source DB again! Results should have been cached by now. --**",
+    );
+    cy.get("@filterWidget").click();
+    expectedRouteCalls({ route_alias: "fetchFromDB", calls: 1 });
+  });
+
   describe("revisions screen", () => {
     it("should open and close", () => {
       cy.visit("/dashboard/1");