library-picturebook-activity/lesingle-creation-frontend/e2e/admin/login.spec.ts

import { test, expect } from '../fixtures/admin.fixture'
import { setupApiMocks, TENANT_CODE, MOCK_TOKEN } from '../fixtures/admin.fixture'

/**
 * 登录流程测试
 * 测试管理端登录页面的各项功能
 */

test.describe('管理端登录流程', () => {
  test.beforeEach(async ({ page }) => {
    await setupApiMocks(page)
  })

  test('L-01 管理端登录页正常渲染', async ({ page }) => {
    await page.goto(`/${TENANT_CODE}/login`)

    // 验证页面标题
    await expect(page.locator('.login-header h2')).toHaveText('乐绘世界创想活动乐园')

    // 验证表单字段可见
    await expect(page.locator('input[placeholder="请输入用户名"]')).toBeVisible()
    await expect(page.locator('input[placeholder="请输入密码"]')).toBeVisible()

    // 验证登录按钮可见
    await expect(page.locator('button.login-btn')).toBeVisible()
    // Ant Design 按钮文本可能有空格，使用正则匹配
    await expect(page.locator('button.login-btn')).toHaveText(/登\s*录/)
  })

  test('L-02 空表单提交显示校验错误', async ({ page }) => {
    await page.goto(`/${TENANT_CODE}/login`)

    // 开发模式会自动填充 admin/admin123，先清空字段
    const usernameInput = page.locator('input[placeholder="请输入用户名"]')
    const passwordInput = page.locator('input[type="password"]')
    await usernameInput.clear()
    await passwordInput.clear()

    // 点击提交按钮触发 Ant Design 表单校验（html-type="submit"）
    await page.locator('button.login-btn').click()

    // Ant Design Vue 表单校验失败时会显示错误提示
    await expect(
      page.locator('.ant-form-item-explain-error, .ant-form-item-explain, .ant-form-item-with-help, .has-error').first()
    ).toBeVisible({ timeout: 5000 })
  })

  test('L-03 错误密码登录失败', async ({ page }) => {
    await page.goto(`/${TENANT_CODE}/login`)

    // 填写错误的用户名和密码
    await page.locator('input[placeholder="请输入用户名"]').fill('wrong')
    await page.locator('input[type="password"]').fill('wrongpassword')

    // 点击登录
    await page.locator('button.login-btn').click()

    // 验证错误提示信息
    await expect(page.locator('.ant-message')).toBeVisible({ timeout: 5000 })
  })

  test('L-04 正确凭据登录成功跳转', async ({ page }) => {
    await page.goto(`/${TENANT_CODE}/login`)

    // 填写正确的用户名和密码
    await page.locator('input[placeholder="请输入用户名"]').fill('admin')
    await page.locator('input[type="password"]').fill('admin123')

    // 点击登录
    await page.locator('button.login-btn').click()

    // 验证跳转到管理端页面（离开登录页）
    await page.waitForURL((url) => !url.pathname.includes('/login'), { timeout: 15_000 })

    // 验证侧边栏可见（说明进入了管理端布局）
    await expect(page.locator('.custom-sider')).toBeVisible({ timeout: 10_000 })
  })

  test('L-05 登录后 Token 存储正确', async ({ page }) => {
    await page.goto(`/${TENANT_CODE}/login`)

    // 填写并提交登录
    await page.locator('input[placeholder="请输入用户名"]').fill('admin')
    await page.locator('input[type="password"]').fill('admin123')
    await page.locator('button.login-btn').click()

    // 等待跳转
    await page.waitForURL((url) => !url.pathname.includes('/login'), { timeout: 15_000 })

    // 验证 Cookie 中包含 token
    const cookies = await page.context().cookies()
    const tokenCookie = cookies.find((c) => c.name === 'token')
    expect(tokenCookie).toBeDefined()
    expect(tokenCookie!.value.length).toBeGreaterThan(0)
  })

  test('L-06 退出登录清除状态', async ({ page }) => {
    await page.goto(`/${TENANT_CODE}/login`)

    // 先登录
    await page.locator('input[placeholder="请输入用户名"]').fill('admin')
    await page.locator('input[type="password"]').fill('admin123')
    await page.locator('button.login-btn').click()
    await page.waitForURL((url) => !url.pathname.includes('/login'), { timeout: 15_000 })
    await expect(page.locator('.custom-sider')).toBeVisible({ timeout: 10_000 })

    // 点击用户头像区域
    await page.locator('.user-info').click()

    // 点击退出登录
    await page.locator('text=退出登录').click()

    // 验证跳转回登录页
    await page.waitForURL(/\/login/, { timeout: 10_000 })
    await expect(page.locator('.login-container')).toBeVisible()
  })
})