Reinstate modal-workflow self.ajaxifyForm & add unit tests

- Fixes wagtail#12618
- Regression from wagtail#12380

CHANGELOG.txt

@@ -60,6 +60,7 @@ Changelog
  * Maintenance: Migrate jQuery class toggling & drag/drop event handling within the multiple upload views to the Stimulus ZoneController usage (Ayaan Qadri)
  * Maintenance: Test project template for warnings when run against Django pre-release versions (Sage Abdullah)
  * Maintenance: Refactor redirects create/delete views to use generic views (Sage Abdullah)
+ * Maintenance: Add JSDoc description, adopt linting recommendations, and add more unit tests for `ModalWorkflow` (LB (Ben) Johnston)
 
 
 6.3.2 (xx.xx.xxxx) - IN DEVELOPMENT

client/src/entrypoints/admin/__snapshots__/modal-workflow.test.js.snap

@@ -45,6 +45,18 @@ HTMLCollection [
           >
             path/to/endpoint
           </div>
+          
+      
+          <form
+            action="/path/to/form/submit"
+            id="form"
+            method="post"
+          >
+            <input
+              name="key"
+              value="value"
+            />
+          </form>
         </div>
         
     

client/src/entrypoints/admin/modal-workflow.js

@@ -91,15 +91,15 @@ function ModalWorkflow(opts) {
   };
 
   self.ajaxifyForm = function ajaxifyForm(formSelector) {
-    $(formSelector).each(() => {
+    $(formSelector).each(function ajaxifyFormInner() {
       const action = this.action;
       if (this.method.toLowerCase() === 'get') {
-        $(this).on('submit', () => {
+        $(this).on('submit', function handleSubmit() {
           self.loadUrl(action, $(this).serialize());
           return false;
         });
       } else {
-        $(this).on('submit', () => {
+        $(this).on('submit', function handleSubmit() {
           self.postForm(action, $(this).serialize());
           return false;
         });

client/src/entrypoints/admin/modal-workflow.test.js

@@ -8,13 +8,29 @@ import './modal-workflow';
 
 $.get = jest.fn().mockImplementation((url, data, cb) => {
   cb(
-    JSON.stringify({ html: `<div id="url">${url}</div>`, data, step: 'start' }),
+    JSON.stringify({
+      data,
+      html: `<div id="url">${url}</div>
+      <form id="form" method="post" action="/path/to/form/submit"><input name="key" value="value"></input></form>`,
+      step: 'start',
+    }),
+  );
+  return { fail: jest.fn() };
+});
+
+$.post = jest.fn((url, data, cb) => {
+  cb(
+    JSON.stringify({
+      html: '<div id="response">response</div>',
+    }),
   );
   return { fail: jest.fn() };
 });
 
 describe('modal-workflow', () => {
   beforeEach(() => {
+    jest.clearAllMocks();
+
     document.body.innerHTML =
       '<div id="content"><button data-chooser-action-choose id="trigger">Open</button></div>';
   });
@@ -102,6 +118,31 @@ describe('modal-workflow', () => {
     expect(triggerButton.disabled).toBe(false);
   });
 
+  it('should expose a `ajaxifyForm` method that allows forms to be submitted async', () => {
+    expect($.post).toHaveBeenCalledTimes(0);
+    expect(document.querySelectorAll('.modal-body #response')).toHaveLength(0);
+
+    const modalWorkflow = window.ModalWorkflow({ url: 'path/to/endpoint' });
+
+    modalWorkflow.ajaxifyForm('#form');
+
+    const event = new Event('submit');
+    event.preventDefault = jest.fn();
+    document.getElementById('form').dispatchEvent(event);
+
+    expect(event.preventDefault).toHaveBeenCalled();
+
+    expect($.post).toHaveBeenCalledTimes(1);
+    expect($.post).toHaveBeenCalledWith(
+      'http://localhost/path/to/form/submit',
+      'key=value',
+      expect.any(Function),
+      'text',
+    );
+
+    expect(document.querySelectorAll('.modal-body #response')).toHaveLength(1);
+  });
+
   it('should handle onload and URL param options', () => {
     const onload = { start: jest.fn() };
     const urlParams = { page: 23 };
@@ -125,12 +166,15 @@ describe('modal-workflow', () => {
 
     expect(modalWorkflow).toBeInstanceOf(Object);
 
-    // important: see mock implementation above, returning a response with injected data to validate behaviour
+    // important: see mock implementation above, returning a response with injected data to validate behavior
     const response = {
       data: urlParams,
-      html: '<div id="url">path/to/endpoint</div>',
+      html: expect.stringContaining('<div id="url">path/to/endpoint</div>'),
       step: 'start',
     };
-    expect(onload.start).toHaveBeenCalledWith(modalWorkflow, response);
+    expect(onload.start).toHaveBeenCalledWith(
+      modalWorkflow,
+      expect.objectContaining(response),
+    );
   });
 });

docs/releases/6.4.md

@@ -79,6 +79,7 @@ depth: 1
  * Migrate jQuery class toggling & drag/drop event handling within the multiple upload views to the Stimulus ZoneController usage (Ayaan Qadri)
  * Test project template for warnings when run against Django pre-release versions (Sage Abdullah)
  * Refactor redirects create/delete views to use generic views (Sage Abdullah)
+ * Add JSDoc description, adopt linting recommendations, and add more unit tests for `ModalWorkflow` (LB (Ben) Johnston)
 
 
 ## Upgrade considerations - changes affecting all projects