additional ui tests for file sharing (#2012)

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

packages/files-ui/cypress/fixtures/filesTestData.ts

@@ -5,5 +5,6 @@ export const sharingExplainerKey = "csf.dismissedSharingExplainer"
 export const sharedFolderName = "Share"
 export const sharedFolderEditedName = "Edited"
 export const validEthAddress = "0x2eab9cfa0b5e8e82a73da026254d50567f52d3ce"
-export const validUsername = "filesUserB"
-export const validShareKey = "0x03b53864fc991432dd2a729ee1f876e79d20788efcbe978a4a00db3f9fb24590db"
+export const validUsernameA = "filesusera"
+export const validUsernameB = "filesuserb"
+export const validShareKey = "0x02c62b63ef1bd5ead99deb91a74bc7db4bc60d64a6d65a68461f3cf03d8c75da40"

packages/files-ui/cypress/support/page-objects/modals/editSharedFolderModal.ts

@@ -6,6 +6,13 @@ export const editSharedFolderModal = {
   folderNameInput: () => cy.get("[data-cy=input-shared-folder-name]"),
   updateButton: () => cy.get("[data-cy=button-update-shared-folder]", { timeout: 10000 }),
   userLookupResult: () => cy.get("[data-cy=user-lookup-result]", { timeout: 10000 }),
+  addedUserBox: () => cy.get("[data-cy=container-added-user]"),
+  addedUserIcon: () => cy.get("[data-cy=container-user-icon]"),
+  addedUserName: () => cy.get("[data-cy=label-added-user]"),
+  userPermissionDropDown: () => cy.get("[data-testid=dropdown-title-user-permission]"),
+  userViewOnlyDropdownOption: () => cy.get("[data-testid=dropdown-user-permission-read]"),
+  userCanEditDropdownOption: () => cy.get("[data-testid=dropdown-user-permission-write]"),
+  removeUserButton: () => cy.get("[data-testid=button-remove-user-from-share]"),
   // link sharing related elements
   shareLink: () => cy.get("[data-cy=link-share]"),
   activeShareLink: () => cy.get("[data-cy=link-active-share]"),
@@ -14,7 +21,7 @@ export const editSharedFolderModal = {
   linkKebabMenu: () => cy.get("[data-testid=icon-link-kebab]"),
   deleteLinkMenuOption: () => cy.get("[data-cy=menu-delete-active-link]"),
   linkPermissionDropdown: () => cy.get("[data-testid=dropdown-title-link-permission]"),
-  viewOnlyDropdownOption: () => cy.get("[data-testid=dropdown-link-permission-read]"),
-  canEditDropdownOption: () => cy.get("[data-testid=dropdown-link-permission-write]"),
+  linkViewOnlyDropdownOption: () => cy.get("[data-testid=dropdown-link-permission-read]"),
+  linkCanEditDropdownOption: () => cy.get("[data-testid=dropdown-link-permission-write]"),
   createLinkButton: () => cy.get("[data-cy=button-create-link]")
 }

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

@@ -9,8 +9,12 @@ export const sharedPage = {
   ...fileBrowser,
 
   createSharedFolderButton: () => cy.get("[data-cy=button-create-a-shared-folder]"),
-  sharedFolderItemName: () => cy.get("[data-cy=cell-shared-folder-item-name]"),
   sharedFolderItemRow: () => cy.get("[data-cy=row-shared-folder-item]", { timeout: 20000 }),
+  sharedFolderIcon: () => cy.get("[data-cy=cell-shared-folder-icon]"),
+  sharedFolderItemName: () => cy.get("[data-cy=cell-shared-folder-item-name]"),
+  shareOwnerCell: () => cy.get("[data-cy=cell-share-owner]"),
+  sharedWithCell: () => cy.get("[data-cy=cell-shared-with]"),
+  sharedFolderSizeCell: () => cy.get("[data-cy=cell-shared-folder-size]"),
   shareRenameInput: () => cy.get("[data-cy=input-rename-share]"),
 
   // kebab menu elements

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

@@ -2,7 +2,8 @@ import { createSharedFolderModal } from "../support/page-objects/modals/createSh
 import { deleteSharedFolderModal } from "../support/page-objects/modals/deleteSharedFolderModal"
 import { fileUploadModal } from "../support/page-objects/modals/fileUploadModal"
 import { navigationMenu } from "../support/page-objects/navigationMenu"
-import { sharingExplainerKey, sharedFolderName, sharedFolderEditedName, validUsername } from "../fixtures/filesTestData"
+import { sharedFolderName, sharedFolderEditedName } from "../fixtures/filesTestData"
+import { sharingExplainerKey, validUsernameA, validEthAddress, validShareKey } from "../fixtures/filesTestData"
 import { sharedPage } from "../support/page-objects/sharedPage"
 import { uploadCompleteToast } from "../support/page-objects/toasts/uploadCompleteToast"
 import { viewOnlyShareLink } from "../fixtures/linkData"
@@ -12,14 +13,16 @@ import { editSharedFolderModal } from "../support/page-objects/modals/editShared
 
 describe("File Sharing", () => {
 
+  beforeEach(() => {
+    // intercept and stub the response to ensure the explainer is not displayed
+    cy.intercept("GET", "**/user/store", {
+      body: { [sharingExplainerKey]: "true" }
+    })
+  })
+
   context("desktop", () => {
 
     it("can create, add, delete a shared folder", () => {
-      // intercept and stub the response to ensure the explainer is not displayed
-      cy.intercept("GET", "**/user/store", {
-        body: { [sharingExplainerKey]: "true" }
-      })
-
       cy.web3Login({ deleteShareBucket: true })
 
       // create a shared folder
@@ -28,12 +31,21 @@ describe("File Sharing", () => {
       createSharedFolderModal.body().should("be.visible")
       createSharedFolderModal.folderNameInput().type(sharedFolderName)
       createSharedFolderModal.createButton().safeClick()
-      editSharedFolderModal.editPermissionInput().type(validUsername)
+      editSharedFolderModal.editPermissionInput().type(validUsernameA)
       editSharedFolderModal.userLookupResult().should("exist").click()
       editSharedFolderModal.updateButton().safeClick()
       editSharedFolderModal.body().should("not.exist")
       sharedPage.sharedFolderItemRow().should("have.length", 1)
 
+      // ensure share row contains all expected elements
+      sharedPage.sharedFolderItemRow().within(() => {
+        sharedPage.sharedFolderIcon().should("be.visible")
+        sharedPage.sharedFolderItemName().should("be.visible")
+        sharedPage.shareOwnerCell().should("be.visible")
+        sharedPage.sharedWithCell().should("be.visible")
+        sharedPage.sharedFolderSizeCell().should("be.visible")
+      })
+
       // upload to a shared folder
       sharedPage.sharedFolderItemName().contains(sharedFolderName)
         .should("be.visible")
@@ -67,10 +79,6 @@ describe("File Sharing", () => {
     })
 
     it("can leave a shared folder", () => {
-      cy.intercept("GET", "**/user/store", {
-        body: { [sharingExplainerKey]: "true" }
-      })
-
       cy.web3Login({ deleteShareBucket: true })
       cy.visit(viewOnlyShareLink)
       linkSharingConfirmation.viewAccessConfirmationLabel().should("be.visible")
@@ -85,5 +93,78 @@ describe("File Sharing", () => {
       // ensure the shared folder is no longer shown on the main share page
       sharedPage.sharedFolderItemRow().should("have.length", 0)
     })
+
+    it("can add and remove users to the share modal", () => {
+      cy.web3Login({ deleteShareBucket: true })
+
+      // create a shared folder
+      navigationMenu.sharedNavButton().click()
+      sharedPage.createSharedFolderButton().click()
+      createSharedFolderModal.body().should("be.visible")
+      createSharedFolderModal.folderNameInput().type(sharedFolderName)
+      createSharedFolderModal.createButton().safeClick()
+
+      // add to share via a username
+      editSharedFolderModal.editPermissionInput().type(validUsernameA)
+      editSharedFolderModal.userLookupResult().should("exist").click()
+      editSharedFolderModal.addedUserBox().should("have.length", 1)
+
+      // ensure user wrapper contains all expected elements
+      editSharedFolderModal.addedUserBox().within(() => {
+        editSharedFolderModal.addedUserIcon().should("have.length", 1)
+        editSharedFolderModal.addedUserName().should("have.length", 1)
+        editSharedFolderModal.userPermissionDropDown().should("have.length", 1)
+      })
+
+      // add to share via an ethereum address
+      editSharedFolderModal.editPermissionInput().type(validEthAddress)
+      editSharedFolderModal.userLookupResult().should("exist").click()
+      editSharedFolderModal.addedUserBox().should("have.length", 2)
+
+      // add to share via a sharekey
+      editSharedFolderModal.editPermissionInput().type(validShareKey)
+      editSharedFolderModal.userLookupResult().should("exist").click()
+      editSharedFolderModal.addedUserBox().should("have.length", 3)
+
+      // remove added users
+      editSharedFolderModal.removeUserButton().first().click()
+      editSharedFolderModal.addedUserBox().should("have.length", 2)
+      editSharedFolderModal.removeUserButton().first().click()
+      editSharedFolderModal.addedUserBox().should("have.length", 1)
+      editSharedFolderModal.removeUserButton().first().click()
+      editSharedFolderModal.addedUserBox().should("not.exist")
+    })
+
+    it("can update user permissions and save changes", () => {
+      cy.web3Login({ deleteShareBucket: true })
+
+      // create a shared folder
+      navigationMenu.sharedNavButton().click()
+      sharedPage.createSharedFolderButton().click()
+      createSharedFolderModal.body().should("be.visible")
+      createSharedFolderModal.folderNameInput().type(sharedFolderName)
+      createSharedFolderModal.createButton().safeClick()
+
+      // add a user to share
+      editSharedFolderModal.editPermissionInput().type(validUsernameA)
+      editSharedFolderModal.userLookupResult().should("exist").click()
+      editSharedFolderModal.addedUserBox().should("have.length", 1)
+
+      // ensure default access should be "view-only"
+      editSharedFolderModal.userPermissionDropDown().should("contain.text", "view")
+
+      // change access to "can-edit" and save changes
+      editSharedFolderModal.userPermissionDropDown().click()
+      editSharedFolderModal.userCanEditDropdownOption().click()
+      editSharedFolderModal.updateButton().safeClick()
+
+      // re-open and ensure changes were saved
+      sharedPage.fileItemKebabButton()
+        .should("be.visible")
+        .click()
+      sharedPage.manageAccessMenuOption().click()
+      editSharedFolderModal.body().should("be.visible")
+      editSharedFolderModal.userPermissionDropDown().should("contain.text", "edit")
+    })
   })
 })

packages/files-ui/cypress/tests/link-sharing-spec.ts

@@ -38,29 +38,29 @@ describe("Link Sharing", () => {
 
       // ensure "view-only" and "can-edit" options are present
       editSharedFolderModal.linkPermissionDropdown().click()
-      editSharedFolderModal.viewOnlyDropdownOption()
+      editSharedFolderModal.linkViewOnlyDropdownOption()
         .scrollIntoView()
         .should("be.visible")
-      editSharedFolderModal.canEditDropdownOption()
+      editSharedFolderModal.linkCanEditDropdownOption()
         .scrollIntoView()
         .should("be.visible")
 
       // create a "view-only" link
-      editSharedFolderModal.viewOnlyDropdownOption().click()
+      editSharedFolderModal.linkViewOnlyDropdownOption().click()
       editSharedFolderModal.createLinkButton().click()
       editSharedFolderModal.activeShareLink().should("have.length", 1)
       editSharedFolderModal.labelPermissionType().should("have.length", 1)
       editSharedFolderModal.copyLinkButton().should("have.length", 1)
 
       // ensure only the can-edit option is present if a "view-only" link exists
       editSharedFolderModal.linkPermissionDropdown().click()
-      editSharedFolderModal.viewOnlyDropdownOption().should("not.exist")
-      editSharedFolderModal.canEditDropdownOption()
+      editSharedFolderModal.linkViewOnlyDropdownOption().should("not.exist")
+      editSharedFolderModal.linkCanEditDropdownOption()
         .scrollIntoView()
         .should("be.visible")
 
       // create a "can-edit" link
-      editSharedFolderModal.canEditDropdownOption().click()
+      editSharedFolderModal.linkCanEditDropdownOption().click()
       editSharedFolderModal.createLinkButton().click()
       editSharedFolderModal.activeShareLink().should("have.length", 2)
       editSharedFolderModal.labelPermissionType().should("have.length", 2)

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

@@ -330,9 +330,13 @@ const ManageSharedFolder = ({ onClose, bucketToEdit }: ICreateOrManageSharedFold
         ].map((sharedFolderUser) => <div
           key={sharedFolderUser.user.uuid}
           className={classes.addedUserBox}
+          data-cy="container-added-user"
         >
           <div className={classes.flexContainer}>
-            <div className={classes.hashIcon}>
+            <div
+              className={classes.hashIcon}
+              data-cy="container-user-icon"
+            >
               <Hashicon
                 value={sharedFolderUser.user.uuid}
                 size={28}
@@ -341,12 +345,14 @@ const ManageSharedFolder = ({ onClose, bucketToEdit }: ICreateOrManageSharedFold
             <Typography
               className={classes.addedUserLabel}
               component="p"
+              data-cy="label-added-user"
             >
               <UserName user={sharedFolderUser.user}/>
             </Typography>
           </div>
           <div className={classes.flexContainer}>
             <PermissionsDropdown
+              testId="user-permission"
               selectedPermission={sharedFolderUser.permission}
               onViewPermissionClick={() => {
                 if (sharedFolderUser.permission === "write") {
@@ -372,6 +378,7 @@ const ManageSharedFolder = ({ onClose, bucketToEdit }: ICreateOrManageSharedFold
             <Button
               variant="link"
               className={classes.crossButton}
+              testId="remove-user-from-share"
               onClick={() => {
                 setHasPermissionsChanged(true)
                 if (sharedFolderUser.permission === "read") {

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

@@ -276,6 +276,7 @@ const SharedFolderRow = ({ bucket, handleRename, openSharedFolder, handleDeleteS
       >
         {desktop &&
         <TableCell
+          data-cy="cell-shared-folder-icon"
           className={classes.folderIcon}
           onClick={(e) => onFolderClick(e)}
         >
@@ -316,15 +317,18 @@ const SharedFolderRow = ({ bucket, handleRename, openSharedFolder, handleDeleteS
           }
         </TableCell>
         {desktop &&
-        <TableCell align="left">
+        <TableCell
+          align="left"
+          data-cy="cell-share-owner"
+        >
           <UserBubble
             tooltip={ownerName}
             hashIconValue={bucket.owners[0].uuid}
           />
         </TableCell>
         }
         <TableCell
-          data-cy="shared-folder-item-shared-with"
+          data-cy="cell-shared-with"
           align="left"
           className={classes.sharedUser}
         >
@@ -334,7 +338,10 @@ const SharedFolderRow = ({ bucket, handleRename, openSharedFolder, handleDeleteS
           />
         </TableCell>
         {desktop &&
-        <TableCell align="left">
+        <TableCell
+          align="left"
+          data-cy="cell-shared-folder-size"
+        >
           {formatBytes(size, 2)}
         </TableCell>
         }