Creating a progress bar

Author: mattjburrows

app/components/Progress.jsx

@@ -0,0 +1,32 @@
+'use strict';
+
+import React, { Component } from 'react';
+
+function workOutProgressValue(duration, currentTime) {
+  const difference = (duration - currentTime);
+  const remainingTime = (duration - difference);
+  const progressPercentage = (remainingTime / duration) * 100;
+
+  return Math.ceil(progressPercentage);
+}
+
+class Progress extends Component {
+
+  render() {
+    const progress = workOutProgressValue(this.props.duration, this.props.currentTime);
+
+    return (<progress value={progress} max={this.props.max}></progress>);
+  }
+}
+
+Progress.defaultProps = {
+  max: 100
+};
+
+Progress.propTypes = {
+  duration: React.PropTypes.number,
+  currentTime: React.PropTypes.number,
+  max: React.PropTypes.number
+};
+
+export default Progress;

test/components/Progress.js

@@ -0,0 +1,27 @@
+'use strict';
+
+import React from 'react';
+import assert from 'assert';
+import { shallow } from 'enzyme';
+
+import Progress from '../../app/components/Progress.jsx';
+
+describe('<Progress />', () => {
+  it('adds 100 as the max value on the progress element', () => {
+    const wrapper = shallow(
+      <Progress />
+    );
+
+    assert.equal(wrapper.find('progress').prop('max'), 100);
+  });
+
+  it('adds 35 as the value on the progress tag', () => {
+    const currentTime = 666;
+    const duration = 2000;
+    const wrapper = shallow(
+      <Progress currentTime={currentTime} duration={duration} />
+    );
+
+    assert.equal(wrapper.find('progress').prop('value'), 34);
+  });
+});