feat(table): Include native event object with row-* and head-* events (bootstrap-vue#891)

tmorehouse · web-flow · commit 0be52156557a · 2017-08-20T03:23:36.000-03:00
* feat(table): Include native event with row-clicked, row-dblclicked, row-hovered, and head-clicked events

* Update meta.json

* [table] Update tests
diff --git a/docs/components/table/meta.json b/docs/components/table/meta.json
@@ -13,6 +13,10 @@
         {
           "arg": "index",
           "description": "Index of the row being clicked."
+        },
+        {
+          "arg": "event",
+          "description": "Native event object"
         }
       ]
     },
@@ -27,6 +31,10 @@
         {
           "arg": "index",
           "description": "Index of the row being double clicked."
+        },
+        {
+          "arg": "event",
+          "description": "Native event object"
         }
       ]
     },
@@ -41,6 +49,10 @@
         {
           "arg": "index",
           "description": "Index of the row being hovered."
+        },
+        {
+          "arg": "event",
+          "description": "Native event object"
         }
       ]
     },
@@ -55,6 +67,10 @@
         {
           "arg": "field",
           "description": "Field definition object."
+        },
+        {
+          "arg": "event",
+          "description": "Native event object"
         }
       ]
     },
diff --git a/lib/components/table.vue b/lib/components/table.vue
@@ -479,7 +479,7 @@
                     e.stopPropagation();
                     return;
                 }
-                this.$emit('row-clicked', item, index);
+                this.$emit('row-clicked', item, index, e);
             },
             rowDblClicked(e, item, index) {
                 if (this.computedBusy) {
@@ -488,7 +488,7 @@
                     e.stopPropagation();
                     return;
                 }
-                this.$emit('row-dblclicked', item, index);
+                this.$emit('row-dblclicked', item, index, e);
             },
             rowHovered(e, item, index) {
                 if (this.computedBusy) {
@@ -497,7 +497,7 @@
                     e.stopPropagation();
                     return;
                 }
-                this.$emit('row-hovered', item, index);
+                this.$emit('row-hovered', item, index, e);
             },
             headClicked(e, field, key) {
                 if (this.computedBusy) {
@@ -523,7 +523,7 @@
                     sortChanged = true;
                 }
 
-                this.$emit('head-clicked', key, field);
+                this.$emit('head-clicked', key, field, e);
                 if (sortChanged) {
                     // Sorting parameters changed
                     this.$emit('sort-changed', this.context);
diff --git a/tests/components/table.spec.js b/tests/components/table.spec.js
@@ -320,31 +320,30 @@ describe('table', async() => {
         }
     })
 
-    it('each data row should emit a row-clicked event with the item,index when clicked', async() => {
+    it('each data row should emit a row-clicked event when clicked', async() => {
         const { app: { $refs, $el } } = window
         const vm = $refs.table_paginated
-        const spy = jest.fn()
 
-        vm.$on('row-clicked', spy)
         const tbody = [...vm.$el.children].find(el => el && el.tagName === 'TBODY');
         expect(tbody).toBeDefined();
         if (tbody) {
             const trs = [...tbody.children]
             expect(trs.length).toBe(vm.perPage)
             trs.forEach((tr, idx) => {
+                const spy = jest.fn()
+                vm.$on('row-clicked', spy)
                 tr.click()
-                expect(spy).toHaveBeenCalledWith(vm.value[idx], idx)
+                vm.$off('row-clicked', spy)
+                expect(spy).toHaveBeenCalled()
             })
         }
     })
 
-    it('each header th should emit a head-clicked event with key,field when clicked', async() => {
+    it('each header th should emit a head-clicked event when clicked', async() => {
         const { app: { $refs, $el } } = window
         const vm = $refs.table_paginated
-        const spy = jest.fn()
         const fieldKeys = Object.keys(vm.fields)
 
-        vm.$on('head-clicked', spy)
         const thead = [...vm.$el.children].find(el => el && el.tagName === 'THEAD');
         expect(thead).toBeDefined()
         if (thead) {
@@ -354,20 +353,21 @@ describe('table', async() => {
                 const ths = [...tr.children]
                 expect(ths.length).toBe(fieldKeys.length)
                 ths.forEach((th, idx) => {
+                    const spy = jest.fn()
+                    vm.$on('head-clicked', spy)
                     th.click()
-                    expect(spy).toHaveBeenCalledWith(fieldKeys[idx], vm.fields[fieldKeys[idx]])
+                    vm.$off('head-clicked', spy)
+                    expect(spy).toHaveBeenCalled()
                 })
             }
         }
     })
 
-    it('each footer th should emit a head-clicked event with key,field when clicked', async() => {
+    it('each footer th should emit a head-clicked event when clicked', async() => {
         const { app: { $refs, $el } } = window
         const vm = $refs.table_paginated
-        const spy = jest.fn()
         const fieldKeys = Object.keys(vm.fields)
 
-        vm.$on('head-clicked', spy)
         const tfoot = [...vm.$el.children].find(el => el && el.tagName === 'TFOOT');
         expect(tfoot).toBeDefined()
         if (tfoot) {
@@ -377,8 +377,11 @@ describe('table', async() => {
                 const ths = [...tr.children]
                 expect(ths.length).toBe(fieldKeys.length)
                 ths.forEach((th, idx) => {
+                    const spy = jest.fn()
+                    vm.$on('head-clicked', spy)
                     th.click()
-                    expect(spy).toHaveBeenCalledWith(fieldKeys[idx], vm.fields[fieldKeys[idx]])
+                    vm.$off('head-clicked', spy)
+                    expect(spy).toHaveBeenCalled()
                 })
             }
         }

Original file line number	Diff line number	Diff line change
`@@ -13,6 +13,10 @@`
`13`	`13`	`{`
`14`	`14`	`"arg": "index",`
`15`	`15`	`"description": "Index of the row being clicked."`
	`16`	`+ },`
	`17`	`+ {`
	`18`	`+ "arg": "event",`
	`19`	`+ "description": "Native event object"`
`16`	`20`	`}`
`17`	`21`	`]`
`18`	`22`	`},`
`@@ -27,6 +31,10 @@`
`27`	`31`	`{`
`28`	`32`	`"arg": "index",`
`29`	`33`	`"description": "Index of the row being double clicked."`
	`34`	`+ },`
	`35`	`+ {`
	`36`	`+ "arg": "event",`
	`37`	`+ "description": "Native event object"`
`30`	`38`	`}`
`31`	`39`	`]`
`32`	`40`	`},`
`@@ -41,6 +49,10 @@`
`41`	`49`	`{`
`42`	`50`	`"arg": "index",`
`43`	`51`	`"description": "Index of the row being hovered."`
	`52`	`+ },`
	`53`	`+ {`
	`54`	`+ "arg": "event",`
	`55`	`+ "description": "Native event object"`
`44`	`56`	`}`
`45`	`57`	`]`
`46`	`58`	`},`
`@@ -55,6 +67,10 @@`
`55`	`67`	`{`
`56`	`68`	`"arg": "field",`
`57`	`69`	`"description": "Field definition object."`
	`70`	`+ },`
	`71`	`+ {`
	`72`	`+ "arg": "event",`
	`73`	`+ "description": "Native event object"`
`58`	`74`	`}`
`59`	`75`	`]`
`60`	`76`	`},`