#466@trivial: Fixes MutationObserver and adds support for BrowserFram…

…e.waitForNavigation().

packages/global-registrator/src/GlobalRegistrator.ts

@@ -25,7 +25,10 @@ export default class GlobalRegistrator {
 			if (global[key] !== window[key] && !IGNORE_LIST.includes(key)) {
 				this.registered[key] =
 					global[key] !== window[key] && global[key] !== undefined ? global[key] : null;
-				global[key] = typeof window[key] === 'function' ? window[key].bind(global) : window[key];
+				global[key] =
+					typeof window[key] === 'function' && !window[key].toString().startsWith('class ')
+						? window[key].bind(global)
+						: window[key];
 			}
 		}
 

packages/happy-dom/README.md

@@ -51,14 +51,12 @@ npm install happy-dom
 
 A simple example of how you can use Happy DOM.
 
+## Window
+
 ```javascript
 import { Window } from 'happy-dom';
 
-const window = new Window({
-	url: 'https://localhost:8080',
-	width: 1024,
-	height: 768
-});
+const window = new Window({ url: 'https://localhost:8080' });
 const document = window.document;
 
 document.body.innerHTML = '<div class="container"></div>';
@@ -72,6 +70,33 @@ container.appendChild(button);
 console.log(document.body.innerHTML);
 ```
 
+## Browser
+
+```javascript
+import { Browser, BrowserErrorCaptureEnum } from 'happy-dom';
+
+const browser = new Browser({ settings: { errorCapture: BrowserErrorCaptureEnum.processLevel } });
+const page = browser.newPage();
+
+// Navigates page
+await page.goto('https://github.com/capricorn86');
+
+// Waits for all operations on the page to complete (fetch, timers etc.)
+await page.waitUntilComplete();
+
+// Clicks on link
+page.mainFrame.document.querySelector('a[href*="capricorn86/happy-dom"]').click();
+
+// Waits for all operations on the page to complete (fetch, timers etc.)
+await page.waitUntilComplete();
+
+// Outputs "GitHub - capricorn86/happy-dom: Happy DOM..."
+console.log(page.mainFrame.document.title);
+
+// Closes the browser
+await browser.close();
+```
+
 # Documentation
 
 Read more about how to use Happy DOM in our [Wiki](https://github.com/capricorn86/happy-dom/wiki).

packages/happy-dom/src/PropertySymbol.ts

@@ -22,6 +22,7 @@ export const currentScript = Symbol('currentScript');
 export const currentTarget = Symbol('currentTarget');
 export const data = Symbol('data');
 export const defaultView = Symbol('defaultView');
+export const destroy = Symbol('destroy');
 export const dirtyness = Symbol('dirtyness');
 export const end = Symbol('end');
 export const entries = Symbol('entries');
@@ -77,3 +78,4 @@ export const value = Symbol('value');
 export const width = Symbol('width');
 export const window = Symbol('window');
 export const windowResizeListener = Symbol('windowResizeListener');
+export const mutationObservers = Symbol('mutationObservers');

packages/happy-dom/src/async-task-manager/AsyncTaskManager.ts

@@ -7,17 +7,17 @@ export default class AsyncTaskManager {
 	private runningTaskCount = 0;
 	private runningTimers: NodeJS.Timeout[] = [];
 	private runningImmediates: NodeJS.Immediate[] = [];
-	private whenCompleteImmediate: NodeJS.Immediate | null = null;
-	private whenCompleteResolvers: Array<() => void> = [];
+	private waitUntilCompleteTimer: NodeJS.Immediate | null = null;
+	private waitUntilCompleteResolvers: Array<() => void> = [];
 
 	/**
 	 * Returns a promise that is resolved when async tasks are complete.
 	 *
 	 * @returns Promise.
 	 */
-	public whenComplete(): Promise<void> {
+	public waitUntilComplete(): Promise<void> {
 		return new Promise((resolve) => {
-			this.whenCompleteResolvers.push(resolve);
+			this.waitUntilCompleteResolvers.push(resolve);
 			this.endTask(this.startTask());
 		});
 	}
@@ -106,12 +106,12 @@ export default class AsyncTaskManager {
 		if (this.runningTasks[taskID]) {
 			delete this.runningTasks[taskID];
 			this.runningTaskCount--;
-			if (this.whenCompleteImmediate) {
-				global.clearImmediate(this.whenCompleteImmediate);
+			if (this.waitUntilCompleteTimer) {
+				global.clearImmediate(this.waitUntilCompleteTimer);
 			}
 			if (!this.runningTaskCount && !this.runningTimers.length && !this.runningImmediates.length) {
-				this.whenCompleteImmediate = global.setImmediate(() => {
-					this.whenCompleteImmediate = null;
+				this.waitUntilCompleteTimer = global.setImmediate(() => {
+					this.waitUntilCompleteTimer = null;
 					if (
 						!this.runningTaskCount &&
 						!this.runningTimers.length &&
@@ -147,8 +147,8 @@ export default class AsyncTaskManager {
 	 * Resolves when complete.
 	 */
 	private resolveWhenComplete(): void {
-		const resolvers = this.whenCompleteResolvers;
-		this.whenCompleteResolvers = [];
+		const resolvers = this.waitUntilCompleteResolvers;
+		this.waitUntilCompleteResolvers = [];
 		for (const resolver of resolvers) {
 			resolver();
 		}
@@ -169,9 +169,9 @@ export default class AsyncTaskManager {
 		this.runningImmediates = [];
 		this.runningTimers = [];
 
-		if (this.whenCompleteImmediate) {
-			global.clearImmediate(this.whenCompleteImmediate);
-			this.whenCompleteImmediate = null;
+		if (this.waitUntilCompleteTimer) {
+			global.clearImmediate(this.waitUntilCompleteTimer);
+			this.waitUntilCompleteTimer = null;
 		}
 
 		for (const immediate of runningImmediates) {
@@ -187,6 +187,6 @@ export default class AsyncTaskManager {
 		}
 
 		// We need to wait for microtasks to complete before resolving.
-		return this.whenComplete();
+		return this.waitUntilComplete();
 	}
 }

packages/happy-dom/src/browser/Browser.ts

@@ -54,11 +54,11 @@ export default class Browser implements IBrowser {
 	 *
 	 * @returns Promise.
 	 */
-	public async whenComplete(): Promise<void> {
+	public async waitUntilComplete(): Promise<void> {
 		if (this.contexts.length === 0) {
 			throw new Error('No default context. The browser has been closed.');
 		}
-		await Promise.all(this.contexts.map((page) => page.whenComplete()));
+		await Promise.all(this.contexts.map((page) => page.waitUntilComplete()));
 	}
 
 	/**

packages/happy-dom/src/browser/BrowserContext.ts

@@ -58,8 +58,8 @@ export default class BrowserContext implements IBrowserContext {
 	 *
 	 * @returns Promise.
 	 */
-	public async whenComplete(): Promise<void> {
-		await Promise.all(this.pages.map((page) => page.whenComplete()));
+	public async waitUntilComplete(): Promise<void> {
+		await Promise.all(this.pages.map((page) => page.waitUntilComplete()));
 	}
 
 	/**

packages/happy-dom/src/browser/BrowserFrame.ts

@@ -12,7 +12,7 @@ import BrowserFrameScriptEvaluator from './utilities/BrowserFrameScriptEvaluator
 import BrowserFrameNavigator from './utilities/BrowserFrameNavigator.js';
 import IReloadOptions from './types/IReloadOptions.js';
 import BrowserFrameExceptionObserver from './utilities/BrowserFrameExceptionObserver.js';
-import BrowserErrorCapturingEnum from './enums/BrowserErrorCapturingEnum.js';
+import BrowserErrorCaptureEnum from './enums/BrowserErrorCaptureEnum.js';
 import IDocument from '../nodes/document/IDocument.js';
 
 /**
@@ -26,6 +26,7 @@ export default class BrowserFrame implements IBrowserFrame {
 	public readonly window: BrowserWindow;
 	public [PropertySymbol.asyncTaskManager] = new AsyncTaskManager();
 	public [PropertySymbol.exceptionObserver]: BrowserFrameExceptionObserver | null = null;
+	public [PropertySymbol.listeners]: { navigation: Array<() => void> } = { navigation: [] };
 
 	/**
 	 * Constructor.
@@ -37,7 +38,7 @@ export default class BrowserFrame implements IBrowserFrame {
 		this.window = new BrowserWindow(this);
 
 		// Attach process level error capturing.
-		if (page.context.browser.settings.errorCapturing === BrowserErrorCapturingEnum.processLevel) {
+		if (page.context.browser.settings.errorCapture === BrowserErrorCaptureEnum.processLevel) {
 			this[PropertySymbol.exceptionObserver] = new BrowserFrameExceptionObserver();
 			this[PropertySymbol.exceptionObserver].observe(this);
 		}
@@ -95,17 +96,22 @@ export default class BrowserFrame implements IBrowserFrame {
 	}
 
 	/**
-	 * Returns a promise that is resolved when all async tasks are complete.
-	 *
-	 * @returns Promise.
+	 * Returns a promise that is resolved when all resources has been loaded, fetch has completed, and all async tasks such as timers are complete.
 	 */
-	public async whenComplete(): Promise<void> {
+	public async waitUntilComplete(): Promise<void> {
 		await Promise.all([
-			this[PropertySymbol.asyncTaskManager].whenComplete(),
-			...this.childFrames.map((frame) => frame.whenComplete())
+			this[PropertySymbol.asyncTaskManager].waitUntilComplete(),
+			...this.childFrames.map((frame) => frame.waitUntilComplete())
 		]);
 	}
 
+	/**
+	 * Returns a promise that is resolved when the frame has navigated and the response HTML has been written to the document.
+	 */
+	public waitForNavigation(): Promise<void> {
+		return new Promise((resolve) => this[PropertySymbol.listeners].navigation.push(resolve));
+	}
+
 	/**
 	 * Aborts all ongoing operations.
 	 */

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

@@ -79,12 +79,17 @@ export default class BrowserPage implements IBrowserPage {
 	}
 
 	/**
-	 * Returns a promise that is resolved when all async tasks are complete.
-	 *
-	 * @returns Promise.
+	 * Returns a promise that is resolved when all resources has been loaded, fetch has completed, and all async tasks such as timers are complete.
+	 */
+	public waitUntilComplete(): Promise<void> {
+		return this.mainFrame.waitUntilComplete();
+	}
+
+	/**
+	 * Returns a promise that is resolved when the page has navigated and the response HTML has been written to the document.
 	 */
-	public async whenComplete(): Promise<void> {
-		await this.mainFrame.whenComplete();
+	public waitForNavigation(): Promise<void> {
+		return this.mainFrame.waitForNavigation();
 	}
 
 	/**

packages/happy-dom/src/browser/DefaultBrowserSettings.ts

@@ -1,5 +1,5 @@
 import PackageVersion from '../version.js';
-import BrowserErrorCapturingEnum from './enums/BrowserErrorCapturingEnum.js';
+import BrowserErrorCaptureEnum from './enums/BrowserErrorCaptureEnum.js';
 import BrowserNavigationCrossOriginPolicyEnum from './enums/BrowserNavigationCrossOriginPolicyEnum.js';
 import IBrowserSettings from './types/IBrowserSettings.js';
 
@@ -10,7 +10,7 @@ export default <IBrowserSettings>{
 	disableIframePageLoading: false,
 	disableComputedStyleRendering: false,
 	disableErrorCapturing: false,
-	errorCapturing: BrowserErrorCapturingEnum.tryAndCatch,
+	errorCapture: BrowserErrorCaptureEnum.tryAndCatch,
 	enableFileSystemHttpRequests: false,
 	navigation: {
 		disableMainFrameNavigation: false,

packages/happy-dom/src/browser/detached-browser/DetachedBrowser.ts

@@ -71,8 +71,8 @@ export default class DetachedBrowser implements IBrowser {
 	 *
 	 * @returns Promise.
 	 */
-	public async whenComplete(): Promise<void> {
-		await Promise.all(this.contexts.map((page) => page.whenComplete()));
+	public async waitUntilComplete(): Promise<void> {
+		await Promise.all(this.contexts.map((page) => page.waitUntilComplete()));
 	}
 
 	/**

packages/happy-dom/src/browser/detached-browser/DetachedBrowserContext.ts

@@ -60,8 +60,8 @@ export default class DetachedBrowserContext implements IBrowserContext {
 	 *
 	 * @returns Promise.
 	 */
-	public async whenComplete(): Promise<void> {
-		await Promise.all(this.pages.map((page) => page.whenComplete()));
+	public async waitUntilComplete(): Promise<void> {
+		await Promise.all(this.pages.map((page) => page.waitUntilComplete()));
 	}
 
 	/**

packages/happy-dom/src/browser/detached-browser/DetachedBrowserFrame.ts

@@ -11,7 +11,7 @@ import BrowserFrameScriptEvaluator from '../utilities/BrowserFrameScriptEvaluato
 import BrowserFrameNavigator from '../utilities/BrowserFrameNavigator.js';
 import IBrowserWindow from '../../window/IBrowserWindow.js';
 import IReloadOptions from '../types/IReloadOptions.js';
-import BrowserErrorCapturingEnum from '../enums/BrowserErrorCapturingEnum.js';
+import BrowserErrorCaptureEnum from '../enums/BrowserErrorCaptureEnum.js';
 import BrowserFrameExceptionObserver from '../utilities/BrowserFrameExceptionObserver.js';
 import IDocument from '../../nodes/document/IDocument.js';
 
@@ -27,6 +27,7 @@ export default class DetachedBrowserFrame implements IBrowserFrame {
 	public window: IBrowserWindow;
 	public [PropertySymbol.asyncTaskManager] = new AsyncTaskManager();
 	public [PropertySymbol.exceptionObserver]: BrowserFrameExceptionObserver | null = null;
+	public [PropertySymbol.listeners]: { navigation: Array<() => void> } = { navigation: [] };
 
 	/**
 	 * Constructor.
@@ -41,7 +42,7 @@ export default class DetachedBrowserFrame implements IBrowserFrame {
 		}
 
 		// Attach process level error capturing.
-		if (page.context.browser.settings.errorCapturing === BrowserErrorCapturingEnum.processLevel) {
+		if (page.context.browser.settings.errorCapture === BrowserErrorCaptureEnum.processLevel) {
 			this[PropertySymbol.exceptionObserver] = new BrowserFrameExceptionObserver();
 			this[PropertySymbol.exceptionObserver].observe(this);
 		}
@@ -111,17 +112,22 @@ export default class DetachedBrowserFrame implements IBrowserFrame {
 	}
 
 	/**
-	 * Returns a promise that is resolved when all async tasks are complete.
-	 *
-	 * @returns Promise.
+	 * Returns a promise that is resolved when all resources has been loaded, fetch has completed, and all async tasks such as timers are complete.
 	 */
-	public async whenComplete(): Promise<void> {
+	public async waitUntilComplete(): Promise<void> {
 		await Promise.all([
-			this[PropertySymbol.asyncTaskManager].whenComplete(),
-			...this.childFrames.map((frame) => frame.whenComplete())
+			this[PropertySymbol.asyncTaskManager].waitUntilComplete(),
+			...this.childFrames.map((frame) => frame.waitUntilComplete())
 		]);
 	}
 
+	/**
+	 * Returns a promise that is resolved when the frame has navigated and the response HTML has been written to the document.
+	 */
+	public waitForNavigation(): Promise<void> {
+		return new Promise((resolve) => this[PropertySymbol.listeners].navigation.push(resolve));
+	}
+
 	/**
 	 * Aborts all ongoing operations.
 	 */

packages/happy-dom/src/browser/detached-browser/DetachedBrowserPage.ts

@@ -91,12 +91,17 @@ export default class DetachedBrowserPage implements IBrowserPage {
 	}
 
 	/**
-	 * Returns a promise that is resolved when all async tasks are complete.
-	 *
-	 * @returns Promise.
+	 * Returns a promise that is resolved when all resources has been loaded, fetch has completed, and all async tasks such as timers are complete.
+	 */
+	public waitUntilComplete(): Promise<void> {
+		return this.mainFrame.waitUntilComplete();
+	}
+
+	/**
+	 * Returns a promise that is resolved when the page has navigated and the response HTML has been written to the document.
 	 */
-	public async whenComplete(): Promise<void> {
-		await this.mainFrame.whenComplete();
+	public waitForNavigation(): Promise<void> {
+		return this.mainFrame.waitForNavigation();
 	}
 
 	/**

packages/happy-dom/src/browser/enums/BrowserErrorCaptureEnum.ts

@@ -0,0 +1,10 @@
+enum BrowserErrorCaptureEnum {
+	/** Happy DOM use try and catch when evaluating code, but will not be able to catch all errors and Promise rejections. This will decrease performance as using try and catch makes the execution significally slower. This is the default setting. */
+	tryAndCatch = 'tryAndCatch',
+	/** Happy DOM will add an event listener to the Node.js process to catch all errors and Promise rejections. This will not work in Jest and Vitest as it conflicts with their error listeners. */
+	processLevel = 'processLevel',
+	/** Error capturing is disabled. Errors and Promise rejections will be thrown. */
+	disabled = 'disabled'
+}
+
+export default BrowserErrorCaptureEnum;