96 lines
3.0 KiB
TypeScript
96 lines
3.0 KiB
TypeScript
/* @vitest-environment jsdom */
|
|
|
|
import { fireEvent, render, screen, within } from '@testing-library/react';
|
|
import { expect, test, vi } from 'vitest';
|
|
|
|
import { PlatformAuthModalShell } from './PlatformAuthModalShell';
|
|
|
|
test('renders auth modal shell with platform theme and auth card chrome', () => {
|
|
const onClose = vi.fn();
|
|
|
|
const { container } = render(
|
|
<PlatformAuthModalShell
|
|
title="账号入口"
|
|
platformTheme="light"
|
|
onClose={onClose}
|
|
closeLabel="关闭登录弹窗"
|
|
panelClassName="!max-w-md"
|
|
>
|
|
<div>登录表单</div>
|
|
</PlatformAuthModalShell>,
|
|
);
|
|
|
|
const dialog = screen.getByRole('dialog', { name: '账号入口' });
|
|
|
|
expect(container.querySelector('[role="dialog"]')).toBeNull();
|
|
expect(document.body.contains(dialog)).toBe(true);
|
|
expect(dialog.parentElement?.className).toContain('platform-theme--light');
|
|
expect(dialog.className).toContain('platform-modal-shell');
|
|
expect(dialog.className).toContain('platform-auth-card');
|
|
expect(dialog.className).toContain('!max-w-md');
|
|
expect(within(dialog).getByText('登录表单')).toBeTruthy();
|
|
|
|
const backdrop = dialog.parentElement as HTMLElement;
|
|
fireEvent.pointerDown(within(dialog).getByText('登录表单'));
|
|
fireEvent.pointerUp(backdrop);
|
|
fireEvent.click(backdrop);
|
|
expect(onClose).not.toHaveBeenCalled();
|
|
|
|
fireEvent.pointerDown(backdrop);
|
|
fireEvent.pointerUp(backdrop);
|
|
fireEvent.click(backdrop);
|
|
expect(onClose).toHaveBeenCalledTimes(1);
|
|
});
|
|
|
|
test('keeps escape disabled for auth flows', () => {
|
|
const onClose = vi.fn();
|
|
|
|
render(
|
|
<PlatformAuthModalShell
|
|
title="请填写邀请码"
|
|
platformTheme="dark"
|
|
onClose={onClose}
|
|
closeLabel="取消填写邀请码"
|
|
zIndexClassName="z-[130]"
|
|
>
|
|
<div>邀请码表单</div>
|
|
</PlatformAuthModalShell>,
|
|
);
|
|
|
|
fireEvent.keyDown(window, { key: 'Escape' });
|
|
|
|
expect(onClose).not.toHaveBeenCalled();
|
|
expect(screen.getByRole('button', { name: '取消填写邀请码' })).toBeTruthy();
|
|
});
|
|
|
|
test('allows account shell callers to own overlay spacing and panel size', () => {
|
|
render(
|
|
<PlatformAuthModalShell
|
|
title="账号信息"
|
|
platformTheme="light"
|
|
onClose={vi.fn()}
|
|
closeLabel="关闭账号弹窗"
|
|
size="xl"
|
|
showHeader={false}
|
|
overlaySpacing="none"
|
|
overlayClassName="!items-end"
|
|
overlayStyle={{ paddingTop: '12px' }}
|
|
authCardClassName=""
|
|
panelClassName="!max-w-3xl !bg-transparent"
|
|
bodyClassName="!p-0"
|
|
>
|
|
<div>账号内容</div>
|
|
</PlatformAuthModalShell>,
|
|
);
|
|
|
|
const dialog = screen.getByRole('dialog', { name: '账号信息' });
|
|
const overlay = dialog.parentElement as HTMLElement;
|
|
|
|
expect(overlay.className).toContain('platform-theme--light');
|
|
expect(overlay.className).not.toContain('!px-3');
|
|
expect(overlay.style.paddingTop).toBe('12px');
|
|
expect(dialog.className).toContain('!max-w-3xl');
|
|
expect(dialog.className).not.toContain('platform-auth-card');
|
|
expect(within(dialog).queryByRole('button', { name: '关闭账号弹窗' })).toBeNull();
|
|
});
|