Skip to content
Permalink
Browse files

fix(b-table): minor code optimizations to filter debouncing (#4167)

  • Loading branch information...
tmorehouse committed Sep 30, 2019
1 parent a8e2e56 commit 018eef139ee9a49dd08a5da01157412adccb4486
Showing with 25 additions and 16 deletions.
  1. +9 −15 src/components/table/helpers/mixin-filtering.js
  2. +16 −1 src/components/table/table-filtering.spec.js
@@ -96,21 +96,18 @@ export default {
// We need a deep watcher in case the user passes
// an object when using `filter-function`
deep: true,
handler(newFilter, oldFilter) {
handler(newCriteria, oldCriteria) {
const timeout = this.computedFilterDebounce
if (this.$_filterTimer) {
clearTimeout(this.$_filterTimer)
this.$_filterTimer = null
}
if (timeout) {
clearTimeout(this.$_filterTimer)
this.$_filterTimer = null
if (timeout && timeout > 0) {
// If we have a debounce time, delay the update of `localFilter`
this.$_filterTimer = setTimeout(() => {
this.$_filterTimer = null
this.localFilter = this.filterSanitize(this.filter)
this.localFilter = this.filterSanitize(newCriteria)
}, timeout)
} else {
// Otherwise, immediately update `localFilter` with `newFilter` value
this.localFilter = this.filterSanitize(newFilter)
this.localFilter = this.filterSanitize(newCriteria)
}
}
},
@@ -154,12 +151,9 @@ export default {
this.isFiltered = Boolean(this.localFilter)
})
},
beforeDestroy() {
/* istanbul ignore next */
if (this.$_filterTimer) {
clearTimeout(this.$_filterTimer)
this.$_filterTimer = null
}
beforeDestroy() /* istanbul ignore next */ {
clearTimeout(this.$_filterTimer)
this.$_filterTimer = null
},
methods: {
filterSanitize(criteria) {
@@ -238,6 +238,7 @@ describe('table > filtering', () => {

it('filter debouncing works', async () => {
jest.useFakeTimers()
let lastFilterTimer = null
const wrapper = mount(BTable, {
propsData: {
fields: testFields,
@@ -254,6 +255,7 @@ describe('table > filtering', () => {
expect(wrapper.emitted('input').length).toBe(1)
expect(wrapper.emitted('input')[0][0]).toEqual(testItems)
expect(wrapper.vm.$_filterTimer).toBe(null)
lastFilterTimer = wrapper.vm.$_filterTimer

// Set filter to a single character
wrapper.setProps({
@@ -262,6 +264,9 @@ describe('table > filtering', () => {
await waitNT(wrapper.vm)
expect(wrapper.emitted('input').length).toBe(1)
expect(wrapper.vm.$_filterTimer).not.toBe(null)
expect(wrapper.vm.$_filterTimer).not.toEqual(lastFilterTimer)
lastFilterTimer = wrapper.vm.$_filterTimer
expect(wrapper.vm.localFilter).not.toEqual('1')

// Change filter
wrapper.setProps({
@@ -270,12 +275,17 @@ describe('table > filtering', () => {
await waitNT(wrapper.vm)
expect(wrapper.emitted('input').length).toBe(1)
expect(wrapper.vm.$_filterTimer).not.toBe(null)
expect(wrapper.vm.$_filterTimer).not.toEqual(lastFilterTimer)
lastFilterTimer = wrapper.vm.$_filterTimer
expect(wrapper.vm.localFilter).not.toEqual('z')

jest.runTimersToTime(101)
await waitNT(wrapper.vm)
expect(wrapper.emitted('input').length).toBe(2)
expect(wrapper.emitted('input')[1][0]).toEqual([testItems[2]])
expect(wrapper.vm.$_filterTimer).toBe(null)
expect(wrapper.vm.$_filterTimer).toEqual(lastFilterTimer)
lastFilterTimer = wrapper.vm.$_filterTimer
expect(wrapper.vm.localFilter).toEqual('z')

// Change filter
wrapper.setProps({
@@ -284,6 +294,10 @@ describe('table > filtering', () => {
await waitNT(wrapper.vm)
expect(wrapper.vm.$_filterTimer).not.toBe(null)
expect(wrapper.emitted('input').length).toBe(2)
expect(wrapper.vm.$_filterTimer).not.toEqual(lastFilterTimer)
lastFilterTimer = wrapper.vm.$_filterTimer
expect(wrapper.vm.localFilter).not.toEqual('1')
expect(wrapper.vm.localFilter).toEqual('z')

// Change filter-debounce to no debouncing
wrapper.setProps({
@@ -295,6 +309,7 @@ describe('table > filtering', () => {
// Should immediately filter the items
expect(wrapper.emitted('input').length).toBe(3)
expect(wrapper.emitted('input')[2][0]).toEqual([testItems[1]])
expect(wrapper.vm.localFilter).toEqual('1')

wrapper.destroy()
})

0 comments on commit 018eef1

Please sign in to comment.
You can’t perform that action at this time.