happy-dom 9.10.2 → 9.10.4

package/src/query-selector/SelectorItem.ts

@@ -6,18 +6,17 @@ import SelectorCombinatorEnum from './SelectorCombinatorEnum';
 import ISelectorAttribute from './ISelectorAttribute';
 import SelectorParser from './SelectorParser';
 import ISelectorMatch from './ISelectorMatch';
+import ISelectorPseudo from './ISelectorPseudo';
 
 /**
  * Selector item.
  */
 export default class SelectorItem {
-	public all: string | null;
 	public tagName: string | null;
 	public id: string | null;
 	public classNames: string[] | null;
 	public attributes: ISelectorAttribute[] | null;
-	public pseudoClass: string | null;
-	public pseudoArguments: string | null;
+	public pseudos: ISelectorPseudo[] | null;
 	public combinator: SelectorCombinatorEnum;
 
 	/**
@@ -25,31 +24,25 @@ export default class SelectorItem {
 	 *
 	 * @param [options] Options.
 	 * @param [options.combinator] Combinator.
-	 * @param [options.all] All.
 	 * @param [options.tagName] Tag name.
 	 * @param [options.id] ID.
 	 * @param [options.classNames] Class names.
 	 * @param [options.attributes] Attributes.
-	 * @param [options.pseudoClass] Pseudo class.
-	 * @param [options.pseudoArguments] Pseudo arguments.
+	 * @param [options.pseudos] Pseudos.
 	 */
 	constructor(options?: {
-		all?: string;
 		tagName?: string;
 		id?: string;
 		classNames?: string[];
 		attributes?: ISelectorAttribute[];
-		pseudoClass?: string;
-		pseudoArguments?: string;
+		pseudos?: ISelectorPseudo[];
 		combinator?: SelectorCombinatorEnum;
 	}) {
-		this.all = options?.all || null;
 		this.tagName = options?.tagName || null;
 		this.id = options?.id || null;
 		this.classNames = options?.classNames || null;
 		this.attributes = options?.attributes || null;
-		this.pseudoClass = options?.pseudoClass || null;
-		this.pseudoArguments = options?.pseudoArguments || null;
+		this.pseudos = options?.pseudos || null;
 		this.combinator = options?.combinator || SelectorCombinatorEnum.descendant;
 	}
 
@@ -64,7 +57,7 @@ export default class SelectorItem {
 
 		// Tag name match
 		if (this.tagName) {
-			if (this.tagName !== element.tagName) {
+			if (this.tagName !== '*' && this.tagName !== element.tagName) {
 				return null;
 			}
 			priorityWeight += 1;
@@ -97,7 +90,7 @@ export default class SelectorItem {
 		}
 
 		// Pseudo match
-		if (this.pseudoClass && !this.matchPsuedo(element)) {
+		if (this.pseudos && !this.matchPsuedo(element)) {
 			return null;
 		}
 
@@ -113,97 +106,105 @@ export default class SelectorItem {
 	private matchPsuedo(element: IElement): boolean {
 		const parent = <IElement>element.parentNode;
 
-		// Validation
-		switch (this.pseudoClass) {
-			case 'not':
-			case 'nth-child':
-			case 'nth-of-type':
-			case 'nth-last-child':
-			case 'nth-last-of-type':
-				if (!this.pseudoArguments) {
-					throw new DOMException(`The selector "${this.getSelectorString()}" is not valid.`);
-				}
-				break;
+		if (!this.pseudos) {
+			return true;
 		}
 
-		// Check if parent exists
-		if (!parent) {
-			switch (this.pseudoClass) {
+		for (const psuedo of this.pseudos) {
+			// Validation
+			switch (psuedo.name) {
+				case 'not':
+				case 'nth-child':
+				case 'nth-of-type':
+				case 'nth-last-child':
+				case 'nth-last-of-type':
+					if (!psuedo.arguments) {
+						throw new DOMException(`The selector "${this.getSelectorString()}" is not valid.`);
+					}
+					break;
+			}
+
+			// Check if parent exists
+			if (!parent) {
+				switch (psuedo.name) {
+					case 'first-child':
+					case 'last-child':
+					case 'only-child':
+					case 'first-of-type':
+					case 'last-of-type':
+					case 'only-of-type':
+					case 'nth-child':
+					case 'nth-of-type':
+					case 'nth-last-child':
+					case 'nth-last-of-type':
+						return false;
+				}
+			}
+
+			switch (psuedo.name) {
 				case 'first-child':
+					return parent.children[0] === element;
 				case 'last-child':
+					return parent.children.length && parent.children[parent.children.length - 1] === element;
 				case 'only-child':
+					return parent.children.length === 1 && parent.children[0] === element;
 				case 'first-of-type':
+					for (const child of parent.children) {
+						if (child.tagName === element.tagName) {
+							return child === element;
+						}
+					}
+					return false;
 				case 'last-of-type':
+					for (let i = parent.children.length - 1; i >= 0; i--) {
+						const child = parent.children[i];
+						if (child.tagName === element.tagName) {
+							return child === element;
+						}
+					}
+					return false;
 				case 'only-of-type':
+					let isFound = false;
+					for (const child of parent.children) {
+						if (child.tagName === element.tagName) {
+							if (isFound || child !== element) {
+								return false;
+							}
+							isFound = true;
+						}
+					}
+					return isFound;
+				case 'checked':
+					return element.tagName === 'INPUT' && (<IHTMLInputElement>element).checked;
+				case 'empty':
+					return !element.children.length;
+				case 'root':
+					return element.tagName === 'HTML';
+				case 'not':
+					return !SelectorParser.getSelectorItem(psuedo.arguments).match(element);
 				case 'nth-child':
+					return this.matchNthChild(element, parent.children, psuedo.arguments);
 				case 'nth-of-type':
+					if (!element.parentNode) {
+						return false;
+					}
+					return this.matchNthChild(
+						element,
+						parent.children.filter((child) => child.tagName === element.tagName),
+						psuedo.arguments
+					);
 				case 'nth-last-child':
+					return this.matchNthChild(element, parent.children.reverse(), psuedo.arguments);
 				case 'nth-last-of-type':
-					return false;
+					return this.matchNthChild(
+						element,
+						parent.children.filter((child) => child.tagName === element.tagName).reverse(),
+						psuedo.arguments
+					);
 			}
 		}
 
-		switch (this.pseudoClass) {
-			case 'first-child':
-				return parent.children[0] === element;
-			case 'last-child':
-				return parent.children.length && parent.children[parent.children.length - 1] === element;
-			case 'only-child':
-				return parent.children.length === 1 && parent.children[0] === element;
-			case 'first-of-type':
-				for (const child of parent.children) {
-					if (child.tagName === element.tagName) {
-						return child === element;
-					}
-				}
-				return false;
-			case 'last-of-type':
-				for (let i = parent.children.length - 1; i >= 0; i--) {
-					const child = parent.children[i];
-					if (child.tagName === element.tagName) {
-						return child === element;
-					}
-				}
-				return false;
-			case 'only-of-type':
-				let isFound = false;
-				for (const child of parent.children) {
-					if (child.tagName === element.tagName) {
-						if (isFound || child !== element) {
-							return false;
-						}
-						isFound = true;
-					}
-				}
-				return isFound;
-			case 'checked':
-				return element.tagName === 'INPUT' && (<IHTMLInputElement>element).checked;
-			case 'empty':
-				return !element.children.length;
-			case 'root':
-				return element.tagName === 'HTML';
-			case 'not':
-				return !SelectorParser.getSelectorItem(this.pseudoArguments).match(element);
-			case 'nth-child':
-				return this.matchNthChild(element, parent.children, this.pseudoArguments);
-			case 'nth-of-type':
-				if (!element.parentNode) {
-					return false;
-				}
-				return this.matchNthChild(
-					element,
-					parent.children.filter((child) => child.tagName === element.tagName),
-					this.pseudoArguments
-				);
-			case 'nth-last-child':
-				return this.matchNthChild(element, parent.children.reverse(), this.pseudoArguments);
-			case 'nth-last-of-type':
-				return this.matchNthChild(
-					element,
-					parent.children.filter((child) => child.tagName === element.tagName).reverse(),
-					this.pseudoArguments
-				);
-		}
+		return true;
 	}
 
 	/**
@@ -349,7 +350,7 @@ export default class SelectorItem {
 	 * @returns Selector string.
 	 */
 	private getSelectorString(): string {
-		return `${this.all || ''}${this.tagName || ''}${this.id ? `#${this.id}` : ''}${
+		return `${this.tagName || ''}${this.id ? `#${this.id}` : ''}${
 			this.classNames ? `.${this.classNames.join('.')}` : ''
 		}${
 			this.attributes
@@ -362,6 +363,12 @@ export default class SelectorItem {
 						)
 						.join('')
 				: ''
-		}${this.pseudoClass || ''}${this.pseudoArguments ? `(${this.pseudoArguments})` : ''}`;
+		}${
+			this.pseudos
+				? this.pseudos
+						.map((pseudo) => `:${pseudo.name}${pseudo.arguments ? `(${pseudo.arguments})` : ''}`)
+						.join('')
+				: ''
+		}`;
 	}
 }

package/src/query-selector/SelectorParser.ts

@@ -10,15 +10,19 @@ import DOMException from '../exception/DOMException';
  * Group 3: ID (e.g. "#id")
  * Group 4: Class (e.g. ".class")
  * Group 5: Attribute name when no value (e.g. "attr1")
- * Group 6: Attribute name when there is a value (e.g. "attr1")
- * Group 7: Attribute operator (e.g. "~")
- * Group 8: Attribute value (e.g. "value1")
- * Group 9: Pseudo (e.g. "nth-child")
- * Group 10: Arguments of pseudo (e.g. "2n + 1")
- * Group 11: Combinator.
+ * Group 6: Attribute name when there is a value using apostrophe (e.g. "attr1")
+ * Group 7: Attribute operator when using apostrophe (e.g. "~")
+ * Group 8: Attribute value when using apostrophe (e.g. "value1")
+ * Group 9: Attribute name when threre is a value not using apostrophe (e.g. "attr1")
+ * Group 10: Attribute operator when not using apostrophe (e.g. "~")
+ * Group 11: Attribute value when notusing apostrophe (e.g. "value1")
+ * Group 12: Pseudo name when arguments (e.g. "nth-child")
+ * Group 13: Arguments of pseudo (e.g. "2n + 1")
+ * Group 14: Pseudo name when no arguments (e.g. "empty")
+ * Group 15: Combinator.
  */
 const SELECTOR_REGEXP =
-	/(\*)|([a-zA-Z0-9-]+)|#((?:[a-zA-Z0-9-_]|\\.)+)|\.((?:[a-zA-Z0-9-_]|\\.)+)|\[([a-zA-Z0-9-_]+)\]|\[([a-zA-Z0-9-_]+)([~|^$*]{0,1}) *= *["']{0,1}([^"']*)["']{0,1}\]|:([a-zA-Z-:]+)|\(([^)]+)\)|([ ,+>]*)/g;
+	/(\*)|([a-zA-Z0-9-]+)|#((?:[a-zA-Z0-9-_]|\\.)+)|\.((?:[a-zA-Z0-9-_]|\\.)+)|\[([a-zA-Z0-9-_]+)\]|\[([a-zA-Z0-9-_]+)([~|^$*]{0,1}) *= *["']{1}([^"']*)["']{1}\]|\[([a-zA-Z0-9-_]+)([~|^$*]{0,1}) *= *([^\]]*)\]|:([a-zA-Z-]+) *\(([^)]+)\)|:([a-zA-Z-]+)|([ ,+>]*)/g;
 
 /**
  * Escaped Character RegExp.
@@ -55,6 +59,10 @@ export default class SelectorParser {
 	 * @returns Selector groups.
 	 */
 	public static getSelectorGroups(selector: string): Array<Array<SelectorItem>> {
+		if (selector === '*') {
+			return [[new SelectorItem({ tagName: '*' })]];
+		}
+
 		const simpleMatch = selector.match(SIMPLE_SELECTOR_REGEXP);
 
 		if (simpleMatch) {
@@ -81,7 +89,7 @@ export default class SelectorParser {
 				isValid = true;
 
 				if (match[1]) {
-					currentSelectorItem.all = '*';
+					currentSelectorItem.tagName = '*';
 				} else if (match[2]) {
 					currentSelectorItem.tagName = match[2].toUpperCase();
 				} else if (match[3]) {
@@ -103,12 +111,27 @@ export default class SelectorParser {
 						operator: match[7] || null,
 						value: match[8]
 					});
-				} else if (match[9]) {
-					currentSelectorItem.pseudoClass = match[9].toLowerCase();
-				} else if (match[10]) {
-					currentSelectorItem.pseudoArguments = match[10];
-				} else if (match[11]) {
-					switch (match[11].trim()) {
+				} else if (match[9] && match[11] !== undefined) {
+					currentSelectorItem.attributes = currentSelectorItem.attributes || [];
+					currentSelectorItem.attributes.push({
+						name: match[9].toLowerCase(),
+						operator: match[10] || null,
+						value: match[11]
+					});
+				} else if (match[12] && match[13]) {
+					currentSelectorItem.pseudos = currentSelectorItem.pseudos || [];
+					currentSelectorItem.pseudos.push({
+						name: match[12].toLowerCase(),
+						arguments: match[13]
+					});
+				} else if (match[14]) {
+					currentSelectorItem.pseudos = currentSelectorItem.pseudos || [];
+					currentSelectorItem.pseudos.push({
+						name: match[14].toLowerCase(),
+						arguments: null
+					});
+				} else if (match[15]) {
+					switch (match[15].trim()) {
 						case ',':
 							currentSelectorItem = new SelectorItem({
 								combinator: SelectorCombinatorEnum.descendant