Dispatch event when adding new record

The controller element is the target of the event.
We don't need `CustomEvent`, because there's no custom data to pass.

Author: dacook

spec/index.test.ts

@@ -43,4 +43,18 @@ describe('#nestedForm', (): void => {
 
     expect(target.previousElementSibling.innerHTML).toContain('New todo')
   })
+
+  it('should dispatch events', (): void => {
+    const controllerElement: HTMLButtonElement = document.querySelector("[data-controller='nested-form']")
+    const addButton: HTMLButtonElement = document.querySelector("[data-action='nested-form#add']")
+
+    jest.spyOn(global, 'Event').mockImplementation((type: string, eventInit?: any) => ({ type, eventInit }))
+    const mockDispatchEvent = jest.spyOn(controllerElement, 'dispatchEvent').mockImplementation(() => true)
+
+    addButton.click()
+
+    expect(mockDispatchEvent).toHaveBeenCalledWith({
+      type: 'nested-form:add'
+    })
+  })
 })

src/index.ts

@@ -18,6 +18,8 @@ export default class extends Controller {
 
     const content: string = this.templateTarget.innerHTML.replace(/NEW_RECORD/g, new Date().getTime().toString())
     this.targetTarget.insertAdjacentHTML('beforebegin', content)
+
+    this.element.dispatchEvent(new Event('nested-form:add', { bubbles: true }))
   }
 
   remove (e: Event): void {