MutationObserver هي آلية مفيدة لمراقبة التغييرات في DOM والاستجابة لها.

توفر واجهة MutationObserver القدرة على مراقبة التغييرات التي يتم إجراؤها على شجرة DOM.

إليك مثال يراقب تغيير فئة الموضوع.

    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();
    }

ومع ذلك، إذا نسيت قطع الاتصال، فقد تعرض نفسك لتسرب الذاكرة اعتمادًا على ما يتم الوصول إليه من داخل وظائف MutationObserver.

ألن يكون رائعًا أن يكون لدينا اختبار يمكنه التحقق من أننا قمنا بفصل مراقبينا؟

التحقق التلقائي من الكود

اتضح أنه من الممكن التحقق من قطع اتصال كل MutationObserver الذي يراقب DOM. (قد تحتاج إلى أكثر من اختبار إذا كان عليك استخدام مسارات تعليمات برمجية مختلفة لإعداد MutationObservers)

الفكرة هي الاستهزاء بـ MutationObserver العالمي باستخدام نماذج فرعية لأساليب المراقبة وقطع الاتصال الخاصة به. قبل إرجاع النموذج، نقوم بتسجيله في مصفوفة حتى نتمكن من التحقق من صحة جميع الحالات في نهاية التشغيل التجريبي.

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();
        }
    });
});

بهذه الطريقة يمكننا التحقق من أن كل MutationObserver، الذي تم إعداده أثناء الاختبار، تم أيضًا فصله في نهاية الاختبار.

ستيفن كوبر - مطور أول في AG Grid
تابعني على X @ScooperDev