fix: [#1939] Fixes issue where HTMLSelectElement previousSibling and nextSibling didnt work (#1939)

Author: capricorn86

packages/@happy-dom/jest-environment/package.json

@@ -30,7 +30,7 @@
 		"watch": "npm run compile && tsc -w --preserveWatchOutput",
 		"test": "jest",
 		"test:watch": "jest --watch",
-		"test:debug": "node --inspect-brk ../../node_modules/.bin/jest --runInBand --testTimeout 60000"
+		"test:debug": "node --inspect-brk ../../../node_modules/.bin/jest --runInBand --testTimeout 60000"
 	},
 	"jest": {
 		"transform": {

packages/happy-dom/src/html-parser/HTMLParser.ts

@@ -117,6 +117,7 @@ interface IHTMLDocumentStructure {
 export default class HTMLParser {
 	private window: BrowserWindow;
 	private evaluateScripts: boolean = false;
+	private isTemplateDocumentFragment: boolean = false;
 	private rootNode: Element | DocumentFragment | Document | null = null;
 	private rootDocument: Document | null = null;
 	private nodeStack: Node[] = [];
@@ -134,18 +135,24 @@ export default class HTMLParser {
 	 * @param window Window.
 	 * @param [options] Options.
 	 * @param [options.evaluateScripts] Set to "true" to enable script execution
+	 * @param [options.isTemplateDocumentFragment] Set to "true" if parsing a template content fragment.
 	 */
 	constructor(
 		window: BrowserWindow,
 		options?: {
 			evaluateScripts?: boolean;
+			isTemplateDocumentFragment?: boolean;
 		}
 	) {
 		this.window = window;
 
 		if (options?.evaluateScripts) {
 			this.evaluateScripts = true;
 		}
+
+		if (options?.isTemplateDocumentFragment) {
+			this.isTemplateDocumentFragment = true;
+		}
 	}
 	/**
 	 * Parses HTML a root element containing nodes found.
@@ -545,6 +552,7 @@ export default class HTMLParser {
 					this.currentNode = this.nodeStack[this.nodeStack.length - 1] || this.rootNode;
 				}
 			} else if (
+				!this.isTemplateDocumentFragment &&
 				config?.permittedParents &&
 				!config.permittedParents.includes(parentLowerTagName!)
 			) {

packages/happy-dom/src/nodes/html-template-element/HTMLTemplateElement.ts

@@ -47,7 +47,10 @@ export default class HTMLTemplateElement extends HTMLElement {
 			content.removeChild(childNodes[0]);
 		}
 
-		new HTMLParser(this[PropertySymbol.window]).parse(html, this[PropertySymbol.content]);
+		new HTMLParser(this[PropertySymbol.window], { isTemplateDocumentFragment: true }).parse(
+			html,
+			this[PropertySymbol.content]
+		);
 	}
 
 	/**

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

@@ -241,7 +241,7 @@ export default class Node extends EventTarget {
 	public get previousSibling(): Node | null {
 		if (this[PropertySymbol.parentNode]) {
 			const nodeArray = this[PropertySymbol.parentNode][PropertySymbol.nodeArray];
-			const index = nodeArray.indexOf(this);
+			const index = nodeArray.indexOf(this[PropertySymbol.proxy] || this);
 			if (index > 0) {
 				return nodeArray[index - 1];
 			}
@@ -257,7 +257,7 @@ export default class Node extends EventTarget {
 	public get nextSibling(): Node | null {
 		if (this[PropertySymbol.parentNode]) {
 			const nodeArray = this[PropertySymbol.parentNode][PropertySymbol.nodeArray];
-			const index = nodeArray.indexOf(this);
+			const index = nodeArray.indexOf(this[PropertySymbol.proxy] || this);
 			if (index > -1 && index + 1 < nodeArray.length) {
 				return nodeArray[index + 1];
 			}

packages/happy-dom/test/html-parser/HTMLParser.test.ts

@@ -2191,5 +2191,22 @@ describe('HTMLParser', () => {
 
 			expect(element).toBe(result.children[0].children[1]);
 		});
+
+		it('Ignores rules for tables when inside a <template> element', () => {
+			const template = document.createElement('template');
+			template.innerHTML = `
+                <tr>
+                    <td>Test 1</td>
+                    <td>Test 2</td>
+                </tr>
+            `;
+
+			expect(new HTMLSerializer().serializeToString(template.content)).toBe(`
+                <tr>
+                    <td>Test 1</td>
+                    <td>Test 2</td>
+                </tr>
+            `);
+		});
 	});
 });

packages/happy-dom/test/nodes/html-form-element/HTMLFormElement.test.ts

@@ -542,6 +542,34 @@ describe('HTMLFormElement', () => {
 		});
 	});
 
+	describe('get previousSibling()', () => {
+		it('Returns the previous sibling.', () => {
+			const form = document.createElement('form');
+			const span1 = document.createElement('span');
+			const span2 = document.createElement('span');
+
+			document.body.appendChild(span1);
+			document.body.appendChild(form);
+			document.body.appendChild(span2);
+
+			expect(form.previousSibling).toBe(span1);
+		});
+	});
+
+	describe('get nextSibling()', () => {
+		it('Returns the next sibling.', () => {
+			const form = document.createElement('form');
+			const span1 = document.createElement('span');
+			const span2 = document.createElement('span');
+
+			document.body.appendChild(span1);
+			document.body.appendChild(form);
+			document.body.appendChild(span2);
+
+			expect(form.nextSibling).toBe(span2);
+		});
+	});
+
 	describe('submit()', () => {
 		it('Fallbacks to set location URL when in the main frame of a detached Window.', () => {
 			vi.spyOn(Fetch.prototype, 'send').mockImplementation(function (): Promise<Response> {

packages/happy-dom/test/nodes/html-select-element/HTMLSelectElement.test.ts

@@ -395,6 +395,34 @@ describe('HTMLSelectElement', () => {
 		});
 	});
 
+	describe('get previousSibling()', () => {
+		it('Returns the previous sibling.', () => {
+			const select1 = document.createElement('select');
+			const span1 = document.createElement('span');
+			const span2 = document.createElement('span');
+
+			document.body.appendChild(span1);
+			document.body.appendChild(select1);
+			document.body.appendChild(span2);
+
+			expect(select1.previousSibling).toBe(span1);
+		});
+	});
+
+	describe('get nextSibling()', () => {
+		it('Returns the next sibling.', () => {
+			const select1 = document.createElement('select');
+			const span1 = document.createElement('span');
+			const span2 = document.createElement('span');
+
+			document.body.appendChild(span1);
+			document.body.appendChild(select1);
+			document.body.appendChild(span2);
+
+			expect(select1.nextSibling).toBe(span2);
+		});
+	});
+
 	describe(`add()`, () => {
 		it('Appends options.', () => {
 			const option1 = <HTMLOptionElement>document.createElement('option');