refactor: use glimmer component for search-input

guidemaker-ember-template/babel.config.json

@@ -4,7 +4,8 @@
     ["babel-plugin-ember-template-compilation", {
       "targetFormat": "hbs",
       "transforms": []
-    }],
+      }],
+    "ember-concurrency/async-arrow-task-transform",
     ["module:decorator-transforms", { "runtime": { "import": "decorator-transforms/runtime" } }],
   ]
 }

guidemaker-ember-template/src/components/search-input.hbs

@@ -1,45 +1,68 @@
-{{!-- template-lint-disable link-rel-noopener no-action no-curly-component-invocation --}}
-{{#if this.searchService.index}}
-  <input
-    id="search-input"
-    type="search"
-    value={{this.value}}
-    oninput={{perform this.search value="target.value"}}
-    placeholder="Search the guides"
-    autocomplete="off"
-    onfocus={{action "onfocus"}}
-    onblur={{action "onblur"}}
-    data-test-search-input
-  >
+<div class="search-input" ...attributes>
+  {{#if this.searchService.index}}
+    <input
+      id="search-input"
+      type="search"
+      value={{this.value}}
+      oninput={{perform this.search value="target.value"}}
+      placeholder="Search the guides"
+      autocomplete="off"
+      data-test-search-input
+      {{on "focus" this.onfocus}}
+      {{on "blur" (perform this.closeMenu)}}
+    />
 
-  {{!-- Search results dropdown --}}
-  <EmberTether @target="#search-input" @targetAttachment="bottom right" @attachment="top right" @constraints={{this._resultTetherConstraints}} @class="ds-dropdown-results">
-    {{#if this.showDropdown}}
-      <div class="ds-suggestions ds-dropdown-menu">
-        <DropdownHeader>
-          Search Results
-        </DropdownHeader>
-
-        {{#each this.searchService.results as |result|}}
-          <SearchResult @result={{result}} />
-        {{else}}
-          <div class="algolia-docsearch-suggestion">
-            <div class="algolia-docsearch-suggestion--noresults">
-              <p>
-                No results found.
-                {{#if this.deprecationsGuideURL}}
-                  Try searching the <a href={{this.deprecationsGuideURL}} target="_deprecations">deprecations guide</a>.
-                {{/if}}
-              </p>
+    {{! Search results dropdown }}
+    <EmberTether
+      @target="#search-input"
+      @targetAttachment="bottom right"
+      @attachment="top right"
+      @constraints={{this._resultTetherConstraints}}
+      @class="ds-dropdown-results"
+    >
+      {{#if this.showDropdown}}
+        <div class="ds-suggestions ds-dropdown-menu" data-test-search-dropdown>
+          <DropdownHeader>
+            Search Results
+          </DropdownHeader>
+          {{#each this.searchService.results as |result|}}
+            <SearchResult @result={{result}} />
+          {{else}}
+            <div class="algolia-docsearch-suggestion">
+              <div
+                class="algolia-docsearch-suggestion--noresults"
+                data-test-search-noresults
+              >
+                <p>
+                  No results found.
+                  {{#if this.deprecationsGuideURL}}
+                    Try searching the
+                    <a
+                      href={{this.deprecationsGuideURL}}
+                      target="_blank"
+                      rel="noopener noreferrer"
+                    >
+                      deprecations guide
+                    </a>.
+                  {{/if}}
+                </p>
+              </div>
             </div>
+          {{/each}}
+          <div class="powered-by-algolia">
+            <a
+              href="https://www.algolia.com/"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              <img
+                src="/images/logos/search-by-algolia.svg"
+                alt="Search Powered by Algolia"
+              />
+            </a>
           </div>
-        {{/each}}
-        <div class="powered-by-algolia">
-          <a href="https://www.algolia.com/" target="_blank" rel="noopener">
-            <img src="/images/logos/search-by-algolia.svg" alt="Search Powered by Algolia">
-          </a>
         </div>
-      </div>
-    {{/if}}
-  </EmberTether>
-{{/if}}
+      {{/if}}
+    </EmberTether>
+  {{/if}}
+</div>

guidemaker-ember-template/src/components/search-input.js

@@ -1,69 +1,59 @@
-/* eslint-disable ember/no-classic-components, ember/no-classic-classes, ember/require-tagless-components, prettier/prettier, ember/no-get, ember/no-actions-hash */
-import { getOwner } from '@ember/application';
-import Component from '@ember/component';
-import { get, set } from '@ember/object';
-import { and } from '@ember/object/computed';
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
 import { inject as service } from '@ember/service';
+import { action } from '@ember/object';
 import { task, timeout } from 'ember-concurrency';
+import config from 'ember-get-config';
 
 const SEARCH_DEBOUNCE_PERIOD = 300;
 const SEARCH_CLOSE_PERIOD = 200;
 
-export default Component.extend({
+export default class SearchInputComponent extends Component {
+  @service('search') searchService;
 
-  classNames: ['search-input'],
-
-  searchService: service('search'),
-
-  _resultTetherConstraints: Object.freeze([
+  _resultTetherConstraints = [
     {
       to: 'window',
-      pin: ['left','right']
-    }
-  ]),
-
-  _focused: false,
+      pin: ['left', 'right'],
+    },
+  ];
 
-  init() {
-    this._super(...arguments);
-    const config = getOwner(this).resolveRegistration('config:environment');
-    this.deprecationsGuideURL = config['deprecationsGuideURL'];
-  },
+  @tracked _focused = false;
+  @tracked query;
+  @tracked value = '';
 
-  showDropdown: and('query', '_focused'),
+  get deprecationsGuideURL() {
+    return config['deprecationsGuideURL'];
+  }
 
-  search: task(function * (query) {
+  get showDropdown() {
+    return this.query && this._focused;
+  }
 
-    yield timeout(SEARCH_DEBOUNCE_PERIOD);
+  search = task({ restartable: true }, async (query) => {
+    await timeout(SEARCH_DEBOUNCE_PERIOD);
 
-    set(this, 'query', query);
+    this.query = query;
 
     // Hide and don't run query if there's no search query
     if (!query) {
-      return set(this, '_focused', false);
+      return (this._focused = false);
     }
 
     // ensure search results are visible if the menu was previously closed above
-    set(this, '_focused', true);
-
-    yield get(this, 'searchService.search').perform(query, this.projectVersion);
-
-  }).restartable(),
+    this._focused = true;
 
-  closeMenu: task(function * () {
-    yield timeout(SEARCH_CLOSE_PERIOD);
+    await this.searchService.search.perform(query, this.args.projectVersion);
+  });
 
-    set(this, '_focused', false);
-  }),
+  closeMenu = task(async () => {
+    await timeout(SEARCH_CLOSE_PERIOD);
 
-  actions: {
-    onfocus() {
-      set(this, '_focused', true);
-    },
-
-    onblur() {
-      this.get('closeMenu').perform();
-    }
+    this._focused = false;
+  });
 
+  @action
+  onfocus() {
+    this._focused = true;
   }
-});
+}

guidemaker-ember-template/src/services/search.js

@@ -1,44 +1,42 @@
-/* eslint-disable ember/no-classic-classes, prettier/prettier, ember/no-get */
 import Service from '@ember/service';
+import { tracked } from '@glimmer/tracking';
 import { task } from 'ember-concurrency';
-import { get, set } from '@ember/object';
-import { A as emberArray } from '@ember/array';
 import algoliasearch from 'algoliasearch';
 import { getOwner } from '@ember/application';
 
-export default Service.extend({
+export default class SearchServices extends Service {
+  @tracked results = [];
+  client = null;
+  index = null;
 
-  results: emberArray(),
+  constructor() {
+    super(...arguments);
 
-  init() {
-    this._super(...arguments);
     const config = getOwner(this).resolveRegistration('config:environment');
-
     const { algoliaId, algoliaKey, indexName } = config['algolia'] || {};
 
     if (algoliaId && algoliaKey && indexName) {
       this.client = algoliasearch(algoliaId, algoliaKey);
       this.index = this.client.initIndex(indexName);
     }
-  },
+  }
 
-  search: task(function * (query, projectVersion) {
+  search = task({ restartable: true }, async (query, projectVersion) => {
     const searchObj = {
       hitsPerPage: 15,
       restrictSearchableAttributes: ['content'],
     };
 
-    if(projectVersion && projectVersion.match(/\d+\.\d+\.\d+/)) {
+    if (projectVersion && projectVersion.match(/\d+\.\d+\.\d+/)) {
       searchObj.facetFilters = [[`version:${projectVersion}`]];
     }
 
-    return set(this, 'results', yield this.doSearch(query, searchObj));
-
-  }).restartable(),
+    return (this.results = await this.doSearch(query, searchObj));
+  });
 
   doSearch(query, searchObj) {
     return this.index.search(query, searchObj).then((results) => {
-      return get(results, 'hits');
+      return results.hits;
     });
   }
-});
+}

jsconfig.json

@@ -0,0 +1 @@
+{"compilerOptions":{"target":"es6","experimentalDecorators":true},"exclude":["node_modules","bower_components","tmp","vendor",".git","dist"]}

test-app/tests/integration/components/search-input-test.js

@@ -0,0 +1,76 @@
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'ember-qunit';
+import { render, fillIn, blur, waitFor } from '@ember/test-helpers';
+import { hbs } from 'ember-cli-htmlbars';
+import Service from '@ember/service';
+import mirageConfig from 'test-app/mirage/config';
+import { setupMirage } from 'ember-mirage/test-support';
+
+// Stub page service
+class PageStub extends Service {
+  pages = [
+    {
+      id: 'examples',
+      title: 'Examples',
+    },
+    {
+      id: 'index',
+      title: 'Home',
+    },
+  ];
+}
+
+module('Integration | Component | search-input', function (hooks) {
+  setupRenderingTest(hooks);
+  setupMirage(hooks, { makeServer: mirageConfig });
+
+  hooks.beforeEach(async function () {
+    this.owner.register('service:page', PageStub);
+  });
+
+  test('it renders the inital search input without dropdown', async function (assert) {
+    await render(hbs`<SearchInput @projectVersion="v1.0.0" />`);
+
+    assert.dom('[data-test-search-input]').exists();
+    assert.dom('[data-test-search-dropdown]').doesNotExist();
+  });
+
+  test('it renders the search dropdown while searching', async function (assert) {
+    await render(hbs`<SearchInput @projectVersion="v1.0.0" />`);
+
+    await fillIn('[data-test-search-input]', 'query string');
+
+    assert.dom('[data-test-search-input]').hasValue('query string');
+    assert.dom('[data-test-search-dropdown]').exists();
+  });
+
+  test('it renders the search input with a closed dropdown after blur', async function (assert) {
+    await render(hbs`<SearchInput @projectVersion="v1.0.0" />`);
+
+    await fillIn('[data-test-search-input]', 'query string');
+    await waitFor('[data-test-search-result-item]');
+    await blur('[data-test-search-input]');
+
+    assert.dom('[data-test-search-input]').hasValue('query string');
+    assert.dom('[data-test-search-dropdown]').doesNotExist();
+  });
+
+  test('it renders the results', async function (assert) {
+    await render(hbs`<SearchInput @projectVersion="v1.0.0" />`);
+    await fillIn('[data-test-search-input]', 'query string');
+
+    await waitFor('[data-test-search-result-item]');
+
+    assert.dom('[data-test-search-result-item]').exists({ count: 4 });
+  });
+
+  test('it renders the no results message', async function (assert) {
+    this.searchService = this.owner.lookup('service:search');
+
+    await render(hbs`<SearchInput @projectVersion="v1.0.0" />`);
+    await fillIn('[data-test-search-input]', 'query string');
+    this.searchService.results = [];
+    await waitFor('[data-test-search-noresults]');
+    assert.dom('[data-test-search-noresults]').hasText('No results found.');
+  });
+});