tg-live-game-web/tests/e2e/lss.spec.ts

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

// 测试账号配置
const TEST_USERNAME = process.env.TEST_USERNAME || 'admin'
const TEST_PASSWORD = process.env.TEST_PASSWORD || '123456'

// 日本相关测试数据
const TEST_DATA = {
  name: '東京テスト環境',
  address: '東京都渋谷区神宮前1-2-3',
  // 用于恢复的原始数据
  originalName: '初台測試環境',
  originalAddress: ''
}

test.describe('LSS管理 CRUD 测试', () => {
  // 登录辅助函数
  async function login(page: Page) {
    await page.goto('/login')
    await page.evaluate(() => {
      localStorage.clear()
      document.cookie.split(';').forEach((c) => {
        document.cookie = c.replace(/^ +/, '').replace(/=.*/, '=;expires=' + new Date().toUTCString() + ';path=/')
      })
    })
    await page.reload()

    await page.getByPlaceholder('用户名').fill(TEST_USERNAME)
    await page.getByPlaceholder('密码').fill(TEST_PASSWORD)
    await page.getByRole('button', { name: '登录' }).click()
    await expect(page).not.toHaveURL(/\/login/, { timeout: 15000 })
  }

  test('LSS管理页面正确显示', async ({ page }) => {
    await login(page)
    await page.goto('/lss')

    // 验证页面标题
    await expect(page.locator('text=LSS 管理')).toBeVisible()

    // 验证搜索表单元素
    await expect(page.getByPlaceholder('LSS ID')).toBeVisible()
    await expect(page.getByPlaceholder('名称')).toBeVisible()
    await expect(page.getByRole('button', { name: 'Search' })).toBeVisible()
    await expect(page.getByRole('button', { name: 'Reset' })).toBeVisible()

    // 验证表头
    await expect(page.locator('th:has-text("LSS ID")')).toBeVisible()
    await expect(page.locator('th:has-text("Name")')).toBeVisible()
    await expect(page.locator('th:has-text("Address")')).toBeVisible()
    await expect(page.locator('th:has-text("IP")')).toBeVisible()
    await expect(page.locator('th:has-text("Actions")')).toBeVisible()
  })

  test('编辑LSS节点 - 修改Name和Address', async ({ page }) => {
    await login(page)
    await page.goto('/lss')

    // 等待表格加载
    await page.waitForTimeout(1000)

    // 找到数据行中的编辑按钮（Actions列第一个按钮）
    const editButton = page.locator('tbody tr').first().locator('button').nth(1)
    await expect(editButton).toBeVisible({ timeout: 10000 })
    await editButton.click()

    // 验证编辑对话框打开
    const dialog = page.locator('.el-drawer, .el-dialog').filter({ hasText: 'LSS详情' })
    await expect(dialog).toBeVisible({ timeout: 5000 })

    // 修改 Name 字段
    const nameInput = dialog
      .locator('input')
      .filter({ hasText: /名称|Name/ })
      .or(dialog.locator('label:has-text("Name")').locator('..').locator('input'))
      .first()

    // 使用更通用的方式定位 Name 输入框
    const nameField = dialog.getByPlaceholder('请输入名称')
    await nameField.clear()
    await nameField.fill(TEST_DATA.name)

    // 修改 Address 字段
    const addressField = dialog.getByPlaceholder('请输入地址')
    await addressField.clear()
    await addressField.fill(TEST_DATA.address)

    // 点击 Update 按钮保存
    await dialog.getByRole('button', { name: 'Update' }).click()

    // 等待对话框关闭
    await expect(dialog).not.toBeVisible({ timeout: 10000 })

    // 验证列表中数据已更新
    await page.waitForTimeout(500)
    const firstRow = page.locator('tbody tr').first()
    await expect(firstRow).toContainText(TEST_DATA.name)
    await expect(firstRow).toContainText(TEST_DATA.address)
  })

  test('查询LSS节点', async ({ page }) => {
    await login(page)
    await page.goto('/lss')

    // 等待表格加载
    await page.waitForTimeout(1000)

    // 在名称搜索框输入关键词
    await page.getByPlaceholder('名称').fill('東京')

    // 点击搜索
    await page.getByRole('button', { name: 'Search' }).click()
    await page.waitForTimeout(500)

    // 验证搜索结果
    const tableRows = page.locator('tbody tr')
    const rowCount = await tableRows.count()

    if (rowCount > 0) {
      // 验证每行都包含搜索关键词
      for (let i = 0; i < rowCount; i++) {
        const row = tableRows.nth(i)
        const rowText = await row.textContent()
        expect(rowText).toContain('東京')
      }
    }
  })

  test('重置搜索条件', async ({ page }) => {
    await login(page)
    await page.goto('/lss')

    // 填入搜索条件
    await page.getByPlaceholder('LSS ID').fill('test-id')
    await page.getByPlaceholder('名称').fill('test-name')

    // 点击重置
    await page.getByRole('button', { name: 'Reset' }).click()
    await page.waitForTimeout(300)

    // 验证搜索条件已清空
    await expect(page.getByPlaceholder('LSS ID')).toHaveValue('')
    await expect(page.getByPlaceholder('名称')).toHaveValue('')
  })

  test('查看LSS节点设备列表', async ({ page }) => {
    await login(page)
    await page.goto('/lss')

    // 等待表格加载
    await page.waitForTimeout(1000)

    // 点击 Device List 列的按钮
    const deviceListButton = page.locator('tbody tr').first().locator('button').first()
    await expect(deviceListButton).toBeVisible({ timeout: 10000 })
    await deviceListButton.click()

    // 验证设备列表面板打开
    const devicePanel = page.locator('.el-drawer, .el-dialog').filter({ hasText: '设备列表' })
    await expect(devicePanel).toBeVisible({ timeout: 5000 })

    // 验证设备列表表头
    await expect(devicePanel.locator('th:has-text("设备ID")')).toBeVisible()
    await expect(devicePanel.locator('th:has-text("名称")')).toBeVisible()

    // 关闭面板
    await devicePanel.locator('button[aria-label*="Close"], .el-drawer__close-btn, .el-dialog__close').first().click()
    await expect(devicePanel).not.toBeVisible({ timeout: 5000 })
  })

  test('从侧边栏导航到LSS管理', async ({ page }) => {
    await login(page)

    // 点击侧边栏 LSS 管理菜单项
    await page.getByText('LSS 管理').first().click()

    // 验证跳转到 LSS 管理页面
    await expect(page).toHaveURL(/\/lss/)
    await expect(page.locator('text=LSS 管理')).toBeVisible()
  })
})