happy-dom 8.8.0 → 9.0.0

package/src/nodes/parent-node/ParentNodeUtility.ts

@@ -1,11 +1,10 @@
-import QuerySelector from '../../query-selector/QuerySelector';
 import XMLParser from '../../xml-parser/XMLParser';
 import IDocumentFragment from '../document-fragment/IDocumentFragment';
 import IDocument from '../document/IDocument';
 import IElement from '../element/IElement';
 import IHTMLCollection from '../element/IHTMLCollection';
 import INode from '../node/INode';
-import HTMLCollectionFactory from '../element/HTMLCollectionFactory';
+import HTMLCollection from '../element/HTMLCollection';
 
 /**
  * Parent node utility.
@@ -78,10 +77,21 @@ export default class ParentNodeUtility {
 	 * @returns Matching element.
 	 */
 	public static getElementsByClassName(
-		parentNode: INode,
+		parentNode: IElement | IDocumentFragment | IDocument,
 		className: string
-	): IHTMLCollection<IElement> {
-		return QuerySelector.querySelectorAll(parentNode, '.' + className.split(' ').join('.'));
+	): IHTMLCollection<IElement, IElement> {
+		let matches = new HTMLCollection<IElement, IElement>();
+
+		for (const child of parentNode.children) {
+			if (child.className.split(' ').includes(className)) {
+				matches.push(child);
+			}
+			matches = <HTMLCollection<IElement, IElement>>(
+				matches.concat(this.getElementsByClassName(<IElement>child, className))
+			);
+		}
+
+		return matches;
 	}
 
 	/**
@@ -94,18 +104,18 @@ export default class ParentNodeUtility {
 	public static getElementsByTagName(
 		parentNode: IElement | IDocumentFragment | IDocument,
 		tagName: string
-	): IHTMLCollection<IElement> {
+	): IHTMLCollection<IElement, IElement> {
 		const upperTagName = tagName.toUpperCase();
-		const matches = HTMLCollectionFactory.create();
 		const includeAll = tagName === '*';
+		let matches = new HTMLCollection<IElement, IElement>();
 
 		for (const child of parentNode.children) {
 			if (includeAll || child.tagName === upperTagName) {
 				matches.push(child);
 			}
-			for (const match of this.getElementsByTagName(<IElement>child, tagName)) {
-				matches.push(match);
-			}
+			matches = <HTMLCollection<IElement, IElement>>(
+				matches.concat(this.getElementsByTagName(<IElement>child, tagName))
+			);
 		}
 
 		return matches;
@@ -123,18 +133,18 @@ export default class ParentNodeUtility {
 		parentNode: IElement | IDocumentFragment | IDocument,
 		namespaceURI: string,
 		tagName: string
-	): IHTMLCollection<IElement> {
+	): IHTMLCollection<IElement, IElement> {
 		const upperTagName = tagName.toUpperCase();
-		const matches = HTMLCollectionFactory.create();
 		const includeAll = tagName === '*';
+		let matches = new HTMLCollection<IElement, IElement>();
 
 		for (const child of parentNode.children) {
 			if ((includeAll || child.tagName === upperTagName) && child.namespaceURI === namespaceURI) {
 				matches.push(child);
 			}
-			for (const match of this.getElementsByTagNameNS(<IElement>child, namespaceURI, tagName)) {
-				matches.push(match);
-			}
+			matches = <HTMLCollection<IElement, IElement>>(
+				matches.concat(this.getElementsByTagNameNS(<IElement>child, namespaceURI, tagName))
+			);
 		}
 
 		return matches;

package/src/nodes/text/Text.ts

@@ -3,6 +3,8 @@ import CharacterData from '../character-data/CharacterData';
 import IText from './IText';
 import DOMException from '../../exception/DOMException';
 import DOMExceptionNameEnum from '../../exception/DOMExceptionNameEnum';
+import HTMLTextAreaElement from '../html-text-area-element/HTMLTextAreaElement';
+import INode from '../node/INode';
 
 /**
  * Text node.
@@ -19,6 +21,24 @@ export default class Text extends CharacterData implements IText {
 		return '#text';
 	}
 
+	/**
+	 * @override
+	 */
+	public override get data(): string {
+		return this._data;
+	}
+
+	/**
+	 * @override
+	 */
+	public override set data(data: string) {
+		super.data = data;
+
+		if (this._textAreaNode) {
+			(<HTMLTextAreaElement>this._textAreaNode)._resetSelection();
+		}
+	}
+
 	/**
 	 * Breaks the Text node into two nodes at the specified offset, keeping both nodes in the tree as siblings.
 	 *
@@ -69,4 +89,22 @@ export default class Text extends CharacterData implements IText {
 	public cloneNode(deep = false): IText {
 		return <Text>super.cloneNode(deep);
 	}
+
+	/**
+	 * @override
+	 */
+	public override _connectToNode(parentNode: INode = null): void {
+		const oldTextAreaNode = <HTMLTextAreaElement>this._textAreaNode;
+
+		super._connectToNode(parentNode);
+
+		if (oldTextAreaNode !== this._textAreaNode) {
+			if (oldTextAreaNode) {
+				oldTextAreaNode._resetSelection();
+			}
+			if (this._textAreaNode) {
+				(<HTMLTextAreaElement>this._textAreaNode)._resetSelection();
+			}
+		}
+	}
 }

package/src/query-selector/QuerySelector.ts

@@ -4,7 +4,7 @@ import INode from '../nodes/node/INode';
 import Node from '../nodes/node/Node';
 import INodeList from '../nodes/node/INodeList';
 import SelectorItem from './SelectorItem';
-import NodeListFactory from '../nodes/node/NodeListFactory';
+import NodeList from '../nodes/node/NodeList';
 
 const SELECTOR_PART_REGEXP = /(\[[^\]]+\]|[a-zA-Z0-9-_.#"*:()\]]+)|([ ,>]+)/g;
 
@@ -22,7 +22,7 @@ export default class QuerySelector {
 	 * @returns HTML elements.
 	 */
 	public static querySelectorAll(node: INode, selector: string): INodeList<IElement> {
-		const matches = <INodeList<IElement>>NodeListFactory.create();
+		const matches = new NodeList<IElement>();
 
 		for (const parts of this.getSelectorParts(selector)) {
 			for (const element of this.findAll(node, [node], parts)) {

package/src/query-selector/SelectorItem.ts

@@ -1,6 +1,7 @@
 import DOMException from '../exception/DOMException';
 import IElement from '../nodes/element/IElement';
 import Element from '../nodes/element/Element';
+import IHTMLInputElement from '../nodes/html-input-element/IHTMLInputElement';
 
 const ATTRIBUTE_REGEXP =
 	/\[([a-zA-Z0-9-_]+)\]|\[([a-zA-Z0-9-_]+)([~|^$*]{0,1})[ ]*=[ ]*["']{0,1}([^"']+)["']{0,1}\]/g;
@@ -252,6 +253,8 @@ export default class SelectorItem {
 					}
 				}
 				return isFound;
+			case 'checked':
+				return element.tagName === 'INPUT' && (<IHTMLInputElement>element).checked;
 		}
 
 		return false;

package/src/validity-state/ValidityState.ts

@@ -0,0 +1,211 @@
+import IHTMLButtonElement from '../nodes/html-button-element/IHTMLButtonElement';
+import IHTMLFormElement from '../nodes/html-form-element/IHTMLFormElement';
+import HTMLInputElement from '../nodes/html-input-element/HTMLInputElement';
+import IHTMLInputElement from '../nodes/html-input-element/IHTMLInputElement';
+import IHTMLSelectElement from '../nodes/html-select-element/IHTMLSelectElement';
+import HTMLTextAreaElement from '../nodes/html-text-area-element/HTMLTextAreaElement';
+import IHTMLTextAreaElement from '../nodes/html-text-area-element/IHTMLTextAreaElement';
+import IShadowRoot from '../nodes/shadow-root/IShadowRoot';
+
+const EMAIL_REGEXP =
+	/^([^\x00-\x20\x22\x28\x29\x2c\x2e\x3a-\x3c\x3e\x40\x5b-\x5d\x7f-\xff]+|\x22([^\x0d\x22\x5c\x80-\xff]|\x5c[\x00-\x7f])*\x22)(\x2e([^\x00-\x20\x22\x28\x29\x2c\x2e\x3a-\x3c\x3e\x40\x5b-\x5d\x7f-\xff]+|\x22([^\x0d\x22\x5c\x80-\xff]|\x5c[\x00-\x7f])*\x22))*\x40([^\x00-\x20\x22\x28\x29\x2c\x2e\x3a-\x3c\x3e\x40\x5b-\x5d\x7f-\xff]+|\x5b([^\x0d\x5b-\x5d\x80-\xff]|\x5c[\x00-\x7f])*\x5d)(\x2e([^\x00-\x20\x22\x28\x29\x2c\x2e\x3a-\x3c\x3e\x40\x5b-\x5d\x7f-\xff]+|\x5b([^\x0d\x5b-\x5d\x80-\xff]|\x5c[\x00-\x7f])*\x5d))*$/;
+const URL_REGEXP =
+	/^(?:(?:https?|HTTPS?|ftp|FTP):\/\/)(?:\S+(?::\S*)?@)?(?:(?!(?:10|127)(?:\.\d{1,3}){3})(?!(?:169\.254|192\.168)(?:\.\d{1,3}){2})(?!172\.(?:1[6-9]|2\d|3[0-1])(?:\.\d{1,3}){2})(?:[1-9]\d?|1\d\d|2[01]\d|22[0-3])(?:\.(?:1?\d{1,2}|2[0-4]\d|25[0-5])){2}(?:\.(?:[1-9]\d?|1\d\d|2[0-4]\d|25[0-4]))|(?:(?:[a-zA-Z\u00a1-\uffff0-9]-*)*[a-zA-Z\u00a1-\uffff0-9]+)(?:\.(?:[a-zA-Z\u00a1-\uffff0-9]-*)*[a-zA-Z\u00a1-\uffff0-9]+)*)(?::\d{2,5})?(?:[\/?#]\S*)?$/;
+
+/**
+ * Input validity state.
+ *
+ * Based on:
+ * https://github.com/cferdinandi/validate/blob/master/src/js/_validityState.polyfill.js
+ *
+ * @see https://developer.mozilla.org/en-US/docs/Web/API/ValidityState
+ */
+export default class ValidityState {
+	private element:
+		| IHTMLInputElement
+		| IHTMLTextAreaElement
+		| IHTMLSelectElement
+		| IHTMLButtonElement;
+
+	/**
+	 * Constructor.
+	 *
+	 * @param element Input element.
+	 */
+	constructor(
+		element: IHTMLInputElement | IHTMLTextAreaElement | IHTMLSelectElement | IHTMLButtonElement
+	) {
+		this.element = element;
+	}
+
+	/**
+	 * Returns validity.
+	 *
+	 * @returns "true" if valid.
+	 */
+	public get badInput(): boolean {
+		return (
+			this.element instanceof HTMLInputElement &&
+			(this.element.type === 'number' || this.element.type === 'range') &&
+			this.element.value.length > 0 &&
+			!/^[-+]?(?:\d+|\d*[.,]\d+)$/.test(this.element.value)
+		);
+	}
+
+	/**
+	 * Returns validity.
+	 *
+	 * @returns "true" if valid.
+	 */
+	public get customError(): boolean {
+		return this.element.validationMessage.length > 0;
+	}
+
+	/**
+	 * Returns validity.
+	 *
+	 * @returns "true" if valid.
+	 */
+	public get patternMismatch(): boolean {
+		return (
+			this.element instanceof HTMLInputElement &&
+			this.element.hasAttribute('pattern') &&
+			this.element.value.length > 0 &&
+			this.element.value.replace(new RegExp(this.element.getAttribute('pattern')), '').length > 0
+		);
+	}
+
+	/**
+	 * Returns validity.
+	 *
+	 * @returns "true" if valid.
+	 */
+	public get rangeOverflow(): boolean {
+		return (
+			this.element instanceof HTMLInputElement &&
+			this.element.hasAttribute('max') &&
+			(this.element.type === 'number' || this.element.type === 'range') &&
+			this.element.value.length > 0 &&
+			Number(this.element.value) > Number(this.element.getAttribute('max'))
+		);
+	}
+
+	/**
+	 * Returns validity.
+	 *
+	 * @returns "true" if valid.
+	 */
+	public get rangeUnderflow(): boolean {
+		return (
+			this.element instanceof HTMLInputElement &&
+			this.element.hasAttribute('min') &&
+			(this.element.type === 'number' || this.element.type === 'range') &&
+			this.element.value.length > 0 &&
+			Number(this.element.value) < Number(this.element.getAttribute('min'))
+		);
+	}
+
+	/**
+	 * Returns validity.
+	 *
+	 * @returns "true" if valid.
+	 */
+	public get stepMismatch(): boolean {
+		return (
+			this.element instanceof HTMLInputElement &&
+			(this.element.type === 'number' || this.element.type === 'range') &&
+			((this.element.hasAttribute('step') &&
+				this.element.getAttribute('step') !== 'any' &&
+				Number(this.element.value) % Number(this.element.getAttribute('step')) !== 0) ||
+				(!this.element.hasAttribute('step') && Number(this.element.value) % 1 !== 0))
+		);
+	}
+
+	/**
+	 * Returns validity.
+	 *
+	 * @returns "true" if valid.
+	 */
+	public get tooLong(): boolean {
+		return (
+			(this.element instanceof HTMLInputElement || this.element instanceof HTMLTextAreaElement) &&
+			this.element.maxLength > 0 &&
+			this.element.value.length > this.element.maxLength
+		);
+	}
+
+	/**
+	 * Returns validity.
+	 *
+	 * @returns "true" if valid.
+	 */
+	public get tooShort(): boolean {
+		return (
+			(this.element instanceof HTMLInputElement || this.element instanceof HTMLTextAreaElement) &&
+			this.element.minLength > 0 &&
+			this.element.value.length > 0 &&
+			this.element.value.length < this.element.minLength
+		);
+	}
+
+	/**
+	 * Returns validity.
+	 *
+	 * @returns "true" if valid.
+	 */
+	public get typeMismatch(): boolean {
+		return (
+			this.element instanceof HTMLInputElement &&
+			this.element.value.length > 0 &&
+			((this.element.type === 'email' && !EMAIL_REGEXP.test(this.element.value)) ||
+				(this.element.type === 'url' && !URL_REGEXP.test(this.element.value)))
+		);
+	}
+
+	/**
+	 * Returns validity.
+	 *
+	 * @returns "true" if valid.
+	 */
+	public get valueMissing(): boolean {
+		if (!(<IHTMLInputElement>this.element).required) {
+			return false;
+		}
+		if (this.element instanceof HTMLInputElement) {
+			if (this.element.type === 'checkbox') {
+				return !this.element.checked;
+			} else if (this.element.type === 'radio') {
+				if (this.element.checked) {
+					return false;
+				}
+				if (!this.element.name) {
+					return true;
+				}
+				const root =
+					<IHTMLFormElement>this.element._formNode || <IShadowRoot>this.element.getRootNode();
+				return !root || !root.querySelector(`input[name="${this.element.name}"]:checked`);
+			}
+		}
+		return this.element.value.length === 0;
+	}
+
+	/**
+	 * Returns validity.
+	 *
+	 * @returns "true" if valid.
+	 */
+	public get valid(): boolean {
+		return (
+			!this.badInput &&
+			!this.customError &&
+			!this.patternMismatch &&
+			!this.rangeOverflow &&
+			!this.rangeUnderflow &&
+			!this.stepMismatch &&
+			!this.tooLong &&
+			!this.tooShort &&
+			!this.typeMismatch &&
+			!this.valueMissing
+		);
+	}
+}

package/src/window/GlobalWindow.ts

@@ -64,8 +64,6 @@ export default class GlobalWindow extends Window {
 	public unescape = globalThis.unescape;
 	public gc = globalThis.gc;
 	public v8debug = globalThis.v8debug;
-	public AbortController = globalThis.AbortController;
-	public AbortSignal = globalThis.AbortSignal;
 	public Array = globalThis.Array;
 	public Object = globalThis.Object;
 	public Function = globalThis.Function;

package/src/window/INodeJSGlobal.ts

@@ -0,0 +1,70 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+
+interface INodeJSGlobal {
+	Array: typeof Array;
+	ArrayBuffer: typeof ArrayBuffer;
+	Boolean: typeof Boolean;
+	Buffer: typeof Buffer;
+	DataView: typeof DataView;
+	Date: typeof Date;
+	Error: typeof Error;
+	EvalError: typeof EvalError;
+	Float32Array: typeof Float32Array;
+	Float64Array: typeof Float64Array;
+	Function: typeof Function;
+	Infinity: typeof Infinity;
+	Int16Array: typeof Int16Array;
+	Int32Array: typeof Int32Array;
+	Int8Array: typeof Int8Array;
+	Intl: typeof Intl;
+	JSON: typeof JSON;
+	Map: MapConstructor;
+	Math: typeof Math;
+	NaN: typeof NaN;
+	Number: typeof Number;
+	Object: typeof Object;
+	Promise: typeof Promise;
+	RangeError: typeof RangeError;
+	ReferenceError: typeof ReferenceError;
+	RegExp: typeof RegExp;
+	Set: SetConstructor;
+	String: typeof String;
+	Symbol: Function;
+	SyntaxError: typeof SyntaxError;
+	TypeError: typeof TypeError;
+	URIError: typeof URIError;
+	Uint16Array: typeof Uint16Array;
+	Uint32Array: typeof Uint32Array;
+	Uint8Array: typeof Uint8Array;
+	Uint8ClampedArray: typeof Uint8ClampedArray;
+	WeakMap: WeakMapConstructor;
+	WeakSet: WeakSetConstructor;
+	clearImmediate: (immediateId: NodeJS.Immediate) => void;
+	clearInterval: (intervalId: NodeJS.Timeout) => void;
+	clearTimeout: (timeoutId: NodeJS.Timeout) => void;
+	decodeURI: typeof decodeURI;
+	decodeURIComponent: typeof decodeURIComponent;
+	encodeURI: typeof encodeURI;
+	encodeURIComponent: typeof encodeURIComponent;
+	/**
+	 * @deprecated
+	 */
+	escape: (str: string) => string;
+	eval: typeof eval;
+	global: NodeJS.Global;
+	isFinite: typeof isFinite;
+	isNaN: typeof isNaN;
+	parseFloat: typeof parseFloat;
+	parseInt: typeof parseInt;
+	setImmediate: (callback: (...args: any[]) => void, ...args: any[]) => NodeJS.Immediate;
+	setInterval: (callback: (...args: any[]) => void, ms?: number, ...args: any[]) => NodeJS.Timeout;
+	setTimeout: (callback: (...args: any[]) => void, ms?: number, ...args: any[]) => NodeJS.Timeout;
+	queueMicrotask: typeof queueMicrotask;
+	undefined: typeof undefined;
+	/**
+	 * @deprecated
+	 */
+	unescape: (str: string) => string;
+	gc: () => void;
+	v8debug?: any;
+}

package/src/window/IWindow.ts

@@ -63,6 +63,7 @@ import CSSKeyframeRule from '../css/rules/CSSKeyframeRule';
 import CSSKeyframesRule from '../css/rules/CSSKeyframesRule';
 import CSSMediaRule from '../css/rules/CSSMediaRule';
 import CSSStyleRule from '../css/rules/CSSStyleRule';
+import CSSSupportsRule from '../css/rules/CSSSupportsRule';
 import PointerEvent from '../event/events/PointerEvent';
 import MouseEvent from '../event/events/MouseEvent';
 import FocusEvent from '../event/events/FocusEvent';
@@ -81,6 +82,7 @@ import AsyncTaskManager from '../async-task-manager/AsyncTaskManager';
 import Storage from '../storage/Storage';
 import NodeFilter from '../tree-walker/NodeFilter';
 import HTMLCollection from '../nodes/element/HTMLCollection';
+import HTMLFormControlsCollection from '../nodes/html-form-element/HTMLFormControlsCollection';
 import NodeList from '../nodes/node/NodeList';
 import Selection from '../selection/Selection';
 import IEventTarget from '../event/IEventTarget';
@@ -89,11 +91,11 @@ import MimeType from '../navigator/MimeType';
 import MimeTypeArray from '../navigator/MimeTypeArray';
 import Plugin from '../navigator/Plugin';
 import PluginArray from '../navigator/PluginArray';
-import IResponseInit from '../fetch/IResponseInit';
-import IRequest from '../fetch/IRequest';
-import IHeaders from '../fetch/IHeaders';
-import IRequestInit from '../fetch/IRequestInit';
-import IResponse from '../fetch/IResponse';
+import IResponseInit from '../fetch/types/IResponseInit';
+import IRequest from '../fetch/types/IRequest';
+import IHeaders from '../fetch/types/IHeaders';
+import IRequestInit from '../fetch/types/IRequestInit';
+import IResponse from '../fetch/types/IResponse';
 import Range from '../range/Range';
 import MediaQueryList from '../match-media/MediaQueryList';
 import XMLHttpRequest from '../xml-http-request/XMLHttpRequest';
@@ -107,13 +109,22 @@ import { Performance } from 'perf_hooks';
 import IElement from '../nodes/element/IElement';
 import ProcessingInstruction from '../nodes/processing-instruction/ProcessingInstruction';
 import IHappyDOMSettings from './IHappyDOMSettings';
-import RequestInfo from '../fetch/RequestInfo';
+import RequestInfo from '../fetch/types/IRequestInfo';
 import FileList from '../nodes/html-input-element/FileList';
+import Stream from 'stream';
+import FormData from '../form-data/FormData';
+import AbortController from '../fetch/AbortController';
+import AbortSignal from '../fetch/AbortSignal';
+import IResponseBody from '../fetch/types/IResponseBody';
+import IRequestInfo from '../fetch/types/IRequestInfo';
+import IHeadersInit from '../fetch/types/IHeadersInit';
+import RadioNodeList from '../nodes/html-form-element/RadioNodeList';
+import ValidityState from '../validity-state/ValidityState';
 
 /**
  * Window without dependencies to server side specific packages.
  */
-export default interface IWindow extends IEventTarget, NodeJS.Global {
+export default interface IWindow extends IEventTarget, INodeJSGlobal {
 	// Public Properties
 	readonly happyDOM: {
 		whenAsyncComplete: () => Promise<void>;
@@ -203,6 +214,7 @@ export default interface IWindow extends IEventTarget, NodeJS.Global {
 	readonly Screen: typeof Screen;
 	readonly Storage: typeof Storage;
 	readonly HTMLCollection: typeof HTMLCollection;
+	readonly HTMLFormControlsCollection: typeof HTMLFormControlsCollection;
 	readonly NodeList: typeof NodeList;
 	readonly CSSUnitValue: typeof CSSUnitValue;
 	readonly CSS: CSS;
@@ -213,21 +225,31 @@ export default interface IWindow extends IEventTarget, NodeJS.Global {
 	readonly CSSKeyframesRule: typeof CSSKeyframesRule;
 	readonly CSSMediaRule: typeof CSSMediaRule;
 	readonly CSSStyleRule: typeof CSSStyleRule;
+	readonly CSSSupportsRule: typeof CSSSupportsRule;
 	readonly Selection: typeof Selection;
 	readonly Navigator: typeof Navigator;
 	readonly MimeType: typeof MimeType;
 	readonly MimeTypeArray: typeof MimeTypeArray;
 	readonly Plugin: typeof Plugin;
 	readonly PluginArray: typeof PluginArray;
-	readonly Headers: { new (init?: string[][] | Record<string, string> | IHeaders): IHeaders };
-	readonly Request: { new (input: string | IRequest, init?: IRequestInit): IRequest };
-	readonly Response: { new (body?: unknown | null, init?: IResponseInit): IResponse };
+	readonly Headers: { new (init?: IHeadersInit): IHeaders };
+	readonly Request: {
+		new (input: IRequestInfo, init?: IRequestInit): IRequest;
+	};
+	readonly Response: { new (body?: IResponseBody | null, init?: IResponseInit): IResponse };
 	readonly Range: typeof Range;
 	readonly DOMRect: typeof DOMRect;
 	readonly XMLHttpRequest: typeof XMLHttpRequest;
 	readonly XMLHttpRequestUpload: typeof XMLHttpRequestUpload;
 	readonly XMLHttpRequestEventTarget: typeof XMLHttpRequestEventTarget;
 	readonly FileList: typeof FileList;
+	readonly ReadableStream: typeof Stream.Readable;
+	readonly WritableStream: typeof Stream.Writable;
+	readonly FormData: typeof FormData;
+	readonly AbortController: typeof AbortController;
+	readonly AbortSignal: typeof AbortSignal;
+	readonly RadioNodeList: typeof RadioNodeList;
+	readonly ValidityState: typeof ValidityState;
 
 	// Events
 	onload: (event: Event) => void;