Merge branch 'main' into DEVPROD-1968

cypress/integration/hosts/host_filtering.ts

@@ -1,7 +1,5 @@
 const hostsRoute = "/hosts";
 
-const tableRow = "tr.ant-table-row";
-
 const idParam = "hostId";
 const distroParam = "distroId";
 const statusesParam = "statuses";
@@ -108,20 +106,22 @@ describe("Hosts page filtering from table filters", () => {
         cy.dataCy(`${filterIconDataCy}-wrapper`).should("be.visible");
         if (param === statusesParam) {
           cy.getInputByLabel("Running").check({ force: true });
+          cy.get("body").click();
         } else {
           cy.dataCy(`${filterIconDataCy}-input-filter`).should("be.visible");
-          cy.dataCy(`${filterIconDataCy}-input-filter`)
-            .should("be.focused")
-            .focus()
-            .type(`${filterValue}`, { scrollBehavior: false })
-            .type("{enter}");
+          cy.dataCy(`${filterIconDataCy}-input-filter`).should("be.focused");
+
+          cy.dataCy(`${filterIconDataCy}-input-filter`).type(
+            `${filterValue}{enter}`,
+            { scrollBehavior: false }
+          );
         }
-        cy.get(".ant-dropdown").should("not.be.visible");
+        cy.dataCy(`${filterIconDataCy}-wrapper`).should("not.exist");
         cy.location("search").should("contain", filterUrlParam);
         cy.dataCy("hosts-table").should("have.attr", "data-loading", "false");
 
         expectedIds.forEach((id) => {
-          cy.get(tableRow).contains(id).should("be.visible");
+          cy.dataCy("leafygreen-table-row").contains(id).should("be.visible");
         });
 
         cy.dataCy(filterIconDataCy).should("be.visible");

cypress/integration/hosts/hosts_page_default.ts

@@ -7,13 +7,13 @@ describe("Hosts Page Default", () => {
   });
 
   it("Renders hosts table with hosts sorted by status by default", () => {
-    cy.get("tr.ant-table-row").each(($el, index) =>
+    cy.dataCy("leafygreen-table-row").each(($el, index) =>
       cy.wrap($el).contains(defaultHostsFirstPage[index])
     );
   });
 
   it("ID column value links to host page", () => {
-    cy.get("tr.ant-table-row")
+    cy.dataCy("leafygreen-table-row")
       .first()
       .within(() => {
         cy.dataCy("host-id-link")
@@ -23,7 +23,7 @@ describe("Hosts Page Default", () => {
   });
 
   it("Current Task column value links to task page", () => {
-    cy.get("tr.ant-table-row")
+    cy.dataCy("leafygreen-table-row")
       .first()
       .within(() => {
         cy.dataCy("current-task-link")

cypress/integration/hosts/hosts_pagination.ts

@@ -1,18 +1,16 @@
 import { defaultHostsFirstPage } from "./hosts_page_default";
 
 describe("Hosts Page", () => {
-  const tableRow = "tr.ant-table-row";
-
   it("URL query parameters determine pagination values", () => {
     cy.visit("/hosts?limit=10&page=1");
 
-    cy.get(tableRow).each(($el, index) =>
+    cy.dataCy("leafygreen-table-row").each(($el, index) =>
       cy.wrap($el).contains(hostsSecondPageWithLimitOfTen[index])
     );
 
     cy.visit("/hosts?limit=20&page=0");
 
-    cy.get(tableRow).each(($el, index) =>
+    cy.dataCy("leafygreen-table-row").each(($el, index) =>
       cy
         .wrap($el)
         .contains(

cypress/integration/hosts/hosts_sorting.ts

@@ -150,13 +150,12 @@ const sortDirectionTests = [
 
 describe("Hosts page sorting", () => {
   const hostsRoute = "/hosts";
-
-  const tableRow = "tr.ant-table-row";
-  const distroSortControl =
-    ".cy-task-table-col-DISTRO > .ant-table-filter-column > :nth-child(1) > .ant-table-column-sorters";
+  const distroSortControl = "button[aria-label='Sort by Distro']";
 
   it("Clicking the sort direction filter will set the page query param to 0", () => {
     cy.visit(`${hostsRoute}?distroId=arfarf&page=5`);
+    cy.dataCy("hosts-table").should("be.visible");
+    cy.dataCy("hosts-table").should("not.have.attr", "data-loading", "true");
     cy.get(distroSortControl).click();
     cy.location("search").should(
       "equal",
@@ -166,34 +165,38 @@ describe("Hosts page sorting", () => {
   it("Clicking a sort direction 3 times will set the page query param to 0, clear the direction & sortBy query param, and preserve the rest", () => {
     cy.visit(`${hostsRoute}?distroId=arfarf&page=5`);
     cy.get(distroSortControl).click();
+    cy.location("search").should(
+      "equal",
+      "?distroId=arfarf&page=0&sortBy=DISTRO&sortDir=ASC"
+    );
     cy.get(distroSortControl).click();
+    cy.location("search").should(
+      "equal",
+      "?distroId=arfarf&page=0&sortBy=DISTRO&sortDir=DESC"
+    );
     cy.get(distroSortControl).click();
     cy.location("search").should("equal", "?distroId=arfarf&page=0");
   });
   it("Status sorter is selected by default if no sort params in url", () => {
     cy.visit(hostsRoute);
-    cy.get(".cy-task-table-col-STATUS")
+    cy.contains("th", "Status")
       .first()
       .within(() => {
-        cy.get("[data-icon=caret-up]")
-          .should("have.attr", "fill")
-          .and("eq", "currentColor");
+        cy.validateTableSort("asc");
       });
   });
 
   it("Status sorter has initial value of sort param from url", () => {
     cy.visit(`${hostsRoute}?page=0&sortBy=DISTRO&sortDir=DESC`);
-    cy.get(".cy-task-table-col-DISTRO").within(() => {
-      cy.get("[data-icon=caret-down]")
-        .should("have.attr", "fill")
-        .and("eq", "currentColor");
+    cy.contains("th", "Distro").within(() => {
+      cy.validateTableSort("desc");
     });
   });
 
   sortByTests.forEach(({ expectedIds, sortBy, sorterName }) => {
     it(`Sorts by ${sorterName} when sortBy = ${sortBy}`, () => {
       cy.visit(`${hostsRoute}?sortBy=${sortBy}&limit=10`);
-      cy.get(tableRow).each(($el, index) =>
+      cy.dataCy("leafygreen-table-row").each(($el, index) =>
         cy.wrap($el).contains(expectedIds[index])
       );
     });
@@ -204,15 +207,15 @@ describe("Hosts page sorting", () => {
       cy.visit(
         `${hostsRoute}?page=0&sortBy=CURRENT_TASK&sortDir=${sortDir}&limit=10`
       );
-      cy.get(tableRow).each(($el, index) =>
+      cy.dataCy("leafygreen-table-row").each(($el, index) =>
         cy.wrap($el).contains(expectedIds[index])
       );
     });
   });
 
   it("Uses default sortBy and sortDir if sortBy or sortDir param is invalid", () => {
     cy.visit(`${hostsRoute}?sortBy=INVALID&sortDir=INVALID&limit=10`);
-    cy.get(tableRow).each(($el, index) =>
+    cy.dataCy("leafygreen-table-row").each(($el, index) =>
       cy
         .wrap($el)
         .contains(

cypress/integration/hosts/select_hosts.ts

@@ -1,14 +1,17 @@
+const selectHosts = () => {
+  cy.get("thead").within(() => {
+    cy.get("input[type=checkbox]").check({ force: true });
+  });
+  cy.get("tbody").within(() => {
+    cy.get("input[type=checkbox]")
+      .should("have.length", 3)
+      .and("have.attr", "aria-checked", "true");
+  });
+};
+
 describe("Select hosts in hosts page table", () => {
   const hostsRoute = "/hosts";
 
-  const selectHosts = () => {
-    cy.get(".ant-table-thead .ant-table-selection-column").within(() => {
-      cy.get(".ant-checkbox-input").should("not.be.disabled");
-      cy.get(".ant-checkbox-input").check();
-    });
-    cy.get(".ant-checkbox-checked").should("have.length", 4);
-  };
-
   beforeEach(() => {
     cy.visit(`${hostsRoute}?distroId=ubuntu1604-large&page=0&statuses=running`);
     cy.dataCy("hosts-table").should("exist");

cypress/integration/hosts/update_status_modal.ts

@@ -8,9 +8,10 @@ describe("Update Status Modal", () => {
   });
 
   it("Update status for selected hosts", () => {
-    cy.get(".ant-checkbox-input").first().should("exist");
-    cy.get(".ant-checkbox-input").first().should("not.be.disabled");
-    cy.get(".ant-checkbox-input").first().check({ force: true });
+    cy.get("thead").within(() => {
+      cy.get("input[type=checkbox]").should("not.be.disabled");
+      cy.get("input[type=checkbox]").check({ force: true });
+    });
 
     cy.dataCy("update-status-button").click();
 

cypress/integration/preferences/notifications.ts

@@ -31,18 +31,18 @@ describe("user subscriptions table", () => {
   });
 
   it("shows all of a user's subscriptions and expands with details", () => {
-    cy.dataCy("subscription-row").should("have.length", 3);
+    cy.dataCy("leafygreen-table-row").should("have.length", 3);
 
     cy.dataCy("regex-selectors").should("not.be.visible");
     cy.dataCy("trigger-data").should("not.be.visible");
-    cy.dataCy("subscription-row")
+    cy.dataCy("leafygreen-table-row")
       .eq(0)
       .within(() => {
         cy.get("button").first().click();
       });
     cy.dataCy("regex-selectors").should("be.visible");
     cy.dataCy("trigger-data").should("not.be.visible");
-    cy.dataCy("subscription-row")
+    cy.dataCy("leafygreen-table-row")
       .eq(2)
       .within(() => {
         cy.get("button").first().click();
@@ -52,7 +52,7 @@ describe("user subscriptions table", () => {
   });
 
   it("Shows the selected count in the 'Delete' button", () => {
-    cy.dataCy("subscription-row")
+    cy.dataCy("leafygreen-table-row")
       .eq(0)
       .within(() => {
         cy.get("input[type=checkbox]").check({ force: true });
@@ -77,14 +77,14 @@ describe("user subscriptions table", () => {
 
   describe("Deleting subscriptions", () => {
     it("Deletes a single subscription", () => {
-      cy.dataCy("subscription-row")
+      cy.dataCy("leafygreen-table-row")
         .eq(0)
         .within(() => {
           cy.get("input[type=checkbox]").check({ force: true });
         });
       cy.dataCy("delete-some-button").click();
       cy.validateToast("success", "Deleted 1 subscription.");
-      cy.dataCy("subscription-row").should("have.length", 2);
+      cy.dataCy("leafygreen-table-row").should("have.length", 2);
     });
   });
 });

cypress/integration/version/task_duration.ts

@@ -7,16 +7,18 @@ describe("Task Duration Tab", () => {
       const filterText = "test-annotation";
       // Apply text filter.
       cy.dataCy("task-name-filter-popover").click();
-      cy.dataCy("input-filter").type(`${filterText}{enter}`);
-      cy.dataCy("task-duration-table-row").should("have.length", 1);
+      cy.dataCy("task-name-filter-popover-input-filter").type(
+        `${filterText}{enter}`
+      );
+      cy.dataCy("leafygreen-table-row").should("have.length", 1);
       cy.location("search").should(
         "include",
         `duration=DESC&page=0&taskName=${filterText}`
       );
       // Clear text filter.
       cy.dataCy("task-name-filter-popover").click();
-      cy.dataCy("input-filter").clear();
-      cy.dataCy("input-filter").type("{enter}");
+      cy.dataCy("task-name-filter-popover-input-filter").clear();
+      cy.dataCy("task-name-filter-popover-input-filter").type("{enter}");
       cy.location("search").should("include", `page=0`);
     });
 
@@ -26,15 +28,15 @@ describe("Task Duration Tab", () => {
       cy.dataCy("tree-select-options").within(() =>
         cy.contains("Running").click({ force: true })
       );
-      cy.dataCy("task-duration-table-row").should("have.length", 3);
+      cy.dataCy("leafygreen-table-row").should("have.length", 3);
       cy.location("search").should(
         "include",
         "duration=DESC&page=0&statuses=running-umbrella,started,dispatched"
       );
       // Clear status filter.
       cy.dataCy("status-filter-popover").click();
       cy.dataCy("tree-select-options").within(() =>
-        cy.contains("Running").click({ force: true })
+        cy.contains("Succeeded").click({ force: true })
       );
       cy.location("search").should("include", `duration=DESC&page=0`);
     });
@@ -43,16 +45,18 @@ describe("Task Duration Tab", () => {
       const filterText = "Lint";
       // Apply text filter.
       cy.dataCy("build-variant-filter-popover").click();
-      cy.dataCy("input-filter").type(`${filterText}{enter}`);
-      cy.dataCy("task-duration-table-row").should("have.length", 2);
+      cy.dataCy("build-variant-filter-popover-input-filter").type(
+        `${filterText}{enter}`
+      );
+      cy.dataCy("leafygreen-table-row").should("have.length", 2);
       cy.location("search").should(
         "include",
         `duration=DESC&page=0&variant=${filterText}`
       );
       // Clear text filter.
       cy.dataCy("build-variant-filter-popover").click();
-      cy.dataCy("input-filter").clear();
-      cy.dataCy("input-filter").type("{enter}");
+      cy.dataCy("build-variant-filter-popover-input-filter").clear();
+      cy.dataCy("build-variant-filter-popover-input-filter").type("{enter}");
       cy.location("search").should("include", `page=0`);
     });
 
@@ -61,19 +65,19 @@ describe("Task Duration Tab", () => {
       cy.location("search").should("include", "duration=DESC");
       const longestTask = "test-thirdparty";
       cy.contains(longestTask).should("be.visible");
-      cy.dataCy("task-duration-table-row")
-        .first()
-        .should("contain", longestTask);
+      cy.dataCy("leafygreen-table-row").first().should("contain", longestTask);
+      cy.dataCy("duration-sort-icon").click();
+      cy.location("search").should("not.include", "duration");
       cy.dataCy("duration-sort-icon").click();
       cy.location("search").should("include", "duration=ASC");
       const shortestTask = "test-auth";
       cy.contains(shortestTask).should("be.visible");
-      cy.dataCy("task-duration-table-row")
-        .first()
-        .should("contain", shortestTask);
+      cy.dataCy("leafygreen-table-row").first().should("contain", shortestTask);
     });
 
     it("clearing all filters resets to the default sort", () => {
+      cy.dataCy("duration-sort-icon").click();
+      cy.location("search").should("not.include", "duration");
       cy.dataCy("duration-sort-icon").click();
       cy.location("search").should("include", "duration=ASC");
       cy.contains("Clear all filters").click();
@@ -84,8 +88,13 @@ describe("Task Duration Tab", () => {
       const filterText = "this_does_not_exist";
 
       cy.dataCy("task-name-filter-popover").click();
-      cy.dataCy("input-filter").type(`${filterText}{enter}`);
-      cy.dataCy("task-duration-table-row").should("have.length", 0);
+      cy.dataCy("task-name-filter-popover-input-filter").type(
+        `${filterText}{enter}`
+      );
+      cy.dataCy("task-name-filter-popover-task-duration-table-row").should(
+        "have.length",
+        0
+      );
       cy.contains("No tasks found.").should("exist");
     });
   });