Update ActionController with a click method

- Partial change towards wagtail#10167

CHANGELOG.txt

@@ -114,6 +114,7 @@ Changelog
  * Maintenance: Refactor `SnippetViewSet` to extend `ModelViewSet` (Sage Abdullah)
  * Maintenance: Migrate initDismissibles behaviour to a Stimulus controller `w-disimissible` (Loveth Omokaro)
  * Maintenance: Replace jQuery autosize v3 with Stimulus `w-autosize` controller using autosize npm package v6 (Suyash Srivastava)
+ * Maintenance: Update `ActionController` with a click method (Aadi jindal)
 
 
 4.2.2 (03.04.2023)

client/src/controllers/ActionController.test.js

@@ -2,8 +2,15 @@ import { Application } from '@hotwired/stimulus';
 import { ActionController } from './ActionController';
 
 describe('ActionController', () => {
-  beforeEach(() => {
-    document.body.innerHTML = `
+  let app;
+
+  afterEach(() => {
+    app?.stop();
+  });
+
+  describe('post method', () => {
+    beforeEach(() => {
+      document.body.innerHTML = `
     <button
       class="button no"
       data-controller="w-action"
@@ -13,20 +20,54 @@ describe('ActionController', () => {
       Enable
     </button>
     `;
-    Application.start().register('w-action', ActionController);
+
+      app = Application.start();
+      app.register('w-action', ActionController);
+    });
+
+    it('it should allow for a form POST with created data', () => {
+      const btn = document.querySelector('[data-controller="w-action"]');
+      const submitMock = jest.fn();
+      window.HTMLFormElement.prototype.submit = submitMock;
+
+      btn.click();
+      const form = document.querySelector('form');
+
+      expect(submitMock).toHaveBeenCalled();
+      expect(form.action).toBe('https://www.github.com/');
+      expect(new FormData(form).get('csrfmiddlewaretoken')).toBe('potato');
+      expect(new FormData(form).get('next')).toBe('http://localhost/');
+    });
   });
 
-  it('it should enable the workflow, lock and Unlock button', () => {
-    const btn = document.querySelector('[data-controller="w-action"]');
-    const submitMock = jest.fn();
-    window.HTMLFormElement.prototype.submit = submitMock;
+  describe('click method', () => {
+    beforeEach(() => {
+      document.body.innerHTML = `
+      <button
+        type="button"
+        id="button"
+        data-controller="w-action"
+        data-action="some-event->w-action#click"
+      >
+        Button
+      </button>
+      `;
+
+      app = Application.start();
+      app.register('w-action', ActionController);
+    });
+
+    it('should call click method when button is clicked via Stimulus action', () => {
+      const btn = document.getElementById('button');
+      const clickMock = jest.fn();
+      HTMLButtonElement.prototype.click = clickMock;
+
+      btn.addEventListener('some-event', btn.click());
 
-    btn.click();
-    const form = document.querySelector('form');
+      const event = new CustomEvent('some-event');
+      btn.dispatchEvent(event);
 
-    expect(submitMock).toHaveBeenCalled();
-    expect(form.action).toBe('https://www.github.com/');
-    expect(new FormData(form).get('csrfmiddlewaretoken')).toBe('potato');
-    expect(new FormData(form).get('next')).toBe('http://localhost/');
+      expect(clickMock).toHaveBeenCalled();
+    });
   });
 });

client/src/controllers/ActionController.ts

@@ -2,13 +2,23 @@ import { Controller } from '@hotwired/stimulus';
 import { WAGTAIL_CONFIG } from '../config/wagtailConfig';
 
 /**
- * Adds the ability for an element to activate a form submission
- * where the form is created dynamically in the DOM and then submitted.
+ * Adds the ability for an element to activate a discrete action
+ * such as clicking the button dynamically from some other event or
+ * triggering a form submission where the form is created dynamically
+ * in the DOM and then submitted.
  *
- * @example
+ * @example - triggering a click
+ * <button
+ *  type="button"
+ *  data-controller="w-action"
+ *  data-action="some-event#click"
+ * >
+ *  Go
+ * </button>
+ *
+ * @example - triggering a dynamic POST submission
  * <button
  *  type="submit"
- *  class="button no"
  *  data-controller="w-action"
  *  data-action="w-action#post"
  *  data-w-action-url-value='url/to/post/to'
@@ -27,6 +37,10 @@ export class ActionController extends Controller<
   declare continueValue: boolean;
   declare urlValue: string;
 
+  click() {
+    this.element.click();
+  }
+
   post(event: Event) {
     event.preventDefault();
     event.stopPropagation();

docs/releases/5.0.md

@@ -161,6 +161,7 @@ Those improvements were implemented by Albina Starykova as part of an [Outreachy
  * Refactor `SnippetViewSet` to extend `ModelViewSet` (Sage Abdullah)
  * Migrate initDismissibles behaviour to a Stimulus controller `w-disimissible` (Loveth Omokaro)
  * Replace jQuery autosize v3 with Stimulus `w-autosize` controller using autosize npm package v6 (Suyash Srivastava)
+ * Update `ActionController` with a click method (Aadi jindal)
 
 
 ## Upgrade considerations