From b03288743025348e25743085d89af0b87fe6c878 Mon Sep 17 00:00:00 2001
From: Matt Rider <mattwr18@gmail.com>
Date: Tue, 5 Feb 2019 09:59:27 -0200
Subject: [PATCH] Write firs component test, add search placeholder translation

---
 components/SearchInput.spec.js | 30 ++++++++++++++++++++++++++++++
 components/SearchInput.vue     | 10 ++++++++++
 locales/en.json                |  3 +++
 3 files changed, 43 insertions(+)
 create mode 100644 components/SearchInput.spec.js

diff --git a/components/SearchInput.spec.js b/components/SearchInput.spec.js
new file mode 100644
index 000000000..1c22cec1d
--- /dev/null
+++ b/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
+})
diff --git a/components/SearchInput.vue b/components/SearchInput.vue
index b3c2b161b..4048de745 100644
--- a/components/SearchInput.vue
+++ b/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>
diff --git a/locales/en.json b/locales/en.json
index 023e34835..0792c6249 100644
--- a/locales/en.json
+++ b/locales/en.json
@@ -168,5 +168,8 @@
     "name": "Name",
     "loadMore": "load more",
     "loading": "loading"
+  },
+  "search": {
+    "placeholder": "Search..."
   }
 }