Merge pull request #253 from cosmos/peng/179-search-bar-no-results

NiDataEmptySearch created, tests

app/src/renderer/components/common/NiDataEmptySearch.vue

@@ -0,0 +1,15 @@
+<template lang="pug">
+data-msg(icon="search")
+  div(slot="title") No Results
+  div(slot="subtitle") Your search did not match any available data.
+</template>
+
+<script>
+import DataMsg from 'common/NiDataMsg'
+export default {
+  name: 'ni-data-empty-search',
+  components: {
+    DataMsg
+  }
+}
+</script>

app/src/renderer/components/govern/PageProposals.vue

@@ -8,14 +8,22 @@ page(title='Proposals')
       i.material-icons search
       .label Search
   modal-search(v-if="filters.proposals.search.visible" type="proposals")
-  part
-    li-proposal(v-for="p in filteredProposals" :key="p.id" :proposal="p")
+
+  data-empty(v-if="proposals.length === 0")
+  data-empty-search(v-else-if="filteredProposals.length === 0")
+  li-proposal(
+    v-else
+    v-for="p in filteredProposals"
+    :key="p.id"
+    :proposal="p")
 </template>
 
 <script>
 import { mapGetters } from 'vuex'
 import { includes, orderBy } from 'lodash'
 import Mousetrap from 'mousetrap'
+import DataEmpty from 'common/NiDataEmpty'
+import DataEmptySearch from 'common/NiDataEmptySearch'
 import LiProposal from 'govern/LiProposal'
 import ModalSearch from 'common/NiModalSearch'
 import TabBar from 'common/NiTabBar'
@@ -25,6 +33,8 @@ import Part from 'common/NiPart'
 export default {
   name: 'page-proposals',
   components: {
+    DataEmpty,
+    DataEmptySearch,
     LiProposal,
     ModalSearch,
     Page,

app/src/renderer/components/monitor/PageValidators.vue

@@ -5,7 +5,11 @@ page(title='Validators')
       i.material-icons search
       .label Search
   modal-search(v-if="filters.validators.search.visible" type="validators")
+
+  data-empty(v-if="validators.length === 0")
+  data-empty-search(v-else-if="filteredValidators.length === 0")
   list-item(
+    v-else
     v-for="i in filteredValidators"
     icon='storage'
     :key="i.pub_key.data"
@@ -19,13 +23,17 @@ import { mapGetters } from 'vuex'
 import { includes, orderBy } from 'lodash'
 import Mousetrap from 'mousetrap'
 import ListItem from 'common/NiListItem'
+import DataEmpty from 'common/NiDataEmpty'
+import DataEmptySearch from 'common/NiDataEmptySearch'
 import ModalSearch from 'common/NiModalSearch'
 import Page from 'common/NiPage'
 import TabBar from 'common/NiTabBar'
 import ToolBar from 'common/NiToolBar'
 export default {
   name: 'page-validators',
   components: {
+    DataEmpty,
+    DataEmptySearch,
     ListItem,
     ModalSearch,
     Page,
@@ -36,9 +44,9 @@ export default {
     ...mapGetters(['validators', 'filters']),
     filteredValidators () {
       let query = this.filters.validators.search.query
-      let list = orderBy(this.validators, ['node_info.moniker', 'desc'])
+      let list = orderBy(this.validators, ['pub_key.data', 'desc'])
       if (this.filters.validators.search.visible) {
-        return list.filter(i => includes(i.node_info.moniker, query))
+        return list.filter(i => includes(i.pub_key.data, query))
       } else {
         return list
       }

app/src/renderer/components/staking/PageDelegates.vue

@@ -10,21 +10,22 @@ page(:title='pageTitle')
     router-link(v-if="config.devMode" to='/staking/bond')
       i.material-icons check_circle
       .label Bond Atoms
+
   modal-search(v-if="filters.delegates.search.visible" type="delegates")
-  template(v-if="delegates.length > 0")
+
+  data-error(v-if="delegates.length === 0")
+  data-empty-search(v-if="filteredDelegates.length === 0")
+  template(v-else)
     panel-sort(:sort='sort')
-    li-delegate(
-      v-for='i in filteredDelegates'
-      key='i.id'
-      :delegate='i')
-  data-error(v-else)
+    li-delegate( v-for='i in filteredDelegates' key='i.id' :delegate='i')
 </template>
 
 <script>
 import { mapGetters } from 'vuex'
 import { includes, orderBy } from 'lodash'
 import Mousetrap from 'mousetrap'
 import LiDelegate from 'staking/LiDelegate'
+import DataEmptySearch from 'common/NiDataEmptySearch'
 import DataError from 'common/NiDataError'
 import Field from '@nylira/vue-field'
 import ModalSearch from 'common/NiModalSearch'
@@ -36,6 +37,7 @@ export default {
   name: 'page-delegates',
   components: {
     LiDelegate,
+    DataEmptySearch,
     DataError,
     Field,
     ModalSearch,

app/src/renderer/components/wallet/PageBalances.vue

@@ -14,18 +14,22 @@ page(title='Balance')
     li-copy(:value="wallet.key.address")
 
   part(title="Denomination Balances")
-    list-item(
-      v-for="i in filteredBalances"
-      :key="i.denom"
-      :dt="i.denom.toUpperCase()"
-      :dd="i.amount")
-    list-item(v-if='wallet.denoms.length === 0 && wallet.balances.length === 0' dt="N/A" dd="None Available")
+  data-empty(v-if="wallet.balances.length === 0")
+  data-empty-search(v-else-if="filteredBalances.length === 0")
+  list-item(
+    v-else
+    v-for="i in filteredBalances"
+    :key="i.denom"
+    :dt="i.denom.toUpperCase()"
+    :dd="i.amount")
 </template>
 
 <script>
 import { mapGetters } from 'vuex'
 import { includes, orderBy } from 'lodash'
 import Mousetrap from 'mousetrap'
+import DataEmpty from 'common/NiDataEmpty'
+import DataEmptySearch from 'common/NiDataEmptySearch'
 import LiCopy from 'common/NiLiCopy'
 import ListItem from 'common/NiListItem'
 import ModalSearch from 'common/NiModalSearch'
@@ -35,6 +39,8 @@ import ToolBar from 'common/NiToolBar'
 export default {
   name: 'page-balances',
   components: {
+    DataEmpty,
+    DataEmptySearch,
     LiCopy,
     ListItem,
     ModalSearch,

app/src/renderer/components/wallet/PageTransactions.vue

@@ -7,18 +7,21 @@ page(title='Transactions')
 
   modal-search(v-if="filters.transactions.search.visible" type="transactions")
 
+  data-empty-tx(v-if='transactions.length === 0')
+  data-empty-search(v-else-if="filteredTransactions.length === 0")
   li-transaction(
+    v-else
     v-for="i in filteredTransactions"
     :transaction-value="i"
     :address="wallet.key.address"
     :devMode="config.devMode")
-  data-empty-tx(v-if='filteredTransactions.length === 0')
 </template>
 
 <script>
 import { mapGetters } from 'vuex'
 import { includes, orderBy } from 'lodash'
 import Mousetrap from 'mousetrap'
+import DataEmptySearch from 'common/NiDataEmptySearch'
 import DataEmptyTx from 'common/NiDataEmptyTx'
 import LiTransaction from 'wallet/LiTransaction'
 import ModalSearch from 'common/NiModalSearch'
@@ -29,6 +32,7 @@ export default {
   name: 'page-transactions',
   components: {
     LiTransaction,
+    DataEmptySearch,
     DataEmptyTx,
     ModalSearch,
     Page,

test/unit/specs/NiDataEmpty.spec.js

@@ -0,0 +1,29 @@
+import { mount } from 'vue-test-utils'
+import htmlBeautify from 'html-beautify'
+import NiDataEmpty from 'common/NiDataEmpty'
+
+describe('NiDataEmpty', () => {
+  let wrapper
+  beforeEach(() => {
+    wrapper = mount(NiDataEmpty)
+  })
+
+  it('has the expected html structure', () => {
+    expect(htmlBeautify(wrapper.html())).toMatchSnapshot()
+  })
+
+  it('has an icon', () => {
+    expect(wrapper.find('.ni-data-msg__icon i.material-icons').text().trim())
+      .toBe('info_outline')
+  })
+
+  it('has a title', () => {
+    expect(wrapper.find('.ni-data-msg__title div').text().trim())
+      .toBe('N/A')
+  })
+
+  it('has a subtitle', () => {
+    expect(wrapper.find('.ni-data-msg__subtitle div').text().trim())
+      .toBe('No data available yet.')
+  })
+})

test/unit/specs/NiDataEmptySearch.spec.js

@@ -0,0 +1,29 @@
+import { mount } from 'vue-test-utils'
+import htmlBeautify from 'html-beautify'
+import NiDataEmptySearch from 'common/NiDataEmptySearch'
+
+describe('NiDataEmptySearch', () => {
+  let wrapper
+  beforeEach(() => {
+    wrapper = mount(NiDataEmptySearch)
+  })
+
+  it('has the expected html structure', () => {
+    expect(htmlBeautify(wrapper.html())).toMatchSnapshot()
+  })
+
+  it('has an icon', () => {
+    expect(wrapper.find('.ni-data-msg__icon i.material-icons').text().trim())
+      .toBe('search')
+  })
+
+  it('has a title', () => {
+    expect(wrapper.find('.ni-data-msg__title div').text().trim())
+      .toBe('No Results')
+  })
+
+  it('has a subtitle', () => {
+    expect(wrapper.find('.ni-data-msg__subtitle div').text().trim())
+      .toBe('Your search did not match any available data.')
+  })
+})

test/unit/specs/NiDataEmptyTx.spec.js

@@ -0,0 +1,29 @@
+import { mount } from 'vue-test-utils'
+import htmlBeautify from 'html-beautify'
+import NiDataEmptyTx from 'common/NiDataEmptyTx'
+
+describe('NiDataEmptyTx', () => {
+  let wrapper
+  beforeEach(() => {
+    wrapper = mount(NiDataEmptyTx)
+  })
+
+  it('has the expected html structure', () => {
+    expect(htmlBeautify(wrapper.html())).toMatchSnapshot()
+  })
+
+  it('has an icon', () => {
+    expect(wrapper.find('.ni-data-msg__icon i.material-icons').text().trim())
+      .toBe('info_outline')
+  })
+
+  it('has a title', () => {
+    expect(wrapper.find('.ni-data-msg__title div').text().trim())
+      .toBe('No Transaction History')
+  })
+
+  it('has a subtitle', () => {
+    expect(wrapper.find('.ni-data-msg__subtitle div').text().trim())
+      .toContain('Looks like you haven\'t sent or received any transactions yet.')
+  })
+})

test/unit/specs/NiDataError.spec.js

@@ -0,0 +1,29 @@
+import { mount } from 'vue-test-utils'
+import htmlBeautify from 'html-beautify'
+import NiDataError from 'common/NiDataError'
+
+describe('NiDataError', () => {
+  let wrapper
+  beforeEach(() => {
+    wrapper = mount(NiDataError)
+  })
+
+  it('has the expected html structure', () => {
+    expect(htmlBeautify(wrapper.html())).toMatchSnapshot()
+  })
+
+  it('has an icon', () => {
+    expect(wrapper.find('.ni-data-msg__icon i.material-icons').text().trim())
+      .toBe('sentiment_very_dissatisfied')
+  })
+
+  it('has a title', () => {
+    expect(wrapper.find('.ni-data-msg__title div').text().trim())
+      .toBe('Aw shucks!')
+  })
+
+  it('has a subtitle', () => {
+    expect(wrapper.find('.ni-data-msg__subtitle div').text().trim())
+      .toContain('Even though you\'re connected a full node, we can\'t display this data for you right now.')
+  })
+})

test/unit/specs/PageBalances.spec.js

@@ -52,7 +52,7 @@ describe('PageBalances', () => {
   })
 
   it('has the expected html structure', () => {
-    expect(wrapper.html()).toMatchSnapshot()
+    expect(wrapper.vm.$el).toMatchSnapshot()
   })
 
   it('should sort the balances by denom', () => {
@@ -63,7 +63,7 @@ describe('PageBalances', () => {
     store.commit('setSearchVisible', ['balances', true])
     store.commit('setSearchQuery', ['balances', 'atom'])
     expect(wrapper.vm.filteredBalances.map(x => x.denom)).toEqual(['ATOM'])
-    expect(wrapper.html()).toMatchSnapshot()
+    expect(wrapper.vm.$el).toMatchSnapshot()
   })
 
   it('should update balances by querying wallet state', () => {
@@ -83,8 +83,9 @@ describe('PageBalances', () => {
   it('should show the n/a message if there are no denoms', () => {
     store.commit('setWalletBalances', [])
     wrapper.update()
-    expect(wrapper.findAll('.ni-li').length).toBe(1) // 1 n/a / 0 denoms
-    expect(wrapper.findAll('.ni-li').at(0).html()).toContain('N/A') // 1 address + 1 n/a
+    expect(wrapper.findAll('.ni-data-msg').length).toBe(1) // 1 n/a / 0 denoms
+    expect(wrapper.find('.ni-data-msg__title div').text().trim())
+      .toContain('N/A') // 1 address + 1 n/a
   })
 
   it('should not show the n/a message if there denoms', () => {

test/unit/specs/PageTransactions.spec.js

@@ -25,6 +25,7 @@ describe('PageTransactions', () => {
       }
     })
 
+    store.commit('setWalletKey', {address: 'myAddress'})
     store.commit('setWalletHistory', [{
       tx: {
         hash: 'x',
@@ -77,7 +78,8 @@ describe('PageTransactions', () => {
       localVue,
       store,
       stubs: {
-        'data-empty-tx': '<data-empty-tx />'
+        'data-empty-tx': '<data-empty-tx />',
+        'li-transaction': '<li-transactions />'
       }
     })
 
@@ -93,6 +95,10 @@ describe('PageTransactions', () => {
     expect(wrapper.contains('.ni-modal-search')).toBe(true)
   })
 
+  it('should show transactions', () => {
+    expect(wrapper.findAll('li-transactions').length).toBe(2)
+  })
+
   it('should sort the transaction by time', () => {
     expect(wrapper.vm.filteredTransactions.map(x => x.tx.hash)).toEqual(['y', 'x'])
   })

test/unit/specs/__snapshots__/NiDataEmpty.spec.js.snap

@@ -0,0 +1,21 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`NiDataEmpty has the expected html structure 1`] = `
+"<div class=\\"ni-data-msg\\">
+   <div class=\\"ni-data-msg__icon\\">
+      <i class=\\"material-icons\\">info_outline</i>
+   </div>
+<div class=\\"ni-data-msg__text\\">
+   <div class=\\"ni-data-msg__title\\">
+      <div>
+         N/A
+      </div>
+</div>
+<div class=\\"ni-data-msg__subtitle\\">
+   <div>
+      No data available yet.
+   </div>
+</div>
+</div>
+</div>"
+`;