1

src/components/auth/AccountModal.test.tsx

@@ -1,6 +1,6 @@
 /* @vitest-environment jsdom */
 
-import { render, screen, within } from '@testing-library/react';
+import { render, screen, waitFor, within } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { expect, test, vi } from 'vitest';
 
@@ -27,7 +27,13 @@ function renderAccountModal(overrides?: {
   riskBlocks?: AuthRiskBlockSummary[];
   sessions?: AuthSessionSummary[];
   auditLogs?: AuthAuditLogEntry[];
-  initialSection?: 'appearance' | 'account' | 'security' | 'devices' | 'logs' | null;
+  initialSection?:
+    | 'appearance'
+    | 'account'
+    | 'security'
+    | 'devices'
+    | 'logs'
+    | null;
 }) {
   return render(
     <AccountModal
@@ -69,6 +75,14 @@ test('settings header uses a generic title instead of the phone number', () => {
   expect(screen.getByRole('dialog', { name: '设置与账号安全' })).toBeTruthy();
   expect(screen.getByText('设置与账号安全')).toBeTruthy();
   expect(screen.queryByText('138****8000')).toBeNull();
+  expect(screen.queryByText('选择要管理的内容')).toBeNull();
+  expect(
+    screen.queryByText('主题、账号与设备能力统一在独立面板中管理'),
+  ).toBeNull();
+  expect(screen.queryByText(/^安全状态$/)).toBeNull();
+  expect(screen.queryByText(/^登录设备$/)).toBeNull();
+  expect(screen.queryByText(/^操作记录$/)).toBeNull();
+  expect(screen.queryByText('当前账号状态')).toBeNull();
 });
 
 test('account actions open in independent panels instead of inline expansion', async () => {
@@ -80,13 +94,154 @@ test('account actions open in independent panels instead of inline expansion', a
 
   const accountDialog = screen.getByRole('dialog', { name: '账号信息' });
   expect(accountDialog).toBeTruthy();
-  expect(within(accountDialog).getByRole('button', { name: '返回' })).toBeTruthy();
-  expect(within(accountDialog).getByRole('button', { name: '更换手机号' })).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: '更换手机号' }));
+  await user.click(
+    within(accountDialog).getByRole('button', { name: '更换手机号' }),
+  );
 
-  const changePhoneDialog = screen.getByRole('dialog', { name: '绑定新手机号' });
+  const changePhoneDialog = screen.getByRole('dialog', {
+    name: '绑定新手机号',
+  });
   expect(within(changePhoneDialog).getByLabelText('新手机号')).toBeTruthy();
   expect(within(changePhoneDialog).getByLabelText('验证码')).toBeTruthy();
 });
+
+test('nested settings panels keep back navigation without an extra close action', async () => {
+  const user = userEvent.setup();
+
+  renderAccountModal();
+
+  await user.click(screen.getByRole('button', { name: /账号信息/ }));
+
+  const accountDialog = screen.getByRole('dialog', { name: '账号信息' });
+  expect(
+    within(accountDialog).getByRole('button', { name: '返回' }),
+  ).toBeTruthy();
+  expect(
+    within(accountDialog).queryByRole('button', { name: '关闭' }),
+  ).toBeNull();
+
+  await user.click(
+    within(accountDialog).getByRole('button', { name: '更换手机号' }),
+  );
+
+  const changePhoneDialog = screen.getByRole('dialog', {
+    name: '绑定新手机号',
+  });
+  expect(
+    within(changePhoneDialog).getByRole('button', { name: '返回' }),
+  ).toBeTruthy();
+  expect(
+    within(changePhoneDialog).queryByRole('button', { name: '关闭' }),
+  ).toBeNull();
+});
+
+test('settings overlays move focus away from inert triggers and restore it on back', async () => {
+  const user = userEvent.setup();
+
+  renderAccountModal();
+
+  const accountTrigger = screen.getByRole('button', { name: /账号信息/ });
+  expect(document.activeElement).not.toBe(accountTrigger);
+
+  await user.click(accountTrigger);
+
+  const accountDialog = screen.getByRole('dialog', { name: '账号信息' });
+  const accountBackButton = within(accountDialog).getByRole('button', {
+    name: '返回',
+  });
+
+  await waitFor(() => {
+    expect(document.activeElement).toBe(accountBackButton);
+  });
+
+  const changePhoneTrigger = within(accountDialog).getByRole('button', {
+    name: '更换手机号',
+  });
+  await user.click(changePhoneTrigger);
+
+  const changePhoneDialog = screen.getByRole('dialog', {
+    name: '绑定新手机号',
+  });
+  const changePhoneBackButton = within(changePhoneDialog).getByRole('button', {
+    name: '返回',
+  });
+
+  await waitFor(() => {
+    expect(document.activeElement).toBe(changePhoneBackButton);
+  });
+
+  await user.click(changePhoneBackButton);
+
+  await waitFor(() => {
+    expect(document.activeElement).toBe(changePhoneTrigger);
+  });
+
+  await user.click(accountBackButton);
+
+  await waitFor(() => {
+    expect(document.activeElement).toBe(accountTrigger);
+  });
+});
+
+test('account panel includes merged security devices and audit sections', async () => {
+  const user = userEvent.setup();
+
+  renderAccountModal({
+    riskBlocks: [
+      {
+        scopeType: 'phone',
+        title: '手机号保护',
+        detail: '检测到异常验证行为，已开启保护。',
+        remainingSeconds: 600,
+        expiresAt: '2026-04-20T10:00:00.000Z',
+      },
+    ],
+    sessions: [
+      {
+        sessionId: 'session-1',
+        clientLabel: 'iPhone 15 Pro',
+        isCurrent: true,
+        lastSeenAt: '2026-04-20T09:00:00.000Z',
+        expiresAt: '2026-04-27T09:00:00.000Z',
+        ipMasked: '10.0.*.*',
+      },
+    ],
+    auditLogs: [
+      {
+        id: 'log-1',
+        title: '登录成功',
+        detail: '通过手机号验证码完成登录。',
+        createdAt: '2026-04-20T08:00:00.000Z',
+        ipMasked: '10.0.*.*',
+      },
+    ],
+  });
+
+  await user.click(screen.getByRole('button', { name: /账号信息/ }));
+
+  const accountDialog = screen.getByRole('dialog', { name: '账号信息' });
+  expect(within(accountDialog).getByText('安全状态')).toBeTruthy();
+  expect(within(accountDialog).getByText('登录设备')).toBeTruthy();
+  expect(within(accountDialog).getByText('操作记录')).toBeTruthy();
+  expect(within(accountDialog).getByText('手机号保护')).toBeTruthy();
+  expect(within(accountDialog).getByText('iPhone 15 Pro')).toBeTruthy();
+  expect(within(accountDialog).getByText('登录成功')).toBeTruthy();
+});
+
+test('legacy nested section requests now open the merged account panel', () => {
+  renderAccountModal({ initialSection: 'security' });
+
+  const accountDialog = screen.getByRole('dialog', { name: '账号信息' });
+  expect(accountDialog).toBeTruthy();
+  expect(within(accountDialog).getByText('安全状态')).toBeTruthy();
+  expect(within(accountDialog).getByText('登录设备')).toBeTruthy();
+  expect(within(accountDialog).getByText('操作记录')).toBeTruthy();
+});