import { test, expect } from './fixtures';
import { expectHydrated } from './hydrated';

// 桌面 hover 下拉在 md 断点以上才渲染（移动端用抽屉 + TabBar），
// 固定为桌面视口，使 chromium-mobile 项目也按本用例真实语义验证引擎差异。
test.use({ viewport: { width: 1440, height: 900 } });

test('主导航产品下拉菜单可在 hover 时展开', { tag: '@smoke' }, async ({ page }) => {
  await page.goto('/', { waitUntil: 'domcontentloaded' });
  // 等待桌面导航 hydration 完成
  await expect(page.locator('nav[aria-label="主导航"]')).toBeVisible({ timeout: 10000 });

  const productsButton = page.locator('nav[aria-label="主导航"] button:has-text("产品")');
  await expect(productsButton).toHaveAttribute('aria-expanded', 'false');

  await expectHydrated(productsButton);
  // Header 入场动画 + 并发负载下，一次 hover 可能落在指针尚未真正覆盖按钮的那一帧，
  // mouseenter 不会补发；重新把指针移开再悬停，直到面板真的展开。
  await expect(async () => {
    await page.mouse.move(0, 0);
    await productsButton.hover();
    await expect(productsButton).toHaveAttribute('aria-expanded', 'true', { timeout: 1000 });
  }).toPass({ timeout: 20000 });
  await expect(page.locator('text=企业套装').first()).toBeVisible();
  await expect(page.locator('text=ERP 管理系统').first()).toBeVisible();
});

test('主导航解决方案下拉菜单可在 hover 时展开', { tag: '@smoke' }, async ({ page }) => {
  await page.goto('/', { waitUntil: 'domcontentloaded' });
  // 等待桌面导航 hydration 完成
  await expect(page.locator('nav[aria-label="主导航"]')).toBeVisible({ timeout: 10000 });

  const solutionsButton = page.locator('nav[aria-label="主导航"] button:has-text("解决方案")');
  await expect(solutionsButton).toHaveAttribute('aria-expanded', 'false');

  await expectHydrated(solutionsButton);
  await expect(async () => {
    await page.mouse.move(0, 0);
    await solutionsButton.hover();
    await expect(solutionsButton).toHaveAttribute('aria-expanded', 'true', { timeout: 1000 });
  }).toPass({ timeout: 20000 });
  await expect(page.locator('text=行业解决方案').first()).toBeVisible();
  await expect(page.locator('text=制造业').first()).toBeVisible();
});