frontend/e2e/catalog-filter.test.ts
Rama master · réplica de lectura del repositorio original.
/* 首页上方那一整块：两排头像、玻璃浮层的两排（视图与标签、读数与排序）和网格上面那条交集条
* （`catalog-filter` 岛，ADR-0031）。
*
* 作品、详情与图片沿用 `item-fixture.ts` 的桩；两排头像（`/api/tops`）、标签（`/api/facets` 的 `tags`）
* 与目录列表在这里另给一份，好数请求、好让「按了什么」和「重取了几次」对得上。验的是行为：
* 点下去发什么请求、按下态与地址怎么变、详情往返时这几排是不是原来那批节点。外观对照另有截图。 */
import assert from 'node:assert/strict';
import { after, before, describe, it } from 'node:test';
import type { Browser, Page } from 'playwright-core';
import { launch, layout, settle, VIEWPORTS, withPageDiagnostics } from './harness.ts';
import { CATALOG, ITEM, openItemPage, type ItemVisit } from './item-fixture.ts';
const DESKTOP = VIEWPORTS.find((viewport) => !viewport.mobile)!;
const PHONE = VIEWPORTS.find((viewport) => viewport.mobile)!;
const DETAIL_READY = '#stage[open] [data-item-side]';
const FILTER = '[data-catalog-filter]';
const READOUT = `${FILTER} [data-count-readout]`;
/** 第一页四十位女优、十个厂牌；女优那排还有一页二十位，再往后就到底了。 */
const PERFORMERS = Array.from({ length: 60 }, (_, at) => ({
id: 95_000 + at, k: `演示女优${String(at + 1).padStart(2, '0')}`, n: 60 - at,
has_image: true, has_avatar: false, avatar_focus: null, rep: null,
}));
const STUDIOS = Array.from({ length: 10 }, (_, at) => ({ k: `演示厂牌${at + 1}`, n: 20 - at, has_logo: false }));
const TAGS = Array.from({ length: 40 }, (_, at) => ({ k: `演示标签${String(at + 1).padStart(2, '0')}`, n: 90 - at }));
interface Counts {
/** 目录分页带 offset；竖屏、搜索推荐与库存在性探测各走各的。窄屏首批可以只有一张。 */
items: URL[];
summaries: URL[];
facets: URL[];
tops: URL[];
}
const pathIs = (page: Page, path: string) => page.waitForFunction(
(want) => decodeURIComponent(location.pathname) === want, path, { timeout: 10_000 });
const withoutPlayer = (problems: string[]) => problems.filter((line) => !line.includes('VIDEOJS'));
/** 等 Node 这一侧记下的请求数到位：桩在 Node 里计数，页面里的 `waitForFunction` 读不到。 */
async function until(done: () => boolean, message: string | (() => string), timeout = 10_000) {
const end = Date.now() + timeout;
while (!done()) {
if (Date.now() > end) assert.fail(typeof message === 'function' ? message() : message);
await new Promise((resolve) => setTimeout(resolve, 50));
}
}
/** 打开首页：桩装好之后重新载入，等到读数出现、等待态结束。 */
async function openHome(browser: Browser, path = '/', viewport = DESKTOP): Promise<ItemVisit & { counts: Counts }> {
const opened = await openItemPage(browser, '/', viewport, { ready: '#grid [data-media-card]' });
const { page } = opened;
const counts: Counts = { items: [], summaries: [], facets: [], tops: [] };
await page.route((url) => url.pathname === '/api/tops', (route) => {
const url = new URL(route.request().url());
counts.tops.push(url);
const page = Number(url.searchParams.get('page') || 0);
const performers = page === 0 ? PERFORMERS.slice(0, 40) : page === 1 ? PERFORMERS.slice(40) : [];
return route.fulfill({ json: { performers, studios: page ? [] : STUDIOS } });
});
await page.route((url) => url.pathname === '/api/facets', async (route) => {
counts.facets.push(new URL(route.request().url()));
const response = await route.fetch();
await route.fulfill({ json: { ...await response.json(), tags: TAGS } });
});
/* 加一条标签筛选，列表就只剩一半：读数跟着换，才看得出这一趟真按新口径取了。 */
await page.route((url) => url.pathname === '/api/items', (route) => {
const url = new URL(route.request().url());
if (url.searchParams.get('summary_only') === '1') counts.summaries.push(url);
else if (!url.searchParams.has('orient') && url.searchParams.has('offset')) counts.items.push(url);
const ids = url.searchParams.get('tag') || url.searchParams.get('owner') === 'none' ? CATALOG.slice(0, 3) : CATALOG;
return route.fulfill({ json: {
items: ids.map((id) => ({ id, name: `sample_${id}.mp4`, title: `演示作品 ${id}`, is_jav: false, medium: 'video',
location: 'local', has_thumb: true, duration: 3600, studio: 'Peach Studio', performers: [], tags: [] })),
total: ids.length, has_more: false,
} });
});
await page.goto(new URL(path, page.url()).toString(), { waitUntil: 'load' });
await page.locator(READOUT, { hasText: '个符合' }).waitFor({ timeout: 15_000 });
await page.locator(`${FILTER} [data-tier-performer]`).first().waitFor({ timeout: 15_000 });
await settle(page);
return { ...opened, counts };
}
const tag = (page: Page, key: string) => page.locator(`${FILTER} [data-catalog-tag="${key}"]`);
const chips = (page: Page) => page.locator('#combo [data-combo-chip]');
describe('首页筛选条', () => {
let browser: Browser;
before(async () => { browser = await launch(); });
after(async () => { await browser?.close(); });
it('JAV 读数尚未返回时保持两行骨架，内容就绪后再决定合行', { timeout: 60_000 }, async () => {
const opened = await openHome(browser, '/?jav=1');
const { page } = opened;
let release!: () => void;
const waiting = new Promise<void>(resolve => { release = resolve });
try {
await page.route((url) => url.pathname === '/api/facets', async route => {
const response = await route.fetch();
await route.fulfill({ json: { ...await response.json(), tags: TAGS.slice(0, 1) } });
});
await page.route((url) => url.pathname === '/api/items', async route => { await waiting; await route.fallback() });
await page.setViewportSize({ width: 1920, height: 900 });
await page.reload();
const frame = page.locator(`${FILTER} [data-catalog-frame]`);
await frame.locator('[data-catalog-tag]').first().waitFor();
assert.equal(await frame.getAttribute('data-single-row'), null);
assert.equal(await frame.evaluate(node => node.getBoundingClientRect().height), 96);
release();
await page.locator(READOUT, { hasText: '个符合' }).waitFor();
await page.locator(`${FILTER} [data-catalog-frame][data-single-row]`).waitFor();
assert.deepEqual(opened.problems, []);
} finally { release(); await opened.close() }
});
it('少量筛选项与右侧操作按容器宽度同行或分行', { timeout: 60_000 }, async () => {
const opened = await openHome(browser);
const { page } = opened;
try {
await page.route((url) => url.pathname === '/api/facets', async route => {
const response = await route.fetch();
await route.fulfill({ json: { ...await response.json(), tags: TAGS.slice(0, 1) } });
});
await page.setViewportSize({ width: 1920, height: 900 });
await page.reload(); await settle(page);
const frame = page.locator(`${FILTER} [data-catalog-frame]`);
await frame.locator('[data-catalog-tag]').first().waitFor();
await page.locator(`${FILTER} [data-catalog-frame][data-single-row]`).waitFor();
const wide = await frame.evaluate(element => {
const top = element.querySelector('[data-filter-row="top"]')!.getBoundingClientRect();
const bottom = element.querySelector('[data-filter-row="bottom"]')!.getBoundingClientRect();
return { same: Math.abs(top.y - bottom.y) < 2, after: bottom.x >= top.right - 2 };
});
assert.deepEqual(wide, { same: true, after: true });
await page.setViewportSize({ width: 390, height: 844 });
await page.locator(`${FILTER} [data-catalog-frame]:not([data-single-row])`).waitFor();
assert.ok((await layout(page)).scrollWidth <= 390);
} finally { await opened.close(); }
});
for (const viewport of [DESKTOP, PHONE]) {
it(`${viewport.name} 筛选条件与作品卡片悬停面保持间距`, { timeout: 60_000 }, async () => {
const opened = await openHome(browser, '/?studio=Peach%20Studio', viewport);
try {
await opened.page.mouse.move(0, 0);
const controls = await opened.page.locator(`${FILTER} [data-filter-glass]`).evaluate(frame => {
const candidates = [...frame.querySelectorAll('button,a[aria-pressed],[data-glass-segment]')]
.filter(node => node.getBoundingClientRect().width > 0 && node.getBoundingClientRect().height > 0);
const actions = ['[data-shortcuts-trigger]', '[data-entity-batch]'].map(selector => {
const node = frame.querySelector(selector)!;
const style = getComputedStyle(node), rect = node.getBoundingClientRect();
return { width: rect.width, height: rect.height, background: style.backgroundImage,
color: style.color, border: style.border, shadow: style.boxShadow, radius: style.borderRadius };
});
return { heights: candidates.map(node => ({ label: node.getAttribute('aria-label') || node.textContent,
height: node.getBoundingClientRect().height })), actions,
compact: parseFloat(getComputedStyle(frame).getPropertyValue('--control-h-compact')) };
});
// 筛选条整条取紧凑档：页签、药丸、分段与两枚动作键同高。
assert.equal(controls.compact, 32);
for (const control of controls.heights) assert.equal(control.height, controls.compact, JSON.stringify(control));
assert.deepEqual(controls.actions[0], controls.actions[1]);
assert.equal(controls.actions[0].width, controls.compact);
assert.equal(controls.actions[0].color, 'rgb(255, 255, 255)');
assert.match(controls.actions[0].background, /^linear-gradient\(/);
const gap = await opened.page.evaluate(() => document.querySelector('#grid [data-media-card]')!.getBoundingClientRect().top
- document.querySelector('#combo [data-entity-combo]')!.getBoundingClientRect().bottom - 8);
assert.ok(gap >= 16, `筛选条件距卡片悬停面只有 ${gap}px`);
assert.deepEqual(withoutPlayer(opened.problems), []);
} finally { await opened.close(); }
});
}
it('点头像条一格打开那一位的资料页；地址里的厂牌筛选出一颗交集条，撤掉它重取一次列表', { timeout: 60_000 }, async () => {
const opened = await openHome(browser, '/?studio=Peach%20Studio');
try {
const { page, counts } = opened;
await chips(page).filter({ hasText: '厂牌 Peach Studio' }).waitFor();
const before = counts.items.length;
await chips(page).filter({ hasText: 'Peach Studio' }).getByRole('button', { name: '撤掉 厂牌 Peach Studio' }).click();
await page.waitForFunction(() => !new URLSearchParams(location.search).has('studio'));
await page.locator(READOUT, { hasText: `${CATALOG.length} 个符合` }).waitFor();
assert.equal(await chips(page).count(), 0, '撤掉之后交集条上还有东西');
const after = counts.items.slice(before);
assert.ok(after.length >= 1 && after.every((url) => !url.searchParams.has('studio')), '撤掉之后没有按新口径重取');
await page.locator(`${FILTER} [data-tier-performer]`).first().click();
await pathIs(page, `/performers/${PERFORMERS[0]!.id}`);
} finally {
await opened.close();
}
});
it('标签条点选：按下态当场变，出一颗交集条，读数和侧栏计数按新口径各取一次；交集条上撤掉它回到原样', { timeout: 60_000 }, async () => {
const opened = await openHome(browser);
try {
const { page, counts } = opened;
/* 首屏那批标签按种子从四十枚里抽，点屏幕上的第一枚，不点清单里的第一枚。 */
const key = (await page.locator(`${FILTER} [data-catalog-tag]`).first().getAttribute('data-catalog-tag'))!;
await page.evaluate((filter) => {
const first = document.querySelector(`${filter} [data-tier-performer]`) as HTMLElement & { __kept?: boolean };
first.__kept = true;
}, FILTER);
const [items, facets, summaries] = [counts.items.length, counts.facets.length, counts.summaries.length];
const order = () => page.locator(`${FILTER} [data-catalog-tag]`).evaluateAll((pills) =>
pills.map((pill) => pill.getAttribute('data-catalog-tag')));
const members = await order();
/* 计数是标签的附注：隔开一段、字号降一档、字色退一档，不和标签名读成一个词。 */
const footnote = await tag(page, key).evaluate((pill) => {
const badge = pill.querySelector('[data-count-badge]')!;
const [p, b] = [getComputedStyle(pill), getComputedStyle(badge)];
return { gap: parseFloat(b.marginLeft), smaller: parseFloat(b.fontSize) < parseFloat(p.fontSize),
dimmer: b.color !== p.color, spaced: !/\s$/.test(badge.previousSibling?.textContent ?? '') };
});
assert.ok(footnote.gap >= 4, `计数离标签只有 ${footnote.gap}px`);
assert.deepEqual([footnote.smaller, footnote.dimmer, footnote.spaced], [true, true, true],
'计数和标签同字号、同色，或者靠空格文本节点隔开');
await tag(page, key).click();
await page.locator(`${FILTER} [data-catalog-tag="${key}"][aria-pressed="true"]`).waitFor({ timeout: 2_000 });
await chips(page).filter({ hasText: key }).waitFor();
await page.locator(READOUT, { hasText: '3 个符合' }).waitFor();
assert.equal(new URL(page.url()).searchParams.get('tag'), key);
assert.deepEqual(counts.items.slice(items).map((url) => url.searchParams.get('tag')), [key],
'点一枚标签应当只按新口径取一次列表');
assert.deepEqual(counts.summaries.slice(summaries).map((url) => url.searchParams.get('tag')), [key],
'独立读数应当按新口径取一次统计');
assert.deepEqual(counts.facets.slice(facets).map((url) => url.searchParams.get('tag')), [key],
'侧栏计数应当按新口径取一次聚合');
/* 口径变了两排头像会按新口径再取一次（`getBarsData`），但同一位的那一格原地换数，不拆了重建。 */
assert.equal(await page.evaluate((filter) => !!(document.querySelector(`${filter} [data-tier-performer]`) as
(HTMLElement & { __kept?: boolean }) | null)?.__kept, FILTER), true, '加一条筛选把头像条拆了重建');
/* 标签条的成员与次序不动：刚点的那枚还在原位，没被挪到最前面去。 */
assert.deepEqual(await order(), members, '加一条筛选把标签条重排了');
await chips(page).filter({ hasText: key }).getByRole('button').click();
await page.locator(READOUT, { hasText: `${CATALOG.length} 个符合` }).waitFor();
await page.locator(`${FILTER} [data-catalog-tag="${key}"][aria-pressed="false"]`).waitFor({ timeout: 2_000 });
assert.equal(await chips(page).count(), 0);
assert.deepEqual(withoutPlayer(opened.problems), []);
} finally {
await opened.close();
}
});
it('头像条横滚到右端先把手上这页摆完，再要下一页，要到空页就停', { timeout: 60_000 }, async () => {
const opened = await openHome(browser);
try {
const { page, counts } = opened;
const row = page.locator(`${FILTER} [data-catalog-tier="performers"]`);
const shown = () => row.locator('[data-tier-performer]').count();
assert.equal(await shown(), 24, '首屏应当只摆 24 枚');
for (let at = 0; at < 20 && await shown() < PERFORMERS.length; at += 1) {
await row.evaluate((element) => { element.scrollLeft = element.scrollWidth; });
await page.waitForTimeout(120);
}
assert.equal(await shown(), PERFORMERS.length, '续页没有把第二页摆出来');
for (let at = 0; at < 5; at += 1) {
await row.evaluate((element) => { element.scrollLeft = element.scrollWidth; });
await page.waitForTimeout(120);
}
/* 请求不带是哪一排：厂牌那排第一页就摆得下，挂上时已在右端，要一次第 1 页（空的）就停。女优那排
翻到第 1 页时参数串相同，共用那一次回包，接着自己要第 2 页。 */
assert.deepEqual(counts.tops.map((url) => url.searchParams.get('page') ?? '').sort(), ['', '1', '2'],
'续页的页号不对，或到底之后还在要');
assert.deepEqual(withoutPlayer(opened.problems), []);
} finally {
await opened.close();
}
});
it('排序键：按下态当场到位，网格只重取一次；再点一次同一枚翻方向', { timeout: 60_000 }, async () => {
const opened = await openHome(browser);
try {
const { page, counts } = opened;
const key = page.locator(`${FILTER} [data-entity-sort="new"]`);
const before = counts.items.length;
await key.click();
await page.locator(`${FILTER} [data-entity-sort="new"][aria-pressed="true"]`).waitFor({ timeout: 2_000 });
await until(() => counts.items.length > before, '换排序之后没有重取列表');
await settle(page);
assert.deepEqual(counts.items.slice(before).map((url) => url.searchParams.get('sort')), ['new'],
'换一次排序应当只重取一次列表');
/* 只数第一页：厂牌那排挂上时在右端，续要的那次空页与排序无关。 */
assert.equal(counts.tops.filter((url) => !url.searchParams.has('page')).length, 1, '换排序不该重取两排头像');
await key.click();
await until(() => counts.items.length > before + 1, '翻方向之后没有重取列表');
await settle(page);
assert.deepEqual(counts.items.slice(before).map((url) => url.searchParams.get('dir') || ''), ['desc', 'asc']);
assert.deepEqual(withoutPlayer(opened.problems), []);
} finally {
await opened.close();
}
});
it('卡片版式：只重画不重取，选择记进设置', { timeout: 60_000 }, async () => {
const opened = await openHome(browser);
try {
const { page, counts } = opened;
const choice = (value: string) => page.locator(`${FILTER} input[name="home-layout"][value="${value}"]`);
const before = counts.items.length;
assert.equal(await choice('small').isChecked(), true);
await page.locator(`${FILTER} label:has(input[name="home-layout"][value="big"])`).click();
assert.equal(await choice('big').isChecked(), true);
const saved = await page.evaluate(() => JSON.parse(localStorage.getItem('peach.settings.v1') || '{}'));
assert.equal(saved.homeLayout, 'big');
assert.equal(counts.items.length, before, '换版式不该重取列表');
assert.deepEqual(withoutPlayer(opened.problems), []);
} finally {
await opened.close();
}
});
for (const viewport of [DESKTOP, PHONE]) {
it(`${viewport.name} JAV 馆藏保留目录版式、筛选和顶部搜索，三个分区可往返`, { timeout: 60_000 }, async () => {
const opened = await openHome(browser, '/', viewport);
try {
const { page, counts } = opened;
const before = counts.items.length;
const homeIds = await page.locator('#grid [data-media-card]').evaluateAll(nodes => nodes.map(node => node.getAttribute('data-id')));
if (viewport.mobile) await page.locator('#filterBtn').click();
await page.locator('button[data-nav="jav"]:visible').first().click();
await page.waitForFunction(() => location.pathname === '/' && new URLSearchParams(location.search).get('jav') === '1');
await page.getByRole('tab', { name: '馆藏', exact: true, selected: true }).waitFor();
await page.locator('#grid [data-media-card]').first().waitFor();
await settle(page);
assert.ok(counts.items.slice(before).some((url) => url.searchParams.get('jav') === '1'), 'JAV 口径没有重取列表');
assert.equal(await page.evaluate(() => document.querySelector('#javLibraryHeader')!.getBoundingClientRect().bottom <= document.querySelector('#catalogFilter [data-catalog-tier="performers"]')!.getBoundingClientRect().top), true, 'JAV 标题和分区应在可见筛选行之前');
assert.equal(await page.locator('#catalogPageHeading').isVisible(), false);
assert.equal(await page.locator(`${FILTER} input[name="home-layout"]`).first().isVisible(), false);
await page.locator(`${FILTER} input[name="jav-layout"]`).first().waitFor({ state: 'attached' });
assert.ok(await page.locator(`${FILTER} [data-tier-performer]`).count() > 0, 'JAV 没有女优筛选');
assert.ok(await page.locator(`${FILTER} [data-tier-studio]`).count() > 0, 'JAV 没有厂牌筛选');
assert.ok(await page.locator(`${FILTER} [data-catalog-tag]`).count() > 0, 'JAV 没有标签筛选');
assert.equal(await page.getByRole('textbox', { name: '搜索作品', exact: true }).count(), 0);
const width = await page.evaluate(() => ({
grid: document.querySelector('#grid')!.getBoundingClientRect().width,
main: document.querySelector('#main')!.clientWidth,
}));
assert.ok(width.grid >= width.main - 40, 'JAV 网格没有铺满目录宽度');
await page.locator(`${FILTER} label:has(input[name="jav-layout"][value="big"])`).click();
assert.equal(await page.locator(`${FILTER} input[name="jav-layout"][value="big"]`).isChecked(), true);
const beforeSearch = counts.items.length;
if (viewport.mobile) await page.locator('#searchBtn').click();
await page.locator('#q').fill('演示作品');
await page.locator('#q').press('Enter');
await withPageDiagnostics(page, '作品搜索没有按搜索词重取 JAV 馆藏', () => until(
() => counts.items.slice(beforeSearch).some(url => url.searchParams.get('q') === '演示作品'),
() => JSON.stringify({ url: page.url(), list: counts.items.slice(beforeSearch).map(url => url.search),
summaries: counts.summaries.map(url => url.search) })));
assert.equal(counts.items.at(-1)?.searchParams.get('jav'), '1');
assert.equal(counts.items.at(-1)?.searchParams.get('q'), '演示作品');
assert.equal(new URL(page.url()).searchParams.get('jav'), '1');
assert.equal(new URL(page.url()).searchParams.get('q'), '演示作品');
if (viewport.mobile) await page.locator('#searchBack').click();
await page.getByRole('tab', { name: '发现', exact: true }).click();
await page.getByRole('tab', { name: '发现', exact: true, selected: true }).waitFor();
assert.equal(await page.locator('#javLibraryHeader').isVisible(), false);
await page.getByRole('tab', { name: '想要', exact: true }).click();
await page.getByRole('tab', { name: '想要', exact: true, selected: true }).waitFor();
await page.getByRole('tab', { name: '馆藏', exact: true }).click();
await page.getByRole('tab', { name: '馆藏', exact: true, selected: true }).waitFor();
await page.locator('#grid [data-media-card]').first().waitFor();
assert.equal(await page.locator(`${FILTER} input[name="jav-layout"][value="big"]`).isChecked(), true);
const box = await layout(page);
assert.ok(box.scrollWidth <= box.viewportWidth, 'JAV 页面横向溢出');
await settle(page);
const beforeHome = counts.items.length;
if (viewport.mobile) await page.locator('#filterBtn').click();
await page.locator('button[data-nav=""]:visible').first().click();
await page.waitForFunction(() => location.pathname === '/' && !new URLSearchParams(location.search).has('jav'));
await page.locator(`${FILTER} input[name="home-layout"]`).first().waitFor({ state: 'attached' });
await page.locator(READOUT, { hasText: '个符合' }).waitFor();
await settle(page);
assert.equal(counts.items.length, beforeHome, '返回首页沿用原来的目录缓存');
assert.deepEqual(await page.locator('#grid [data-media-card]').evaluateAll(nodes => nodes.map(node => node.getAttribute('data-id'))), homeIds);
assert.equal(await page.locator('#javLibraryHeader').isVisible(), false);
assert.deepEqual(withoutPlayer(opened.problems), []);
} finally {
await opened.close();
}
});
}
it('未归属随首页位置保留，撤掉筛选后取全库，后退恢复未归属缓存', { timeout: 60_000 }, async () => {
const opened = await openHome(browser, '/?owner=none');
try {
const { page, counts } = opened;
assert.equal(counts.items.at(-1)?.searchParams.get('owner'), 'none', '地址上的未归属没有进列表请求');
let before = counts.items.length;
const mainCards = page.locator('#grid [data-media-grid] > [data-media-card]');
const filteredIds = await mainCards.evaluateAll(nodes => nodes.map(node => node.getAttribute('data-id')));
await page.locator('[data-nav=""]:visible').first().click();
await settle(page);
assert.equal(new URL(page.url()).searchParams.get('owner'), 'none');
assert.equal(counts.items.length, before, '点击当前栏目保留筛选');
await chips(page).filter({ hasText: '未归属' }).getByRole('button').click();
await page.waitForFunction(() => !new URLSearchParams(location.search).has('owner'));
await until(() => counts.items.length > before, '撤掉未归属之后没有重取列表');
await settle(page);
assert.equal(counts.items.at(-1)?.searchParams.has('owner'), false);
assert.equal(await mainCards.count(), CATALOG.length);
before = counts.items.length;
await page.goBack();
await page.waitForFunction(() => new URLSearchParams(location.search).get('owner') === 'none');
await settle(page);
assert.equal(counts.items.length, before, '后退恢复已取得的未归属结果');
assert.equal(await chips(page).filter({ hasText: '未归属' }).count(), 1);
assert.deepEqual(await mainCards.evaluateAll(nodes => nodes.map(node => node.getAttribute('data-id'))), filteredIds);
assert.deepEqual(withoutPlayer(opened.problems), []);
} finally {
await opened.close();
}
});
it('进详情再关回来：头像条还是原来那批节点，图还是解码过的那一张，也没有多发聚合请求', { timeout: 60_000 }, async () => {
const opened = await openHome(browser);
try {
const { page, counts } = opened;
await page.waitForFunction((filter) => {
const img = document.querySelector(`${filter} [data-tier-ring] > img`) as HTMLImageElement | null;
return !!img && img.complete && img.naturalWidth > 0;
}, FILTER, { timeout: 10_000 });
await page.evaluate((filter) => {
const first = document.querySelector(`${filter} [data-tier-performer]`) as HTMLElement & { __kept?: boolean };
first.__kept = true;
(first.querySelector('[data-tier-ring] > img') as HTMLImageElement & { __kept?: boolean }).__kept = true;
}, FILTER);
const [facets, tops] = [counts.facets.length, counts.tops.length];
await page.locator(`#grid [data-media-card][data-id="${ITEM.plain}"] [data-media-title]`).first().click();
await pathIs(page, `/assets/${ITEM.plain}`);
await page.locator(DETAIL_READY).waitFor();
await page.locator('#closeStage').click();
await pathIs(page, '/');
await page.locator('#stage[open]').waitFor({ state: 'detached', timeout: 10_000 }).catch(() => {});
await settle(page);
const kept = await page.evaluate((filter) => {
const first = document.querySelector(`${filter} [data-tier-performer]`) as (HTMLElement & { __kept?: boolean }) | null;
const img = first?.querySelector('[data-tier-ring] > img') as (HTMLImageElement & { __kept?: boolean }) | null;
return { same: !!first?.__kept, img: !!img?.__kept && img.complete && img.naturalWidth > 0 };
}, FILTER);
assert.deepEqual(kept, { same: true, img: true }, '关掉详情时头像条被重建了');
assert.equal(counts.facets.length, facets, '详情往返多取了一遍聚合');
assert.equal(counts.tops.length, tops, '详情往返多取了一遍头像');
assert.deepEqual(withoutPlayer(opened.problems), []);
} finally {
await opened.close();
}
});
it('去索引页再回首页：收起时不留一套同名的浮层，回来之后玻璃垫在当前视图下面', { timeout: 60_000 }, async () => {
const opened = await openHome(browser);
try {
const { page } = opened;
await page.locator('[data-nav="tags"]:visible').first().click();
await pathIs(page, '/tags');
await settle(page);
assert.equal(await page.locator(`${FILTER} [data-catalog-frame]`).count(), 0, '收起的首页浮层还留在页面上');
assert.equal(await page.locator(`${FILTER} [data-skeleton], ${FILTER} [aria-busy="true"]`).count(), 0);
await page.locator('[data-nav=""]:visible').first().click();
await pathIs(page, '/');
await page.locator(READOUT, { hasText: '个符合' }).waitFor();
await settle(page);
const back = await page.evaluate((filter) => {
const rect = (node: Element | null) => {
if (!node || (node as HTMLElement).hidden) return null;
const { left, width } = node.getBoundingClientRect();
return { left: Math.round(left), width: Math.round(width) };
};
return {
glide: rect(document.querySelector(`${filter} [data-view-glide]`)),
key: rect(document.querySelector(`${filter} [data-catalog-view][aria-pressed="true"]`)),
};
}, FILTER);
assert.ok(back.glide && back.key && Math.abs(back.glide.left - back.key.left) <= 1
&& Math.abs(back.glide.width - back.key.width) <= 1, `玻璃没有垫在当前视图下面 ${JSON.stringify(back)}`);
assert.deepEqual(withoutPlayer(opened.problems), []);
} finally {
await opened.close();
}
});
it('手机 390 宽：视图和标签整段一起横滚，页面本身不被撑宽', { timeout: 60_000 }, async () => {
const opened = await openHome(browser, '/', PHONE);
try {
const { page } = opened;
const scroller = page.locator(`${FILTER} [data-catalog-scroll]`);
const before = await scroller.evaluate((element) => ({
overflow: getComputedStyle(element).overflowX, room: element.scrollWidth - element.clientWidth,
view: element.querySelector('[data-catalog-view]')!.getBoundingClientRect().left,
}));
assert.equal(before.overflow, 'auto', '窄屏下滚的应当是视图与标签外面那一层');
assert.ok(before.room > 100, `视图与标签在 390 宽下应当放不下：多出 ${before.room}px`);
await scroller.evaluate((element) => { element.scrollLeft = 200; });
const moved = await scroller.evaluate((element) => ({
left: element.scrollLeft, view: element.querySelector('[data-catalog-view]')!.getBoundingClientRect().left,
}));
assert.ok(moved.left > 0, '外层滚不动');
assert.ok(moved.view < before.view - 100, '四枚视图没有跟着标签一起滚走');
const controls = page.locator(`${FILTER} [data-filter-row="bottom"]`);
const bottom = await controls.evaluate(element => {
const summary = element.querySelector('[data-catalog-summary]')!.getBoundingClientRect();
const sorts = element.querySelector('[data-entity-sorts]')!.getBoundingClientRect();
return { height: element.getBoundingClientRect().height, summary: summary.y + summary.height / 2,
sorts: sorts.y + sorts.height / 2, room: element.scrollWidth - element.clientWidth,
overflow: getComputedStyle(element).overflowX };
});
assert.ok(Math.abs(bottom.summary - bottom.sorts) < 2, JSON.stringify(bottom));
assert.ok(bottom.height <= 56 && bottom.room > 100 && bottom.overflow === 'auto', JSON.stringify(bottom));
await controls.evaluate(element => { element.scrollLeft = 300 });
assert.ok(await controls.evaluate(element => element.scrollLeft > 100));
for (const width of [430, 390, 760, 761, 390]) {
await page.setViewportSize({ width, height: 844 });
const glass = await page.locator(`${FILTER} [data-filter-glass]`).evaluate(async element => {
await new Promise(resolve => requestAnimationFrame(() => requestAnimationFrame(resolve)));
const style = getComputedStyle(element);
return { filter: style.backdropFilter, width: element.getBoundingClientRect().width,
viewport: document.documentElement.clientWidth };
});
assert.ok(glass.filter.includes('blur(') && glass.width < glass.viewport, JSON.stringify(glass));
}
const measured = await layout(page);
assert.deepEqual(measured.offenders, [], `筛选条把页面撑宽了：${measured.offenders.join('、')}`);
assert.deepEqual(withoutPlayer(opened.problems), []);
} finally {
await opened.close();
}
});
it('上次两排都没人：再进首页时取回之前不铺两排占位，浮层不随取回移位', { timeout: 60_000 }, async () => {
const opened = await openHome(browser);
try {
const { page } = opened;
let delay = 0;
// 后注册的先拦：这一组两排都没人，第二次进页拖住三秒，量的就是取回之前那一刻。
await page.route((url) => url.pathname === '/api/tops', async (route) => {
await new Promise((resolve) => setTimeout(resolve, delay));
await route.fulfill({ json: { performers: [], studios: [] } });
});
await page.reload();
await page.locator(`${FILTER} [data-catalog-root]:not([data-loading])`).waitFor();
await settle(page);
delay = 3_000;
await page.reload({ waitUntil: 'domcontentloaded' });
const frame = page.locator(`${FILTER} [data-catalog-frame]`);
await frame.waitFor();
const read = () => page.evaluate((filter) => ({
rows: document.querySelectorAll(`${filter} [data-catalog-tier]`).length,
loading: !!document.querySelector(`${filter} [data-catalog-root][data-loading]`),
top: Math.round(document.querySelector(`${filter} [data-catalog-frame]`)!.getBoundingClientRect().top),
}), FILTER);
const waiting = await read();
assert.deepEqual({ rows: waiting.rows, loading: waiting.loading }, { rows: 0, loading: true }, JSON.stringify(waiting));
await page.locator(`${FILTER} [data-catalog-root]:not([data-loading])`).waitFor({ timeout: 10_000 });
await settle(page);
const done = await read();
assert.equal(done.rows, 0);
assert.ok(Math.abs(done.top - waiting.top) <= 1, `取回后浮层移位：${waiting.top} → ${done.top}`);
assert.deepEqual(withoutPlayer(opened.problems), []);
} finally {
await opened.close();
}
});
});