frontend/e2e/follow-detail.test.ts
Rama master · réplica de lectura del repositorio original.
/* 关注详情岛（`follow-detail`）在真浏览器里的行为：从列表进出、后退回详情再关掉保住筛选、深链、舞台在媒体框里挂
* Video.js、多图轮播、合集与多媒体两种队列、写操作与撤销、隐藏与恢复、标签回列表、手机。
* 灯箱收到整组图那一条在 `photo-lightbox.test.ts`。
*
* 桩数据见 `follow-fixture.ts`（`DETAIL` 那几种形态只经单条取数交回）；关注来源的真实抓取一次都不发。 */
import assert from 'node:assert/strict';
import { after, before, describe, it } from 'node:test';
import type { Browser, Page } from 'playwright-core';
import { DETAIL, openFollowFeed } from './follow-fixture.ts';
import { layout, launch, VIEWPORTS } from './harness.ts';
const DESKTOP = VIEWPORTS.find((viewport) => !viewport.mobile)!;
const MOBILE = VIEWPORTS.find((viewport) => viewport.mobile)!;
const DETAIL_READY = '#stage[open] [data-follow-detail-side]';
/** 桩里的视频没有正片，播放器拿到空响应会报一条 VIDEOJS 错误；量的不是它。 */
const withoutPlayer = (problems: string[]) => problems.filter((line) => !line.includes('VIDEOJS'));
const pathIs = (page: Page, path: string) => page.waitForFunction(
(wanted) => location.pathname === wanted, path, { timeout: 10_000 });
/** 记下这一页之后发出的关注列表请求与单条取数，分开数。 */
function watchFollowRequests(page: Page) {
const seen = { list: 0, item: [] as string[] };
page.on('request', (request) => {
const url = new URL(request.url());
if (url.pathname !== '/api/follow') return;
if (url.searchParams.has('item')) seen.item.push(url.searchParams.get('item')!);
else seen.list += 1;
});
return seen;
}
/** 换条前记下舞台节点并盯住骨架：原地换条时浮窗还是同一个节点，中途不回骨架，焦点留在浮窗里。
* 顺带盯新播放器：Peach 控件（提示圆是其中一枚）装上之前，Video.js 原装的控制条与大播放键不该露出来。 */
const watchStage = (page: Page) => page.evaluate(() => {
const watch = { stage: document.getElementById('stage'), skeleton: false, rawControls: false };
const shown = (node: Element | null) => !!node && getComputedStyle(node).display !== 'none' && getComputedStyle(node).visibility !== 'hidden';
new MutationObserver(() => {
if (document.querySelector('#stage [data-skeleton="detail"]')) watch.skeleton = true;
for (const player of document.querySelectorAll('#stage div.video-js:not(:has(.vjs-peach-bezel))')) {
if (shown(player.querySelector('.vjs-control-bar')) || shown(player.querySelector('.vjs-big-play-button'))) watch.rawControls = 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 } }).stageWatch;
return { same: document.getElementById('stage') === watch.stage, skeleton: watch.skeleton,
focused: !!watch.stage?.contains(document.activeElement) };
});
const openDetail = (browser: Browser, id: number, viewport = DESKTOP) =>
openFollowFeed(browser, `/posts/${id}`, viewport, { ready: DETAIL_READY });
describe('关注详情岛', () => {
let browser: Browser;
before(async () => {
browser = await launch();
});
after(async () => {
await browser.close();
});
for (const viewport of VIEWPORTS) {
it(`详情标签选择器进入顶层并在可用空间内滚动（${viewport.name}）`, async () => {
const opened = await openDetail(browser, 1002, viewport);
try {
const { page } = opened;
await page.locator('#stage [data-tag-plus]').click();
const menu = page.locator('#stage [data-tag-picker]');
await menu.waitFor({ state: 'visible' });
const visible = await menu.evaluate(node => {
const r = node.getBoundingClientRect();
return { topLayer: node.matches(':popover-open'), top:r.top, bottom:r.bottom, right:r.right,
height:r.height, screen:[innerWidth,innerHeight],
inside:node.contains(document.elementFromPoint(r.left + r.width / 2, r.top + r.height / 2)) };
});
assert.equal(visible.topLayer, true);
assert.ok(visible.inside && visible.height > 50 && visible.top >= 0 && visible.bottom <= visible.screen[1]);
assert.ok(visible.right <= visible.screen[0]);
const appearance = await menu.evaluate(node => {
const probe = document.createElement('span'); probe.style.backgroundColor = 'var(--surface)'; node.append(probe);
const expected = getComputedStyle(probe).backgroundColor; probe.remove();
return { background:getComputedStyle(node).backgroundColor, expected, blur:getComputedStyle(node).backdropFilter,
icons:[...node.querySelectorAll('svg')].map(svg => ({ fill:getComputedStyle(svg).fill, stroke:getComputedStyle(svg).stroke })) };
});
assert.equal(appearance.background, appearance.expected);
assert.equal(appearance.blur, 'none');
assert.ok(appearance.icons.every(icon => icon.fill === 'none' && icon.stroke !== 'none'));
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.equal(scrollbar.hidden, 'none');
assert.equal(scrollbar.track, true);
assert.equal(scrollbar.positioned, 'relative');
} finally { await opened.close(); }
});
it(`在线影院模式保留可见播放器和同一媒体节点（${viewport.name}）`, async () => {
const opened = await openDetail(browser, 1002, viewport);
try {
const { page } = opened;
const player = page.locator('#stage .video-js');
await player.locator('.vjs-peach-bezel').waitFor({ state: 'attached' });
const node = await player.elementHandle();
const normal = await player.boundingBox();
assert.ok(normal && normal.height > 100);
await page.locator('#stage [data-player-theater]').dispatchEvent('click');
await page.locator('#stage[data-theater]').waitFor();
const scroll = page.locator('#stage > [data-stage-scroll]');
await page.waitForFunction(() => document.querySelector('#stage > [data-stage-scroll]')?.hasAttribute('data-overlay-scrollbar'));
assert.equal(await scroll.evaluate(node => getComputedStyle(node).scrollbarWidth), 'none');
assert.equal(await page.locator('#stage > .ovtrack.ov-y').count(), 1);
await page.waitForFunction(() => {
const region=document.querySelector<HTMLElement>('#stage > [data-stage-scroll]')!;
return region.scrollHeight<=region.clientHeight+1 || !document.querySelector<HTMLElement>('#stage > .ovtrack.ov-y')?.hidden;
});
const cinema = await player.boundingBox();
assert.ok(cinema && cinema.height > 100, `影院画面不可见：${JSON.stringify(cinema)}`);
assert.equal(await node!.evaluate(element => element === document.querySelector('#stage .video-js')), true);
await page.locator('#stage [data-player-theater]').dispatchEvent('click');
const restored = await player.boundingBox();
assert.ok(restored && Math.abs(restored.height - normal.height) < 2);
} finally { await opened.close(); }
});
}
it('列表点卡进详情：地址换成这一条，不再单条取数；关掉回列表不重取', { timeout: 60_000 }, async () => {
const opened = await openFollowFeed(browser, '/follow', DESKTOP);
try {
const page = opened.page;
const seen = watchFollowRequests(page);
await page.locator('[data-follow-item="1002"] [data-follow-open]').click();
await pathIs(page, '/posts/1002');
await page.locator(DETAIL_READY).waitFor();
assert.equal((await page.locator('#stage [data-follow-detail-name]').innerText()).trim(), '演示更新 1002');
assert.deepEqual(seen.item, [], '列表缓存里有的这一条又单条取了一次');
await page.locator('[data-follow-related] [data-follow-item]').first().waitFor();
const listedBeforeClose = seen.list;
await page.locator('#closeStage').click();
await pathIs(page, '/follow');
await page.locator('[data-follow-list] > [data-follow-item]').first().waitFor();
assert.equal(seen.list, listedBeforeClose, '关掉详情回列表重取了一遍');
assert.deepEqual(withoutPlayer(opened.problems), []);
} finally {
await opened.close();
}
});
it('筛过一档再进详情：后退回到详情再关掉，回到同一档筛选', { timeout: 60_000 }, async () => {
const opened = await openFollowFeed(browser, '/follow?status=new', DESKTOP);
try {
const page = opened.page;
const filtered = () => page.waitForFunction(
() => location.pathname === '/follow' && location.search === '?status=new', undefined, { timeout: 10_000 });
await page.locator('[data-follow-item="1002"] [data-follow-open]').click();
await pathIs(page, '/posts/1002');
await page.locator(DETAIL_READY).waitFor();
await page.locator('#closeStage').click();
await filtered();
await page.goBack();
await pathIs(page, '/posts/1002');
await page.locator(DETAIL_READY).waitFor();
await page.locator('#closeStage').click();
await filtered();
await page.locator('[data-follow-list] > [data-follow-item]').first().waitFor();
assert.equal(await page.locator('#stage[open]').count(), 0);
assert.deepEqual(withoutPlayer(opened.problems), []);
} finally {
await opened.close();
}
});
it('深链进详情只单条取这一条，不挂列表岛；内容到了焦点在关闭键上；刷新时只有浮窗里的骨架', { timeout: 60_000 }, async () => {
const opened = await openDetail(browser, DETAIL.collection);
try {
const page = opened.page;
assert.equal(await page.locator('[data-follow-feed]').count(), 0, '深链进详情时挂了列表岛');
assert.equal((await page.locator('#stage [data-follow-detail-name]').innerText()).trim(), '合集主条目 5101');
assert.equal(await page.evaluate(() => document.activeElement?.id), 'closeStage');
assert.deepEqual(withoutPlayer(opened.problems), []);
// 刷新这一页：等的那一下只有浮窗里的骨架，页面里不先铺一份不在浮窗里的。
await page.addInitScript(() => {
const seen = { outside: false };
Object.assign(window, { detailSkeletonSeen: seen });
new MutationObserver(() => {
for (const one of document.querySelectorAll('[data-skeleton="detail"]')) if (!one.closest('#stage')) seen.outside = true;
}).observe(document, { childList: true, subtree: true });
});
let releaseItem = () => {};
const itemWait = new Promise<void>((resolve) => { releaseItem = resolve; });
await page.route((url) => url.pathname === '/api/follow' && url.searchParams.has('item'), async (route) => {
await itemWait;
await route.fallback();
});
try {
await page.reload({ waitUntil: 'load' });
const media = page.locator('#stage [data-skeleton="detail"] [data-stage-media]');
await media.waitFor();
const box = await media.boundingBox();
assert.ok(box && box.height > 120, `详情等待画面高度不足：${JSON.stringify(box)}`);
assert.equal(await page.locator('#stage [data-skeleton="detail"] [data-stage-side-content]')
.evaluate((node) => getComputedStyle(node).rowGap), '12px');
assert.equal(await page.locator('#stage [data-skeleton="detail"] [data-stage-side-content]')
.evaluate((node) => getComputedStyle(node).scrollbarWidth), 'none');
} finally {
releaseItem();
}
await page.locator(DETAIL_READY).waitFor({ timeout: 15_000 });
assert.equal(await page.evaluate(() => (window as unknown as { detailSkeletonSeen: { outside: boolean } })
.detailSkeletonSeen.outside), false, '刷新时浮窗外先画了一份详情骨架');
} finally {
await opened.close();
}
});
it('视频：舞台在媒体框里挂上 Video.js，氛围光画布与统计角标插进同一个媒体框；换一条与后退都原地换、只剩一个播放器', { timeout: 60_000 }, async () => {
const opened = await openDetail(browser, DETAIL.collection);
try {
const page = opened.page;
const frame = page.locator('#stage [data-follow-detail-media="video"]');
// 控制条在用户一段时间不动后会隐去（Video.js 的 userActive），只等它挂上，不等可见。
await frame.locator('.video-js .vjs-control-bar').waitFor({ state: 'attached' });
assert.equal(await frame.locator('[data-ambient-canvas]').count(), 1);
assert.equal(await frame.locator('.video-js video.vjs-tech').count(), 1, '媒体框里的活动 video 不止一个');
await watchStage(page);
const seen = watchFollowRequests(page);
await page.locator('[data-follow-queue-item="5102"]').click();
await pathIs(page, '/posts/5102');
await page.locator('#stage [data-follow-queue-item="5102"][aria-current="true"]').waitFor();
await page.locator('#stage .video-js .vjs-control-bar').waitFor({ state: 'attached' });
assert.equal(await page.locator('#stage .video-js').count(), 1, '换一条之后旧播放器没拆');
assert.equal(await page.locator('#stage [data-ambient-canvas]').count(), 1);
assert.deepEqual(await stageKept(page), { same: true, skeleton: false, focused: true }, '换一条重开了浮窗');
await page.goBack();
await pathIs(page, '/posts/5101');
await page.locator('#stage [data-follow-queue-item="5101"][aria-current="true"]').waitFor();
await page.locator('#stage .video-js .vjs-control-bar').waitFor({ state: 'attached' });
assert.equal(await page.locator('#stage .video-js').count(), 1, '后退之后旧播放器没拆');
assert.deepEqual(await stageKept(page), { same: true, skeleton: false, focused: true }, '后退到上一条重开了浮窗');
assert.deepEqual(seen.item, [], '组里的另一条和取过的那一条又单条取了一次，点下去要等一个来回才换');
assert.equal(await page.evaluate(() => (window as unknown as { stageWatch: { rawControls: boolean } }).stageWatch.rawControls),
false, 'Peach 控件装上之前露出了 Video.js 原装的控制条或大播放键');
await page.locator('#closeStage').click();
await pathIs(page, '/follow');
await page.locator('[data-follow-list] > [data-follow-item]').first().waitFor({ timeout: 15_000 });
assert.equal(await page.locator('.video-js').count(), 0, '关掉详情后播放器还挂着');
assert.deepEqual(withoutPlayer(opened.problems), []);
} finally {
await opened.close();
}
});
it('多图轮播：圆点报当前那张，箭头与圆点换图不换地址', { timeout: 60_000 }, async () => {
const opened = await openDetail(browser, DETAIL.gallery);
try {
const page = opened.page;
const current = () => page.locator('#stage [data-follow-image-dots] button').evaluateAll((dots) =>
dots.map((dot) => dot.getAttribute('aria-current')));
const poster = page.locator('#stage [data-follow-detail-poster]');
assert.deepEqual(await current(), ['true', 'false', 'false']);
assert.equal(await poster.getAttribute('src'), '/follow-stream?id=5001&media=0');
await page.locator('#stage [data-follow-image-arrow="next"]').click();
await page.waitForFunction(() => document.querySelector('#stage [data-follow-detail-poster]')
?.getAttribute('src') === '/follow-stream?id=5001&media=1');
assert.deepEqual(await current(), ['false', 'true', 'false']);
await page.locator('#stage [data-follow-image-arrow="prev"]').click();
await page.locator('#stage [data-follow-image-dots] button').nth(2).click();
await page.waitForFunction(() => document.querySelector('#stage [data-follow-detail-poster]')
?.getAttribute('src') === '/follow-stream?id=5001&media=2');
assert.deepEqual(await current(), ['false', 'false', 'true']);
assert.equal(new URL(page.url()).pathname, '/posts/5001');
assert.deepEqual(opened.problems, []);
} finally {
await opened.close();
}
});
it('合集队列：只列可播视频、新到旧，当前那条按下；另一站那条的出处是站点图标', { timeout: 60_000 }, async () => {
const opened = await openDetail(browser, DETAIL.collection);
try {
const page = opened.page;
const queue = page.locator('#stage [data-follow-queue][data-queue-kind="collection"]');
const rows = await queue.locator('[data-follow-queue-item]').evaluateAll((buttons) => buttons.map((button) => ({
id: Number((button as HTMLElement).dataset.followQueueItem), current: button.getAttribute('aria-current'),
icon: button.querySelector('[data-follow-queue-meta] img')?.getAttribute('alt') ?? null,
})));
assert.deepEqual(rows, [
{ id: 5101, current: 'true', icon: null },
{ id: 5102, current: 'false', icon: null },
{ id: 5103, current: 'false', icon: 'Rule34.xxx' },
]);
assert.match(await queue.locator('[data-mix-queue-head]').innerText(), /视频合集[\s\S]*3 个视频/);
assert.equal(await queue.locator('[data-queue-close]').isVisible(), false, '并排布局的队列头不该有关闭键');
/* 桌面上媒体在左、详情在右，底部队列横向排开。 */
const grid = await page.evaluate(() => {
const box = (selector: string) => document.querySelector(selector)!.getBoundingClientRect();
const media = box('#stage [data-stage-media]'), side = box('#stage [data-follow-detail-side]');
const queue = box('#stage [data-follow-queue]');
return { sideRight: side.left >= media.right - 1, queueBelow: queue.top >= Math.max(media.bottom, side.bottom) - 1,
flow: getComputedStyle(document.querySelector('#stage [data-follow-queue] [data-mix-list]')!).gridAutoFlow };
});
assert.deepEqual(grid, { sideRight: true, queueBelow: true, flow: 'column' });
assert.deepEqual(withoutPlayer(opened.problems), []);
} finally {
await opened.close();
}
});
it('多媒体队列：一帖里的图与视频各占一行，点图换成图片不换地址', { timeout: 60_000 }, async () => {
const opened = await openDetail(browser, DETAIL.media);
try {
const page = opened.page;
const queue = page.locator('#stage [data-follow-queue][data-queue-kind="media"]');
const kinds = await queue.locator('[data-follow-media-item]').evaluateAll((buttons) =>
buttons.map((button) => [(button as HTMLElement).dataset.mediaKind, button.getAttribute('aria-current')]));
assert.deepEqual(kinds, [['video', 'true'], ['image', 'false'], ['video', 'false']]);
await queue.locator('[data-follow-media-item="1"]').click();
await page.locator('#stage [data-follow-detail-media="image"] [data-follow-detail-poster]').waitFor();
assert.equal(await queue.locator('[data-follow-media-item="1"]').getAttribute('aria-current'), 'true');
assert.equal(await page.locator('#stage .video-js').count(), 0, '换成图片后播放器没拆');
assert.equal(new URL(page.url()).pathname, '/posts/5201');
// 当前是图，操作条里多一枚「隐藏这张图」。
assert.equal(await page.locator('#stage [data-follow-media-hide="1"]').count(), 1);
assert.deepEqual(withoutPlayer(opened.problems), []);
} finally {
await opened.close();
}
});
it('保存与状态：写进桩、键态跟着变；标记已看的回执能撤销，撤销后键态回原样', { timeout: 60_000 }, async () => {
const opened = await openDetail(browser, DETAIL.gallery);
try {
const page = opened.page;
const seen = page.locator('#stage [data-follow-detail-status="seen"]');
assert.equal(await seen.getAttribute('aria-pressed'), 'false');
await seen.click();
await page.locator('#stage [data-follow-detail-status="seen"][aria-pressed="true"]').waitFor();
assert.equal(await page.locator('#stage [data-follow-detail-status="new"]').count(), 1, '已看之后没有「恢复未看」');
// 回执栈在 body 下，舞台是模态 dialog，外面整页惰性，鼠标点不到撤销键；这里量的是撤销本身。
await page.locator('#toasts').getByRole('button', { name: '撤销' }).dispatchEvent('click');
await page.locator('#stage [data-follow-detail-status="seen"][aria-pressed="false"]').waitFor();
await page.locator('#stage [data-follow-detail-save]').click();
await page.locator('#stage [data-follow-detail-save][aria-label="已保存"]').waitFor();
assert.deepEqual(opened.stub.writes, [
{ url: '/api/follow/status', body: { item: 5001, to: 'seen' } },
{ url: '/api/follow/status', body: { item: 5001, to: 'new' } },
{ url: '/api/follow/save', body: { item: 5001 } },
]);
assert.deepEqual(opened.problems, []);
} finally {
await opened.close();
}
});
for (const viewport of VIEWPORTS) it(`${viewport.name}：二十一张图的圆点可滚动并跟随当前图片，地址保持当前帖子`, { timeout: 60_000 }, async () => {
const opened = await openDetail(browser, DETAIL.largeGallery, viewport);
try {
const page = opened.page;
const poster = page.locator('#stage [data-follow-detail-poster]');
const dots = page.locator('#stage [data-follow-image-dots]');
const thumbnails = page.locator('#stage [data-media-thumbnails]');
assert.equal(await thumbnails.locator('button').count(), 21);
await thumbnails.locator('img').first().waitFor({ state: 'visible' });
const thumbnailBox = await thumbnails.boundingBox(), posterBox = await poster.boundingBox();
assert.ok(thumbnailBox && posterBox && thumbnailBox.y >= posterBox.y + posterBox.height, '小图位于主图下方');
assert.equal(await dots.locator('button').count(), 21);
assert.ok(await dots.evaluate(node => node.scrollWidth > node.clientWidth), '圆点超出时在条内滚动');
assert.ok(await dots.evaluate(node => {
const frame = node.closest('[data-media-indicator]');
if (!frame) return false;
const style = getComputedStyle(frame);
return style.borderTopWidth === '0px' && style.backgroundColor === 'rgba(0, 0, 0, 0.5)'
&& style.borderRadius === getComputedStyle(document.documentElement).getPropertyValue('--pill-radius').trim();
}), 'indicator 使用关注详情的半透明胶囊底衬');
assert.equal(await dots.getAttribute('data-overflow-left'), 'false');
assert.equal(await dots.getAttribute('data-overflow-right'), 'true');
assert.ok(await dots.evaluate(node => getComputedStyle(node).maskImage.includes('linear-gradient')), '溢出端复用横向渐隐');
await dots.hover();
await page.mouse.wheel(0, 100);
await page.waitForFunction(() => {
const strip = document.querySelector('[data-follow-image-dots]');
return (strip?.scrollLeft || 0) > 1 && strip?.getAttribute('data-overflow-left') === 'true';
});
assert.equal(await dots.getAttribute('data-overflow-left'), 'true');
for (const [key, index] of [['ArrowRight', 1], ['ArrowLeft', 0], ['ArrowLeft', 20]] as const) {
await page.keyboard.press(key);
await page.waitForFunction((wanted) => document.querySelector('#stage [data-follow-detail-poster]')
?.getAttribute('src') === wanted, `/follow-stream?id=5002&media=${index}`);
assert.equal(await poster.getAttribute('src'), `/follow-stream?id=5002&media=${index}`);
const selected = dots.locator('[aria-current="true"]');
assert.equal(await selected.getAttribute('data-follow-image-item'), String(index));
assert.ok(await selected.evaluate(node => {
const item = node.getBoundingClientRect(), strip = node.parentElement!.getBoundingClientRect();
return item.left >= strip.left && item.right <= strip.right;
}), '当前圆点完整可见');
assert.ok(await thumbnails.locator('[aria-current="true"]').evaluate(node => {
const item = node.getBoundingClientRect(), strip = node.parentElement!.getBoundingClientRect();
return item.left >= strip.left && item.right <= strip.right;
}), '当前小图完整可见');
if (index === 20) assert.equal(await dots.getAttribute('data-overflow-right'), 'false');
}
await page.keyboard.press('ArrowRight');
await dots.locator('[data-follow-image-item="0"][aria-current="true"]').waitFor();
assert.ok(await dots.evaluate(node => node.scrollLeft < 1), '循环回第一张时圆点回到起点');
const geometry = await layout(page);
assert.ok(geometry.scrollWidth <= geometry.viewportWidth + 1);
assert.equal(new URL(page.url()).pathname, '/posts/5002');
assert.deepEqual(opened.problems, []);
} finally {
await opened.close();
}
});
it('隐藏这张图退到恢复带，从恢复带点回来又回到轮播', { timeout: 60_000 }, async () => {
const opened = await openDetail(browser, DETAIL.hidden);
try {
const page = opened.page;
const restores = () => page.locator('#stage [data-follow-media-restore]').evaluateAll((buttons) =>
buttons.map((button) => Number((button as HTMLElement).dataset.followMediaRestore)));
const dots = () => page.locator('#stage [data-follow-image-dots] button').count();
assert.deepEqual(await restores(), [3, 4]);
assert.equal(await dots(), 3);
await page.locator('#stage [data-follow-media-hide="0"]').click();
await page.waitForFunction(() => document.querySelectorAll('#stage [data-follow-media-restore]').length === 3);
assert.deepEqual(await restores(), [0, 3, 4]);
assert.equal(await dots(), 2);
assert.match(await page.locator('#stage [data-follow-hidden-label]').innerText(), /已隐藏 3 张/);
await page.locator('#stage [data-follow-media-restore="0"]').click();
await page.waitForFunction(() => document.querySelectorAll('#stage [data-follow-media-restore]').length === 2);
assert.equal(await page.locator('#stage [data-follow-detail-poster]').getAttribute('src'),
'/follow-stream?id=5301&media=0', '恢复的那张没有回到舞台上');
assert.deepEqual(opened.stub.writes, [
{ url: '/api/follow/media/hide', body: { item: 5301, media: 0, hidden: true } },
{ url: '/api/follow/media/hide', body: { item: 5301, media: 0, hidden: false } },
]);
assert.deepEqual(opened.problems, []);
} finally {
await opened.close();
}
});
it('点详情里的标签回到带上这枚标签的列表', { timeout: 60_000 }, async () => {
const opened = await openDetail(browser, DETAIL.gallery);
try {
const page = opened.page;
const tag = page.locator('#stage [data-follow-tag]').first();
const name = (await tag.getAttribute('data-follow-tag'))!;
await tag.click();
await page.waitForFunction((wanted) => location.pathname === '/follow'
&& new URLSearchParams(location.search).get('tag') === wanted, name, { timeout: 10_000 });
await page.locator('[data-follow-list] > [data-follow-item]').first().waitFor({ timeout: 15_000 });
assert.equal(await page.locator('#stage[open]').count(), 0);
assert.deepEqual(opened.problems, []);
} finally {
await opened.close();
}
});
it('手机 390：详情不横向溢出，操作条按内容定宽，合集队列排在侧栏下面', { timeout: 60_000 }, async () => {
const opened = await openDetail(browser, DETAIL.collection, MOBILE);
try {
const page = opened.page;
assert.deepEqual((await layout(page)).offenders, [], '详情里有元素越出视口右边');
const boxes = await page.evaluate(() => {
const box = (selector: string) => document.querySelector(selector)!.getBoundingClientRect();
const actions = box('#stage [data-follow-detail-actions]');
const buttons = [...document.querySelectorAll('#stage [data-follow-detail-actions] > *')]
.map((node) => node.getBoundingClientRect());
return { actions: actions.width, used: buttons.at(-1)!.right - buttons[0]!.left,
side: box('#stage [data-follow-detail-side]').bottom, queue: box('#stage [data-follow-queue]').top };
});
assert.ok(Math.abs(boxes.actions - boxes.used) <= 1, `操作条被撑宽了：${JSON.stringify(boxes)}`);
assert.ok(boxes.queue >= boxes.side - 1, `合集队列不在侧栏下面：${JSON.stringify(boxes)}`);
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 openDetail(browser, DETAIL.bare, viewport);
try {
const { page } = opened;
const placeholder = page.locator('#stage [data-follow-detail-placeholder]');
await placeholder.waitFor();
const box = await placeholder.evaluate(node => {
const frame = node.closest('[data-stage-media]')!.getBoundingClientRect();
const rect = node.getBoundingClientRect();
return { width: rect.width, height: rect.height, frameWidth: frame.width, frameHeight: frame.height };
});
assert.ok(Math.abs(box.width - box.frameWidth) < 1, `空态占满媒体宽度：${JSON.stringify(box)}`);
if (viewport.mobile) assert.ok(Math.abs(box.width / box.height - 16 / 9) < .02, `空态按画框比例留高：${JSON.stringify(box)}`);
else assert.ok(box.height >= 180, `桌面空态完整显示图标与说明：${JSON.stringify(box)}`);
assert.ok(box.frameHeight >= box.height - 1, '媒体框容纳完整空态');
assert.equal(await page.locator('#closeStage').isVisible(), true);
assert.deepEqual((await layout(page)).offenders, []);
assert.deepEqual(withoutPlayer(opened.problems), []);
} finally { await opened.close(); }
});
it(`长摘要收在八行内、不被侧栏压扁，长串标题与媒体报错不撑宽侧栏（${viewport.name}）`, { timeout: 60_000 }, async () => {
const opened = await openDetail(browser, DETAIL.long, viewport);
try {
const page = opened.page;
const measure = () => page.evaluate(() => {
const side = document.querySelector('#stage [data-stage-side-content]')!;
const summary = document.querySelector<HTMLElement>('#stage [data-follow-detail-summary]')!;
const lineHeight = parseFloat(getComputedStyle(summary).lineHeight);
const right = side.getBoundingClientRect().right;
const inside = ['[data-follow-detail-name]', '[data-follow-detail-summary]', '[data-follow-media-issue]']
.map((selector) => document.querySelector(`#stage ${selector}`)!.getBoundingClientRect().right)
.every((edge) => edge <= right + 1);
return { lines: summary.clientHeight / lineHeight, inside, scroll: side.scrollWidth, width: side.clientWidth };
});
const folded = await measure();
assert.ok(folded.lines >= 7.5 && folded.lines <= 8.5, `收起的摘要不是八行：${JSON.stringify(folded)}`);
assert.ok(folded.inside && folded.scroll <= folded.width, `侧栏被撑宽：${JSON.stringify(folded)}`);
const toggle = page.locator('#stage [data-follow-summary-toggle]');
assert.equal((await toggle.innerText()).trim(), '展开');
await toggle.click();
const open = await measure();
assert.ok(open.lines > 20, `展开后摘要没有全部露出：${JSON.stringify(open)}`);
assert.ok(open.inside && open.scroll <= open.width, `展开后侧栏被撑宽：${JSON.stringify(open)}`);
assert.deepEqual((await layout(page)).offenders, [], '详情里有元素越出视口右边');
assert.deepEqual(withoutPlayer(opened.problems), []);
} finally {
await opened.close();
}
});
}
});