Merge pull request #52 from VonIobro/feature/component-refactor-peer

Feature/component refactor peer

.eslintrc

@@ -36,7 +36,7 @@
   "settings": {
     "import/resolver": {
       "node": {
-        "paths": ["app"]
+        "paths": ["app", "app/node_modules"]
       },
       "webpack": {
         "config": "webpack.config.eslint.js"

app/routes/wallet/components/components/Peers/components/Peer/Peer.scss → app/components/Peers/Peer.scss

@@ -1,4 +1,4 @@
-@import '../../../../../../../variables.scss';
+@import '../../variables.scss';
 
 .peer {
 	position: relative;

app/routes/wallet/components/components/Peers/components/PeerForm/PeerForm.scss → app/components/Peers/PeerForm.scss

@@ -1,4 +1,4 @@
-@import '../../../../../../../variables.scss';
+@import '../../variables.scss';
 
 .title {
 	text-align: center;

app/routes/wallet/components/components/Peers/components/PeerModal/PeerModal.scss → app/components/Peers/PeerModal.scss

@@ -1,4 +1,4 @@
-@import '../../../../../../../variables.scss';
+@import '../../variables.scss';
 
 .peer {
 	padding: 40px;

app/routes/wallet/components/components/Peers/Peers.js → app/components/Peers/Peers.js

@@ -1,9 +1,9 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import { TiPlus } from 'react-icons/lib/ti'
-import PeerModal from './components/PeerModal'
+import PeerModal from './PeerModal'
-import PeerForm from './components/PeerForm'
+import PeerForm from './PeerForm'
-import Peer from './components/Peer'
+import Peer from './Peer'
 import styles from './Peers.scss'
 
 const Peers = ({

app/routes/wallet/components/components/Peers/Peers.scss → app/components/Peers/Peers.scss

@@ -1,4 +1,4 @@
-@import '../../../../../variables.scss';
+@import '../../variables.scss';
 
 .peers {
 	width: 75%;

app/routes/wallet/components/Wallet.js

@@ -2,7 +2,7 @@ import React, { Component } from 'react'
 import PropTypes from 'prop-types'
 import ReactSVG from 'react-svg'
 import Channels from 'components/Channels'
-import Peers from './components/Peers'
+import Peers from 'components/Peers'
 import styles from './Wallet.scss'
 
 class Wallet extends Component {

app/routes/wallet/components/components/Peers/components/Peer/index.js

@@ -1,3 +0,0 @@
-import Peer from './Peer'
-
-export default Peer

app/routes/wallet/components/components/Peers/components/PeerForm/index.js

@@ -1,3 +0,0 @@
-import PeerForm from './PeerForm'
-
-export default PeerForm

app/routes/wallet/components/components/Peers/components/PeerModal/index.js

@@ -1,3 +0,0 @@
-import PeerModal from './PeerModal'
-
-export default PeerModal

test/components/AnimatedCheckmark.spec.js

@@ -0,0 +1,14 @@
+import React from 'react'
+import { shallow } from 'enzyme'
+import Isvg from 'react-inlinesvg'
+
+import AnimatedCheckmark from '../../app/components/AnimatedCheckmark'
+
+describe('component.AnimatedCheckmark', () => {
+  describe('default', () => {
+    it('should render default component', () => {
+      const el = shallow(<AnimatedCheckmark />)
+      expect(el.find(Isvg).props().src).toContain('checkmark.svg')
+    })
+  })
+})

test/components/Channels.spec.js

@@ -1,6 +1,7 @@
 import React from 'react'
 import { shallow } from 'enzyme'
 
+import { TiPlus } from 'react-icons/lib/ti'
 import Channels from '../../app/components/Channels'
 import ChannelModal from '../../app/components/Channels/ChannelModal'
 import ChannelForm from '../../app/components/Channels/ChannelForm'
@@ -72,6 +73,10 @@ describe('Channels', () => {
       expect(el.find(ChannelModal)).toHaveLength(1)
       expect(el.find(ChannelForm)).toHaveLength(1)
     })
+    it('should have Channels header, and plus button', () => {
+      expect(el.contains('Channels')).toBe(true)
+      expect(el.find(TiPlus)).toHaveLength(1)
+    })
   })
 
   describe('channels are loading', () => {

test/components/CryptoIcon.spec.js

@@ -0,0 +1,36 @@
+import React from 'react'
+import { shallow } from 'enzyme'
+import { FaBitcoin } from 'react-icons/lib/fa'
+import Isvg from 'react-inlinesvg'
+import CryptoIcon from '../../app/components/CryptoIcon'
+
+const defaultProps = {
+  currency: 'bch',
+  styles: {}
+}
+
+describe('component.CryptoIcon', () => {
+  describe('currency is "unknown"', () => {
+    const props = { ...defaultProps }
+    const el = shallow(<CryptoIcon {...props} />)
+    it('should show empty span', () => {
+      expect(el.html()).toEqual('<span></span>')
+    })
+  })
+
+  describe('currency is "btc"', () => {
+    const props = { ...defaultProps, currency: 'btc' }
+    const el = shallow(<CryptoIcon {...props} />)
+    it('should show btc symbol', () => {
+      expect(el.find(FaBitcoin)).toHaveLength(1)
+    })
+  })
+
+  describe('currency is "ltc"', () => {
+    const props = { ...defaultProps, currency: 'ltc' }
+    const el = shallow(<CryptoIcon {...props} />)
+    it('should show ltc symbol', () => {
+      expect(el.find(Isvg).props().src).toContain('litecoin.svg')
+    })
+  })
+})

test/components/CurrencyIcon.spec.js

@@ -0,0 +1,29 @@
+import React from 'react'
+import { shallow } from 'enzyme'
+import { FaDollar } from 'react-icons/lib/fa'
+import CryptoIcon from '../../app/components/CryptoIcon'
+import CurrencyIcon from '../../app/components/CurrencyIcon'
+
+const defaultProps = {
+  currency: '',
+  crypto: '',
+  styles: {}
+}
+
+describe('component.CurrencyIcon', () => {
+  describe('currency is "usd"', () => {
+    const props = { ...defaultProps, currency: 'usd' }
+    const el = shallow(<CurrencyIcon {...props} />)
+    it('should show usd symbol', () => {
+      expect(el.find(FaDollar)).toHaveLength(1)
+    })
+  })
+
+  describe('currency is not "usd"', () => {
+    const props = { ...defaultProps, currency: 'btc' }
+    const el = shallow(<CurrencyIcon {...props} />)
+    it('should show btc symbol', () => {
+      expect(el.find(CryptoIcon)).toHaveLength(1)
+    })
+  })
+})

test/components/LoadingBolt.spec.js

@@ -0,0 +1,12 @@
+import React from 'react'
+import { shallow } from 'enzyme'
+import Isvg from 'react-inlinesvg'
+import LoadingBolt from '../../app/components/LoadingBolt'
+
+describe('component.LoadingBolt', () => {
+  const el = shallow(<LoadingBolt />)
+  it('should show defaults', () => {
+    expect(el.find(Isvg).props().src).toContain('cloudbolt.svg')
+    expect(el.text()).toContain('loading')
+  })
+})

test/components/Peers.spec.js

@@ -0,0 +1,76 @@
+import React from 'react'
+import { shallow } from 'enzyme'
+
+import { TiPlus } from 'react-icons/lib/ti'
+import Peers from '../../app/components/Peers'
+import PeerModal from '../../app/components/Peers/PeerModal'
+import PeerForm from '../../app/components/Peers/PeerForm'
+import Peer from '../../app/components/Peers/Peer'
+
+const defaultProps = {
+  peersLoading: false,
+  peers: [],
+  setPeer: () => {},
+  peerModalOpen: false,
+  peerForm: {},
+  setPeerForm: () => {},
+  connect: () => {},
+  isOpen: false,
+  resetPeer: () => {},
+  disconnect: () => {},
+  form: {},
+  setForm: () => {}
+}
+
+const peer = {
+  address: '45.77.115.33:9735',
+  bytes_recv: '63322',
+  bytes_sent: '68714',
+  inbound: true,
+  peer_id: 3,
+  ping_time: '261996',
+  pub_key: '0293cb97aac77eacjc5377d761640f1b51ebba350902801e1aa62853fa7bc3a1f30',
+  sat_recv: '0',
+  sat_sent: '0'
+}
+
+describe('component.Peers', () => {
+  describe('default components', () => {
+    const props = { ...defaultProps }
+    const el = shallow(<Peers {...props} />)
+    it('should contain Modal and Form', () => {
+      expect(el.find(PeerModal)).toHaveLength(1)
+      expect(el.find(PeerForm)).toHaveLength(1)
+    })
+    it('should have Peers header, and plus button', () => {
+      expect(el.contains('Peers')).toBe(true)
+      expect(el.find(TiPlus)).toHaveLength(1)
+    })
+  })
+
+  describe('peers are loading', () => {
+    const props = { ...defaultProps, peersLoading: true }
+    const el = shallow(<Peers {...props} />)
+    it('should display loading msg', () => {
+      expect(el.contains('Loading...')).toBe(true)
+    })
+  })
+
+  describe('peers are loaded', () => {
+    describe('no peers', () => {
+      const props = { ...defaultProps }
+      const el = shallow(<Peers {...props} />)
+      it('should show no peers', () => {
+        expect(el.find(Peer)).toHaveLength(0)
+      })
+    })
+
+    describe('peer connected', () => {
+      const props = { ...defaultProps, peers: [peer] }
+      const el = shallow(<Peers {...props} />)
+      it('should show peer information', () => {
+        expect(el.find(Peer)).toHaveLength(1)
+      })
+    })
+  })
+})