Make embedding-full-app.cy.spec.js and associated components more sem…

…antic
metabase · Jan 25, 2024 · 323e55d · 323e55d
1 parent f284f59
commit 323e55d
Show file tree

Hide file tree

Showing 4 changed files with 59 additions and 27 deletions.
diff --git a/e2e/support/commands/ui/button.ts b/e2e/support/commands/ui/button.ts
@@ -13,6 +13,18 @@ declare global {
         buttonName: string,
         timeout?: number,
       ): Cypress.Chainable<JQuery<HTMLElement>>;
+      /**
+       * Get a heading either unscoped, or chained to a previously yielded subject.
+       * Uses `findByRole` under the hood.
+       *
+       * @example
+       * cy.heading("Sample Database").click();
+       * modal().heading("Save").click();
+       */
+      heading(
+        headingName: string,
+        timeout?: number,
+      ): Cypress.Chainable<JQuery<HTMLElement>>;
     }
   }
 }
@@ -34,4 +46,21 @@ Cypress.Commands.add(
   },
 );
 
+Cypress.Commands.add(
+  "heading",
+  {
+    prevSubject: "optional",
+  },
+  (subject, headingNAme, timeout) => {
+    const config = {
+      name: headingNAme,
+      timeout,
+    };
+
+    return subject
+      ? cy.wrap(subject).findByRole("heading", config)
+      : cy.findByRole("heading", config);
+  },
+);
+
 export {};
diff --git a/e2e/test/scenarios/embedding/embedding-full-app.cy.spec.js b/e2e/test/scenarios/embedding/embedding-full-app.cy.spec.js
@@ -67,7 +67,9 @@ describeEE("scenarios > embedding > full app", () => {
 
       appBar().within(() => {
         cy.findByTestId("main-logo").should("be.visible");
-        cy.findByText("Our analytics").should("not.exist");
+        cy.findByRole("treeitem", { name: "Our analytics" }).should(
+          "not.exist",
+        );
       });
     });
 
@@ -135,15 +137,14 @@ describeEE("scenarios > embedding > full app", () => {
   });
 
   describe("browse data", () => {
-    it("should hide the top nav when nothing is shown", () => {
+    it("should hide the side nav when nothing is shown", () => {
       visitFullAppEmbeddingUrl({
         url: "/browse",
         qs: { side_nav: false, logo: false },
       });
-      // eslint-disable-next-line no-unscoped-text-selectors -- deprecated usage
-      cy.findByText("Browse data").should("be.visible");
-      // eslint-disable-next-line no-unscoped-text-selectors -- deprecated usage
-      cy.findByText("Our analytics").should("not.exist");
+      cy.findByRole("heading", { name: /Browse data/ }).should("be.visible");
+      cy.findByRole("treeitem", { name: /Browse data/ }).should("not.exist");
+      cy.findByRole("treeitem", { name: "Our analytics" }).should("not.exist");
       appBar().should("not.exist");
     });
   });
@@ -154,14 +155,12 @@ describeEE("scenarios > embedding > full app", () => {
 
       cy.findByTestId("qb-header").should("be.visible");
       cy.findByTestId("qb-header-left-side").realHover();
-      // eslint-disable-next-line no-unscoped-text-selectors -- deprecated usage
-      cy.findByText(/Edited/).should("be.visible");
+      cy.button(/Edited/).should("be.visible");
 
       cy.icon("refresh").should("be.visible");
       cy.icon("notebook").should("be.visible");
       cy.button("Summarize").should("be.visible");
-      // eslint-disable-next-line no-unscoped-text-selectors -- deprecated usage
-      cy.findByText("Filter").should("be.visible");
+      cy.button("Filter").should("be.visible");
     });
 
     it("should hide the question header by a param", () => {
@@ -211,8 +210,7 @@ describeEE("scenarios > embedding > full app", () => {
           qs: { top_nav: true, new_button: true, side_nav: false },
         });
 
-        // eslint-disable-next-line no-unscoped-text-selectors -- deprecated usage
-        cy.findByText("New").click();
+        cy.button("New").click();
         popover().findByText("Question").click();
         popover().findByText("Raw Data").click();
         popover().findByText("Orders").click();
@@ -235,8 +233,9 @@ describeEE("scenarios > embedding > full app", () => {
           qs: { side_nav: false },
         });
 
-        // eslint-disable-next-line no-unscoped-text-selectors -- deprecated usage
-        cy.findByText("Sample Database").should("be.visible");
+        cy.findByTestId("native-query-editor-container")
+          .findByText(/Sample Database/)
+          .should("be.visible");
       });
     });
 
@@ -279,20 +278,16 @@ describeEE("scenarios > embedding > full app", () => {
     it("should show the dashboard header by default", () => {
       visitDashboardUrl({ url: `/dashboard/${ORDERS_DASHBOARD_ID}` });
 
-      // eslint-disable-next-line no-unscoped-text-selectors -- deprecated usage
-      cy.findByText("Orders in a dashboard").should("be.visible");
-      // eslint-disable-next-line no-unscoped-text-selectors -- deprecated usage
-      cy.findByText(/Edited/).should("be.visible");
+      cy.heading("Orders in a dashboard").should("be.visible");
+      cy.button(/Edited.*by/).should("be.visible");
     });
 
     it("should hide the dashboard header by a param", () => {
       visitDashboardUrl({
         url: `/dashboard/${ORDERS_DASHBOARD_ID}`,
         qs: { header: false },
       });
-
-      // eslint-disable-next-line no-unscoped-text-selectors -- deprecated usage
-      cy.findByText("Orders in a dashboard").should("not.exist");
+      cy.heading("Orders in a dashboard").should("not.exist");
     });
 
     it("should hide the dashboard's additional info by a param", () => {
@@ -396,8 +391,7 @@ describeEE("scenarios > embedding > full app", () => {
     it("should show the dashboard header by default", () => {
       visitXrayDashboardUrl({ url: "/auto/dashboard/table/1" });
 
-      // eslint-disable-next-line no-unscoped-text-selectors -- deprecated usage
-      cy.findByText("More X-rays").should("be.visible");
+      cy.heading("More X-rays").should("be.visible");
       cy.button("Save this").should("be.visible");
     });
 
@@ -407,8 +401,7 @@ describeEE("scenarios > embedding > full app", () => {
         qs: { header: false },
       });
 
-      // eslint-disable-next-line no-unscoped-text-selectors -- deprecated usage
-      cy.findByText("More X-rays").should("be.visible");
+      cy.heading("More X-rays").should("be.visible");
       cy.button("Save this").should("not.exist");
     });
   });

diff --git a/frontend/src/metabase/dashboard/components/DashboardHeader/DashboardHeaderView.tsx b/frontend/src/metabase/dashboard/components/DashboardHeader/DashboardHeaderView.tsx
@@ -117,7 +117,11 @@ export function DashboardHeaderComponent({
           data-testid="dashboard-header"
           ref={header}
         >
-          <HeaderContent hasSubHeader showSubHeader={showSubHeader}>
+          <HeaderContent
+            role="heading"
+            hasSubHeader
+            showSubHeader={showSubHeader}
+          >
             <HeaderCaptionContainer>
               <HeaderCaption
                 key={dashboard.name}

diff --git a/frontend/src/metabase/query_builder/components/view/HeaderBreadcrumbs/HeaderBreadcrumbs.jsx b/frontend/src/metabase/query_builder/components/view/HeaderBreadcrumbs/HeaderBreadcrumbs.jsx
@@ -29,7 +29,12 @@ export function HeadBreadcrumbs({
   ...props
 }) {
   return (
-    <Container data-testid="head-crumbs-container" {...props} variant={variant}>
+    <Container
+      aria-label="breadcrumbs"
+      data-testid="head-crumbs-container"
+      {...props}
+      variant={variant}
+    >
       {parts.map((part, index) => {
         const isLast = index === parts.length - 1;
         const badgeInactiveColor =
@@ -43,6 +48,7 @@ export function HeadBreadcrumbs({
                 to={part.href}
                 icon={part.icon}
                 inactiveColor={badgeInactiveColor}
+                aria-current={isLast ? "page" : undefined}
               >
                 {part.name}
               </HeaderBadge>