Created
June 8, 2022 16:29
-
-
Save mattmcmanus/3f27e7994e0913e0a8e87af4cf0d51b5 to your computer and use it in GitHub Desktop.
Debounce helper spike
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import { helper } from '@ember/component/helper'; | |
import { isDestroyed } from '@ember/destroyable'; | |
import { buildWaiter } from '@ember/test-waiters'; | |
const testWaiter = buildWaiter('debounce-helper'); | |
// WeakMap<Function, { timeoutId, asyncToken }>(); | |
const TIMERS = new WeakMap(); | |
function debounceHelper([context, action], { timeout }) { | |
return function(...args) { | |
if (TIMERS.has(action)) { | |
const { timeoutId, asyncToken } = TIMERS.get(action); | |
clearTimeout(timeoutId); | |
testWaiter.endAsync(asyncToken); | |
} | |
const asyncToken = testWaiter.beginAsync(); | |
const timeoutId = setTimeout(() => { | |
if (isDestroyed(context)) { | |
testWaiter.endAsync(asyncToken); | |
return; | |
} | |
try { | |
action.call(context, ...args); | |
} | |
finally { | |
testWaiter.endAsync(asyncToken); | |
} | |
}, timeout); | |
TIMERS.set( | |
action, { timeoutId, asyncToken }, | |
); | |
}; | |
} | |
export default helper(debounceHelper); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import { module, test } from 'qunit'; | |
import { setupRenderingTest } from 'ember-qunit'; | |
import { render, click, settled, typeIn } from '@ember/test-helpers'; | |
import { hbs } from 'ember-cli-htmlbars'; | |
module('Integration | Helper | debounce', function(hooks) { | |
setupRenderingTest(hooks); | |
test('Debounces the action calls', async function(assert) { | |
this.set('actionToCall', function() { | |
assert.step('clicked'); | |
}); | |
await render(hbs` | |
{{!-- template-lint-disable data-qid-interactive --}} | |
<button type="button" | |
{{on 'click' (debounce this this.actionToCall timeout=100)}} | |
>Click Me</button> | |
`); | |
// Don't wait here, we want to click a bunch and wait for settled later | |
click('button'); | |
click('button'); | |
click('button'); | |
click('button'); | |
await settled(); | |
assert.verifySteps(['clicked']); | |
}); | |
test('Doesnt error when the context is gone', async function(assert) { | |
this.set('actionToCall', function() { | |
assert.step('clicked'); | |
}); | |
await render(hbs` | |
{{!-- template-lint-disable data-qid-interactive --}} | |
<button type="button" | |
{{on 'click' (debounce this this.actionToCall timeout=100)}} | |
>Click Me</button> | |
`); | |
click('button'); // Don't wait because we want the test to finish | |
assert.verifySteps([]); | |
}); | |
test('Works on an input as well', async function(assert) { | |
this.set('value', null); | |
this.set('setValue', function(value) { | |
assert.step(value); | |
this.set('value', value); | |
}); | |
await render(hbs` | |
{{!-- template-lint-disable require-input-label --}} | |
<input | |
data-qid-input | |
value={{this.value}} | |
{{on 'keyup' (pick 'target.value' (debounce this this.setValue timeout=100))}} | |
/> | |
`); | |
await typeIn('[data-qid-input]', 'farm'); | |
assert.verifySteps(['farm']); | |
assert.equal(this.value, 'farm'); | |
}); | |
}); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment