MailUI4Agents/client/electron/test/components/LoginPage.test.tsx

import { describe, expect, it, vi, beforeEach, afterEach } from 'vitest';
import { render, screen, waitFor } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import React from 'react';

import LoginPage from '../../src/components/LoginPage';
import * as api from '../../src/api/client';
import { useAuthStore } from '../../src/stores/authStore';

/**
 * 登录页的两种形态。
 *
 * # 这一条不是「多测一个分支」，而是一次真实故障的回归
 *
 * 打包后的桌面应用（Electron 用 `loadFile()` 从 `file://` 加载）**白屏之外还有第二个坑**：
 * 登录页照常出现、账号密码填对、`POST /auth/login` 也返回 200，
 * 但**页面停在登录页不动**，并且接口开始报 401。
 *
 * 根因是会话 Cookie 存不下来：网关下发 `SameSite=Lax`，而 `file://` 是不透明源，
 * Chromium 按第三方上下文处理它、不予存储。实测现场是
 * `document.cookie === ''` 且紧接着的 `/auth/me` 返回 401 ——
 * 用同样的账号密码从外部 curl 登录却是成功的，所以这不是凭据问题。
 *
 * 因此桌面壳里**不该出现**一个注定失败的账号密码表单：那会让人以为密码打错了。
 * 它应当换成用户密钥（`Authorization: Bearer`）—— 桌面端本来就该用这种方式。
 */

/**
 * 切换「壳」。
 *
 * 用的是宿主显式声明的 `__AGENTMAIL_SHELL__`，而不是去改 `location.protocol` ——
 * jsdom 里那个属性**不可重定义**（`TypeError: Cannot redefine property: protocol`），
 * 而更根本的理由是：壳身份本来就该是宿主声明的契约，不该靠渲染层 sniff 协议。
 */
function setShell(shell: 'desktop' | 'browser') {
  if (shell === 'desktop') window.__AGENTMAIL_SHELL__ = 'desktop';
  else delete window.__AGENTMAIL_SHELL__;
}

beforeEach(() => {
  useAuthStore.setState({
    phase: 'anonymous',
    user: null,
    error: null,
    retryAfter: null,
    submitting: false
  });
  api.setToken(null);
});

afterEach(() => {
  vi.restoreAllMocks();
  setShell('browser');
  api.setToken(null);
});

describe('登录页（浏览器外壳）', () => {
  it('给账号密码，不给密钥输入', () => {
    setShell('browser');
    render(<LoginPage />);
    expect(screen.getByLabelText('用户名')).toBeInTheDocument();
    expect(screen.getByLabelText('密码')).toBeInTheDocument();
    expect(screen.getByRole('button', { name: '登录' })).toBeInTheDocument();
    expect(screen.queryByLabelText('用户密钥')).not.toBeInTheDocument();
  });

  it('用户名/密码为空时不能提交', async () => {
    setShell('browser');
    render(<LoginPage />);
    expect(screen.getByRole('button', { name: '登录' })).toBeDisabled();
  });
});

describe('登录页（桌面外壳，file://）', () => {
  it('★ 不给账号密码表单，给用户密钥', () => {
    setShell('desktop');
    render(<LoginPage />);
    // 反向对照：账号密码那两个字段必须**不在**
    expect(screen.queryByLabelText('密码')).not.toBeInTheDocument();
    expect(screen.queryByLabelText('用户名')).not.toBeInTheDocument();
    expect(screen.getByLabelText('用户密钥')).toBeInTheDocument();
    expect(screen.getByRole('button', { name: '进入' })).toBeInTheDocument();
    // 必须把原因说出来，否则用户会以为自己装错了版本
    expect(screen.getByText(/浏览器.*Cookie|Cookie.*不透明源|会话 Cookie/)).toBeInTheDocument();
  });

  it('★ 密钥可用时进入应用（走 Bearer，不靠 Cookie）', async () => {
    setShell('desktop');
    const me = vi.spyOn(api, 'me').mockResolvedValue({
      user: { user_id: 'u1', username: 'gui-lab', display_name: 'GUI', role: 'user' } as never
    });
    render(<LoginPage />);
    await userEvent.type(screen.getByLabelText('用户密钥'), 'k'.repeat(32));
    await userEvent.click(screen.getByRole('button', { name: '进入' }));
    await waitFor(() => expect(useAuthStore.getState().phase).toBe('authenticated'));
    expect(me).toHaveBeenCalled();
    // 令牌真的进了 api 层（之后的每个请求都靠它）
    expect(api.getToken()).toBe('k'.repeat(32));
  });

  it('★ 密钥不可用时：报错、清空输入、**不把坏密钥留在内存里**', async () => {
    setShell('desktop');
    vi.spyOn(api, 'me').mockRejectedValue(new Error('Unauthorized'));
    render(<LoginPage />);
    const input = screen.getByLabelText('用户密钥');
    await userEvent.type(input, 'bad-key');
    await userEvent.click(screen.getByRole('button', { name: '进入' }));
    await waitFor(() => expect(useAuthStore.getState().error).toMatch(/密钥不可用/));
    // 关键：没还原的话，之后**每一次**请求都会带上这个坏 key 并 401，
    // 而人看到的却是「重输一次也还是不行」。
    expect(api.getToken()).toBeNull();
    expect((input as HTMLInputElement).value).toBe('');
    expect(useAuthStore.getState().phase).toBe('anonymous');
  });

  it('密钥为空时不能提交（不要发一次注定 401 的请求）', () => {
    setShell('desktop');
    render(<LoginPage />);
    expect(screen.getByRole('button', { name: '进入' })).toBeDisabled();
  });
});