file-starter/tests/e2e/specs/admin/agora-stt.spec.ts

import { test, expect } from '../../utils/test-setup';
import testUsers from '../../fixtures/test-users.json' with { type: 'json' };

test.describe('Agora实时语音转录功能', () => {
  test.beforeEach(async ({ adminLoginPage, agoraSTTPage }) => {
    // 以管理员身份登录
    await adminLoginPage.goto();
    await adminLoginPage.login(testUsers.admin.username, testUsers.admin.password);

    // 直接访问Agora STT页面
    await agoraSTTPage.goto();
  });

  test('Agora STT页面加载', async ({ agoraSTTPage }) => {
    await agoraSTTPage.expectToBeVisible();
  });

  test('组件初始状态验证', async ({ agoraSTTPage }) => {
    // 验证初始状态
    await expect(agoraSTTPage.joinChannelButton).toBeVisible();
    await expect(agoraSTTPage.leaveChannelButton).not.toBeVisible();
    await expect(agoraSTTPage.startRecordingButton).not.toBeVisible();
    await expect(agoraSTTPage.stopRecordingButton).not.toBeVisible();
    await expect(agoraSTTPage.clearTranscriptionsButton).not.toBeVisible();

    // 验证状态徽章
    const connectionStatus = await agoraSTTPage.getConnectionStatus();
    expect(connectionStatus).toBe('未连接');

    const recordingStatus = await agoraSTTPage.getRecordingStatus();
    expect(recordingStatus).toBe('未录制');

    const microphoneStatus = await agoraSTTPage.getMicrophonePermissionStatus();
    expect(microphoneStatus).toMatch(/麦克风权限|麦克风已授权|麦克风被拒绝/);

    const transcriptionCount = await agoraSTTPage.getTranscriptionCount();
    expect(transcriptionCount).toBe(0);

    // 验证使用说明显示
    await expect(agoraSTTPage.usageInstructions).toBeVisible();
  });

  test('加入和离开频道功能', async ({ agoraSTTPage }) => {
    // 加入频道
    await agoraSTTPage.joinChannel();

    // 验证连接状态更新
    await expect(agoraSTTPage.leaveChannelButton).toBeVisible();
    await expect(agoraSTTPage.startRecordingButton).toBeVisible();
    await expect(agoraSTTPage.clearTranscriptionsButton).toBeVisible();
    await expect(agoraSTTPage.joinChannelButton).not.toBeVisible();

    // 离开频道
    await agoraSTTPage.leaveChannel();

    // 验证回到初始状态
    await expect(agoraSTTPage.joinChannelButton).toBeVisible();
    await expect(agoraSTTPage.leaveChannelButton).not.toBeVisible();
    await expect(agoraSTTPage.startRecordingButton).not.toBeVisible();
    await expect(agoraSTTPage.clearTranscriptionsButton).not.toBeVisible();
  });

  test('麦克风权限申请流程', async ({ agoraSTTPage, page }) => {
    // 加入频道
    await agoraSTTPage.joinChannel();

    // 在测试环境中，我们无法实际授予麦克风权限
    // 因此跳过实际的录制功能测试，只验证按钮状态

    // 验证开始录音按钮可见
    await expect(agoraSTTPage.startRecordingButton).toBeVisible();

    // 验证录制状态初始为未录制
    const initialRecordingStatus = await agoraSTTPage.getRecordingStatus();
    expect(initialRecordingStatus).toBe('未录制');

    // 验证麦克风权限状态
    const microphoneStatus = await agoraSTTPage.getMicrophonePermissionStatus();
    expect(microphoneStatus).toBe('麦克风权限');
  });

  test('转录结果显示功能', async ({ agoraSTTPage }) => {
    // 加入频道
    await agoraSTTPage.joinChannel();

    // 在测试环境中，我们无法实际进行录音
    // 因此只验证界面状态和按钮可见性

    // 验证开始录音按钮可见
    await expect(agoraSTTPage.startRecordingButton).toBeVisible();

    // 验证清空转录按钮可见
    await expect(agoraSTTPage.clearTranscriptionsButton).toBeVisible();

    // 验证界面没有错误
    const hasError = await agoraSTTPage.hasError();
    expect(hasError).toBe(false);
  });

  test('清空转录结果功能', async ({ agoraSTTPage }) => {
    // 加入频道
    await agoraSTTPage.joinChannel();

    // 验证清空按钮可见
    await expect(agoraSTTPage.clearTranscriptionsButton).toBeVisible();

    // 点击清空按钮
    await agoraSTTPage.clearTranscriptions();

    // 验证转录结果被清空
    const hasFinalTranscriptions = await agoraSTTPage.hasFinalTranscriptions();
    expect(hasFinalTranscriptions).toBe(false);
  });

  test('错误处理机制', async ({ agoraSTTPage, page }) => {
    // 模拟网络错误场景
    // 在加入频道前断开网络连接
    await page.context().setOffline(true);

    // 尝试加入频道（应该失败）
    await agoraSTTPage.joinChannelButton.click();

    // 验证错误提示显示
    await expect(agoraSTTPage.errorAlert).toBeVisible({ timeout: 10000 });

    // 恢复网络连接
    await page.context().setOffline(false);

    // 等待网络恢复和错误状态清除
    await page.waitForTimeout(2000);

    // 刷新页面重新开始
    await agoraSTTPage.goto();

    // 正常加入频道（应该成功）
    await agoraSTTPage.joinChannel();
  });

  test('响应式布局 - 桌面端', async ({ agoraSTTPage, page }) => {
    await page.setViewportSize({ width: 1200, height: 800 });
    await agoraSTTPage.expectToBeVisible();

    // 验证桌面端布局元素
    await expect(agoraSTTPage.pageTitle).toBeVisible();
    await expect(agoraSTTPage.joinChannelButton).toBeVisible();
    await expect(agoraSTTPage.usageInstructions).toBeVisible();
  });

  test('响应式布局 - 平板端', async ({ agoraSTTPage, page }) => {
    await page.setViewportSize({ width: 768, height: 1024 });
    await agoraSTTPage.expectToBeVisible();

    // 验证平板端布局
    await expect(agoraSTTPage.pageTitle).toBeVisible();
    await expect(agoraSTTPage.joinChannelButton).toBeVisible();
  });

  test('响应式布局 - 移动端', async ({ agoraSTTPage, page }) => {
    await page.setViewportSize({ width: 375, height: 667 });
    await agoraSTTPage.expectToBeVisible();

    // 验证移动端布局
    await expect(agoraSTTPage.pageTitle).toBeVisible();
    await expect(agoraSTTPage.joinChannelButton).toBeVisible();
  });

  test('无障碍功能验证', async ({ agoraSTTPage, page }) => {
    // 验证ARIA标签
    await expect(agoraSTTPage.joinChannelButton).toHaveAttribute('aria-label', /加入语音频道|连接中\.\.\./);

    // 验证语义化标记
    await expect(agoraSTTPage.page.getByRole('region', { name: '语音转文字组件' })).toBeVisible();

    // 验证按钮有正确的可访问性属性
    await expect(agoraSTTPage.joinChannelButton).toHaveAttribute('data-testid', 'join-channel-button');

    // 先加入频道，然后验证离开频道按钮的属性
    await agoraSTTPage.joinChannel();
    await expect(agoraSTTPage.leaveChannelButton).toHaveAttribute('data-testid', 'leave-channel-button');
  });

  test('Token和配置统一获取验证', async ({ agoraSTTPage, page }) => {
    // 监听网络请求，验证Token API调用
    const tokenApiRequests: string[] = [];

    page.on('request', (request) => {
      if (request.url().includes('/api/v1/agora/token')) {
        tokenApiRequests.push(request.url());
      }
    });

    // 加入频道，这会触发Token和配置获取
    await agoraSTTPage.joinChannel();

    // 验证Token API被调用
    expect(tokenApiRequests.length).toBeGreaterThan(0);

    // 验证请求参数包含正确的type和channel
    const requestUrl = tokenApiRequests[0];
    expect(requestUrl).toContain('type=rtm');
    expect(requestUrl).toContain('channel=');

    // 验证连接状态正确更新
    const connectionStatus = await agoraSTTPage.getConnectionStatus();
    expect(connectionStatus).toBe('已连接');

    // 验证组件功能正常
    await expect(agoraSTTPage.startRecordingButton).toBeVisible();
    await expect(agoraSTTPage.clearTranscriptionsButton).toBeVisible();
  });

  test('配置常量显示验证', async ({ agoraSTTPage }) => {
    // 加入频道以获取配置常量
    await agoraSTTPage.joinChannel();

    // 验证配置信息显示（如果组件显示配置信息）
    // 这里可以检查页面是否显示了从API获取的配置常量

    // 验证组件状态正常，没有错误
    const hasError = await agoraSTTPage.hasError();
    expect(hasError).toBe(false);

    // 验证连接状态
    const connectionStatus = await agoraSTTPage.getConnectionStatus();
    expect(connectionStatus).toBe('已连接');
  });

  test('Token API错误处理', async ({ agoraSTTPage, page }) => {
    // 模拟Token API失败
    await page.route('**/api/v1/agora/token*', async (route) => {
      await route.fulfill({
        status: 500,
        contentType: 'application/json',
        body: JSON.stringify({ message: 'Token生成失败' })
      });
    });

    // 尝试加入频道
    await agoraSTTPage.joinChannelButton.click();

    // 验证错误处理
    await expect(agoraSTTPage.errorAlert).toBeVisible({ timeout: 5000 });

    // 验证连接状态未改变
    const connectionStatus = await agoraSTTPage.getConnectionStatus();
    expect(connectionStatus).toBe('未连接');

    // 恢复正常路由
    await page.unroute('**/api/v1/agora/token*');
  });

  test('完整流程测试', async ({ agoraSTTPage }) => {
    // 完整测试语音转文字流程

    // 1. 初始状态验证
    await expect(agoraSTTPage.joinChannelButton).toBeVisible();

    // 2. 加入频道
    await agoraSTTPage.joinChannel();

    // 3. 在测试环境中跳过录音过程（需要实际麦克风权限）
    // 只验证按钮状态
    await expect(agoraSTTPage.startRecordingButton).toBeVisible();
    await expect(agoraSTTPage.clearTranscriptionsButton).toBeVisible();

    // 6. 离开频道
    await agoraSTTPage.leaveChannel();

    // 7. 验证回到初始状态
    await expect(agoraSTTPage.joinChannelButton).toBeVisible();
    await expect(agoraSTTPage.leaveChannelButton).not.toBeVisible();
  });

  test.skip('麦克风权限被拒绝场景', async ({ agoraSTTPage }) => {
    // 跳过此测试，因为在Playwright测试中无法模拟具体的麦克风权限拒绝
    // 在实际环境中，当麦克风权限被拒绝时，组件应该显示相应的错误信息

    // 加入频道
    await agoraSTTPage.joinChannel();

    // 验证组件能够处理权限拒绝的情况
    const hasError = await agoraSTTPage.hasError();
    // 组件应该优雅地处理权限问题，而不是崩溃
    expect(hasError).toBe(false);
  });
});