MutationObserver ist ein nützlicher Mechanismus, um auf Änderungen im DOM zu achten und darauf zu reagieren.

Die MutationObserver-Schnittstelle bietet die Möglichkeit, auf Änderungen zu achten, die am DOM-Baum vorgenommen werden.

Hier ist ein Beispiel, das auf eine Änderung der Themenklasse achtet.

    function setUpThemeClassObservers() {
        const observer = new MutationObserver(() => {
            const themeClass = this.getThemeClass();
            this.fireStylesChangedEvent('themeChanged');
        });

        observer.observe(this.eGridDiv, {
            attributes: true,
            attributeFilter: ['class'],
        });

        // we must disconnect otherwise "this" will not be GC'd
        // causing a memory leak
        return () => observer.disconnect();
    }

Wenn Sie jedoch vergessen, die Verbindung zu trennen, kann es zu Speicherverlusten kommen, abhängig davon, worauf innerhalb der MutationObserver-Funktionen zugegriffen wird.

Wäre es nicht großartig, einen Test zu haben, der bestätigen kann, dass wir unsere Beobachter trennen?

Automatische Validierung für Code

Es stellt sich heraus, dass es möglich ist, zu überprüfen, ob jeder MutationObserver, der das DOM beobachtet, ebenfalls getrennt ist. (Möglicherweise benötigen Sie mehr als einen Test, wenn Sie unterschiedliche Codepfade ausführen müssen, um die MutationObservers einzurichten.)

Die Idee besteht darin, den globalen MutationObserver mit Sub-Mocks für seine Beobachtungs- und Verbindungsmethoden zu verspotten. Bevor der Mock zurückgegeben wird, zeichnen wir ihn in einem Array auf, damit wir am Ende des Testlaufs alle Instanzen validieren können.

describe('Mutation Observers Disconnected', () => {

    let originalMutationObserver: typeof MutationObserver;

    const allMockedObservers: any = [];
    const mutationObserverMock = jest.fn().mockImplementation(() => {
        const mock = {
            observe: jest.fn(),
            disconnect: jest.fn(),
            takeRecords: jest.fn(),
        };
        allMockedObservers.push(mock);
        return mock;
    });

    beforeEach(() => {
        // Ensure we can restore the real MutationObserver after the test
        originalMutationObserver = global.MutationObserver;
        global.MutationObserver = mutationObserverMock;
    });

    afterEach(() => {
        global.MutationObserver = originalMutationObserver;
    });

    test('observer always disconnected after destroy', async () => {
        const api = createGrid();
        // Perform some actions if required to exercise the code paths
        api.destroy();

        expect(allMockedObservers.length).toBeGreaterThan(0);
        for (const mock of allMockedObservers) {
            expect(mock.observe).toHaveBeenCalled();
            expect(mock.disconnect).toHaveBeenCalled();
        }
    });
});

Auf diese Weise können wir überprüfen, dass jeder MutationObserver, der während des Tests eingerichtet wurde, am Ende des Tests auch getrennt wird.

Stephen Cooper – Senior Developer bei AG Grid
Folge mir auf X @ScooperDev