From a51aa4c5a925ddf66cbb49ed5262323fd644c99a Mon Sep 17 00:00:00 2001 From: Jerry Nummi Date: Thu, 12 Apr 2018 09:01:08 -0700 Subject: [PATCH] Search-field component acceptance tests (#784) --- app/components/search-field.js | 3 +-- app/templates/components/search-field.hbs | 4 +-- tests/acceptance/container-test.js | 32 +++++++++++++++++++++++ tests/acceptance/data-test.js | 17 ++++++++++++ tests/acceptance/deprecation-test.js | 28 +++++++++++++++++++- tests/acceptance/promise-test.js | 23 +++++++++++++++- tests/acceptance/render-tree-test.js | 25 ++++++++++++++++++ tests/acceptance/view-tree-test.js | 21 +++++++++++++++ 8 files changed, 147 insertions(+), 6 deletions(-) diff --git a/app/components/search-field.js b/app/components/search-field.js index 9f8c31755c..f9108ca8c1 100644 --- a/app/components/search-field.js +++ b/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', ''); } } diff --git a/app/templates/components/search-field.hbs b/app/templates/components/search-field.hbs index 9cab104a46..0a6cf24f1e 100644 --- a/app/templates/components/search-field.hbs +++ b/app/templates/components/search-field.hbs @@ -1,6 +1,6 @@ {{input value=value type="text" placeholder="Search"}} -{{#if search}} - {{/if}} \ No newline at end of file diff --git a/tests/acceptance/container-test.js b/tests/acceptance/container-test.js index 6690994bca..0da1ea895c 100644 --- a/tests/acceptance/container-test.js +++ b/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({ diff --git a/tests/acceptance/data-test.js b/tests/acceptance/data-test.js index c2050e99e2..7accf12f96 100644 --- a/tests/acceptance/data-test.js +++ b/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'); diff --git a/tests/acceptance/deprecation-test.js b/tests/acceptance/deprecation-test.js index 719ce2adec..d5c9c91718 100644 --- a/tests/acceptance/deprecation-test.js +++ b/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'); + }); }); diff --git a/tests/acceptance/promise-test.js b/tests/acceptance/promise-test.js index 7ea8386421..90b7880e7a 100644 --- a/tests/acceptance/promise-test.js +++ b/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); + }); }); diff --git a/tests/acceptance/render-tree-test.js b/tests/acceptance/render-tree-test.js index f01b0cc7ea..c234b64cc4 100644 --- a/tests/acceptance/render-tree-test.js +++ b/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'); + }); }); diff --git a/tests/acceptance/view-tree-test.js b/tests/acceptance/view-tree-test.js index c70aceb632..e4caeafbf4 100644 --- a/tests/acceptance/view-tree-test.js +++ b/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();