fix: [#1892] Clears event listeners on all Nodes when a window to prevent memory leaks (#1901)

* fix: [#1892] Clear event listeners that caused memory leaks

* chore: [#1892] Adds unit tests and some improvements

---------

Co-authored-by: David Ortner <[email protected]>

Author: TrevorBurnham

packages/happy-dom/src/browser/utilities/BrowserFrameFactory.ts

@@ -61,6 +61,11 @@ export default class BrowserFrameFactory {
 						frame[PropertySymbol.openerFrame] = null;
 						frame[PropertySymbol.openerWindow] = null;
 
+						// Clear navigation listeners
+						if (frame[PropertySymbol.listeners]) {
+							frame[PropertySymbol.listeners].navigation = [];
+						}
+
 						resolve();
 					})
 					.catch((error) => reject(error));
@@ -83,6 +88,11 @@ export default class BrowserFrameFactory {
 							frame[PropertySymbol.openerFrame] = null;
 							frame[PropertySymbol.openerWindow] = null;
 
+							// Clear navigation listeners
+							if (frame[PropertySymbol.listeners]) {
+								frame[PropertySymbol.listeners].navigation = [];
+							}
+
 							resolve();
 						})
 						.catch((error) => reject(error));

packages/happy-dom/src/event/EventTarget.ts

@@ -166,6 +166,16 @@ export default class EventTarget {
 		this.removeEventListener(type.replace('on', ''), listener);
 	}
 
+	/**
+	 * Destroys the node.
+	 */
+	public [PropertySymbol.destroy](): void {
+		this[PropertySymbol.listeners].capturing.clear();
+		this[PropertySymbol.listeners].bubbling.clear();
+		this[PropertySymbol.listenerOptions].capturing.clear();
+		this[PropertySymbol.listenerOptions].bubbling.clear();
+	}
+
 	/**
 	 * Goes through dispatch event phases.
 	 *

packages/happy-dom/src/nodes/node/Node.ts

@@ -1065,6 +1065,41 @@ export default class Node extends EventTarget {
 		}
 	}
 
+	/**
+	 * Destroys the node.
+	 */
+	public [PropertySymbol.destroy](): void {
+		super[PropertySymbol.destroy]();
+
+		this[PropertySymbol.isConnected] = false;
+
+		while (this[PropertySymbol.nodeArray].length > 0) {
+			const node = this[PropertySymbol.nodeArray][this[PropertySymbol.nodeArray].length - 1];
+
+			// Makes sure that something won't be triggered by the disconnect.
+			if ((<any>node).disconnectedCallback) {
+				delete (<any>node).disconnectedCallback;
+			}
+
+			this[PropertySymbol.removeChild](node);
+			node[PropertySymbol.destroy]();
+		}
+
+		this[PropertySymbol.parentNode] = null;
+		this[PropertySymbol.rootNode] = null;
+		this[PropertySymbol.styleNode] = null;
+		this[PropertySymbol.textAreaNode] = null;
+		this[PropertySymbol.formNode] = null;
+		this[PropertySymbol.selectNode] = null;
+		this[PropertySymbol.mutationListeners] = [];
+		this[PropertySymbol.nodeArray] = [];
+		this[PropertySymbol.elementArray] = [];
+		this[PropertySymbol.childNodes] = null;
+		this[PropertySymbol.assignedToSlot] = null;
+
+		this[PropertySymbol.clearCache]();
+	}
+
 	/**
 	 * Reports the position of its argument node relative to the node on which it is called.
 	 *

packages/happy-dom/src/window/BrowserWindow.ts

@@ -1884,6 +1884,8 @@ export default class BrowserWindow extends EventTarget implements INodeJSGlobal
 			return;
 		}
 
+		super[PropertySymbol.destroy]();
+
 		(<boolean>this.closed) = true;
 
 		const mutationObservers = this[PropertySymbol.mutationObservers];
@@ -1896,16 +1898,7 @@ export default class BrowserWindow extends EventTarget implements INodeJSGlobal
 
 		this[PropertySymbol.mutationObservers] = [];
 
-		// Disconnects nodes from the document, so that they can be garbage collected.
-		const childNodes = this.document[PropertySymbol.nodeArray];
-
-		while (childNodes.length > 0) {
-			// Makes sure that something won't be triggered by the disconnect.
-			if ((<HTMLElement>childNodes[0]).disconnectedCallback) {
-				delete (<HTMLElement>childNodes[0]).disconnectedCallback;
-			}
-			this.document[PropertySymbol.removeChild](childNodes[0]);
-		}
+		this.document[PropertySymbol.destroy]();
 
 		// Create some empty elements for scripts that are still running.
 		const htmlElement = this.document.createElement('html');
@@ -1940,6 +1933,10 @@ export default class BrowserWindow extends EventTarget implements INodeJSGlobal
 		this.document[PropertySymbol.currentScript] = null;
 		this.document[PropertySymbol.selection] = null;
 
+		// Clear parent/top references to break circular references
+		this[PropertySymbol.parent] = null;
+		this[PropertySymbol.top] = null;
+
 		WindowBrowserContext.removeWindowBrowserFrameRelation(this);
 	}
 

packages/happy-dom/test/browser/BrowserPage.test.ts

@@ -242,6 +242,48 @@ describe('BrowserPage', () => {
 			expect(mainFrameWindow[PropertySymbol.modules].css.size).toBe(0);
 			expect(mainFrameWindow[PropertySymbol.modules].json.size).toBe(0);
 		});
+
+		it('Clears event listeners of nodes when closing.', async () => {
+			const browser = new Browser({ console });
+			const page = browser.defaultContext.newPage();
+			const mainFrame = page.mainFrame;
+			const frame1 = BrowserFrameFactory.createChildFrame(page.mainFrame);
+			const frame2 = BrowserFrameFactory.createChildFrame(page.mainFrame);
+
+			const div1 = mainFrame.document.createElement('div');
+			const div2 = frame1.document.createElement('div');
+			const div3 = frame2.document.createElement('div');
+			let mainFrameDivClicked = false;
+			let frame1DivClicked = false;
+			let frame2DivClicked = false;
+
+			div1.addEventListener('click', () => {
+				mainFrameDivClicked = true;
+			});
+
+			div2.addEventListener('click', () => {
+				frame1DivClicked = true;
+			});
+
+			div3.addEventListener('click', () => {
+				frame2DivClicked = true;
+			});
+
+			mainFrame.document.body.appendChild(div1);
+			frame1.document.body.appendChild(div2);
+			frame2.document.body.appendChild(div3);
+
+			await page.close();
+
+			// Simulate clicks after page is closed
+			div1.dispatchEvent(new Event('click'));
+			div2.dispatchEvent(new Event('click'));
+			div3.dispatchEvent(new Event('click'));
+
+			expect(mainFrameDivClicked).toBe(false);
+			expect(frame1DivClicked).toBe(false);
+			expect(frame2DivClicked).toBe(false);
+		});
 	});
 
 	describe('waitUntilComplete()', () => {

packages/happy-dom/test/event/EventTarget.test.ts

@@ -264,4 +264,28 @@ describe('EventTarget', () => {
 			expect(eventTarget[Symbol.toStringTag]).toBe(description);
 		});
 	});
+
+	describe('[PropertySymbol.destroy]', () => {
+		it('Destroys the event target', () => {
+			let count = 0;
+			const listener = (): void => {
+				count++;
+			};
+			const dispatchedEvent = new Event(EVENT_TYPE);
+
+			eventTarget.addEventListener(EVENT_TYPE, listener);
+
+			eventTarget.dispatchEvent(dispatchedEvent);
+
+			expect(count).toBe(1);
+
+			count = 0;
+
+			eventTarget[PropertySymbol.destroy]();
+
+			eventTarget.dispatchEvent(dispatchedEvent);
+
+			expect(count).toBe(0);
+		});
+	});
 });

packages/happy-dom/test/mutation-observer/MutationObserver.test.ts

@@ -385,6 +385,7 @@ describe('MutationObserver', () => {
 			]);
 
 			text.textContent = 'new3';
+			div.appendChild(span);
 			div.removeChild(span);
 			div.setAttribute('attr', 'value3');