jobSearchBox integration test

ui/tests/integration/components/job-search-box-test.js

@@ -2,25 +2,52 @@ import { module, test } from 'qunit';
 import { setupRenderingTest } from 'ember-qunit';
 import { render } from '@ember/test-helpers';
 import { hbs } from 'ember-cli-htmlbars';
+import { fillIn, find, triggerEvent } from '@ember/test-helpers';
+
+const DEBOUNCE_MS = 500;
 
 module('Integration | Component | job-search-box', function (hooks) {
   setupRenderingTest(hooks);
 
-  test('it renders', async function (assert) {
-    // Set any properties with this.set('myProperty', 'value');
-    // Handle any actions with this.set('myAction', function(val) { ... });
-
-    await render(hbs`<JobSearchBox />`);
+  test('debouncer debounces appropriately', async function (assert) {
+    assert.expect(4);
 
-    assert.dom(this.element).hasText('');
+    let message = '';
 
-    // Template block usage:
-    await render(hbs`
-      <JobSearchBox>
-        template block text
-      </JobSearchBox>
-    `);
+    this.set('externalAction', (value) => {
+      message = value;
+    });
 
-    assert.dom(this.element).hasText('template block text');
+    await render(hbs`<JobSearchBox @onFilterChange={{this.externalAction}} />`);
+    const element = find('input');
+    await fillIn('input', 'test1');
+    assert.equal(message, 'test1', 'Initial typing');
+    element.value += ' wont be ';
+    triggerEvent('input', 'input');
+    assert.equal(
+      message,
+      'test1',
+      'Typing has happened within debounce window'
+    );
+    element.value += 'seen ';
+    triggerEvent('input', 'input');
+    await delay(DEBOUNCE_MS - 100);
+    assert.equal(
+      message,
+      'test1',
+      'Typing has happened within debounce window, albeit a little slower'
+    );
+    element.value += 'until now.';
+    triggerEvent('input', 'input');
+    await delay(DEBOUNCE_MS + 100);
+    assert.equal(
+      message,
+      'test1 wont be seen until now.',
+      'debounce window has closed'
+    );
   });
 });
+
+function delay(ms) {
+  return new Promise((resolve) => setTimeout(resolve, ms));
+}