Define modals in the test suite as separate objects

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

@@ -14,13 +14,5 @@ export const binPage = {
 
   // menu elements (bin view only)
   recoverMenuOption: () => cy.get("[data-cy=menu-recover]"),
-  deleteMenuOption: () => cy.get("[data-cy=menu-delete]"),
-
-  // recover modal elements
-  recoverFileModal: () => cy.get("[data-testId=modal-container-modal-recover-file]"),
-  folderList: () => cy.get("[data-cy=tree-folder-list]"),
-  cancelButton: () => cy.get("[data-cy=button-cancel-recovery]"),
-  recoverButton: () => cy.get("[data-cy=button-recover-file]"),
-  moveErrorLabel: () => cy.get("[data-cy=label-move-file-error-message]")
-
+  deleteMenuOption: () => cy.get("[data-cy=menu-delete]")
 }

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

@@ -1,20 +1,16 @@
 import { basePage } from "./basePage"
 import { folderName } from "../../fixtures/filesTestData"
-
-export const click = ($el: JQuery<HTMLElement>) => $el.trigger("click")
+import { createFolderModal } from "./modals/createFolderModal"
+import { fileUploadModal } from "./modals/fileUploadModal"
 
 export const homePage = {
   ...basePage,
 
   // main file browser elements
   newFolderButton: () => cy.get("[data-cy=button-new-folder]"),
   uploadButton: () => cy.get("[data-cy=button-upload-file]"),
-  uploadFileForm: () => cy.get("[data-cy=upload-file-form] input", { timeout: 20000 }),
   moveSelectedButton: () => cy.get("[data-testId=button-move-selected-file]"),
   deleteSelectedButton: () => cy.get("[data-testId=button-delete-selected-file]"),
-  deleteFileDialog: () => cy.get("[data-testid=modal-container-file-deletion]"),
-  deleteFileCancelButton: () => cy.get("[data-testid=button-cancel-deletion]"),
-  deleteFileConfirmButton: () => cy.get("[data-testid=button-confirm-deletion]", { timeout: 10000 }),
   uploadStatusToast: () => cy.get("[data-cy=upload-status-toast-message]", { timeout: 10000 }),
 
   // file browser row elements
@@ -25,20 +21,6 @@ export const homePage = {
   fileRenameErrorLabel: () => cy.get("[data-cy=rename-form] span.minimal.error"),
   fileItemKebabButton: () => cy.get("[data-testid=dropdown-title-fileDropdown]"),
 
-  // create folder modal elements
-  createFolderModal: () => cy.get("[data-cy=modal-create-folder]", { timeout: 10000 }),
-  folderNameInput: () => cy.get("[data-cy=input-folder-name]"),
-  cancelButton: () => cy.get("[data-cy=button-cancel-create-folder]"),
-  createButton: () => cy.get("[data-cy=button-create-folder]", { timeout: 10000 }),
-  folderCreationErrorLabel: () => cy.get("[data-cy=folder-creation-form] span.default.error"),
-
-  // upload modal elements
-  startUploadButton: () => cy.get("[data-testId=button-start-upload]", { timeout: 10000 }),
-  uploadCancelButton: () => cy.get("[data-testId=button-cancel-upload]"),
-  fileListRemoveButton: () => cy.get("[data-testid=button-remove-from-file-list]"),
-  fileUploadList: () => cy.get("[data-testid=file-list-fileUpload] li"),
-  fileUploadDropzone : () => cy.get("[data-testid=file-input-dropzone-fileUpload]"),
-
   // menu elements
   previewMenuOption: () => cy.get("[data-cy=menu-preview]"),
   downloadMenuOption: () => cy.get("[data-cy=menu-download]"),
@@ -50,21 +32,21 @@ export const homePage = {
   // helpers and convenience functions
   uploadFile(filePath: string) {
     this.uploadButton().click()
-    this.uploadFileForm().attachFile(filePath)
-    this.fileUploadList().should("have.length", 1)
-    this.fileListRemoveButton().should("be.visible")
-    this.startUploadButton().safeClick()
+    fileUploadModal.body().attachFile(filePath)
+    fileUploadModal.fileList().should("have.length", 1)
+    fileUploadModal.removeFileButton().should("be.visible")
+    fileUploadModal.uploadButton().safeClick()
 
     // ensure upload is complete before proceeding
-    this.uploadFileForm().should("not.exist")
+    fileUploadModal.body().should("not.exist")
     this.uploadStatusToast().should("not.exist")
   },
 
   createFolder(name: string = folderName) {
     this.newFolderButton().click()
-    this.folderNameInput().type(name)
-    this.createButton().safeClick()
-    this.createFolderModal().should("not.exist")
+    createFolderModal.folderNameInput().type(name)
+    createFolderModal.createButton().safeClick()
+    createFolderModal.body().should("not.exist")
     this.fileItemName().contains(name)
   }
 

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

@@ -0,0 +1,7 @@
+export const createFolderModal = {
+  body: () => cy.get("[data-cy=modal-create-folder]", { timeout: 10000 }),
+  cancelButton: () => cy.get("[data-cy=button-cancel-create-folder]"),
+  createButton: () => cy.get("[data-cy=button-create-folder]", { timeout: 10000 }),
+  errorLabel: () => cy.get("[data-cy=folder-creation-form] span.default.error"),
+  folderNameInput: () => cy.get("[data-cy=input-folder-name]")
+}

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

@@ -0,0 +1,5 @@
+export const deleteFileModal = {
+  body: () => cy.get("[data-testid=modal-container-file-deletion]"),
+  cancelButton: () => cy.get("[data-testid=button-cancel-deletion]"),
+  confirmButton: () => cy.get("[data-testid=button-confirm-deletion]", { timeout: 10000 })
+}

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

@@ -0,0 +1,8 @@
+export const fileUploadModal = {
+  body: () => cy.get("[data-cy=upload-file-form] input", { timeout: 20000 }),
+  cancelButton: () => cy.get("[data-testId=button-cancel-upload]"),
+  fileList: () => cy.get("[data-testid=file-list-fileUpload] li"),
+  removeFileButton: () => cy.get("[data-testid=button-remove-from-file-list]"),
+  uploadButton: () => cy.get("[data-testId=button-start-upload]", { timeout: 10000 }),
+  uploadDropzone : () => cy.get("[data-testid=file-input-dropzone-fileUpload]")
+}

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

@@ -0,0 +1,7 @@
+export const recoverFileModal = {
+  body: () => cy.get("[data-testId=modal-container-modal-recover-file]"),
+  cancelButton: () => cy.get("[data-cy=button-cancel-recovery]"),
+  errorLabel: () => cy.get("[data-cy=label-move-file-error-message]"),
+  folderList: () => cy.get("[data-cy=tree-folder-list]"),
+  recoverButton: () => cy.get("[data-cy=button-recover-file]")
+}

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

@@ -3,6 +3,10 @@ import { homePage } from "../support/page-objects/homePage"
 import { navigationMenu } from "../support/page-objects/navigationMenu"
 import { folderName } from "../fixtures/filesTestData"
 import "cypress-pipe"
+import { createFolderModal } from "../support/page-objects/modals/createFolderModal"
+import { deleteFileModal } from "../support/page-objects/modals/deleteFileModal"
+import { fileUploadModal } from "../support/page-objects/modals/fileUploadModal"
+import { recoverFileModal } from "../support/page-objects/modals/recoverFileModal"
 
 describe("File management", () => {
 
@@ -13,51 +17,50 @@ describe("File management", () => {
 
       // create a folder and see it in the file list
       homePage.newFolderButton().click()
-      homePage.folderNameInput().type(folderName)
-      homePage.createButton().safeClick()
-      homePage.createFolderModal().should("not.exist")
+      createFolderModal.folderNameInput().type(folderName)
+      createFolderModal.createButton().safeClick()
+      createFolderModal.body().should("not.exist")
       homePage.fileItemName().contains(folderName)
 
       // cancel and ensure that the create folder modal is dismissed
       homePage.newFolderButton().click()
-      homePage.cancelButton().click()
-      homePage.createFolderModal().should("not.exist")
+      createFolderModal.cancelButton().click()
+      createFolderModal.body().should("not.exist")
     })
 
     it("can add files and cancel modal", () => {
       cy.web3Login()
 
       // upload a file and see it in the file list
       homePage.uploadButton().click()
-      homePage.uploadFileForm().attachFile("../fixtures/uploadedFiles/text-file.txt")
-      homePage.fileUploadList().should("have.length", 1)
+      fileUploadModal.body().attachFile("../fixtures/uploadedFiles/text-file.txt")
+      fileUploadModal.fileList().should("have.length", 1)
 
       // cancel and ensure that the upload modal is dismissed
-      homePage.uploadCancelButton().click()
-      homePage.uploadCancelButton().should("not.exist")
-      homePage.uploadFileForm().should("not.exist")
+      fileUploadModal.cancelButton().click()
+      fileUploadModal.body().should("not.exist")
     })
 
     it("can add/remove multiple files and upload", () => {
       cy.web3Login({ clearCSFBucket: true })
 
       // attach 2 files to the file list
       homePage.uploadButton().click()
-      homePage.uploadFileForm().attachFile("../fixtures/uploadedFiles/text-file.txt")
-      homePage.fileUploadList().should("have.length", 1)
-      homePage.uploadFileForm().attachFile("../fixtures/uploadedFiles/logo.png")
-      homePage.fileUploadList().should("have.length", 2)
+      fileUploadModal.body().attachFile("../fixtures/uploadedFiles/text-file.txt")
+      fileUploadModal.fileList().should("have.length", 1)
+      fileUploadModal.body().attachFile("../fixtures/uploadedFiles/logo.png")
+      fileUploadModal.fileList().should("have.length", 2)
 
       // remove 1 file from the list and ensure 1 remains
-      homePage.fileListRemoveButton().first().click()
-      homePage.fileUploadList().should("have.length", 1)
+      fileUploadModal.removeFileButton().first().click()
+      fileUploadModal.fileList().should("have.length", 1)
 
       // attach an additional file to the file list and upload
-      homePage.uploadFileForm().attachFile("../fixtures/uploadedFiles/text-file.txt")
-      homePage.fileUploadList().should("have.length", 2)
-      homePage.fileListRemoveButton().should("have.length", 2)
-      homePage.startUploadButton().safeClick()
-      homePage.uploadFileForm().should("not.exist")
+      fileUploadModal.body().attachFile("../fixtures/uploadedFiles/text-file.txt")
+      fileUploadModal.fileList().should("have.length", 2)
+      fileUploadModal.removeFileButton().should("have.length", 2)
+      fileUploadModal.uploadButton().safeClick()
+      fileUploadModal.body().should("not.exist")
       homePage.fileItemRow().should("have.length", 2)
     })
 
@@ -110,9 +113,9 @@ describe("File management", () => {
       // delete a file via the menu option 
       homePage.fileItemKebabButton().first().click()
       homePage.deleteMenuOption().click()
-      homePage.deleteFileDialog().should("be.visible")
-      homePage.deleteFileConfirmButton().safeClick()
-      homePage.deleteFileDialog().should("not.exist")
+      deleteFileModal.body().should("be.visible")
+      deleteFileModal.confirmButton().safeClick()
+      deleteFileModal.body().should("not.exist")
       homePage.fileItemRow().should("not.exist")
 
       // confirm the deleted file is moved to the bin
@@ -130,9 +133,9 @@ describe("File management", () => {
       // recover the file via the menu option
       binPage.fileItemKebabButton().first().click()
       binPage.recoverMenuOption().click()
-      binPage.folderList().should("exist")
-      binPage.folderList().contains("Home").click()
-      binPage.recoverButton().click()
+      recoverFileModal.folderList().should("exist")
+      recoverFileModal.folderList().contains("Home").click()
+      recoverFileModal.recoverButton().click()
       binPage.fileItemRow().should("not.exist")
 
       // ensure recovered file is correct
@@ -158,9 +161,9 @@ describe("File management", () => {
       // delete the folder via the menu option 
       homePage.fileItemKebabButton().first().click()
       homePage.deleteMenuOption().click()
-      homePage.deleteFileDialog().should("be.visible")
-      homePage.deleteFileConfirmButton().safeClick()
-      homePage.deleteFileDialog().should("not.exist")
+      deleteFileModal.body().should("be.visible")
+      deleteFileModal.confirmButton().safeClick()
+      deleteFileModal.body().should("not.exist")
       homePage.fileItemRow().should("not.exist")
 
       // confirm the deleted folder is moved to the bin
@@ -171,9 +174,9 @@ describe("File management", () => {
       // recover folder via the menu option
       binPage.fileItemKebabButton().first().click()
       binPage.recoverMenuOption().click()
-      binPage.folderList().should("exist")
-      binPage.folderList().contains("Home").click()
-      binPage.recoverButton().click()
+      recoverFileModal.folderList().should("exist")
+      recoverFileModal.folderList().contains("Home").click()
+      recoverFileModal.recoverButton().click()
       binPage.fileItemRow().should("not.exist")
 
       // ensure recovered folder is correct
@@ -187,29 +190,29 @@ describe("File management", () => {
       homePage.newFolderButton().click()
 
       // ensure a folder can't be created without entering a name
-      homePage.createButton().should("have.attr", "disabled")
-      homePage.folderNameInput().type("a{selectall}{del}")
-      homePage.folderCreationErrorLabel().should("be.visible")
+      createFolderModal.createButton().should("have.attr", "disabled")
+      createFolderModal.folderNameInput().type("a{selectall}{del}")
+      createFolderModal.errorLabel().should("be.visible")
 
       // ensure a folder can't be created with "/" in the name
-      homePage.folderNameInput().type("/")
-      homePage.createButton().should("have.attr", "disabled")
-      homePage.folderCreationErrorLabel().should("be.visible")
-      homePage.createFolderModal().should("contain.text", "A name cannot contain '/' character")
+      createFolderModal.folderNameInput().type("/")
+      createFolderModal.createButton().should("have.attr", "disabled")
+      createFolderModal.errorLabel().should("be.visible")
+      createFolderModal.body().should("contain.text", "A name cannot contain '/' character")
 
       // ensure a folder can't be created with white space only in the name
-      homePage.folderNameInput().type("{selectall}{del}")
-      homePage.folderNameInput().type("   ")
-      homePage.createButton().should("have.attr", "disabled")
-      homePage.folderCreationErrorLabel().should("be.visible")
-      homePage.createFolderModal().should("contain.text", "Please enter a name")
+      createFolderModal.folderNameInput().type("{selectall}{del}")
+      createFolderModal.folderNameInput().type("   ")
+      createFolderModal.createButton().should("have.attr", "disabled")
+      createFolderModal.errorLabel().should("be.visible")
+      createFolderModal.body().should("contain.text", "Please enter a name")
 
       // ensure a folder can't be created if name exceeds 65 characters
-      homePage.folderNameInput().type("{selectall}{del}")
-      homePage.folderNameInput().type("cgsxffymqivoknhwhqvmnchvjngtwsriovhvkgzgmonmimctcrdytujbtkogngvext")
-      homePage.createButton().should("have.attr", "disabled")
-      homePage.folderCreationErrorLabel().should("be.visible")
-      homePage.createFolderModal().should("contain.text", "Name too long")
+      createFolderModal.folderNameInput().type("{selectall}{del}")
+      createFolderModal.folderNameInput().type("cgsxffymqivoknhwhqvmnchvjngtwsriovhvkgzgmonmimctcrdytujbtkogngvext")
+      createFolderModal.createButton().should("have.attr", "disabled")
+      createFolderModal.errorLabel().should("be.visible")
+      createFolderModal.body().should("contain.text", "Name too long")
     })
   })
 })