浅念
381 lines
14 KiB
TypeScript
381 lines
14 KiB
TypeScript
import { flushPromises, mount, type VueWrapper } from '@vue/test-utils';
|
||
import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
|
||
import {
|
||
ApiError,
|
||
getPublicPhoto,
|
||
getPublicPhotos,
|
||
type PublicPhoto,
|
||
type PublicPhotoList,
|
||
} from '../api/client';
|
||
import { createViewerI18n, type ViewerI18n } from '../i18n';
|
||
import PhotoFeed from '../components/PhotoFeed.vue';
|
||
|
||
// PhotoFeed（Task 7）组件测试：api client 以真实模块为底、替身 getPublicPhotos /
|
||
// getPublicPhoto；IntersectionObserver / ResizeObserver 以可控假件替换（jsdom 无实现），
|
||
// clientWidth 以原型 getter mock（jsdom 恒 0）。布局纯函数已在 feed-layout.spec 覆盖。
|
||
|
||
vi.mock('../api/client', async (importOriginal) => {
|
||
const actual = await importOriginal<typeof import('../api/client')>();
|
||
return { ...actual, getPublicPhotos: vi.fn(), getPublicPhoto: vi.fn() };
|
||
});
|
||
|
||
const mockedGetPublicPhotos = vi.mocked(getPublicPhotos);
|
||
const mockedGetPublicPhoto = vi.mocked(getPublicPhoto);
|
||
|
||
/** 可控 IO 假件：记录实例与 init（rootMargin 区分懒加载 400px / 哨兵 600px）。 */
|
||
class FakeIntersectionObserver {
|
||
static instances: FakeIntersectionObserver[] = [];
|
||
readonly root: Element | Document | null = null;
|
||
readonly thresholds: ReadonlyArray<number> = [];
|
||
private readonly targets = new Set<Element>();
|
||
|
||
constructor(
|
||
readonly callback: IntersectionObserverCallback,
|
||
readonly init: IntersectionObserverInit = {},
|
||
) {
|
||
FakeIntersectionObserver.instances.push(this);
|
||
}
|
||
|
||
get rootMargin(): string {
|
||
return typeof this.init.rootMargin === 'string' ? this.init.rootMargin : '';
|
||
}
|
||
|
||
get observed(): Element[] {
|
||
return [...this.targets];
|
||
}
|
||
|
||
observe(target: Element): void {
|
||
this.targets.add(target);
|
||
}
|
||
|
||
unobserve(target: Element): void {
|
||
this.targets.delete(target);
|
||
}
|
||
|
||
disconnect(): void {
|
||
this.targets.clear();
|
||
}
|
||
|
||
takeRecords(): IntersectionObserverEntry[] {
|
||
return [];
|
||
}
|
||
|
||
trigger(targets: Element[], isIntersecting: boolean): void {
|
||
this.callback(
|
||
targets.map((target) => ({ target, isIntersecting }) as IntersectionObserverEntry),
|
||
this as unknown as IntersectionObserver,
|
||
);
|
||
}
|
||
}
|
||
|
||
class FakeResizeObserver {
|
||
observe(): void {}
|
||
unobserve(): void {}
|
||
disconnect(): void {}
|
||
}
|
||
|
||
function lazyObserver(): FakeIntersectionObserver {
|
||
const observer = FakeIntersectionObserver.instances.find((instance) =>
|
||
instance.rootMargin.includes('400px'),
|
||
);
|
||
if (observer === undefined) throw new Error('lazy observer not created');
|
||
return observer;
|
||
}
|
||
|
||
function sentinelObserver(): FakeIntersectionObserver {
|
||
const observer = FakeIntersectionObserver.instances.find((instance) =>
|
||
instance.rootMargin.includes('600px'),
|
||
);
|
||
if (observer === undefined) throw new Error('sentinel observer not created');
|
||
return observer;
|
||
}
|
||
|
||
function makePhoto(id: string, width = 800, height = 500): PublicPhoto {
|
||
return {
|
||
photoId: id,
|
||
width,
|
||
height,
|
||
thumb: { url: `http://img.test/${id}-thumb.jpg?s=1`, expiresAt: '2026-10-01T00:00:00.000Z' },
|
||
browse: { url: `http://img.test/${id}-browse.jpg?s=1`, expiresAt: '2026-10-01T00:00:00.000Z' },
|
||
likeCount: 0,
|
||
publishedAt: '2026-10-01T00:00:00.000Z',
|
||
};
|
||
}
|
||
|
||
function makeList(items: PublicPhoto[], nextCursor: string | null = null): PublicPhotoList {
|
||
return { items, nextCursor, hasMore: nextCursor !== null };
|
||
}
|
||
|
||
let i18n: ViewerI18n;
|
||
const mounted: VueWrapper[] = [];
|
||
|
||
function mountFeed(props: { token?: string; locale?: string; category?: string | null } = {}): VueWrapper {
|
||
const wrapper = mount(PhotoFeed, {
|
||
global: { plugins: [i18n] },
|
||
props: {
|
||
token: props.token ?? 'tok-feed',
|
||
locale: props.locale ?? 'zh-CN',
|
||
category: props.category ?? null,
|
||
},
|
||
});
|
||
mounted.push(wrapper);
|
||
return wrapper;
|
||
}
|
||
|
||
describe('photo feed (Task 7)', () => {
|
||
beforeEach(() => {
|
||
localStorage.clear();
|
||
i18n = createViewerI18n('zh-CN');
|
||
FakeIntersectionObserver.instances = [];
|
||
vi.stubGlobal('IntersectionObserver', FakeIntersectionObserver);
|
||
vi.stubGlobal('ResizeObserver', FakeResizeObserver);
|
||
// jsdom 无布局：clientWidth 恒 0 → 原型 getter mock 为 700（columnWidth=346）。
|
||
const proto = Object.prototype.hasOwnProperty.call(HTMLElement.prototype, 'clientWidth')
|
||
? HTMLElement.prototype
|
||
: Element.prototype;
|
||
vi.spyOn(proto, 'clientWidth', 'get').mockReturnValue(700);
|
||
mockedGetPublicPhotos.mockReset().mockResolvedValue(makeList([makePhoto('p1'), makePhoto('p2'), makePhoto('p3')], 'cur-1'));
|
||
mockedGetPublicPhoto.mockReset();
|
||
});
|
||
|
||
afterEach(() => {
|
||
while (mounted.length > 0) {
|
||
mounted.pop()?.unmount();
|
||
}
|
||
vi.unstubAllGlobals();
|
||
vi.restoreAllMocks();
|
||
vi.useRealTimers();
|
||
});
|
||
|
||
it('renders first page as absolute-positioned cells with reserved heights', async () => {
|
||
const wrapper = mountFeed();
|
||
await flushPromises();
|
||
|
||
expect(mockedGetPublicPhotos).toHaveBeenCalledWith('tok-feed', { locale: 'zh-CN' });
|
||
const cells = wrapper.findAll('.cell');
|
||
expect(cells).toHaveLength(3);
|
||
// 700 容器宽 → columnWidth 346；800x500 比例 → 条高 round(346*.625)=216。
|
||
// 3 条：col0 [224,0] → p2 入 col1 → p3 入 col0（top 224）→ 容器高 224+216=440。
|
||
expect(wrapper.find('.waterfall').attributes('style')).toContain('height: 440px');
|
||
expect(cells[1].attributes('style')).toContain('left: 354px');
|
||
expect(cells[2].attributes('style')).toContain('top: 224px');
|
||
});
|
||
|
||
it('binds img src only after the cell approaches the viewport (lazy swap)', async () => {
|
||
const wrapper = mountFeed();
|
||
await flushPromises();
|
||
|
||
expect(wrapper.findAll('img.cell-img')).toHaveLength(0);
|
||
const cells = wrapper.findAll('.cell');
|
||
expect(lazyObserver().observed).toHaveLength(3);
|
||
|
||
lazyObserver().trigger([cells[0].element, cells[1].element], true);
|
||
await vi.waitFor(() => expect(wrapper.findAll('img.cell-img')).toHaveLength(2));
|
||
expect(wrapper.find('img.cell-img').attributes('src')).toBe('http://img.test/p1-thumb.jpg?s=1');
|
||
// 已显示的单元格不再被观察。
|
||
expect(lazyObserver().observed).toHaveLength(1);
|
||
});
|
||
|
||
it('loads the next page when the sentinel intersects, dedupes and stops at exhaustion', async () => {
|
||
const wrapper = mountFeed();
|
||
await flushPromises();
|
||
|
||
const sentinel = wrapper.find('.sentinel');
|
||
expect(sentinel.exists()).toBe(true);
|
||
// 第 2 页带回重复的 p3（游标边界漂移防御）→ 仅追加新 id。
|
||
mockedGetPublicPhotos.mockResolvedValueOnce(makeList([makePhoto('p3'), makePhoto('p4')], null));
|
||
|
||
sentinelObserver().trigger([sentinel.element], true);
|
||
await flushPromises();
|
||
|
||
expect(mockedGetPublicPhotos).toHaveBeenLastCalledWith(
|
||
'tok-feed',
|
||
expect.objectContaining({ cursor: 'cur-1' }),
|
||
);
|
||
expect(wrapper.findAll('.cell')).toHaveLength(4);
|
||
// 游标耗尽：哨兵卸载 + 底部提示。
|
||
expect(wrapper.find('.sentinel').exists()).toBe(false);
|
||
expect(wrapper.find('.end-note').text()).toBe('已经到底了');
|
||
expect(wrapper.find('.new-photo-bar').exists()).toBe(false);
|
||
});
|
||
|
||
it('does not fire a second page fetch while one is in flight', async () => {
|
||
const wrapper = mountFeed();
|
||
await flushPromises();
|
||
mockedGetPublicPhotos.mockClear();
|
||
|
||
let resolvePage!: (value: PublicPhotoList) => void;
|
||
mockedGetPublicPhotos.mockReturnValueOnce(
|
||
new Promise<PublicPhotoList>((resolve) => {
|
||
resolvePage = resolve;
|
||
}),
|
||
);
|
||
const sentinel = wrapper.find('.sentinel');
|
||
sentinelObserver().trigger([sentinel.element], true);
|
||
sentinelObserver().trigger([sentinel.element], true);
|
||
await flushPromises();
|
||
expect(mockedGetPublicPhotos).toHaveBeenCalledTimes(1);
|
||
|
||
resolvePage(makeList([makePhoto('p4')], null));
|
||
await flushPromises();
|
||
expect(wrapper.findAll('.cell')).toHaveLength(4);
|
||
});
|
||
|
||
it('switching category resets the list and passes the filter through', async () => {
|
||
const wrapper = mountFeed();
|
||
await flushPromises();
|
||
mockedGetPublicPhotos.mockResolvedValueOnce(makeList([makePhoto('c1p1'), makePhoto('c1p2')], null));
|
||
|
||
await wrapper.setProps({ category: 'cat-1' });
|
||
await flushPromises();
|
||
|
||
expect(mockedGetPublicPhotos).toHaveBeenLastCalledWith(
|
||
'tok-feed',
|
||
expect.objectContaining({ category: 'cat-1', locale: 'zh-CN' }),
|
||
);
|
||
expect(wrapper.findAll('.cell')).toHaveLength(2);
|
||
});
|
||
|
||
it('locale switch re-fetches the current category (filter preserved)', async () => {
|
||
const wrapper = mountFeed({ category: 'cat-1' });
|
||
await flushPromises();
|
||
|
||
await wrapper.setProps({ locale: 'en' });
|
||
await flushPromises();
|
||
|
||
expect(mockedGetPublicPhotos).toHaveBeenLastCalledWith(
|
||
'tok-feed',
|
||
expect.objectContaining({ locale: 'en', category: 'cat-1' }),
|
||
);
|
||
});
|
||
|
||
it('renders the localized empty state when the album has no photos', async () => {
|
||
mockedGetPublicPhotos.mockResolvedValueOnce(makeList([]));
|
||
const wrapper = mountFeed();
|
||
await flushPromises();
|
||
|
||
expect(wrapper.find('.empty-notice').text()).toBe('照片即将上线');
|
||
expect(wrapper.find('.cell').exists()).toBe(false);
|
||
});
|
||
|
||
it('initial load failure shows the localized error with retry; retry recovers', async () => {
|
||
mockedGetPublicPhotos
|
||
.mockRejectedValueOnce(new ApiError('NETWORK_ERROR', 'network down', 0, null))
|
||
.mockResolvedValueOnce(makeList([makePhoto('p1')], null));
|
||
const wrapper = mountFeed();
|
||
await flushPromises();
|
||
|
||
expect(wrapper.find('.error[role="alert"]').text()).toContain('网络连接失败');
|
||
expect(wrapper.find('.cell').exists()).toBe(false);
|
||
|
||
await wrapper.find('.error button').trigger('click');
|
||
await flushPromises();
|
||
expect(wrapper.findAll('.cell')).toHaveLength(1);
|
||
});
|
||
|
||
it('retries a failed thumb once with a refreshed signed URL, then hides the img', async () => {
|
||
const wrapper = mountFeed();
|
||
await flushPromises();
|
||
lazyObserver().trigger(wrapper.findAll('.cell').map((cell) => cell.element), true);
|
||
await vi.waitFor(() => expect(wrapper.findAll('img.cell-img')).toHaveLength(3));
|
||
|
||
mockedGetPublicPhoto.mockResolvedValue({
|
||
...makePhoto('p1'),
|
||
categoryId: null,
|
||
thumb: { url: 'http://img.test/p1-thumb.jpg?s=2', expiresAt: '2026-10-01T01:00:00.000Z' },
|
||
});
|
||
await wrapper.findAll('img.cell-img')[0].trigger('error');
|
||
await flushPromises();
|
||
|
||
expect(mockedGetPublicPhoto).toHaveBeenCalledWith('tok-feed', 'p1');
|
||
expect(wrapper.findAll('img.cell-img')[0].attributes('src')).toBe('http://img.test/p1-thumb.jpg?s=2');
|
||
|
||
// 第二次失败 → 收起该图（占位底色仍在，布局不塌）。
|
||
await wrapper.findAll('img.cell-img')[0].trigger('error');
|
||
await flushPromises();
|
||
expect(wrapper.findAll('img.cell-img')).toHaveLength(2);
|
||
expect(wrapper.findAll('.cell')).toHaveLength(3);
|
||
expect(mockedGetPublicPhoto).toHaveBeenCalledTimes(1);
|
||
});
|
||
});
|
||
|
||
describe('photo feed polling (Task 7)', () => {
|
||
beforeEach(() => {
|
||
localStorage.clear();
|
||
i18n = createViewerI18n('zh-CN');
|
||
FakeIntersectionObserver.instances = [];
|
||
vi.stubGlobal('IntersectionObserver', FakeIntersectionObserver);
|
||
vi.stubGlobal('ResizeObserver', FakeResizeObserver);
|
||
const proto = Object.prototype.hasOwnProperty.call(HTMLElement.prototype, 'clientWidth')
|
||
? HTMLElement.prototype
|
||
: Element.prototype;
|
||
vi.spyOn(proto, 'clientWidth', 'get').mockReturnValue(700);
|
||
mockedGetPublicPhotos.mockReset().mockResolvedValue(makeList([makePhoto('p1'), makePhoto('p2')], null));
|
||
mockedGetPublicPhoto.mockReset();
|
||
vi.useFakeTimers();
|
||
});
|
||
|
||
afterEach(() => {
|
||
while (mounted.length > 0) {
|
||
mounted.pop()?.unmount();
|
||
}
|
||
vi.unstubAllGlobals();
|
||
vi.restoreAllMocks();
|
||
vi.useRealTimers();
|
||
});
|
||
|
||
it('poll detects new photos, shows the hint bar; click refreshes to page 1, clears the hint and scrolls top', async () => {
|
||
const scrollTo = vi.spyOn(window, 'scrollTo').mockImplementation(() => {});
|
||
const wrapper = mountFeed();
|
||
await flushPromises();
|
||
expect(wrapper.find('.new-photo-bar').exists()).toBe(false);
|
||
|
||
// 轮询取到的第 1 页含未知 id p9 → 只亮提示条，不自动插入。
|
||
mockedGetPublicPhotos.mockResolvedValueOnce(makeList([makePhoto('p9'), makePhoto('p1'), makePhoto('p2')], null));
|
||
vi.advanceTimersByTime(30_000);
|
||
await flushPromises();
|
||
expect(wrapper.find('.new-photo-bar').text()).toBe('有新照片，点击查看');
|
||
expect(wrapper.findAll('.cell')).toHaveLength(2);
|
||
|
||
// 点击提示条：整表刷新（第 1 页含新照片）并回顶。
|
||
mockedGetPublicPhotos.mockResolvedValueOnce(makeList([makePhoto('p9'), makePhoto('p1'), makePhoto('p2')], null));
|
||
await wrapper.find('.new-photo-bar').trigger('click');
|
||
await flushPromises();
|
||
|
||
expect(wrapper.findAll('.cell')).toHaveLength(3);
|
||
expect(wrapper.find('.new-photo-bar').exists()).toBe(false);
|
||
expect(scrollTo).toHaveBeenCalledWith(0, 0);
|
||
});
|
||
|
||
it('keeps polling silent on failure (no error state, no hint)', async () => {
|
||
const wrapper = mountFeed();
|
||
await flushPromises();
|
||
|
||
mockedGetPublicPhotos.mockRejectedValueOnce(new ApiError('INTERNAL_ERROR', 'boom', 500, 'req-1'));
|
||
vi.advanceTimersByTime(30_000);
|
||
await flushPromises();
|
||
|
||
expect(wrapper.find('.error').exists()).toBe(false);
|
||
expect(wrapper.find('.new-photo-bar').exists()).toBe(false);
|
||
expect(wrapper.findAll('.cell')).toHaveLength(2);
|
||
});
|
||
|
||
it('pauses polling while the tab is hidden and resumes when visible again', async () => {
|
||
mountFeed();
|
||
await flushPromises();
|
||
mockedGetPublicPhotos.mockClear();
|
||
|
||
const hidden = vi.spyOn(document, 'hidden', 'get').mockReturnValue(true);
|
||
document.dispatchEvent(new Event('visibilitychange'));
|
||
vi.advanceTimersByTime(120_000);
|
||
await flushPromises();
|
||
expect(mockedGetPublicPhotos).not.toHaveBeenCalled();
|
||
|
||
hidden.mockReturnValue(false);
|
||
document.dispatchEvent(new Event('visibilitychange'));
|
||
vi.advanceTimersByTime(30_000);
|
||
await flushPromises();
|
||
expect(mockedGetPublicPhotos).toHaveBeenCalledTimes(1);
|
||
});
|
||
});
|