test: fix Cypress subnet add tests (#5289)

canonical · Jan 16, 2024 · 469960d · 469960d
1 parent 70bb415
commit 469960d
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 25 deletions.
diff --git a/cypress/e2e/with-users/subnets/add.spec.ts b/cypress/e2e/with-users/subnets/add.spec.ts
@@ -55,10 +55,8 @@ context("Subnets - Add", () => {
     const name = `cypress-${generateId()}`;
     completeForm("Fabric", name);
 
-    cy.findByRole("table", { name: /Subnets/ }).within(() => {
-      cy.findByRole("row", { name }).within(() =>
-        cy.findByRole("link", { name }).click()
-      );
+    cy.findByRole("grid", { name: /Subnets/i }).within(() => {
+      cy.findByRole("link", { name }).click();
     });
 
     cy.url().should("include", generateMAASURL("/fabric"));
@@ -75,18 +73,16 @@ context("Subnets - Add", () => {
 
     cy.url().should("include", generateMAASURL("/networks?by=fabric"));
 
-    cy.findByRole("table", { name: /Subnets/ }).within(() => {
-      cy.findByRole("row", { name }).within(() =>
-        cy.findByRole("link", { name }).should("not.exist")
-      );
+    cy.findByRole("grid", { name: /Subnets/i }).within(() => {
+      cy.findByRole("link", { name }).should("not.exist");
     });
   });
 
   it("can add and delete a new space", () => {
     cy.visit(generateMAASURL("/networks?by=space"));
     const name = `cypress-${generateId()}`;
     completeForm("Space", name);
-    cy.findByRole("table", { name: /Subnets/ }).within(() => {
+    cy.findByRole("grid", { name: /Subnets/ }).within(() => {
       cy.findByRole("link", { name }).click();
     });
 
@@ -103,7 +99,7 @@ context("Subnets - Add", () => {
     );
 
     cy.url().should("include", generateMAASURL("/networks?by=fabric"));
-    cy.findByRole("table", { name: /Subnets/ }).within(() => {
+    cy.findByRole("grid", { name: /Subnets/ }).within(() => {
       cy.findByRole("link", { name }).should("not.exist");
     });
   });
@@ -121,28 +117,17 @@ context("Subnets - Add", () => {
     completeAddVlanForm(vid, vlanName, fabricName, spaceName);
     completeAddSubnetForm(subnetName, cidr, fabricName, vid, vlanName);
 
-    cy.findAllByRole("row", { name: fabricName }).should("have.length", 2);
-
-    cy.findAllByRole("row", { name: fabricName })
-      .first()
-      .within(() => {
-        cy.findByRole("rowheader").within(() =>
-          cy.findByText(fabricName).should("be.visible")
-        );
-      });
+    cy.findAllByRole("link", { name: fabricName }).should("have.length", 2);
 
     // Check it groups items added to the same fabric correctly
     cy.findAllByRole("row", { name: fabricName })
       .eq(1)
       .within(() => {
-        cy.findByRole("rowheader").within(() =>
-          cy.findByText(fabricName).should("not.be.visible")
-        );
         cy.findAllByRole("gridcell")
-          .eq(0)
+          .eq(1)
           .should("have.text", `${vid} (${vlanName})`);
-        cy.findAllByRole("gridcell").eq(2).should("contain.text", subnetName);
-        cy.findAllByRole("gridcell").eq(4).should("have.text", spaceName);
+        cy.findAllByRole("gridcell").eq(3).should("contain.text", subnetName);
+        cy.findAllByRole("gridcell").eq(5).should("have.text", spaceName);
       });
 
     // delete the subnet

diff --git a/src/app/subnets/views/SubnetsList/SubnetsTable/components.tsx b/src/app/subnets/views/SubnetsList/SubnetsTable/components.tsx
@@ -71,10 +71,12 @@ export const CellContents = ({
 );
 
 const generateSubnetRow = ({
+  label,
   content,
   classes,
   key,
 }: {
+  label?: string;
   content: FabricRowContent;
   key: string | number;
   classes?: string;
@@ -114,6 +116,7 @@ const generateSubnetRow = ({
   ];
 
   return {
+    "aria-label": label,
     key,
     className: classNames(classes),
     columns,
@@ -141,6 +144,7 @@ export const generateSubnetRows = (subnets: SubnetsTableRow[]) => {
       ),
     };
     return generateSubnetRow({
+      label: subnet["aria-label"],
       key: `${subnet.sortData.vlanId}-${subnet.sortData.fabricId}-${index}`,
       content,
       classes: "subnet-row truncated-border",

diff --git a/src/app/subnets/views/SubnetsList/SubnetsTable/types.ts b/src/app/subnets/views/SubnetsList/SubnetsTable/types.ts
@@ -59,6 +59,7 @@ export type SortDataKey =
 
 export type SubnetsTableRow = Record<SubnetsColumns, SubnetsTableColumn> & {
   sortData: SortData;
+  "aria-label"?: string;
 };
 
 export type FabricRowContent = {

diff --git a/src/app/subnets/views/SubnetsList/SubnetsTable/utils.tsx b/src/app/subnets/views/SubnetsList/SubnetsTable/utils.tsx
@@ -127,6 +127,7 @@ const getRowData = ({
   data?: SubnetsTableData;
 }): SubnetsTableRow => {
   return {
+    "aria-label": fabric?.name,
     fabric: getColumn(getFabricDisplay(fabric), getFabricLink(fabric?.id)),
     vlan: getColumn(
       getVLANDisplay(vlan),