Add test

Author: David Barrett

addon/components/docs-header/search-box/template.hbs

@@ -12,5 +12,6 @@
     type="text"
     placeholder='Search'
     class='w-24 text-xs p-2 pl-6 rounded focus:bg-grey-lighter outline-none'
-    data-search-box-input>
+    data-search-box-input
+    data-test-search-box-input>
 </div>

addon/components/docs-header/search-result/component.js

@@ -81,5 +81,7 @@ export default Component.extend({
 
   _highlight(text, start, length) {
     return `${text.slice(0, start)}<em class='docs-viewer-search__result-item__text--emphasis'>${text.slice(start, start + length)}</em>${text.slice(start + length)}`;
-  }
+  },
+
+  'data-test-search-result': true,
 });

addon/components/docs-header/search-results/template.hbs

@@ -6,7 +6,7 @@
     onClose=(action 'clearSearch')
     targetAttachment='bottom left'
     constraints=(array (hash to='window' attachment='together' pin=true))}}
-    <ul class="docs-viewer-search__result-list">
+    <ul class="docs-viewer-search__result-list" data-test-search-result-list>
       {{#each (take 5 searchResults) as |result index|}}
         <li>
           {{docs-header/search-result

tests/acceptance/sandbox/api/components-test.js

@@ -45,4 +45,12 @@ module('Acceptance | API | components', function(hooks) {
     assert.equal(indexItems.length, 13, 'correct number of items rendered');
     assert.ok(indexItems.includes('_privateField'), 'private field rendered');
   });
+
+  test('search box works', async function(assert) {
+    await visit('/sandbox');
+
+    assert.equal(modulePage.searchResults.items.length, 0, 'no search results shown');
+    await modulePage.fillInSearchQuery('sub-subsection');
+    assert.equal(modulePage.searchResults.items.length, 1, 'one search result shown');
+  });
 });

tests/pages/api/class.js

@@ -1,6 +1,7 @@
-import PageObject, { collection, text } from 'ember-classy-page-object';
+import BaseAddonPage from '../base';
+import { collection, text } from 'ember-classy-page-object';
 
-const ClassPage = PageObject.extend({
+const ClassPage = BaseAddonPage.extend({
   navItems: collection({ scope: '[data-test-id="nav-item"]' }),
 
   title: text('[data-test-class-name]'),

tests/pages/api/module.js

@@ -1,6 +1,7 @@
-import PageObject, { collection, text } from 'ember-classy-page-object';
+import BaseAddonPage from '../base';
+import { collection, text } from 'ember-classy-page-object';
 
-const ModulePage = PageObject.extend({
+const ModulePage = BaseAddonPage.extend({
   navItems: collection({ scope: '[data-test-id="nav-item"]' }),
 
   toggles: collection({

tests/pages/base.js

@@ -0,0 +1,15 @@
+import PageObject, { collection, fillable } from 'ember-classy-page-object';
+
+const DefaultPage = PageObject.extend({
+  // eslint-disable-next-line ember/avoid-leaking-state-in-ember-objects
+  fillInSearchQuery: fillable('[data-test-search-box-input]'),
+  // eslint-disable-next-line ember/avoid-leaking-state-in-ember-objects
+  searchResults: {
+    scope: '[data-test-search-result-list]',
+    items: collection({
+      scope: '[data-test-search-result]'
+    })
+  }
+});
+
+export default DefaultPage;

tests/pages/guide.js

@@ -1,6 +1,7 @@
-import PageObject, { collection } from 'ember-classy-page-object';
+import BaseAddonPage from './base';
+import { collection } from 'ember-classy-page-object';
 
-const GuidePage = PageObject.extend({
+const GuidePage = BaseAddonPage.extend({
   navItems: collection({ scope: '[data-test-id="nav-item"]' }),
 
   // eslint-disable-next-line ember/avoid-leaking-state-in-ember-objects