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 *