UIHandler: extract a public helper to process custom interactions (#388)

naja-js · Apr 26, 2024 · 8beeb84 · 8beeb84
1 parent d4c1132
commit 8beeb84
Show file tree

Hide file tree

Showing 2 changed files with 70 additions and 17 deletions.
diff --git a/src/core/UIHandler.ts b/src/core/UIHandler.ts
@@ -80,11 +80,6 @@ export class UIHandler extends EventTarget {
 	public async clickElement(element: HTMLElement, options: Options = {}, event?: MouseEvent): Promise<Payload> {
 		let method: string = 'GET', url: string = '', data: any;
 
-		if ( ! this.dispatchEvent(new CustomEvent('interaction', {cancelable: true, detail: {element, originalEvent: event, options}}))) {
-			event?.preventDefault();
-			return {};
-		}
-
 		if (element.tagName === 'A') {
 			assert(element instanceof HTMLAnchorElement);
 
@@ -112,25 +107,31 @@ export class UIHandler extends EventTarget {
 			}
 		}
 
-		if ( ! this.isUrlAllowed(url)) {
-			throw new Error(`Cannot dispatch async request, URL is not allowed: ${url}`);
-		}
-
-		event?.preventDefault();
-		return this.naja.makeRequest(method, url, data, options);
+		return this.processInteraction(element, method, url, data, options, event);
 	}
 
 	public async submitForm(form: HTMLFormElement, options: Options = {}, event?: Event): Promise<Payload> {
-		if ( ! this.dispatchEvent(new CustomEvent('interaction', {cancelable: true, detail: {element: form, originalEvent: event, options}}))) {
-			event?.preventDefault();
-			return {};
-		}
-
 		const method = form.getAttribute('method')?.toUpperCase() ?? 'GET';
 		const url = form.getAttribute('action') ?? window.location.pathname + window.location.search;
 		const data = new FormData(form);
 
-		if ( ! this.isUrlAllowed(url)) {
+		return this.processInteraction(form, method, url, data, options, event);
+	}
+
+	public async processInteraction(
+		element: HTMLElement,
+		method: string,
+		url: string | URL,
+		data: any | null = null,
+		options: Options = {},
+		event?: Event,
+	): Promise<Payload> {
+		if ( ! this.dispatchEvent(new CustomEvent('interaction', {cancelable: true, detail: {element, originalEvent: event, options}}))) {
+			event?.preventDefault();
+			return {};
+		}
+
+		if ( ! this.isUrlAllowed(`${url}`)) {
 			throw new Error(`Cannot dispatch async request, URL is not allowed: ${url}`);
 		}
 

diff --git a/tests/Naja.UIHandler.js b/tests/Naja.UIHandler.js
@@ -599,4 +599,56 @@ describe('UIHandler', function () {
 			mock.verify();
 		});
 	});
+
+	describe('processInteraction()', function () {
+		it('dispatches request', function () {
+			const naja = mockNaja();
+			const mock = sinon.mock(naja);
+
+			const expectedResult = {answer: 42};
+
+			mock.expects('makeRequest')
+				.withExactArgs('GET', '/UIHandler/processInteraction', null, {})
+				.once()
+				.returns(Promise.resolve(expectedResult));
+
+			const button = document.createElement('button');
+
+			const handler = new UIHandler(naja);
+			return handler.processInteraction(button, 'GET', '/UIHandler/processInteraction')
+				.then((result) => {
+					assert.deepEqual(result, expectedResult);
+					mock.verify();
+				});
+		});
+
+		it('triggers interaction event', function () {
+			const naja = mockNaja();
+			const mock = sinon.mock(naja);
+
+			mock.expects('makeRequest')
+				.withExactArgs('GET', '/UIHandler/processInteraction', null, {})
+				.once();
+
+			const button = document.createElement('button');
+
+			const listener = sinon.spy();
+			const handler = new UIHandler(naja);
+			handler.addEventListener('interaction', listener);
+
+			const event = new MouseEvent('click');
+
+			handler.processInteraction(button, 'GET', '/UIHandler/processInteraction', null, {}, event);
+
+			assert.isTrue(listener.calledWith(
+				sinon.match((event) => event.constructor.name === 'CustomEvent')
+					.and(sinon.match.has('detail', sinon.match.object
+						.and(sinon.match.has('element', button))
+						.and(sinon.match.has('originalEvent', event))
+					))
+			));
+
+			mock.verify();
+		});
+	});
 });