Add new item value support for button and test for it

muan · muan · commit b81f184c2ec2 · 2019-11-27T15:50:27.000-05:00
diff --git a/src/index.ts b/src/index.ts
@@ -139,8 +139,10 @@ function getText(filterableItem: HTMLElement) {
 function updateNewItem(newItem: HTMLElement, query: string) {
   const newItemText = newItem.querySelector('[data-filter-new-item-text]')
   if (newItemText) newItemText.textContent = query
-  const newItemInput = newItem.querySelector('[data-filter-new-item-value]')
-  if (newItemInput instanceof HTMLInputElement) newItemInput.value = query
+  const newItemValue = newItem.querySelector('[data-filter-new-item-value]')
+  if (newItemValue instanceof HTMLInputElement || newItemValue instanceof HTMLButtonElement) {
+    newItemValue.value = query
+  }
 }
 
 function toggleBlankslate(container: HTMLElement, force: boolean) {
diff --git a/test/test.js b/test/test.js
@@ -12,7 +12,7 @@ describe('filter-input', function() {
   })
 
   describe('after tree insertion', function() {
-    let filterInput, input, list, emptyState
+    let filterInput, input, list, emptyState, newItem
     beforeEach(function() {
       document.body.innerHTML = `
         <filter-input aria-owns="robots">
@@ -29,20 +29,40 @@ describe('filter-input', function() {
             <li>BB-8</li>
           </ul>
           <p data-filter-empty-state hidden>0 robots found.</p>
+          <form data-filter-new-item hidden>
+            <button data-filter-new-item-value>Create "<span data-filter-new-item-text></span>"</button>
+          </form>
         </div>
       `
 
       filterInput = document.querySelector('filter-input')
       input = filterInput.querySelector('input')
       list = document.querySelector('[data-filter-list]')
       emptyState = document.querySelector('[data-filter-empty-state]')
+      newItem = document.querySelector('[data-filter-new-item]')
     })
 
     afterEach(function() {
       document.body.innerHTML = ''
     })
 
-    it('filters', async function() {
+    it('filters and toggles new item form', async function() {
+      const listener = once('filter-input-updated')
+      changeValue(input, 'hu')
+      const customEvent = await listener
+      assert.equal(customEvent.detail.count, 1)
+      assert.equal(customEvent.detail.total, 4)
+
+      changeValue(input, 'boom')
+      assert.notOk(newItem.hidden, 'New item form should be shown')
+      assert.equal(newItem.querySelector('[data-filter-new-item-value]').value, 'boom')
+      assert.equal(newItem.querySelector('[data-filter-new-item-text]').textContent, 'boom')
+    })
+
+    it('filters and toggles blankslate', async function() {
+      // Remove new item form, which is prioritized over blankslate
+      newItem.remove()
+
       const listener = once('filter-input-updated')
       changeValue(input, 'hu')
       const customEvent = await listener
