Sort CIDs table test (#2208)

* sort Buckets table test

* sort in cids table test

* Revert "sort Buckets table test"

This reverts commit e5cfb60.

* variables and cy names improved in cids

Co-authored-by: Michael Yankelev <12774278+FSM1@users.noreply.github.com>

packages/storage-ui/cypress/support/page-objects/cidsPage.ts

@@ -13,10 +13,11 @@ export const cidsPage = {
 
  // cid browser row elements
  searchCidInput: () => cy.get("[data-testid=input-search-cid]"),
- cidTableHeader: () => cy.get("[data-cy=table-header-cid]"),
- createdTableHeader: () => cy.get("[data-cy=table-header-created]"),
- sizeTableHeader: () => cy.get("[data-cy=table-header-size]"),
- statusTableHeader: () => cy.get("[data-cy=table-header-status]"),
+ cidsTableHeaderName: () => cy.get("[data-cy=cids-table-header-name]"),
+ cidsTableHeaderCid: () => cy.get("[data-cy=cids-table-header-cid]"),
+ cidsTableHeaderCreated: () => cy.get("[data-cy=cids-table-header-created]"),
+ cidsTableHeaderSize: () => cy.get("[data-cy=cids-table-header-size]"),
+ cidsTableHeaderStatus: () => cy.get("[data-cy=cids-table-header-status]"),
  cidItemRow: () => cy.get("[data-cy=row-cid-item]", { timeout: 20000 }),
  cidNameCell: () => cy.get("[data-cy=cell-pin-name]"),
  cidCell: () => cy.get("[data-cy=cell-pin-cid]"),

packages/storage-ui/cypress/tests/cid-management.cy.ts

@@ -103,5 +103,35 @@ describe("CID management", () => {
  cidsPage.searchCidInput().clear()
  cidsPage.cidItemRow().should("have.length", 2)
  })
+
+ it("can sort by name or created at in cids table", () => {
+ cy.web3Login({ withNewSession: true })
+ navigationMenu.cidsNavButton().click()
+
+ const pin1 = "Pin 1"
+ const pin2 = "Pin 2"
+ cidsPage.addPinnedCid({ name: pin1 })
+ cidsPage.addPinnedCid({ name: pin2, cid: testCidAlternative })
+ cidsPage.cidItemRow().should("have.length", 2)
+
+ // by default should be sort by date uploading in descending order (newest first)
+ cidsPage.cidNameCell().eq(0).should("have.text", pin2)
+ cidsPage.cidNameCell().eq(1).should("have.text", pin1)
+
+ // ensure sort by created in descending order (oldest first)
+ cidsPage.cidsTableHeaderCreated().click()
+ cidsPage.cidNameCell().eq(0).should("have.text", pin1)
+ cidsPage.cidNameCell().eq(1).should("have.text", pin2)
+
+ // ensure sort by name in descending order (Z-A)
+ cidsPage.cidsTableHeaderName().click()
+ cidsPage.cidNameCell().eq(0).should("have.text", pin2)
+ cidsPage.cidNameCell().eq(1).should("have.text", pin1)
+
+ // ensure sort by name in ascending order (A-Z)
+ cidsPage.cidsTableHeaderName().click()
+ cidsPage.cidNameCell().eq(0).should("have.text", pin1)
+ cidsPage.cidNameCell().eq(1).should("have.text", pin2)
+ })
  })
 })

packages/storage-ui/src/Components/Pages/CidsPage.tsx

@@ -216,7 +216,7 @@ const CidsPage = () => {
  className={classes.tableRow}
  >
  <TableHeadCell
- data-cy="table-header-name"
+ data-cy="cids-table-header-name"
  sortButtons={true}
  align="center"
  onSortChange={() => handleSortToggle("name")}
@@ -226,15 +226,15 @@ const CidsPage = () => {
  <Trans>Name</Trans>
  </TableHeadCell>
  <TableHeadCell
- data-cy="table-header-cid"
+ data-cy="cids-table-header-cid"
  sortButtons={false}
  align="center"
  >
  <Trans>Cid</Trans>
  </TableHeadCell>
  {desktop && <>
  <TableHeadCell
- data-cy="table-header-created"
+ data-cy="cids-table-header-created"
  sortButtons={true}
  onSortChange={() => handleSortToggle("date_uploaded")}
  sortDirection={sortColumn === "date_uploaded" ? sortDirection : undefined}
@@ -244,7 +244,7 @@ const CidsPage = () => {
  <Trans>Created</Trans>
  </TableHeadCell>
  <TableHeadCell
- data-cy="table-header-size"
+ data-cy="cids-table-header-size"
  sortButtons={true}
  onSortChange={() => handleSortToggle("size")}
  sortDirection={sortColumn === "size" ? sortDirection : undefined}
@@ -254,7 +254,7 @@ const CidsPage = () => {
  <Trans>Size</Trans>
  </TableHeadCell>
  <TableHeadCell
- data-cy="table-header-status"
+ data-cy="cids-table-header-status"
  sortButtons={false}
  align="center"
  >