Detect and dismiss toasts in ui tests

packages/common-components/src/Toasts/ToastContent.tsx

@@ -140,6 +140,7 @@ const ToastContent = ({ toast, onClose }: ToastContentProps) => {
       }
       {isClosable &&
         <div
+          data-testid={`button-close-toast-${toast.testId}`}
           className={classes.closeIcon}
           onClick={onClose}
         >

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

@@ -8,7 +8,6 @@ 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

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

@@ -1,6 +1,7 @@
 import { basePage } from "./basePage"
 import { fileBrowser } from "./fileBrowser"
 import { fileUploadModal } from "./modals/fileUploadModal"
+import { uploadCompleteToast } from "./toasts/uploadCompleteToast"
 
 export const homePage = {
   ...basePage,
@@ -12,9 +13,6 @@ export const homePage = {
   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 }),
-  moveSuccessToast: () => cy.get("[data-testId=toast-move-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"),
@@ -37,7 +35,8 @@ export const homePage = {
 
     // ensure upload is complete before proceeding
     fileUploadModal.body().should("not.exist")
-    this.uploadStatusToast().should("not.exist")
+    uploadCompleteToast.body().should("be.visible")
+    uploadCompleteToast.closeButton().click()
   }
 
 }

packages/files-ui/cypress/support/page-objects/toasts/deleteSuccessToast.ts

@@ -0,0 +1,4 @@
+export const deleteSuccessToast = {
+  body: () => cy.get("[data-testId=toast-deletion-success]", { timeout: 10000 }),
+  closeButton: () => cy.get("[data-testid=button-close-toast-deletion-success]")
+}

packages/files-ui/cypress/support/page-objects/toasts/moveSuccessToast.ts

@@ -0,0 +1,4 @@
+export const moveSuccessToast = {
+  body: () => cy.get("[data-testId=toast-move-success]", { timeout: 10000 }),
+  closeButton: () => cy.get("[data-testid=button-close-toast-move-success]")
+}

packages/files-ui/cypress/support/page-objects/toasts/uploadCompleteToast.ts

@@ -0,0 +1,4 @@
+export const uploadCompleteToast = {
+  body: () => cy.get("[data-testId=toast-upload-complete]", { timeout: 10000 }),
+  closeButton: () => cy.get("[data-testid=button-close-toast-upload-complete]")
+}

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

@@ -9,6 +9,9 @@ import { deleteFileModal } from "../support/page-objects/modals/deleteFileModal"
 import { fileUploadModal } from "../support/page-objects/modals/fileUploadModal"
 import { moveItemModal } from "../support/page-objects/modals/moveItemModal"
 import { recoverItemModal } from "../support/page-objects/modals/recoverItemModal"
+import { deleteSuccessToast } from "../support/page-objects/toasts/deleteSuccessToast"
+import { moveSuccessToast } from "../support/page-objects/toasts/moveSuccessToast"
+import { uploadCompleteToast } from "../support/page-objects/toasts/uploadCompleteToast"
 
 describe("File management", () => {
 
@@ -81,7 +84,8 @@ describe("File management", () => {
         homePage.moveSelectedButton().click()
         moveItemModal.folderList().contains("Home").click()
         moveItemModal.moveButton().safeClick()
-        homePage.moveSuccessToast().should("not.exist")
+        moveSuccessToast.body().should("be.visible")
+        moveSuccessToast.closeButton().click()
 
         // ensure the home root now has the folder and file
         navigationMenu.homeNavButton().click()
@@ -175,6 +179,8 @@ describe("File management", () => {
       fileUploadModal.removeFileButton().should("have.length", 2)
       fileUploadModal.uploadButton().safeClick()
       fileUploadModal.body().should("not.exist")
+      uploadCompleteToast.body().should("be.visible")
+      uploadCompleteToast.closeButton().click()
       homePage.fileItemRow().should("have.length", 2)
     })
 
@@ -230,6 +236,8 @@ describe("File management", () => {
       deleteFileModal.body().should("be.visible")
       deleteFileModal.confirmButton().safeClick()
       deleteFileModal.body().should("not.exist")
+      deleteSuccessToast.body().should("be.visible")
+      deleteSuccessToast.closeButton().click()
       homePage.fileItemRow().should("not.exist")
 
       // confirm the deleted file is moved to the bin
@@ -268,10 +276,14 @@ describe("File management", () => {
       homePage.fileItemKebabButton().first().click()
       homePage.deleteMenuOption().click()
       deleteFileModal.confirmButton().safeClick()
+      deleteSuccessToast.body().should("be.visible")
+      deleteSuccessToast.closeButton().click()
       navigationMenu.binNavButton().click()
       binPage.fileItemKebabButton().first().click()
       binPage.deleteMenuOption().click()
       deleteFileModal.confirmButton().safeClick()
+      deleteSuccessToast.body().should("be.visible")
+      deleteSuccessToast.closeButton().click()
       binPage.fileItemRow().should("not.exist")
       navigationMenu.homeNavButton().click()
       homePage.fileItemRow().should("not.exist")
@@ -289,6 +301,8 @@ describe("File management", () => {
       deleteFileModal.body().should("be.visible")
       deleteFileModal.confirmButton().safeClick()
       deleteFileModal.body().should("not.exist")
+      deleteSuccessToast.body().should("be.visible")
+      deleteSuccessToast.closeButton().click()
       homePage.fileItemRow().should("not.exist")
 
       // confirm the deleted folder is moved to the bin
@@ -313,10 +327,14 @@ describe("File management", () => {
       homePage.fileItemKebabButton().first().click()
       homePage.deleteMenuOption().click()
       deleteFileModal.confirmButton().safeClick()
+      deleteSuccessToast.body().should("be.visible")
+      deleteSuccessToast.closeButton().click()
       navigationMenu.binNavButton().click()
       binPage.fileItemKebabButton().first().click()
       binPage.deleteMenuOption().click()
       deleteFileModal.confirmButton().safeClick()
+      deleteSuccessToast.body().should("be.visible")
+      deleteSuccessToast.closeButton().click()
       binPage.fileItemRow().should("not.exist")
       navigationMenu.homeNavButton().click()
       homePage.fileItemRow().should("not.exist")
@@ -367,12 +385,15 @@ describe("File management", () => {
       homePage.fileItemKebabButton().click()
       homePage.deleteMenuOption().click()
       deleteFileModal.confirmButton().safeClick()
-      homePage.deleteSuccessToast().should("not.exist")
+      deleteSuccessToast.body().should("be.visible")
+      deleteSuccessToast.closeButton().click()
+
       navigationMenu.binNavButton().click()
       binPage.fileItemKebabButton().click()
       binPage.deleteMenuOption().click()
       deleteFileModal.confirmButton().safeClick()
-      binPage.permanentDeleteSuccessToast().should("not.exist")
+      deleteSuccessToast.body().should("be.visible")
+      deleteSuccessToast.closeButton().click()
       navigationMenu.spaceUsedLabel().should("contain.text", "0 Bytes")
     })
 
@@ -392,7 +413,8 @@ describe("File management", () => {
       homePage.selectAllCheckbox().click()
       homePage.deleteSelectedButton().click()
       deleteFileModal.confirmButton().safeClick()
-      homePage.deleteSuccessToast().should("not.exist")
+      deleteSuccessToast.body().should("be.visible")
+      deleteSuccessToast.closeButton().click()
       homePage.fileItemRow().should("have.length", 0)
 
       // recover both of the files in the same action

packages/files-ui/src/Contexts/FilesContext.tsx

@@ -380,8 +380,7 @@ const FilesProvider = ({ children }: FilesContextProps) => {
       type: "success",
       progress: 0,
       onProgressCancel: cancelSource.cancel,
-      isClosable: false,
-      testId: "upload-status"
+      isClosable: false
     }
 
     const toastId = addToast(toastParams)
@@ -411,7 +410,8 @@ const FilesProvider = ({ children }: FilesContextProps) => {
         title: "Upload complete",
         progress: undefined,
         onProgressCancel: undefined,
-        isClosable: true
+        isClosable: true,
+        testId: "upload-complete"
       }, true)
       return Promise.resolve()
     } catch (error: any) {