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