Add test coverage for storage summary adjustments (#1536)

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

@@ -99,14 +99,14 @@ const useStyles = makeStyles(
     })
 )
 
-interface ICheckboxProps
-  extends Omit<React.HTMLProps<HTMLInputElement>, "value" | "label"> {
+interface ICheckboxProps extends Omit<React.HTMLProps<HTMLInputElement>, "value" | "label"> {
   className?: string
   label?: string | ReactNode
   error?: string
   value: boolean
   indeterminate?: boolean
-  onChange(event: FormEvent<HTMLInputElement>): void
+  onChange: (event: FormEvent<HTMLInputElement>) => void
+  testId?: string
 }
 
 const CheckboxInput: React.FC<ICheckboxProps> = ({
@@ -117,6 +117,7 @@ const CheckboxInput: React.FC<ICheckboxProps> = ({
   indeterminate = false,
   value,
   error,
+  testId,
   ...props
 }) => {
   const classes = useStyles(props)
@@ -126,7 +127,10 @@ const CheckboxInput: React.FC<ICheckboxProps> = ({
   }
 
   return (
-    <label className={clsx(classes.root, className)}>
+    <label
+      className={clsx(classes.root, className)}
+      data-testid={`checkbox-${testId}`}
+    >
       <input
         type="checkbox"
         {...props}

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

@@ -8,6 +8,8 @@ export const binPage = {
   // bin page specific file browser elements
   recoverSelectedButton: () => cy.get("[data-testId=button-recover-selected-file]"),
   deleteSelectedButton: () => cy.get("[data-testId=button-delete-selected-file]"),
+  permanentDeleteSuccessToast: () => cy.get("[data-testId=toast-deletion-success]", { timeout: 10000 }),
+  selectAllCheckbox: () => cy.get("[data-testId=checkbox-select-all]"),
 
   // kebab menu elements
   recoverMenuOption: () => cy.get("[data-cy=menu-recover]"),

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

@@ -11,7 +11,9 @@ export const homePage = {
   uploadButton: () => cy.get("[data-cy=button-upload-file]"),
   moveSelectedButton: () => cy.get("[data-testId=button-move-selected-file]"),
   deleteSelectedButton: () => cy.get("[data-testId=button-delete-selected-file]"),
+  selectAllCheckbox: () => cy.get("[data-testId=checkbox-select-all]"),
   uploadStatusToast: () => cy.get("[data-testId=toast-upload-status]", { timeout: 10000 }),
+  deleteSuccessToast: () => cy.get("[data-testId=toast-deletion-success]", { timeout: 10000 }),
   fileRenameInput: () => cy.get("[data-cy=rename-form] input"),
   fileRenameSubmitButton: () => cy.get("[data-cy=rename-submit-button]"),
   fileRenameErrorLabel: () => cy.get("[data-cy=rename-form] span.minimal.error"),

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

@@ -5,7 +5,7 @@ export const navigationMenu = {
   homeNavButton: () => cy.get("[data-cy=home-nav]"),
   binNavButton: () => cy.get("[data-cy=bin-nav]"),
   settingsNavButton: () => cy.get("[data-cy=settings-nav]"),
-  spaceUsedLabel: () => cy.get("[data-cy=label-space-used]"),
+  spaceUsedLabel: () => cy.get("[data-cy=label-space-used]", { timeout: 10000 }),
   spaceUsedProgressBar: () => cy.get("[data-cy=progress-bar-space-used]"),
   sendFeedbackNavButton: () => cy.get("[data-cy=send-feedback-nav]"),
   // mobile view only

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

@@ -248,7 +248,7 @@ describe("File management", () => {
       binPage.recoverMenuOption().click()
       recoverItemModal.folderList().should("exist")
       recoverItemModal.folderList().contains("Home").click()
-      recoverItemModal.recoverButton().click()
+      recoverItemModal.recoverButton().safeClick()
       binPage.fileItemRow().should("not.exist")
 
       // ensure recovered file is correct
@@ -300,7 +300,7 @@ describe("File management", () => {
       binPage.recoverMenuOption().click()
       recoverItemModal.folderList().should("exist")
       recoverItemModal.folderList().contains("Home").click()
-      recoverItemModal.recoverButton().click()
+      recoverItemModal.recoverButton().safeClick()
       binPage.fileItemRow().should("not.exist")
 
       // ensure recovered folder is correct
@@ -350,5 +350,69 @@ describe("File management", () => {
       createFolderModal.errorLabel().should("be.visible")
       createFolderModal.body().should("contain.text", "Name too long")
     })
+
+    it("can see storage space summary updated accordingly", () => {
+      cy.web3Login({ clearCSFBucket: true, clearTrashBucket: true })
+
+      // Make sure elements exist and that we are starting with 0
+      navigationMenu.spaceUsedProgressBar().should("be.visible")
+      navigationMenu.spaceUsedLabel().should("contain.text", "0 Bytes")
+
+      // upload a file and ensure the storage space label adjusts
+      homePage.uploadFile("../fixtures/uploadedFiles/logo.png")
+      navigationMenu.spaceUsedLabel().should("not.contain.text", "0 Bytes")
+
+      // delete the file from the bin and ensure the storage space label adjusts
+      homePage.fileItemKebabButton().click()
+      homePage.deleteMenuOption().click()
+      deleteFileModal.confirmButton().safeClick()
+      homePage.deleteSuccessToast().should("not.exist")
+      navigationMenu.binNavButton().click()
+      binPage.fileItemKebabButton().click()
+      binPage.deleteMenuOption().click()
+      deleteFileModal.confirmButton().safeClick()
+      binPage.permanentDeleteSuccessToast().should("not.exist")
+      navigationMenu.spaceUsedLabel().should("contain.text", "0 Bytes")
+    })
+
+    it("can delete and recover multiple files", () => {
+      cy.web3Login({ clearCSFBucket: true, clearTrashBucket: true })
+
+      // upload 2 files
+      homePage.uploadFile("../fixtures/uploadedFiles/logo.png")
+      homePage.uploadFile("../fixtures/uploadedFiles/text-file.txt")
+      homePage.fileItemRow().should("have.length", 2)
+
+      // store their file names as cypress aliases for later comparison
+      homePage.fileItemName().eq(0).invoke("text").as("fileNameA")
+      homePage.fileItemName().eq(1).invoke("text").as("fileNameB")
+
+      // delete both of the files in the same action
+      homePage.selectAllCheckbox().click()
+      homePage.deleteSelectedButton().click()
+      deleteFileModal.confirmButton().safeClick()
+      homePage.deleteSuccessToast().should("not.exist")
+      homePage.fileItemRow().should("have.length", 0)
+
+      // recover both of the files in the same action
+      navigationMenu.binNavButton().click()
+      binPage.selectAllCheckbox().click()
+      binPage.recoverSelectedButton().click()
+      recoverItemModal.folderList().should("exist")
+      recoverItemModal.folderList().contains("Home").click()
+      recoverItemModal.recoverButton().safeClick()
+      binPage.fileItemRow().should("not.exist")
+
+      // return home and ensure both of the files were recovered
+      navigationMenu.homeNavButton().click()
+
+      cy.get("@fileNameA").then(($fileNameA) => {
+        homePage.fileItemName().should("contain.text", $fileNameA)
+      })
+
+      cy.get("@fileNameB").then(($fileNameB) => {
+        homePage.fileItemName().should("contain.text", $fileNameB)
+      })
+    })
   })
 })

packages/files-ui/cypress/tests/main-navigation-spec.ts

@@ -19,11 +19,6 @@ describe("Main Navigation", () => {
       cy.url().should("include", "/settings")
     })
 
-    // it("can see data storage summary info", () => {
-    //   navigationMenu.spaceUsedLabel().should("contain.text", "of 20 GB used")
-    //   navigationMenu.spaceUsedProgressBar().should("be.visible")
-    // })
-
     it.skip("can navigate to block survey via send feedback button", () => {
       // TODO: Andrew - find a way to check the button link, cypress doesn't support tabs #1084
     })

packages/files-ui/src/Components/Modules/FileBrowsers/BinFileBrowser.tsx

@@ -73,7 +73,8 @@ const BinFileBrowser: React.FC<IFileBrowserModuleProps> = ({ controls = false }:
       } ${t`deleted successfully`}`
       addToast({
         title: message,
-        type: "success"
+        type: "success",
+        testId: "permanent-deletion-success"
       })
       return Promise.resolve()
     } catch (error) {

packages/files-ui/src/Components/Modules/FileBrowsers/CSFFileBrowser.tsx

@@ -94,7 +94,8 @@ const CSFFileBrowser: React.FC<IFileBrowserModuleProps> = () => {
             } ${t`deleted successfully`}`
             const id = addToast({
               title: message,
-              type: "success"
+              type: "success",
+              testId: "deletion-success"
             })
             console.log(id)
           }

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

@@ -870,6 +870,7 @@ const FilesList = ({ isShared = false }: Props) => {
                       <CheckboxInput
                         value={selectedItems.length === items.length}
                         onChange={() => toggleAll()}
+                        testId="select-all"
                       />
                     </TableHeadCell>
                     <TableHeadCell>