mini-starter/tests/e2e/specs/travel-flow/combination-query.spec.ts

import { test, expect } from '../../utils/test-setup';

test.describe('组合查询流程 E2E 测试', () => {
  test.beforeEach(async ({ page }) => {
    // 确保数据库中有测试数据
    await page.goto('/');
  });

  test('完整组合查询流程 - 大巴拼车', async ({ page }) => {
    // 1. 访问首页
    await page.goto('/');
    await expect(page.locator('text=便捷出行')).toBeVisible();

    // 2. 验证默认选择大巴拼车
    const busOption = page.locator('text=大巴拼车').first();
    await expect(busOption).toBeVisible();
    await expect(busOption).toHaveClass(/bg-gradient-to-r/);

    // 3. 设置出发地
    const startLocationButton = page.locator('button:has-text("出发地")').first();
    await startLocationButton.click();

    // 等待地区选择器显示
    await expect(page.locator('text=选择出发地')).toBeVisible();

    // 选择地区（这里使用模拟的地区选择）
    const confirmButton = page.locator('button:has-text("确认")').first();
    await confirmButton.click();

    // 4. 设置目的地
    const endLocationButton = page.locator('button:has-text("目的地")').first();
    await endLocationButton.click();

    await expect(page.locator('text=选择目的地')).toBeVisible();
    await confirmButton.click();

    // 5. 验证地区选择成功
    await expect(page.locator('text=北京市 北京市 朝阳区')).toBeVisible();

    // 6. 点击查询按钮
    const searchButton = page.locator('button:has-text("查询路线")').first();
    await searchButton.click();

    // 7. 验证导航到活动选择页面
    await expect(page).toHaveURL(/.*pages\/select-activity\/ActivitySelectPage/);

    // 8. 验证查询参数传递正确
    const currentUrl = page.url();
    expect(currentUrl).toContain('vehicleType=bus');
    expect(currentUrl).toContain('travelMode=carpool');
    expect(currentUrl).toContain('startAreaIds=');
    expect(currentUrl).toContain('endAreaIds=');

    // 9. 验证活动选择页面显示
    await expect(page.locator('text=选择活动')).toBeVisible();

    // 10. 选择第一个活动
    const firstActivity = page.locator('[data-testid="activity-card"]').first();
    await firstActivity.click();

    // 11. 验证导航到班次列表页面
    await expect(page).toHaveURL(/.*pages\/schedule-list\/ScheduleListPage/);

    // 12. 验证班次列表页面显示
    await expect(page.locator('text=路线列表')).toBeVisible();

    // 13. 验证路线卡片显示车型和出行方式
    const routeCard = page.locator('[data-testid="route-card"]').first();
    await expect(routeCard).toBeVisible();

    // 验证包含车型信息
    await expect(routeCard).toContainText(/大巴|中巴|小车|商务车/);

    // 验证包含出行方式信息
    await expect(routeCard).toContainText(/拼车|包车/);
  });

  test('完整组合查询流程 - 商务车', async ({ page }) => {
    // 1. 访问首页
    await page.goto('/');
    await expect(page.locator('text=便捷出行')).toBeVisible();

    // 2. 选择商务车
    const businessOption = page.locator('text=商务车').first();
    await businessOption.click();
    await expect(businessOption).toHaveClass(/bg-gradient-to-r/);

    // 3. 设置出发地
    const startLocationButton = page.locator('button:has-text("出发地")').first();
    await startLocationButton.click();

    // 等待地区选择器显示
    await expect(page.locator('text=选择出发地')).toBeVisible();

    // 选择地区
    const confirmButton = page.locator('button:has-text("确认")').first();
    await confirmButton.click();

    // 4. 设置目的地
    const endLocationButton = page.locator('button:has-text("目的地")').first();
    await endLocationButton.click();

    await expect(page.locator('text=选择目的地')).toBeVisible();
    await confirmButton.click();

    // 5. 点击查询按钮
    const searchButton = page.locator('button:has-text("查询路线")').first();
    await searchButton.click();

    // 6. 验证导航到活动选择页面
    await expect(page).toHaveURL(/.*pages\/select-activity\/ActivitySelectPage/);

    // 7. 验证商务车组合查询参数
    const currentUrl = page.url();
    expect(currentUrl).toContain('vehicleType=business');
    expect(currentUrl).toContain('travelMode=carpool,charter');

    // 8. 选择第一个活动
    const firstActivity = page.locator('[data-testid="activity-card"]').first();
    await firstActivity.click();

    // 9. 验证导航到班次列表页面
    await expect(page).toHaveURL(/.*pages\/schedule-list\/ScheduleListPage/);

    // 10. 验证班次列表页面显示
    await expect(page.locator('text=路线列表')).toBeVisible();

    // 11. 验证路线卡片显示商务车信息
    const routeCard = page.locator('[data-testid="route-card"]').first();
    await expect(routeCard).toBeVisible();

    // 验证包含商务车型信息
    await expect(routeCard).toContainText(/商务车/);
  });

  test('完整组合查询流程 - 包车', async ({ page }) => {
    // 1. 访问首页
    await page.goto('/');
    await expect(page.locator('text=便捷出行')).toBeVisible();

    // 2. 选择包车
    const charterOption = page.locator('text=包车').first();
    await charterOption.click();
    await expect(charterOption).toHaveClass(/bg-gradient-to-r/);

    // 3. 设置出发地
    const startLocationButton = page.locator('button:has-text("出发地")').first();
    await startLocationButton.click();

    // 等待地区选择器显示
    await expect(page.locator('text=选择出发地')).toBeVisible();

    // 选择地区
    const confirmButton = page.locator('button:has-text("确认")').first();
    await confirmButton.click();

    // 4. 设置目的地
    const endLocationButton = page.locator('button:has-text("目的地")').first();
    await endLocationButton.click();

    await expect(page.locator('text=选择目的地')).toBeVisible();
    await confirmButton.click();

    // 5. 点击查询按钮
    const searchButton = page.locator('button:has-text("查询路线")').first();
    await searchButton.click();

    // 6. 验证导航到活动选择页面
    await expect(page).toHaveURL(/.*pages\/select-activity\/ActivitySelectPage/);

    // 7. 验证包车组合查询参数
    const currentUrl = page.url();
    expect(currentUrl).toContain('vehicleType=bus,business');
    expect(currentUrl).toContain('travelMode=charter');

    // 8. 选择第一个活动
    const firstActivity = page.locator('[data-testid="activity-card"]').first();
    await firstActivity.click();

    // 9. 验证导航到班次列表页面
    await expect(page).toHaveURL(/.*pages\/schedule-list\/ScheduleListPage/);

    // 10. 验证班次列表页面显示
    await expect(page.locator('text=路线列表')).toBeVisible();

    // 11. 验证路线卡片显示包车信息
    const routeCard = page.locator('[data-testid="route-card"]').first();
    await expect(routeCard).toBeVisible();

    // 验证包含包车出行方式信息
    await expect(routeCard).toContainText(/包车/);
  });

  test('组合查询选项切换', async ({ page }) => {
    // 1. 访问首页
    await page.goto('/');

    // 2. 验证默认选择大巴拼车
    const busOption = page.locator('text=大巴拼车').first();
    const businessOption = page.locator('text=商务车').first();
    const charterOption = page.locator('text=包车').first();

    await expect(busOption).toHaveClass(/bg-gradient-to-r/);
    await expect(businessOption).not.toHaveClass(/text-white/);
    await expect(charterOption).not.toHaveClass(/text-white/);

    // 3. 切换到商务车
    await businessOption.click();
    await expect(busOption).not.toHaveClass(/text-white/);
    await expect(businessOption).toHaveClass(/bg-gradient-to-r/);
    await expect(charterOption).not.toHaveClass(/text-white/);

    // 4. 切换到包车
    await charterOption.click();
    await expect(busOption).not.toHaveClass(/text-white/);
    await expect(businessOption).not.toHaveClass(/text-white/);
    await expect(charterOption).toHaveClass(/bg-gradient-to-r/);

    // 5. 切换回大巴拼车
    await busOption.click();
    await expect(busOption).toHaveClass(/bg-gradient-to-r/);
    await expect(businessOption).not.toHaveClass(/text-white/);
    await expect(charterOption).not.toHaveClass(/text-white/);
  });

  test('组合查询参数验证', async ({ page }) => {
    // 1. 访问首页
    await page.goto('/');

    // 2. 设置出发地和目的地
    const startLocationButton = page.locator('button:has-text("出发地")').first();
    await startLocationButton.click();

    const confirmButton = page.locator('button:has-text("确认")').first();
    await confirmButton.click();

    const endLocationButton = page.locator('button:has-text("目的地")').first();
    await endLocationButton.click();
    await confirmButton.click();

    // 3. 测试大巴拼车参数
    const busOption = page.locator('text=大巴拼车').first();
    await busOption.click();

    const searchButton = page.locator('button:has-text("查询路线")').first();
    await searchButton.click();

    let currentUrl = page.url();
    expect(currentUrl).toContain('vehicleType=bus');
    expect(currentUrl).toContain('travelMode=carpool');

    // 4. 返回首页测试商务车参数
    await page.goBack();

    const businessOption = page.locator('text=商务车').first();
    await businessOption.click();
    await searchButton.click();

    currentUrl = page.url();
    expect(currentUrl).toContain('vehicleType=business');
    expect(currentUrl).toContain('travelMode=carpool,charter');

    // 5. 返回首页测试包车参数
    await page.goBack();

    const charterOption = page.locator('text=包车').first();
    await charterOption.click();
    await searchButton.click();

    currentUrl = page.url();
    expect(currentUrl).toContain('vehicleType=bus,business');
    expect(currentUrl).toContain('travelMode=charter');
  });

  test('组合查询结果验证', async ({ page }) => {
    // 1. 访问首页并设置查询条件
    await page.goto('/');

    // 设置出发地和目的地
    const startLocationButton = page.locator('button:has-text("出发地")').first();
    await startLocationButton.click();

    const confirmButton = page.locator('button:has-text("确认")').first();
    await confirmButton.click();

    const endLocationButton = page.locator('button:has-text("目的地")').first();
    await endLocationButton.click();
    await confirmButton.click();

    // 2. 测试大巴拼车查询结果
    const busOption = page.locator('text=大巴拼车').first();
    await busOption.click();

    const searchButton = page.locator('button:has-text("查询路线")').first();
    await searchButton.click();

    // 等待活动选择页面加载
    await expect(page.locator('text=选择活动')).toBeVisible();

    // 验证活动列表显示
    const activityCards = page.locator('[data-testid="activity-card"]');
    await expect(activityCards.first()).toBeVisible();

    // 3. 选择活动并验证路线列表
    await activityCards.first().click();

    // 等待班次列表页面加载
    await expect(page.locator('text=路线列表')).toBeVisible();

    // 验证路线列表显示
    const routeCards = page.locator('[data-testid="route-card"]');
    await expect(routeCards.first()).toBeVisible();

    // 4. 验证路线信息包含车型和出行方式
    const firstRouteCard = routeCards.first();
    const routeText = await firstRouteCard.textContent();

    // 验证包含车型信息
    expect(routeText).toMatch(/大巴|中巴|小车|商务车/);

    // 验证包含出行方式信息
    expect(routeText).toMatch(/拼车|包车/);

    // 5. 验证路线详情显示完整信息
    await firstRouteCard.click();

    // 验证路线详情页面显示
    await expect(page.locator('text=路线详情')).toBeVisible();

    // 验证详情页面包含车型和出行方式信息
    const detailText = await page.textContent('body');
    expect(detailText).toMatch(/车型.*[大巴|中巴|小车|商务车]/);
    expect(detailText).toMatch(/出行方式.*[拼车|包车]/);
  });

  test('组合查询错误处理', async ({ page }) => {
    // 1. 访问首页
    await page.goto('/');

    // 2. 不设置出发地和目的地，直接点击查询
    const searchButton = page.locator('button:has-text("查询路线")').first();
    await searchButton.click();

    // 3. 验证页面没有跳转（应该停留在首页）
    await expect(page).toHaveURL(/\/$/);

    // 4. 验证错误提示显示（如果有的话）
    // 这里可以根据实际实现检查是否有错误提示

    // 5. 只设置出发地，不设置目的地
    const startLocationButton = page.locator('button:has-text("出发地")').first();
    await startLocationButton.click();

    const confirmButton = page.locator('button:has-text("确认")').first();
    await confirmButton.click();

    // 6. 再次点击查询
    await searchButton.click();

    // 7. 验证页面仍然没有跳转
    await expect(page).toHaveURL(/\/$/);

    // 8. 设置目的地
    const endLocationButton = page.locator('button:has-text("目的地")').first();
    await endLocationButton.click();
    await confirmButton.click();

    // 9. 现在应该可以正常查询
    await searchButton.click();

    // 10. 验证页面跳转到活动选择页面
    await expect(page).toHaveURL(/.*pages\/select-activity\/ActivitySelectPage/);
  });

  test('组合查询性能测试', async ({ page }) => {
    // 1. 访问首页
    await page.goto('/');

    // 2. 设置查询条件
    const startLocationButton = page.locator('button:has-text("出发地")').first();
    await startLocationButton.click();

    const confirmButton = page.locator('button:has-text("确认")').first();
    await confirmButton.click();

    const endLocationButton = page.locator('button:has-text("目的地")').first();
    await endLocationButton.click();
    await confirmButton.click();

    // 3. 测试不同组合查询的响应时间
    const travelOptions = [
      { name: '大巴拼车', expectedParams: { vehicleType: 'bus', travelMode: 'carpool' } },
      { name: '商务车', expectedParams: { vehicleType: 'business', travelMode: 'carpool,charter' } },
      { name: '包车', expectedParams: { vehicleType: 'bus,business', travelMode: 'charter' } }
    ];

    for (const option of travelOptions) {
      // 选择出行方式
      const optionElement = page.locator(`text=${option.name}`).first();
      await optionElement.click();

      // 记录开始时间
      const startTime = Date.now();

      // 点击查询
      const searchButton = page.locator('button:has-text("查询路线")').first();
      await searchButton.click();

      // 等待页面加载完成
      await expect(page).toHaveURL(/.*pages\/select-activity\/ActivitySelectPage/);

      // 记录结束时间
      const endTime = Date.now();
      const responseTime = endTime - startTime;

      // 验证响应时间在合理范围内（小于5秒）
      expect(responseTime).toBeLessThan(5000);

      // 验证查询参数正确
      const currentUrl = page.url();
      expect(currentUrl).toContain(`vehicleType=${option.expectedParams.vehicleType}`);
      expect(currentUrl).toContain(`travelMode=${option.expectedParams.travelMode}`);

      // 返回首页进行下一个测试
      await page.goBack();
    }
  });
});