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

हालाँकि, यदि आप डिस्कनेक्ट करना भूल जाते हैं तो आप म्यूटेशनऑब्जर्वर फ़ंक्शंस के भीतर से जो एक्सेस किया गया है उसके आधार पर मेमोरी लीक का जोखिम उठा सकते हैं।

क्या ऐसा परीक्षण करना अच्छा नहीं होगा जो यह पुष्टि कर सके कि हम अपने पर्यवेक्षकों को डिस्कनेक्ट कर देते हैं?

कोड के लिए स्वचालित सत्यापन

यह पता चला है कि यह सत्यापित करना संभव है कि DOM का अवलोकन करने वाला प्रत्येक MutationObserver भी डिस्कनेक्ट हो गया है। (यदि आपको MutationObservers को सेटअप करने के लिए अलग-अलग कोड पथों का उपयोग करना है तो आपको एक से अधिक परीक्षणों की आवश्यकता हो सकती है)

विचार यह है कि वैश्विक म्यूटेशनऑब्जर्वर को इसके अवलोकन और डिस्कनेक्ट तरीकों के लिए उप मॉक के साथ मॉक किया जाए। मॉक लौटाने से पहले हम इसे एक सरणी में रिकॉर्ड करते हैं ताकि हम परीक्षण रन के अंत में सभी उदाहरणों को मान्य कर सकें।

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

इस तरह हम सत्यापित कर सकते हैं कि परीक्षण के दौरान सेटअप किया गया प्रत्येक म्यूटेशनऑब्जर्वर भी परीक्षण के अंत में डिस्कनेक्ट हो जाता है।

स्टीफन कूपर - एजी ग्रिड में वरिष्ठ डेवलपर
X @ScooperDev पर मेरा अनुसरण करें