fix: [#1608] Fixes problem where snapshots did not result in HTML for…

… form and select elements (#1653)

packages/happy-dom/src/utilities/ClassMethodBinder.ts

@@ -24,7 +24,7 @@ export default class ClassMethodBinder {
 	 */
 	public bind(name: string | symbol): void {
 		// We should never bind the Symbol.iterator method as it can cause problems with Array.from()
-		if (this.cache.has(name) || name === Symbol.iterator) {
+		if (this.cache.has(name) || name === Symbol.iterator || name === 'constructor') {
 			return;
 		}
 
@@ -40,6 +40,10 @@ export default class ClassMethodBinder {
 			const descriptor = Object.getOwnPropertyDescriptor(_class.prototype, name);
 			if (descriptor) {
 				if (typeof descriptor.value === 'function') {
+					if (descriptor.value.toString().startsWith('class ')) {
+						// Do not bind classes
+						return;
+					}
 					Object.defineProperty(target, name, {
 						...descriptor,
 						value: descriptor.value.bind(target)

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

@@ -38,6 +38,22 @@ describe('HTMLFormElement', () => {
 		});
 	});
 
+	describe('constructor()', () => {
+		it('Matches snapshot.', () => {
+			element.innerHTML = `
+                <input type="text" name="text1" value="value1">
+                <input type="hidden" name="text2" value="value2">
+                <input type="checkbox" name="checkbox1" value="value1" checked>
+                <input type="checkbox" name="checkbox2" value="value2">
+                <input type="radio" name="radio1" value="value1">
+                <input type="radio" name="radio1" value="value2" checked>
+                <input type="radio" name="radio1" value="value3">
+                <input type="submit" name="button1">
+            `;
+			expect(element).toMatchSnapshot();
+		});
+	});
+
 	for (const property of [
 		'name',
 		'target',

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

@@ -0,0 +1,65 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`HTMLFormElement > constructor() > Matches snapshot. 1`] = `
+<form>
+  
+                
+  <input
+    name="text1"
+    type="text"
+    value="value1"
+  />
+  
+                
+  <input
+    name="text2"
+    type="hidden"
+    value="value2"
+  />
+  
+                
+  <input
+    checked=""
+    name="checkbox1"
+    type="checkbox"
+    value="value1"
+  />
+  
+                
+  <input
+    name="checkbox2"
+    type="checkbox"
+    value="value2"
+  />
+  
+                
+  <input
+    name="radio1"
+    type="radio"
+    value="value1"
+  />
+  
+                
+  <input
+    checked=""
+    name="radio1"
+    type="radio"
+    value="value2"
+  />
+  
+                
+  <input
+    name="radio1"
+    type="radio"
+    value="value3"
+  />
+  
+                
+  <input
+    name="button1"
+    type="submit"
+  />
+  
+            
+</form>
+`;

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

@@ -24,6 +24,13 @@ describe('HTMLSelectElement', () => {
 		});
 	});
 
+	describe('constructor()', () => {
+		it('Matches snapshot.', () => {
+			element.innerHTML = '<option>Option 1</option><option>Option 2</option>';
+			expect(element).toMatchSnapshot();
+		});
+	});
+
 	describe('get options()', () => {
 		it('Reflects changes as options elements are added and removed from the DOM.', () => {
 			const option1 = <HTMLOptionElement>document.createElement('option');

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

@@ -0,0 +1,12 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`HTMLSelectElement > constructor() > Matches snapshot. 1`] = `
+<select>
+  <option>
+    Option 1
+  </option>
+  <option>
+    Option 2
+  </option>
+</select>
+`;