hide ID column in on admin collections page (#141)

UMN-LATIS · Mar 30, 2023 · 46d7ec6 · 46d7ec6
1 parent 88ddcc5
commit 46d7ec6
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 46 deletions.
diff --git a/app/javascript/components/DataTables/AdminGroupsDataTable.vue b/app/javascript/components/DataTables/AdminGroupsDataTable.vue
@@ -6,7 +6,7 @@
       class="table table-striped table-bordered !tw-w-full"
       :options="options"
       :columns="columns"
-      :headers="['ID', 'Name', 'Urls', 'Members', 'Actions']"
+      :headers="['Name', 'Urls', 'Members', 'Actions']"
       @mounted="handleDataTableMounted"
       @click="handleDataTableClick"
     />
@@ -139,7 +139,6 @@ const options: DataTableOptions = {
 };
 
 const columns: DataTableColumnOptions[] = [
-  { data: "id" },
   {
     data: "name",
     render(data: string, type: string, row: Collection) {

diff --git a/cypress/e2e/adminGroups.cy.ts b/cypress/e2e/adminGroups.cy.ts
@@ -2,7 +2,6 @@ import { validateFlashMessage } from "../support/validateFlashMessage";
 
 //fixtures
 import admin from "../fixtures/users/admin.json";
-import user1 from "../fixtures/users/user1.json";
 
 describe("admin groups index page", () => {
   beforeEach(() => {
@@ -79,29 +78,26 @@ describe("admin groups index page", () => {
           cy.wrap($el).within(() => {
             const collection = collections[index];
 
-            // id
-            cy.get("td").eq(0).should("contain", collection.id);
-
             // collection name
             cy.get("td")
-              .eq(1)
+              .eq(0)
               .should("contain", collection.name)
               .should("contain", collection.description);
 
             // number of urls
             // group 0 has no urls, group 1 has 1 url, ...
-            cy.get("td").eq(2).should("contain", `${index} url`);
+            cy.get("td").eq(1).should("contain", `${index} url`);
 
             // number of members
             // group 0 has no members, group 1 has 1 member, ...
-            cy.get("td").eq(3).should("contain", `${index} member`);
+            cy.get("td").eq(2).should("contain", `${index} member`);
           });
         });
     });
 
     it("edits a collection name and description", () => {
       cy.get("[data-cy='groups-table']")
-        .contains(collections[0].id)
+        .contains("collection0")
         .closest("tr")
         .as("row0");
 
@@ -120,26 +116,23 @@ describe("admin groups index page", () => {
       // save the changes
       cy.get('[data-cy="update-group"]').contains("Save").click();
 
-      // check that the changes were saved
+      // The Table should be updated
       cy.get("[data-cy='groups-table'] tbody > tr")
         .should("have.length", 3)
         .contains("updated name")
         .closest("tr")
         .within(() => {
-          // verify that the id is still the same
-          cy.get("td").eq(0).should("contain", collections[0].id);
-
-          // and that the name and description were updated
-          cy.get("td").eq(1).should("contain", "updated name");
-          cy.get("td").eq(1).should("contain", "updated description");
+          // check that the name and description were updated
+          cy.get("td").eq(0).should("contain", "updated name");
+          cy.get("td").eq(0).should("contain", "updated description");
         });
     });
 
     it("removes a collection", () => {
       cy.get("[data-cy='groups-table'] tbody > tr")
         .eq(0)
         .within(() => {
-          cy.get("td").eq(1).should("contain", collections[0].name);
+          cy.get("td").eq(0).should("contain", collections[0].name);
           cy.contains("Delete").click();
         });
 
@@ -151,37 +144,27 @@ describe("admin groups index page", () => {
     });
 
     it("allows collections to be sorted by name", () => {
-      // check that it's in acending order by default
-      cy.get("[data-cy='groups-table'] tbody > tr").each(($el, index) => {
-        cy.wrap($el).within(() => {
-          const collection = collections[index];
-
-          // collection name
-          cy.get("td")
-            .eq(1)
-            .should("contain", collection.name)
-            .should("contain", collection.description);
-        });
-      });
+      const collectionNamesAsc = collections.map((c) => c.name).sort();
+      const collectionNamesDesc = [...collectionNamesAsc].reverse();
 
-      //   // click the name header to sort by name
-      cy.get("[data-cy='groups-table'] thead > tr")
-        .contains("Name")
-        .click() // hack: need to click twice to sort in test for some reason?
-        .click();
+      // check that it begins in acending order
+      cy.get("[data-cy='groups-table'] tbody > tr td:first-child").each(
+        ($el, index) => {
+          const expectedCollectionName = collectionNamesAsc[index];
+          cy.wrap($el).should("contain", expectedCollectionName);
+        }
+      );
+
+      // click the name header to reverse the sort by name
+      cy.get("[data-cy='groups-table'] thead > tr").contains("Name").click();
 
       // check that it's in descending order
-      cy.get("[data-cy='groups-table'] tbody > tr").each(($el, index) => {
-        cy.wrap($el).within(() => {
-          const collection = collections[collections.length - 1 - index];
-
-          // collection name
-          cy.get("td")
-            .eq(1)
-            .should("contain", collection.name)
-            .should("contain", collection.description);
-        });
-      });
+      cy.get("[data-cy='groups-table'] tbody > tr td:first-child").each(
+        ($el, index) => {
+          const expectedCollectionName = collectionNamesDesc[index];
+          cy.wrap($el).should("contain", expectedCollectionName);
+        }
+      );
     });
 
     it("links a group name, url, and members", () => {