Refactor pinned items e2e tests (#23462)

frontend/test/metabase/scenarios/collections/collection-pinned-overview.cy.spec.js

 import { popover, restore } from "__support__/e2e/cypress";
 
-const DASHBOARD_ITEM_NAME = "Orders in a dashboard";
-const CARD_ITEM_NAME = "Orders, Count";
-const MODE_ITEM_NAME = "Orders";
+const DASHBOARD_NAME = "Orders in a dashboard";
+const QUESTION_NAME = "Orders, Count";
+const MODEL_NAME = "Orders";
 
 describe("scenarios > collection pinned items overview", () => {
   beforeEach(() => {
     restore();
     cy.signInAsAdmin();
 
-    cy.intercept("POST", `/api/card/*/query`).as("cardQuery");
-    cy.intercept(
-      "GET",
-      "/api/collection/root/items?pinned_state=is_pinned*",
-    ).as("pinnedItemsGET");
+    cy.intercept("POST", `/api/card/*/query`).as("getCardQuery");
+    cy.intercept("GET", "/api/collection/*/items?pinned_state=is_pinned*").as(
+      "getPinnedItems",
+    );
   });
 
-  it("should let the user pin items", () => {
-    // Turn question 1 into a model
-    cy.request("PUT", "/api/card/1", { dataset: true });
-
-    cy.visit("/collection/root");
-    cy.wait("@pinnedItemsGET");
+  it("should be able to pin a dashboard", () => {
+    openRootCollection();
+    openUnpinnedItemMenu(DASHBOARD_NAME);
+    popover().within(() => cy.findByText("Pin this").click());
+    cy.wait("@getPinnedItems");
 
-    // pin a dashboard
-    pinItem(DASHBOARD_ITEM_NAME);
-    cy.wait("@pinnedItemsGET");
-
-    // ensure the dashboard card is showing in the pinned section
-    cy.findByTestId("pinned-items").within(() => {
-      cy.icon("dashboard");
-      cy.findByText("A dashboard");
-      // click on the card to navigate to the dashboard
-      cy.findByText(DASHBOARD_ITEM_NAME).click();
+    getPinnedSection().within(() => {
+      cy.icon("dashboard").should("be.visible");
+      cy.findByText("A dashboard").should("be.visible");
+      cy.findByText(DASHBOARD_NAME).click();
       cy.url().should("include", "/dashboard/1");
     });
+  });
 
-    cy.visit("/collection/root");
-    cy.wait("@pinnedItemsGET");
-
-    // pin a card
-    pinItem(CARD_ITEM_NAME);
-    cy.wait(["@pinnedItemsGET", "@cardQuery"]);
+  it("should be able to pin a question", () => {
+    openRootCollection();
+    openUnpinnedItemMenu(QUESTION_NAME);
+    popover().within(() => cy.findByText("Pin this").click());
+    cy.wait(["@getPinnedItems", "@getCardQuery"]);
 
-    // ensure the card visualization is showing in the pinned section
-    cy.findByTestId("pinned-items").within(() => {
-      cy.findByText("18,760");
-      cy.findByText(CARD_ITEM_NAME).click();
+    getPinnedSection().within(() => {
+      cy.findByText("18,760").should("be.visible");
+      cy.findByText(QUESTION_NAME).click();
       cy.url().should("include", "/question/2");
     });
+  });
+
+  it("should be able to pin a model", () => {
+    cy.request("PUT", "/api/card/1", { dataset: true });
 
-    cy.visit("/collection/root");
-    cy.wait(["@pinnedItemsGET", "@cardQuery"]);
+    openRootCollection();
+    openUnpinnedItemMenu(MODEL_NAME);
+    popover().within(() => cy.findByText("Pin this").click());
+    cy.wait("@getPinnedItems");
 
-    // pin a model
-    pinItem(MODE_ITEM_NAME);
-    cy.wait("@pinnedItemsGET");
-    // ensure the model card is showing in the pinned section
-    cy.findByTestId("pinned-items").within(() => {
-      cy.findByText(MODE_ITEM_NAME);
-      cy.icon("model");
+    getPinnedSection().within(() => {
+      cy.icon("model").should("be.visible");
+      cy.findByText(MODEL_NAME).should("be.visible");
       cy.findByText("A model").click();
       cy.url().should("include", "/model/1");
     });
   });
 
-  describe("pinned item actions", () => {
-    beforeEach(() => {
-      // pin a dashboard using the API
-      cy.request("PUT", "/api/dashboard/1", {
-        collection_position: 1,
-      });
-
-      cy.visit("/collection/root");
-      cy.wait("@pinnedItemsGET");
-
-      // open the action menu
-      cy.findByTestId("pinned-items").within(() => {
-        cy.icon("dashboard");
-        // the menu icon is hidden until the user hovers their mouse over the card
-        cy.icon("ellipsis").click({ force: true });
-      });
-    });
+  it("should be able to unpin a pinned dashboard", () => {
+    cy.request("PUT", "/api/dashboard/1", { collection_position: 1 });
 
-    it("should be able to unpin a pinned item", () => {
-      popover().within(() => {
-        cy.findByText("Unpin").click();
-      });
+    openRootCollection();
+    openPinnedItemMenu(DASHBOARD_NAME);
+    popover().within(() => cy.findByText("Unpin").click());
+    cy.wait("@getPinnedItems");
 
-      // verify that the item is no longer in the pinned section
-      cy.wait("@pinnedItemsGET");
-      cy.findByTestId("pinned-items").should("not.exist");
-    });
+    getPinnedSection().should("not.exist");
+  });
 
-    it("should be able to move a pinned item", () => {
-      popover().within(() => {
-        cy.findByText("Move").click();
-      });
+  it("should be able to move a pinned dashboard", () => {
+    cy.request("PUT", "/api/dashboard/1", { collection_position: 1 });
 
-      // verify that the move modal is showing
-      cy.findByText(`Move "${DASHBOARD_ITEM_NAME}"?`);
-    });
+    openRootCollection();
+    openPinnedItemMenu(DASHBOARD_NAME);
+    popover().within(() => cy.findByText("Move").click());
 
-    it("should be able to duplicate a pinned item", () => {
-      popover().within(() => {
-        cy.findByText("Duplicate").click();
-      });
+    cy.findByText(`Move "${DASHBOARD_NAME}"?`).should("be.visible");
+  });
 
-      // verify that the duplicate modal is showing
-      cy.findByText(`Duplicate "${DASHBOARD_ITEM_NAME}"`);
-    });
+  it("should be able to duplicate a pinned dashboard", () => {
+    cy.request("PUT", "/api/dashboard/1", { collection_position: 1 });
 
-    it("should be able to archive a pinned item", () => {
-      popover().within(() => {
-        cy.findByText("Archive").click();
-      });
+    openRootCollection();
+    openPinnedItemMenu(DASHBOARD_NAME);
+    popover().within(() => cy.findByText("Duplicate").click());
 
-      // verify that the item is no longer on the page
-      cy.wait("@pinnedItemsGET");
-      cy.findByTestId("pinned-items").should("not.exist");
-      cy.findByText(DASHBOARD_ITEM_NAME).should("not.exist");
-    });
+    cy.findByText(`Duplicate "${DASHBOARD_NAME}"`).should("be.visible");
+  });
+
+  it("should be able to archive a pinned dashboard", () => {
+    cy.request("PUT", "/api/dashboard/1", { collection_position: 1 });
+
+    openRootCollection();
+    openPinnedItemMenu(DASHBOARD_NAME);
+    popover().within(() => cy.findByText("Archive").click());
+    cy.wait("@getPinnedItems");
+
+    getPinnedSection().should("not.exist");
+    cy.findByText(DASHBOARD_NAME).should("not.exist");
   });
 });
 
-const pinItem = name => {
-  cy.findByText(name)
-    .closest("tr")
-    .within(() => cy.icon("ellipsis").click());
+const getPinnedSection = () => {
+  return cy.findByTestId("pinned-items");
+};
+
+const getUnpinnedSection = () => {
+  return cy.findByRole("table");
+};
+
+const openRootCollection = () => {
+  cy.visit("/collection/root");
+  cy.wait("@getPinnedItems");
+};
 
-  popover().within(() => cy.icon("pin").click());
+const openPinnedItemMenu = name => {
+  getPinnedSection().within(() => {
+    cy.findByText(name)
+      .closest("a")
+      .within(() => cy.icon("ellipsis").click({ force: true }));
+  });
+};
+
+const openUnpinnedItemMenu = name => {
+  getUnpinnedSection().within(() => {
+    cy.findByText(name)
+      .closest("tr")
+      .within(() => cy.icon("ellipsis").click());
+  });
 };