javascript / expert
Snippet
Überprüfung der MutationObserver-Lebenszyklusbereinigung in benutzerdefinierten Elementdirektiven
Demonstriert Unit-Testing-Techniken für Svelte-Actions und stellt sicher, dass asynchrone MutationObserver-Callbacks nach dem Abbau der Direktive durch Leeren der Microtask-Queue nicht ausgeführt werden.
snippet.js
javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
export function observeAttributeChanges(node, callback) {const observer = new MutationObserver((mutations) => callback(mutations));observer.observe(node, { attributes: true });return {destroy() {observer.disconnect();}};}export async function testActionCleanup(nodeMock) {let called = false;const action = observeAttributeChanges(nodeMock, () => { called = true; });action.destroy();await Promise.resolve();return called === false;}
svelte
Erklärung
1
const observer = new MutationObserver((mutations) => callback(mutations));
Instanziiert einen DOM MutationObserver, der an den Zielknoten der Action gebunden ist.
2
observer.disconnect();
Beendet die Überwachung von Attributänderungen, um Speicherlecks beim Demontieren zu verhindern.
3
action.destroy();
Führt die Abbaufunktion des Svelte-Action-Lebenszyklus in der Testumgebung aus.
4
await Promise.resolve();
Leert ausstehende asynchrone Microtasks vor der Überprüfung, dass der Aufruf blockiert wurde.