Testing and creating a PlaybackControls container and Button component

Author: mattjburrows

app/Player.jsx

@@ -0,0 +1,27 @@
+'use strict';
+
+import React, { Component } from 'react';
+import { Provider } from 'react-redux';
+import configureStore from './store/configurePlayerStore';
+import PlaybackControls from './containers/PlaybackControls.jsx';
+
+const store = configureStore();
+
+class Player extends Component {
+  render() {
+    return <Provider store={store}>
+      <div>
+        <video>
+          <source src={this.props.src} />
+        </video>
+        <PlaybackControls />
+      </div>
+    </Provider>;
+  }
+}
+
+Player.propTypes = {
+  src: React.PropTypes.string
+};
+
+export default Player;

app/components/Button.jsx

@@ -0,0 +1,22 @@
+'use strict';
+
+import React, { Component } from 'react';
+
+class Button extends Component {
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    return (
+      <button onClick={this.props.onClick}>{this.props.text}</button>
+    );
+  }
+}
+
+Button.propTypes = {
+  onClick: React.PropTypes.func,
+  text: React.PropTypes.string
+};
+
+export default Button;

app/containers/PlaybackControls.jsx

@@ -0,0 +1,56 @@
+'use strict';
+
+import React, { Component } from 'react';
+
+import { bindActionCreators } from 'redux';
+import { connect } from 'react-redux';
+
+import { isPlaying } from '../actions/isPlaying';
+import { hasStopped } from '../actions/hasStopped';
+
+import Button from '../components/Button.jsx';
+
+export class PlaybackControls extends Component {
+  _onPlayButtonClick() {
+    this.props.isPlayingAction(!this.props.isPlaying);
+  }
+
+  _onStopButtonClick() {
+    this.props.hasStoppedAction(true);
+  }
+
+  render() {
+    const text = this.props.isPlaying ? 'pause' : 'play';
+
+    return (
+      <div>
+        <Button onClick={this._onPlayButtonClick.bind(this)} text={text} />
+        <Button onClick={this._onStopButtonClick.bind(this)} text="stop" />
+      </div>
+    );
+  }
+}
+
+PlaybackControls.propTypes = {
+  isPlaying: React.PropTypes.bool,
+  isPlayingAction: React.PropTypes.func,
+  hasStoppedAction: React.PropTypes.func
+};
+
+function mapStateToProps(state) {
+  return {
+    isPlaying: state.playback.isPlaying
+  };
+}
+
+function mapDispatchToProps(dispatch) {
+  return {
+    isPlayingAction: bindActionCreators(isPlaying, dispatch),
+    hasStoppedAction: bindActionCreators(hasStopped, dispatch)
+  };
+}
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(PlaybackControls);

app/containers/Player.jsx

@@ -2,11 +2,11 @@
 
 import React from 'react';
 import ReactDOM from 'react-dom';
-import Player from './containers/Player.jsx';
+import Player from './Player.jsx';
 
 ReactDOM.render(
   React.createElement(Player, {
-    src: '/SampleVideo_640x360_10mb.mp4'
+    src: './SampleVideo_640x360_10mb.mp4'
   }),
   document.getElementById('app')
 );

app/index.js

@@ -0,0 +1,28 @@
+'use strict';
+
+import React from 'react';
+import assert from 'assert';
+import { shallow } from 'enzyme';
+import sinon from 'sinon';
+
+import Button from '../../app/components/Button.jsx';
+
+describe('<Button />', () => {
+  it('calls the onClick prop when the button is clicked', () => {
+    const onClickSpy = sinon.spy();
+    const wrapper = shallow(
+      <Button onClick={onClickSpy} />
+    );
+
+    wrapper.find('button').simulate('click');
+    assert.equal(onClickSpy.calledOnce, true);
+  });
+  it('contains the text prop', () => {
+    const text = 'Foo bar';
+    const wrapper = shallow(
+      <Button text={text} />
+    );
+    
+    assert.equal(wrapper.text(), text);
+  });
+});

test/components/Button.js

@@ -0,0 +1,53 @@
+'use strict';
+
+import React from 'react';
+import assert from 'assert';
+import { shallow, render } from 'enzyme';
+import sinon from 'sinon';
+
+import { PlaybackControls } from '../../app/containers/PlaybackControls.jsx';
+
+describe('<PlaybackControls />', () => {
+  it('should render 2 <Button /> components', () => {
+    const wrapper = shallow(<PlaybackControls />);
+    assert.equal(wrapper.find('Button').length, 2);
+  });
+
+  describe('play/pause <Button />', () => {
+    it('sets play as the button text when isPlaying === false', () => {
+      const wrapper = render(<PlaybackControls isPlaying={false} />);
+
+      assert.equal(wrapper.find('button:nth-child(1)').text(), 'play');
+    });
+
+    it('sets pause as the button text when isPlaying === true', () => {
+      const wrapper = render(<PlaybackControls isPlaying={true} />);
+
+      assert.equal(wrapper.find('button:nth-child(1)').text(), 'pause');
+    });
+
+    it('calls the isPlayingAction with true when the button is clicked and isPlaying === false', () => {
+      const isPlayingActionSpy = sinon.spy();
+      const wrapper = shallow(<PlaybackControls isPlaying={false} isPlayingAction={isPlayingActionSpy} />);
+
+      wrapper.find('Button').first().simulate('click');
+      assert(isPlayingActionSpy.calledWith(true));
+    });
+  });
+
+  describe('stop <Button />', () => {
+    it('sets stop as the button text', () => {
+      const wrapper = render(<PlaybackControls isPlaying={true} />);
+
+      assert.equal(wrapper.find('button:nth-child(2)').text(), 'stop');
+    });
+
+    it('calls the hasStoppedAction with true when the button is clicked', () => {
+      const hasStoppedActionSpy = sinon.spy();
+      const wrapper = shallow(<PlaybackControls isPlaying={true} hasStoppedAction={hasStoppedActionSpy} />);
+
+      wrapper.find('Button').at(1).simulate('click');
+      assert(hasStoppedActionSpy.calledWith(true));
+    });
+  });
+});

test/containers/PlaybackControls.js

@@ -17,6 +17,7 @@ describe('playbackState', () => {
         type: IS_PLAYING,
         isPlaying: true
       });
+
       assert.strictEqual(state.isPlaying, true);
       assert.strictEqual(state.isPaused, false);
       assert.strictEqual(state.hasStopped, false);
@@ -27,6 +28,7 @@ describe('playbackState', () => {
         type: IS_PLAYING,
         isPlaying: false
       });
+
       assert.strictEqual(state.isPlaying, false);
     });
   });
@@ -41,6 +43,7 @@ describe('playbackState', () => {
         type: IS_PAUSED,
         isPaused: true
       });
+
       assert.strictEqual(state.isPlaying, false);
       assert.strictEqual(state.isPaused, true);
       assert.strictEqual(state.hasStopped, false);
@@ -51,6 +54,7 @@ describe('playbackState', () => {
         type: IS_PAUSED,
         isPaused: false
       });
+
       assert.strictEqual(state.isPaused, false);
     });
   });
@@ -65,6 +69,7 @@ describe('playbackState', () => {
         type: HAS_STOPPED,
         hasStopped: true
       });
+
       assert.strictEqual(state.isPlaying, false);
       assert.strictEqual(state.isPaused, false);
       assert.strictEqual(state.hasStopped, true);
@@ -75,6 +80,7 @@ describe('playbackState', () => {
         type: HAS_STOPPED,
         hasStopped: false
       });
+      
       assert.strictEqual(state.hasStopped, false);
     });
   });