6aaf8ddb9e
Native <dialog aria-modal> cheatsheet: showModal()/close() bridge, close button focused on open, eight grouped <kbd> rows (nav/edit/utility), an autosave footer line, and a reduced-motion-guarded fade. Closes on Esc, backdrop click, and the close button; "?" while open is a no-op. Adds the shortcut_close_panel i18n key. 8 component tests. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
66 lines
2.7 KiB
TypeScript
66 lines
2.7 KiB
TypeScript
import { describe, it, expect, vi, afterEach } from 'vitest';
|
|
import { cleanup, render } from 'vitest-browser-svelte';
|
|
import { page } from 'vitest/browser';
|
|
import ShortcutCheatsheet from './ShortcutCheatsheet.svelte';
|
|
|
|
afterEach(cleanup);
|
|
|
|
describe('ShortcutCheatsheet', () => {
|
|
it('is not in the accessibility tree when closed', async () => {
|
|
render(ShortcutCheatsheet, { open: false, onClose: vi.fn() });
|
|
await expect.element(page.getByRole('dialog')).not.toBeInTheDocument();
|
|
});
|
|
|
|
it('opens as a modal dialog with a labelled heading when open', async () => {
|
|
render(ShortcutCheatsheet, { open: true, onClose: vi.fn() });
|
|
await expect.element(page.getByRole('dialog')).toBeInTheDocument();
|
|
await expect.element(page.getByRole('heading')).toBeInTheDocument();
|
|
});
|
|
|
|
it('lists all eight shortcut rows', async () => {
|
|
render(ShortcutCheatsheet, { open: true, onClose: vi.fn() });
|
|
const dialog = page.getByRole('dialog').element() as HTMLElement;
|
|
const keyCaps = dialog.querySelectorAll('kbd');
|
|
expect(keyCaps.length).toBe(8);
|
|
});
|
|
|
|
it('shows the autosave footer line', async () => {
|
|
render(ShortcutCheatsheet, { open: true, onClose: vi.fn() });
|
|
const dialog = page.getByRole('dialog').element() as HTMLElement;
|
|
expect(dialog.textContent).toContain('automatisch');
|
|
});
|
|
|
|
it('calls onClose when Escape is pressed', async () => {
|
|
const onClose = vi.fn();
|
|
render(ShortcutCheatsheet, { open: true, onClose });
|
|
const dialog = page.getByRole('dialog').element() as HTMLDialogElement;
|
|
dialog.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape', bubbles: true }));
|
|
// native <dialog> turns Esc into a 'cancel' + 'close'; assert close fired onClose
|
|
dialog.dispatchEvent(new Event('close'));
|
|
expect(onClose).toHaveBeenCalled();
|
|
});
|
|
|
|
it('calls onClose when the backdrop is clicked', async () => {
|
|
const onClose = vi.fn();
|
|
render(ShortcutCheatsheet, { open: true, onClose });
|
|
const dialog = page.getByRole('dialog').element() as HTMLDialogElement;
|
|
// a click whose target is the dialog element itself is a backdrop click
|
|
dialog.dispatchEvent(new MouseEvent('click', { bubbles: true }));
|
|
expect(onClose).toHaveBeenCalled();
|
|
});
|
|
|
|
it('does not close on "?" while open (open-only, not a toggle)', async () => {
|
|
const onClose = vi.fn();
|
|
render(ShortcutCheatsheet, { open: true, onClose });
|
|
const dialog = page.getByRole('dialog').element() as HTMLDialogElement;
|
|
dialog.dispatchEvent(new KeyboardEvent('keydown', { key: '?', bubbles: true }));
|
|
expect(onClose).not.toHaveBeenCalled();
|
|
});
|
|
|
|
it('focuses the close button on open', async () => {
|
|
render(ShortcutCheatsheet, { open: true, onClose: vi.fn() });
|
|
const closeButton = page.getByRole('button', { name: /schließen/i }).element();
|
|
expect(document.activeElement).toBe(closeButton);
|
|
});
|
|
});
|