Restructured code and added a test suite

src/components/SentimentAnalysisGraph.js

@@ -3,48 +3,45 @@ import { VictoryAxis } from 'victory';
 import { VictoryBar } from 'victory';
 import { VictoryChart } from 'victory';
 
-class SentimentAnalysisGraph extends Component {
+const width = 30;
+const barFontSize = 7;
+const axisFontSize = 25;
+export default class SentimentAnalysisGraph extends Component {
 	static displayName = 'SentimentAnalysisGraph';
 
-	state = {
-		getRandomValues: this.getData(),
-		data: {pos_value: 90, neg_value: 10}
+	static propTypes = {
+		posValue: React.PropTypes.number,
+		negValue: React.PropTypes.number,
+		barHeight: React.PropTypes.number
 	};
 
-	getData(){
-		setInterval(() => {
-			const rand = Math.floor(Math.random() * 100);
-			this.setState({
-				data:{pos_value: rand,
-					neg_value: 100 - rand}
-			});
-		}, 2500);
-	}
+	static defaultProps = {
+		posValue: 90,
+		negValue: 10,
+		barHeight: 250
+	};
 
 	render() {
 		return (
-			<VictoryChart domain={{y: [0, 100]}} height={220}>
+			<VictoryChart domain={{y: [0, 100]}} height={this.props.barHeight}>
 				<VictoryAxis
-					style={{
-						axisLabel: {fontSize: 25}}}
+					style={{axisLabel: {fontSize: axisFontSize}}}
 					tickValues={[' ', '', 'Positive', 'Negative', '', '']}
 					label = "Sentiment Anaylysis Report"/>
 
 				<VictoryBar
+					animate={{velocity: 0.01}}
+					labels={[this.props.posValue + '%', this.props.negValue + '%']}
 					style={{
-						data: {width: 30},
-						labels: {fontSize: 7}
+						data: {width: width},
+						labels: {fontSize: barFontSize}
 					}}
-					animate={{velocity: 0.01}}
-					padding={{top:20}}
 					data={[
-					{x: 3, y: this.state.data.pos_value},
-					{x: 4, y: this.state.data.neg_value}
-					]}
-					labels={[this.state.data.pos_value + '%', this.state.data.neg_value + '%']}/>
+						{x: 3, y: this.props.posValue},
+						{x: 4, y: this.props.negValue}
+					]}/>
 			</VictoryChart>
 		);
 	}
 }
 
-export default SentimentAnalysisGraph;

src/components/__tests__/SentimentAnalysisGraph.test.js

@@ -0,0 +1,32 @@
+import React from 'react';
+import SentimentAnalysisGraph from './../SentimentAnalysisGraph';
+import {shallow} from 'enzyme';
+
+describe('<SentimentAnalysisGraph />', () => {
+	it('Sum of positive value and negative value should be 100 with provided props', () => {
+		const wrapper = shallow(<SentimentAnalysisGraph posValue={60} negValue={40}/>);
+		const posValue = wrapper.node.props.children[1].props.data[0].y;
+		const negValue = wrapper.node.props.children[1].props.data[1].y;
+		expect(posValue + negValue).toEqual(100);
+	});
+
+	it('Default positive value and negative value shoule be 90 and 10 respectively', () => {
+		const wrapper = shallow(<SentimentAnalysisGraph />);
+		const posValue = wrapper.node.props.children[1].props.data[0].y;
+		const negValue = wrapper.node.props.children[1].props.data[1].y;
+		expect(posValue).toEqual(90);
+		expect(negValue).toEqual(10);
+	});
+
+	it('Default bar height should be 250', () => {
+		const wrapper = shallow(<SentimentAnalysisGraph />);
+		const barHeight = wrapper.node.props.height;
+		expect(barHeight).toEqual(250);
+	});
+
+	it('Bar height should be 350 with provided prop barHeight = 350', () => {
+		const wrapper = shallow(<SentimentAnalysisGraph barHeight={350}/>);
+		const barHeight = wrapper.node.props.height;
+		expect(barHeight).toEqual(350);
+	});
+});