lingxi-web/tests/e2e/lingxi.spec.ts

import { expect, test, type Page, type WebSocketRoute } from '@playwright/test'

const account = process.env.E2E_ACCOUNT || 'e2e-1785008967@local.test'
const password = process.env.E2E_PASSWORD || 'Lingxi-E2E-2026!'

async function login(page: Page, loginAccount = account, loginPassword = password) {
  await page.goto('/login')
  await page.locator('input[autocomplete="username"]').fill(loginAccount)
  await page.locator('input[autocomplete="current-password"]').fill(loginPassword)
  await page.locator('button[type="submit"]').click()
  await expect(page).toHaveURL(/\/dashboard$/)
}

test('过期登录状态会回到登录页而不是显示网络错误', async ({ page }) => {
  await page.addInitScript(() => {
    window.localStorage.setItem('lx-auth', JSON.stringify({
      state: {
        token: 'eyJhbGciOiJIUzI1NiJ9.eyJleHAiOjF9.expired',
        user: { id: 'expired-user', name: 'Expired User', role: 'admin' },
        tenant: { id: 'expired-tenant', name: 'Expired Tenant', plan: 'pro' },
        onboarded: true,
      },
      version: 0,
    }))
  })
  await page.goto('/dashboard')
  await expect(page).toHaveURL(/\/login(?:\?|$)/)
  await expect(page.getByText('登录状态已过期，请重新登录')).toBeVisible()
  await expect.poll(() => page.evaluate(() => {
    const persisted = JSON.parse(window.localStorage.getItem('lx-auth') || '{}')
    return persisted.state?.token ?? null
  })).toBeNull()
})

test('Telegram 手机号验证码和二步密码登录向导', async ({ page, request }, testInfo) => {
  const suffix = `${Date.now()}-${testInfo.project.name}`
  const loginAccount = `channel-e2e-${suffix}@local.test`
  const loginPassword = 'Lingxi-Channel-2026!'
  const response = await request.post('/api/auth/register', {
    data: { name: 'Channel E2E', account: loginAccount, password: loginPassword, company: 'Channel E2E', industry: '跨境电商', teamSize: '1-10人' },
  })
  expect(response.ok()).toBeTruthy()
  await login(page, loginAccount, loginPassword)
  await page.goto('/channels?setup=choose')
  await expect(page.getByTestId('channel-onboarding')).toContainText('不强制绑定 Telegram')
  await expect(page.getByTestId('choose-whatsapp')).toBeVisible()
  await expect(page.getByTestId('choose-email')).toBeVisible()
  await page.getByTestId('choose-telegram').click()
  await expect(page.getByPlaceholder('+8613800138000')).toBeVisible()
  await expect(page.getByLabel('Telegram 验证码', { exact: true })).toHaveCount(0)
  const sendTelegramCode = page.getByRole('button', { name: '发送 Telegram 验证码' })
  await expect(sendTelegramCode).toBeVisible()
  await sendTelegramCode.click()
  await expect(page.getByText('请输入国际格式手机号，例如 +8613800138000')).toBeVisible()
  await expect(page.getByPlaceholder('+8613800138000')).toBeVisible()
  await expect(page.getByText('可以继续添加其他工作账号', { exact: false })).toBeVisible()
  await page.screenshot({ path: testInfo.outputPath('telegram-login-wizard.png'), fullPage: true })
})

test('WhatsApp 普通账号关联设备向导', async ({ page, request }, testInfo) => {
  const suffix = `${Date.now()}-${testInfo.project.name}`
  const loginAccount = `whatsapp-e2e-${suffix}@local.test`
  const loginPassword = 'Lingxi-WhatsApp-2026!'
  const response = await request.post('/api/auth/register', {
    data: { name: 'WhatsApp E2E', account: loginAccount, password: loginPassword, company: 'WhatsApp E2E', industry: '跨境电商', teamSize: '1-10人' },
  })
  expect(response.ok()).toBeTruthy()
  await login(page, loginAccount, loginPassword)
  await page.goto('/channels?setup=choose')
  await page.getByTestId('choose-whatsapp').click()
  await expect(page.getByText('普通 WhatsApp 关联设备接入', { exact: true })).toBeVisible()
  await expect(page.getByText('并非 Meta 官方 Business Cloud API', { exact: false })).toBeVisible()
  await expect(page.getByRole('button', { name: '生成 WhatsApp 配对码' })).toBeVisible()
  await page.getByRole('button', { name: '生成 WhatsApp 配对码' }).click()
  await expect(page.getByText('请输入包含国家/地区代码的 WhatsApp 手机号')).toBeVisible()
  await page.screenshot({ path: testInfo.outputPath('whatsapp-link-device-wizard.png'), fullPage: true })
})

test('企业邮箱 IMAP 和 SMTP 连接向导', async ({ page, request }, testInfo) => {
  const suffix = `${Date.now()}-${testInfo.project.name}`
  const loginAccount = `email-e2e-${suffix}@local.test`
  const loginPassword = 'Lingxi-Email-2026!'
  const response = await request.post('/api/auth/register', {
    data: { name: 'Email E2E', account: loginAccount, password: loginPassword, company: 'Email E2E', industry: '跨境电商', teamSize: '1-10人' },
  })
  expect(response.ok()).toBeTruthy()
  await login(page, loginAccount, loginPassword)
  await page.goto('/channels')
  const emailCard = page.getByTestId('channel-card-email')
  await emailCard.getByRole('button', { name: '连接', exact: true }).click()
  await expect(page.getByText('IMAP 收信 + SMTP 发信', { exact: true })).toBeVisible()
  await expect(page.getByPlaceholder('sales@company.com')).toBeVisible()
  await expect(page.getByPlaceholder('邮箱密码或应用专用密码')).toHaveAttribute('type', 'password')
  await expect(page.getByRole('button', { name: '验证并连接邮箱' })).toBeVisible()
  await page.screenshot({ path: testInfo.outputPath('email-connection-wizard.png'), fullPage: true })
})

test('渠道真实消息统计与多 Telegram 账号入口', async ({ page }) => {
  await login(page)
  const responsePromise = page.waitForResponse((response) =>
    response.url().endsWith('/api/channels') && response.request().method() === 'GET',
  )
  await page.goto('/channels')
  const response = await responsePromise
  expect(response.ok()).toBeTruthy()
  const payload = await response.json()
  for (const channel of payload.data) {
    expect(Number.isInteger(channel.todayMessages)).toBeTruthy()
    expect(channel.todayMessages).toBeGreaterThanOrEqual(0)
  }
  await page.getByRole('button', { name: 'Telegram', exact: true }).click()
  await expect(page.getByText('连接 Telegram', { exact: true })).toBeVisible()
  await expect(page.getByPlaceholder('+8613800138000')).toBeVisible()
  await expect(page.getByText('可以继续添加其他工作账号', { exact: false })).toBeVisible()
})

test('登录与核心工作台视觉链路', async ({ page }, testInfo) => {
  await login(page)
  await expect(page).toHaveURL(/\/dashboard$/)
  await page.screenshot({ path: testInfo.outputPath('dashboard.png'), fullPage: true })

  await page.goto('/channels')
  await expect(page.getByText('Telegram', { exact: true }).first()).toBeVisible()
  await page.screenshot({ path: testInfo.outputPath('channels.png'), fullPage: true })

  await page.goto('/inbox')
  await page.getByRole('button', { name: '添加联系人或群组' }).click()
  await expect(page.getByRole('dialog')).toContainText('添加联系人或群组')
  await expect(page.getByLabel('用户名、手机号或用户 ID')).toBeVisible()
  await page.getByRole('button', { name: '群组/频道', exact: true }).click()
  await expect(page.getByLabel('群组/频道用户名或 Chat ID')).toBeVisible()
  await page.getByRole('button', { name: '邀请链接', exact: true }).click()
  await expect(page.getByLabel('Telegram 邀请链接')).toBeVisible()
  await page.getByRole('button', { name: '关闭', exact: true }).click()
  const privateConversation = page.locator(
    '[data-testid="conversation-item"][data-channel="telegram"][data-last-sender="agent"]:not([data-telegram-chat-type="channel"])',
  ).first()
  await expect(privateConversation).toBeVisible()
  await privateConversation.click()
  await expect(page.getByTestId('message-content')).toHaveClass(/justify-end/)
  const languageSwitcher = page.getByRole('radiogroup', { name: '消息显示语言' })
  const originalMode = languageSwitcher.getByRole('radio', { name: '原文', exact: true })
  const translatedMode = languageSwitcher.getByRole('radio', { name: '译文', exact: true })
  await originalMode.click()
  await expect(originalMode).toHaveAttribute('aria-checked', 'true')
  await translatedMode.click()
  await expect(translatedMode).toHaveAttribute('aria-checked', 'true')
  await expect.poll(() => page.evaluate(() => localStorage.getItem('lingxi-message-view-mode'))).toBe('translated')
  await expect(page.locator('input[type="file"]')).toHaveCount(4)
  const outgoingSurface = page.locator('[data-testid="message-surface"][data-direction="outgoing"]')
  await expect(outgoingSurface.first()).toHaveClass(/telegram-bubble-out/)
  const incomingSurface = page.locator('[data-testid="message-surface"][data-direction="incoming"]')
  if (await incomingSurface.count()) await expect(incomingSurface.first()).toHaveClass(/telegram-bubble-in/)
  if (testInfo.project.name !== 'mobile-chromium') {
    await expect(privateConversation).toHaveClass(/conversation-selected/)
    await expect(page.getByTestId('conversation-list-panel')).toHaveClass(/border-slate-300/)
    await expect(page.getByTestId('chat-panel')).toHaveClass(/bg-\[#eaf2f9\]/)
  } else {
    await expect(page.getByRole('button', { name: '返回会话列表' })).toBeVisible()
  }
  await expect(page.getByTestId('conversation-insight-bar').locator('img')).toHaveCount(0)
  await expect(page.getByTestId('conversation-insight-bar')).toContainText('客户洞察')
  await page.getByRole('button', { name: 'Telegram 会话操作' }).click()
  await expect(page.getByText(/置顶会话|取消置顶/)).toBeVisible()
  await expect(page.getByText(/归档会话|移出归档/)).toBeVisible()
  await expect(page.getByText(/静音 8 小时|恢复通知/)).toBeVisible()
  await expect(page.getByText('清空消息', { exact: true })).toBeVisible()
  await expect(page.getByText('删除会话', { exact: true })).toBeVisible()
  await page.keyboard.press('Escape')
  await page.getByRole('button', { name: '切换聊天背景' }).click()
  await page.getByText('极光紫', { exact: true }).click()
  await expect(page.getByTestId('message-list')).toHaveClass(/chat-wallpaper-aurora/)
  await page.getByRole('button', { name: '切换聊天背景' }).click()
  await page.getByText('日落橙', { exact: true }).click()
  await expect(page.getByTestId('message-list')).toHaveClass(/chat-wallpaper-sunset/)
  await page.getByRole('button', { name: '切换聊天背景' }).click()
  await page.getByText('薄荷绿', { exact: true }).click()
  await expect(page.getByTestId('message-list')).toHaveClass(/chat-wallpaper-mint/)
  await expect(page.getByPlaceholder('输入回复内容，Enter 发送，Shift+Enter 换行')).toHaveClass(/min-h-\[86px\]/)
  const targetLanguage = page.getByLabel('客户目标语言')
  await expect(targetLanguage).toBeVisible()
  if (testInfo.project.name !== 'mobile-chromium') {
    await targetLanguage.selectOption('es')
    await expect(targetLanguage).toHaveValue('es')
    await page.reload()
    await expect(page.getByLabel('客户目标语言')).toHaveValue('es')
    await page.getByLabel('客户目标语言').selectOption('auto')
    await expect(page.getByLabel('客户目标语言')).toHaveValue('auto')
  }
  await page.screenshot({ path: testInfo.outputPath('inbox.png'), fullPage: true })
})

test('mobile conversation swipe reveals Telegram actions', async ({ page }, testInfo) => {
  test.skip(testInfo.project.name !== 'mobile-chromium')
  await login(page)
  await page.goto('/inbox')
  const item = page.locator('[data-testid="conversation-item"][data-channel="telegram"]').first()
  await expect(item).toBeVisible()
  await item.dispatchEvent('touchstart', { touches: [{ identifier: 1, clientX: 320, clientY: 120 }] })
  await item.dispatchEvent('touchmove', { touches: [{ identifier: 1, clientX: 120, clientY: 120 }] })
  await page.waitForTimeout(100)
  await item.dispatchEvent('touchend', { changedTouches: [{ identifier: 1, clientX: 120, clientY: 120 }] })
  const actions = item.locator('xpath=..').getByTestId('conversation-swipe-actions')
  await expect(actions).toHaveClass(/opacity-100/)
  await expect(actions.getByRole('button', { name: '删除' })).toBeVisible()
})

test('conversation list reorders immediately from WebSocket events', async ({ page }) => {
  const sockets: WebSocketRoute[] = []
  await page.routeWebSocket(/\/api\/ws/, (socket) => {
    sockets.push(socket)
    socket.send(JSON.stringify({ type: 'connected', at: new Date().toISOString() }))
  })
  await login(page)
  await page.goto('/inbox')
  const items = page.getByTestId('conversation-item')
  await expect(items.nth(1)).toBeVisible()
  // 页面跳转可能复用现有应用外壳，也可能重新建立连接；只要求当前至少存在一条可用连接。
  await expect.poll(() => sockets.length).toBeGreaterThanOrEqual(1)

  const target = items.nth(1)
  const targetId = await target.getAttribute('data-conversation-id')
  expect(targetId).toBeTruthy()
  const message = {
    id: `realtime-${Date.now()}`,
    conversationId: targetId,
    sender: 'customer',
    type: 'text',
    originalText: 'Realtime list regression',
    originalLang: 'en',
    status: 'delivered',
    createdAt: new Date(Date.now() + 60_000).toISOString(),
  }
  sockets.at(-1)!.send(JSON.stringify({
    type: 'message.received',
    conversationId: targetId,
    message,
    conversation: {
      id: targetId,
      unreadCount: 7,
      status: 'pending',
      lastMessage: message,
      updatedAt: message.createdAt,
    },
  }))

  await expect(items.first()).toHaveAttribute('data-conversation-id', targetId!)
  await expect(items.first()).toContainText('Realtime list regression')
  await expect(items.first()).toContainText('7')
})

test('知识文件真实上传解析', async ({ page }, testInfo) => {
  await login(page)
  await page.goto('/knowledge')
  await page.getByRole('button', { name: '上传文件' }).click()
  await page.locator('input[type="file"]').setInputFiles({
    name: `visual-e2e-${testInfo.project.name}.txt`,
    mimeType: 'text/plain',
    buffer: Buffer.from('灵犀跨境视觉 E2E 知识解析测试，覆盖产品资料与售后政策。'),
  })
  await page.getByRole('button', { name: /上传.*解析.*索引/ }).click()
  await expect(page.getByText(/文件解析并建立检索索引/)).toBeVisible()
  await page.screenshot({ path: testInfo.outputPath('knowledge-uploaded.png'), fullPage: true })
})

test('客户画像雷达与采购情报可视化', async ({ page }, testInfo) => {
  await login(page)
  await page.goto('/customers')
  const rows = page.getByTestId('customer-row')
  await expect(rows.first()).toBeVisible()
  await rows.first().getByRole('cell').nth(1).click()
  await expect(page.getByText('客户价值雷达', { exact: true })).toBeVisible()
  await expect(page.getByText('客户洞察', { exact: true })).toBeVisible()
  await expect(page.getByText('采购信息', { exact: true })).toBeVisible()
  await expect(page.getByText('标签画像', { exact: true })).toBeVisible()
  const semanticTags = page.locator('[data-tag-category]')
  if (await semanticTags.count()) await expect(semanticTags.first()).toBeVisible()
  else await expect(page.getByText('暂无标签，收到更多客户消息后将自动补充。')).toBeVisible()
  await page.screenshot({ path: testInfo.outputPath('customer-profile-radar.png'), fullPage: true })
})

test('团队邀请和支付页不显示虚假成功', async ({ page }, testInfo) => {
  await login(page)
  await page.goto('/team')
  await expect(page.getByRole('button', { name: '邀请成员' })).toBeVisible()
  await page.screenshot({ path: testInfo.outputPath('team.png'), fullPage: true })

  await page.goto('/billing')
  await expect(page.getByRole('heading', { name: '套餐与账单' })).toBeVisible()
  await page.screenshot({ path: testInfo.outputPath('billing.png'), fullPage: true })
})