frontend/e2e/configuration-skeleton.test.ts
Rama master · réplica de lectura del repositorio original.
import assert from 'node:assert/strict';
import { after, before, describe, it } from 'node:test';
import type { Browser, Page } from 'playwright-core';
import { configurationBody, expectBody, launch, layout, settle, visit, VIEWPORTS } from './harness.ts';
const measure = (page: Page, names = ['媒体库与目录']) => page.locator('.ui-configpage').evaluate((root, names) => {
const rect = (el: Element) => {
const r = el.getBoundingClientRect();
return { x: r.x, y: r.y, width: r.width, height: r.height };
};
const sections = names.map(name => root.querySelector(`[aria-label="${name}"]`)!);
return {
nav: rect(root.querySelector('.ui-board-local-nav')!),
selected: root.querySelector('.ui-board-local-nav [aria-selected="true"]')?.textContent,
sections: sections.map(section => ({
label: rect(section.firstElementChild!),
card: rect(section.lastElementChild!),
// 保存键在卡片页脚，取分区里最后一个按钮：Select 的触发器也是 button。
save: rect([...section.querySelectorAll('button')].at(-1)!),
})),
};
}, names);
async function openEditableConfiguration(browser: Browser, viewport: (typeof VIEWPORTS)[number]) {
const opened = await visit(browser, '/', viewport);
try {
// 每例在导航前读取真实配置快照，页面等待与接管由响应门闩控制。
const response = await opened.page.request.get(new URL('/api/configuration', opened.page.url()).href);
assert.equal(response.status(), 200);
const configuration = await response.json();
await opened.page.route('**/api/configuration', async route => {
if (route.request().method() !== 'GET') return route.continue();
await route.fulfill({ json: { ...configuration, editable: true } });
});
await opened.page.goto(new URL('/settings/library', opened.page.url()).href, { waitUntil: 'load' });
return { ...opened, configuration };
} catch (error) {
await opened.close();
throw error;
}
}
describe('配置页等待态', () => {
let browser: Browser;
before(async () => { browser = await launch() });
after(async () => { await browser?.close() });
for (const viewport of VIEWPORTS) {
it(`${viewport.name} 的分类导航适配方向并保留未保存输入`, { timeout: 60_000 }, async () => {
const opened = await openEditableConfiguration(browser, viewport);
try {
const { page } = opened;
await expectBody(page, '/settings/library', configurationBody(page));
await settle(page);
const nav = page.getByRole('tablist', { name: '配置分区' });
assert.equal(await nav.getAttribute('aria-orientation'), viewport.mobile ? 'horizontal' : 'vertical');
const geometry = await measure(page);
assert.ok(viewport.mobile
? geometry.nav.y + geometry.nav.height <= geometry.sections[0].label.y
: geometry.nav.x + geometry.nav.width <= geometry.sections[0].label.x);
await nav.getByRole('tab', { name: '来源与订阅', exact: true }).click();
// 切到别的页签后这一栏所在的面板隐藏，值仍要留在原处。
const input = page.getByRole('textbox', { name: 'JavDB 地址', exact: true, includeHidden: true });
await input.fill('example.invalid');
const general = nav.getByRole('tab', { name: '媒体库与入库', exact: true });
await general.click();
await page.keyboard.press('ArrowRight');
assert.equal(await nav.getByRole('tab', { name: '来源与订阅', exact: true }).getAttribute('aria-selected'), 'true');
await page.keyboard.press('End');
assert.equal(await nav.getByRole('tab', { name: '系统诊断' }).getAttribute('aria-selected'), 'true');
await page.keyboard.press('Home');
assert.equal(await input.inputValue(), 'example.invalid');
const bounds = await layout(page);
assert.ok(bounds.scrollWidth <= bounds.viewportWidth);
assert.deepEqual(bounds.offenders, []);
await page.setViewportSize({ width: viewport.mobile ? 1280 : 390, height: 844 });
await page.waitForFunction(expected => document.querySelector('[role="tablist"][aria-label="配置分区"]')?.getAttribute('aria-orientation') === expected,
viewport.mobile ? 'vertical' : 'horizontal');
assert.equal(await general.getAttribute('aria-selected'), 'true');
assert.equal(await input.inputValue(), 'example.invalid');
assert.deepEqual(opened.problems, []);
} finally { await opened.close() }
});
it(`${viewport.name} 的分类导航与媒体标题在接管时保持位置`, { timeout: 60_000 }, async () => {
const opened = await openEditableConfiguration(browser, viewport);
let release = () => {};
try {
await expectBody(opened.page, '/settings/library', configurationBody(opened.page));
await settle(opened.page);
const pending = new Promise<void>(resolve => { release = resolve });
await opened.page.route('**/api/configuration', async route => {
if (route.request().method() !== 'GET') return route.continue();
await pending;
await route.fulfill({ json: { ...opened.configuration, editable: true, startup: {
available: true, enabled: true, silent: true, desktop: true, desktop_message: '', message: '',
}, automatic_updates: { mode: 'check', interval_hours: 24, available: true, download_available: false } } });
});
await opened.page.reload({ waitUntil: 'load' });
await opened.page.locator('[data-skeleton="board/settings/library"]').waitFor();
const skeleton = await measure(opened.page);
const waitingLayout = await layout(opened.page);
release();
await expectBody(opened.page, '/settings/library', configurationBody(opened.page));
await settle(opened.page);
const live = await measure(opened.page);
assert.equal(skeleton.selected, live.selected);
const pairs = [[skeleton.nav, live.nav], ...skeleton.sections.map((section, i) =>
[section.label, live.sections[i].label])];
for (const [a, b] of pairs) for (const key of ['x', 'y', 'width', 'height'] as const) {
assert.ok(Math.abs(a[key] - b[key]) <= 1, `${key}: skeleton=${a[key]}, content=${b[key]}`);
}
assert.ok(waitingLayout.scrollWidth <= waitingLayout.viewportWidth);
assert.deepEqual(waitingLayout.offenders, []);
assert.deepEqual(opened.problems, []);
} finally {
release();
await opened.close();
}
});
}
/* 来源与订阅有四块另取数据的分区：整页骨架、分区骨架与读回后的终态画的是同一套结构，来源凭据的
站点行取自静态登记，行数与终态一致。各块的位置与高度允许细小出入，不允许超过一行（40px）的位移。
本机没有记录（冷启动）与正常再开两种都测：随配置变化的部分在冷启动时按最小结构画。 */
for (const cold of [true, false]) it(`来源与订阅的整页骨架、分区骨架与读回的分区结构一致、位移不超过一行（${cold ? '本机没有记录' : '再次打开'}）`, { timeout: 90_000 }, async () => {
const opened = await visit(browser, '/settings/subscriptions', VIEWPORTS[0]);
let release = () => {};
let mount = () => {};
try {
const { page } = opened;
const names = ['来源凭据', '关注采集', '资源搜索', '作品资料站点'];
/* 骨架淡出时新旧两份 `.ui-configpage` 可能同时在：取最后挂上的那一份。 */
const sections = () => page.locator('.ui-configpage').last().evaluate((root, names) => names.map((name) => {
const section = root.querySelector(`[aria-label="${name}"]`);
if (!section) return null;
const r = section.getBoundingClientRect();
return { name, y: r.y, height: r.height, sites: section.querySelectorAll('b').length };
}), names);
const done = () => page.waitForFunction(() => document.querySelector('.ui-configpage section[aria-label="来源凭据"]')
&& !document.querySelector('.ui-configpage [data-skeleton]'), null, { timeout: 30_000 });
await done();
await settle(page);
if (cold) await page.evaluate(() => localStorage.removeItem('peach.configuration.shape.v1'));
/* 两道门：配置读回之前是整页骨架；配置放行、分区自己的数据还压着时是分区骨架。 */
const configuration = new Promise<void>((resolve) => { mount = resolve });
const held = new Promise<void>((resolve) => { release = resolve });
await page.route('**/api/configuration', async (route) => { await configuration; await route.continue() });
for (const url of ['**/api/follow/credentials', '**/api/configuration/indexers', '**/api/follow/schedule', '**/api/feeds/schedule']) {
await page.route(url, async (route) => { await held; await route.continue() });
}
await page.reload({ waitUntil: 'commit' });
await page.locator('[data-skeleton="board/settings/subscriptions"]').waitFor();
const pageSkeleton = await sections();
mount();
await page.getByLabel('正在读取来源凭据', { exact: true }).waitFor();
const sectionSkeleton = await sections();
release();
await done();
await settle(page);
const live = await sections();
for (const [phase, shape] of [['整页骨架', pageSkeleton], ['分区骨架', sectionSkeleton]] as const) {
shape.forEach((section, i) => {
const end = live[i]!;
assert.ok(section && Math.abs(section.y - end.y) <= 40 && Math.abs(section.height - end.height) <= 40,
`${phase}「${names[i]}」${JSON.stringify(section)}，读回后 ${JSON.stringify(end)}`);
});
assert.equal(shape[0]!.sites, live[0]!.sites, `${phase}的来源凭据站点行数`);
}
assert.deepEqual(opened.problems, []);
} finally {
mount();
release();
await opened.close();
}
});
for (const path of ['/settings/library', '/review']) {
it(`${path} 的明暗主题使用透明容器与灰色 Pills 选中底色`, { timeout: 60_000 }, async () => {
const opened = await visit(browser, path, VIEWPORTS[0]);
try {
const { page } = opened;
const nav = page.locator('#stats [data-section-nav]:not([data-skeleton] *)');
await nav.locator('[aria-selected=true]').waitFor();
await settle(page);
if (path === '/review') {
assert.equal(await nav.getByRole('heading', { name: '复核分类' }).count(), 1);
assert.equal(await nav.getByRole('tablist').getAttribute('aria-orientation'), 'vertical');
}
for (const dark of [false, true]) {
await page.evaluate(dark => {
document.documentElement.dataset.theme = dark ? 'dark' : 'light';
document.documentElement.classList.toggle('dark', dark);
}, dark);
const colors = await nav.evaluate(node => {
const selected = getComputedStyle(node.querySelector('[aria-selected=true]')!);
const selection = getComputedStyle(node.querySelector('[data-pill-thumb]')!);
const inactive = getComputedStyle(node.querySelector('[aria-selected=false]')!);
return {
surface: getComputedStyle(node).backgroundColor,
selected: selection.backgroundColor,
border: selected.borderWidth,
radius: selection.borderRadius,
text: selected.color,
inactive: inactive.color,
inactiveBackground: inactive.backgroundColor,
};
});
assert.equal(colors.surface, 'rgba(0, 0, 0, 0)');
assert.notEqual(colors.selected, 'rgba(0, 0, 0, 0)');
assert.equal(colors.border, '0px');
assert.notEqual(colors.radius, '0px');
assert.notEqual(colors.text, colors.inactive);
assert.equal(colors.inactiveBackground, 'rgba(0, 0, 0, 0)');
}
assert.deepEqual(opened.problems, []);
} finally { await opened.close() }
});
}
});