Debounce Demo

components.search-term.js

import Ember from 'ember';

const { run: {debounce}, observer} = Ember;

export default Ember.Component.extend({
  
  searchTermList: [],
  latency: 1000,
  searchTerm: '',
  
  updateSearchTerm(term) {
    this.searchTermList.pushObject(term);
  },
  
  searchTermHasChanged: observer('searchTerm', function() {
    this.updateSearchTerm(this.searchTerm); 
  }),
  
  actions: {
  
    updateSearchTermDirectly(newSearchTerm) {
      this.updateSearchTerm(newSearchTerm); 
    },
    
    updateSearchTermWithLatency(newSearchTerm) {
      debounce(this, this.updateSearchTerm, newSearchTerm, this.latency)
    },
    
    clearList() {
      this.set('searchTermList', []);
    }
  }
});

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({});

controllers.index.js

import Ember from 'ember';

export default Ember.Controller.extend({
});

routes.index.js

import Ember from 'ember';

export default Ember.Route.extend({
});

templates.application.hbs

<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Roboto:300,300italic,700,700italic">
<link rel="stylesheet" href="//cdn.rawgit.com/necolas/normalize.css/master/normalize.css">
<link rel="stylesheet" href="//cdn.rawgit.com/milligram/milligram/master/dist/milligram.min.css">

<div class="container">
	{{outlet}}
</div>

templates.components.search-term.hbs

<h1>Debounce Demo</h1>

<div class='row'>
	<div class='column'>
 		<label for='search-term-directly'>Search term (directly):</label>
 		<input name='search-term-directly' type='text' oninput={{action 'updateSearchTermDirectly' value='target.value'}} />
    
    <label for='search-term-with-latency-two-way'>Search term (latency, two way):</label>
    {{input value=searchTerm}}
	</div>

	<div class='column'>
 		<label for='search-term-with-latency'>Search term (latency):</label>
 		<input name='search-term-with-latency' type='text' oninput={{action 'updateSearchTermWithLatency' value='target.value'}} />
	</div>
</div>


<button {{action 'clearList'}}>Clear List</button>  
<ul>
{{#each searchTermList as |searchTermItem|}}
	<li>{{searchTermItem}}</li>
{{/each}}
</ul>

templates.index.hbs

{{search-term}}

tests.helpers.destroy-app.js

import { run } from '@ember/runloop';

export default function destroyApp(application) {
  run(application, 'destroy');
}

tests.helpers.resolver.js

import Resolver from '../../resolver';
import config from '../../config/environment';

const resolver = Resolver.create();

resolver.namespace = {
  modulePrefix: config.modulePrefix,
  podModulePrefix: config.podModulePrefix
};

export default resolver;

tests.helpers.start-app.js

import Ember from 'ember';
import Application from '../../app';
import config from '../../config/environment';

const { run } = Ember;
const assign = Ember.assign || Ember.merge;

export default function startApp(attrs) {
  let application;

  let attributes = assign({rootElement: "#test-root"}, config.APP);
  attributes = assign(attributes, attrs); // use defaults, but you can override;

  run(() => {
    application = Application.create(attributes);
    application.setupForTesting();
    application.injectTestHelpers();
  });

  return application;
}

tests.test-helper.js

import resolver from './helpers/resolver';
import {
  setResolver
} from 'ember-qunit';
import { start } from 'ember-cli-qunit';

setResolver(resolver);
start();

tests.unit.component.search-term-test.js

import Ember from 'ember';
import { moduleForComponent, test } from 'ember-qunit';

const { run } = Ember;

let component;

moduleForComponent('search-term', 'Component | search-term', {
  unit: true,
  beforeEach() {
    component = this.subject();
    component.set('searchTermList', []);
  }
});

test('it exists', function(assert) {
  assert.ok(component);
});

test('updateSearchTerm', function(assert) {
  assert.deepEqual(component.get('searchTermList'), []);
  
  component.updateSearchTerm('yo');
  assert.deepEqual(component.get('searchTermList'), ['yo']);
});

test('searchTermHasChanged', function(assert) {
  assert.deepEqual(component.get('searchTermList'), []);
	
  component.set('searchTerm', 'something');
  assert.deepEqual(component.get('searchTermList'), ['something']);
});

test('action - updateSearchTermDirectly', function(assert) {
  component.send('updateSearchTermDirectly', 'directly');
  
  assert.deepEqual(component.get('searchTermList'), ['directly']);
});

twiddle.json

{
  "version": "0.15.0",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js",
    "ember": "3.2.2",
    "ember-template-compiler": "3.2.2",
    "ember-testing": "3.2.2"
  },
  "addons": {
    "ember-data": "3.2.0"
  }
}