frontend/e2e/item-detail.test.ts
Rama master · réplica de lectura del repositorio original.
/* 作品详情岛（`item-detail`）在真浏览器里的行为：从目录卡进出、深链、后退回到详情与刷新后关掉回哪一页、
* 播放列表换条后关掉回列表页、舞台在媒体框里挂 Video.js、
* 脱盘说明、共演收起、标题折叠、评分与标签的撤销、反馈键态、四种队列、播放列表排序与移出、保存 Mix、接着看、
* 实体页入口与手机布局。
*
* 桩数据见 `item-fixture.ts`；读写接口全部由桩接住，演示库数据库一次都不写。 */
import assert from 'node:assert/strict';
import { after, before, describe, it } from 'node:test';
import type { Browser, Page } from 'playwright-core';
import { layout, launch, VIEWPORTS } from './harness.ts';
import { CATALOG, EDITIONS, ITEM, NAMES, PARTS, PLAYLIST, RELATED, card as itemCard, openItemPage } from './item-fixture.ts';
const DESKTOP = VIEWPORTS.find((viewport) => !viewport.mobile)!;
const MOBILE = VIEWPORTS.find((viewport) => viewport.mobile)!;
const DETAIL_READY = '#stage[open] [data-item-side]';
/** 主网格卡点标题打开分卷；竖屏带中的同条目卡点标题进入沉浸。 */
const PART_CARD = `#grid [data-media-card][data-variant="grid"][data-id="${ITEM.part}"] [data-media-text] > button[data-media-title][data-open]`;
/** 桩里的片源没有正片，播放器拿到空响应会报一条 VIDEOJS 错误；量的不是它。 */
const withoutPlayer = (problems: string[]) => problems.filter((line) => !line.includes('VIDEOJS'));
const pathIs = (page: Page, path: string) => page.waitForFunction(
(wanted) => (wanted.includes('?') ? location.pathname + location.search : location.pathname) === wanted, path, { timeout: 10_000 });
/** 回执栈在 body 下，舞台是模态 dialog，外面整页惰性，鼠标点不到撤销键；这里量的是撤销本身。 */
const undo = (page: Page) => page.locator('#toasts').getByRole('button', { name: '撤销' }).last().dispatchEvent('click');
const current = (page: Page) => page.locator('#stage [data-queue-item][aria-current="true"]').getAttribute('data-queue-item');
const ids = (page: Page, selector: string, attribute: string) => page.locator(selector).evaluateAll(
(nodes, name) => nodes.map((node) => Number(node.getAttribute(name))), attribute);
/** 换条前记下舞台节点并盯住骨架：原地换条时浮窗还是同一个节点，中途不回骨架，焦点留在浮窗里。 */
const watchStage = (page: Page) => page.evaluate(() => {
const watch = { stage: document.getElementById('stage'), skeleton: false, heights: [] as number[] };
const sample = () => {
const media = document.querySelector('#stage [data-stage-media]');
if (media) watch.heights.push(media.getBoundingClientRect().height);
if (watch.heights.length < 120) requestAnimationFrame(sample);
}; sample();
new MutationObserver(() => { if (document.querySelector('#stage [data-skeleton="detail"]')) watch.skeleton = true })
.observe(document.body, { childList: true, subtree: true });
Object.assign(window, { stageWatch: watch });
});
const stageKept = (page: Page) => page.evaluate(() => {
const watch = (window as unknown as { stageWatch: { stage: Element | null; skeleton: boolean; heights: number[] } }).stageWatch;
if (Math.max(...watch.heights) - Math.min(...watch.heights) > 1)
throw new Error(`作品切换画框高度不稳定：${JSON.stringify(watch.heights)}`);
return { same: document.getElementById('stage') === watch.stage, skeleton: watch.skeleton,
focused: !!watch.stage?.contains(document.activeElement) };
});
describe('作品详情岛', () => {
let browser: Browser;
before(async () => {
browser = await launch();
});
after(async () => {
await browser.close();
});
it('推荐加载保持详情高度稳定，理由与悬停圆角适配默认视口', { timeout: 60_000 }, async () => {
const opened = await openItemPage(browser, `/assets/${ITEM.plain}`, DESKTOP);
let release = () => {};
try {
const page = opened.page;
let requested!: () => void;
const received = new Promise<void>(resolve => { requested = resolve });
const waiting = new Promise<void>(resolve => { release = resolve });
await page.route(url => url.pathname === '/api/related', async route => {
requested();
await waiting;
await route.fulfill({ json: { items: RELATED.map(id => ({ ...itemCard(id), why: '标签接近' })) } });
});
await page.reload();
await received;
const media = page.locator('#stage [data-item-media]');
const initialHeight = await media.evaluate(node => node.getBoundingClientRect().height);
release();
const reasons = '#stage [data-item-related] [aria-label^="查看推荐理由"]';
await page.locator(reasons).first().waitFor();
const visible = () => page.waitForFunction(selector => {
const scroll = document.querySelector('#stage [data-stage-scroll]')!;
const bottom = scroll.getBoundingClientRect().bottom;
return scroll.scrollTop === 0 && [...document.querySelectorAll(selector)]
.every(reason => reason.getBoundingClientRect().bottom <= bottom + 1);
}, reasons);
await visible();
const finalHeight = await media.evaluate(node => node.getBoundingClientRect().height);
assert.ok(Math.abs(initialHeight - finalHeight) <= 1, `${initialHeight} → ${finalHeight}`);
const card = page.locator('#stage [data-item-related] [data-media-card]').first();
await card.hover();
const shape = await card.evaluate(node => ({
shadow:getComputedStyle(node).boxShadow,
outer:parseFloat(getComputedStyle(node,'::before').borderTopLeftRadius),
inner:parseFloat(getComputedStyle(node).getPropertyValue('--surface-radius')),
height:node.getBoundingClientRect().height,
}));
assert.equal(shape.shadow, 'none');
assert.equal(shape.outer, shape.inner + 8);
assert.ok(shape.height < 220, JSON.stringify(shape));
await page.locator('#stage [data-item-related] h3').evaluate(node => {
node.textContent = '接着看 '.repeat(60);
});
await visible();
await page.setViewportSize({ width: 1280, height: 720 });
await visible();
assert.deepEqual((await layout(page)).offenders, []);
} finally { release(); await opened.close() }
});
for (const viewport of VIEWPORTS) it(`本地标签选择器复用覆盖式滚动条（${viewport.name}）`, async () => {
const opened = await openItemPage(browser, `/assets/${ITEM.plain}`, viewport);
try {
const { page } = opened;
await page.locator('#stage [data-tag-plus]').evaluate(node => node.scrollIntoView({ block:'center', behavior:'instant' }));
await page.locator('#stage [data-tag-plus]').click();
const menu = page.locator('#stage [data-tag-picker]');
await menu.waitFor({ state:'visible' });
const scrollbar = await menu.locator('[data-tag-body]').evaluate(node => ({
hidden:getComputedStyle(node).scrollbarWidth,
track:!!node.parentElement?.querySelector('.ovtrack.ov-y'),
positioned:getComputedStyle(node.parentElement!).position,
}));
assert.deepEqual(scrollbar, { hidden:'none', track:true, positioned:'relative' });
} finally { await opened.close(); }
});
for (const kind of ['parts', 'editions'] as const) for (const count of [1, 2, 3]) {
it(`${kind} 队列的 ${count} 张卡按内容分配空间，推荐卡等宽对齐`, { timeout: 60_000 }, async () => {
const opened = await openItemPage(browser, '/', DESKTOP, { ready: '#grid [data-media-card]' });
try {
const page = opened.page;
const seed = kind === 'parts' ? ITEM.part : ITEM.edition;
const group = kind === 'parts' ? PARTS : EDITIONS;
await page.route(url => url.pathname === `/api/${kind}`, route => route.fulfill({ json: {
...group, items: Array.from({ length: count }, (_, index) => ({ ...group.items[index % group.items.length], id: seed + index })),
} }));
await page.goto(new URL(`/assets/${seed}?${kind}=${seed}`, page.url()).toString());
await page.locator('#stage [data-queue-row]').first().waitFor();
await page.locator('#stage [data-item-related] [data-media-card]').first().waitFor();
const measured = await page.locator('[data-detail-continuation]').evaluate(node => {
const queue = node.querySelector('[data-mix-queue]')!.getBoundingClientRect();
const cards = [...node.querySelectorAll('[data-queue-row]')].map(card => card.getBoundingClientRect());
const related = node.querySelector('[data-item-related] [data-media-card]')!.getBoundingClientRect();
return { width: queue.width, full: node.getBoundingClientRect().width, cards: cards.map(card => ({ width: card.width, y: card.y })), related: { width: related.width, y: related.y } };
});
const width = measured.cards[0]!.width;
if (count < 3) assert.ok(Math.abs(measured.width - (count * width + (count - 1) * 10 + 28)) < 1, JSON.stringify(measured));
else assert.ok(Math.abs(measured.width - measured.full / 2) < 1, JSON.stringify(measured));
assert.ok(measured.cards.every(card => Math.abs(card.width - measured.related.width) < 1 && Math.abs(card.y - measured.related.y) < 1), JSON.stringify(measured));
if (count === 2) await page.screenshot({ path: `../build/detail-two-${kind}.png` });
assert.deepEqual(withoutPlayer(opened.problems), []);
} finally { await opened.close() }
});
}
for (const destination of ['/tasks', '/performers']) {
it(`分卷等待响应时后退到 ${destination}：舞台撤回，晚到的响应不能改变地址或历史深度`, { timeout: 60_000 }, async () => {
const opened = await openItemPage(browser, '/', DESKTOP, { ready: PART_CARD, catalogIds: [...CATALOG, ITEM.part] });
let release = () => {};
try {
const page = opened.page;
await page.evaluate(async (path) => {
const moduleUrl = '/dist/peach-app.js';
const { peachHistory } = await import(moduleUrl);
peachHistory.push(path);
}, destination);
await pathIs(page, destination);
await page.evaluate(async () => { const moduleUrl = '/dist/peach-app.js'; (await import(moduleUrl)).peachHistory.push('/') });
await page.locator(PART_CARD).waitFor();
const depth = await page.evaluate(() => history.length);
let arrived = () => {};
const requested = new Promise<void>(resolve => { arrived = resolve });
const gate = new Promise<void>(resolve => { release = resolve });
let finished = () => {};
const responded = new Promise<void>(resolve => { finished = resolve });
await page.route((url) => url.pathname === '/api/parts', async route => {
arrived();
await gate;
try { await route.fallback() }
catch (error) { assert.match(route.request().failure()?.errorText || '', /ERR_ABORTED/, String(error)) }
finally { finished() }
});
await page.locator(PART_CARD).click();
await requested;
await page.locator('#stage[open]').waitFor();
assert.equal(await page.evaluate(() => location.pathname), '/');
assert.equal(await page.evaluate(() => history.length), depth, '队列未取齐时没有临时历史条目');
await page.goBack();
await pathIs(page, destination);
await page.waitForFunction(() => !document.querySelector('#stage[open]'));
const seq = await page.evaluate(async () => { const moduleUrl = '/dist/peach-app.js'; return (await import(moduleUrl)).peachHistory.navigation.seq });
release();
await responded;
await page.waitForTimeout(500);
assert.equal(await page.locator('#stage[open]').count(), 0);
assert.equal(await page.evaluate(() => location.pathname), destination);
assert.equal(await page.evaluate(() => history.length), depth);
assert.equal(await page.evaluate(async () => { const moduleUrl = '/dist/peach-app.js'; return (await import(moduleUrl)).peachHistory.navigation.seq }), seq);
assert.deepEqual(opened.stub.writes, []);
assert.deepEqual(withoutPlayer(opened.problems), []);
} finally { release(); await opened.close() }
});
}
it('点分卷的同一任务里重放源页 POP：队列意图不取数、不铺舞台、不写条目', { timeout: 60_000 }, async () => {
const opened = await openItemPage(browser, '/', DESKTOP, { ready: PART_CARD, catalogIds: [...CATALOG, ITEM.part] });
try {
const page = opened.page;
const depth = await page.evaluate(() => history.length);
await page.locator(PART_CARD).evaluate(node => {
(node as HTMLElement).click();
window.dispatchEvent(new PopStateEvent('popstate', { state: history.state }));
});
await page.waitForTimeout(500);
assert.equal(opened.stub.reads.get('/api/parts') || 0, 0);
assert.equal(await page.locator('#stage[open]').count(), 0);
assert.deepEqual(await page.evaluate(() => [location.pathname, history.length]), ['/', depth]);
assert.deepEqual(withoutPlayer(opened.problems), []);
} finally { await opened.close() }
});
it('首次舞台宿主接上时重放源页 POP：包已到货的旧队列请求也不能开舞台', { timeout: 60_000 }, async () => {
const opened = await openItemPage(browser, '/', DESKTOP, { ready: PART_CARD, catalogIds: [...CATALOG, ITEM.part] });
try {
const page = opened.page;
assert.equal(await page.locator('[data-stage-host]').count(), 0);
const depth = await page.evaluate(() => history.length);
await page.evaluate(() => {
const append = document.body.append.bind(document.body);
document.body.append = (...nodes: (Node | string)[]) => {
append(...nodes);
if (nodes.some(node => node instanceof HTMLElement && node.hasAttribute('data-stage-host'))) {
document.body.append = append;
document.body.dataset.queueStagePop = '1';
window.dispatchEvent(new PopStateEvent('popstate', { state: history.state }));
}
};
});
await page.locator(PART_CARD).click();
await page.locator('body[data-queue-stage-pop]').waitFor({ state: 'attached' });
await page.waitForTimeout(500);
assert.equal(opened.stub.reads.get('/api/parts') || 0, 0);
assert.equal(await page.locator('#stage[open]').count(), 0);
assert.deepEqual(await page.evaluate(() => [location.pathname, history.length]), ['/', depth]);
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}"]` });
try {
const page = opened.page;
await page.emulateMedia({reducedMotion:'no-preference'});
await page.route(/\/api\/item\?/, async route => {
await new Promise(resolve => setTimeout(resolve, 400));
await route.fallback();
});
await page.evaluate(() => {
const heights: number[] = [];
Object.assign(window, { coldCatalogHeights: heights });
const sample = () => {
const dialog = document.querySelector<HTMLDialogElement>('#stage[open]');
if (dialog) heights.push(dialog.clientHeight);
if (heights.length < 180) requestAnimationFrame(sample);
}; requestAnimationFrame(sample);
});
const listed = opened.stub.reads.get('/api/items') || 0;
const backgroundPlayState=()=>page.locator('.top .search').first().evaluate(
node=>getComputedStyle(node).animationPlayState);
const initialPlayState=await backgroundPlayState();
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();
const heights = await page.evaluate(() => (window as unknown as { coldCatalogHeights: number[] }).coldCatalogHeights);
assert.ok(heights.length > 5 && Math.max(...heights) - Math.min(...heights) < 1, JSON.stringify(heights));
assert.ok((await backgroundPlayState()).split(',').every(state=>state.trim()==='paused'));
assert.equal(await page.evaluate(() => document.activeElement?.id), 'closeStage', '内容到了焦点不在关闭键上');
await page.locator('#closeStage').click();
await pathIs(page, '/');
await page.locator('#stage[open]').waitFor({ state: 'detached', timeout: 10_000 }).catch(() => {});
assert.equal(await page.locator('#stage[open]').count(), 0);
assert.equal(await backgroundPlayState(),initialPlayState,'关闭详情恢复背景动画状态');
await page.locator(`#grid [data-media-card][data-id="${ITEM.plain}"]`).first().waitFor();
assert.equal(opened.stub.reads.get('/api/items') || 0, listed, '关掉详情回列表重取了一遍');
assert.deepEqual(withoutPlayer(opened.problems), []);
} finally {
await opened.close();
}
});
it('深链进详情：单条取这一条；关掉之后照地址补画列表', { timeout: 60_000 }, async () => {
const opened = await openItemPage(browser, `/assets/${ITEM.plain}`, DESKTOP);
try {
const page = opened.page;
assert.equal(opened.stub.reads.get('/api/item'), 1);
await page.locator('#closeStage').click();
await pathIs(page, '/');
await page.locator(`#grid [data-media-card][data-id="${ITEM.plain}"]`).first().waitFor({ timeout: 15_000 });
assert.ok((opened.stub.reads.get('/api/items') || 0) >= 1, '深链关掉之后没有补取列表');
assert.deepEqual(withoutPlayer(opened.problems), []);
} finally {
await opened.close();
}
});
it('后退回到详情再关掉：回到这一条打开时压着的那一页，地址与画面一致', { timeout: 90_000 }, async () => {
const opened = await openItemPage(browser, '/trash', DESKTOP, { ready: `#grid [data-media-card][data-id="${ITEM.plain}"]` });
try {
const page = opened.page;
const openCard = async (id: number) => {
await page.locator(`#grid [data-media-card][data-id="${id}"] [data-media-title]`).first().click();
await pathIs(page, `/assets/${id}`);
await page.locator(DETAIL_READY).waitFor();
};
await openCard(ITEM.plain);
await page.locator('#closeStage').click();
await pathIs(page, '/trash');
await page.locator('[data-nav=""]:visible').first().click();
await pathIs(page, '/');
await page.locator(`#grid [data-media-card][data-id="${ITEM.cast}"]`).first().waitFor({ timeout: 15_000 });
await openCard(ITEM.cast);
for (const path of ['/', '/trash', `/assets/${ITEM.plain}`]) {
await page.goBack();
await pathIs(page, path);
}
await page.locator(DETAIL_READY).waitFor();
await page.locator('#closeStage').click();
await pathIs(page, '/trash');
await page.locator('#stage[open]').waitFor({ state: 'detached', timeout: 10_000 }).catch(() => {});
assert.equal(await page.locator('#stage[open]').count(), 0);
await page.locator(`#grid [data-media-card][data-id="${ITEM.plain}"]`).first().waitFor();
assert.deepEqual(withoutPlayer(opened.problems), []);
} finally {
await opened.close();
}
});
it('刷新落在详情上不读条目记的来处：下面补画目录网格，关掉回首页', { timeout: 60_000 }, async () => {
const opened = await openItemPage(browser, '/trash', DESKTOP, { ready: `#grid [data-media-card][data-id="${ITEM.plain}"]` });
try {
const page = opened.page;
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();
assert.deepEqual(await page.evaluate(() => history.state?.usr?.backgroundLocation), { pathname: '/trash', search: '' });
await page.reload({ waitUntil: 'load' });
await page.locator(DETAIL_READY).waitFor({ timeout: 15_000 });
await page.locator('#closeStage').click();
await pathIs(page, '/');
await page.locator(`#grid [data-media-card][data-id="${ITEM.plain}"]`).first().waitFor({ timeout: 15_000 });
assert.deepEqual(withoutPlayer(opened.problems), []);
} finally {
await opened.close();
}
});
it('播放列表里换条再关掉回到列表页并重读；后退回到其中一条再关掉也一样', { timeout: 90_000 }, async () => {
const opened = await openItemPage(browser, '/', DESKTOP, { ready: `#grid [data-media-card][data-id="${ITEM.plain}"]` });
try {
const page = opened.page;
let listed = 0;
// 列表摘要反映成功写入的续播点，关闭后卡片与再次打开都应使用它。
await page.route((url) => url.pathname === '/api/playlists', (route) => {
listed += 1;
const progress = opened.stub.writes.findLast(write => write.url === '/api/playlist'
&& write.body.action === 'progress' && write.body.id === PLAYLIST.id);
const current = Number(progress?.body.asset_id || PLAYLIST.items[0]);
return route.fulfill({ json: { items: [{
id: PLAYLIST.id, name: PLAYLIST.name, item_count: PLAYLIST.items.length,
current_asset_id: current, preview_asset_id: current,
}] } });
});
await page.goto(new URL('/playlists', page.url()).toString(), { waitUntil: 'load' });
const card = page.locator(`[data-playlist-card="${PLAYLIST.id}"]`);
const step = async (id: number) => {
await page.locator(`#stage [data-queue-item="${id}"]`).click();
await pathIs(page, `/assets/${id}?playlist=${PLAYLIST.id}`);
await page.locator(`#stage [data-queue-item="${id}"][aria-current="true"]`).waitFor();
};
const enter = async (resume: number) => {
await card.locator('[data-mix-open]').click();
await pathIs(page, `/assets/${resume}?playlist=${PLAYLIST.id}`);
await page.locator(DETAIL_READY).waitFor();
await step(PLAYLIST.items[1]!);
await step(PLAYLIST.items[2]!);
};
const closeToList = async (resume: number) => {
const before = listed;
await page.locator('#closeStage').click();
await pathIs(page, '/playlists');
await page.locator('#stage[open]').waitFor({ state: 'detached', timeout: 10_000 }).catch(() => {});
await card.waitFor();
assert.equal(await page.locator('#stage[open]').count(), 0);
for (const deadline = Date.now() + 10_000; listed <= before && Date.now() < deadline;) await page.waitForTimeout(50);
assert.ok(listed > before, '关掉之后列表页没有重读');
await card.locator(`img[src*="id=${resume}&"]`).first().waitFor();
};
await card.waitFor({ timeout: 15_000 });
await enter(PLAYLIST.items[0]!);
await closeToList(PLAYLIST.items[2]!);
await enter(PLAYLIST.items[2]!);
await page.goBack();
await pathIs(page, `/assets/${PLAYLIST.items[1]}?playlist=${PLAYLIST.id}`);
await page.locator(`#stage [data-queue-item="${PLAYLIST.items[1]}"][aria-current="true"]`).waitFor();
await page.locator(DETAIL_READY).waitFor();
await closeToList(PLAYLIST.items[1]!);
assert.deepEqual(withoutPlayer(opened.problems), []);
} finally {
await opened.close();
}
});
it('舞台在媒体框里挂上 Video.js，氛围光画布与统计角标跟它进同一块媒体区', { timeout: 60_000 }, async () => {
const opened = await openItemPage(browser, `/assets/${ITEM.plain}`, DESKTOP);
try {
const page = opened.page;
await page.locator('#stage [data-item-media="video"] > .video-js video.vjs-tech').waitFor({ state: 'attached' });
const shape = await page.evaluate(() => {
const media = document.querySelector('#stage [data-item-media="video"]')!;
return { id: media.querySelector(':scope > .video-js')!.id, canvas: !!media.querySelector(':scope > [data-ambient-canvas]'),
stats: !!media.querySelector('#playerStatsBtn'), videos: media.querySelectorAll('video').length };
});
assert.deepEqual(shape, { id: 'vid', canvas: true, stats: true, videos: 1 });
assert.deepEqual(withoutPlayer(opened.problems), []);
} finally {
await opened.close();
}
});
it('来源不可读取：说明块代替播放器，刷新状态后显示读取结果', { timeout: 60_000 }, async () => {
const opened = await openItemPage(browser, `/assets/${ITEM.offline}`, DESKTOP);
try {
const page = opened.page;
const gate = page.locator('#stage [data-item-gate="offline"]');
assert.match(await gate.innerText(), /媒体目录无法访问/);
assert.equal(await page.locator('#stage .vjs-tech').count(), 0, '脱盘的条目挂了播放器');
await page.locator('#offlineRetry').click();
await page.locator('#offlineRetry', { hasText: '仍无法读取 · 刷新' }).waitFor();
assert.deepEqual(opened.problems, []);
} finally {
await opened.close();
}
});
for (const viewport of [DESKTOP, MOBILE]) {
it(`${viewport.mobile ? '手机' : '桌面'}来源状态：权限原因可见，未取得状态不判脱盘`, { timeout: 60_000 }, async () => {
const opened = await openItemPage(browser, `/assets/${ITEM.offline}`, viewport);
try {
const page = opened.page;
let online: boolean | null = false;
await page.route((url) => url.pathname === '/api/sources', (route) => route.fulfill({ json: {
sources: [{ location: 'local', online: true }, { location: '115', online,
state: online === false ? 'permission_denied' : 'timeout',
message: online === false ? 'CloudDrive · 115：没有权限读取' : 'CloudDrive · 115：探测未返回' }],
} }));
await page.reload({ waitUntil: 'load' });
await page.locator(DETAIL_READY).waitFor();
assert.match(await page.locator('#stage [data-item-gate="offline"]').innerText(), /没有权限读取/);
online = null;
await page.reload({ waitUntil: 'load' });
await page.locator(DETAIL_READY).waitFor();
assert.equal(await page.locator('#stage [data-item-gate="offline"]').count(), 0);
assert.equal(await page.locator('body.offline-source').count(), 0);
assert.deepEqual(withoutPlayer(opened.problems), []);
} finally {
await opened.close();
}
});
}
for (const viewport of [DESKTOP, MOBILE]) {
it(`${viewport.name}：出演超过 8 位先收起，点「还有 N 位」全部展开`, { timeout: 60_000 }, async () => {
const opened = await openItemPage(browser, `/assets/${ITEM.cast}`, viewport);
try {
const page = opened.page;
const shown = () => page.locator('#stage [data-item-identity] [data-entity-kind="performer"]:visible').count();
assert.equal(await shown(), 8);
assert.equal((await page.locator('#castMore').innerText()).trim(), `还有 ${NAMES.length - 8} 位`);
const button = page.getByRole('button', { name: `还有 ${NAMES.length - 8} 位` });
const appearance = await button.evaluate((node) => {
const style = getComputedStyle(node);
return { border: style.borderTopStyle, width: parseFloat(style.borderTopWidth),
background: style.backgroundColor, icon: !!node.querySelector('svg'), height: node.getBoundingClientRect().height };
});
assert.equal(appearance.border, 'solid');
assert.ok(appearance.width >= 1);
assert.notEqual(appearance.background, 'rgba(0, 0, 0, 0)');
assert.equal(appearance.icon, true);
assert.ok(appearance.height >= 32);
const centers = await button.evaluate((node) => {
const own = node.getBoundingClientRect();
const siblings = [...node.parentElement!.querySelectorAll<HTMLElement>('[data-id-cell]:not([hidden])')]
.map((cell) => cell.getBoundingClientRect()).filter((cell) => cell.top < own.bottom && cell.bottom > own.top);
return { margin: getComputedStyle(node).marginTop,
delta: siblings.map((cell) => own.top + own.height / 2 - cell.top - cell.height / 2) };
});
assert.equal(centers.margin, '0px', '展开按钮应在出演名单行内垂直居中');
assert.ok(centers.delta.every((delta) => Math.abs(delta) < 1), JSON.stringify(centers));
await button.focus();
await page.keyboard.press('Enter');
assert.equal(await shown(), NAMES.length);
assert.equal(await page.locator('#castMore').count(), 0);
assert.deepEqual(withoutPlayer(opened.problems), []);
} finally {
await opened.close();
}
});
}
it('标题折成两行，真溢出才给展开键；展开键与标题文字都能展开，再点收回', { timeout: 60_000 }, async () => {
const short = await openItemPage(browser, `/assets/${ITEM.plain}`, DESKTOP);
try {
assert.equal(await short.page.locator('#stage [data-title-fold]').isHidden(), true);
} finally {
await short.close();
}
const opened = await openItemPage(browser, `/assets/${ITEM.long}`, DESKTOP);
try {
const page = opened.page;
const title = page.locator('#stage [data-detail-title]');
const fold = page.locator('#stage [data-title-fold]');
const lines = () => title.evaluate((node) => Math.round(node.clientHeight / parseFloat(getComputedStyle(node).lineHeight)));
assert.equal(await fold.isVisible(), true);
assert.equal(await lines(), 2);
await fold.click();
assert.equal(await fold.getAttribute('aria-label'), '收起标题');
assert.ok(await lines() > 2, '展开之后整段标题都在');
await title.click();
assert.equal(await fold.getAttribute('aria-label'), '展开标题');
assert.equal(await lines(), 2);
assert.deepEqual(withoutPlayer(opened.problems), []);
} finally {
await opened.close();
}
});
it('评分：点当前那一颗是撤销评分；回执的撤销写回原分', { timeout: 60_000 }, async () => {
const opened = await openItemPage(browser, `/assets/${ITEM.plain}`, DESKTOP);
try {
const page = opened.page;
const value = page.locator('#detailRating [data-rating-value]');
assert.equal((await value.innerText()).trim(), '3 星');
await page.locator('#detailRating [data-rate="3"]').click();
await page.locator('#detailRating [data-rating-value]', { hasText: '未评分' }).waitFor();
assert.equal(await page.locator('#detailRating [data-on="true"]').count(), 0);
await undo(page);
await page.locator('#detailRating [data-rating-value]', { hasText: '3 星' }).waitFor();
assert.deepEqual(opened.stub.writes.filter((write) => write.url === '/api/feedback').map((write) => write.body), [
{ id: ITEM.plain, kind: 'rate', value: 0 },
{ id: ITEM.plain, kind: 'rate', value: 60 },
]);
assert.deepEqual(withoutPlayer(opened.problems), []);
} finally {
await opened.close();
}
});
it('标签：删一枚再撤销回来；从选择器新建一枚', { timeout: 60_000 }, async () => {
const opened = await openItemPage(browser, `/assets/${ITEM.plain}`, DESKTOP);
try {
const page = opened.page;
const tag = (name: string) => page.locator(`#detailTags [data-tag="${name}"]`);
await page.locator('#detailTags [data-remove-tag="剧情"]').click();
await tag('剧情').waitFor({ state: 'detached' });
await undo(page);
await tag('剧情').waitFor();
await page.locator('#tagPlus').click();
await page.locator('#tagPicker:not([hidden])').waitFor();
await page.locator('#tagPickSearch').fill('新建的标签');
await page.locator('#tagPicker [data-pick="新建的标签"]', { hasText: '新建“新建的标签”' }).waitFor();
await page.locator('#tagPickSearch').press('Enter');
await tag('新建的标签').waitFor();
assert.equal(await page.locator('#tagPicker').isHidden(), true, '加完标签选择器没有收起');
assert.deepEqual(opened.stub.writes.filter((write) => write.url === '/api/item-tag').map((write) => write.body), [
{ id: ITEM.plain, operation: 'remove', tag: '剧情' },
{ id: ITEM.plain, operation: 'add', tag: '剧情' },
{ id: ITEM.plain, operation: 'add', tag: '新建的标签' },
]);
assert.deepEqual(withoutPlayer(opened.problems), []);
} finally {
await opened.close();
}
});
for (const viewport of [DESKTOP, MOBILE]) {
it(`${viewport.name}详情动作保持单行，提示显示在浮窗顶层`, { timeout: 60_000 }, async () => {
const opened = await openItemPage(browser, `/assets/${ITEM.plain}`, viewport);
try {
const page = opened.page;
const actions = page.locator('#stage [data-item-feedback] button');
const rects = await actions.evaluateAll(nodes => nodes.map(node => {
const r = node.getBoundingClientRect(); return { top: r.top, width: r.width };
}));
assert.equal(rects.length, 8);
assert.equal(await page.locator('#stage [data-fb="cloud-download"]').count(), 0);
assert.ok(Math.max(...rects.map(r => r.top)) - Math.min(...rects.map(r => r.top)) <= 1);
assert.ok(rects.every(r => r.width >= 30));
await actions.first().scrollIntoViewIfNeeded();
await page.evaluate(() => new Promise<void>(resolve => requestAnimationFrame(() => requestAnimationFrame(() => resolve()))));
await actions.first().focus();
const tip = page.locator('#board-control-tooltip');
await tip.waitFor({state:'visible'});
assert.equal(await tip.evaluate(node => node.matches(':popover-open')), true);
assert.equal(await tip.evaluate(node => node.closest('dialog')?.id), 'stage');
const r = await tip.boundingBox();
assert.ok(r && r.x >= 0 && r.y >= 0 && r.x + r.width <= viewport.width && r.y + r.height <= viewport.height);
await actions.first().evaluate(node => (node as HTMLElement).blur());
assert.equal(await tip.isHidden(), true);
} finally { await opened.close() }
});
}
it('稍后看与反馈键：写完键态跟着服务端的回话变', { timeout: 60_000 }, async () => {
const opened = await openItemPage(browser, `/assets/${ITEM.plain}`, DESKTOP);
try {
const page = opened.page;
await page.locator('#stageLater').click();
await page.locator('#stageLater[aria-pressed="true"]').waitFor();
await page.locator('#stage [data-kind="dislike"]').click();
await page.locator('#stage [data-kind="dislike"][aria-pressed="true"]').waitFor();
await page.locator('#stage [data-kind="seen"]').click();
await page.locator('#stage [data-kind="seen"][aria-pressed="true"]').waitFor();
assert.equal(await page.locator('#stage [data-kind="dislike"]').getAttribute('aria-pressed'), 'false', '看过与不合口味同时亮着');
assert.deepEqual(opened.stub.writes.map((write) => [write.url, write.body.kind ?? null]), [
['/api/watch-later', null], ['/api/feedback', 'dislike'], ['/api/feedback', 'seen'],
]);
assert.deepEqual(withoutPlayer(opened.problems), []);
} finally {
await opened.close();
}
});
for (const viewport of [DESKTOP, MOBILE]) {
it(`${viewport.name}完整文件与修复分卷共用一张卡，版本队列只续播同版下一卷`, { timeout: 60_000 }, async () => {
const opened = await openItemPage(browser, '/', viewport, { catalogIds: [ITEM.edition], ready: '#grid [data-media-card]' });
try {
const page = opened.page;
const full = await page.evaluate(async id => (await fetch(`/api/item?id=${id}`)).json(), ITEM.edition);
const repair = await page.evaluate(async () => (await fetch('/api/item?id=32')).json());
const edition_group = { key: 'PCH-031', seed_id: 31, count: 2, editions: ['1080p', '4K 修复'] };
const part_group = { key: 'PCH-031:32', seed_id: 32, count: 2 };
const files = [
{ ...full, edition_group, edition_label: '1080p', version_id: 31 },
{ ...repair, edition_group, part_group, edition_label: '4K 修复', version_id: 32, part_label: '1' },
{ ...repair, id: 33, edition_group, part_group, edition_label: '4K 修复', version_id: 32, part_label: '2' },
];
await page.route(url => url.pathname === '/api/item', route => {
const file = files.find(row => row.id === Number(new URL(route.request().url()).searchParams.get('id')));
return file ? route.fulfill({ json: file }) : route.fallback();
});
await page.route(url => url.pathname === '/api/editions', route => route.fulfill({ json: { title: 'PCH-031', count: 2, items: files } }));
await page.route(url => url.pathname === '/api/items', route => route.fulfill({ json: {
items: [files[2], files[0], files[1]].map(row => ({ ...row, tags: row.tags.map((tag: { k: string }) => tag.k) })),
total: 3, work_total: 1, has_more: false,
} }));
await page.reload({ waitUntil: 'load' });
const card = page.locator('#grid [data-media-card][data-variant="grid"]');
await card.first().waitFor();
assert.equal(await card.count(), 1);
assert.deepEqual(await card.locator('[data-media-group]').allTextContents(), ['2 个版本']);
await card.locator('[data-media-title]').click();
await pathIs(page, '/assets/33?editions=31');
await page.locator('#stage [data-queue-item="33"][aria-current="true"]').waitFor();
assert.equal(await page.locator('#stage [data-queue-item]').count(), 3);
assert.equal(await page.locator('#stage').getByText('2 个版本', { exact: true }).count(), 1);
await page.locator('#stage [data-queue-item="32"]').click();
await page.locator('#stage [data-queue-item="32"][aria-current="true"]').waitFor();
await page.locator('#stage video.vjs-tech').dispatchEvent('ended');
await pathIs(page, '/assets/33?editions=31');
await page.locator('#stage [data-queue-item="33"][aria-current="true"]').waitFor();
await page.locator('#stage video.vjs-tech').dispatchEvent('ended');
assert.equal(new URL(page.url()).pathname + new URL(page.url()).search, '/assets/33?editions=31');
const bounds = await layout(page);
assert.ok(bounds.scrollWidth <= bounds.viewportWidth + 1, JSON.stringify(bounds));
assert.deepEqual(withoutPlayer(opened.problems), []);
} finally {
await opened.close();
}
});
}
for (const [kind, path, next, wanted] of [
['Mix', `/assets/${ITEM.plain}?mix=${ITEM.plain}`, 14, `/assets/14?mix=${ITEM.plain}`],
['分卷', `/assets/22?parts=${ITEM.part}`, 23, `/assets/23?parts=${ITEM.part}`],
['版本', `/assets/${ITEM.edition}?editions=${ITEM.edition}`, 32, `/assets/32?editions=${ITEM.edition}`],
['播放列表', `/assets/11?playlist=${PLAYLIST.id}`, 15, `/assets/15?playlist=${PLAYLIST.id}`],
] as const) {
it(`${kind}队列：深链停在给的那一条，点另一条原地换过去且不重取队列`, { timeout: 60_000 }, async () => {
const opened = await openItemPage(browser, path, DESKTOP);
try {
const page = opened.page;
assert.equal(await current(page), new URL(path, page.url()).pathname.split('/').at(-1));
const reads = new Map(opened.stub.reads);
await watchStage(page);
await page.locator(`#stage [data-queue-item="${next}"]`).click();
await pathIs(page, wanted);
await page.locator(`#stage [data-queue-item="${next}"][aria-current="true"]`).waitFor();
await page.locator(DETAIL_READY).waitFor();
assert.deepEqual(await stageKept(page), { same: true, skeleton: false, focused: true }, `${kind}队列换一条重开了浮窗`);
if (kind === '分卷') assert.match(await page.locator('#stage [data-detail-title]').innerText(), /第 3 卷/);
for (const url of ['/api/parts', '/api/editions', '/api/related']) {
assert.equal(opened.stub.reads.get(url) || 0, reads.get(url) || 0, `同一个${kind}队列里换一条又取了 ${url}`);
}
if (kind === '播放列表') {
assert.deepEqual(opened.stub.writes.filter((write) => write.body.action === 'progress').map((write) => write.body.asset_id),
[11, next], '播放列表没有记下续播位置');
}
assert.deepEqual(withoutPlayer(opened.problems), []);
} finally {
await opened.close();
}
});
}
it('播放列表：拖动换顺序、移出一条，两者都能撤销', { timeout: 60_000 }, async () => {
const opened = await openItemPage(browser, `/assets/11?playlist=${PLAYLIST.id}`, DESKTOP);
try {
const page = opened.page;
const order = () => ids(page, '#stage [data-queue-row]', 'data-queue-row');
const wait = (wanted: number[]) => page.waitForFunction((want) => JSON.stringify([...document
.querySelectorAll('#stage [data-queue-row]')].map((row) => Number(row.getAttribute('data-queue-row')))) === want,
JSON.stringify(wanted), { timeout: 10_000 });
assert.deepEqual(await order(), PLAYLIST.items);
await page.locator('#stage [data-queue-row="16"]').dragTo(page.locator('#stage [data-queue-row="14"]'),
{ targetPosition: { x: 4, y: 2 } });
await wait([11, 16, 14, 15]);
await undo(page);
await wait(PLAYLIST.items);
await page.locator('#stage [data-queue-remove="15"]').click();
await page.locator('[data-modal-confirm]').click();
await wait([11, 14, 16]);
await undo(page);
await wait(PLAYLIST.items);
assert.deepEqual(opened.stub.writes.filter((write) => write.body.action !== 'progress')
.map((write) => [write.body.action, write.body.asset_ids ?? write.body.asset_id]), [
['reorder', [11, 16, 14, 15]], ['reorder', PLAYLIST.items],
['remove', 15], ['add', [15]], ['reorder', PLAYLIST.items],
]);
assert.deepEqual(withoutPlayer(opened.problems), []);
} finally {
await opened.close();
}
});
it('保存 Mix：确认之后转去新建的那份播放列表', { timeout: 60_000 }, async () => {
const opened = await openItemPage(browser, `/assets/${ITEM.plain}?mix=${ITEM.plain}`, DESKTOP);
try {
const page = opened.page;
await page.locator('#stage [data-save-mix]').click();
await page.locator('[name="name"]').fill('我的 Mix');
await page.locator('[data-modal-confirm]').click();
await page.waitForFunction(() => location.pathname.startsWith('/assets/') && new URLSearchParams(location.search).get('playlist') === '8', undefined, { timeout: 10_000 });
await page.locator('#stage [data-queue-row]').first().waitFor();
assert.deepEqual(await ids(page, '#stage [data-queue-row]', 'data-queue-row'), [ITEM.plain, ...RELATED]);
const created = opened.stub.writes.find((write) => write.body.action === 'create')!;
assert.deepEqual(created.body, {
action: 'create', name: '我的 Mix', asset_ids: [ITEM.plain, ...RELATED], source_kind: 'mix',
source_seed_asset_id: ITEM.plain,
});
assert.deepEqual(withoutPlayer(opened.problems), []);
} finally {
await opened.close();
}
});
it('接着看：一排卡按相关作品的顺序；点一张原地换到那一条', { timeout: 60_000 }, async () => {
const opened = await openItemPage(browser, `/assets/${ITEM.plain}`, DESKTOP);
try {
const page = opened.page;
await page.locator('#nrow [data-media-card]').first().waitFor();
assert.deepEqual(await ids(page, '#nrow [data-media-card]', 'data-id'), RELATED);
const before = await page.locator('#stage [data-detail-title]').innerText();
await watchStage(page);
await page.locator(`#nrow [data-media-card][data-id="${RELATED[0]}"] [data-media-title]`).click();
await pathIs(page, `/assets/${RELATED[0]}`);
await page.waitForFunction((title) => {
const now = document.querySelector('#stage [data-detail-title]');
return !!now && (now as HTMLElement).innerText !== title;
}, before, { timeout: 10_000 });
await page.locator(DETAIL_READY).waitFor();
assert.deepEqual(await stageKept(page), { same: true, skeleton: false, focused: true }, '接着看换一条重开了浮窗');
assert.deepEqual(withoutPlayer(opened.problems), []);
} finally {
await opened.close();
}
});
it('点女优进她的实体页，舞台收起', { timeout: 60_000 }, async () => {
const opened = await openItemPage(browser, `/assets/${ITEM.plain}`, DESKTOP);
try {
const page = opened.page;
await page.route(url => url.pathname === '/api/entity', route => {
assert.equal(new URL(route.request().url()).searchParams.get('id'), '1');
return route.fulfill({ json: {
id: 1, kind: 'performer', canonical_name: NAMES[0], aliases: [], display_aliases: [], user_aliases: [],
asset_count: 1, tags: [], related_performers: [], links: [], metadata: {},
has_image: false, has_avatar: false, representative_asset_id: null, entry_links: [],
} });
});
await page.locator(`#stage [data-item-identity] [data-entity-kind="performer"][data-entity-name="${NAMES[0]}"]`).click();
await pathIs(page, '/performers/1');
await page.locator('#index [data-entity-title] h2').filter({ hasText: NAMES[0] }).waitFor();
await page.waitForFunction(() => !document.querySelector('#stage[open]'), undefined, { timeout: 10_000 });
assert.equal(await page.evaluate(() => document.body.classList.contains('entity-open')), true);
} finally {
await opened.close();
}
});
it('取不到这一条：播放器格照 16:9 撑开，重试提示居中，不塌成一条窄条', { timeout: 60_000 }, async () => {
const opened = await openItemPage(browser, `/assets/${ITEM.plain}`, DESKTOP);
try {
const page = opened.page;
await page.route((url) => url.pathname === '/api/item', (route) => route.fulfill({ status: 500, json: { error: 'database is locked' } }));
await page.goto(new URL('/assets/987654', page.url()).toString(), { waitUntil: 'load' });
await page.locator('#stage [data-item-placeholder] [data-media-error]').waitFor({ timeout: 15_000 });
const box = await page.evaluate(() => {
const frame = document.querySelector('#stage [data-item-placeholder]')!.getBoundingClientRect();
const note = document.querySelector('#stage [data-item-placeholder] [data-media-error]')!.getBoundingClientRect();
return { ratio: frame.width / frame.height, offset: Math.abs((note.top + note.bottom) / 2 - (frame.top + frame.bottom) / 2) };
});
assert.ok(Math.abs(box.ratio - 16 / 9) < 0.02, `播放器格不是 16:9：${JSON.stringify(box)}`);
assert.ok(box.offset < 2, `提示没有竖直居中：${JSON.stringify(box)}`);
} finally {
await opened.close();
}
});
it('长标签单行省略，高度和别的标签一样', { timeout: 60_000 }, async () => {
const opened = await openItemPage(browser, `/assets/${ITEM.plain}`, MOBILE);
try {
const page = opened.page;
const heights = await page.evaluate(() => {
const tag = document.querySelector('#detailTags [data-tag]') as HTMLElement;
const before = tag.getBoundingClientRect().height;
tag.textContent = 'customer-feedback-from-enterprise-onboarding-customer-feedback-from-enterprise-onboarding';
return { before, after: tag.getBoundingClientRect().height, wide: tag.scrollWidth > tag.clientWidth };
});
assert.equal(heights.after, heights.before, `长标签折行了：${JSON.stringify(heights)}`);
assert.equal(heights.wide, true, '长标签应当被省略');
assert.deepEqual((await layout(page)).offenders, [], '长标签撑出视口');
} finally {
await opened.close();
}
});
it('桩片源的连续解码错误不消耗真实诊断预算，其他错误继续下传', { timeout: 60_000 }, async () => {
const opened = await openItemPage(browser, `/assets/${ITEM.plain}`, DESKTOP);
try {
const forwarded: unknown[] = [];
await opened.page.context().route((url) => url.pathname === '/api/diagnostics/client-error', (route) => {
forwarded.push(route.request().postDataJSON());
return route.fulfill({ json: { recorded: false } });
});
const replies = await opened.page.evaluate(async () => {
const send = async (kind: string, source_route: string, message = '夹具错误') => (await fetch('/api/diagnostics/client-error', {
method: 'POST', headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ kind, message, playback: { source_route } }),
})).json();
const ambient = await send('media', '/stream', '并发播放器错误');
const media = await Promise.all(Array.from({ length: 21 }, () => send('media', '/stream')));
return { ambient, media, other: await send('error', '/stream'), external: await send('media', '/external') };
});
assert.deepEqual(replies.ambient, { recorded: true });
assert.deepEqual(replies.media, Array.from({ length: 21 }, () => ({ recorded: true })));
assert.equal(opened.stub.mediaErrors.filter((sent) => sent.message === '夹具错误').length, 21);
assert.deepEqual(replies.other, { recorded: false });
assert.deepEqual(replies.external, { recorded: false });
assert.deepEqual(forwarded, [
{ kind: 'error', message: '夹具错误', playback: { source_route: '/stream' } },
{ kind: 'media', message: '夹具错误', playback: { source_route: '/external' } },
]);
} finally { await opened.close() }
});
it('手机 390：详情不横向溢出，侧栏排在播放区下面', { timeout: 60_000 }, async () => {
const opened = await openItemPage(browser, `/assets/${ITEM.plain}`, MOBILE);
try {
const page = opened.page;
assert.deepEqual((await layout(page)).offenders, [], '详情里有元素越出视口右边');
const boxes = await page.evaluate(() => ({
media: document.querySelector('#stage [data-item-media]')!.getBoundingClientRect().bottom,
side: document.querySelector('#stage [data-item-side]')!.getBoundingClientRect().top,
}));
assert.ok(boxes.side >= boxes.media - 1, `侧栏不在播放区下面：${JSON.stringify(boxes)}`);
assert.deepEqual(withoutPlayer(opened.problems), []);
} finally {
await opened.close();
}
});
});