1

src/components/auth/AccountModal.test.tsx

@@ -0,0 +1,92 @@
+/* @vitest-environment jsdom */
+
+import { render, screen, within } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { expect, test, vi } from 'vitest';
+
+import type {
+  AuthAuditLogEntry,
+  AuthRiskBlockSummary,
+  AuthSessionSummary,
+  AuthUser,
+} from '../../services/authService';
+import { AccountModal } from './AccountModal';
+
+const baseUser: AuthUser = {
+  id: 'user-1',
+  username: 'tester',
+  displayName: '138****8000',
+  phoneNumberMasked: '138****8000',
+  loginMethod: 'phone',
+  bindingStatus: 'active',
+  wechatBound: true,
+};
+
+function renderAccountModal(overrides?: {
+  user?: AuthUser;
+  riskBlocks?: AuthRiskBlockSummary[];
+  sessions?: AuthSessionSummary[];
+  auditLogs?: AuthAuditLogEntry[];
+  initialSection?: 'appearance' | 'account' | 'security' | 'devices' | 'logs' | null;
+}) {
+  return render(
+    <AccountModal
+      user={overrides?.user ?? baseUser}
+      isOpen
+      initialSection={overrides?.initialSection ?? null}
+      platformTheme="light"
+      riskBlocks={overrides?.riskBlocks ?? []}
+      sessions={overrides?.sessions ?? []}
+      auditLogs={overrides?.auditLogs ?? []}
+      loadingRiskBlocks={false}
+      loadingSessions={false}
+      loadingAuditLogs={false}
+      isHydratingSettings={false}
+      isPersistingSettings={false}
+      settingsError={null}
+      onClose={vi.fn()}
+      onPlatformThemeChange={vi.fn()}
+      onLogout={vi.fn().mockResolvedValue(undefined)}
+      onRefreshRiskBlocks={vi.fn().mockResolvedValue(undefined)}
+      onLiftRiskBlock={vi.fn().mockResolvedValue(undefined)}
+      onRefreshSessions={vi.fn().mockResolvedValue(undefined)}
+      onLogoutAll={vi.fn().mockResolvedValue(undefined)}
+      onRefreshAuditLogs={vi.fn().mockResolvedValue(undefined)}
+      onRevokeSession={vi.fn().mockResolvedValue(undefined)}
+      changePhoneCaptchaChallenge={null}
+      onSendChangePhoneCode={vi.fn().mockResolvedValue({
+        cooldownSeconds: 60,
+        expiresInSeconds: 300,
+      })}
+      onChangePhone={vi.fn().mockResolvedValue(undefined)}
+    />,
+  );
+}
+
+test('settings header uses a generic title instead of the phone number', () => {
+  renderAccountModal();
+
+  expect(screen.getByRole('dialog', { name: '设置与账号安全' })).toBeTruthy();
+  expect(screen.getByText('设置与账号安全')).toBeTruthy();
+  expect(screen.queryByText('138****8000')).toBeNull();
+});
+
+test('account actions open in independent panels instead of inline expansion', async () => {
+  const user = userEvent.setup();
+
+  renderAccountModal();
+
+  await user.click(screen.getByRole('button', { name: /账号信息/ }));
+
+  const accountDialog = screen.getByRole('dialog', { name: '账号信息' });
+  expect(accountDialog).toBeTruthy();
+  expect(within(accountDialog).getByRole('button', { name: '返回' })).toBeTruthy();
+  expect(within(accountDialog).getByRole('button', { name: '更换手机号' })).toBeTruthy();
+  expect(screen.queryByLabelText('新手机号')).toBeNull();
+
+  await user.click(within(accountDialog).getByRole('button', { name: '更换手机号' }));
+
+  const changePhoneDialog = screen.getByRole('dialog', { name: '绑定新手机号' });
+  expect(within(changePhoneDialog).getByLabelText('新手机号')).toBeTruthy();
+  expect(within(changePhoneDialog).getByLabelText('验证码')).toBeTruthy();
+});