Write firs component test, add search placeholder translation

components/SearchInput.spec.js

@@ -0,0 +1,30 @@
+import { shallowMount, mount } from '@vue/test-utils'
+import SearchInput from './SearchInput.vue'
+
+describe('SearchInput.vue', () => {
+  let wrapper
+
+  beforeEach(() => {
+    wrapper = shallowMount(SearchInput, {})
+  })
+
+  it('renders', () => {
+    expect(wrapper.is('div')).toBe(true)
+  })
+
+  it('has id "nav-search"', () => {
+    expect(wrapper.contains('#nav-search')).toBe(true)
+  })
+
+  it('defaults to an empty value', () => {
+    wrapper = mount(SearchInput, {
+      propsData: {
+        value: null
+      }
+    })
+    expect(wrapper.text()).toBe('')
+  })
+  
+  // TODO: add similar software tests for other components
+  // TODO: add more test cases in this file
+})

components/SearchInput.vue

@@ -176,4 +176,14 @@ export default {
     color: hsl(0, 0%, 71%);
   }
 }
+
+.input,
+.has-icons-left,
+.has-icons-right {
+  .icon,
+  i {
+    // color: lighten($grey-light, 15%);
+    transition: color 150ms ease-out !important;
+  }
+}
 </style>

locales/en.json

@@ -168,5 +168,8 @@
     "name": "Name",
     "loadMore": "load more",
     "loading": "loading"
+  },
+  "search": {
+    "placeholder": "Search..."
   }
 }