Merge pull request #333 from poanetwork/live-update-transactions-on-a…

…ddress-page-#31

Live update transactions and overview on address page

.circleci/config.yml

@@ -257,6 +257,21 @@ jobs:
 
       - store_artifacts:
           path: apps/explorer_web/priv/gettext
+  jest:
+    docker:
+      # Ensure .tool-versions matches
+      - image: circleci/node:9.10.1
+
+    working_directory: ~/app
+
+    steps:
+      - attach_workspace:
+          at: .
+
+      - run:
+          name: Jest
+          command: ./node_modules/.bin/jest
+          working_directory: apps/explorer_web/assets
   sobelow:
     docker:
       # Ensure .tool-versions matches
@@ -339,6 +354,7 @@ workflows:
             - check_formatted
             - credo
             - eslint
+            - jest
             - sobelow
             - test
       - dialyzer:
@@ -350,6 +366,9 @@ workflows:
       - gettext:
           requires:
             - build
+      - jest:
+          requires:
+            - build
       - sobelow:
           requires:
             - build

README.md

@@ -126,6 +126,9 @@ To monitor build status, configure your local [CCMenu](http://ccmenu.org/) with
   7. Lint the JavaScript code.  
   `cd apps/explorer_web/assets && npm run eslint; cd -`
 
+  8. Test the JavaScript code.  
+  `cd apps/explorer_web/assets && npm run test; cd -`
+
 
 ### API Documentation
 

apps/explorer_web/assets/__tests__/pages/address.js

@@ -0,0 +1,298 @@
+import { reducer, initialState } from '../../js/pages/address'
+
+describe('PAGE_LOAD', () => {
+  test('page 1 without filter', () => {
+    const state = initialState
+    const action = {
+      type: 'PAGE_LOAD',
+      params: {
+        addressHash: '1234'
+      }
+    }
+    const output = reducer(state, action)
+
+    expect(output.addressHash).toBe('1234')
+    expect(output.filter).toBe(undefined)
+    expect(output.beyondPageOne).toBe(false)
+  })
+  test('page 2+ without filter', () => {
+    const state = initialState
+    const action = {
+      type: 'PAGE_LOAD',
+      params: {
+        addressHash: '1234',
+        blockNumber: '4321'
+      }
+    }
+    const output = reducer(state, action)
+
+    expect(output.addressHash).toBe('1234')
+    expect(output.filter).toBe(undefined)
+    expect(output.beyondPageOne).toBe(true)
+  })
+  test('page 1 with "to" filter', () => {
+    const state = initialState
+    const action = {
+      type: 'PAGE_LOAD',
+      params: {
+        addressHash: '1234',
+        filter: 'to'
+      }
+    }
+    const output = reducer(state, action)
+
+    expect(output.addressHash).toBe('1234')
+    expect(output.filter).toBe('to')
+    expect(output.beyondPageOne).toBe(false)
+  })
+  test('page 2+ with "to" filter', () => {
+    const state = initialState
+    const action = {
+      type: 'PAGE_LOAD',
+      params: {
+        addressHash: '1234',
+        filter: 'to',
+        blockNumber: '4321'
+      }
+    }
+    const output = reducer(state, action)
+
+    expect(output.addressHash).toBe('1234')
+    expect(output.filter).toBe('to')
+    expect(output.beyondPageOne).toBe(true)
+  })
+})
+
+test('CHANNEL_DISCONNECTED', () => {
+  const state = initialState
+  const action = {
+    type: 'CHANNEL_DISCONNECTED'
+  }
+  const output = reducer(state, action)
+
+  expect(output.channelDisconnected).toBe(true)
+  expect(output.batchCountAccumulator).toBe(0)
+})
+
+test('RECEIVED_UPDATED_OVERVIEW', () => {
+  const state = initialState
+  const action = {
+    type: 'RECEIVED_UPDATED_OVERVIEW',
+    msg: {
+      overview: 'hello world'
+    }
+  }
+  const output = reducer(state, action)
+
+  expect(output.overview).toBe('hello world')
+})
+
+describe('RECEIVED_NEW_TRANSACTION_BATCH', () => {
+  test('single transaction', () => {
+    const state = initialState
+    const action = {
+      type: 'RECEIVED_NEW_TRANSACTION_BATCH',
+      msgs: [{
+        transactionHtml: 'test'
+      }]
+    }
+    const output = reducer(state, action)
+
+    expect(output.newTransactions).toEqual(['test'])
+    expect(output.batchCountAccumulator).toEqual(0)
+  })
+  test('large batch of transactions', () => {
+    const state = initialState
+    const action = {
+      type: 'RECEIVED_NEW_TRANSACTION_BATCH',
+      msgs: [{
+        transactionHtml: 'test 1'
+      },{
+        transactionHtml: 'test 2'
+      },{
+        transactionHtml: 'test 3'
+      },{
+        transactionHtml: 'test 4'
+      },{
+        transactionHtml: 'test 5'
+      },{
+        transactionHtml: 'test 6'
+      },{
+        transactionHtml: 'test 7'
+      },{
+        transactionHtml: 'test 8'
+      },{
+        transactionHtml: 'test 9'
+      },{
+        transactionHtml: 'test 10'
+      },{
+        transactionHtml: 'test 11'
+      }]
+    }
+    const output = reducer(state, action)
+
+    expect(output.newTransactions).toEqual([])
+    expect(output.batchCountAccumulator).toEqual(11)
+  })
+  test('single transaction after single transaction', () => {
+    const state = Object.assign({}, initialState, {
+      newTransactions: ['test 1']
+    })
+    const action = {
+      type: 'RECEIVED_NEW_TRANSACTION_BATCH',
+      msgs: [{
+        transactionHtml: 'test 2'
+      }]
+    }
+    const output = reducer(state, action)
+
+    expect(output.newTransactions).toEqual(['test 1', 'test 2'])
+    expect(output.batchCountAccumulator).toEqual(0)
+  })
+  test('single transaction after large batch of transactions', () => {
+    const state = Object.assign({}, initialState, {
+      newTransactions: [],
+      batchCountAccumulator: 11
+    })
+    const action = {
+      type: 'RECEIVED_NEW_TRANSACTION_BATCH',
+      msgs: [{
+        transactionHtml: 'test 12'
+      }]
+    }
+    const output = reducer(state, action)
+
+    expect(output.newTransactions).toEqual([])
+    expect(output.batchCountAccumulator).toEqual(12)
+  })
+  test('large batch of transactions after large batch of transactions', () => {
+    const state = Object.assign({}, initialState, {
+      newTransactions: [],
+      batchCountAccumulator: 11
+    })
+    const action = {
+      type: 'RECEIVED_NEW_TRANSACTION_BATCH',
+      msgs: [{
+        transactionHtml: 'test 12'
+      },{
+        transactionHtml: 'test 13'
+      },{
+        transactionHtml: 'test 14'
+      },{
+        transactionHtml: 'test 15'
+      },{
+        transactionHtml: 'test 16'
+      },{
+        transactionHtml: 'test 17'
+      },{
+        transactionHtml: 'test 18'
+      },{
+        transactionHtml: 'test 19'
+      },{
+        transactionHtml: 'test 20'
+      },{
+        transactionHtml: 'test 21'
+      },{
+        transactionHtml: 'test 22'
+      }]
+    }
+    const output = reducer(state, action)
+
+    expect(output.newTransactions).toEqual([])
+    expect(output.batchCountAccumulator).toEqual(22)
+  })
+  test('after disconnection', () => {
+    const state = Object.assign({}, initialState, {
+      channelDisconnected: true
+    })
+    const action = {
+      type: 'RECEIVED_NEW_TRANSACTION_BATCH',
+      msgs: [{
+        transactionHtml: 'test'
+      }]
+    }
+    const output = reducer(state, action)
+
+    expect(output.newTransactions).toEqual([])
+    expect(output.batchCountAccumulator).toEqual(0)
+  })
+  test('on page 2+', () => {
+    const state = Object.assign({}, initialState, {
+      beyondPageOne: true
+    })
+    const action = {
+      type: 'RECEIVED_NEW_TRANSACTION_BATCH',
+      msgs: [{
+        transactionHtml: 'test'
+      }]
+    }
+    const output = reducer(state, action)
+
+    expect(output.newTransactions).toEqual([])
+    expect(output.batchCountAccumulator).toEqual(0)
+  })
+  test('transaction from current address with "from" filter', () => {
+    const state = Object.assign({}, initialState, {
+      addressHash: '1234',
+      filter: 'from'
+    })
+    const action = {
+      type: 'RECEIVED_NEW_TRANSACTION_BATCH',
+      msgs: [{
+        fromAddressHash: '1234',
+        transactionHtml: 'test'
+      }]
+    }
+    const output = reducer(state, action)
+
+    expect(output.newTransactions).toEqual(['test'])
+  })
+  test('transaction from current address with "to" filter', () => {
+    const state = Object.assign({}, initialState, {
+      addressHash: '1234',
+      filter: 'to'
+    })
+    const action = {
+      type: 'RECEIVED_NEW_TRANSACTION_BATCH',
+      msgs: [{
+        fromAddressHash: '1234',
+        transactionHtml: 'test'
+      }]
+    }
+    const output = reducer(state, action)
+
+    expect(output.newTransactions).toEqual([])
+  })
+  test('transaction to current address with "to" filter', () => {
+    const state = Object.assign({}, initialState, {
+      addressHash: '1234',
+      filter: 'to'
+    })
+    const action = {
+      type: 'RECEIVED_NEW_TRANSACTION_BATCH',
+      msgs: [{
+        toAddressHash: '1234',
+        transactionHtml: 'test'
+      }]
+    }
+    const output = reducer(state, action)
+
+    expect(output.newTransactions).toEqual(['test'])
+  })
+  test('transaction to current address with "from" filter', () => {
+    const state = Object.assign({}, initialState, {
+      addressHash: '1234',
+      filter: 'from'
+    })
+    const action = {
+      type: 'RECEIVED_NEW_TRANSACTION_BATCH',
+      msgs: [{
+        toAddressHash: '1234',
+        transactionHtml: 'test'
+      }]
+    }
+    const output = reducer(state, action)
+
+    expect(output.newTransactions).toEqual([])
+  })
+})

apps/explorer_web/assets/css/app.scss

@@ -62,6 +62,7 @@ $fa-font-path: "~@fortawesome/fontawesome-free/webfonts";
 @import "components/table";
 @import "components/qr-code";
 @import "components/navbar";
+@import "components/animations";
 @import "layout";
 
 

apps/explorer_web/assets/css/components/_animations.scss

@@ -0,0 +1,8 @@
+@keyframes fade-in {
+  0% {opacity: 0;}
+  100% {opacity: 1;}
+}
+
+.fade-in {
+  animation: fade-in 0.6s ease-out forwards;
+}

apps/explorer_web/assets/js/app.js

@@ -18,10 +18,12 @@ import 'bootstrap'
 // Local files can be imported directly using relative
 // paths "./socket" or full ones "web/static/js/socket".
 
-// import socket from "./socket"
 import './lib/card_flip'
 import './lib/clipboard_buttons'
 import './lib/from_now'
 import './lib/market_history_chart'
+import './lib/reload_button'
 import './lib/sidebar'
 import './lib/tooltip'
+
+import './pages/address'

apps/explorer_web/assets/js/lib/from_now.js

@@ -1,7 +1,8 @@
 import $ from 'jquery'
 import moment from 'moment'
+import router from '../router'
 
-moment.locale(window.locale)
+moment.locale(router.locale)
 
 moment.relativeTimeThreshold('M', 12)
 moment.relativeTimeThreshold('d', 30)

apps/explorer_web/assets/js/lib/reload_button.js

@@ -0,0 +1,3 @@
+import $ from 'jquery'
+
+$('[data-selector="reload-button"]').click(() => window.location.reload())