Programmatic folder creation for tests

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/fixtures/filesTestData.ts

@@ -1 +1,2 @@
-export const folderName = "Testing"
+export const folderName = "Testing"
+export const folderPath = `/${folderName}`

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

@@ -33,33 +33,26 @@ 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"
 import { navigationMenu } from "./page-objects/navigationMenu"
 
-export type Storage = Record<string, string>[];
+Cypress.Commands.add("clearBucket", (bucketType: BucketType) => {
+  apiTestHelper.clearBucket(bucketType)
+})
 
 export interface Web3LoginOptions {
   url?: string
-  apiUrlBase?: string
   saveBrowser?: boolean
   useLocalAndSessionStorage?: boolean
   clearCSFBucket?: boolean
   clearTrashBucket?: boolean
 }
 
-Cypress.Commands.add("clearCsfBucket", (apiUrlBase: string) => {
-  apiTestHelper.clearBucket(apiUrlBase, "csf")
-})
-
-Cypress.Commands.add("clearTrashBucket", (apiUrlBase: string) => {
-  apiTestHelper.clearBucket(apiUrlBase, "trash")
-})
-
 Cypress.Commands.add(
   "web3Login",
   ({
     saveBrowser = false,
     url = localHost,
-    apiUrlBase = "https://stage.imploy.site/api/v1",
     clearCSFBucket = false,
     clearTrashBucket = false
   }: Web3LoginOptions = {}) => {
@@ -95,21 +88,24 @@ Cypress.Commands.add(
       }
       homePage.appHeaderLabel().should("be.visible")
     })
+
     cy.visit(url)
     homePage.appHeaderLabel().should("be.visible")
 
     if (clearCSFBucket) {
-      cy.clearCsfBucket(apiUrlBase)
+      apiTestHelper.clearBucket("csf")
     }
 
     if (clearTrashBucket) {
-      cy.clearTrashBucket(apiUrlBase)
+      apiTestHelper.clearBucket("trash")
     }
 
     if(clearTrashBucket || clearCSFBucket){
       navigationMenu.binNavButton().click()
       navigationMenu.homeNavButton().click()
     }
+
+    homePage.appHeaderLabel().should("be.visible")
   }
 )
 
@@ -131,21 +127,13 @@ declare global {
       /**
        * Login using Metamask to an instance of Files.
        * @param {String} options.url - (default: "http://localhost:3000") - what url to visit.
-       * @param {String} apiUrlBase - (default: "https://stage.imploy.site/api/v1") - what url to call for the api.
        * @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: (apiUrlBase: string) => Chainable
-      clearTrashBucket: (apiUrlBase: string) => 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

@@ -1,6 +1,4 @@
 import { basePage } from "./basePage"
-import { folderName } from "../../fixtures/filesTestData"
-import { createFolderModal } from "./modals/createFolderModal"
 import { fileUploadModal } from "./modals/fileUploadModal"
 
 export const homePage = {
@@ -15,6 +13,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]"),
   fileItemName: () => cy.get("[data-cy=file-item-name]"),
   fileRenameInput: () => cy.get("[data-cy=rename-form] input"),
   fileRenameSubmitButton: () => cy.get("[data-cy=rename-submit-button]"),
@@ -40,14 +39,6 @@ export const homePage = {
     // ensure upload is complete before proceeding
     fileUploadModal.body().should("not.exist")
     this.uploadStatusToast().should("not.exist")
-  },
-
-  createFolder(name: string = folderName) {
-    this.newFolderButton().click()
-    createFolderModal.folderNameInput().type(name)
-    createFolderModal.createButton().safeClick()
-    createFolderModal.body().should("not.exist")
-    this.fileItemName().contains(name)
   }
 
 }

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

@@ -1,37 +1,75 @@
 import axios from "axios"
 import { FilesApiClient } from "@chainsafe/files-api-client"
 import { BucketType } from "@chainsafe/files-api-client"
+import { navigationMenu } from "../page-objects/navigationMenu"
+import { homePage } from "../page-objects/homePage"
 
+const API_BASE_USE = "https://stage.imploy.site/api/v1"
 const REFRESH_TOKEN_KEY = "csf.refreshToken"
 
 export const apiTestHelper = {
-  clearBucket(apiUrlBase: string, bucketType: BucketType) {
-    const axiosInstance = axios.create({
-      // Disable the internal Axios JSON de serialization as this is handled by the client
-      transformResponse: []
-    })
+  clearBucket(bucketType: BucketType) {
+    // Disable the internal Axios JSON deserialization as this is handled by the client
+    const axiosInstance = axios.create({ transformResponse: [] })
+    const apiClient = new FilesApiClient({}, API_BASE_USE, axiosInstance)
 
-    const apiClient = new FilesApiClient({}, apiUrlBase, axiosInstance)
+    return new Cypress.Promise(async (resolve) => {
+      cy.window()
+        .then(async (win) => {
+          const tokens = await apiClient.getRefreshToken({ refresh: win.sessionStorage.getItem(REFRESH_TOKEN_KEY) || "" })
 
-    cy.window().then((win) => {
-      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")
+          resolve()
         })
-        .then((tokens) => {
+    })
+  },
+  // create a folder with a full path like "/new folder"
+  // you can create subfolders on the fly too with "/first/sub folder"
+  createFolder(folderPath: string){
+    // Disable the internal Axios JSON deserialization as this is handled by the client
+    const axiosInstance = axios.create({ transformResponse: [] })
+    const apiClient = new FilesApiClient({}, API_BASE_USE, axiosInstance)
+
+    return new Cypress.Promise((resolve, reject) => {
+      cy.window().then(async (win) => {
+        cy.log("creating folder", folderPath)
+
+        try{
+          const tokens = await apiClient
+            .getRefreshToken({
+              refresh: win.sessionStorage.getItem(REFRESH_TOKEN_KEY) || ""
+            })
+
           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()
-              })
-          })
-        })
+          const buckets = await apiClient.listBuckets()
+          const bucketId = buckets.find((b) => b.type === "csf")?.id
+
+          if(!bucketId) throw new Error("No csf bucket")
+
+          await apiClient.addBucketDirectory(bucketId, { path: folderPath })
+          cy.log("done with creating folder")
+          resolve()
+        } catch(e){
+          console.error(e)
+          reject(e)
+        }
+
+        navigationMenu.binNavButton().click()
+        navigationMenu.homeNavButton().click()
+
+        const firstFolderName = folderPath.split("/")[1]
+        homePage.fileItemName().contains(firstFolderName)
+      })
     })
+
+
   }
 }

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

@@ -1,8 +1,9 @@
 import { binPage } from "../support/page-objects/binPage"
 import { homePage } from "../support/page-objects/homePage"
 import { navigationMenu } from "../support/page-objects/navigationMenu"
-import { folderName } from "../fixtures/filesTestData"
+import { folderName, folderPath } from "../fixtures/filesTestData"
 import "cypress-pipe"
+import { apiTestHelper } from "../support/utils/apiTestHelper"
 import { createFolderModal } from "../support/page-objects/modals/createFolderModal"
 import { deleteFileModal } from "../support/page-objects/modals/deleteFileModal"
 import { fileUploadModal } from "../support/page-objects/modals/fileUploadModal"
@@ -51,8 +52,7 @@ describe("File management", () => {
       homePage.fileItemName().invoke("text").as("fileName")
 
       // create a folder 
-      homePage.createFolder(folderName)
-      homePage.fileItemRow().should("have.length", 2)
+      apiTestHelper.createFolder(folderPath)
 
       cy.get("@fileName").then(($fileName) => {
         // select the file and move it to the folder
@@ -217,8 +217,7 @@ describe("File management", () => {
       cy.web3Login({ clearCSFBucket: true, clearTrashBucket: true })
 
       // create a folder
-      homePage.createFolder(folderName)
-      homePage.fileItemRow().should("have.length", 1)
+      apiTestHelper.createFolder(folderPath)
 
       // delete the folder via the menu option 
       homePage.fileItemKebabButton().first().click()

packages/files-ui/package.json

@@ -77,9 +77,8 @@
     "build": "craco --max_old_space_size=4096 build",
     "sentry": "(export REACT_APP_SENTRY_RELEASE=$(sentry-cli releases propose-version); node scripts/sentry.js)",
     "release": "(export REACT_APP_SENTRY_RELEASE=$(sentry-cli releases propose-version); yarn compile && yarn build && node scripts/sentry.js)",
-    "test": "yarn test:clean && cypress open",
-    "test:ci": "yarn test:clean && cypress run --browser chrome --headless",
-    "test:clean": "rimraf cypress/fixtures/storage",
+    "test": "cypress open",
+    "test:ci": "cypress run --browser chrome --headless",
     "analyze": "source-map-explorer 'build/static/js/*.js'",
     "extract": "lingui extract",
     "compile": "lingui compile",

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

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