058738efdf
- hotkey core: combos, AltGr and layouts, labels, aria-keyshortcuts, editable targets, modal root, refcounted install, disabled and repeat - smoke: record, create, Create and new (new session key), Esc, modal scope, settings Save and close, My account, list search and the help dialog - ShortcutHelpDialog rows, keys and close button
75 lines
2.8 KiB
TypeScript
75 lines
2.8 KiB
TypeScript
import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
|
|
import { enableAutoUnmount, flushPromises, mount } from '@vue/test-utils'
|
|
import ShortcutHelpDialog from '../../src/components/shell/ShortcutHelpDialog.vue'
|
|
import { closeShortcutHelp, openShortcutHelp, shortcutHelp } from '../../src/app/hotkeys'
|
|
import { setBundle } from '../../src/app/i18n'
|
|
import lang from '../fixtures/lang.json'
|
|
|
|
beforeEach(() => {
|
|
setBundle(lang.data, 'pl')
|
|
vi.spyOn(navigator, 'platform', 'get').mockReturnValue('Linux x86_64')
|
|
})
|
|
|
|
afterEach(() => {
|
|
closeShortcutHelp()
|
|
document.body.innerHTML = ''
|
|
})
|
|
|
|
// Registered after the cleanup above, so it runs first (hooks run as a stack).
|
|
enableAutoUnmount(afterEach)
|
|
|
|
function marker(hotkey: string): void {
|
|
const element = document.createElement('button')
|
|
element.setAttribute('data-hotkey', hotkey)
|
|
document.body.appendChild(element)
|
|
}
|
|
|
|
function help(): HTMLElement | null {
|
|
return document.body.querySelector('[data-shortcut-help]')
|
|
}
|
|
|
|
describe('ShortcutHelpDialog', () => {
|
|
it('stays closed until the help is opened', async () => {
|
|
mount(ShortcutHelpDialog, { attachTo: document.body })
|
|
await flushPromises()
|
|
expect(help()).toBeNull()
|
|
})
|
|
|
|
it('lists the shortcuts the page answers with their keys and labels', async () => {
|
|
mount(ShortcutHelpDialog, { attachTo: document.body })
|
|
marker('mod+s')
|
|
marker('mod+shift+s')
|
|
marker('escape')
|
|
openShortcutHelp()
|
|
await flushPromises()
|
|
|
|
const dialog = help()!
|
|
expect(dialog.getAttribute('aria-modal')).toBe('true')
|
|
expect(dialog.textContent).toContain('Skróty klawiaturowe')
|
|
expect(dialog.textContent).toContain('Skróty dostępne na tym ekranie.')
|
|
const rows = [...dialog.querySelectorAll<HTMLElement>('[data-shortcut]')]
|
|
expect(rows.map((row) => row.dataset.shortcut)).toEqual(['mod+s', 'mod+shift+s', 'escape', '?'])
|
|
const keys = (row: HTMLElement) => [...row.querySelectorAll('kbd')].map((kbd) => kbd.textContent)
|
|
expect(keys(rows[0]!)).toEqual(['Ctrl', 'S'])
|
|
expect(keys(rows[1]!)).toEqual(['Ctrl', 'Shift', 'S'])
|
|
expect(keys(rows[2]!)).toEqual(['Esc'])
|
|
expect(rows[0]!.querySelector('dd')!.textContent).toBe('Zapisz')
|
|
expect(rows[1]!.querySelector('dd')!.textContent).toBe('Utwórz i nowy')
|
|
expect(rows[2]!.querySelector('dd')!.textContent).toBe('Anuluj i wróć')
|
|
expect(rows[3]!.querySelector('dd')!.textContent).toBe('Pokaż skróty klawiaturowe')
|
|
})
|
|
|
|
it('closes through the close button', async () => {
|
|
mount(ShortcutHelpDialog, { attachTo: document.body })
|
|
openShortcutHelp()
|
|
await flushPromises()
|
|
|
|
const close = help()!.querySelector<HTMLButtonElement>('[data-action="close"]')!
|
|
expect(close.getAttribute('aria-label')).toBe('Zamknij')
|
|
close.click()
|
|
await flushPromises()
|
|
expect(shortcutHelp.value).toBeNull()
|
|
expect(help()).toBeNull()
|
|
})
|
|
})
|