Repository: capricorn86/happy-dom
Pull request #121 (2020-10-16 10:53:42)

#120@patch: Fixes bug that does not update the children property


Patch:
diff --git a/packages/happy-dom/src/nodes/basic/document-fragment/DocumentFragment.ts b/packages/happy-dom/src/nodes/basic/document-fragment/DocumentFragment.ts
index 87cc8f97..dc158cb6 100644
--- a/packages/happy-dom/src/nodes/basic/document-fragment/DocumentFragment.ts
+++ b/packages/happy-dom/src/nodes/basic/document-fragment/DocumentFragment.ts
@@ -86,16 +86,6 @@ export default class DocumentFragment extends Node implements IParentNode {
 		return QuerySelector.querySelector(this, selector);
 	}
 
-	/**
-	 * Returns an element by ID.
-	 *
-	 * @param id ID.
-	 * @return Matching element.
-	 */
-	public getElementById(id: string): IElement {
-		return this.querySelector('#' + id);
-	}
-
 	/**
 	 * Clones a node.
 	 *
@@ -166,12 +156,18 @@ export default class DocumentFragment extends Node implements IParentNode {
 	 * @return Inserted node.
 	 */
 	public insertBefore(newNode: Node, referenceNode?: Node): Node {
+		const returnValue = super.insertBefore(newNode, referenceNode);
+
 		if (newNode.parentNode && newNode.parentNode['children']) {
 			const index = newNode.parentNode['children'].indexOf(newNode);
 			if (index !== -1) {
 				newNode.parentNode['children'].splice(index, 1);
 			}
 		}
-		return super.insertBefore(newNode, referenceNode);
+
+		// @ts-ignore
+		this.children = this.childNodes.filter(node => node.nodeType === Node.ELEMENT_NODE);
+
+		return returnValue;
 	}
 }
diff --git a/packages/happy-dom/src/nodes/basic/document/Document.ts b/packages/happy-dom/src/nodes/basic/document/Document.ts
index 272b6d66..82e48416 100644
--- a/packages/happy-dom/src/nodes/basic/document/Document.ts
+++ b/packages/happy-dom/src/nodes/basic/document/Document.ts
@@ -274,6 +274,30 @@ export default class Document extends Node implements IDocument {
 		super.removeChild(node);
 	}
 
+	/**
+	 * Inserts a node before another.
+	 *
+	 * @override
+	 * @param newNode Node to insert.
+	 * @param [referenceNode] Node to insert before.
+	 * @return Inserted node.
+	 */
+	public insertBefore(newNode: Node, referenceNode?: Node): Node {
+		const returnValue = super.insertBefore(newNode, referenceNode);
+
+		if (newNode.parentNode && newNode.parentNode['children']) {
+			const index = newNode.parentNode['children'].indexOf(newNode);
+			if (index !== -1) {
+				newNode.parentNode['children'].splice(index, 1);
+			}
+		}
+
+		// @ts-ignore
+		this.children = this.childNodes.filter(node => node.nodeType === Node.ELEMENT_NODE);
+
+		return returnValue;
+	}
+
 	/**
 	 * Replaces the document HTML with new HTML.
 	 *
diff --git a/packages/happy-dom/src/nodes/basic/element/Element.ts b/packages/happy-dom/src/nodes/basic/element/Element.ts
index 88a67cb2..e63710f7 100644
--- a/packages/happy-dom/src/nodes/basic/element/Element.ts
+++ b/packages/happy-dom/src/nodes/basic/element/Element.ts
@@ -300,6 +300,8 @@ export default class Element extends Node implements IElement {
 	 * @return Inserted node.
 	 */
 	public insertBefore(newNode: Node, referenceNode?: Node): Node {
+		const returnValue = super.insertBefore(newNode, referenceNode);
+
 		if (newNode.parentNode && newNode.parentNode['children']) {
 			const index = newNode.parentNode['children'].indexOf(newNode);
 			if (index !== -1) {
@@ -307,7 +309,10 @@ export default class Element extends Node implements IElement {
 			}
 		}
 
-		return super.insertBefore(newNode, referenceNode);
+		// @ts-ignore
+		this.children = this.childNodes.filter(node => node.nodeType === Node.ELEMENT_NODE);
+
+		return returnValue;
 	}
 
 	/**


Test patch:
diff --git a/packages/happy-dom/test/nodes/basic/child-node/ChildNodeUtility.test.ts b/packages/happy-dom/test/nodes/basic/child-node/ChildNodeUtility.test.ts
index 22486b37..8b9a9943 100644
--- a/packages/happy-dom/test/nodes/basic/child-node/ChildNodeUtility.test.ts
+++ b/packages/happy-dom/test/nodes/basic/child-node/ChildNodeUtility.test.ts
@@ -32,6 +32,9 @@ describe('ChildNodeUtility', () => {
 			expect(parent.innerHTML).toBe(
 				'<span class="child1"></span><span class="child2"></span><span class="child4"></span>'
 			);
+			expect(parent.children.map(element => element.outerHTML).join('')).toBe(
+				'<span class="child1"></span><span class="child2"></span><span class="child4"></span>'
+			);
 		});
 
 		test('Replaces a node with a mixed list of Node and DOMString (string).', () => {
@@ -51,6 +54,9 @@ describe('ChildNodeUtility', () => {
 			expect(parent.innerHTML).toBe(
 				'<span class="child1"></span><span class="child2"></span><span class="child4"></span><span class="child5"></span><span class="child6"></span><span class="child7"></span><span class="child8"></span><span class="child9"></span>'
 			);
+			expect(parent.children.map(element => element.outerHTML).join('')).toBe(
+				'<span class="child1"></span><span class="child2"></span><span class="child4"></span><span class="child5"></span><span class="child6"></span><span class="child7"></span><span class="child8"></span><span class="child9"></span>'
+			);
 		});
 	});
 
@@ -66,6 +72,9 @@ describe('ChildNodeUtility', () => {
 			expect(parent.innerHTML).toBe(
 				'<span class="child1"></span><span class="child2"></span><span class="child4"></span><span class="child3"></span>'
 			);
+			expect(parent.children.map(element => element.outerHTML).join('')).toBe(
+				'<span class="child1"></span><span class="child2"></span><span class="child4"></span><span class="child3"></span>'
+			);
 		});
 
 		test('Inserts a mixed list of Node and DOMString (string) before the child node.', () => {
@@ -85,6 +94,9 @@ describe('ChildNodeUtility', () => {
 			expect(parent.innerHTML).toBe(
 				'<span class="child1"></span><span class="child2"></span><span class="child4"></span><span class="child5"></span><span class="child6"></span><span class="child7"></span><span class="child8"></span><span class="child9"></span><span class="child3"></span>'
 			);
+			expect(parent.children.map(element => element.outerHTML).join('')).toBe(
+				'<span class="child1"></span><span class="child2"></span><span class="child4"></span><span class="child5"></span><span class="child6"></span><span class="child7"></span><span class="child8"></span><span class="child9"></span><span class="child3"></span>'
+			);
 		});
 	});
 
@@ -100,6 +112,9 @@ describe('ChildNodeUtility', () => {
 			expect(parent.innerHTML).toBe(
 				'<span class="child1"></span><span class="child2"></span><span class="child3"></span><span class="child4"></span>'
 			);
+			expect(parent.children.map(element => element.outerHTML).join('')).toBe(
+				'<span class="child1"></span><span class="child2"></span><span class="child3"></span><span class="child4"></span>'
+			);
 		});
 
 		test('Inserts a node after the child node by inserting the new node.', () => {
@@ -113,6 +128,9 @@ describe('ChildNodeUtility', () => {
 			expect(parent.innerHTML).toBe(
 				'<span class="child1"></span><span class="child2"></span><span class="child4"></span><span class="child3"></span>'
 			);
+			expect(parent.children.map(element => element.outerHTML).join('')).toBe(
+				'<span class="child1"></span><span class="child2"></span><span class="child4"></span><span class="child3"></span>'
+			);
 		});
 
 		test('Inserts a mixed list of Node and DOMString (string) after the child node by appending the new nodes.', () => {
@@ -132,6 +150,9 @@ describe('ChildNodeUtility', () => {
 			expect(parent.innerHTML).toBe(
 				'<span class="child1"></span><span class="child2"></span><span class="child3"></span><span class="child4"></span><span class="child5"></span><span class="child6"></span><span class="child7"></span><span class="child8"></span><span class="child9"></span>'
 			);
+			expect(parent.children.map(element => element.outerHTML).join('')).toBe(
+				'<span class="child1"></span><span class="child2"></span><span class="child3"></span><span class="child4"></span><span class="child5"></span><span class="child6"></span><span class="child7"></span><span class="child8"></span><span class="child9"></span>'
+			);
 		});
 	});
 });
diff --git a/packages/happy-dom/test/nodes/basic/document-fragment/DocumentFragment.test.ts b/packages/happy-dom/test/nodes/basic/document-fragment/DocumentFragment.test.ts
index ab345cce..c1abb419 100644
--- a/packages/happy-dom/test/nodes/basic/document-fragment/DocumentFragment.test.ts
+++ b/packages/happy-dom/test/nodes/basic/document-fragment/DocumentFragment.test.ts
@@ -18,58 +18,49 @@ describe('DocumentFragment', () => {
 
 	describe('get children()', () => {
 		test('Returns Element child nodes.', () => {
-			document.appendChild(document.createTextNode('test'));
-			expect(document.children).toEqual([document.documentElement]);
+			const div = document.createElement('div');
+			const span = document.createElement('span');
+			documentFragment.appendChild(document.createTextNode('test'));
+			documentFragment.appendChild(div);
+			documentFragment.appendChild(document.createTextNode('test'));
+			documentFragment.appendChild(span);
+			expect(documentFragment.children).toEqual([div, span]);
 		});
 	});
 
 	describe('get childElementCount()', () => {
 		test('Returns child element count.', () => {
-			document.appendChild(document.createElement('div'));
-			document.appendChild(document.createTextNode('test'));
-			expect(document.childElementCount).toEqual(2);
+			const div = document.createElement('div');
+			const span = document.createElement('span');
+			documentFragment.appendChild(document.createTextNode('test'));
+			documentFragment.appendChild(div);
+			documentFragment.appendChild(document.createTextNode('test'));
+			documentFragment.appendChild(span);
+			expect(documentFragment.childElementCount).toEqual(2);
 		});
 	});
 
 	describe('get firstElementChild()', () => {
 		test('Returns first element child.', () => {
 			const div = document.createElement('div');
-			const span1 = document.createElement('span');
-			const span2 = document.createElement('span');
-			const text1 = document.createTextNode('text1');
-			const text2 = document.createTextNode('text2');
-
-			for (const node of document.childNodes.slice()) {
-				node.parentNode.removeChild(node);
-			}
-
-			div.appendChild(text1);
-			div.appendChild(span1);
-			div.appendChild(span2);
-			div.appendChild(text2);
-
-			expect(div.firstElementChild).toBe(span1);
+			const span = document.createElement('span');
+			documentFragment.appendChild(document.createTextNode('test'));
+			documentFragment.appendChild(div);
+			documentFragment.appendChild(document.createTextNode('test'));
+			documentFragment.appendChild(span);
+			expect(documentFragment.firstElementChild).toEqual(div);
 		});
 	});
 
 	describe('get lastElementChild()', () => {
 		test('Returns last element child.', () => {
 			const div = document.createElement('div');
-			const span1 = document.createElement('span');
-			const span2 = document.createElement('span');
-			const text1 = document.createTextNode('text1');
-			const text2 = document.createTextNode('text2');
-
-			for (const node of document.childNodes.slice()) {
-				node.parentNode.removeChild(node);
-			}
-
-			div.appendChild(text1);
-			div.appendChild(span1);
-			div.appendChild(span2);
-			div.appendChild(text2);
-
-			expect(div.lastElementChild).toBe(span2);
+			const span = document.createElement('span');
+			documentFragment.appendChild(document.createTextNode('test'));
+			documentFragment.appendChild(div);
+			documentFragment.appendChild(document.createTextNode('test'));
+			documentFragment.appendChild(span);
+			expect(documentFragment.lastElementChild).toEqual(span);
 		});
 	});
 
@@ -80,12 +71,12 @@ describe('DocumentFragment', () => {
 			let isCalled = false;
 
 			jest.spyOn(ParentNodeUtility, 'append').mockImplementation((parentNode, ...nodes) => {
-				expect(parentNode).toBe(document);
+				expect(parentNode).toBe(documentFragment);
 				expect(nodes).toEqual([node1, node2]);
 				isCalled = true;
 			});
 
-			document.append(node1, node2);
+			documentFragment.append(node1, node2);
 			expect(isCalled).toBe(true);
 		});
 	});
@@ -97,12 +88,12 @@ describe('DocumentFragment', () => {
 			let isCalled = false;
 
 			jest.spyOn(ParentNodeUtility, 'prepend').mockImplementation((parentNode, ...nodes) => {
-				expect(parentNode).toBe(document);
+				expect(parentNode).toBe(documentFragment);
 				expect(nodes).toEqual([node1, node2]);
 				isCalled = true;
 			});
 
-			document.prepend(node1, node2);
+			documentFragment.prepend(node1, node2);
 			expect(isCalled).toBe(true);
 		});
 	});
@@ -116,12 +107,12 @@ describe('DocumentFragment', () => {
 			jest
 				.spyOn(ParentNodeUtility, 'replaceChildren')
 				.mockImplementation((parentNode, ...nodes) => {
-					expect(parentNode).toBe(document);
+					expect(parentNode).toBe(documentFragment);
 					expect(nodes).toEqual([node1, node2]);
 					isCalled = true;
 				});
 
-			document.replaceChildren(node1, node2);
+			documentFragment.replaceChildren(node1, node2);
 			expect(isCalled).toBe(true);
 		});
 	});
@@ -132,12 +123,12 @@ describe('DocumentFragment', () => {
 			const expectedSelector = 'selector';
 
 			jest.spyOn(QuerySelector, 'querySelectorAll').mockImplementation((parentNode, selector) => {
-				expect(parentNode).toBe(document);
+				expect(parentNode).toBe(documentFragment);
 				expect(selector).toEqual(expectedSelector);
 				return [element];
 			});
 
-			expect(document.querySelectorAll(expectedSelector)).toEqual([element]);
+			expect(documentFragment.querySelectorAll(expectedSelector)).toEqual([element]);
 		});
 	});
 
@@ -147,76 +138,58 @@ describe('DocumentFragment', () => {
 			const expectedSelector = 'selector';
 
 			jest.spyOn(QuerySelector, 'querySelector').mockImplementation((parentNode, selector) => {
-				expect(parentNode).toBe(document);
+				expect(parentNode).toBe(documentFragment);
 				expect(selector).toEqual(expectedSelector);
 				return element;
 			});
 
-			expect(document.querySelector(expectedSelector)).toEqual(element);
+			expect(documentFragment.querySelector(expectedSelector)).toEqual(element);
 		});
 	});
 
-	describe('getElementsByClassName()', () => {
-		test('Returns an elements by class name.', () => {
-			const element = document.createElement('div');
-			const className = 'className';
-
-			jest.spyOn(QuerySelector, 'querySelectorAll').mockImplementation((parentNode, selector) => {
-				expect(parentNode).toBe(document);
-				expect(selector).toEqual(`.${className}`);
-				return [element];
-			});
-
-			expect(document.getElementsByClassName(className)).toEqual([element]);
-		});
-	});
-
-	describe('getElementsByTagName()', () => {
-		test('Returns an elements by tag name.', () => {
-			const element = document.createElement('div');
-			const tagName = 'tag-name';
+	describe('appendChild()', () => {
+		test('Updates the children property when appending an element child.', () => {
+			const div = document.createElement('div');
+			const span = document.createElement('span');
 
-			jest.spyOn(QuerySelector, 'querySelectorAll').mockImplementation((parentNode, selector) => {
-				expect(parentNode).toBe(document);
-				expect(selector).toEqual(tagName);
-				return [element];
-			});
+			documentFragment.appendChild(document.createComment('test'));
+			documentFragment.appendChild(div);
+			documentFragment.appendChild(document.createComment('test'));
+			documentFragment.appendChild(span);
 
-			expect(document.getElementsByTagName(tagName)).toEqual([element]);
+			expect(documentFragment.children).toEqual([div, span]);
 		});
 	});
 
-	describe('getElementsByTagNameNS()', () => {
-		test('Returns an elements by tag name and namespace.', () => {
-			const element1 = document.createElement('div');
-			const element2 = document.createElement('div');
-			const tagName = 'tag-name';
+	describe('removeChild()', () => {
+		test('Updates the children property when removing an element child.', () => {
+			const div = document.createElement('div');
+			const span = document.createElement('span');
 
-			// @ts-ignore
-			element1.namespaceURI = '/namespace/';
+			documentFragment.appendChild(document.createComment('test'));
+			documentFragment.appendChild(div);
+			documentFragment.appendChild(document.createComment('test'));
+			documentFragment.appendChild(span);
 
-			jest.spyOn(QuerySelector, 'querySelectorAll').mockImplementation((parentNode, selector) => {
-				expect(parentNode).toBe(document);
-				expect(selector).toEqual(tagName);
-				return [element1, element2];
-			});
+			documentFragment.removeChild(div);
 
-			expect(document.getElementsByTagNameNS('/namespace/', tagName)).toEqual([element1]);
+			expect(documentFragment.children).toEqual([span]);
 		});
 	});
 
-	describe('getElementById()', () => {
-		test('Returns an element by ID.', () => {
-			const element = document.createElement('div');
-			const id = 'id';
+	describe('insertBefore()', () => {
+		test('Updates the children property when appending an element child.', () => {
+			const div1 = document.createElement('div');
+			const div2 = document.createElement('div');
+			const span = document.createElement('span');
 
-			jest.spyOn(QuerySelector, 'querySelector').mockImplementation((parentNode, selector) => {
-				expect(parentNode).toBe(document);
-				expect(selector).toEqual(`#${id}`);
-				return element;
-			});
+			documentFragment.appendChild(document.createComment('test'));
+			documentFragment.appendChild(div1);
+			documentFragment.appendChild(document.createComment('test'));
+			documentFragment.appendChild(span);
+			documentFragment.insertBefore(div2, div1);
 
-			expect(document.getElementById(id)).toEqual(element);
+			expect(documentFragment.children).toEqual([div2, div1, span]);
 		});
 	});
 
diff --git a/packages/happy-dom/test/nodes/basic/document/Document.test.ts b/packages/happy-dom/test/nodes/basic/document/Document.test.ts
index aad71ac6..c77db289 100644
--- a/packages/happy-dom/test/nodes/basic/document/Document.test.ts
+++ b/packages/happy-dom/test/nodes/basic/document/Document.test.ts
@@ -239,6 +239,64 @@ describe('Document', () => {
 		});
 	});
 
+	describe('appendChild()', () => {
+		test('Updates the children property when appending an element child.', () => {
+			const div = document.createElement('div');
+			const span = document.createElement('span');
+
+			for (const node of document.childNodes.slice()) {
+				node.parentNode.removeChild(node);
+			}
+
+			document.appendChild(document.createComment('test'));
+			document.appendChild(div);
+			document.appendChild(document.createComment('test'));
+			document.appendChild(span);
+
+			expect(document.children).toEqual([div, span]);
+		});
+	});
+
+	describe('removeChild()', () => {
+		test('Updates the children property when removing an element child.', () => {
+			const div = document.createElement('div');
+			const span = document.createElement('span');
+
+			for (const node of document.childNodes.slice()) {
+				node.parentNode.removeChild(node);
+			}
+
+			document.appendChild(document.createComment('test'));
+			document.appendChild(div);
+			document.appendChild(document.createComment('test'));
+			document.appendChild(span);
+
+			document.removeChild(div);
+
+			expect(document.children).toEqual([span]);
+		});
+	});
+
+	describe('insertBefore()', () => {
+		test('Updates the children property when appending an element child.', () => {
+			const div1 = document.createElement('div');
+			const div2 = document.createElement('div');
+			const span = document.createElement('span');
+
+			for (const node of document.childNodes.slice()) {
+				node.parentNode.removeChild(node);
+			}
+
+			document.appendChild(document.createComment('test'));
+			document.appendChild(div1);
+			document.appendChild(document.createComment('test'));
+			document.appendChild(span);
+			document.insertBefore(div2, div1);
+
+			expect(document.children).toEqual([div2, div1, span]);
+		});
+	});
+
 	describe('write()', () => {
 		test('Replaces the content of documentElement with new content the first time it is called and writes the body part to the body the second time.', () => {
 			const html = `
diff --git a/packages/happy-dom/test/nodes/basic/element/Element.test.ts b/packages/happy-dom/test/nodes/basic/element/Element.test.ts
index 0d3cc0d0..53ca8454 100644
--- a/packages/happy-dom/test/nodes/basic/element/Element.test.ts
+++ b/packages/happy-dom/test/nodes/basic/element/Element.test.ts
@@ -443,6 +443,52 @@ describe('Element', () => {
 		});
 	});
 
+	describe('appendChild()', () => {
+		test('Updates the children property when appending an element child.', () => {
+			const div = document.createElement('div');
+			const span = document.createElement('span');
+
+			element.appendChild(document.createComment('test'));
+			element.appendChild(div);
+			element.appendChild(document.createComment('test'));
+			element.appendChild(span);
+
+			expect(element.children).toEqual([div, span]);
+		});
+	});
+
+	describe('removeChild()', () => {
+		test('Updates the children property when removing an element child.', () => {
+			const div = document.createElement('div');
+			const span = document.createElement('span');
+
+			element.appendChild(document.createComment('test'));
+			element.appendChild(div);
+			element.appendChild(document.createComment('test'));
+			element.appendChild(span);
+
+			element.removeChild(div);
+
+			expect(element.children).toEqual([span]);
+		});
+	});
+
+	describe('insertBefore()', () => {
+		test('Updates the children property when appending an element child.', () => {
+			const div1 = document.createElement('div');
+			const div2 = document.createElement('div');
+			const span = document.createElement('span');
+
+			element.appendChild(document.createComment('test'));
+			element.appendChild(div1);
+			element.appendChild(document.createComment('test'));
+			element.appendChild(span);
+			element.insertBefore(div2, div1);
+
+			expect(element.children).toEqual([div2, div1, span]);
+		});
+	});
+
 	describe('get previousElementSibling()', () => {
 		test('Returns previous element sibling..', () => {
 			const node = document.createComment('test');
diff --git a/packages/happy-dom/test/nodes/basic/parent-node/ParentNodeUtility.test.ts b/packages/happy-dom/test/nodes/basic/parent-node/ParentNodeUtility.test.ts
index e8605a9d..e15e9d7b 100644
--- a/packages/happy-dom/test/nodes/basic/parent-node/ParentNodeUtility.test.ts
+++ b/packages/happy-dom/test/nodes/basic/parent-node/ParentNodeUtility.test.ts
@@ -21,6 +21,9 @@ describe('ParentNodeUtility', () => {
 			expect(parent.innerHTML).toBe(
 				'<span class="child1"></span><span class="child2"></span><span class="child3"></span><span class="child4"></span>'
 			);
+			expect(parent.children.map(element => element.outerHTML).join('')).toBe(
+				'<span class="child1"></span><span class="child2"></span><span class="child3"></span><span class="child4"></span>'
+			);
 		});
 
 		test('Appends a mixed list of Node and DOMString after the last child of the ParentNode', () => {
@@ -37,6 +40,9 @@ describe('ParentNodeUtility', () => {
 			expect(parent.innerHTML).toBe(
 				'<span class="child1"></span><span class="child2"></span><span class="child3"></span><span class="child4"></span><span class="child5"></span><span class="child6"></span><span class="child7"></span><span class="child8"></span><span class="child9"></span>'
 			);
+			expect(parent.children.map(element => element.outerHTML).join('')).toBe(
+				'<span class="child1"></span><span class="child2"></span><span class="child3"></span><span class="child4"></span><span class="child5"></span><span class="child6"></span><span class="child7"></span><span class="child8"></span><span class="child9"></span>'
+			);
 		});
 	});
 
@@ -52,6 +58,9 @@ describe('ParentNodeUtility', () => {
 			expect(parent.innerHTML).toBe(
 				'<span class="child4"></span><span class="child1"></span><span class="child2"></span><span class="child3"></span>'
 			);
+			expect(parent.children.map(element => element.outerHTML).join('')).toBe(
+				'<span class="child4"></span><span class="child1"></span><span class="child2"></span><span class="child3"></span>'
+			);
 		});
 
 		test('Prepends a mixed list of Node and DOMString before the first child of the ParentNode', () => {
@@ -68,6 +77,9 @@ describe('ParentNodeUtility', () => {
 			expect(parent.innerHTML).toBe(
 				'<span class="child4"></span><span class="child5"></span><span class="child6"></span><span class="child7"></span><span class="child8"></span><span class="child9"></span><span class="child1"></span><span class="child2"></span><span class="child3"></span>'
 			);
+			expect(parent.children.map(element => element.outerHTML).join('')).toBe(
+				'<span class="child4"></span><span class="child5"></span><span class="child6"></span><span class="child7"></span><span class="child8"></span><span class="child9"></span><span class="child1"></span><span class="child2"></span><span class="child3"></span>'
+			);
 		});
 	});
 
@@ -89,6 +101,9 @@ describe('ParentNodeUtility', () => {
 			expect(parent.innerHTML).toBe(
 				'<span class="child4"></span><span class="child5"></span><span class="child6"></span><span class="child7"></span><span class="child8"></span><span class="child9"></span>'
 			);
+			expect(parent.children.map(element => element.outerHTML).join('')).toBe(
+				'<span class="child4"></span><span class="child5"></span><span class="child6"></span><span class="child7"></span><span class="child8"></span><span class="child9"></span>'
+			);
 		});
 	});
 });
diff --git a/packages/server-rendering/test/context/HappyDOMContext.test.ts b/packages/server-rendering/test/context/HappyDOMContext.test.ts
index dbd03430..3ae41e16 100644
--- a/packages/server-rendering/test/context/HappyDOMContext.test.ts
+++ b/packages/server-rendering/test/context/HappyDOMContext.test.ts
@@ -48,6 +48,7 @@ describe('HappyDOMContext', () => {
 					const customElement = document.querySelector('custom-element');
 					customElement.setAttribute('key1', 'newValue1');
 					customElement.setAttribute('key2', 'newValue2');
+					customElement.setAttribute('key3', 'newValue3');
 					customElement.setAttribute('changedAttributes', customElement.changedAttributes.join(','));
 				}, 1);
 			`);
@@ -102,7 +103,7 @@ describe('HappyDOMContext', () => {
 						<div class="class1 class2" id="id">
 							<b>Bold</b>
 						</div>
-						<custom-element key1="newValue1" key2="newValue2" changedattributes="key1,key2" class="a">
+						<custom-element key1="newValue1" key2="newValue2" key3="newValue3" changedattributes="key1,key2" class="a">
 							<div class="a">
 								<span class="a">
 									Some text.