refactor clear bucket and try to verify folder creation

packages/common-components/src/Table/Table.tsx

@@ -62,6 +62,7 @@ export interface ITableProps {
   fullWidth?: boolean
   hover?: boolean
   dense?: boolean
+  testId?: string
 }
 
 const Table: React.FC<ITableProps> = ({
@@ -71,6 +72,7 @@ const Table: React.FC<ITableProps> = ({
   striped,
   hover,
   dense,
+  testId,
   ...rest
 }: ITableProps) => {
   const classes = useStyles()
@@ -87,6 +89,7 @@ const Table: React.FC<ITableProps> = ({
         },
         className
       )}
+      data-testid={`table-${testId}`}
       {...rest}
     >
       {children}

packages/files-ui/cypress/support/commands.ts

@@ -33,6 +33,11 @@ import { testPrivateKey, testAccountPassword, localHost } from "../fixtures/logi
 import { CustomizedBridge } from "./utils/CustomBridge"
 import "cypress-file-upload"
 import "cypress-pipe"
+import { BucketType } from "@chainsafe/files-api-client"
+
+Cypress.Commands.add("clearBucket", (bucketType: BucketType) => {
+  apiTestHelper.clearBucket(bucketType)
+})
 
 export interface Web3LoginOptions {
   url?: string
@@ -43,14 +48,6 @@ export interface Web3LoginOptions {
   clearTrashBucket?: boolean
 }
 
-Cypress.Commands.add("clearCsfBucket", () => {
-  apiTestHelper.clearBucket("csf")
-})
-
-Cypress.Commands.add("clearTrashBucket", ()  => {
-  apiTestHelper.clearBucket("trash")
-})
-
 Cypress.Commands.add(
   "web3Login",
   ({
@@ -91,15 +88,21 @@ Cypress.Commands.add(
       }
     })
     cy.visit(url)
-    homePage.appHeaderLabel().should("be.visible")
-
-    if (clearCSFBucket) {
-      cy.clearCsfBucket()
-    }
+      .then(() => {
+        if (clearCSFBucket) {
+          cy.log("clear csf")
+          apiTestHelper.clearBucket("csf")
+        }
+
+        if (clearTrashBucket) {
+          apiTestHelper.clearBucket("trash")
+        }
+      })
+      .then(() => {
+        cy.log("wait for header")
+        homePage.appHeaderLabel().should("be.visible")
 
-    if (clearTrashBucket) {
-      cy.clearTrashBucket()
-    }
+      })
   }
 )
 
@@ -122,18 +125,11 @@ declare global {
        * @param {String} options.url - (default: "http://localhost:3000") - what url to visit.
        * @param {Boolean} options.saveBrowser - (default: false) - save the browser to localstorage.
        * @param {Boolean} options.clearCSFBucket - (default: false) - whether any file in the csf bucket should be deleted.
+       * @param {Boolean} options.clearTrashBucket - (default: false) - whether any file in the trash bucket should be deleted.
        * @example cy.web3Login({saveBrowser: true, url: 'http://localhost:8080'})
        */
       web3Login: (options?: Web3LoginOptions) => Chainable
 
-      /**
-       * Removed any file or folder at the root of specifed bucket
-       * @param {String} apiUrlBase - what url to call for the api.
-       * @example cy.clearCsfBucket("https://stage.imploy.site/api/v1")
-       */
-      clearCsfBucket: () => Chainable
-      clearTrashBucket: () => Chainable
-
       /**
        * Use this when encountering race condition issues resulting in
        * cypress "detached from DOM" issues or clicking before an event

packages/files-ui/cypress/support/page-objects/homePage.ts

@@ -18,6 +18,7 @@ export const homePage = {
 
   // file browser row elements
   fileItemRow: () => cy.get("[data-cy=file-item-row]", { timeout: 20000 }),
+  fileTable: () => cy.get("[data-testid=table-home]", { timeout: 10000 }),
   fileItemName: () => cy.get("[data-cy=file-item-name]"),
   fileRenameInput: () => cy.get("[data-cy=rename-form] input"),
   fileRenameSubmitButton: () => cy.get("[data-cy=rename-submit-button]"),

packages/files-ui/cypress/support/utils/apiTestHelper.ts

@@ -1,6 +1,7 @@
 import axios from "axios"
 import { FilesApiClient } from "@chainsafe/files-api-client"
 import { BucketType } from "@chainsafe/files-api-client"
+import { navigationMenu } from "../page-objects/navigationMenu"
 
 const API_BASE_USE = "https://stage.imploy.site/api/v1"
 const REFRESH_TOKEN_KEY = "csf.refreshToken"
@@ -14,38 +15,35 @@ export const apiTestHelper = {
 
     const apiClient = new FilesApiClient({}, apiUrlBase, axiosInstance)
 
-    cy.window().then((win) => {
-      apiClient
-        .getRefreshToken({
-          refresh: win.sessionStorage.getItem(REFRESH_TOKEN_KEY) || ""
-        })
-        .then((tokens) => {
-          apiClient.setToken(tokens.access_token.token)
-          apiClient.listBuckets([bucketType]).then((buckets) => {
-            apiClient
-              .getBucketObjectChildrenList(buckets[0].id, { path: "/" })
-              .then((items) => {
-                const toDelete = items.map(
-                  ({ name }: { name: string }) => `/${name}`
-                )
-                console.log(`Deleting bucket ${bucketType} ${JSON.stringify(toDelete)}`)
-                apiClient.removeBucketObject(buckets[0].id, { paths: toDelete }).catch()
-              })
-              .catch(console.error)
-          })
-        })
-    })
+    cy.window()
+      .then(async (win) => {
+        const tokens = await apiClient.getRefreshToken({ refresh: win.sessionStorage.getItem(REFRESH_TOKEN_KEY) || "" })
+
+        await apiClient.setToken(tokens.access_token.token)
+        const buckets = await apiClient.listBuckets([bucketType])
+        const items = await apiClient.getBucketObjectChildrenList(buckets[0].id, { path: "/" })
+        const toDelete = items.map(
+          ({ name }: { name: string }) => `/${name}`
+        )
+        cy.log(`Deleting bucket ${bucketType} ${JSON.stringify(toDelete)}`)
+        await apiClient.removeBucketObject(buckets[0].id, { paths: toDelete })
+        cy.log("done deleting")
+      })
   },
   // create a folder with a fill path like "/new folder"
   // you can create subfolders on the fly too with "/first/sub folder"
-  createFolder(folderPath: string,  apiUrlBase: string = API_BASE_USE){
+  createFolder(
+    folderPath: string,
+    expectedLength: number,
+    apiUrlBase: string = API_BASE_USE
+  ){
     const axiosInstance = axios.create({
       // Disable the internal Axios JSON deserialization as this is handled by the client
       transformResponse: []
     })
 
     const apiClient = new FilesApiClient({}, apiUrlBase, axiosInstance)
-
+    cy.log("creating folder", folderPath)
     cy.window().then((win) => {
       apiClient
         .getRefreshToken({
@@ -60,10 +58,20 @@ export const apiTestHelper = {
             if(!bucketId) throw new Error("No csf bucket")
 
             await apiClient.addBucketDirectory(bucketId, { path: folderPath })
+            cy.log("done with creating folder")
           } catch(e){
             console.error(e)
           }
         })
     })
+      .then(() => {
+        navigationMenu.binNavButton().click()
+        navigationMenu.homeNavButton().click()
+
+        const firstFolderName = folderPath.split("/")[1]
+        cy.get("[data-testid=table-home]", { timeout: 10000 })
+          .contains(firstFolderName)
+          .should("have.length", expectedLength)
+      })
   }
 }

packages/files-ui/cypress/tests/file-management-spec.ts

@@ -9,6 +9,16 @@ describe("File management", () => {
 
   context("desktop", () => {
 
+    // Cypress._.times(100, () => {
+    it.only("Folder creation", () => {
+      cy.web3Login({ clearCSFBucket: true })
+
+      apiTestHelper.createFolder("/test folder 1/subfolderA", 1)
+      apiTestHelper.createFolder("/test folder 2/subfolderB",  2)
+      apiTestHelper.createFolder("/test folder 3/subfolderC",  3)
+    })
+    // })
+
     it("can create folders and cancel modal", () => {
       cy.web3Login({ clearCSFBucket: true })
 
@@ -153,7 +163,7 @@ describe("File management", () => {
       cy.web3Login({ clearCSFBucket: true, clearTrashBucket: true })
 
       // create a folder
-      apiTestHelper.createFolder(`/${folderName}`)
+      apiTestHelper.createFolder(`/${folderName}`, 1)
       homePage.fileItemRow().should("have.length", 1)
 
       // delete the folder via the menu option 

packages/files-ui/src/Components/Modules/FileBrowsers/views/FilesList.tsx

@@ -828,6 +828,7 @@ const FilesList = ({ isShared = false }: Props) => {
               striped={true}
               hover={true}
               className={clsx(loadingCurrentPath && classes.fadeOutLoading)}
+              testId="home"
             >
               {desktop && (
                 <TableHead className={classes.tableHead}>