happy-dom 14.12.3 → 15.1.0

package/src/browser/utilities/BrowserFrameNavigator.ts

@@ -4,14 +4,13 @@ import IGoToOptions from '../types/IGoToOptions.js';
 import Response from '../../fetch/Response.js';
 import DocumentReadyStateManager from '../../nodes/document/DocumentReadyStateManager.js';
 import BrowserWindow from '../../window/BrowserWindow.js';
-import WindowErrorUtility from '../../window/WindowErrorUtility.js';
-import AbortController from '../../fetch/AbortController.js';
 import BrowserFrameFactory from './BrowserFrameFactory.js';
 import BrowserFrameURL from './BrowserFrameURL.js';
 import BrowserFrameValidator from './BrowserFrameValidator.js';
 import AsyncTaskManager from '../../async-task-manager/AsyncTaskManager.js';
-import BrowserErrorCaptureEnum from '../enums/BrowserErrorCaptureEnum.js';
 import FormData from '../../form-data/FormData.js';
+import HistoryScrollRestorationEnum from '../../history/HistoryScrollRestorationEnum.js';
+import IHistoryItem from '../../history/IHistoryItem.js';
 
 /**
  * Browser frame navigation utility.
@@ -25,9 +24,10 @@ export default class BrowserFrameNavigator {
 	 * @param options.windowClass Window class.
 	 * @param options.frame Frame.
 	 * @param options.url URL.
-	 * @param [options.formData] Form data.
-	 * @param [options.method] Method.
 	 * @param [options.goToOptions] Go to options.
+	 * @param [options.method] Method.
+	 * @param [options.formData] Form data.
+	 * @param [options.disableHistory] Disables adding the navigation to the history.
 	 * @returns Response.
 	 */
 	public static async navigate(options: {
@@ -40,15 +40,25 @@ export default class BrowserFrameNavigator {
 		goToOptions?: IGoToOptions;
 		method?: string;
 		formData?: FormData;
+		disableHistory?: boolean;
 	}): Promise<Response | null> {
-		const { windowClass, frame, url, formData, method, goToOptions } = options;
+		const { windowClass, frame, url, formData, method, goToOptions, disableHistory } = options;
+		const exceptionObserver = frame.page.context.browser[PropertySymbol.exceptionObserver];
 		const referrer = goToOptions?.referrer || frame.window.location.origin;
 		const targetURL = BrowserFrameURL.getRelativeURL(frame, url);
+		const resolveNavigationListeners = (): void => {
+			const listeners = frame[PropertySymbol.listeners].navigation;
+			frame[PropertySymbol.listeners].navigation = [];
+			for (const listener of listeners) {
+				listener();
+			}
+		};
 
 		if (!frame.window) {
 			throw new Error('The frame has been destroyed, the "window" property is not set.');
 		}
 
+		// Javascript protocol
 		if (targetURL.protocol === 'javascript:') {
 			if (frame && !frame.page.context.browser.settings.disableJavaScriptEvaluation) {
 				const readyStateManager = (<
@@ -56,28 +66,26 @@ export default class BrowserFrameNavigator {
 				>(<unknown>frame.window))[PropertySymbol.readyStateManager];
 
 				readyStateManager.startTask();
-
-				// The browser will wait for the next tick before executing the script.
-				await new Promise((resolve) => frame.page.mainFrame.window.setTimeout(resolve));
-
 				const code =
 					'//# sourceURL=' + frame.url + '\n' + targetURL.href.replace('javascript:', '');
 
-				if (
-					frame.page.context.browser.settings.disableErrorCapturing ||
-					frame.page.context.browser.settings.errorCapture !== BrowserErrorCaptureEnum.tryAndCatch
-				) {
-					frame.window.eval(code);
-				} else {
-					WindowErrorUtility.captureError(frame.window, () => frame.window.eval(code));
-				}
+				// The browser will wait for the next tick before executing the script.
+				// Fixes issue where evaluating the response can throw an error.
+				// By using requestAnimationFrame() the error will not reject the promise.
+				// The error will be caught by process error level listener or a try and catch in the requestAnimationFrame().
+				frame.window.requestAnimationFrame(() => frame.window.eval(code));
+
+				// We need to wait for the next tick before resolving navigation listeners and ending the ready state task.
+				await new Promise((resolve) => frame.window.setTimeout(() => resolve(null)));
 
 				readyStateManager.endTask();
+				resolveNavigationListeners();
 			}
 
 			return null;
 		}
 
+		// Validate navigation
 		if (!BrowserFrameValidator.validateCrossOriginPolicy(frame, targetURL)) {
 			return null;
 		}
@@ -90,44 +98,88 @@ export default class BrowserFrameNavigator {
 			return null;
 		}
 
-		const width = frame.window.innerWidth;
-		const height = frame.window.innerHeight;
-		const devicePixelRatio = frame.window.devicePixelRatio;
-		const parentWindow = frame.window.parent !== frame.window ? frame.window.parent : null;
-		const topWindow = frame.window.top !== frame.window ? frame.window.top : null;
+		// History management.
+		if (!disableHistory) {
+			const history = frame[PropertySymbol.history];
+
+			for (let i = history.length - 1; i >= 0; i--) {
+				if (history[i].isCurrent) {
+					history[i].isCurrent = false;
 
-		for (const childFrame of frame.childFrames) {
-			BrowserFrameFactory.destroyFrame(childFrame);
+					// We need to remove all history items after the current one.
+					history.length = i + 1;
+					break;
+				}
+			}
+
+			history.push({
+				title: '',
+				href: targetURL.href,
+				state: null,
+				scrollRestoration: HistoryScrollRestorationEnum.auto,
+				method: method || (formData ? 'POST' : 'GET'),
+				formData: formData || null,
+				isCurrent: true
+			});
 		}
 
-		(<IBrowserFrame[]>frame.childFrames) = [];
-		frame.window[PropertySymbol.destroy]();
-		frame[PropertySymbol.asyncTaskManager].destroy();
-		frame[PropertySymbol.asyncTaskManager] = new AsyncTaskManager();
+		// Store current Window state
+		const previousWindow = frame.window;
+		const previousAsyncTaskManager = frame[PropertySymbol.asyncTaskManager];
+		const width = previousWindow.innerWidth;
+		const height = previousWindow.innerHeight;
+		const devicePixelRatio = previousWindow.devicePixelRatio;
+		const parentWindow = frame.parentFrame ? frame.parentFrame.window : frame.page.mainFrame.window;
+		const topWindow = frame.page.mainFrame.window;
 
+		// Create new Window
+		frame[PropertySymbol.asyncTaskManager] = new AsyncTaskManager(frame);
 		(<BrowserWindow>frame.window) = new windowClass(frame, { url: targetURL.href, width, height });
-		(<BrowserWindow>frame.window.parent) = parentWindow;
-		(<BrowserWindow>frame.window.top) = topWindow;
+		frame.window[PropertySymbol.parent] = parentWindow;
+		frame.window[PropertySymbol.top] = topWindow;
 		(<number>frame.window.devicePixelRatio) = devicePixelRatio;
 
+		if (exceptionObserver) {
+			exceptionObserver.observe(frame.window);
+		}
+
 		if (referrer) {
 			frame.window.document[PropertySymbol.referrer] = referrer;
 		}
 
+		// Destroy child frames and Window
+		const destroyTaskID = frame[PropertySymbol.asyncTaskManager].startTask();
+		const destroyWindowAndAsyncTaskManager = (): void => {
+			previousAsyncTaskManager.destroy().then(() => {
+				if (exceptionObserver) {
+					exceptionObserver.disconnect(previousWindow);
+				}
+				frame[PropertySymbol.asyncTaskManager].endTask(destroyTaskID);
+			});
+
+			previousWindow[PropertySymbol.destroy]();
+		};
+
+		if (frame.childFrames.length) {
+			Promise.all(
+				frame.childFrames.map((childFrame) => BrowserFrameFactory.destroyFrame(childFrame))
+			).then(destroyWindowAndAsyncTaskManager);
+		} else {
+			destroyWindowAndAsyncTaskManager();
+		}
+
+		// About protocol
 		if (targetURL.protocol === 'about:') {
+			await new Promise((resolve) => frame.page.mainFrame.window.requestAnimationFrame(resolve));
+			resolveNavigationListeners();
 			return null;
 		}
 
+		// Start navigation
 		const readyStateManager = (<{ [PropertySymbol.readyStateManager]: DocumentReadyStateManager }>(
 			(<unknown>frame.window)
 		))[PropertySymbol.readyStateManager];
-
-		readyStateManager.startTask();
-
-		const abortController = new AbortController();
-		let response: Response;
-		let responseText: string;
-
+		const abortController = new frame.window.AbortController();
 		const timeout = frame.window.setTimeout(
 			() => abortController.abort(new Error('Request timed out.')),
 			goToOptions?.timeout ?? 30000
@@ -135,12 +187,12 @@ export default class BrowserFrameNavigator {
 		const finalize = (): void => {
 			frame.window.clearTimeout(timeout);
 			readyStateManager.endTask();
-			const listeners = frame[PropertySymbol.listeners].navigation;
-			frame[PropertySymbol.listeners].navigation = [];
-			for (const listener of listeners) {
-				listener();
-			}
+			resolveNavigationListeners();
 		};
+		let response: Response;
+		let responseText: string;
+
+		readyStateManager.startTask();
 
 		try {
 			response = await frame.window.fetch(targetURL.href, {
@@ -175,13 +227,19 @@ export default class BrowserFrameNavigator {
 			frame.page.console.error(`GET ${targetURL.href} ${response.status} (${response.statusText})`);
 		}
 
+		// The frame may be destroyed during teardown.
+		if (!frame.window) {
+			return;
+		}
+
 		// Fixes issue where evaluating the response can throw an error.
 		// By using requestAnimationFrame() the error will not reject the promise.
 		// The error will be caught by process error level listener or a try and catch in the requestAnimationFrame().
 		frame.window.requestAnimationFrame(() => (frame.content = responseText));
 
+		// Finalize the navigation
 		await new Promise((resolve) =>
-			frame.window.requestAnimationFrame(() => {
+			frame.window.setTimeout(() => {
 				finalize();
 				resolve(null);
 			})
@@ -189,4 +247,241 @@ export default class BrowserFrameNavigator {
 
 		return response;
 	}
+
+	/**
+	 * Navigates back in history.
+	 *
+	 * @param options Options.
+	 * @param options.windowClass Window class.
+	 * @param options.frame Frame.
+	 * @param [options.goToOptions] Go to options.
+	 */
+	public static navigateBack(options: {
+		windowClass: new (
+			browserFrame: IBrowserFrame,
+			options?: { url?: string; width?: number; height?: number }
+		) => BrowserWindow;
+		frame: IBrowserFrame;
+		goToOptions?: IGoToOptions;
+	}): Promise<Response | null> {
+		const { windowClass, frame, goToOptions } = options;
+		const history = frame[PropertySymbol.history];
+		let historyItem: IHistoryItem;
+
+		for (let i = history.length - 1; i >= 0; i--) {
+			if (history[i].isCurrent) {
+				if (i > 0) {
+					history[i].isCurrent = false;
+					historyItem = history[i - 1];
+				}
+				break;
+			}
+		}
+
+		if (!historyItem) {
+			return new Promise((resolve) => {
+				frame.window.requestAnimationFrame(() => {
+					const listeners = frame[PropertySymbol.listeners].navigation;
+					frame[PropertySymbol.listeners].navigation = [];
+					for (const listener of listeners) {
+						listener();
+					}
+					resolve(null);
+				});
+			});
+		}
+
+		historyItem.isCurrent = true;
+
+		return BrowserFrameNavigator.navigate({
+			windowClass,
+			frame,
+			goToOptions: {
+				...goToOptions,
+				referrer: frame.url
+			},
+			url: historyItem.href,
+			method: historyItem.method,
+			formData: historyItem.formData,
+			disableHistory: true
+		});
+	}
+
+	/**
+	 * Navigates forward in history.
+	 *
+	 * @param options Options.
+	 * @param options.windowClass Window class.
+	 * @param options.frame Frame.
+	 * @param [options.goToOptions] Go to options.
+	 */
+	public static navigateForward(options: {
+		windowClass: new (
+			browserFrame: IBrowserFrame,
+			options?: { url?: string; width?: number; height?: number }
+		) => BrowserWindow;
+		frame: IBrowserFrame;
+		goToOptions?: IGoToOptions;
+	}): Promise<Response | null> {
+		const { windowClass, frame, goToOptions } = options;
+		const history = frame[PropertySymbol.history];
+		let historyItem: IHistoryItem;
+
+		for (let i = history.length - 1; i >= 0; i--) {
+			if (history[i].isCurrent) {
+				if (i < history.length - 1) {
+					history[i].isCurrent = false;
+					historyItem = history[i + 1];
+				}
+				break;
+			}
+		}
+
+		if (!historyItem) {
+			return new Promise((resolve) => {
+				frame.window.requestAnimationFrame(() => {
+					const listeners = frame[PropertySymbol.listeners].navigation;
+					frame[PropertySymbol.listeners].navigation = [];
+					for (const listener of listeners) {
+						listener();
+					}
+					resolve(null);
+				});
+			});
+		}
+
+		historyItem.isCurrent = true;
+
+		return BrowserFrameNavigator.navigate({
+			windowClass,
+			frame,
+			goToOptions: {
+				...goToOptions,
+				referrer: frame.url
+			},
+			url: historyItem.href,
+			method: historyItem.method,
+			formData: historyItem.formData,
+			disableHistory: true
+		});
+	}
+
+	/**
+	 * Navigates steps in history.
+	 *
+	 * @param options Options.
+	 * @param options.windowClass Window class.
+	 * @param options.frame Frame.
+	 * @param options.goToOptions Go to options.
+	 * @param options.steps Steps.
+	 */
+	public static navigateSteps(options: {
+		windowClass: new (
+			browserFrame: IBrowserFrame,
+			options?: { url?: string; width?: number; height?: number }
+		) => BrowserWindow;
+		frame: IBrowserFrame;
+		goToOptions?: IGoToOptions;
+		steps?: number;
+	}): Promise<Response | null> {
+		if (!options.steps) {
+			return this.reload(options);
+		}
+
+		const { windowClass, frame, goToOptions, steps } = options;
+		const history = frame[PropertySymbol.history];
+		let historyItem: IHistoryItem;
+
+		for (let i = history.length - 1; i >= 0; i--) {
+			if (history[i].isCurrent) {
+				if (history[i + steps]) {
+					history[i].isCurrent = false;
+					historyItem = history[i + steps];
+				}
+				break;
+			}
+		}
+
+		if (!historyItem) {
+			return new Promise((resolve) => {
+				frame.window.requestAnimationFrame(() => {
+					const listeners = frame[PropertySymbol.listeners].navigation;
+					frame[PropertySymbol.listeners].navigation = [];
+					for (const listener of listeners) {
+						listener();
+					}
+					resolve(null);
+				});
+			});
+		}
+
+		historyItem.isCurrent = true;
+
+		return BrowserFrameNavigator.navigate({
+			windowClass,
+			frame,
+			goToOptions: {
+				...goToOptions,
+				referrer: frame.url
+			},
+			url: historyItem.href,
+			method: historyItem.method,
+			formData: historyItem.formData,
+			disableHistory: true
+		});
+	}
+
+	/**
+	 * Reloads the current history item.
+	 *
+	 * @param options Options.
+	 * @param options.windowClass Window class.
+	 * @param options.frame Frame.
+	 * @param options.goToOptions Go to options.
+	 */
+	public static reload(options: {
+		windowClass: new (
+			browserFrame: IBrowserFrame,
+			options?: { url?: string; width?: number; height?: number }
+		) => BrowserWindow;
+		frame: IBrowserFrame;
+		goToOptions?: IGoToOptions;
+	}): Promise<Response | null> {
+		const { windowClass, frame, goToOptions } = options;
+		const history = frame[PropertySymbol.history];
+		let historyItem: IHistoryItem;
+
+		for (let i = history.length - 1; i >= 0; i--) {
+			if (history[i].isCurrent) {
+				historyItem = history[i];
+				break;
+			}
+		}
+
+		if (!historyItem) {
+			return new Promise((resolve) => {
+				frame.window.requestAnimationFrame(() => {
+					const listeners = frame[PropertySymbol.listeners].navigation;
+					frame[PropertySymbol.listeners].navigation = [];
+					for (const listener of listeners) {
+						listener();
+					}
+					resolve(null);
+				});
+			});
+		}
+
+		return BrowserFrameNavigator.navigate({
+			windowClass,
+			frame,
+			goToOptions: {
+				...goToOptions,
+				referrer: frame.url
+			},
+			url: historyItem.href,
+			method: historyItem.method,
+			formData: historyItem.formData,
+			disableHistory: true
+		});
+	}
 }

package/src/clipboard/Clipboard.ts

@@ -1,4 +1,3 @@
-import DOMException from '../exception/DOMException.js';
 import BrowserWindow from '../window/BrowserWindow.js';
 import ClipboardItem from './ClipboardItem.js';
 import Blob from '../file/Blob.js';
@@ -10,16 +9,19 @@ import Blob from '../file/Blob.js';
  * https://developer.mozilla.org/en-US/docs/Web/API/Clipboard.
  */
 export default class Clipboard {
-	#ownerWindow: BrowserWindow;
+	#window: BrowserWindow;
 	#data: ClipboardItem[] = [];
 
 	/**
 	 * Constructor.
 	 *
-	 * @param ownerWindow Owner window.
+	 * @param window Owner window.
 	 */
-	constructor(ownerWindow: BrowserWindow) {
-		this.#ownerWindow = ownerWindow;
+	constructor(window: BrowserWindow) {
+		if (!window) {
+			throw new TypeError('Illegal constructor');
+		}
+		this.#window = window;
 	}
 
 	/**
@@ -28,11 +30,13 @@ export default class Clipboard {
 	 * @returns Data.
 	 */
 	public async read(): Promise<ClipboardItem[]> {
-		const permissionStatus = await this.#ownerWindow.navigator.permissions.query({
+		const permissionStatus = await this.#window.navigator.permissions.query({
 			name: 'clipboard-read'
 		});
 		if (permissionStatus.state === 'denied') {
-			throw new DOMException(`Failed to execute 'read' on 'Clipboard': The request is not allowed`);
+			throw new this.#window.DOMException(
+				`Failed to execute 'read' on 'Clipboard': The request is not allowed`
+			);
 		}
 		return this.#data;
 	}
@@ -43,11 +47,11 @@ export default class Clipboard {
 	 * @returns Text.
 	 */
 	public async readText(): Promise<string> {
-		const permissionStatus = await this.#ownerWindow.navigator.permissions.query({
+		const permissionStatus = await this.#window.navigator.permissions.query({
 			name: 'clipboard-read'
 		});
 		if (permissionStatus.state === 'denied') {
-			throw new DOMException(
+			throw new this.#window.DOMException(
 				`Failed to execute 'readText' on 'Clipboard': The request is not allowed`
 			);
 		}
@@ -72,11 +76,11 @@ export default class Clipboard {
 	 * @param data Data.
 	 */
 	public async write(data: ClipboardItem[]): Promise<void> {
-		const permissionStatus = await this.#ownerWindow.navigator.permissions.query({
+		const permissionStatus = await this.#window.navigator.permissions.query({
 			name: 'clipboard-write'
 		});
 		if (permissionStatus.state === 'denied') {
-			throw new DOMException(
+			throw new this.#window.DOMException(
 				`Failed to execute 'write' on 'Clipboard': The request is not allowed`
 			);
 		}
@@ -89,14 +93,16 @@ export default class Clipboard {
 	 * @param text Text.
 	 */
 	public async writeText(text: string): Promise<void> {
-		const permissionStatus = await this.#ownerWindow.navigator.permissions.query({
+		const permissionStatus = await this.#window.navigator.permissions.query({
 			name: 'clipboard-write'
 		});
 		if (permissionStatus.state === 'denied') {
-			throw new DOMException(
+			throw new this.#window.DOMException(
 				`Failed to execute 'writeText' on 'Clipboard': The request is not allowed`
 			);
 		}
-		this.#data = [new ClipboardItem({ 'text/plain': new Blob([text], { type: 'text/plain' }) })];
+		this.#data = [
+			new this.#window.ClipboardItem({ 'text/plain': new Blob([text], { type: 'text/plain' }) })
+		];
 	}
 }