kdletters
7c47ad3358
沉淀 PlatformDetailTopbar 与 PlatformDetailShareActions 共享骨架 接入 RPG 世界详情与公开作品详情的返回复制分享动作组合 补充测试护栏与文档决策记录
50 lines
1.4 KiB
TypeScript
50 lines
1.4 KiB
TypeScript
/* @vitest-environment jsdom */
|
|
|
|
import { fireEvent, render, screen } from '@testing-library/react';
|
|
import { expect, test, vi } from 'vitest';
|
|
|
|
import { PlatformDetailTopbar } from './PlatformDetailTopbar';
|
|
|
|
test('renders pill back action with trailing slot', () => {
|
|
const onBack = vi.fn();
|
|
|
|
render(
|
|
<PlatformDetailTopbar
|
|
onBack={onBack}
|
|
className="grid-cols-[auto,minmax(0,1fr),auto]"
|
|
backButtonClassName="px-3"
|
|
trailing={<span>已发布</span>}
|
|
/>,
|
|
);
|
|
|
|
const button = screen.getByRole('button', { name: '返回' });
|
|
|
|
expect(button.className).toContain('platform-button--ghost');
|
|
expect(button.className).toContain('px-3');
|
|
expect(screen.getByText('已发布')).toBeTruthy();
|
|
|
|
fireEvent.click(button);
|
|
|
|
expect(onBack).toHaveBeenCalledTimes(1);
|
|
});
|
|
|
|
test('renders icon back action and centered title', () => {
|
|
render(
|
|
<PlatformDetailTopbar
|
|
onBack={vi.fn()}
|
|
backVariant="icon"
|
|
backButtonClassName="detail-icon-back"
|
|
title="详情"
|
|
titleClassName="detail-topbar-title"
|
|
trailing={<span className="invisible">占位</span>}
|
|
/>,
|
|
);
|
|
|
|
const button = screen.getByRole('button', { name: '返回' });
|
|
const title = screen.getByText('详情');
|
|
|
|
expect(button.className).toContain('platform-icon-button');
|
|
expect(button.className).toContain('detail-icon-back');
|
|
expect(title.className).toContain('detail-topbar-title');
|
|
});
|