lhk229
6506e95fa1
给浮层原语加 options 变体，含复选框和滑块的时长浮层退回 role=group。 浮层收起 hook 支持 Escape 关闭并把焦点还给触发按钮。 时长浮层打开后主动移焦到自动时长复选框，修正 portal 破坏的 Tab 可达性。 把一直未被 vitest 收录的浮层原语测试文件纳入 include 名单。
76 lines
2.5 KiB
TypeScript
76 lines
2.5 KiB
TypeScript
/* @vitest-environment jsdom */
|
|
|
|
import { fireEvent, render, screen } from '@testing-library/react';
|
|
import userEvent from '@testing-library/user-event';
|
|
import { describe, expect, it, vi } from 'vitest';
|
|
|
|
import {
|
|
PlatformFloatingMenu,
|
|
PlatformFloatingMenuItem,
|
|
} from './PlatformFloatingMenu';
|
|
|
|
describe('PlatformFloatingMenu', () => {
|
|
it('renders menu items with accessible menu semantics', async () => {
|
|
const onRename = vi.fn();
|
|
const user = userEvent.setup();
|
|
|
|
render(
|
|
<PlatformFloatingMenu label="项目菜单" placement="bottom-end">
|
|
<PlatformFloatingMenuItem onClick={onRename}>
|
|
重命名
|
|
</PlatformFloatingMenuItem>
|
|
</PlatformFloatingMenu>,
|
|
);
|
|
|
|
expect(screen.getByRole('menu', { name: '项目菜单' })).toBeTruthy();
|
|
|
|
await user.click(screen.getByRole('menuitem', { name: '重命名' }));
|
|
|
|
expect(onRename).toHaveBeenCalledOnce();
|
|
});
|
|
|
|
it('drops menu semantics for the parameter options variant', () => {
|
|
render(
|
|
<PlatformFloatingMenu
|
|
label="音效时长选项"
|
|
variant="options"
|
|
placement="top-start"
|
|
>
|
|
<label>
|
|
<input type="checkbox" aria-label="自动时长" readOnly checked />
|
|
自动时长
|
|
</label>
|
|
<input type="range" aria-label="手动音效时长" readOnly value={5} />
|
|
</PlatformFloatingMenu>,
|
|
);
|
|
|
|
// 复选框与滑块都不是 menu 的合法子角色，浮层必须退回普通分组语义。
|
|
expect(screen.getByRole('group', { name: '音效时长选项' })).toBeTruthy();
|
|
expect(screen.queryByRole('menu', { name: '音效时长选项' })).toBeNull();
|
|
expect(screen.getByRole('checkbox', { name: '自动时长' })).toBeTruthy();
|
|
expect(screen.getByRole('slider', { name: '手动音效时长' })).toBeTruthy();
|
|
});
|
|
|
|
it('keeps pointer events from leaking to canvas-style parents', () => {
|
|
const onParentPointerDown = vi.fn();
|
|
const onMenuPointerDown = vi.fn();
|
|
|
|
render(
|
|
<div onPointerDown={onParentPointerDown}>
|
|
<PlatformFloatingMenu
|
|
label="项目菜单"
|
|
placement="bottom-end"
|
|
onPointerDown={onMenuPointerDown}
|
|
>
|
|
<PlatformFloatingMenuItem>重命名</PlatformFloatingMenuItem>
|
|
</PlatformFloatingMenu>
|
|
</div>,
|
|
);
|
|
|
|
fireEvent.pointerDown(screen.getByRole('menu', { name: '项目菜单' }));
|
|
|
|
expect(onMenuPointerDown).toHaveBeenCalledOnce();
|
|
expect(onParentPointerDown).not.toHaveBeenCalled();
|
|
});
|
|
});
|