From 3ce48ae9a29cb4c1508563e352c9b27fa0e1e814 Mon Sep 17 00:00:00 2001
From: panteliselef <panteliselef@outlook.com>
Date: Mon, 3 Feb 2025 14:43:03 +0200
Subject: [PATCH] chore(e2e): Check if modal closes after user deletion

---
 .changeset/weak-weeks-roll.md                 |  2 +
 .../testUtils/userProfilePageObject.ts        |  6 ++-
 integration/tests/user-profile.test.ts        | 52 +++++++++++++++++++
 .../components/UserProfile/DeleteUserForm.tsx |  7 ++-
 4 files changed, 64 insertions(+), 3 deletions(-)
 create mode 100644 .changeset/weak-weeks-roll.md

diff --git a/.changeset/weak-weeks-roll.md b/.changeset/weak-weeks-roll.md
new file mode 100644
index 00000000000..a845151cc84
--- /dev/null
+++ b/.changeset/weak-weeks-roll.md
@@ -0,0 +1,2 @@
+---
+---
diff --git a/integration/testUtils/userProfilePageObject.ts b/integration/testUtils/userProfilePageObject.ts
index bf8473ed4af..ea0e1f4dea3 100644
--- a/integration/testUtils/userProfilePageObject.ts
+++ b/integration/testUtils/userProfilePageObject.ts
@@ -66,8 +66,10 @@ export const createUserProfileComponentPageObject = (testArgs: TestArgs) => {
     typeEmailAddress: (value: string) => {
       return page.getByLabel(/Email address/i).fill(value);
     },
-    waitForUserProfileModal: () => {
-      return page.waitForSelector('.cl-modalContent > .cl-userProfile-root', { state: 'visible' });
+    waitForUserProfileModal: (state?: 'open' | 'closed') => {
+      return page.waitForSelector('.cl-modalContent:has(.cl-userProfile-root)', {
+        state: state === 'closed' ? 'detached' : 'attached',
+      });
     },
   };
   return self;
diff --git a/integration/tests/user-profile.test.ts b/integration/tests/user-profile.test.ts
index b97174a6f79..bff3b0427d2 100644
--- a/integration/tests/user-profile.test.ts
+++ b/integration/tests/user-profile.test.ts
@@ -311,4 +311,56 @@ export default function Page() {
 
     expect(sessionCookieList.length).toBe(0);
   });
+
+  test('closes the modal after delete', async ({ page, context }) => {
+    const m = createTestUtils({ app });
+    const delFakeUser = m.services.users.createFakeUser({
+      withUsername: true,
+      fictionalEmail: true,
+      withPhoneNumber: true,
+    });
+    await m.services.users.createBapiUser({
+      ...delFakeUser,
+      username: undefined,
+      phoneNumber: undefined,
+    });
+
+    const u = createTestUtils({ app, page, context });
+    await u.po.signIn.goTo();
+    await u.po.signIn.waitForMounted();
+    await u.po.signIn.signInWithEmailAndInstantPassword({ email: delFakeUser.email, password: delFakeUser.password });
+    await u.po.expect.toBeSignedIn();
+
+    await u.page.goToAppHome();
+
+    await u.po.userButton.waitForMounted();
+    await u.po.userButton.toggleTrigger();
+    await u.po.userButton.triggerManageAccount();
+
+    await u.po.userProfile.waitForUserProfileModal();
+    await u.po.userProfile.switchToSecurityTab();
+
+    await u.page
+      .getByRole('button', {
+        name: /delete account/i,
+      })
+      .click();
+
+    await u.page.locator('input[name=deleteConfirmation]').fill('Delete account');
+
+    await u.page
+      .getByRole('button', {
+        name: /delete account/i,
+      })
+      .click();
+
+    await u.po.expect.toBeSignedOut();
+    await u.po.userProfile.waitForUserProfileModal('closed');
+
+    await u.page.waitForAppUrl('/');
+
+    // Make sure that the session cookie is deleted
+    const sessionCookieList = (await u.page.context().cookies()).filter(cookie => cookie.name.startsWith('__session'));
+    expect(sessionCookieList.length).toBe(0);
+  });
 });
diff --git a/packages/clerk-js/src/ui/components/UserProfile/DeleteUserForm.tsx b/packages/clerk-js/src/ui/components/UserProfile/DeleteUserForm.tsx
index 5a90cfadd95..3bcad76cfad 100644
--- a/packages/clerk-js/src/ui/components/UserProfile/DeleteUserForm.tsx
+++ b/packages/clerk-js/src/ui/components/UserProfile/DeleteUserForm.tsx
@@ -11,7 +11,11 @@ type DeleteUserFormProps = FormProps;
 export const DeleteUserForm = withCardStateProvider((props: DeleteUserFormProps) => {
   const { onReset } = props;
   const card = useCardState();
-  const { afterSignOutUrl, afterMultiSessionSingleSignOutUrl } = useSignOutContext();
+  const {
+    afterSignOutUrl,
+    afterMultiSessionSingleSignOutUrl,
+    // navigateAfterSignOut
+  } = useSignOutContext();
   const { user } = useUser();
   const { t } = useLocalizations();
   const { otherSessions } = useMultipleSessions({ user });
@@ -40,6 +44,7 @@ export const DeleteUserForm = withCardStateProvider((props: DeleteUserFormProps)
 
       return await setActive({
         session: null,
+        // beforeEmit: navigateAfterSignOut
         redirectUrl,
       });
     } catch (e) {