test: update e2e headings queries (#5264)

canonical · Jan 9, 2024 · 2ef9f92 · 2ef9f92
1 parent 5f033f0
commit 2ef9f92
Show file tree

Hide file tree

Showing 5 changed files with 70 additions and 60 deletions.
diff --git a/cypress/constants.ts b/cypress/constants.ts
@@ -1,7 +1,7 @@
-export type Page = { heading: string; url: string };
+export type Page = { heading: string; headingLevel?: number; url: string };
 export const pages: Page[] = [
   { heading: "Login", url: "/accounts/login" },
-  { heading: "SSH keys for admin", url: "/intro/user" },
+  { heading: "SSH keys for admin", headingLevel: 2, url: "/intro/user" },
   { heading: "Devices", url: "/devices" },
   { heading: "Controllers", url: "/controllers" },
   { heading: "Subnets", url: "/networks" },
@@ -10,8 +10,12 @@ export const pages: Page[] = [
   { heading: "Images", url: "/images" },
   { heading: "DNS", url: "/domains" },
   { heading: "Availability zones", url: "/zones" },
-  { heading: "Settings", url: "/settings/configuration/general" },
-  { heading: "My preferences", url: "/account/prefs/details" },
+  {
+    heading: "Settings",
+    headingLevel: 2,
+    url: "/settings/configuration/general",
+  },
+  { heading: "My preferences", headingLevel: 2, url: "/account/prefs/details" },
 ];
 // longer timeout that can be useful for slow commands
 export const LONG_TIMEOUT = 30000;
diff --git a/cypress/e2e/accessibility/accessibility.spec.ts b/cypress/e2e/accessibility/accessibility.spec.ts
@@ -1,7 +1,7 @@
 import { pages } from "../../constants";
 import { generateMAASURL } from "../utils";
 
-pages.forEach(({ heading, url }) => {
+pages.forEach(({ heading, headingLevel, url }) => {
   it(
     `"${heading}" page has no detectable accessibility violations on load`,
     { retries: 1 },
@@ -15,7 +15,10 @@ pages.forEach(({ heading, url }) => {
 
       cy.visit(pageUrl);
       cy.waitForPageToLoad();
-      cy.findByRole("heading", { name: new RegExp(heading, "i") });
+      cy.findByRole("heading", {
+        level: headingLevel || 1,
+        name: new RegExp(heading, "i"),
+      });
 
       cy.testA11y({ url, title: heading });
     }

diff --git a/cypress/support/commands.ts b/cypress/support/commands.ts
@@ -140,10 +140,9 @@ Cypress.Commands.add("testA11y", (pageContext) => {
 });
 
 Cypress.Commands.add("waitForPageToLoad", () => {
-  cy.get("[data-testid='section-header-title-spinner]").should("not.exist");
-  cy.get("[data-testid='section-header-subtitle-spinner']").should("not.exist");
+  cy.findByText(/Loading/, { timeout: LONG_TIMEOUT }).should("not.exist");
   cy.findByText("Failed to connect").should("not.exist");
-  cy.get("[data-testid='section-header-title']").should("be.visible");
+  cy.findByRole("heading", { level: 1 }).should("be.visible");
 });
 
 Cypress.Commands.add("waitForTableToLoad", ({ name } = { name: undefined }) => {

diff --git a/src/app/intro/components/IntroCard/IntroCard.tsx b/src/app/intro/components/IntroCard/IntroCard.tsx
@@ -35,10 +35,10 @@ const IntroCard = ({
       title={
         <>
           <span className="u-flex--between">
-            <span className="p-heading--4" data-testid="section-header-title">
+            <h2 className="p-heading--4" data-testid="section-header-title">
               <Icon aria-label={icon} name={icon} />
               &ensp;{title}
-            </span>
+            </h2>
             {titleLink ? (
               <span className="p-text--default u-text--default-size">
                 {titleLink}

diff --git a/src/app/preferences/views/Details/Details.tsx b/src/app/preferences/views/Details/Details.tsx
@@ -1,5 +1,6 @@
 import { useState } from "react";
 
+import { ContentSection } from "@canonical/maas-react-components";
 import { Col, Notification, Row } from "@canonical/react-components";
 import { useDispatch, useSelector } from "react-redux";
 
@@ -37,55 +38,58 @@ export const Details = (): JSX.Element => {
   );
 
   return (
-    <div aria-label={Label.Title}>
-      {externalAuthURL && (
-        <Notification severity="information">
-          Users for this MAAS are managed using an external service
-        </Notification>
-      )}
-      <Row>
-        <Col size={6}>
-          <UserForm
-            cleanup={cleanup}
-            includeCurrentPassword
-            includeUserType={false}
-            onSave={(values) => {
-              if (authUser) {
-                dispatch(
-                  userActions.update({
-                    id: authUser.id,
-                    email: values.email,
-                    is_superuser: values.isSuperuser,
-                    last_name: values.fullName,
-                    username: values.username,
-                  })
-                );
-              }
-              const passwordChanged =
-                !!values.old_password ||
-                !!values.password ||
-                !!values.passwordConfirm;
-              if (passwordChanged) {
-                dispatch(
-                  authActions.changePassword({
-                    old_password: values.old_password,
-                    new_password1: values.password,
-                    new_password2: values.passwordConfirm,
-                  })
-                );
-              }
-              setPasswordChanged(passwordChanged);
-            }}
-            onSaveAnalytics={{
-              action: "Saved",
-              category: "Details preferences",
-              label: "Details form",
-            }}
-            user={authUser}
-          />
-        </Col>
-      </Row>
-    </div>
+    <ContentSection aria-label={Label.Title}>
+      <ContentSection.Title>{Label.Title}</ContentSection.Title>
+      <ContentSection.Content>
+        {externalAuthURL && (
+          <Notification severity="information">
+            Users for this MAAS are managed using an external service
+          </Notification>
+        )}
+        <Row>
+          <Col size={6}>
+            <UserForm
+              cleanup={cleanup}
+              includeCurrentPassword
+              includeUserType={false}
+              onSave={(values) => {
+                if (authUser) {
+                  dispatch(
+                    userActions.update({
+                      id: authUser.id,
+                      email: values.email,
+                      is_superuser: values.isSuperuser,
+                      last_name: values.fullName,
+                      username: values.username,
+                    })
+                  );
+                }
+                const passwordChanged =
+                  !!values.old_password ||
+                  !!values.password ||
+                  !!values.passwordConfirm;
+                if (passwordChanged) {
+                  dispatch(
+                    authActions.changePassword({
+                      old_password: values.old_password,
+                      new_password1: values.password,
+                      new_password2: values.passwordConfirm,
+                    })
+                  );
+                }
+                setPasswordChanged(passwordChanged);
+              }}
+              onSaveAnalytics={{
+                action: "Saved",
+                category: "Details preferences",
+                label: "Details form",
+              }}
+              user={authUser}
+            />
+          </Col>
+        </Row>
+      </ContentSection.Content>
+    </ContentSection>
   );
 };