diff --git a/CHANGELOG.txt b/CHANGELOG.txt
index cfeea82512..4411028ac2 100644
--- a/CHANGELOG.txt
+++ b/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
diff --git a/client/src/entrypoints/admin/__snapshots__/modal-workflow.test.js.snap b/client/src/entrypoints/admin/__snapshots__/modal-workflow.test.js.snap
index a5f1675e42..42497f9a15 100644
--- a/client/src/entrypoints/admin/__snapshots__/modal-workflow.test.js.snap
+++ b/client/src/entrypoints/admin/__snapshots__/modal-workflow.test.js.snap
@@ -45,6 +45,18 @@ HTMLCollection [
>
path/to/endpoint
+
+
+
diff --git a/client/src/entrypoints/admin/modal-workflow.js b/client/src/entrypoints/admin/modal-workflow.js
index 2955f763ee..54737ed193 100644
--- a/client/src/entrypoints/admin/modal-workflow.js
+++ b/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;
});
diff --git a/client/src/entrypoints/admin/modal-workflow.test.js b/client/src/entrypoints/admin/modal-workflow.test.js
index 0a5235f503..bcfa56bcc0 100644
--- a/client/src/entrypoints/admin/modal-workflow.test.js
+++ b/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: `${url}
`, data, step: 'start' }),
+ JSON.stringify({
+ data,
+ html: `${url}
+ `,
+ step: 'start',
+ }),
+ );
+ return { fail: jest.fn() };
+});
+
+$.post = jest.fn((url, data, cb) => {
+ cb(
+ JSON.stringify({
+ html: 'response
',
+ }),
);
return { fail: jest.fn() };
});
describe('modal-workflow', () => {
beforeEach(() => {
+ jest.clearAllMocks();
+
document.body.innerHTML =
'';
});
@@ -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: 'path/to/endpoint
',
+ html: expect.stringContaining('path/to/endpoint
'),
step: 'start',
};
- expect(onload.start).toHaveBeenCalledWith(modalWorkflow, response);
+ expect(onload.start).toHaveBeenCalledWith(
+ modalWorkflow,
+ expect.objectContaining(response),
+ );
});
});
diff --git a/docs/releases/6.4.md b/docs/releases/6.4.md
index 5dff2827c1..a77da22022 100644
--- a/docs/releases/6.4.md
+++ b/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