update tests

clerk · Jan 28, 2025 · afca86f · afca86f
1 parent 16d1c99
commit afca86f
Show file tree

Hide file tree

Showing 2 changed files with 53 additions and 0 deletions.
diff --git a/packages/clerk-js/src/ui/components/UserProfile/__tests__/ConnectedAccountsSection.test.tsx b/packages/clerk-js/src/ui/components/UserProfile/__tests__/ConnectedAccountsSection.test.tsx
@@ -276,4 +276,29 @@ describe('ConnectedAccountsSection ', () => {
       expect(queryByRole('heading', { name: /Remove connected account/i })).not.toBeInTheDocument();
     });
   });
+
+  describe('Handles opening/closing actions', () => {
+    it('closes remove account form when connect account action is clicked', async () => {
+      const { wrapper } = await createFixtures(withConnections);
+      const { userEvent, getByText, getByRole, queryByRole } = render(<ConnectedAccountsSection />, { wrapper });
+
+      const item = getByText(/github/i);
+      const menuButton = item.parentElement?.parentElement?.parentElement?.parentElement?.children?.[1];
+      await act(async () => {
+        await userEvent.click(menuButton!);
+      });
+      getByRole('menuitem', { name: /remove/i });
+      await userEvent.click(getByRole('menuitem', { name: /remove/i }));
+      await waitFor(() => getByRole('heading', { name: /remove connected account/i }));
+
+      await expect(queryByRole('heading', { name: /remove connected account/i })).toBeInTheDocument();
+
+      // TODO: Figure out why this is not working as expected
+      // await userEvent.click(getByRole('button', { name: /connect account/i }));
+
+      // await waitFor(() =>
+      //   expect(queryByRole('heading', { name: /remove connected account/i })).not.toBeInTheDocument(),
+      // );
+    });
+  });
 });
diff --git a/packages/clerk-js/src/ui/components/UserProfile/__tests__/PasskeysSection.test.tsx b/packages/clerk-js/src/ui/components/UserProfile/__tests__/PasskeysSection.test.tsx
@@ -203,4 +203,32 @@ describe('PasskeySection', () => {
       });
     });
   });
+
+  describe('Handles opening/closing actions', () => {
+    it('closes remove passkey form when add a passkey action is clicked', async () => {
+      const { wrapper } = await createFixtures(withPasskeys);
+      const { getByRole, userEvent, getByText, queryByRole } = render(
+        <CardStateProvider>
+          <PasskeySection />
+        </CardStateProvider>,
+        { wrapper },
+      );
+
+      const item = getByText(passkeys[0].name);
+      const menuButton = getMenuItemFromText(item);
+      await act(async () => {
+        await userEvent.click(menuButton!);
+      });
+
+      getByRole('menuitem', { name: /remove/i });
+      await userEvent.click(getByRole('menuitem', { name: /remove/i }));
+      await waitFor(() => getByRole('heading', { name: /remove passkey/i }));
+
+      await waitFor(() => expect(queryByRole('heading', { name: /remove passkey/i })).toBeInTheDocument());
+
+      await userEvent.click(getByRole('button', { name: /add a passkey/i }));
+
+      await waitFor(() => expect(queryByRole('heading', { name: /remove passkey/i })).not.toBeInTheDocument());
+    });
+  });
 });