Search-field component acceptance tests (emberjs#784)

app/components/search-field.js

@@ -1,10 +1,9 @@
 import Component from '@ember/component';
 
 export default Component.extend({
-  tagName: '',
-
   actions: {
     clear() {
+      this.element.querySelector('input').focus();
       this.set('value', '');
     }
   }

app/templates/components/search-field.hbs

@@ -1,6 +1,6 @@
 {{input value=value type="text" placeholder="Search"}}
-{{#if search}}
-  <button {{action "clear"}} class="toolbar__icon-button toolbar__search-clear-button" title="clear">
+{{#if value}}
+  <button {{action "clear"}} class="toolbar__icon-button toolbar__search-clear-button js-search-field-clear-button" title="clear">
     {{svg-jar "clear" width="14px" height="14px"}}
   </button>
 {{/if}}

tests/acceptance/container-test.js

@@ -110,6 +110,38 @@ module('Container Tab', function(hooks) {
     assert.equal(rows[0].textContent.trim(), 'first');
   });
 
+  test("It should clear the search filter when the clear button is clicked", async function(assert) {
+    let instances = getInstances();
+
+    port.reopen({
+      send(n, m) {
+        name = n;
+        message = m;
+        if (name === 'container:getTypes') {
+          this.trigger('container:types', { types: getTypes() });
+        }
+
+        if (name === 'container:getInstances' && message.containerType === 'controller') {
+          this.trigger('container:instances', { instances, status: 200 });
+        }
+      }
+    });
+
+    await visit('/container-types/controller');
+    let rows;
+
+    rows = findAll('.js-container-instance-list-item');
+    assert.equal(rows.length, 2, 'expected all rows');
+
+    await fillIn('.js-container-instance-search input', 'xxxxx');
+    rows = findAll('.js-container-instance-list-item');
+    assert.equal(rows.length, 0, 'expected filtered rows');
+
+    await click('.js-search-field-clear-button');
+    rows = findAll('.js-container-instance-list-item');
+    assert.equal(rows.length, 2, 'expected all rows');
+  });
+
   test("Successfully redirects if the container type is not found", async function(assert) {
 
     port.reopen({

tests/acceptance/data-test.js

@@ -211,6 +211,23 @@ module('Data Tab', function(hooks) {
     assert.equal(rows.length, 2);
   });
 
+  test("It should clear the search filter when the clear button is clicked", async function(assert) {
+    await visit('/data/model-types');
+    await click(findAll('.js-model-type a')[1]);
+
+    let rows = findAll('.js-record-list-item');
+    assert.equal(rows.length, 2);
+
+    await fillIn('.js-records-search input', 'Hello');
+
+    rows = findAll('.js-record-list-item');
+    assert.equal(rows.length, 1);
+
+    await click('.js-search-field-clear-button');
+    rows = findAll('.js-record-list-item');
+    assert.equal(rows.length, 2);
+  });
+
   test('Columns successfully updated when switching model types', async function t(assert) {
     await visit('/data/model-types/App.Post/records');
     let columns = findAll('.js-header-column');

tests/acceptance/deprecation-test.js

@@ -1,4 +1,4 @@
-import { visit, find, findAll, click } from '@ember/test-helpers';
+import { visit, find, findAll, fillIn, click } from '@ember/test-helpers';
 import { module, test } from 'qunit';
 import { setupApplicationTest } from 'ember-qunit';
 
@@ -174,4 +174,30 @@ module('Deprecation Tab', function(hooks) {
     assert.equal(message.deprecation.message, 'Deprecation 1');
     assert.equal(message.deprecation.sources.length, 1);
   });
+
+  test("It should clear the search filter when the clear button is clicked", async function(assert) {
+    port.reopen({
+      send(name) {
+        if (name === 'deprecation:watch') {
+          port.trigger('deprecation:deprecationsAdded', {
+            deprecations: deprecationsWithSource()
+          });
+        }
+        return this._super(...arguments);
+      }
+    });
+
+    await visit('/deprecations');
+
+    let sources = findAll('.js-deprecation-source');
+    assert.equal(sources.length, 2, 'shows all sources');
+
+    await fillIn('.js-deprecations-search input', 'xxxx');
+    sources = findAll('.js-deprecation-source');
+    assert.equal(sources.length, 0, 'sources filtered');
+
+    await click('.js-search-field-clear-button');
+    sources = findAll('.js-deprecation-source');
+    assert.equal(sources.length, 2, 'show all sources');
+  });
 });

tests/acceptance/promise-test.js

@@ -1,4 +1,4 @@
-import { visit, find, findAll, click } from '@ember/test-helpers';
+import { visit, find, findAll, fillIn, click } from '@ember/test-helpers';
 import { module, test } from 'qunit';
 import { setupApplicationTest } from 'ember-qunit';
 import { triggerPort } from '../helpers/trigger-port';
@@ -291,4 +291,25 @@ module('Promise Tab', function(hooks) {
     assert.equal(name, 'objectInspector:inspectById');
     assert.deepEqual(message, { objectId: 100 });
   });
+
+  test("It should clear the search filter when the clear button is clicked", async function(assert) {
+    await visit('/promise-tree');
+
+    await triggerPort(this, 'promise:promisesUpdated', {
+      promises: [
+        generatePromise({
+          guid: 1,
+          label: 'Promise 1',
+          state: 'created'
+        })
+      ]
+    });
+    await wait();
+
+    assert.equal(findAll('.js-promise-tree-item').length, 1);
+    await fillIn('.js-promise-search input', 'xxxxx');
+    assert.equal(findAll('.js-promise-tree-item').length, 0);
+    await click('.js-search-field-clear-button');
+    assert.equal(findAll('.js-promise-tree-item').length, 1);
+  });
 });

tests/acceptance/render-tree-test.js

@@ -138,4 +138,29 @@ module('Render Tree Tab', function(hooks) {
     assert.equal(rows.length, 1, "The second row is the only one showing");
     assert.equal(rows[0].querySelector('.js-render-profile-name').textContent.trim(), "Second View Rendering");
   });
+
+  test("It should clear the search filter when the clear button is clicked", async function(assert) {
+    port.reopen({
+      send(n/*, m*/) {
+        if (n === 'render:watchProfiles') {
+          this.trigger('render:profilesAdded', {
+            profiles: generateProfiles()
+          });
+        }
+      }
+    });
+
+    await visit('/render-tree');
+
+    let rows = findAll('.js-render-profile-item');
+    assert.equal(rows.length, 2, "expected all rows");
+
+    await fillIn('.js-render-profiles-search input', 'xxxxxx');
+    rows = findAll('.js-render-profile-item');
+    assert.equal(rows.length, 0, 'expected filtered rows');
+
+    await click('.js-search-field-clear-button');
+    rows = findAll('.js-render-profile-item');
+    assert.equal(rows.length, 2, 'expected all rows');
+  });
 });

tests/acceptance/view-tree-test.js

@@ -240,6 +240,27 @@ module('View Tree Tab', function(hooks) {
     ], 'expected title tips');
   });
 
+  test("It should clear the search filter when the clear button is clicked", async function(assert) {
+    let viewTree = defaultViewTree();
+
+    await visit('/');
+    run(() => {
+      port.trigger('view:viewTree', { tree: viewTree });
+    });
+    await wait();
+
+    let treeNodes = findAll('.js-view-tree-item');
+    assert.equal(treeNodes.length, 3, 'expected all tree nodes');
+
+    await fillIn('.js-filter-views input', 'post');
+    treeNodes = findAll('.js-view-tree-item');
+    assert.equal(treeNodes.length, 1, 'expected filtered tree nodes');
+
+    await click('.js-search-field-clear-button');
+    treeNodes = findAll('.js-view-tree-item');
+    assert.equal(treeNodes.length, 3, 'expected all tree nodes');
+  });
+
   test("It should update the view tree when the port triggers a change", async function(assert) {
     assert.expect(4);
     let treeNodes, viewTree = defaultViewTree();