feat(ui): Fix flakeys test (#997)

* feat(ui): Fix flakeys test

* feat(ui): clean up DOM after test

---------

Co-authored-by: Vu Van Duc <[email protected]>

Author: Sotatek-DukeVu

src/ui/pages/Menu/components/Settings/components/ManagePassword/ManagePassword.test.tsx

@@ -107,7 +107,7 @@ describe("Manage password", () => {
   });
 
   test("Cancel alert", async () => {
-    const { queryByTestId, getByTestId, unmount } = render(
+    const { queryByTestId, getByTestId, queryByText } = render(
       <Provider store={storeMocked}>
         <ManagePassword />
       </Provider>
@@ -126,6 +126,15 @@ describe("Manage password", () => {
       fireEvent.click(getByTestId("settings-item-toggle-password"));
     });
 
+    await waitFor(() => {
+      expect(
+        queryByText(
+          TRANSLATIONS.tabs.menu.tab.settings.sections.security.managepassword
+            .page.alert.enablemessage
+        )
+      ).toBeVisible();
+    });
+
     await waitFor(() => {
       expect(
         getByTestId("alert-cancel-enable-password").getAttribute("is-open")
@@ -141,6 +150,15 @@ describe("Manage password", () => {
       );
     });
 
+    await waitFor(() => {
+      expect(
+        queryByText(
+          TRANSLATIONS.tabs.menu.tab.settings.sections.security.managepassword
+            .page.alert.enablemessage
+        )
+      ).toBeNull();
+    });
+
     await waitFor(() => {
       expect(
         getByTestId("alert-cancel-enable-password").getAttribute("is-open")
@@ -149,17 +167,11 @@ describe("Manage password", () => {
       expect(queryByTestId("create-password-modal")).toBe(null);
     });
 
-    unmount();
+    document.getElementsByTagName("html")[0].innerHTML = "";
   });
 
   test("Password not set", async () => {
-    const {
-      queryByTestId,
-      getByTestId,
-      getByText,
-      findByText,
-      getAllByTestId,
-    } = render(
+    const { queryByTestId, getByTestId, getByText, queryByText } = render(
       <Provider store={storeMocked}>
         <ManagePassword />
       </Provider>
@@ -174,23 +186,30 @@ describe("Manage password", () => {
       fireEvent.click(getByTestId("settings-item-toggle-password"));
     });
 
-    const text = await waitFor(async () => {
-      return await findByText(
-        TRANSLATIONS.tabs.menu.tab.settings.sections.security.managepassword
-          .page.alert.enablemessage
-      );
-    });
-
     await waitFor(() => {
-      expect(text).toBeVisible();
+      expect(
+        getByText(
+          TRANSLATIONS.tabs.menu.tab.settings.sections.security.managepassword
+            .page.alert.enablemessage
+        )
+      ).toBeVisible();
     });
 
     act(() => {
       fireEvent.click(
-        getAllByTestId("alert-cancel-enable-password-confirm-button")[0]
+        getByTestId("alert-cancel-enable-password-confirm-button")
       );
     });
 
+    await waitFor(() => {
+      expect(
+        queryByText(
+          TRANSLATIONS.tabs.menu.tab.settings.sections.security.managepassword
+            .page.alert.enablemessage
+        )
+      ).toBeNull();
+    });
+
     await waitFor(() => {
       expect(getByText("1")).toBeVisible();
     });
@@ -200,6 +219,8 @@ describe("Manage password", () => {
     await waitFor(() => {
       expect(getByTestId("create-password-modal")).toBeVisible();
     });
+
+    document.getElementsByTagName("html")[0].innerHTML = "";
   });
 
   test("Disable password option", async () => {
@@ -233,7 +254,7 @@ describe("Manage password", () => {
       dispatch: dispatchMock,
     };
 
-    const { queryByTestId, getByTestId, findByText } = render(
+    const { queryByTestId, getByTestId, queryByText, getByText } = render(
       <Provider store={storeMocked}>
         <ManagePassword />
       </Provider>
@@ -248,19 +269,28 @@ describe("Manage password", () => {
       fireEvent.click(getByTestId("settings-item-toggle-password"));
     });
 
-    const text = await findByText(
-      TRANSLATIONS.tabs.menu.tab.settings.sections.security.managepassword.page
-        .alert.disablemessage
-    );
-
     await waitFor(() => {
-      expect(text).toBeVisible();
+      expect(
+        getByText(
+          TRANSLATIONS.tabs.menu.tab.settings.sections.security.managepassword
+            .page.alert.disablemessage
+        )
+      ).toBeVisible();
     });
 
     act(() => {
       fireEvent.click(getByTestId("alert-cancel-confirm-button"));
     });
 
+    await waitFor(() => {
+      expect(
+        queryByText(
+          TRANSLATIONS.tabs.menu.tab.settings.sections.security.managepassword
+            .page.alert.disablemessage
+        )
+      ).toBeNull();
+    });
+
     await waitFor(() => {
       expect(getByTestId("verify-password-value")).toBeVisible();
       expect(getByTestId("forgot-hint-btn")).toBeVisible();

src/ui/pages/NotificationDetails/components/CredentialRequest/CredentialRequestInformation/CredentialRequestInformation.test.tsx

@@ -63,7 +63,7 @@ describe("Credential request information", () => {
       ...mockStore(initialState),
       dispatch: dispatchMock,
     };
-    const { getByText, getByTestId, queryByText } = render(
+    const { getByText, getByTestId, queryByText, unmount } = render(
       <Provider store={storeMocked}>
         <CredentialRequestInformation
           pageId="multi-sign"
@@ -105,14 +105,20 @@ describe("Credential request information", () => {
     );
 
     await waitFor(() => {
-      expect(deleteNotificationMock).toBeCalled();
       expect(
         queryByText(
           EN_TRANSLATIONS.tabs.notifications.details.credential.request
             .information.alert.textdecline
         )
       ).toBeNull();
     });
+
+    await waitFor(() => {
+      expect(deleteNotificationMock).toBeCalled();
+    });
+
+    unmount();
+    document.getElementsByTagName("body")[0].innerHTML = "";
   });
 });
 
@@ -477,21 +483,22 @@ describe("Credential request information: multisig", () => {
 
     const back = jest.fn();
 
-    const { getByText, getByTestId, getAllByText, getAllByTestId } = render(
-      <Provider store={storeMocked}>
-        <CredentialRequestInformation
-          pageId="multi-sign"
-          activeStatus
-          onBack={back}
-          onAccept={jest.fn()}
-          userAID="member-2"
-          notificationDetails={notificationsFix[4]}
-          credentialRequest={credRequestFix}
-          linkedGroup={linkedGroup}
-          onReloadData={jest.fn()}
-        />
-      </Provider>
-    );
+    const { getByText, getByTestId, getAllByText, queryByText, unmount } =
+      render(
+        <Provider store={storeMocked}>
+          <CredentialRequestInformation
+            pageId="multi-sign"
+            activeStatus
+            onBack={back}
+            onAccept={jest.fn()}
+            userAID="member-2"
+            notificationDetails={notificationsFix[4]}
+            credentialRequest={credRequestFix}
+            linkedGroup={linkedGroup}
+            onReloadData={jest.fn()}
+          />
+        </Provider>
+      );
 
     await waitFor(() => {
       expect(
@@ -553,21 +560,33 @@ describe("Credential request information: multisig", () => {
 
     await waitFor(() => {
       expect(
-        getAllByTestId("multisig-request-alert-decline")[0]
-      ).toHaveTextContent(
-        EN_TRANSLATIONS.tabs.notifications.details.credential.request
-          .information.alert.textdecline
-      );
+        getByText(
+          EN_TRANSLATIONS.tabs.notifications.details.credential.request
+            .information.alert.textdecline
+        )
+      ).toBeVisible();
     });
 
     act(() => {
       fireEvent.click(
-        getAllByTestId("multisig-request-alert-decline-confirm-button")[0]
+        getByTestId("multisig-request-alert-decline-confirm-button")
       );
     });
 
+    await waitFor(() => {
+      expect(
+        queryByText(
+          EN_TRANSLATIONS.tabs.notifications.details.credential.request
+            .information.alert.textdecline
+        )
+      ).toBeNull();
+    });
+
     await waitFor(() => {
       expect(deleteNotificationMock).toBeCalled();
     });
+
+    unmount();
+    document.getElementsByTagName("body")[0].innerHTML = "";
   });
 });