fix: wire up generic onAdd and onRemove event callbacks (issue #160)

src/lib/js/common/events.js

@@ -33,6 +33,7 @@ const defaults = {
   bubbles: true, // bubble events from components
   formeoLoaded: _evt => {},
   onAdd: () => {},
+  onRemove: () => {},
   onChange: evt => events.opts?.debug && console.log(evt),
   onUpdate: evt => events.opts?.debug && console.log(evt),
   onUpdateStage: evt => events.opts?.debug && console.log(evt),
@@ -136,36 +137,42 @@ document.addEventListener(EVENT_FORMEO_UPDATED_FIELD, evt => {
 document.addEventListener(EVENT_FORMEO_ADDED_ROW, evt => {
   const { timeStamp, type, detail } = evt
   const eventData = { timeStamp, type, detail }
+  events.opts.onAdd(eventData)
   events.opts.onAddRow(eventData)
 })
 
 document.addEventListener(EVENT_FORMEO_ADDED_COLUMN, evt => {
   const { timeStamp, type, detail } = evt
   const eventData = { timeStamp, type, detail }
+  events.opts.onAdd(eventData)
   events.opts.onAddColumn(eventData)
 })
 
 document.addEventListener(EVENT_FORMEO_ADDED_FIELD, evt => {
   const { timeStamp, type, detail } = evt
   const eventData = { timeStamp, type, detail }
+  events.opts.onAdd(eventData)
   events.opts.onAddField(eventData)
 })
 
 document.addEventListener(EVENT_FORMEO_REMOVED_ROW, evt => {
   const { timeStamp, type, detail } = evt
   const eventData = { timeStamp, type, detail }
+  events.opts.onRemove(eventData)
   events.opts.onRemoveRow(eventData)
 })
 
 document.addEventListener(EVENT_FORMEO_REMOVED_COLUMN, evt => {
   const { timeStamp, type, detail } = evt
   const eventData = { timeStamp, type, detail }
+  events.opts.onRemove(eventData)
   events.opts.onRemoveColumn(eventData)
 })
 
 document.addEventListener(EVENT_FORMEO_REMOVED_FIELD, evt => {
   const { timeStamp, type, detail } = evt
   const eventData = { timeStamp, type, detail }
+  events.opts.onRemove(eventData)
   events.opts.onRemoveField(eventData)
 })
 

src/lib/js/common/events.test.js

@@ -467,6 +467,65 @@ describe('Events System', () => {
         Events.formeoAddedField({ componentId: 'field-test' })
       })
     })
+
+    it('should call generic onAdd callback for row additions', () => {
+      return new Promise(resolve => {
+        const onAdd = mock.fn(evt => {
+          assert.equal(evt.type, EVENT_FORMEO_ADDED_ROW)
+          resolve()
+        })
+
+        Events.init({ onAdd })
+
+        Events.formeoAddedRow({ componentId: 'row-test' })
+      })
+    })
+
+    it('should call generic onAdd callback for column additions', () => {
+      return new Promise(resolve => {
+        const onAdd = mock.fn(evt => {
+          assert.equal(evt.type, EVENT_FORMEO_ADDED_COLUMN)
+          resolve()
+        })
+
+        Events.init({ onAdd })
+
+        Events.formeoAddedColumn({ componentId: 'column-test' })
+      })
+    })
+
+    it('should call generic onAdd callback for field additions', () => {
+      return new Promise(resolve => {
+        const onAdd = mock.fn(evt => {
+          assert.equal(evt.type, EVENT_FORMEO_ADDED_FIELD)
+          resolve()
+        })
+
+        Events.init({ onAdd })
+
+        Events.formeoAddedField({ componentId: 'field-test' })
+      })
+    })
+
+    it('should call both generic onAdd and specific onAddRow callbacks', () => {
+      return new Promise(resolve => {
+        let calls = 0
+        const onAdd = mock.fn(evt => {
+          assert.equal(evt.type, EVENT_FORMEO_ADDED_ROW)
+          calls++
+          if (calls === 2) resolve()
+        })
+        const onAddRow = mock.fn(evt => {
+          assert.equal(evt.type, EVENT_FORMEO_ADDED_ROW)
+          calls++
+          if (calls === 2) resolve()
+        })
+
+        Events.init({ onAdd, onAddRow })
+
+        Events.formeoAddedRow({ componentId: 'row-test' })
+      })
+    })
   })
 
   describe('Remove events', () => {
@@ -550,5 +609,64 @@ describe('Events System', () => {
         Events.formeoRemovedField({ componentId: 'field-test' })
       })
     })
+
+    it('should call generic onRemove callback for row removals', () => {
+      return new Promise(resolve => {
+        const onRemove = mock.fn(evt => {
+          assert.equal(evt.type, EVENT_FORMEO_REMOVED_ROW)
+          resolve()
+        })
+
+        Events.init({ onRemove })
+
+        Events.formeoRemovedRow({ componentId: 'row-test' })
+      })
+    })
+
+    it('should call generic onRemove callback for column removals', () => {
+      return new Promise(resolve => {
+        const onRemove = mock.fn(evt => {
+          assert.equal(evt.type, EVENT_FORMEO_REMOVED_COLUMN)
+          resolve()
+        })
+
+        Events.init({ onRemove })
+
+        Events.formeoRemovedColumn({ componentId: 'column-test' })
+      })
+    })
+
+    it('should call generic onRemove callback for field removals', () => {
+      return new Promise(resolve => {
+        const onRemove = mock.fn(evt => {
+          assert.equal(evt.type, EVENT_FORMEO_REMOVED_FIELD)
+          resolve()
+        })
+
+        Events.init({ onRemove })
+
+        Events.formeoRemovedField({ componentId: 'field-test' })
+      })
+    })
+
+    it('should call both generic onRemove and specific onRemoveRow callbacks', () => {
+      return new Promise(resolve => {
+        let calls = 0
+        const onRemove = mock.fn(evt => {
+          assert.equal(evt.type, EVENT_FORMEO_REMOVED_ROW)
+          calls++
+          if (calls === 2) resolve()
+        })
+        const onRemoveRow = mock.fn(evt => {
+          assert.equal(evt.type, EVENT_FORMEO_REMOVED_ROW)
+          calls++
+          if (calls === 2) resolve()
+        })
+
+        Events.init({ onRemove, onRemoveRow })
+
+        Events.formeoRemovedRow({ componentId: 'row-test' })
+      })
+    })
   })
 })