diff --git a/source/testing/testing-components.md b/source/testing/testing-components.md index 647ca1270..ba2f3a6f5 100644 --- a/source/testing/testing-components.md +++ b/source/testing/testing-components.md @@ -273,3 +273,71 @@ test('should change displayed location when current location changes', function assert.equal(this.$().text().trim(), 'You currently are located in Beijing, China', 'location display should change'); }); ``` + +### Waiting on Asynchronous Behavior +Often, interacting with a component will cause asynchronous behavior to occur, such as HTTP requests, or timers. The +`wait` helper is designed to handle these scenarios, by providing a hook to ensure assertions are made after +all ajax requests and timers are complete. + +Imagine you have a typeahead component that uses [`Ember.run.debounce`](http://emberjs.com/api/classes/Ember.run.html#method_debounce) +to limit requests to the server, and you want to verify that results are displayed after typing a character. + +> You can follow along by generating your own component with `ember generate +> component delayed-typeahead`. + +```app/components/delayed-typeahead.js +export default Ember.Component.extend({ + actions: { + handleTyping() { + //the fetchResults function is passed into the component from its parent + Ember.run.debounce(this, this.get('fetchResults'), this.get('searchValue'), 250); + } + } +}); +``` + +```app/templates/components/delayed-typeahead.hbs +{{input value=searchValue key-up=(action 'handleTyping')}} +