Rework back to dashboard e2e test to make it more real world and less flaky (#32315)

* Rework e2e test to make it less flaky

* Fixup

* Another attempt to improve test

e2e/test/scenarios/dashboard/dashboard-back-navigation.cy.spec.js

@@ -261,59 +261,79 @@ describe(
       );
     });
 
-    it("should restore a dashboard with loading cards and re-fetch query data", () => {
+    it("should preserve filter value when navigating between the dashboard and the question without re-fetch", () => {
+      // could be a regular dashboard with card and filters
       createDashboardWithSlowCard();
+
       cy.get("@dashboardId").then(dashboardId => {
-        cy.visit({
-          url: `/dashboard/${dashboardId}`,
-          qs: { sleep: 60 },
-        });
+        cy.visit(`/dashboard/${dashboardId}`);
+        cy.wait("@dashboard");
+        cy.wait("@dashcardQuery");
       });
-      cy.wait("@dashboard");
 
+      // initial loading of the dashboard with card
+      cy.get("@dashcardQuery.all").should("have.length", 1);
+
+      filterWidget().findByPlaceholderText("sleep").type("1{enter}");
+
+      cy.wait("@dashcardQuery");
+
+      // we applied filter, so the data is requested again
+      cy.get("@dashcardQuery.all").should("have.length", 2);
+
+      cy.log("drill down to the question");
       getDashboardCard().within(() => {
-        cy.findByTestId("loading-spinner").should("be.visible");
         cy.findByText("Sleep card").click();
-        cy.wait("@card");
       });
 
-      queryBuilderHeader().within(() => {
-        cy.findByLabelText("Back to Sleep dashboard").click();
-        cy.get("@dashboard.all").should("have.length", 1);
-        cy.get("@dashcardQuery.all").should("have.length", 2);
-      });
+      filterWidget().findByPlaceholderText("sleep").should("have.value", "1");
+      // if we do not wait for this query, it's canceled and re-trigered on dashboard
+      cy.wait("@card");
+
+      cy.log("navigate back to the dashboard");
+      queryBuilderHeader().findByLabelText("Back to Sleep dashboard").click();
 
       getDashboardCard().within(() => {
         cy.findByText("Sleep card").should("be.visible");
       });
-    });
 
-    it("should preserve filter value when navigating between the dashboard and the question", () => {
-      createDashboardWithSlowCard();
-      cy.get("@dashboardId").then(visitDashboard);
-
-      cy.get("@dashcardQuery.all").should("have.length", 1);
-
-      filterWidget().findByPlaceholderText("sleep").type("5{enter}");
+      filterWidget().findByPlaceholderText("sleep").should("have.value", "1");
 
+      // cached data is used, no re-fetching should happen
       cy.get("@dashcardQuery.all").should("have.length", 2);
+    });
+
+    // be careful writing a test after this one. tests order matters.
+    // cypress will not cancel the request with slow response after the test is finished
+    // so it will affect interception of @dashcardQuery and mess up the number of requests
+    it("should restore a dashboard with loading cards and re-fetch query data", () => {
+      createDashboardWithSlowCard();
+      cy.get("@dashboardId").then(dashboardId => {
+        cy.visit({
+          url: `/dashboard/${dashboardId}`,
+          qs: { sleep: 60 },
+        });
+      });
+      cy.wait("@dashboard");
 
       getDashboardCard().within(() => {
+        cy.findByTestId("loading-spinner").should("be.visible");
         cy.findByText("Sleep card").click();
         cy.wait("@card");
       });
 
-      filterWidget().findByPlaceholderText("sleep").should("have.value", "5");
-
-      queryBuilderHeader().findByLabelText("Back to Sleep dashboard").click();
+      queryBuilderHeader().within(() => {
+        cy.findByLabelText("Back to Sleep dashboard").click();
+      });
 
       getDashboardCard().within(() => {
         cy.findByText("Sleep card").should("be.visible");
       });
 
-      cy.log("Dashcard data is re-requested");
-      cy.get("@dashcardQuery.all").should("have.length", 3);
-      filterWidget().findByPlaceholderText("sleep").should("have.value", "5");
+      // dashboard is taken from the cache, no re-fetch
+      cy.get("@dashboard.all").should("have.length", 1);
+      // the query is triggered second time as first one never loaded - no value in the cache
+      cy.get("@dashcardQuery.all").should("have.length", 2);
     });
   },
 );