Skip to content

Commit

Permalink
Merge pull request #261 from suisha/peers-viewer-spec
Browse files Browse the repository at this point in the history
peers-viewer spec
  • Loading branch information
dignifiedquire committed Feb 27, 2016
2 parents 2e52464 + cea31c9 commit 12d81bf
Show file tree
Hide file tree
Showing 2 changed files with 202 additions and 57 deletions.
111 changes: 54 additions & 57 deletions app/scripts/components/peers-viewer.js
Original file line number Diff line number Diff line change
Expand Up @@ -7,61 +7,60 @@ import CopyToClipboard from 'react-copy-to-clipboard'
import Identicon from './identicon'
import Flag from './flag'

const locationDataGetter = (dataKey, rowData) => {
return rowData.location
}

const locationCellRenderer = (location, cellDataKey, rowData, rowIndex, columnData) => {
if (!location || !location.country_code) return '-'
let text = ''

const {city, country_name: country, country_code: code} = location
if (city) text += city
if (city && country) text += ', '
if (country) text += country

return (
<div>
<Flag country={code} />
{text}
</div>
)
}

const idCellRenderer = (id, cellDataKey, rowData, rowIndex, columnData) => {
const tp = <Tooltip id={id}>{id}</Tooltip>
return (
<OverlayTrigger placement='top' overlay={tp}>
<CopyToClipboard text={id}>
<div className='id-entry-wrapper'>
<Identicon id={id.substring(2)} />
{id.substring(2, 10)}
</div>
</CopyToClipboard>
</OverlayTrigger>
)
}

const agentCellRenderer = (agent, cellDataKey, rowData, rowIndex, columnData) => {
if (!agent) return '-'

const [base, version] = agent.split('/')

return (
<span>
<strong>{base}</strong>
/{version}
</span>
)
}

export default class PeersViewer extends Component {
static propTypes = {
ids: PropTypes.array.isRequired,
details: PropTypes.object,
locations: PropTypes.object
};

_locationDataGetter = (dataKey, rowData) => {
return rowData.location
}

_idCellRenderer = (id) => {
const tp = <Tooltip id={id}>{id}</Tooltip>
return (
<OverlayTrigger placement='top' overlay={tp}>
<CopyToClipboard text={id}>
<div className='id-entry-wrapper'>
<Identicon id={id.substring(2)} />
{id.substring(2, 10)}
</div>
</CopyToClipboard>
</OverlayTrigger>
)
}

_locationCellRenderer = (location) => {
if (!location || !location.country_code) return '-'
let text = ''

const {city, country_name: country, country_code: code} = location
if (city) text += city
if (city && country) text += ', '
if (country) text += country

return (
<div>
<Flag country={code} />
{text}
</div>
)
}

_agentCellRenderer = (agent) => {
if (!agent) return '-'

const [base, version] = agent.split('/')

return (
<span>
<strong>{base}</strong>
/{version}
</span>
)
}
_noRowsRenderer = () => {
return (
<div className='peers-empty'>
Expand All @@ -70,14 +69,12 @@ export default class PeersViewer extends Component {
)
};

_getDatum = (list, index) => {
return list[index]
};

_createTable = (list) => {
return ({width, height}) => {
const rowsCount = list.length
const rowGetter = (index) => this._getDatum(list, index)
const rowGetter = (index) => {
return list[index]
}

return (
<FlexTable
Expand All @@ -96,7 +93,7 @@ export default class PeersViewer extends Component {
<FlexColumn
label='ID'
cellClassName='id-entry'
cellRenderer={idCellRenderer}
cellRenderer={this._idCellRenderer}
dataKey='id'
width={150}
/>
Expand All @@ -108,16 +105,16 @@ export default class PeersViewer extends Component {
/>
<FlexColumn
label='Location'
cellDataGetter={locationDataGetter}
cellRenderer={locationCellRenderer}
cellDataGetter={this._locationDataGetter}
cellRenderer={this._locationCellRenderer}
cellClassName='location-entry'
dataKey='location'
width={250}
/>
<FlexColumn
label='Agent'
cellClassName='agent-entry'
cellRenderer={agentCellRenderer}
cellRenderer={this._agentCellRenderer}
dataKey='AgentVersion'
width={250}
/>
Expand Down
148 changes: 148 additions & 0 deletions test/components/peers-viewer.spec.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,148 @@
import {expect} from 'chai'
import {render, shallow} from 'enzyme'
import React from 'react'
import sinon from 'sinon'

import PeersViewer from '../../app/scripts/components/peers-viewer'

describe('PeersViewer', () => {
const peersViewer = new PeersViewer()

describe('idCellRenderer', () => {
it('should render with correct id strings', () => {
const id = 'randomlonghashstringlol'

const el = shallow(peersViewer._idCellRenderer(id))
expect(el.find('Identicon').props().id).to.equal(id.substring(2))

// first child is Identicon. Second child would be element text
expect(el.find('.id-entry-wrapper').props().children[1])
.to.equal(id.substring(2, 10))
})
})

describe('locationCellRenderer', () => {
it('should render with correct location values', () => {
const location = {
country_code: 'country_code',
city: 'city',
country_name: 'country_name'
}

const el = shallow(peersViewer._locationCellRenderer(location))
expect(el.find('Flag').props().country).to.equal(location.country_code)
// Flag is first child of this component's div. text is second

const text = location.city + ', ' + location.country_name
expect(el.find('div').props().children[1]).to.equal(text)
})
})

describe('agentCellRenderer', () => {
it('should render with correct base and version', () => {
const agent = 'base/version'

const el = shallow(peersViewer._agentCellRenderer(agent))

// the strong element in this component has no children
expect(el.find('strong').props().children)
.to.equal('base')

// span's children: strong, forward-slash, version
expect(el.find('span').props().children[2])
.to.equal('version')
})

it('should return a dash if no agent', () => {
expect(peersViewer._agentCellRenderer()).to.equal('-')
})
})

describe('_createTable', () => {
it('should render with correct attributes', () => {
const list = [1]

const el = shallow(peersViewer._createTable(list)({
width: 1000,
height: 2000
}))

const inst = el.instance()
expect(inst.props.width).to.equal(1000)
expect(inst.props.height).to.equal(2000)
expect(inst.props.rowsCount).to.equal(list.length)
})

it('should have the correct # of rows and columns', () => {
const list = [1, 2]
const s = sinon.sandbox.create()

s.stub(peersViewer, '_idCellRenderer').returns(<div className={'foo'}/>)
s.stub(peersViewer, '_locationDataGetter').returns(<div className={'foo'}/>)
s.stub(peersViewer, '_locationCellRenderer').returns(<div className={'foo'}/>)
s.stub(peersViewer, '_agentCellRenderer').returns(<div className={'foo'}/>)

const el = render(peersViewer._createTable(list)({
width: 1000,
height: 2000
}))

const fields = [
'.id-entry',
'.address-entry',
'.location-entry',
'.agent-entry'
]

fields.forEach((v) => {
// 2 rows means 2 of each column
expect(el.find(v).length).to.equal(2)
})

s.restore()
})
})

describe('shouldComponentUpdate', () => {
it('should return true if nextProps and this.props are different', () => {
const nextProps = 'nextProps'

expect(peersViewer.shouldComponentUpdate(nextProps)).to.equal(true)
})
})

describe('render', () => {
const locations = {
id: {
city: 'city'
}
}

const ids = [{
address: 'address',
id: 'id',
location: location
}]

it('should an AutoSizer element', () => {
// ids is an array of objects with fields address, id, location
// Details is peerId:
const details = {
id: {
address: 'address2',
id: 'id',
location: location
}
}

// Details is peerId:
const el = shallow(<PeersViewer
ids={ids}
details={details}
locations={locations}/>
)

expect(el.find('AutoSizer').length).to.equal(1)
})
})
})

0 comments on commit 12d81bf

Please sign in to comment.