xinyouhe/photo-live
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(embed,viewer): UI-01 complete carousel, loader config and accessibility

Browse Source 
Co-Authored-By: Claude Code <noreply@anthropic.com>
This commit is contained in:
浅念
2026-09-21 18:55:15 +08:00
parent 1f67b7c818
commit ddf26a177f
22 changed files with 2274 additions and 326 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/viewer/e2e/embed.spec.ts
+177 -41
View File
@@ -10,14 +10,15 @@ import {
updateEmbedSlot,
} from './helpers';
// P4b Task 4 嵌入轮播组件 Playwright（真实后端：cn 8080 + ov 8081 + viewer dev
// 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 类名。CSP：夹具页不设（宿主真实 CSP 要求见
// iframe 内 viewer 侧 CSS 类名（.embed-carousel/.embed-stage/.embed-indicator 等，
// 见 src/pages/embed/*）。CSP：夹具页不设（宿主真实 CSP 要求见
// packages/embed-loader/README-embed.md，此仅文档化）。
const MINUTE = 60_000;
@@ -52,12 +53,19 @@ async function seedFeed(alias: string): Promise<SeededFeed> {
return { slotToken: slot.token, slotId: slot.id, albumToken: album.publicToken, photoIds };
}
/** loader wrapper（iframe 父 div）inline height（px 字串；''=未置）。 */
function wrapperHeight(page: Page): Promise<string> {
return page.locator('iframe').evaluate((frame) => (frame.parentElement as HTMLElement).style.height);
/** 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,
);
}
test.describe.serial('embed carousel widget (P4b Task 4)', () => {
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();
});
@@ -68,18 +76,14 @@ test.describe.serial('embed carousel widget (P4b Task 4)', () => {
await page.goto(`/__test__/embed-host.html?slot=${feed.slotToken}&interval=3000`);
const frame = page.frameLocator('iframe');
// lang=auto → 相册 defaultLocale（zh-CN）标题。
// lang=auto → 相册 defaultLocale（zh-CN）标题；页码「当前序号 / 队列数」。
await expect(frame.locator('.embed-title')).toHaveText('main 中文相册');
// 轮播照片就位（3 张，thumb 为真实签名 URL）。
await expect(frame.locator('.embed-photo img').first()).toBeVisible();
await expect(frame.locator('.embed-photo')).toHaveCount(3);
await expect(frame.locator('.embed-dot')).toHaveCount(3);
await expect(frame.locator('.embed-photo.active img')).toBeVisible();
await expect(frame.locator('.embed-indicator')).toHaveText('01 / 03');
// intervalMs 切换：当前展示照片变化（首个为 publishedAt 最新 p3）。
const firstSrc = await frame.locator('.embed-photo.active img').getAttribute('src');
await expect
.poll(async () => frame.locator('.embed-photo.active img').getAttribute('src'), { timeout: 10_000 })
.not.toBe(firstSrc);
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');
@@ -99,7 +103,7 @@ test.describe.serial('embed carousel widget (P4b Task 4)', () => {
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').first()).toBeVisible();
await expect(frame.locator('.embed-photo.active img')).toBeVisible();
// 点击 → 新标签深链携带 lang=en（resolvedLocale）。
const popupPromise = page.context().waitForEvent('page');
@@ -119,7 +123,7 @@ test.describe.serial('embed carousel widget (P4b Task 4)', () => {
// iframe 内 × → postMessage collapse → loader wrapper 高度 0 + 把手出现 + 会话记忆。
await frame.locator('.embed-close').click();
await expect.poll(() => wrapperHeight(page)).toBe('0px');
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))
@@ -127,13 +131,13 @@ test.describe.serial('embed carousel widget (P4b Task 4)', () => {
// 刷新仍收起（会话内不反复弹出，需求 9）。
await page.reload();
await expect.poll(() => wrapperHeight(page)).toBe('0px');
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 wrapperHeight(page)) !== '0px')
.poll(async () => (await wrapperStyle(page, 'height')) !== '0px')
.toBe(true);
await expect(frame.locator('.embed-title')).toHaveText('collapse 中文相册');
});
@@ -146,16 +150,13 @@ test.describe.serial('embed carousel widget (P4b Task 4)', () => {
// <480px：强制 collapsedDefault + sm（280px 宽，计划评审缺口：移动端可用）。
await expect(page.locator('div[role="button"]')).toBeVisible();
await expect.poll(() => wrapperHeight(page)).toBe('0px');
const width = await page
.locator('iframe')
.evaluate((frame) => (frame.parentElement as HTMLElement).style.width);
expect(width).toBe('280px');
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 wrapperHeight(page)) !== '0px')
.poll(async () => (await wrapperStyle(page, 'height')) !== '0px')
.toBe(true);
});
@@ -173,14 +174,15 @@ test.describe.serial('embed carousel widget (P4b Task 4)', () => {
// ?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-photo')).toHaveCount(1);
await expect(frame.locator('.embed-indicator')).toHaveText('01 / 01');
// 新照片发布（真实管线同步 ov，ETag 必变 → 200 增量）→ 追加队尾（A11 数据路径）。
// 新照片发布（真实管线同步 ov，ETag 必变 → 200 增量）→ 追加队尾（A11 数据路径）；
// 页码分母即时反映队列长度（≠ 相册照片总数语义由组件单测覆盖）。
await seedPhoto(album.id, 'poll-p2', { publishedAt: new Date() });
await flushSync(album.id);
await expect
.poll(() => frame.locator('.embed-photo').count(), { timeout: 20_000 })
.toBe(2);
.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 }) => {
@@ -204,18 +206,18 @@ test.describe.serial('embed carousel widget (P4b Task 4)', () => {
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-photo')).toHaveCount(2);
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 () => frame.locator('.embed-title').textContent(), { timeout: 20_000 })
.poll(async () => (await frame.locator('.embed-title').textContent()) ?? '', { timeout: 20_000 })
.toBe('换绑后相册');
await expect
.poll(() => frame.locator('.embed-photo').count(), { timeout: 20_000 })
.toBe(1);
.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 }) => {
@@ -230,17 +232,151 @@ test.describe.serial('embed carousel widget (P4b Task 4)', () => {
await page.goto(`/__test__/embed-host.html?slot=${slot.token}`);
const frame = page.frameLocator('iframe');
await expect(frame.locator('.embed-title')).toHaveText('空相册展示位');
await expect(frame.locator('.embed-empty')).toHaveText('照片即将上线');
await expect(frame.locator('.embed-heading')).toHaveText('活动照片');
});
test('ghost slot collapses silently with no error UI inside the iframe', async ({ page }) => {
await page.goto(`/__test__/embed-host.html?slot=${makePublicToken()}`);
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 collapse：wrapper 高度 0 +
// 把手出现；iframe 内无错误 UI（root 隐藏，不弹错误）。
await expect.poll(() => wrapperHeight(page), { timeout: 15_000 }).toBe('0px');
await expect(page.locator('div[role="button"]')).toBeVisible();
await expect(page.frameLocator('iframe').locator('.embed-root')).toHaveCount(0);
// 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');
});
});