e2e: Rewrite dashboard card resizing spec (#46212)

* Use function helpers

* Only assert the resize down

* Refactor repro 31701

* Remove flaky tag

* Better organize describe blocks

* Move custom `requestTimeout` config to the common block for resizing tests

e2e/test/scenarios/dashboard-cards/dashboard-card-resizing.cy.spec.js

@@ -10,6 +10,8 @@ import {
   restore,
   saveDashboard,
   visitDashboard,
+  createQuestion,
+  createDashboard,
 } from "e2e/support/helpers";
 import { GRID_WIDTH } from "metabase/lib/dashboard_grid";
 
@@ -196,20 +198,20 @@ const viewports = [
   [1440, 800],
 ];
 
-describe("scenarios > dashboard card resizing", { tags: "@flaky" }, () => {
-  beforeEach(() => {
-    restore();
-    cy.signInAsAdmin();
-  });
+describe(
+  "scenarios > dashboard card resizing",
+  { requestTimeout: 15000 },
+  () => {
+    beforeEach(() => {
+      restore();
+      cy.signInAsAdmin();
+    });
 
-  it(
-    "should display all visualization cards with their default sizes",
-    { requestTimeout: 15000 },
-    () => {
+    it("should display all visualization cards with their default sizes", () => {
       TEST_QUESTIONS.forEach(question => {
-        cy.createQuestion(question);
+        createQuestion(question);
       });
-      cy.createDashboard().then(({ body: { id: dashId } }) => {
+      createDashboard().then(({ body: { id: dashId } }) => {
         visitDashboard(dashId);
 
         cy.findByTestId("dashboard-header").within(() => {
@@ -250,44 +252,31 @@ describe("scenarios > dashboard card resizing", { tags: "@flaky" }, () => {
           });
         });
       });
-    },
-  );
+    });
 
-  it(
-    "should not allow cards to be resized smaller than min height",
-    { requestTimeout: 15000 },
-    () => {
+    it("should not allow cards to be resized smaller than min height", () => {
       const cardIds = [];
       TEST_QUESTIONS.forEach(question => {
-        cy.createQuestion(question).then(({ body: { id } }) => {
+        createQuestion(question).then(({ body: { id } }) => {
           cardIds.push(id);
         });
       });
-      cy.createDashboard().then(({ body: { id: dashId } }) => {
+      createDashboard().then(({ body: { id: dashId } }) => {
         cy.request("PUT", `/api/dashboard/${dashId}`, {
           dashcards: cardIds.map((cardId, index) => ({
             id: index,
             card_id: cardId,
-            row: index * 2,
+            row: index * 10,
             col: 0,
-            size_x: 2,
-            size_y: 2,
+            size_x: 18,
+            size_y: 10,
           })),
         });
         visitDashboard(dashId);
         editDashboard();
 
         cy.request("GET", `/api/dashboard/${dashId}`).then(({ body }) => {
-          const dashcards = body.dashcards;
-          dashcards.forEach(({ card }, index) => {
-            resizeDashboardCard({
-              card: getDashboardCard(index),
-              x: getDefaultSize(card.display).width * 100,
-              y: getDefaultSize(card.display).height * 100,
-            });
-          });
-
-          dashcards.forEach(({ card }, index) => {
+          body.dashcards.forEach(({ card }, index) => {
             resizeDashboardCard({
               card: getDashboardCard(index),
               x: -getDefaultSize(card.display).width * 200,
@@ -306,86 +295,87 @@ describe("scenarios > dashboard card resizing", { tags: "@flaky" }, () => {
           });
         });
       });
-    },
-  );
-
-  describe("metabase#31701 - preventing link dashboard card overflows", () => {
-    viewports.forEach(([width, height]) => {
-      describe(`Testing on resolution ${width} x ${height}`, () => {
-        beforeEach(() => {
-          restore();
-          cy.signInAsAdmin();
-          cy.intercept("GET", "/api/search*").as("search");
-          cy.viewport(width, height);
-        });
+    });
+  },
+);
 
-        it("should not allow links to overflow when editing dashboard", () => {
-          createLinkDashboard();
-          const entityCard = getDashboardCard(0);
-          const customCard = getDashboardCard(1);
+describe("issue 31701", () => {
+  const entityCard = () => getDashboardCard(0);
+  const customCard = () => getDashboardCard(1);
 
-          const editLinkContainer = cy.findByTestId("entity-edit-display-link");
-          const linkContainer = cy.findByTestId("custom-edit-text-link");
+  const editEntityLinkContainer = () =>
+    cy.findByTestId("entity-edit-display-link");
+  const editCustomLinkContainer = () =>
+    cy.findByTestId("custom-edit-text-link");
 
-          assertLinkCardOverflow(editLinkContainer, entityCard);
-          assertLinkCardOverflow(linkContainer, customCard);
-        });
+  const viewEntityLinkContainer = () =>
+    cy.findByTestId("entity-view-display-link");
+  const viewCustomLinkContainer = () =>
+    cy.findByTestId("custom-view-text-link");
 
-        it("should not allow links to overflow when viewing saved dashboard", () => {
-          createLinkDashboard();
-          saveDashboard();
-          const entityCard = getDashboardCard(0);
-          const customCard = getDashboardCard(1);
+  beforeEach(() => {
+    restore();
+    cy.signInAsAdmin();
 
-          const editLinkContainer = cy.findByTestId("entity-view-display-link");
-          const linkContainer = cy.findByTestId("custom-view-text-link");
+    createQuestion({
+      name: TEST_QUESTION_NAME,
+      query: {
+        "source-table": ORDERS_ID,
+      },
+    });
 
-          assertLinkCardOverflow(editLinkContainer, entityCard);
-          assertLinkCardOverflow(linkContainer, customCard);
-        });
-      });
+    createDashboard({
+      name: TEST_DASHBOARD_NAME,
+    }).then(({ body: { id: dashId } }) => {
+      visitDashboard(dashId);
     });
-  });
-});
 
-const createLinkDashboard = () => {
-  cy.createQuestion({
-    name: TEST_QUESTION_NAME,
-    query: {
-      "source-table": ORDERS_ID,
-    },
+    editDashboard();
+
+    cy.log("Add first link card (connected to an entity");
+    cy.findByLabelText("Add link card").click();
+    getDashboardCard(0).as("entityCard").click().type(TEST_QUESTION_NAME);
+    popover()
+      .findAllByTestId("search-result-item-name")
+      .first()
+      .trigger("click");
+
+    cy.log("Add second link card (text only)");
+    cy.findByLabelText("Add link card").click();
+    getDashboardCard(1)
+      .as("customCard")
+      .click()
+      .type(TEST_QUESTION_NAME)
+      .realPress("Tab");
   });
 
-  cy.createDashboard({
-    name: TEST_DASHBOARD_NAME,
-  }).then(({ body: { id: dashId } }) => {
-    visitDashboard(dashId);
-  });
+  it("should prevent link dashboard card overflows (metabase#31701)", () => {
+    cy.log("when editing dashboard");
+    viewports.forEach(([width, height]) => {
+      cy.log(`Testing on resolution ${width} x ${height}`);
+      cy.viewport(width, height);
 
-  editDashboard();
-  cy.icon("link").click();
-  cy.icon("link").click();
+      assertLinkCardOverflow(editEntityLinkContainer(), entityCard());
+      assertLinkCardOverflow(editCustomLinkContainer(), customCard());
+    });
 
-  const entityCard = getDashboardCard(0);
-  const customCard = getDashboardCard(1);
+    saveDashboard();
 
-  entityCard.click().type(TEST_QUESTION_NAME);
-  popover().within(() => {
-    cy.findAllByTestId("search-result-item-name").first().trigger("click");
-  });
-  customCard.click().type(TEST_QUESTION_NAME);
+    cy.log("when viewing a saved dashboard");
+    viewports.forEach(([width, height]) => {
+      cy.log(`Testing on resolution ${width} x ${height}`);
+      cy.viewport(width, height);
 
-  closeLinkSearchDropdown();
-};
+      assertLinkCardOverflow(viewEntityLinkContainer(), entityCard());
+      assertLinkCardOverflow(viewCustomLinkContainer(), customCard());
+    });
+  });
+});
 
-const assertLinkCardOverflow = (card1, card2) => {
-  card1.then(linkElem => {
-    card2.then(dashCardElem => {
+const assertLinkCardOverflow = (link, card) => {
+  link.then(linkElem => {
+    card.then(dashCardElem => {
       expect(linkElem[0].scrollHeight).to.eq(dashCardElem[0].scrollHeight);
     });
   });
 };
-
-const closeLinkSearchDropdown = () => {
-  cy.findByTestId("dashboard-parameters-and-cards").click(0, 0);
-};