javascript / expert
Snippet
Validierung von Svelte Action Mount- und Destroy-Nebeneffekten mittels Isolierter Ereignissimulation
Das Testen von Svelte-Actions erfordert die programmgesteuerte Instanziierung des Action-Handlers und das manuelle Auslösen synthetischer Events, um sicherzustellen, dass Cleanup-Methoden globale Listener ordnungsgemäß entfernen.
snippet.js
javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
export function autoFocusAction(node, options = {}) {const handleKeyDown = (e) => {if (e.key === 'Escape') node.blur();};window.addEventListener('keydown', handleKeyDown);if (options.focusImmediately) node.focus();return {destroy() {window.removeEventListener('keydown', handleKeyDown);}};}export function testAutoFocusLifecycle(testNode) {const actionInstance = autoFocusAction(testNode, { focusImmediately: false });const escapeEvent = new KeyboardEvent('keydown', { key: 'Escape', bubbles: true });window.dispatchEvent(escapeEvent);actionInstance.destroy();const secondaryEvent = new KeyboardEvent('keydown', { key: 'Escape', bubbles: true });return window.dispatchEvent(secondaryEvent);}
svelte
Erklärung
1
window.addEventListener('keydown', handleKeyDown);
Fügt einen globalen Keydown-Event-Listener innerhalb des Svelte Action Closures hinzu.
2
destroy() { window.removeEventListener('keydown', handleKeyDown); }
Gibt eine explizite Teardown-Methode zurück, die aufgerufen wird, wenn Svelte den Node entfernt.
3
const escapeEvent = new KeyboardEvent('keydown', { key: 'Escape', bubbles: true });
Erstellt ein realistisches synthetisches KeyboardEvent, um die Handler-Logik während der Testausführung zu überprüfen.