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

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

test.describe('Auth Module E2E Tests', () => {
  test.describe('Login Page', () => {
    test.beforeEach(async ({ page }) => {
      await page.goto('/login')
    })

    test('should display login form correctly', async ({ page }) => {
      await expect(page).toHaveTitle(/摄像头管理系统/)
      await expect(page.getByPlaceholder('请输入用户名')).toBeVisible()
      await expect(page.getByPlaceholder('请输入密码')).toBeVisible()
      await expect(page.getByRole('button', { name: '登 录' })).toBeVisible()
      await expect(page.getByText('记住我')).toBeVisible()
    })

    test('should show validation error when submitting empty form', async ({ page }) => {
      await page.getByRole('button', { name: '登 录' }).click()
      await expect(page.getByText('请输入用户名')).toBeVisible()
      await expect(page.getByText('请输入密码')).toBeVisible()
    })

    test('should show error with invalid credentials', async ({ page }) => {
      await page.getByPlaceholder('请输入用户名').fill('invalid_user')
      await page.getByPlaceholder('请输入密码').fill('wrong_password')
      await page.getByRole('button', { name: '登 录' }).click()
      await expect(page.locator('.el-message--error').first()).toBeVisible({ timeout: 10000 })
    })

    test('should show help message when clicking forgot password', async ({ page }) => {
      await page.getByText('忘记密码？').click()
      await expect(page.locator('.el-message--info')).toBeVisible()
      await expect(page.getByText('请联系管理员重置密码')).toBeVisible()
    })

    test('should have remember me checkbox checked by default', async ({ page }) => {
      const rememberCheckbox = page.locator('.el-checkbox').filter({ hasText: '记住我' })
      await expect(rememberCheckbox).toBeVisible()
      await expect(rememberCheckbox).toHaveClass(/is-checked/)
    })
  })

  test.describe('Authenticated Features', () => {
    // These tests require valid credentials
    // Skip if no test credentials are configured
    const username = process.env.TEST_USERNAME || 'admin'
    const password = process.env.TEST_PASSWORD || 'admin123'

    test.skip('should login and see user dropdown', async ({ page }) => {
      await page.goto('/login')
      await page.getByPlaceholder('请输入用户名').fill(username)
      await page.getByPlaceholder('请输入密码').fill(password)
      await page.getByRole('button', { name: '登 录' }).click()

      // Wait for redirect and check user dropdown exists
      await expect(page).not.toHaveURL(/\/login/, { timeout: 10000 })
      await expect(page.locator('.user-info')).toBeVisible()
    })

    test.skip('should show change password dialog from dropdown', async ({ page }) => {
      // Login first
      await page.goto('/login')
      await page.getByPlaceholder('请输入用户名').fill(username)
      await page.getByPlaceholder('请输入密码').fill(password)
      await page.getByRole('button', { name: '登 录' }).click()
      await expect(page).not.toHaveURL(/\/login/, { timeout: 10000 })

      // Open user dropdown
      await page.locator('.user-info').click()
      await expect(page.getByText('修改密码')).toBeVisible()

      // Click change password
      await page.getByText('修改密码').click()

      // Verify dialog opens
      await expect(page.getByRole('dialog')).toBeVisible()
      await expect(page.getByText('修改密码').first()).toBeVisible()
      await expect(page.getByPlaceholder('请输入原密码')).toBeVisible()
      await expect(page.getByPlaceholder('请输入新密码')).toBeVisible()
      await expect(page.getByPlaceholder('请再次输入新密码')).toBeVisible()
    })

    test.skip('should validate change password form', async ({ page }) => {
      // Login first
      await page.goto('/login')
      await page.getByPlaceholder('请输入用户名').fill(username)
      await page.getByPlaceholder('请输入密码').fill(password)
      await page.getByRole('button', { name: '登 录' }).click()
      await expect(page).not.toHaveURL(/\/login/, { timeout: 10000 })

      // Open change password dialog
      await page.locator('.user-info').click()
      await page.getByText('修改密码').click()

      // Try to submit empty form
      await page.getByRole('dialog').getByRole('button', { name: '确定' }).click()

      // Check validation errors
      await expect(page.getByText('请输入原密码')).toBeVisible()
      await expect(page.getByText('请输入新密码')).toBeVisible()
      await expect(page.getByText('请再次输入新密码')).toBeVisible()
    })

    test.skip('should validate password confirmation match', async ({ page }) => {
      // Login first
      await page.goto('/login')
      await page.getByPlaceholder('请输入用户名').fill(username)
      await page.getByPlaceholder('请输入密码').fill(password)
      await page.getByRole('button', { name: '登 录' }).click()
      await expect(page).not.toHaveURL(/\/login/, { timeout: 10000 })

      // Open change password dialog
      await page.locator('.user-info').click()
      await page.getByText('修改密码').click()

      // Fill mismatched passwords
      await page.getByPlaceholder('请输入原密码').fill('oldpass')
      await page.getByPlaceholder('请输入新密码').fill('newpass123')
      await page.getByPlaceholder('请再次输入新密码').fill('differentpass')
      await page.getByPlaceholder('请再次输入新密码').blur()

      // Check validation error
      await expect(page.getByText('两次输入的密码不一致')).toBeVisible()
    })

    test.skip('should logout successfully', async ({ page }) => {
      // Login first
      await page.goto('/login')
      await page.getByPlaceholder('请输入用户名').fill(username)
      await page.getByPlaceholder('请输入密码').fill(password)
      await page.getByRole('button', { name: '登 录' }).click()
      await expect(page).not.toHaveURL(/\/login/, { timeout: 10000 })

      // Open user dropdown and logout
      await page.locator('.user-info').click()
      await page.getByText('退出登录').click()

      // Should redirect to login page
      await expect(page).toHaveURL(/\/login/, { timeout: 10000 })
    })
  })
})