Write more component tests

- test the default props values
- test that is open changes when focused on or on blur
- test that the input is clearable, failing still

components/SearchInput.spec.js

@@ -12,6 +12,7 @@ describe('SearchInput.vue', () => {
   let wrapper
   let mocks
   let propsData
+  let data
 
   beforeEach(() => {
     propsData = {}
@@ -29,23 +30,59 @@ describe('SearchInput.vue', () => {
       expect(Wrapper().is('div')).toBe(true)
     })
 
-    it('defaults to an empty value', () => {
-      expect(Wrapper().vm.value).toBe('')
-    })
-
     it('has id "nav-search"', () => {
       expect(Wrapper().contains('#nav-search')).toBe(true)
     })
 
+    it('defaults to an empty value', () => {
+      expect(Wrapper().vm.value).toBe('')
+    })
+
     it('defaults to id "nav-search"', () => {
       expect(Wrapper().vm.id).toBe('nav-search')
     })
 
-    it('changes searchValue as a user inputs a value', () => {
+    it('default to a 300 millisecond delay from the time the user stops typing to when the search starts', () => {
+      expect(Wrapper().vm.delay).toEqual(300)
+    })
+
+    it('defaults to an empty array as results', () => {
+      expect(Wrapper().vm.results).toEqual([])
+    })
+
+    it('defaults to pending false, as in the search is not pending', () => {
+      expect(Wrapper().vm.pending).toBe(false)
+    })
+
+    it('accepts values as a string', () => {
+      propsData = { value: 'abc' }
       const wrapper = Wrapper()
-      let input = wrapper.find('input')
-      input.setValue('abc') 
-      expect(wrapper.vm.searchValue).toBe('abc')
+      // expect(wrapper.vm._data.searchValue).toEqual('abc')
+      expect(wrapper.vm.value).toEqual('abc')
+    })
+
+    it('opens the select dropdown when focused on', () => {
+      const wrapper = Wrapper()
+      const select = wrapper.find('.ds-select')
+      select.trigger('focus')
+      expect(wrapper.vm.isOpen).toBe(true)
+      select.trigger('blur')
+      expect(wrapper.vm.isOpen).toBe(false)
+      // expect(wrapper.find('.ds-select-dropdown').text()).toContain(
+      //   ' What are you searching for?'
+      // )
+    })
+
+    it('is clearable', () => {
+      const wrapper = Wrapper()
+      const select = wrapper.find('.ds-select')
+      select.trigger('focus')
+      const input = wrapper.find('input')
+      input.setValue('Volu')
+      input.trigger('keydown.esc')
+      // const clearIcon = wrapper.find('.search-clear-btn')
+      // clearIcon.trigger('click')
+      expect(input.element.value).toBe('')
     })
   })
-})
+})

cypress/integration/common/search.js

@@ -42,7 +42,10 @@ When('I select an entry', () => {
 })
 
 Then("I should be on the post's page", () => {
-  cy.location('pathname').should('eq', '/post/101-essays-that-will-change-the-way-you-think/')
+  cy.location('pathname').should(
+    'eq',
+    '/post/101-essays-that-will-change-the-way-you-think/'
+  )
 })
 
 Then(