Merge pull request #831 from capricorn86/task/527-no-submit-event-tri…

…ggered-for-button-type=submit #527@patch: Adds support for triggering submit or reset of form when …
capricorn86 · Apr 1, 2023 · 42cabb9 · 42cabb9
2 parents 5034081 + 4414374
commit 42cabb9
Show file tree

Hide file tree

Showing 4 changed files with 110 additions and 5 deletions.
diff --git a/packages/happy-dom/src/nodes/html-button-element/HTMLButtonElement.ts b/packages/happy-dom/src/nodes/html-button-element/HTMLButtonElement.ts
@@ -206,6 +206,35 @@ export default class HTMLButtonElement extends HTMLElement implements IHTMLButto
 		return type;
 	}
 
+	/**
+	 * @override
+	 */
+	public override dispatchEvent(event: Event): boolean {
+		if (event.type === 'click' && this.disabled) {
+			return false;
+		}
+
+		const returnValue = super.dispatchEvent(event);
+
+		if (event.type === 'click' && this.isConnected && !this.disabled) {
+			const form = <IHTMLFormElement>this._formNode;
+			switch (this.type) {
+				case 'submit':
+					if (form) {
+						form.requestSubmit();
+					}
+					break;
+				case 'reset':
+					if (form) {
+						form.reset();
+					}
+					break;
+			}
+		}
+
+		return returnValue;
+	}
+
 	/**
 	 * @override
 	 */

diff --git a/packages/happy-dom/src/nodes/html-input-element/HTMLInputElement.ts b/packages/happy-dom/src/nodes/html-input-element/HTMLInputElement.ts
@@ -1038,7 +1038,7 @@ export default class HTMLInputElement extends HTMLElement implements IHTMLInputE
 	/**
 	 * @override
 	 */
-	public dispatchEvent(event: Event): boolean {
+	public override dispatchEvent(event: Event): boolean {
 		if (event.type === 'click' && this.disabled) {
 			return false;
 		}

diff --git a/packages/happy-dom/test/nodes/html-button-element/HTMLButtonElement.test.ts b/packages/happy-dom/test/nodes/html-button-element/HTMLButtonElement.test.ts
@@ -5,6 +5,7 @@ import Event from '../../../src/event/Event';
 import IHTMLElement from '../../../src/nodes/html-element/IHTMLElement';
 import IHTMLFormElement from '../../../src/nodes/html-form-element/IHTMLFormElement';
 import ValidityState from '../../../src/validity-state/ValidityState';
+import IHTMLButtonElement from '../../../src/nodes/html-button-element/IHTMLButtonElement';
 
 describe('HTMLButtonElement', () => {
 	let window: Window;
@@ -235,4 +236,44 @@ describe('HTMLButtonElement', () => {
 			});
 		});
 	}
+
+	describe('dispatchEvent()', () => {
+		it('Submits form if type is "submit" and is a "click" event.', () => {
+			const form = <IHTMLFormElement>document.createElement('form');
+			const button = <IHTMLButtonElement>document.createElement('button');
+
+			let isSubmitTriggered = false;
+
+			button.type = 'submit';
+
+			form.appendChild(button);
+
+			document.body.appendChild(form);
+
+			form.addEventListener('submit', () => (isSubmitTriggered = true));
+
+			button.click();
+
+			expect(isSubmitTriggered).toBe(true);
+		});
+
+		it('Resets form if type is "reset" and is a "click" event.', () => {
+			const form = <IHTMLFormElement>document.createElement('form');
+			const button = <IHTMLButtonElement>document.createElement('button');
+
+			let isResetTriggered = false;
+
+			button.type = 'reset';
+
+			form.appendChild(button);
+
+			document.body.appendChild(form);
+
+			form.addEventListener('reset', () => (isResetTriggered = true));
+
+			button.click();
+
+			expect(isResetTriggered).toBe(true);
+		});
+	});
 });
diff --git a/packages/happy-dom/test/nodes/html-input-element/HTMLInputElement.test.ts b/packages/happy-dom/test/nodes/html-input-element/HTMLInputElement.test.ts
@@ -8,6 +8,7 @@ import Event from '../../../src/event/Event';
 import HTMLInputElementSelectionModeEnum from '../../../src/nodes/html-input-element/HTMLInputElementSelectionModeEnum';
 import HTMLInputElementSelectionDirectionEnum from '../../../src/nodes/html-input-element/HTMLInputElementSelectionDirectionEnum';
 import ValidityState from '../../../src/validity-state/ValidityState';
+import { IHTMLFormElement } from '../../../src';
 
 describe('HTMLInputElement', () => {
 	let window: IWindow;
@@ -739,7 +740,7 @@ describe('HTMLInputElement', () => {
 	});
 
 	describe('dispatchEvent()', () => {
-		it('Sets "checked" to "true" if type is "checkbox" and it is mutable for a "click" event.', () => {
+		it('Sets "checked" to "true" if type is "checkbox" and is a "click" event.', () => {
 			let isInputTriggered = false;
 			let isChangeTriggered = false;
 
@@ -761,7 +762,7 @@ describe('HTMLInputElement', () => {
 			expect(element.checked).toBe(false);
 		});
 
-		it('Sets "checked" to "true" if type is "radio" and it is mutable for a "click" event.', () => {
+		it('Sets "checked" to "true" if type is "radio" and is a "click" event.', () => {
 			let isInputTriggered = false;
 			let isChangeTriggered = false;
 
@@ -783,8 +784,42 @@ describe('HTMLInputElement', () => {
 			expect(element.checked).toBe(true);
 		});
 
-		it('Submits form if type is "submit" and it is mutable for a "click" event.', () => {
-			// TODO: implement
+		it('Submits form if type is "submit" and is a "click" event.', () => {
+			const form = <IHTMLFormElement>document.createElement('form');
+			const button = <IHTMLInputElement>document.createElement('input');
+
+			let isSubmitTriggered = false;
+
+			button.type = 'submit';
+
+			form.appendChild(button);
+
+			document.body.appendChild(form);
+
+			form.addEventListener('submit', () => (isSubmitTriggered = true));
+
+			button.click();
+
+			expect(isSubmitTriggered).toBe(true);
+		});
+
+		it('Resets form if type is "reset" and is a "click" event.', () => {
+			const form = <IHTMLFormElement>document.createElement('form');
+			const button = <IHTMLInputElement>document.createElement('input');
+
+			let isResetTriggered = false;
+
+			button.type = 'reset';
+
+			form.appendChild(button);
+
+			document.body.appendChild(form);
+
+			form.addEventListener('reset', () => (isResetTriggered = true));
+
+			button.click();
+
+			expect(isResetTriggered).toBe(true);
 		});
 	});
 });