kdletters
1ad25e30f8
新增 PlatformUiKit 通用弹窗、按钮、状态、空态、媒体、表单和标签等公共组件 迁移结果页、创作工作台、认证入口、RPG 暗色面板和运行态弹窗的重复 UI chrome 补充组件测试、页面回归测试、技术文档和 Hermes 共享决策记录
97 lines
2.8 KiB
TypeScript
97 lines
2.8 KiB
TypeScript
/* @vitest-environment jsdom */
|
|
|
|
import { render, screen } from '@testing-library/react';
|
|
import { expect, test, vi } from 'vitest';
|
|
|
|
import { PlatformMediaTileGrid } from './PlatformMediaTileGrid';
|
|
|
|
vi.mock('../ResolvedAssetImage', () => ({
|
|
ResolvedAssetImage: ({
|
|
src,
|
|
alt,
|
|
className,
|
|
refreshKey,
|
|
}: {
|
|
src?: string | null;
|
|
alt?: string;
|
|
className?: string;
|
|
refreshKey?: string | number | null;
|
|
}) =>
|
|
src ? (
|
|
<img
|
|
src={src}
|
|
alt={alt}
|
|
className={className}
|
|
data-refresh-key={refreshKey ?? undefined}
|
|
/>
|
|
) : null,
|
|
}));
|
|
|
|
test('renders soft square tile grid with media frames', () => {
|
|
const { container } = render(
|
|
<PlatformMediaTileGrid
|
|
columns="five"
|
|
aspect="square"
|
|
surface="soft"
|
|
tileSurface="slate"
|
|
imageClassName="h-full w-full object-contain"
|
|
items={[
|
|
{
|
|
id: 'tile-1',
|
|
src: '/tiles/tile-1.png',
|
|
alt: '地块 1',
|
|
refreshKey: 'asset-tile-1',
|
|
testId: 'tile-preview-1',
|
|
},
|
|
{
|
|
id: 'tile-2',
|
|
fallbackLabel: '地块',
|
|
fallbackContent: <span data-testid="fallback-dot" />,
|
|
},
|
|
]}
|
|
/>,
|
|
);
|
|
|
|
const grid = container.querySelector('.platform-media-tile-grid');
|
|
const image = screen.getByRole('img', { name: '地块 1' });
|
|
const fallbackDot = screen.getByTestId('fallback-dot');
|
|
const itemFrames = container.querySelectorAll(
|
|
'.platform-media-tile-grid__item',
|
|
);
|
|
|
|
expect(grid?.className).toContain('grid-cols-5');
|
|
expect(grid?.className).toContain('aspect-[1/1]');
|
|
expect(grid?.className).toContain('bg-white/78');
|
|
expect(image.className).toContain('object-contain');
|
|
expect(image.getAttribute('data-refresh-key')).toBe('asset-tile-1');
|
|
expect(image.closest('[data-testid="tile-preview-1"]')).toBe(
|
|
screen.getByTestId('tile-preview-1'),
|
|
);
|
|
expect(itemFrames).toHaveLength(2);
|
|
expect(itemFrames[0]?.className).toContain('bg-slate-50');
|
|
expect(itemFrames[0]?.className).not.toContain(
|
|
'bg-[var(--platform-subpanel-fill)]',
|
|
);
|
|
expect(fallbackDot.closest('.platform-media-tile-grid__item')).toBeTruthy();
|
|
});
|
|
|
|
test('renders six-column white tile grid by default', () => {
|
|
const { container } = render(
|
|
<PlatformMediaTileGrid
|
|
items={[
|
|
{ id: 'card-1', src: '/cards/card-1.png', fallbackLabel: '卡片' },
|
|
]}
|
|
/>,
|
|
);
|
|
|
|
const grid = container.querySelector('.platform-media-tile-grid');
|
|
const item = container.querySelector('.platform-media-tile-grid__item');
|
|
|
|
expect(grid?.className).toContain('grid-cols-6');
|
|
expect(grid?.className).toContain('gap-1.5');
|
|
expect(item?.className).toContain('bg-white');
|
|
expect(item?.className).toContain('shadow-sm');
|
|
expect(item?.className).toContain('rounded-[0.45rem]');
|
|
expect(item?.className).not.toContain('bg-[var(--platform-subpanel-fill)]');
|
|
});
|