diff --git a/CHANGELOG.txt b/CHANGELOG.txt
index 521059f9c1c..630e2a3516d 100644
--- a/CHANGELOG.txt
+++ b/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)
diff --git a/client/src/controllers/ActionController.test.js b/client/src/controllers/ActionController.test.js
index 8120b318186..26d9a979d55 100644
--- a/client/src/controllers/ActionController.test.js
+++ b/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 = `
`;
- 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 = `
+
+ `;
+
+ 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();
+ });
});
});
diff --git a/client/src/controllers/ActionController.ts b/client/src/controllers/ActionController.ts
index f5ab9b4c91b..de39880e877 100644
--- a/client/src/controllers/ActionController.ts
+++ b/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
+ *
+ *
+ * @example - triggering a dynamic POST submission
*