Merge pull request #47 from VonIobro/feature/component-refactor-Channel

Feature/component refactor channel

app/routes/wallet/components/components/Channels/components/Channel/Channel.scss → app/components/Channels/Channel.scss

@@ -1,4 +1,4 @@
-@import '../../../../../../../variables.scss';
+@import '../../variables.scss';
 
 .channel {
 	position: relative;
@@ -34,7 +34,7 @@
 		padding: 0 10px;
 		margin-bottom: 5;
 		margin-top: 25px;
-		
+
 		section {
 			margin-bottom: 20px;
 

app/routes/wallet/components/components/Channels/components/ChannelForm/ChannelForm.scss → app/components/Channels/ChannelForm.scss

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

app/routes/wallet/components/components/Channels/components/ChannelModal/ChannelModal.scss → app/components/Channels/ChannelModal.scss

@@ -1,4 +1,4 @@
-@import '../../../../../../../variables.scss';
+@import '../../variables.scss';
 
 .modalChannel {
 	padding: 40px;
@@ -21,7 +21,7 @@
 
 		&:hover {
 			color: $main;
-			text-decoration: underline; 
+			text-decoration: underline;
 		}
 	}
 }

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

@@ -1,11 +1,11 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import { TiPlus } from 'react-icons/lib/ti'
-import ChannelModal from './components/ChannelModal'
-import ChannelForm from './components/ChannelForm'
-import Channel from './components/Channel'
-import OpenPendingChannel from './components/OpenPendingChannel'
-import ClosedPendingChannel from './components/ClosedPendingChannel'
+import ChannelModal from './ChannelModal'
+import ChannelForm from './ChannelForm'
+import Channel from './Channel'
+import OpenPendingChannel from './OpenPendingChannel'
+import ClosedPendingChannel from './ClosedPendingChannel'
 import styles from './Channels.scss'
 
 const Channels = ({

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

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

app/routes/wallet/components/components/Channels/components/ClosedPendingChannel/ClosedPendingChannel.scss → app/components/Channels/ClosedPendingChannel.scss

@@ -1,4 +1,4 @@
-@import '../../../../../../../variables.scss';
+@import '../../variables.scss';
 
 .channel {
 	position: relative;
@@ -35,7 +35,7 @@
 		padding: 0 10px;
 		margin-bottom: 5;
 		margin-top: 25px;
-		
+
 		section {
 			margin-bottom: 20px;
 

app/routes/wallet/components/components/Channels/components/OpenPendingChannel/OpenPendingChannel.scss → app/components/Channels/OpenPendingChannel.scss

@@ -1,4 +1,4 @@
-@import '../../../../../../../variables.scss';
+@import '../../variables.scss';
 
 .channel {
 	position: relative;
@@ -31,7 +31,7 @@
 		padding: 0 10px;
 		margin-bottom: 5;
 		margin-top: 25px;
-		
+
 		section {
 			margin-bottom: 20px;
 

app/routes/wallet/components/Wallet.js

@@ -1,8 +1,8 @@
 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 Channels from './components/Channels'
 import styles from './Wallet.scss'
 
 class Wallet extends Component {

app/routes/wallet/components/components/Channels/components/Channel/index.js

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

app/routes/wallet/components/components/Channels/components/ChannelForm/index.js

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

app/routes/wallet/components/components/Channels/components/ChannelModal/index.js

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

app/routes/wallet/components/components/Channels/components/ClosedPendingChannel/index.js

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

app/routes/wallet/components/components/Channels/components/OpenPendingChannel/index.js

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

package.json

@@ -105,7 +105,8 @@
     ],
     "moduleDirectories": [
       "node_modules",
-      "app/node_modules"
+      "app/node_modules",
+      "app"
     ],
     "transform": {
       "^.+\\.js$": "babel-jest"

test/components/Channels.spec.js

@@ -0,0 +1,119 @@
+import React from 'react';
+import { shallow } from 'enzyme'
+
+import Channels from '../../app/components/Channels'
+import ChannelModal from '../../app/components/Channels/ChannelModal'
+import ChannelForm from '../../app/components/Channels/ChannelForm'
+import Channel from '../../app/components/Channels/Channel'
+import OpenPendingChannel from '../../app/components/Channels/OpenPendingChannel'
+import ClosedPendingChannel from '../../app/components/Channels/ClosedPendingChannel'
+
+const defaultProps = {
+  ticker: {},
+  peers: [],
+  channelsLoading: false,
+  modalChannel: {},
+  setChannel: () => {},
+  channelModalOpen: false,
+  channelForm: {},
+  setChannelForm: () => {},
+  allChannels: [],
+  openChannel: () => {},
+  closeChannel: () => {},
+  currentTicker: {},
+  explorerLinkBase: 'https://testnet.smartbit.com.au'
+}
+
+const channel_open = {
+  active: true,
+  capacity: '10000000',
+  chan_id: '1322138543153545216',
+  channel_point: '7efb80bf568cf55eb43ba439fdafea99b43f53493ec9ae7c0eae88de2d2b4577:0',
+  commit_fee: '8688',
+  commit_weight: '600',
+  fee_per_kw: '12000',
+  local_balance: '9991312',
+  num_updates: '0',
+  pending_htlcs: [],
+  remote_balance: '0',
+  remote_pubkey: '020178567c0f881b579a7ddbcd8ce362a33ebba2b3c2d218e667f7e3b390e40d4e',
+  total_satoshis_received: '0',
+  total_satoshis_sent: '0',
+  unsettled_balance: '0'
+}
+
+const channel_pending = {
+  capacity: '10000000',
+  channel_point: '7efb80bf568cf55eb43ba439fdafea99b43f53493ec9ae7c0eae88de2d2b4577:0',
+  local_balance: '9991312',
+  remote_balance: '0',
+  remote_node_pub: '020178567c0f881b579a7ddbcd8ce362a33ebba2b3c2d218e667f7e3b390e40d4e'
+}
+
+const pending_open_channels = {
+  blocks_till_open: 0,
+  channel: channel_pending,
+  commit_fee: '8688',
+  commit_weight: '600',
+  confirmation_height: 0,
+  fee_per_kw: '12000'
+}
+
+const pending_closing_channels = {
+  channel: channel_pending,
+  closing_txid: '8d623d1ddd32945cace3351d511df2b5be3e0f7c7e5622989d2fc0215e8a2a7e'
+}
+
+describe('Channels', () => {
+  describe('should show default components', () => {
+    const props = { ...defaultProps, channelsLoading: true }
+    const el = shallow(<Channels {...props} />)
+    it('should contain Modal and Form', () => {
+      expect(el.find(ChannelModal)).toHaveLength(1)
+      expect(el.find(ChannelForm)).toHaveLength(1)
+    })
+  })
+
+  describe('channels are loading', () => {
+    const props = { ...defaultProps, channelsLoading: true }
+    const el = shallow(<Channels {...props} />)
+    it('should display loading msg', () => {
+      expect(el.contains('Loading...')).toBe(true)
+    })
+  })
+
+  describe('channels are loaded', () => {
+    describe('no channels', () => {
+      const props = { ...defaultProps, allChannels: [] }
+      const el = shallow(<Channels {...props} />)
+      it('should not show channels or loading', () => {
+        expect(el.contains('Loading...')).toBe(false)
+        expect(el.find(Channel)).toHaveLength(0)
+      })
+    })
+
+    describe('channel is open-pending', () => {
+      const props = { ...defaultProps, allChannels: [pending_open_channels] }
+      const el = shallow(<Channels {...props} />)
+      it('should display open-pending', () => {
+        expect(el.find(OpenPendingChannel)).toHaveLength(1)
+      })
+    })
+
+    describe('channel is open', () => {
+      const props = { ...defaultProps, allChannels: [channel_open] }
+      const el = shallow(<Channels {...props} />)
+      it('should display open channel', () => {
+        expect(el.find(Channel)).toHaveLength(1)
+      })
+    })
+
+    describe('channel is closed-pending', () => {
+      const props = { ...defaultProps, allChannels: [pending_closing_channels] }
+      const el = shallow(<Channels {...props} />)
+      it('should display closed-pending', () => {
+        expect(el.find(ClosedPendingChannel)).toHaveLength(1)
+      })
+    })
+  })
+})