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(); expect(screen.getByLabelText('用户名')).toBeInTheDocument(); expect(screen.getByLabelText('密码')).toBeInTheDocument(); expect(screen.getByRole('button', { name: '登录' })).toBeInTheDocument(); expect(screen.queryByLabelText('用户密钥')).not.toBeInTheDocument(); }); it('用户名/密码为空时不能提交', async () => { setShell('browser'); render(); expect(screen.getByRole('button', { name: '登录' })).toBeDisabled(); }); }); describe('登录页(桌面外壳,file://)', () => { it('★ 不给账号密码表单,给用户密钥', () => { setShell('desktop'); render(); // 反向对照:账号密码那两个字段必须**不在** 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(); 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(); 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(); expect(screen.getByRole('button', { name: '进入' })).toBeDisabled(); }); });