[E2E] Completely rewrite and reinforce a `visitDashboard` helper (#21801)

frontend/test/__support__/e2e/helpers/e2e-misc-helpers.js

@@ -133,28 +133,80 @@ export function visitQuestion(id) {
 }
 
 /**
- * Visit a dashboard and wait for its query to load.
+ * Visit a dashboard and wait for the related queries to load.
  *
- * NOTE: Avoid using this helper if you need to explicitly wait for
- * and assert on the individual dashcard queries.
- *
- * @param {number} id
+ * @param {number} dashboard_id
  */
-export function visitDashboard(id) {
-  cy.intercept("GET", `/api/dashboard/${id}`).as("getDashboard");
-  // The very last request when visiting dashboard always checks the collection it is in.
-  // That is - IF user has the permission to view that dashboard!
-  cy.intercept("GET", `/api/collection/*`).as("getParentCollection");
-
-  cy.visit(`/dashboard/${id}`);
-
-  // If users doesn't have permissions to even view the dashboard,
-  // the last request for them would be `getDashboard`.
-  cy.wait("@getDashboard").then(({ response: { statusCode } }) => {
-    canViewDashboard(statusCode) && cy.wait("@getParentCollection");
+export function visitDashboard(dashboard_id) {
+  // Some users will not have permissions for this request
+  cy.request({
+    method: "GET",
+    url: `/api/dashboard/${dashboard_id}`,
+    // That's why we have to ignore failures
+    failOnStatusCode: false,
+  }).then(({ status, body: { ordered_cards } }) => {
+    const dashboardAlias = "getDashboard" + dashboard_id;
+
+    cy.intercept("GET", `/api/dashboard/${dashboard_id}`).as(dashboardAlias);
+
+    const canViewDashboard = hasAccess(status);
+    const validQuestions = dashboardHasQuestions(ordered_cards);
+
+    if (canViewDashboard && validQuestions) {
+      // If dashboard has valid questions (GUI or native),
+      // we need to alias each request and wait for their reponses
+      const aliases = validQuestions.map(
+        ({ id, card_id, card: { display } }) => {
+          const baseUrl =
+            display === "pivot"
+              ? `/api/dashboard/pivot/${dashboard_id}`
+              : `/api/dashboard/${dashboard_id}`;
+
+          const interceptUrl = `${baseUrl}/dashcard/${id}/card/${card_id}/query`;
+
+          const alias = "dashcardQuery" + id;
+
+          cy.intercept("POST", interceptUrl).as(alias);
+
+          return `@${alias}`;
+        },
+      );
+
+      cy.visit(`/dashboard/${dashboard_id}`);
+
+      cy.wait(aliases);
+    } else {
+      // For a dashboard:
+      //  - without questions (can be empty or markdown only) or
+      //  - the one which user doesn't have access to
+      // the last request will always be `GET /api/dashboard/:dashboard_id`
+      cy.visit(`/dashboard/${dashboard_id}`);
+
+      cy.wait(`@${dashboardAlias}`);
+    }
   });
 }
 
-function canViewDashboard(statusCode) {
+function hasAccess(statusCode) {
   return statusCode !== 403;
 }
+
+function dashboardHasQuestions(cards) {
+  if (Array.isArray(cards) && cards.length > 0) {
+    const questions = cards
+      // Filter out markdown cards
+      .filter(({ card_id }) => {
+        return card_id !== null;
+      })
+      // Filter out cards which the current user is not allowed to see
+      .filter(({ card }) => {
+        return card.dataset_query !== undefined;
+      });
+
+    const isPopulated = questions.length > 0;
+
+    return isPopulated && questions;
+  } else {
+    return false;
+  }
+}

frontend/test/__support__/e2e/integration/visit-dashboard.cy.spec.js

+import { restore, visitDashboard } from "../cypress";
+import { USERS } from "../cypress_data";
+
+import { setup } from "./visit-dashboard";
+
+describe(`visitDashboard e2e helper`, () => {
+  Object.keys(Cypress._.omit(USERS, "sandboxed")).forEach(user => {
+    context(`${user.toUpperCase()}`, () => {
+      beforeEach(() => {
+        restore();
+        cy.signInAsAdmin();
+
+        setup();
+
+        if (user !== "admin") {
+          cy.signIn(user);
+        }
+      });
+
+      it("should work on an empty dashboard", () => {
+        cy.get("@emptyDashboard").then(id => {
+          visitDashboard(id);
+        });
+      });
+
+      it("should work on a dashboard with markdown card", () => {
+        cy.get("@markdownOnly").then(id => {
+          visitDashboard(id);
+        });
+      });
+
+      it("should work on a dashboard with a model", () => {
+        cy.get("@modelDashboard").then(id => {
+          visitDashboard(id);
+        });
+      });
+
+      it("should work on a dashboard with a GUI question", () => {
+        cy.get("@guiDashboard").then(id => {
+          visitDashboard(id);
+        });
+      });
+
+      it("should work on a dashboard with a native question", () => {
+        cy.get("@nativeDashboard").then(id => {
+          visitDashboard(id);
+        });
+      });
+
+      it("should work on a dashboard with multiple cards (including markdown, models, pivot tables, GUI and native)", () => {
+        cy.get("@multiDashboard").then(id => {
+          visitDashboard(id);
+        });
+      });
+    });
+  });
+});

frontend/test/__support__/e2e/integration/visit-dashboard.js

+import { SAMPLE_DATABASE } from "__support__/e2e/cypress_sample_database";
+
+const { PEOPLE_ID, PRODUCTS_ID, PRODUCTS } = SAMPLE_DATABASE;
+
+const markdownCard = {
+  virtual_card: {
+    name: null,
+    display: "text",
+    visualization_settings: {},
+    dataset_query: {},
+    archived: false,
+  },
+  text: "# Our Awesome Analytics",
+  "text.align_vertical": "middle",
+  "text.align_horizontal": "center",
+};
+
+const nativeQuestionDetails = {
+  name: "Native Question",
+  native: {
+    query: "select count(*) from orders limit 5",
+  },
+  display: "scalar",
+  // Put native question inside admin's personal collection
+  collection_id: 1,
+};
+
+const questionDetails = {
+  name: "GUI Question",
+  query: { "source-table": PEOPLE_ID },
+};
+
+const modelDetails = {
+  name: "GUI Model",
+  query: { "source-table": PRODUCTS_ID },
+  dataset: true,
+};
+
+const pivotTable = {
+  name: "Pivot Table",
+  query: {
+    "source-table": PRODUCTS_ID,
+    aggregation: [["count"]],
+    breakout: [
+      ["datetime-field", ["field-id", PRODUCTS.CREATED_AT], "year"],
+      ["field-id", PRODUCTS.CATEGORY],
+    ],
+  },
+  display: "pivot",
+};
+
+export function setup() {
+  addEmptyDashboard("Empty", "emptyDashboard");
+
+  addMarkdownDashboard("Dashboard with markdown text card", "markdownOnly");
+
+  addModelDashboard("Dashboard with a model", "modelDashboard");
+
+  addGuiDashboard("Dashboard with GUI question", "guiDashboard");
+
+  addNativeDashboard("Dashboard with native question", "nativeDashboard");
+
+  addMultiDashboard(
+    "Dashboard with multiple cards, including markdown",
+    "multiDashboard",
+  );
+}
+
+function addCardToDashboard({ card_id, dashboard_id, card } = {}) {
+  const url = `/api/dashboard/${dashboard_id}/cards`;
+
+  return cy
+    .request("POST", url, {
+      cardId: card_id,
+    })
+    .then(({ body: { id } }) => {
+      cy.request("PUT", url, {
+        cards: [
+          {
+            id,
+            card_id,
+            row: 0,
+            col: 0,
+            sizeX: 8,
+            sizeY: 8,
+            visualization_settings: {},
+            parameter_mappings: [],
+            ...card,
+          },
+        ],
+      });
+    });
+}
+
+function addEmptyDashboard(name, alias) {
+  return cy.createDashboard(name).then(({ body: { id } }) => {
+    cy.wrap(id).as(alias);
+  });
+}
+
+function addMarkdownDashboard(name, alias) {
+  return cy.createDashboard(name).then(({ body: { id: dashboard_id } }) => {
+    addCardToDashboard({
+      card_id: null,
+      dashboard_id,
+      card: {
+        row: 0,
+        col: 0,
+        // Full width markdown title
+        sizeX: 18,
+        sizeY: 2,
+        visualization_settings: markdownCard,
+      },
+    });
+
+    cy.wrap(dashboard_id).as(alias);
+  });
+}
+
+function addModelDashboard(name, alias) {
+  return cy
+    .createQuestionAndDashboard({
+      questionDetails: modelDetails,
+      dashboardDetails: { name },
+    })
+    .then(({ body: { dashboard_id } }) => {
+      cy.wrap(dashboard_id).as(alias);
+    });
+}
+
+function addGuiDashboard(name, alias) {
+  return cy
+    .createQuestionAndDashboard({
+      questionDetails,
+      dashboardDetails: { name },
+    })
+    .then(({ body: { dashboard_id } }) => {
+      cy.wrap(dashboard_id).as(alias);
+    });
+}
+
+function addNativeDashboard(name, alias) {
+  cy.createNativeQuestionAndDashboard({
+    questionDetails: nativeQuestionDetails,
+    dashboardDetails: { name },
+  }).then(({ body: { dashboard_id } }) => {
+    cy.wrap(dashboard_id).as(alias);
+  });
+}
+
+function addMultiDashboard(name, alias) {
+  return cy.createDashboard(name).then(({ body: { id: dashboard_id } }) => {
+    addCardToDashboard({
+      card_id: null,
+      dashboard_id,
+      card: {
+        row: 0,
+        col: 0,
+        // Full width markdown title
+        sizeX: 18,
+        sizeY: 2,
+        visualization_settings: markdownCard,
+      },
+    });
+
+    cy.createNativeQuestion(nativeQuestionDetails).then(
+      ({ body: { id: card_id } }) => {
+        addCardToDashboard({
+          card_id,
+          dashboard_id,
+          card: { row: 2, col: 0, sizeX: 9, sizeY: 8 },
+        });
+      },
+    );
+
+    cy.createQuestion(modelDetails).then(({ body: { id: card_id } }) => {
+      addCardToDashboard({
+        card_id,
+        dashboard_id,
+        card: { row: 2, col: 10, sizeX: 9, sizeY: 8 },
+      });
+    });
+
+    cy.createQuestion(questionDetails).then(({ body: { id: card_id } }) => {
+      addCardToDashboard({
+        card_id,
+        dashboard_id,
+        card: { row: 11, col: 0, sizeX: 12, sizeY: 8 },
+      });
+    });
+
+    cy.createQuestion(pivotTable).then(({ body: { id: card_id } }) => {
+      addCardToDashboard({
+        card_id,
+        dashboard_id,
+        card: { row: 11, col: 12, sizeX: 6, sizeY: 8 },
+      });
+    });
+
+    cy.wrap(dashboard_id).as(alias);
+  });
+}

frontend/test/metabase/scenarios/dashboard-filters/reproductions/13960-do-not-preserve-cleared-default-filter-on-refresh.cy.spec.js

@@ -79,9 +79,12 @@ describe("issue 13960", () => {
 
     cy.location("search").should("eq", "?category=&id=1");
 
+    cy.intercept("POST", "/api/dashboard/*/dashcard/*/card/*/query").as(
+      "dashcardQuery",
+    );
+
     cy.reload();
-    // Alias was previously defined in `visitDashboard()` helper function
-    cy.wait("@getParentCollection");
+    cy.wait("@dashcardQuery");
 
     cy.findByText("13960");
     cy.findAllByText("Doohickey").should("not.exist");

frontend/test/metabase/scenarios/question/reproductions/17514-ui-overlay.js

@@ -93,7 +93,6 @@ export function issue17514() {
         closeModal();
 
         saveDashboard();
-        cy.wait("@getDashboard");
 
         filterWidget().click();
         setAdHocFilter({ timeBucket: "years" });

frontend/test/metabase/scenarios/visualizations/drillthroughs/dash_drill.cy.spec.js

@@ -92,16 +92,6 @@ describe("scenarios > visualizations > drillthroughs > dash_drill", () => {
         }).then(({ body: { id: CARD_ID } }) => {
           cy.createDashboard({ name: DASHBOARD_NAME }).then(
             ({ body: { id: DASHBOARD_ID } }) => {
-              // Prepare to wait for this specific XHR:
-              // We need to do this because Cypress sees the string that is "card title" before card is fully rendered.
-              // That string then gets detached from DOM just prior to this XHR and gets re-rendered again inside a new DOM element.
-              // Cypress was complaining it cannot click on a detached element.
-
-              cy.intercept(
-                "POST",
-                `/api/dashboard/${DASHBOARD_ID}/dashcard/*/card/${CARD_ID}/query`,
-              ).as("dashCardQuery");
-
               // Add previously created question to the new dashboard
               cy.request("POST", `/api/dashboard/${DASHBOARD_ID}/cards`, {
                 cardId: CARD_ID,
@@ -112,8 +102,12 @@ describe("scenarios > visualizations > drillthroughs > dash_drill", () => {
               visitDashboard(DASHBOARD_ID);
               cy.findByText(DASHBOARD_NAME);
 
-              cy.wait("@dashCardQuery"); // wait for the title to be re-rendered before we can click on it
+              cy.intercept("POST", `/api/card/${CARD_ID}/query`).as(
+                "cardQuery",
+              );
+
               cy.findByText(CARD_NAME).click();
+              cy.wait("@cardQuery");
             },
           );
         });