From 469960dc656b4a47d067f3e7fec622a852250875 Mon Sep 17 00:00:00 2001
From: Nick De Villiers <nick.devilliers@canonical.com>
Date: Tue, 16 Jan 2024 14:22:01 +0000
Subject: [PATCH] test: fix Cypress subnet add tests (#5289)

---
 cypress/e2e/with-users/subnets/add.spec.ts    | 35 ++++++-------------
 .../SubnetsList/SubnetsTable/components.tsx   |  4 +++
 .../views/SubnetsList/SubnetsTable/types.ts   |  1 +
 .../views/SubnetsList/SubnetsTable/utils.tsx  |  1 +
 4 files changed, 16 insertions(+), 25 deletions(-)

diff --git a/cypress/e2e/with-users/subnets/add.spec.ts b/cypress/e2e/with-users/subnets/add.spec.ts
index a4e40c5b0c..bc51a22b55 100644
--- 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,10 +73,8 @@ 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");
     });
   });
 
@@ -86,7 +82,7 @@ context("Subnets - Add", () => {
     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
index 3c1623e92f..72bd18cd8e 100644
--- 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
index d8aa8851e2..16c5fa923e 100644
--- 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
index ced709cbee..6acd2bc4b4 100644
--- 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),