浅念
383 lines
18 KiB
TypeScript
383 lines
18 KiB
TypeScript
import { expect, test, type Page } from '@playwright/test';
|
||
import {
|
||
cleanupSeededAlbums,
|
||
createEmbedSlot,
|
||
flushOutbox,
|
||
flushSync,
|
||
makePublicToken,
|
||
seedAlbum,
|
||
seedPhoto,
|
||
updateEmbedSlot,
|
||
} from './helpers';
|
||
|
||
// UI-01 Task 6 嵌入轮播组件 Playwright（真实后端：cn 8080 + ov 8081 + viewer dev
|
||
// 5175 由 playwright.config webServer 拉起或复用）。宿主夹具页
|
||
// /__test__/embed-host.html（viewer publicDir 静态资产，仅测试用）引入真实
|
||
// loader.js（/embed/v1/loader.js）→ iframe 载 /embed/{slot} → 走 ov 公开端点。
|
||
// 展示位种子经 cn admin API 真实路径（seedAdmin + POST/PATCH），slot.updated
|
||
// 事件以 flushOutbox 排空（不随相册 bootstrap 走，见 helpers 注）。
|
||
// 断言锚点：loader 侧 wrapper（iframe 父 div，inline style）/ 把手（div[role=button]）；
|
||
// iframe 内 viewer 侧 CSS 类名（.embed-carousel/.embed-stage/.embed-indicator 等，
|
||
// 见 src/pages/embed/*）。CSP：夹具页不设（宿主真实 CSP 要求见
|
||
// packages/embed-loader/README-embed.md，此仅文档化）。
|
||
|
||
const MINUTE = 60_000;
|
||
|
||
interface SeededFeed {
|
||
slotToken: string;
|
||
slotId: string;
|
||
albumToken: string;
|
||
photoIds: string[];
|
||
}
|
||
|
||
/** 相册（zh 默认 + en 双语）+ 3 张错峰发布照片 + 展示位绑定 + ov 投影。 */
|
||
async function seedFeed(alias: string): Promise<SeededFeed> {
|
||
const album = await seedAlbum({
|
||
alias,
|
||
defaultLocale: 'zh-CN',
|
||
translations: [
|
||
{ locale: 'zh-CN', title: `${alias} 中文相册`, description: '嵌入轮播' },
|
||
{ locale: 'en', title: `${alias} EN Album`, description: 'embed feed' },
|
||
],
|
||
});
|
||
const base = Date.now() - 10 * MINUTE;
|
||
const photoIds = [
|
||
await seedPhoto(album.id, `${alias}-p1`, { publishedAt: new Date(base - 2 * MINUTE) }),
|
||
await seedPhoto(album.id, `${alias}-p2`, { publishedAt: new Date(base - MINUTE) }),
|
||
await seedPhoto(album.id, `${alias}-p3`, { publishedAt: new Date(base) }),
|
||
];
|
||
await flushSync(album.id);
|
||
const slot = await createEmbedSlot(`viewer-e2e-${alias}`);
|
||
await updateEmbedSlot(slot.id, { albumId: album.id });
|
||
await flushOutbox();
|
||
return { slotToken: slot.token, slotId: slot.id, albumToken: album.publicToken, photoIds };
|
||
}
|
||
|
||
/** loader wrapper（iframe 父 div）inline 样式属性值（''=未置）。 */
|
||
function wrapperStyle(page: Page, prop: string): Promise<string> {
|
||
return page.locator('iframe').evaluate(
|
||
(frame, p) => ((frame.parentElement as HTMLElement).style as unknown as Record<string, string>)[p],
|
||
prop,
|
||
);
|
||
}
|
||
|
||
async function activeSrc(page: Page): Promise<string | null> {
|
||
return page.frameLocator('iframe').locator('.embed-photo.active img').getAttribute('src');
|
||
}
|
||
|
||
test.describe.serial('embed carousel widget (UI-01 Task 6)', () => {
|
||
test.afterAll(async () => {
|
||
await cleanupSeededAlbums();
|
||
});
|
||
|
||
test('host page shows carousel, rotates photos and opens the viewer photo in a new tab', async ({ page }) => {
|
||
const feed = await seedFeed('main');
|
||
|
||
await page.goto(`/__test__/embed-host.html?slot=${feed.slotToken}&interval=3000`);
|
||
const frame = page.frameLocator('iframe');
|
||
|
||
// lang=auto → 相册 defaultLocale（zh-CN）标题；页码「当前序号 / 队列数」。
|
||
await expect(frame.locator('.embed-title')).toHaveText('main 中文相册');
|
||
await expect(frame.locator('.embed-photo.active img')).toBeVisible();
|
||
await expect(frame.locator('.embed-indicator')).toHaveText('01 / 03');
|
||
|
||
// intervalMs 切换：当前展示照片变化（首个为 publishedAt 最新 p3）。
|
||
const firstSrc = await activeSrc(page);
|
||
await expect.poll(() => activeSrc(page), { timeout: 10_000 }).not.toBe(firstSrc);
|
||
|
||
// 点击照片 → 新标签打开 viewer 单图深链（noopener；lang 跟随 resolvedLocale）。
|
||
const popupPromise = page.context().waitForEvent('page');
|
||
await frame.locator('.embed-photo.active').click();
|
||
const popup = await popupPromise;
|
||
await expect(popup).toHaveURL(new RegExp(`/a/${feed.albumToken}/p/`));
|
||
await expect(popup).toHaveURL(/lang=zh-CN/);
|
||
await popup.close();
|
||
});
|
||
|
||
// T15（A12）embed lang 参数两语言渲染断言之 en 侧（zh 侧由 lang=auto →
|
||
// defaultLocale 各用例覆盖）：loader data-lang=en → iframe 内英文标题，
|
||
// 深链 lang=en 跟随。
|
||
test('lang=en renders English copy in the iframe and passes en to the photo deep link', async ({ page }) => {
|
||
const feed = await seedFeed('langen');
|
||
|
||
await page.goto(`/__test__/embed-host.html?slot=${feed.slotToken}&lang=en`);
|
||
const frame = page.frameLocator('iframe');
|
||
await expect(frame.locator('.embed-title')).toHaveText('langen EN Album');
|
||
await expect(frame.locator('.embed-photo.active img')).toBeVisible();
|
||
|
||
// 点击 → 新标签深链携带 lang=en（resolvedLocale）。
|
||
const popupPromise = page.context().waitForEvent('page');
|
||
await frame.locator('.embed-photo.active').click();
|
||
const popup = await popupPromise;
|
||
await expect(popup).toHaveURL(new RegExp(`/a/${feed.albumToken}/p/`));
|
||
await expect(popup).toHaveURL(/lang=en/);
|
||
await popup.close();
|
||
});
|
||
|
||
test('collapse button hides the widget, persists after reload, and the handle expands it', async ({ page }) => {
|
||
const feed = await seedFeed('collapse');
|
||
|
||
await page.goto(`/__test__/embed-host.html?slot=${feed.slotToken}&interval=3000`);
|
||
const frame = page.frameLocator('iframe');
|
||
await expect(frame.locator('.embed-title')).toHaveText('collapse 中文相册');
|
||
|
||
// iframe 内 × → postMessage collapse → loader wrapper 高度 0 + 把手出现 + 会话记忆。
|
||
await frame.locator('.embed-close').click();
|
||
await expect.poll(() => wrapperStyle(page, 'height')).toBe('0px');
|
||
await expect(page.locator('div[role="button"]')).toBeVisible();
|
||
await expect
|
||
.poll(() => page.evaluate((slot) => sessionStorage.getItem(`pl-embed-collapsed:${slot}`), feed.slotToken))
|
||
.toBe('1');
|
||
|
||
// 刷新仍收起（会话内不反复弹出，需求 9）。
|
||
await page.reload();
|
||
await expect.poll(() => wrapperStyle(page, 'height')).toBe('0px');
|
||
await expect(page.locator('div[role="button"]')).toBeVisible();
|
||
|
||
// 把手点击 → loader 展开回记忆高度，并向 iframe 发 expand（恢复轮询）。
|
||
await page.locator('div[role="button"]').click();
|
||
await expect
|
||
.poll(async () => (await wrapperStyle(page, 'height')) !== '0px')
|
||
.toBe(true);
|
||
await expect(frame.locator('.embed-title')).toHaveText('collapse 中文相册');
|
||
});
|
||
|
||
test('narrow viewport starts collapsed and downgrades to sm size', async ({ page }) => {
|
||
const feed = await seedFeed('narrow');
|
||
|
||
await page.setViewportSize({ width: 375, height: 667 });
|
||
await page.goto(`/__test__/embed-host.html?slot=${feed.slotToken}`);
|
||
|
||
// <480px：强制 collapsedDefault + sm（280px 宽，计划评审缺口：移动端可用）。
|
||
await expect(page.locator('div[role="button"]')).toBeVisible();
|
||
await expect.poll(() => wrapperStyle(page, 'height')).toBe('0px');
|
||
await expect.poll(() => wrapperStyle(page, 'width')).toBe('280px');
|
||
|
||
// 把手展开可用（移动端不因默认收起而不可达）。
|
||
await page.locator('div[role="button"]').click();
|
||
await expect
|
||
.poll(async () => (await wrapperStyle(page, 'height')) !== '0px')
|
||
.toBe(true);
|
||
});
|
||
|
||
test('newly published photo appears within the poll window', async ({ page }) => {
|
||
const album = await seedAlbum({
|
||
alias: 'poll',
|
||
translations: [{ locale: 'zh-CN', title: '轮询增量相册' }],
|
||
});
|
||
await seedPhoto(album.id, 'poll-p1', { publishedAt: new Date(Date.now() - MINUTE) });
|
||
await flushSync(album.id);
|
||
const slot = await createEmbedSlot('viewer-e2e-poll');
|
||
await updateEmbedSlot(slot.id, { albumId: album.id });
|
||
await flushOutbox();
|
||
|
||
// ?poll=2000 → 夹具页向 iframe 注入 __embedPollMs（同源；轮询 2s）。
|
||
await page.goto(`/__test__/embed-host.html?slot=${slot.token}&poll=2000`);
|
||
const frame = page.frameLocator('iframe');
|
||
await expect(frame.locator('.embed-indicator')).toHaveText('01 / 01');
|
||
|
||
// 新照片发布（真实管线同步 ov，ETag 必变 → 200 增量）→ 追加队尾（A11 数据路径）；
|
||
// 页码分母即时反映队列长度（≠ 相册照片总数语义由组件单测覆盖）。
|
||
await seedPhoto(album.id, 'poll-p2', { publishedAt: new Date() });
|
||
await flushSync(album.id);
|
||
await expect
|
||
.poll(async () => (await frame.locator('.embed-indicator').textContent()) ?? '', { timeout: 20_000 })
|
||
.toMatch(/02$/);
|
||
});
|
||
|
||
test('rebinding to another album resets the feed (configVersion bump, A22)', async ({ page }) => {
|
||
const albumA = await seedAlbum({
|
||
alias: 'rebind-a',
|
||
translations: [{ locale: 'zh-CN', title: '换绑前相册' }],
|
||
});
|
||
await seedPhoto(albumA.id, 'rebind-a-p1', { publishedAt: new Date(Date.now() - 2 * MINUTE) });
|
||
await seedPhoto(albumA.id, 'rebind-a-p2', { publishedAt: new Date(Date.now() - MINUTE) });
|
||
const albumB = await seedAlbum({
|
||
alias: 'rebind-b',
|
||
translations: [{ locale: 'zh-CN', title: '换绑后相册' }],
|
||
});
|
||
await seedPhoto(albumB.id, 'rebind-b-p1', { publishedAt: new Date(Date.now()) });
|
||
await flushSync(albumA.id);
|
||
await flushSync(albumB.id);
|
||
const slot = await createEmbedSlot('viewer-e2e-rebind');
|
||
await updateEmbedSlot(slot.id, { albumId: albumA.id });
|
||
await flushOutbox();
|
||
|
||
await page.goto(`/__test__/embed-host.html?slot=${slot.token}&poll=2000`);
|
||
const frame = page.frameLocator('iframe');
|
||
await expect(frame.locator('.embed-title')).toHaveText('换绑前相册');
|
||
await expect(frame.locator('.embed-indicator')).toHaveText('01 / 02');
|
||
|
||
// 换绑：configVersion+1 → 轮询发现版本升 → 全量重置（新相册标题 + 新照片集，
|
||
// 旧相册照片不残留——A22「旧响应不串图」）。
|
||
await updateEmbedSlot(slot.id, { albumId: albumB.id });
|
||
await flushOutbox();
|
||
await expect
|
||
.poll(async () => (await frame.locator('.embed-title').textContent()) ?? '', { timeout: 20_000 })
|
||
.toBe('换绑后相册');
|
||
await expect
|
||
.poll(async () => (await frame.locator('.embed-indicator').textContent()) ?? '', { timeout: 20_000 })
|
||
.toBe('01 / 01');
|
||
});
|
||
|
||
test('album without photos shows the coming-soon card', async ({ page }) => {
|
||
const album = await seedAlbum({
|
||
alias: 'emptyslot',
|
||
translations: [{ locale: 'zh-CN', title: '空相册展示位' }],
|
||
});
|
||
await flushSync(album.id);
|
||
const slot = await createEmbedSlot('viewer-e2e-empty');
|
||
await updateEmbedSlot(slot.id, { albumId: album.id });
|
||
await flushOutbox();
|
||
|
||
await page.goto(`/__test__/embed-host.html?slot=${slot.token}`);
|
||
const frame = page.frameLocator('iframe');
|
||
await expect(frame.locator('.embed-empty')).toHaveText('照片即将上线');
|
||
await expect(frame.locator('.embed-heading')).toHaveText('活动照片');
|
||
});
|
||
|
||
test('ghost slot is destroyed with no residue and no error UI (404 anti-probe)', async ({ page }) => {
|
||
const ghost = makePublicToken();
|
||
await page.goto(`/__test__/embed-host.html?slot=${ghost}`);
|
||
|
||
// 404（不存在/停用/未绑定同码防探测）→ postMessage destroy：宿主移除 wrapper
|
||
// 与把手（不留无效按钮）、清会话键；iframe 内无错误 UI。
|
||
await expect
|
||
.poll(() => page.locator('iframe').count(), { timeout: 15_000 })
|
||
.toBe(0);
|
||
await expect(page.locator('div[role="button"]')).toHaveCount(0);
|
||
expect(await page.evaluate((slot) => sessionStorage.getItem(`pl-embed-collapsed:${slot}`), ghost)).toBeNull();
|
||
});
|
||
|
||
// ── 暂停条件全集（§5.2：自动暂停离开即恢复；手动暂停不自动恢复）──
|
||
|
||
test('footer pause button stops rotation; play resumes it', async ({ page }) => {
|
||
const feed = await seedFeed('pause');
|
||
await page.goto(`/__test__/embed-host.html?slot=${feed.slotToken}&interval=3000`);
|
||
const frame = page.frameLocator('iframe');
|
||
await expect(frame.locator('.embed-indicator')).toHaveText('01 / 03');
|
||
const srcBefore = await activeSrc(page);
|
||
|
||
await frame.getByRole('button', { name: '暂停轮播' }).click();
|
||
await page.waitForTimeout(4600);
|
||
await expect(frame.locator('.embed-photo.active img')).toHaveAttribute('src', srcBefore ?? '');
|
||
|
||
await frame.getByRole('button', { name: '播放轮播' }).click();
|
||
// 点击把键盘焦点留在按钮上——焦点暂停（§5.2）仍在生效属预期；点击宿主页
|
||
// 移出焦点后自动恢复轮换。
|
||
await page.mouse.click(5, 5);
|
||
await expect.poll(() => activeSrc(page), { timeout: 6_000 }).not.toBe(srcBefore);
|
||
});
|
||
|
||
test('pointer hover pauses rotation and leaving resumes it', async ({ page }) => {
|
||
const feed = await seedFeed('hover');
|
||
await page.goto(`/__test__/embed-host.html?slot=${feed.slotToken}&interval=3000`);
|
||
const frame = page.frameLocator('iframe');
|
||
await expect(frame.locator('.embed-indicator')).toHaveText('01 / 03');
|
||
const srcBefore = await activeSrc(page);
|
||
|
||
await frame.locator('.embed-carousel').hover();
|
||
await page.waitForTimeout(4600);
|
||
await expect(frame.locator('.embed-photo.active img')).toHaveAttribute('src', srcBefore ?? '');
|
||
|
||
await page.mouse.move(0, 0);
|
||
await expect.poll(() => activeSrc(page), { timeout: 6_000 }).not.toBe(srcBefore);
|
||
});
|
||
|
||
test('keyboard focus inside the component pauses rotation', async ({ page }) => {
|
||
const feed = await seedFeed('focus');
|
||
await page.goto(`/__test__/embed-host.html?slot=${feed.slotToken}&interval=3000`);
|
||
const frame = page.frameLocator('iframe');
|
||
await expect(frame.locator('.embed-indicator')).toHaveText('01 / 03');
|
||
const srcBefore = await activeSrc(page);
|
||
|
||
await frame.locator('.embed-photo-open').focus();
|
||
await page.waitForTimeout(4600);
|
||
await expect(frame.locator('.embed-photo.active img')).toHaveAttribute('src', srcBefore ?? '');
|
||
|
||
await frame.locator('.embed-photo-open').blur();
|
||
await expect.poll(() => activeSrc(page), { timeout: 6_000 }).not.toBe(srcBefore);
|
||
});
|
||
|
||
test('hidden page pauses rotation and returning resumes it', async ({ page }) => {
|
||
const feed = await seedFeed('hidden');
|
||
await page.goto(`/__test__/embed-host.html?slot=${feed.slotToken}&interval=3000`);
|
||
const frame = page.frameLocator('iframe');
|
||
await expect(frame.locator('.embed-indicator')).toHaveText('01 / 03');
|
||
const srcBefore = await activeSrc(page);
|
||
|
||
// jsdom 式覆写在真实 Chromium 同样可用：defineProperty 覆写 document.hidden
|
||
// 后派发 visibilitychange（iframe 内 useEmbedFeed + EmbedCarousel 双订阅）。
|
||
const child = page.frames().find((f) => f.url().includes('/embed/'));
|
||
expect(child).toBeDefined();
|
||
await child!.evaluate(() => {
|
||
Object.defineProperty(document, 'hidden', { configurable: true, get: () => true });
|
||
document.dispatchEvent(new Event('visibilitychange'));
|
||
});
|
||
await page.waitForTimeout(4600);
|
||
await expect(frame.locator('.embed-photo.active img')).toHaveAttribute('src', srcBefore ?? '');
|
||
|
||
await child!.evaluate(() => {
|
||
Object.defineProperty(document, 'hidden', { configurable: true, get: () => false });
|
||
document.dispatchEvent(new Event('visibilitychange'));
|
||
});
|
||
await expect.poll(() => activeSrc(page), { timeout: 6_000 }).not.toBe(srcBefore);
|
||
});
|
||
|
||
// ── reduced motion（§5.2：默认暂停 + 手动切换；无过渡）──
|
||
|
||
test('prefers-reduced-motion defaults to paused with manual prev/next', async ({ page }) => {
|
||
await page.emulateMedia({ reducedMotion: 'reduce' });
|
||
const feed = await seedFeed('motion');
|
||
await page.goto(`/__test__/embed-host.html?slot=${feed.slotToken}&interval=3000`);
|
||
const frame = page.frameLocator('iframe');
|
||
await expect(frame.locator('.embed-indicator')).toHaveText('01 / 03');
|
||
|
||
// 默认暂停：不自动切换（按钮态为「播放」）；手动上一张/下一张可用。
|
||
await expect(frame.getByRole('button', { name: '播放轮播' })).toBeVisible();
|
||
await page.waitForTimeout(4600);
|
||
await expect(frame.locator('.embed-indicator')).toHaveText('01 / 03');
|
||
|
||
await frame.getByRole('button', { name: '下一张' }).click();
|
||
await expect(frame.locator('.embed-indicator')).toHaveText('02 / 03');
|
||
await frame.getByRole('button', { name: '上一张' }).click();
|
||
await expect(frame.locator('.embed-indicator')).toHaveText('01 / 03');
|
||
});
|
||
|
||
// ── 后台设置动态生效（§5.4：configVersion 升值 → config 消息 → loader 二次
|
||
// 校验后应用非显式字段；iframe 内 imageFit 经响应 settings 生效）──
|
||
|
||
test('admin settings changes apply live via the config message', async ({ page }) => {
|
||
const feed = await seedFeed('cfg');
|
||
await page.goto(`/__test__/embed-host.html?slot=${feed.slotToken}&poll=2000`);
|
||
const frame = page.frameLocator('iframe');
|
||
await expect(frame.locator('.embed-indicator')).toHaveText('01 / 03');
|
||
await expect.poll(() => wrapperStyle(page, 'right')).toBe('16px');
|
||
|
||
await updateEmbedSlot(feed.slotId, {
|
||
settings: {
|
||
position: 'right',
|
||
size: 'md',
|
||
intervalMs: 5000,
|
||
lang: 'auto',
|
||
collapsedDefault: false,
|
||
imageFit: 'cover',
|
||
offsetX: 60,
|
||
offsetBottom: 90,
|
||
zIndex: 2000,
|
||
},
|
||
});
|
||
await flushOutbox();
|
||
|
||
// loader 侧：wrapper 偏移/层级随 config 消息更新（无 data-* 显式覆盖时）。
|
||
await expect.poll(() => wrapperStyle(page, 'right'), { timeout: 20_000 }).toBe('60px');
|
||
await expect.poll(() => wrapperStyle(page, 'bottom')).toBe('90px');
|
||
await expect.poll(() => wrapperStyle(page, 'zIndex')).toBe('2000');
|
||
|
||
// iframe 侧：imageFit=cover 应用到当前展示图（inline object-fit）。
|
||
await expect
|
||
.poll(() => frame.locator('.embed-photo.active img').evaluate((el) => el.style.objectFit))
|
||
.toBe('cover');
|
||
});
|
||
});
|