1

src/components/auth/AuthGate.test.tsx

@@ -1,15 +1,20 @@
 /* @vitest-environment jsdom */
 
-import { render, screen } from '@testing-library/react';
+import { render, screen, waitFor, within } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 import { beforeEach, expect, test, vi } from 'vitest';
 
 import type { AuthUser } from '../../services/authService';
 import { AuthGate } from './AuthGate';
+import { useAuthUi } from './AuthUiContext';
 
 const authMocks = vi.hoisted(() => ({
   getStoredAccessToken: vi.fn(),
   ensureAutoAuthUser: vi.fn(),
   getAuthLoginOptions: vi.fn(),
+  loginWithPhoneCode: vi.fn(),
+  sendPhoneLoginCode: vi.fn(),
+  startWechatLogin: vi.fn(),
   consumeAuthCallbackResult: vi.fn(),
 }));
 
@@ -30,12 +35,25 @@ vi.mock('../../services/authService', () => ({
   getCaptchaChallengeFromError: vi.fn(() => null),
   getCurrentAuthUser: vi.fn(),
   liftAuthRiskBlock: vi.fn(),
-  loginWithPhoneCode: vi.fn(),
+  loginWithPhoneCode: authMocks.loginWithPhoneCode,
   logoutAllAuthSessions: vi.fn(),
   logoutAuthUser: vi.fn(),
   revokeAuthSession: vi.fn(),
-  sendPhoneLoginCode: vi.fn(),
-  startWechatLogin: vi.fn(),
+  sendPhoneLoginCode: authMocks.sendPhoneLoginCode,
+  startWechatLogin: authMocks.startWechatLogin,
+}));
+
+vi.mock('../../hooks/useGameSettings', () => ({
+  useGameSettings: () => ({
+    musicVolume: 0.42,
+    setMusicVolume: () => {},
+    platformTheme: 'light',
+    setPlatformTheme: () => {},
+    hasHydratedSettings: true,
+    isHydratingSettings: false,
+    isPersistingSettings: false,
+    settingsError: null,
+  }),
 }));
 
 vi.mock('./AccountModal', () => ({
@@ -60,6 +78,12 @@ beforeEach(() => {
   vi.clearAllMocks();
   authMocks.getStoredAccessToken.mockReturnValue(null);
   authMocks.consumeAuthCallbackResult.mockReturnValue(null);
+  authMocks.loginWithPhoneCode.mockResolvedValue(mockUser);
+  authMocks.sendPhoneLoginCode.mockResolvedValue({
+    cooldownSeconds: 60,
+    expiresInSeconds: 300,
+  });
+  authMocks.startWechatLogin.mockResolvedValue(undefined);
   authMocks.ensureAutoAuthUser.mockResolvedValue({
     user: mockUser,
     credentials: {
@@ -69,7 +93,22 @@ beforeEach(() => {
   });
 });
 
-test('auth gate prefers login screen when phone login is available', async () => {
+function ProtectedActionButton({ onAuthenticated }: { onAuthenticated: () => void }) {
+  const authUi = useAuthUi();
+
+  return (
+    <button
+      type="button"
+      onClick={() => {
+        authUi?.requireAuth(onAuthenticated);
+      }}
+    >
+      进入作品
+    </button>
+  );
+}
+
+test('auth gate keeps platform content visible when phone login is available', async () => {
   authMocks.getAuthLoginOptions.mockResolvedValue({
     availableLoginMethods: ['phone'],
   });
@@ -80,7 +119,43 @@ test('auth gate prefers login screen when phone login is available', async () =>
     </AuthGate>,
   );
 
-  expect(await screen.findByText('账号登录')).toBeTruthy();
-  expect(screen.getByText('手机号')).toBeTruthy();
+  expect(await screen.findByText('应用内容')).toBeTruthy();
+  expect(screen.getByRole('button', { name: '登录' })).toBeTruthy();
+  expect(screen.queryByText('先登录账号，再同步你的冒险进度。')).toBeNull();
   expect(authMocks.ensureAutoAuthUser).not.toHaveBeenCalled();
 });
+
+test('auth gate opens a login modal for protected actions and resumes after login', async () => {
+  const user = userEvent.setup();
+  const onAuthenticated = vi.fn();
+
+  authMocks.getAuthLoginOptions.mockResolvedValue({
+    availableLoginMethods: ['phone'],
+  });
+
+  render(
+    <AuthGate>
+      <ProtectedActionButton onAuthenticated={onAuthenticated} />
+    </AuthGate>,
+  );
+
+  await user.click(await screen.findByRole('button', { name: '进入作品' }));
+
+  const dialog = screen.getByRole('dialog', { name: '登录账号' });
+  expect(dialog).toBeTruthy();
+  expect(screen.queryByText('先登录账号，再同步你的冒险进度。')).toBeNull();
+
+  await user.type(within(dialog).getByLabelText('手机号'), '13800000000');
+  await user.type(within(dialog).getByLabelText('验证码'), '123456');
+  await user.click(within(dialog).getByRole('button', { name: '登录' }));
+
+  await waitFor(() => {
+    expect(authMocks.loginWithPhoneCode).toHaveBeenCalledWith(
+      '13800000000',
+      '123456',
+    );
+    expect(onAuthenticated).toHaveBeenCalledTimes(1);
+  });
+
+  expect(screen.queryByRole('dialog', { name: '登录账号' })).toBeNull();
+});