Separate account deletion from the routine profile options so it reads as a destructive action.

Co-authored-by: Cursor <cursoragent@cursor.com>

tests/pages/profile.test.tsx

@@ -0,0 +1,143 @@
+import { afterEach, describe, expect, test, vi } from "vitest";
+import userEvent from "@testing-library/user-event";
+import { within } from "@testing-library/react";
+import {
+  cleanup,
+  renderWithProviders as render,
+  screen,
+} from "../utils/test-utils";
+import {
+  ProfilePageView,
+  type ProfilePageViewProps,
+} from "../../app/(app)/profile/_components/ProfilePage.view";
+import messages from "../../messages/en/index";
+
+const copy = messages.pages.profile;
+
+afterEach(() => {
+  cleanup();
+});
+
+function viewProps(
+  overrides: Partial<ProfilePageViewProps> = {},
+): ProfilePageViewProps {
+  return {
+    userEmail: "dani@example.com",
+    ruleCardSize: "M",
+    profileLgUp: true,
+    profileListSize: "l",
+    rules: [],
+    rulesError: false,
+    draft: null,
+    showDraftCard: false,
+    ruleDeleteOpen: false,
+    ruleDeleteBusy: false,
+    draftDeleteOpen: false,
+    draftDeleteBusy: false,
+    accountDeleteOpen: false,
+    accountDeleteBusy: false,
+    actionError: null,
+    profileSuccessMessage: null,
+    emailChangeOpen: false,
+    emailChangeValue: "",
+    onEmailChangeValueChange: vi.fn(),
+    emailChangeBusy: false,
+    emailChangeRequestSent: false,
+    emailChangeModalError: null,
+    onDismissEmailChangeModalError: vi.fn(),
+    onOpenEmailChange: vi.fn(),
+    onCloseEmailChange: vi.fn(),
+    onSubmitEmailChange: vi.fn(),
+    onSignOut: vi.fn(),
+    onDeleteRule: vi.fn(),
+    onCloseDeleteRule: vi.fn(),
+    onConfirmDeleteRule: vi.fn(),
+    onDuplicateRule: vi.fn(),
+    onContinueDraft: vi.fn(),
+    onDeleteDraft: vi.fn(),
+    onCloseDeleteDraft: vi.fn(),
+    onConfirmDeleteDraft: vi.fn(),
+    onOpenDeleteAccount: vi.fn(),
+    onCloseDeleteAccount: vi.fn(),
+    onConfirmDeleteAccount: vi.fn(),
+    onDismissProfileSuccess: vi.fn(),
+    onDismissActionError: vi.fn(),
+    onDismissRulesError: vi.fn(),
+    onStartNewCustomRule: vi.fn(),
+    ...overrides,
+  };
+}
+
+describe("ProfilePageView", () => {
+  test("keeps account deletion out of the routine options list", () => {
+    render(<ProfilePageView {...viewProps()} />);
+
+    const options = screen.getByRole("navigation", {
+      name: copy.yourOptionsHeading,
+    });
+    const createRule = within(options).getByRole("button", {
+      name: copy.optionCreateCustom,
+    });
+    expect(createRule.closest("ul")).not.toBeNull();
+    expect(
+      within(options).queryByRole("button", { name: copy.deleteAccountConfirm }),
+    ).not.toBeInTheDocument();
+    expect(
+      within(options).queryByRole("heading", { name: copy.deleteAccount }),
+    ).not.toBeInTheDocument();
+
+    const danger = screen.getByRole("region", { name: copy.deleteAccount });
+    expect(danger).toHaveTextContent(copy.deleteAccountIntro);
+    const deleteAccount = within(danger).getByRole("button", {
+      name: copy.deleteAccountConfirm,
+    });
+    expect(deleteAccount.closest("ul")).toBeNull();
+    expect(deleteAccount.className).toContain(
+      "border-[var(--color-border-default-negative-primary)]",
+    );
+    expect(deleteAccount.className).not.toContain(
+      "bg-[var(--color-surface-inverse-primary)]",
+    );
+  });
+
+  test("asks for confirmation before deleting the account", async () => {
+    const user = userEvent.setup();
+    const onOpenDeleteAccount = vi.fn();
+    const onConfirmDeleteAccount = vi.fn();
+    const { rerender } = render(
+      <ProfilePageView {...viewProps({ onOpenDeleteAccount })} />,
+    );
+
+    await user.click(
+      screen.getByRole("button", { name: copy.deleteAccountConfirm }),
+    );
+    expect(onOpenDeleteAccount).toHaveBeenCalledTimes(1);
+
+    rerender(
+      <ProfilePageView
+        {...viewProps({
+          onOpenDeleteAccount,
+          onConfirmDeleteAccount,
+          accountDeleteOpen: true,
+        })}
+      />,
+    );
+
+    const dialog = screen.getByRole("dialog", {
+      name: copy.deleteAccountModalTitle,
+    });
+    expect(dialog).toHaveTextContent(copy.deleteAccountModalBody);
+    const confirm = within(dialog).getByRole("button", {
+      name: copy.deleteAccountConfirm,
+    });
+    expect(confirm.className).toContain(
+      "border-[var(--color-border-default-negative-primary)]",
+    );
+    expect(confirm.className).not.toContain(
+      "bg-[var(--color-surface-inverse-primary)]",
+    );
+
+    await user.click(confirm);
+    expect(onConfirmDeleteAccount).toHaveBeenCalledTimes(1);
+  });
+});