Add jest for testing

.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/js/pages/address.js

@@ -8,7 +8,7 @@ import { batchChannel, initRedux } from '../utils'
 
 const BATCH_THRESHOLD = 10
 
-const initialState = {
+export const initialState = {
   addressHash: null,
   filter: null,
   beyondPageOne: null,

apps/explorer_web/assets/js/router.js

@@ -2,7 +2,7 @@ import Path from 'path-parser'
 import URI from 'urijs'
 import humps from 'humps'
 
-const { locale } = Path.createPath('/:locale').partialTest(window.location.pathname)
+const { locale } = Path.createPath('/:locale').partialTest(window.location.pathname) || { locale: 'en' }
 
 export default {
   locale,

apps/explorer_web/assets/package.json

@@ -15,6 +15,7 @@
     "deploy": "webpack --mode production",
     "watch": "webpack --mode development --watch",
     "build": "webpack --mode development",
+    "test": "jest",
     "eslint": "eslint js/**"
   },
   "dependencies": {
@@ -50,6 +51,7 @@
     "eslint-plugin-standard": "^3.0.1",
     "extract-text-webpack-plugin": "^4.0.0-beta.0",
     "file-loader": "^1.1.11",
+    "jest": "^23.2.0",
     "node-sass": "^4.9.0",
     "postcss-loader": "^2.1.4",
     "sass-loader": "^7.0.1",