/* 侧栏岛（`frontend/src/react/sidebar/`，ADR-0031 第 11f 步）在真浏览器里的行为：拖动排序写回、五处语境的
 * 筛选分组与计数、切页时那块玻璃一路滑过去、手机宽度下抽屉的开合，以及覆盖式滚动条仍挂在滚动层上。
 *
 * 写接口一律落在桩里（`settings-fixture`、`follow-fixture`、`item-fixture`）。聚合接口 `/api/facets` 照演示库
 * 真取一份，只把内容标签换成按语境可区分的几枚：首页与实体页数字不同，才看得出侧栏是按语境取的。演示库没有
 * 人物实体，实体页的资料与作品照接口的形状在这里给（同 `entity-filter.test.ts`）。 */
import assert from 'node:assert/strict';
import { after, before, describe, it } from 'node:test';

import type { Browser, Page } from 'playwright-core';

import { expectBody, launch, settle, visit, VIEWPORTS } from './harness.ts';
import { openFollowFeed } from './follow-fixture.ts';
import { ITEM, openItemPage } from './item-fixture.ts';
import { openHome, ORDER } from './settings-fixture.ts';

const DESKTOP = VIEWPORTS.find((viewport) => !viewport.mobile)!;
const PHONE = VIEWPORTS.find((viewport) => viewport.mobile)!;
const HOME_TAGS = [['演示侧栏甲', 41], ['演示侧栏乙', 7]] as const;
const ENTITY_TAGS = [['演示侧栏甲', 23], ['演示侧栏乙', 5]] as const;
const withoutPlayer = (problems: string[]) => problems.filter((line) => !line.includes('VIDEOJS'));
const PERFORMER = '篠田ゆう';
const THUMB = '<svg xmlns="http://www.w3.org/2000/svg" width="640" height="360"><rect width="640" height="360" fill="#456"/></svg>';

/** 女优资料页要的资料、作品、照片与图。 */
async function serveEntity(page: Page): Promise<void> {
  const entity = {
    id: 90_101, kind: 'performer', canonical_name: PERFORMER, aliases: [], display_aliases: [], user_aliases: [],
    asset_count: 6, tags: [], related_performers: [], links: [], metadata: {}, has_image: false, has_avatar: false,
    avatar_focus: null, representative_asset_id: null, entry_links: [], feed: null,
  };
  const items = Array.from({ length: 6 }, (_, at) => ({
    id: 91_000 + at, name: `SSIS-${100 + at} 演示作品 ${at + 1}`, code: `SSIS-${100 + at}`, is_jav: true, has_thumb: true,
    duration: 7200, studio: 'S1 NO.1 STYLE', tags: [],
  }));
  await page.route(/\/api\/entity\?/, (route) => route.fulfill({ json: entity }));
  await page.route((url) => url.pathname === '/api/items', (route) => route.fulfill({ json: {
    items: Number(new URL(route.request().url()).searchParams.get('offset') || 0) ? [] : items, total: items.length, has_more: false,
  } }));
  await page.route((url) => url.pathname === '/api/photos', (route) =>
    route.fulfill({ json: { total: 0, sample_total: 0, sets: [], items: [], has_more: false, seed: '' } }));
  await page.route((url) => url.pathname === '/api/feeds/discoveries', (route) =>
    route.fulfill({ json: { ok: true, more: false, items: [] } }));
  await page.route(/\/(?:thumb|poster|photo-thumb|cover)\?/, (route) =>
    route.fulfill({ contentType: 'image/svg+xml', body: THUMB }));
}

/** 把 `/api/facets` 的内容标签换成按语境给的那一份；交回收到的查询串，好看实体页是不是按实体口径取的。 */
async function scopeFacets(page: Page): Promise<string[]> {
  const seen: string[] = [];
  await page.route((url) => url.pathname === '/api/facets', async (route) => {
    const url = new URL(route.request().url());
    seen.push(url.search);
    const real = await (await route.fetch()).json() as Record<string, unknown>;
    const rows = url.searchParams.get('scope_kind') ? ENTITY_TAGS : HOME_TAGS;
    await route.fulfill({ json: { ...real, tags: rows.map(([k, n]) => ({ k, n, cat: 'general' })) } });
  });
  return seen;
}

/** 抽屉里某一组的 chip：值与计数徽标的数字，按画出来的先后。 */
const chips = (page: Page, group: string) =>
  page.locator(`#drawer [data-sidebar-group="${group}"] [data-sidebar-chip]`).evaluateAll((nodes) =>
    nodes.map((node) => [node.getAttribute('data-val') ?? node.getAttribute('data-follow-drawer-tag'),
      node.querySelector('[data-sidebar-count]')?.textContent ?? null]));

const navKeys = (page: Page) =>
  page.locator('#drawer [data-sidebar-nav] [data-nav]').evaluateAll((nodes) => nodes.map((node) => node.getAttribute('data-nav')));

/** 点开一组（初始只有正在生效的组展开，收着的组 `inert`，点不到里面的 chip）。 */
async function openGroup(page: Page, group: string): Promise<void> {
  const toggle = page.locator(`#drawer [data-sidebar-group="${group}"] > [data-sidebar-toggle]`);
  if (await toggle.getAttribute('aria-expanded') !== 'true') await toggle.click();
  await page.locator(`#drawer [data-sidebar-group="${group}"] [data-sidebar-collapse]:not([inert])`).waitFor({ timeout: 5_000 });
}

describe('侧栏岛', () => {
  let browser: Browser;

  before(async () => {
    browser = await launch();
  });

  after(async () => {
    await browser.close();
  });

  it('拖动一项改导航顺序：当场重排、写进设置，刷新之后照新顺序', { timeout: 60_000 }, async () => {
    const opened = await openHome(browser);
    const { page, server } = opened;
    try {
      assert.deepEqual(await navKeys(page), ORDER, '侧栏没有按设置里的顺序画');
      const from = (await page.locator('#drawer [data-nav="tags"]').boundingBox())!;
      const to = (await page.locator('#drawer [data-nav="follow"]').boundingBox())!;
      await page.mouse.move(from.x + 40, from.y + from.height / 2);
      await page.mouse.down();
      await page.mouse.move(from.x + 44, from.y + from.height / 2 - 6, { steps: 4 });
      await page.mouse.move(to.x + 40, to.y + 6, { steps: 8 });
      await page.mouse.move(to.x + 42, to.y + 7, { steps: 2 });
      assert.equal(await page.locator('#drawer [data-nav="tags"]').getAttribute('data-dragging'), '', '被拖的那一项没有标出来');
      const line = await page.locator('#drawer [data-sidebar-drop-line]').boundingBox();
      assert.ok(line && line.width > 0, '插入线没有显示');
      assert.equal(await page.locator('#drawer [data-nav="follow"]').evaluate(node => node.style.getPropertyValue('--sidebar-nudge')), '10px');
      assert.equal(await page.locator('#drawer [data-nav="jav"]').evaluate(node => node.style.getPropertyValue('--sidebar-delay')), '24ms');
      await page.mouse.up();
      const moved = ['', 'tags', 'follow', 'jav', 'performers', 'studios', 'flagged', 'manage'];
      await page.waitForFunction((want) => JSON.stringify([...document.querySelectorAll('#drawer [data-sidebar-nav] [data-nav]')]
        .map((node) => node.getAttribute('data-nav'))) === want, JSON.stringify(moved), { timeout: 5_000 });
      const posts = server.posts.filter((post) => post.path === '/api/settings' && 'sidebarOrder' in post.body);
      assert.deepEqual(posts.at(-1)?.body.sidebarOrder, moved, '新顺序没有写进设置');
      assert.equal(await page.locator('#drawer [data-dragging], #drawer [data-sidebar-drop-line]').count(), 0, '松手后拖动标记没有清掉');

      await page.reload({ waitUntil: 'load' });
      await page.locator('#drawer [data-sidebar-nav] [data-nav]').first().waitFor({ timeout: 15_000 });
      await settle(page);
      assert.deepEqual(await navKeys(page), moved, '刷新之后侧栏回到了旧顺序');
      assert.deepEqual(opened.problems, []);
    } finally {
      await opened.close();
    }
  });

  it('Esc 和拖出导航区域取消排序，不保存也不触发导航', { timeout: 60_000 }, async () => {
    const opened = await openHome(browser);
    const { page, server } = opened;
    try {
      for (const escape of [true, false]) {
        const from = (await page.locator('#drawer [data-nav="tags"]').boundingBox())!;
        const to = (await page.locator('#drawer [data-nav="follow"]').boundingBox())!;
        await page.mouse.move(from.x + 40, from.y + from.height / 2);
        await page.mouse.down();
        await page.mouse.move(to.x + 40, to.y + 4, { steps: 8 });
        if (escape) await page.keyboard.press('Escape');
        else await page.mouse.move(600, to.y + 4, { steps: 4 });
        await page.mouse.up();
        assert.deepEqual(await navKeys(page), ORDER);
        assert.equal(new URL(page.url()).pathname, '/');
        assert.equal(await page.locator('#drawer [data-dragging],#drawer [data-sidebar-drop-line]').count(), 0);
      }
      assert.equal(server.posts.filter(post => post.path === '/api/settings' && 'sidebarOrder' in post.body).length, 0);
      assert.deepEqual(opened.problems, []);
    } finally { await opened.close() }
  });

  it('关注页往返复用已加载内容，不重新取列表或铺首屏骨架', { timeout: 60_000 }, async () => {
    const opened = await openFollowFeed(browser, '/follow', DESKTOP);
    const { page } = opened;
    let requests = 0;
    page.on('request', request => { if (new URL(request.url()).pathname === '/api/follow') requests++ });
    try {
      const items = () => page.locator('[data-follow-list] > [data-follow-item]').evaluateAll(nodes => nodes.map(node => node.getAttribute('data-follow-item')));
      const before = await items();
      await page.evaluate(() => {
        const tracking = { skeletons: 0 };
        Object.assign(window, { followReturnTracking: tracking });
        new MutationObserver(records => {
          for (const record of records) for (const node of record.addedNodes) {
            if (node instanceof Element && (node.matches('[data-skeleton-tier]') || node.querySelector('[data-skeleton-tier]'))) tracking.skeletons++;
          }
        }).observe(document.getElementById('stats')!, { childList: true, subtree: true });
      });
      for (let round = 0; round < 2; round++) {
        await page.locator('#drawer [data-nav=""]').click();
        await page.locator('#grid [data-media-body]').waitFor({ state: 'visible' });
        await page.locator('html[data-page-navigation-pending]').waitFor({ state: 'detached' });
        await page.locator('#drawer [data-nav="follow"]').click();
        await page.locator('[data-follow-list] > [data-follow-item]').first().waitFor({ state: 'visible' });
        await page.locator('html[data-page-navigation-pending]').waitFor({ state: 'detached' });
        assert.deepEqual(await items(), before);
      }
      assert.equal(requests, 0);
      assert.equal(await page.evaluate(() => (window as unknown as { followReturnTracking: { skeletons: number } }).followReturnTracking.skeletons), 0);
      assert.deepEqual(withoutPlayer(opened.problems), []);
    } finally { await opened.close() }
  });

  it('首页与实体页各按自己的口径列内容标签与计数；点一枚 chip 就按下并进地址', { timeout: 60_000 }, async () => {
    const opened = await visit(browser, '/', DESKTOP);
    const { page } = opened;
    try {
      const seen = await scopeFacets(page);
      await page.reload({ waitUntil: 'load' });
      await page.locator('#drawer [data-sidebar-group="内容标签"]').waitFor({ state: 'attached', timeout: 15_000 });
      await settle(page);
      assert.deepEqual(await chips(page, '内容标签'), HOME_TAGS.map(([k, n]) => [k, String(n)]), '首页的内容标签不是全库那一份');
      assert.ok((await chips(page, '来源')).some(([value, count]) => value === 'local' && Number(count) > 0), '来源那一组没有本机的计数');

      await openGroup(page, '内容标签');
      const chip = page.locator(`#drawer [data-sidebar-chip][data-key="tag"][data-val="${HOME_TAGS[0][0]}"]`);
      await chip.click();
      await page.waitForFunction((tag) => new URL(location.href).searchParams.get('tag') === tag, HOME_TAGS[0][0], { timeout: 5_000 });
      await page.locator(`#drawer [data-sidebar-chip][data-val="${HOME_TAGS[0][0]}"][aria-pressed="true"]`).waitFor({ timeout: 5_000 });
      assert.ok(seen.some((query) => new URLSearchParams(query).get('tag') === HOME_TAGS[0][0]), '按下 chip 之后聚合没有按这条筛选重取');

      await serveEntity(page);
      await page.goto(new URL(`/performers/${encodeURIComponent(PERFORMER)}`, page.url()).toString(), { waitUntil: 'load' });
      await page.locator('#drawer [data-sidebar-group="内容标签"]').waitFor({ state: 'attached', timeout: 15_000 });
      await settle(page);
      assert.ok(seen.some((query) => {
        const params = new URLSearchParams(query);
        return params.get('scope_kind') === 'performer' && params.get('scope_name') === PERFORMER;
      }), `实体页没有按实体口径取聚合：${seen.join(' | ')}`);
      assert.deepEqual(await chips(page, '内容标签'), ENTITY_TAGS.map(([k, n]) => [k, String(n)]), '实体页列的不是这个实体的计数');
      assert.deepEqual(opened.problems, []);
    } finally {
      await opened.close();
    }
  });

  it('关注页按这一版条目数标签，关注详情只列这一条的标签、每枚计 1', { timeout: 60_000 }, async () => {
    const opened = await openFollowFeed(browser, '/follow', DESKTOP);
    const { page } = opened;
    try {
      await page.locator('#drawer [data-sidebar-group="内容标签"] [data-follow-drawer-tag]').first().waitFor({ state: 'attached', timeout: 10_000 });
      const listed = await chips(page, '内容标签');
      const shown = await page.locator('[data-follow-list] > [data-follow-item]').count();
      assert.ok(listed.length > 1, '关注页的标签组是空的');
      assert.ok(listed.every(([, count]) => Number(count) >= 1), `关注页有标签没带计数：${JSON.stringify(listed)}`);
      assert.equal(listed.reduce((sum, [, count]) => sum + Number(count), 0), shown * 2,
        '每条更新两枚标签，计数之和应是条目数的两倍');

      await page.locator('[data-follow-item="1002"] [data-follow-open]').click();
      await page.locator('#stage[open] [data-follow-detail-side]').waitFor({ timeout: 10_000 });
      await page.waitForFunction(() => document.querySelectorAll('#drawer [data-follow-drawer-tag]').length === 2, undefined, { timeout: 5_000 });
      assert.deepEqual((await chips(page, '内容标签')).sort(), [['3d', '1'], ['outdoor', '1']], '关注详情列的不是这一条的标签');
      await page.locator('#closeStage').click();
      await page.waitForFunction((count) => document.querySelectorAll('#drawer [data-follow-drawer-tag]').length === count,
        listed.length, { timeout: 5_000 });
      assert.deepEqual(await chips(page, '内容标签'), listed, '关掉详情之后关注页的标签计数变了');

      /* 抽屉里的关注标签是单选：点一枚就只按这一枚筛，抽屉随之收起，让出来的是筛过的列表。 */
      await openGroup(page, '内容标签');
      const [tag] = listed[0]!;
      await page.locator(`#drawer [data-follow-drawer-tag="${tag}"]`).click();
      await page.waitForFunction((want) => new URL(location.href).searchParams.get('tag') === want
        && !document.querySelector('#drawer')?.classList.contains('open'), tag, { timeout: 5_000 });
      await page.locator('#filterBtn').click();
      await page.locator(`#drawer.open [data-follow-drawer-tag="${tag}"][aria-pressed="true"]`).waitFor({ timeout: 5_000 });
      const pressed = await page.locator('#drawer [data-follow-drawer-tag][aria-pressed="true"]').count();
      assert.equal(pressed, 1, '关注标签按下了不止一枚');
      assert.deepEqual(withoutPlayer(opened.problems), []);
    } finally {
      await opened.close();
    }
  });

  it('关注页侧栏有来源、时长、内容标签三组；来源与时长进地址、按它向服务端取数，抽屉不收；刷新照地址按下', { timeout: 60_000 }, async () => {
    const opened = await openFollowFeed(browser, '/follow', DESKTOP);
    const { page } = opened;
    const lists: URLSearchParams[] = [];
    page.on('request', (request) => {
      const url = new URL(request.url());
      if (url.pathname === '/api/follow' && !url.searchParams.has('item')) lists.push(url.searchParams);
    });
    const groups = () => page.locator('#drawer [data-sidebar-group]').evaluateAll((nodes) =>
      nodes.map((node) => node.getAttribute('data-sidebar-group')));
    try {
      await page.locator('#drawer [data-sidebar-group="来源"] [data-sidebar-chip]').first().waitFor({ state: 'attached', timeout: 10_000 });
      assert.deepEqual(await groups(), ['来源', '时长', '内容标签'], '关注页侧栏的分组不对');
      assert.deepEqual((await chips(page, '来源')).map(([value]) => value), ['kemono', 'rule34xxx', 'fanbox'],
        '来源组不是全库那几个站');

      await openGroup(page, '来源');
      await page.locator('#drawer [data-sidebar-chip][data-key="provider"][data-val="rule34xxx"]').click();
      await page.waitForFunction(() => new URL(location.href).searchParams.get('provider') === 'rule34xxx', undefined, { timeout: 5_000 });
      await page.locator('#drawer.open [data-sidebar-chip][data-val="rule34xxx"][aria-pressed="true"]').waitFor({ timeout: 5_000 });
      await page.waitForFunction(() => document.querySelectorAll('#drawer [data-sidebar-group="来源"] [data-sidebar-chip]').length === 3,
        undefined, { timeout: 5_000 });
      assert.ok(lists.some((params) => params.get('provider') === 'rule34xxx'), '按下来源之后没有按它向服务端取数');

      await openGroup(page, '时长');
      await page.locator('#durMin').focus();
      await page.keyboard.press('ArrowRight');
      await page.waitForFunction(() => new URL(location.href).searchParams.get('dur_min') === '300', undefined, { timeout: 5_000 });
      await page.waitForFunction(() => document.querySelector('#drawer')?.classList.contains('open'), undefined, { timeout: 5_000 });
      assert.ok(lists.some((params) => params.get('dur_min') === '300' && params.get('provider') === 'rule34xxx'),
        '拉时长之后没有带着两条筛选向服务端取数');
      assert.ok(!new URL(page.url()).searchParams.has('dur_max'), '右端没动却写进了上限');

      await page.reload({ waitUntil: 'load' });
      await page.locator('#drawer [data-sidebar-chip][data-val="rule34xxx"][aria-pressed="true"]').waitFor({ state: 'attached', timeout: 10_000 });
      assert.equal(await page.locator('#durMin').inputValue(), '5', '刷新之后时长左端没有照地址回到 5 分钟');
      assert.deepEqual(withoutPlayer(opened.problems), []);
    } finally {
      await opened.close();
    }
  });

  it('作品详情开着时侧栏只剩导航，关掉之后列表那几组原样回来', { timeout: 60_000 }, async () => {
    const opened = await openItemPage(browser, '/', DESKTOP, { ready: `#grid [data-media-card][data-id="${ITEM.plain}"]` });
    const { page } = opened;
    try {
      await page.locator('#drawer [data-sidebar-group]').first().waitFor({ state: 'attached', timeout: 10_000 });
      const groups = () => page.locator('#drawer [data-sidebar-group]').evaluateAll((nodes) => nodes.map((node) => node.getAttribute('data-sidebar-group')));
      const before = await groups();
      const sources = await chips(page, '来源');
      assert.ok(before.length > 1, `首页的分组不全：${before.join('、')}`);
      await page.locator(`#grid [data-media-card][data-id="${ITEM.plain}"] [data-media-title]`).first().click();
      await page.locator('#stage[open] [data-item-side]').waitFor({ timeout: 10_000 });
      assert.deepEqual(await groups(), [], '详情开着时侧栏还挂着列表的筛选分组');
      assert.ok((await navKeys(page)).includes(''), '详情开着时导航那一列不在了');
      await page.locator('#closeStage').click();
      await page.waitForFunction((want) => JSON.stringify([...document.querySelectorAll('#drawer [data-sidebar-group]')]
        .map((node) => node.getAttribute('data-sidebar-group'))) === want, JSON.stringify(before), { timeout: 10_000 });
      assert.deepEqual(await chips(page, '来源'), sources, '关掉详情之后来源那一组的计数变了');
      assert.deepEqual(withoutPlayer(opened.problems), []);
    } finally {
      await opened.close();
    }
  });

  it('已被浮窗或弹层用掉的 Esc 不再收起侧栏，没人处理的 Esc 照常收起', { timeout: 60_000 }, async () => {
    const opened = await visit(browser, '/', DESKTOP);
    const { page } = opened;
    try {
      await settle(page);
      const drawer = () => page.evaluate(() => document.body.classList.contains('drawer-open'));
      assert.equal(await drawer(), true, '桌面宽度默认展开侧栏');
      // 详情先于全局入口关完时，冒泡上来的就是这样一下已被 preventDefault 的 Esc。
      await page.evaluate(() => document.body.addEventListener('keydown', event => {
        if (event.key === 'Escape') event.preventDefault();
      }, { capture: true, once: true }));
      await page.keyboard.press('Escape');
      assert.equal(await drawer(), true, '已被用掉的 Esc 收起了侧栏');
      await page.keyboard.press('Escape');
      assert.equal(await drawer(), false, '没人处理的 Esc 没有收起侧栏');
      assert.deepEqual(withoutPlayer(opened.problems), []);
    } finally {
      await opened.close();
    }
  });

  it('切页时当前项玻璃保留节点，完整播放动画并停在选中项', { timeout: 60_000 }, async () => {
    const opened = await visit(browser, '/', DESKTOP);
    const { page } = opened;
    try {
      await expectBody(page, '首页', [page.locator('#drawer.open [data-sidebar-nav] [aria-pressed="true"]')]);
      await page.locator('#drawer [data-sidebar-group]').first().waitFor({ state: 'attached', timeout: 15_000 });
      await settle(page);
      await page.emulateMedia({ reducedMotion: 'no-preference' });
      for (const key of ['performers', 'tags', '']) {
        const run = await page.evaluate(async (target) => {
          const glide = document.querySelector<HTMLElement>('#drawer > [data-sidebar-glide]')!;
          (glide as unknown as { __mark: boolean }).__mark = true;
          const seen = new Set<Animation>();
          let cancelled = 0;
          const watch = () => glide.getAnimations().forEach((animation) => {
            if (seen.has(animation)) return;
            seen.add(animation);
            animation.addEventListener('cancel', () => { cancelled += 1 });
          });
          document.querySelector<HTMLElement>(`#drawer [data-sidebar-nav] [data-nav="${target}"]`)!.click();
          watch();
          const started = seen.size;
          await Promise.all([...seen].map((animation) => animation.finished));
          const now = document.querySelector('#drawer > [data-sidebar-glide]') as (HTMLElement & { __mark?: boolean }) | null;
          const pressed = document.querySelector<HTMLElement>('#drawer [data-sidebar-nav] [aria-pressed="true"]')!;
          return {
            same: !!now?.__mark, started, cancelled, to: now!.getBoundingClientRect().top,
            pressedKey: pressed.dataset.nav, pressedTop: pressed.getBoundingClientRect().top,
          };
        }, key);
        assert.equal(run.pressedKey, key, `点了 ${key || '首页'} 之后按下的不是它`);
        assert.ok(run.same, '切页之后那块玻璃换了节点，位移会从头起跑');
        assert.ok(run.started > 0, `切到 ${key || '首页'} 时玻璃没有起动画`);
        assert.equal(run.cancelled, 0, `切到 ${key || '首页'} 的途中玻璃的动画被掐断了`);
        assert.ok(Math.abs(run.to - run.pressedTop) <= 1, `玻璃停在 ${run.to}，当前项在 ${run.pressedTop}`);
      }
      assert.deepEqual(opened.problems, []);
    } finally {
      await opened.close();
    }
  });

  it('手机宽度下抽屉收着、点开盖在页面上，点遮罩或点导航都收回去；滚动层仍挂着覆盖式滚动条', { timeout: 60_000 }, async () => {
    const opened = await visit(browser, '/', PHONE);
    const { page } = opened;
    try {
      await page.locator('#drawer [data-sidebar-nav] [data-nav]').first().waitFor({ state: 'attached', timeout: 15_000 });
      await settle(page);
      const state = () => page.evaluate(() => {
        const drawer = document.querySelector<HTMLElement>('#drawer')!;
        return {
          open: drawer.classList.contains('open'), inert: drawer.inert,
          expanded: document.querySelector('#filterBtn')!.getAttribute('aria-expanded'),
          scrim: getComputedStyle(document.querySelector('#scrim')!).display,
          left: Math.round(drawer.getBoundingClientRect().left),
        };
      });
      const closed = await state();
      assert.equal(closed.open, false, '手机上一进来抽屉就开着');
      assert.equal(closed.inert, true, '收着的抽屉没有 inert，Tab 会走进屏幕外面');
      assert.equal(closed.scrim, 'none', '抽屉收着时遮罩还在渲染树里');
      assert.ok(closed.left < 0, '收着的抽屉没有移出屏幕');

      await page.locator('#filterBtn').tap();
      await page.waitForFunction(() => document.querySelector('#drawer')?.classList.contains('open'));
      const shown = await state();
      assert.deepEqual([shown.inert, shown.expanded, shown.scrim, shown.left], [false, 'true', 'block', 12], '点开之后抽屉没有盖进来');

      assert.equal(await page.evaluate(() => document.elementFromPoint(370, 420)?.id), 'scrim', '抽屉右边那一截点到的不是遮罩');
      await page.mouse.click(370, 420);
      await page.waitForFunction(() => !document.querySelector('#drawer')?.classList.contains('open'));
      assert.deepEqual((await state()).scrim, 'none', '点遮罩收起之后遮罩没退出渲染树');

      await page.locator('#filterBtn').tap();
      await page.waitForFunction(() => document.querySelector('#drawer')?.classList.contains('open'));
      await page.locator('#drawer [data-sidebar-nav] [data-nav="tags"]').tap();
      await page.waitForFunction(() => location.pathname === '/tags' && !document.querySelector('#drawer')?.classList.contains('open'),
        undefined, { timeout: 5_000 });

      const scroller = await page.evaluate(() => {
        const scroll = document.querySelector<HTMLElement>('#drawerScroll')!;
        const drawer = document.querySelector<HTMLElement>('#drawer')!;
        return {
          parent: scroll.parentElement?.id, overflow: getComputedStyle(scroll).overflowY,
          drawerOverflow: getComputedStyle(drawer).overflowY,
          nav: !!scroll.querySelector(':scope > [data-sidebar-nav]'),
          tracks: drawer.querySelectorAll(':scope > .ovtrack').length,
        };
      });
      assert.deepEqual(scroller, { parent: 'drawer', overflow: 'auto', drawerOverflow: 'hidden', nav: true, tracks: 2 },
        '滚的不是抽屉里那一层，或覆盖式滚动条没有接在它上面');
      assert.deepEqual(opened.problems, []);
    } finally {
      await opened.close();
    }
  });
});