Jordan/121 block tests

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

@@ -1,5 +1,5 @@
 <template lang="pug">
-page(:title="pageBlockTitle")
+page(:title="pageBlockTitle" v-if="block.header")
   div(slot="menu"): tool-bar
     router-link(to="/blocks")
       i.material-icons arrow_back
@@ -14,6 +14,9 @@ page(:title="pageBlockTitle")
       i.material-icons chevron_right
       .label Next Block
 
+  part(title='')
+    list-item(dt="Block Hash" :dd="blockMeta.block_id.hash")
+
   part(title='Header')
     list-item(dt="Chain ID" :dd="block.header.chain_id")
     list-item(dt="Time" :dd="blockHeaderTime")
@@ -46,7 +49,6 @@ page(:title="pageBlockTitle")
 import { mapGetters } from 'vuex'
 import moment from 'moment'
 import num from 'scripts/num'
-import axios from 'axios'
 import DataEmpty from 'common/NiDataEmpty'
 import ToolBar from 'common/NiToolBar'
 import ListItem from 'common/NiListItem'
@@ -63,108 +65,41 @@ export default {
   },
   computed: {
     ...mapGetters(['blockchain']),
+    block () {
+      if (this.blockchain.block.block) {
+        return this.blockchain.block.block
+      } else {
+        return {}
+      }
+    },
+    blockUrl () {
+      return this.blockchain.url
+    },
     blockHeaderTime () {
-      return moment(this.block.header.time).format('MMMM Do YYYY — hh:mm:ss')
+      if (this.block.header.time) {
+        return moment(this.block.header.time).format('MMMM Do YYYY — hh:mm:ss')
+      } else {
+        return 'Loading...'
+      }
+    },
+    blockMeta () {
+      if (this.block) {
+        return this.blockchain.block.block_meta
+      } else {
+        return {}
+      }
     },
     pageBlockTitle () {
-      if (this.block.header.height) {
+      if (this.block.header) {
         return 'Block #' + num.prettyInt(this.block.header.height)
       } else {
-        return 'Loading Block…'
+        return 'Loading...'
       }
     }
   },
-  data: () => ({
-    num: num,
-    moment: moment,
-    blockUrl: '',
-    block_meta: {
-      block_id: {
-        hash: '',
-        parts: {
-          total: 0,
-          hash: ''
-        }
-      },
-      header: {
-        chain_id: '',
-        height: 0,
-        time: '',
-        num_txs: 0,
-        last_block_id: {
-          hash: '',
-          parts: {
-            total: 0,
-            hash: ''
-          }
-        },
-        last_commit_hash: '',
-        data_hash: '',
-        validators_hash: '',
-        app_hash: ''
-      }
-    },
-    block: {
-      header: {
-        chain_id: '',
-        height: 0,
-        time: '',
-        num_txs: 0,
-        last_block_id: {
-          hash: '',
-          parts: {
-            total: 0,
-            hash: ''
-          }
-        },
-        last_commit_hash: '',
-        data_hash: '',
-        validators_hash: '',
-        app_hash: ''
-      },
-      data: {
-        txs: []
-      },
-      last_commit: {
-        blockID: {
-          hash: '',
-          parts: {
-            total: 0,
-            hash: ''
-          }
-        },
-        precommits: [
-          {
-            validator_address: '',
-            validator_index: 0,
-            height: 0,
-            round: 0,
-            type: 0,
-            block_id: {
-              hash: '',
-              parts: {
-                total: 0,
-                hash: ''
-              }
-            },
-            signature: [0, '']
-          }
-        ]
-      }
-    }
-  }),
   methods: {
     fetchBlock () {
-      this.blockUrl = `https://${this.blockchain.blockchainName}-node0.testnets.interblock.io/block?height=${this.$route.params.block}`
-      axios(this.blockUrl).then(({data}) => {
-        if (data.err) {
-          console.log('err', data.err)
-          return
-        }
-        let blockData = data.result
-        this.block_meta = blockData.block_meta
-        this.block = blockData.block
-      })
+      this.$store.dispatch('getBlock', this.$route.params.block)
     }
   },
   mounted () {

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

@@ -10,7 +10,7 @@ page(title='Block Explorer')
   part(title='Current Block')
     list-item(dt='Block Height' :dd='num.prettyInt(lastHeader.height)' :to="{ name: 'block', params: { block: lastHeader.height} }")
     list-item(dt='Block Time' :dd='latestBlockTime')
-    list-item(dt='Block Hash' :dd='status.latest_block_hash')
+    list-item(dt='Block Hash' :dd='latestBlockHash')
 
   part(title='Latest Blocks')
     list-item.column-header(dt="Block Height" dd="# of Transactions")
@@ -49,13 +49,15 @@ export default {
       return this.blockchain.status
     },
     latestBlockTime () {
-      let blockTime = this.status.latest_block_time
-      if (blockTime) {
-        return moment(blockTime).format('MMMM Do YYYY — hh:mm:ss')
+      if (this.lastHeader.time) {
+        return moment(this.lastHeader.time).format('MMMM Do YYYY — hh:mm:ss')
       } else {
         return 'Loading…'
       }
     },
+    latestBlockHash () {
+      return this.lastHeader.last_block_id.hash
+    },
     blocks () {
       return this.blockchain.blocks
     }

app/src/renderer/vuex/modules/blockchain.js

@@ -7,28 +7,37 @@ export default ({ commit, node }) => {
     urlSuffix: '-node0.testnets.interblock.io',
     status: {},
     abciInfo: {},
-    topAvgTxRate: 0,
-    blocks: []
+    blocks: [],
+    block: {},
+    url: ''
   }
 
+  let url = state.urlPrefix + state.blockchainName + state.urlSuffix
   const mutations = {
-    setBlockchainName (state, name) {
-      state.blockchainName = name
-    },
-    setTopAvgTxRate (state, value) {
-      state.topAvgTxRate = value
+    setUrl (state) {
+      console.log(url)
+      state.url = url
     },
     getStatus (state) {
-      let url = state.urlPrefix + state.blockchainName + state.urlSuffix
       axios(url + '/status').then((res) => {
         state.status = res.data.result
       })
     },
     getAbciInfo (state) {
-      let url = state.urlPrefix + state.blockchainName + state.urlSuffix
       axios(url + '/abci_info').then((res) => {
         state.abciInfo = res.data.result
       })
+    },
+    setBlock (state, block) {
+      state.block = block
+    }
+  }
+
+  const actions = {
+    async getBlock ({ state, commit }, height) {
+      const blockUrl = url + '/block?height=' + height
+      let block = (await axios.get(blockUrl)).data.result
+      commit('setBlock', block)
     }
   }
 
@@ -48,7 +57,8 @@ export default ({ commit, node }) => {
   setTimeout(() => {
     mutations.getStatus(state)
     mutations.getAbciInfo(state)
+    mutations.setUrl(state)
   }, 3000)
 
-  return { state, mutations }
+  return { state, mutations, actions }
 }

app/src/renderer/vuex/modules/node.js

@@ -3,7 +3,7 @@ import { setTimeout } from 'timers'
 'use strict'
 
 export default function ({ node }) {
-  // get tendermint RPC client from basecon client
+  // get tendermint RPC client from basecoin client
   const { nodeIP } = node
 
   const state = {

test/unit/specs/components/monitor/PageBlock.spec.js

@@ -0,0 +1,65 @@
+import setup from '../../../helpers/vuex-setup'
+import htmlBeautify from 'html-beautify'
+import PageBlock from 'renderer/components/monitor/PageBlock'
+
+const $route = {
+  params: {
+    block: 1234
+  }
+}
+
+describe('PageBlock', () => {
+  let wrapper, store
+  let {mount} = setup()
+
+  beforeEach(() => {
+    let instance = mount(PageBlock, {
+      mocks: {
+        $route
+      },
+      getters: {
+        blockchain: () => ({
+          url: 'https://the-url',
+          block: {
+            block: {
+              header: {
+                last_block_id: {
+                  hash: 'last-hash',
+                  parts: {
+                    total: 0
+                  }
+                },
+                num_txs: 0,
+                height: 10,
+                time: null
+              },
+              last_commit: {
+                precommits: []
+              },
+              data: {
+                txs: 0
+              }
+            },
+            block_meta: {
+              block_id: {
+                hash: 'hash'
+              }
+            }
+          }
+        })
+      }
+    })
+    wrapper = instance.wrapper
+    store = instance.store
+
+    wrapper.update()
+  })
+
+  it('has the expected html structure', () => {
+    expect(htmlBeautify(wrapper.html())).toMatchSnapshot()
+  })
+
+  it('should dispatch getBlock when mounted', () => {
+    expect(store.dispatch).toHaveBeenCalledWith('getBlock', wrapper.vm.$route.params.block)
+  })
+})

test/unit/specs/components/monitor/PageBlocks.spec.js

@@ -10,20 +10,32 @@ describe('PageBlocks', () => {
     let instance = mount(PageBlocks, {
       stubs: {
         'modal-search': '<modal-search />'
+      },
+      getters: {
+        lastHeader: () => ({
+          time: null,
+          last_block_id: {
+            hash: '123'
+          },
+          height: 12345
+        })
       }
     })
     wrapper = instance.wrapper
     store = instance.store
 
-    store.commit('setSearchQuery', ['blocks', ''])
-
     wrapper.update()
   })
 
   it('has the expected html structure', () => {
     expect(htmlBeautify(wrapper.html())).toMatchSnapshot()
   })
 
+  it('should call resetSearch on beforeDestroy', () => {
+    wrapper.destroy()
+    expect(store.commit).toHaveBeenCalledWith('resetSearch', 'blocks')
+  })
+
   it('should show the search on click', () => {
     wrapper.vm.setSearch(true)
     expect(store.commit).toHaveBeenCalledWith('setSearchVisible', ['blocks', true])