Add some async api calls to redux.

Author: Jeff Jia

app/__tests__/index-test.js

@@ -11,7 +11,7 @@ describe('Index', ()=> {
 
   var mockStore;
   beforeEach(()=> {
-    mockStore = new MockStore();
+    mockStore = new MockStore({text:'text'});
     sinon.stub(StoreFactory, 'create').returns(mockStore)
   });
 

app/__tests__/main-test.js

@@ -2,6 +2,7 @@ const {View,Text,TouchableHighlight} = React;
 import StoreFactory from '../storeFactory'
 import {Provider} from 'react-redux'
 import ActionTypes from '../actions/actionTypes'
+import Actions from '../actions/actions'
 import WrappedMain, {Main} from '../main.js';
 
 describe('Wrapped Main View', ()=> {
@@ -12,16 +13,19 @@ describe('Wrapped Main View', ()=> {
     stateText = 'Wrapper text';
     store = StoreFactory.create();
     sinon.stub(store, 'getState').returns({text: stateText});
-    sinon.spy(store, 'dispatch');
+    sinon.stub(store, 'dispatch');
+
+    sinon.spy(Actions, 'getAPIText');
     var mainWrapper = mount(<Provider store={store}><WrappedMain/></Provider>);
     main = mainWrapper.find(Main);
   });
 
   afterEach(()=> {
+    Actions.getAPIText.restore();
     store.getState.restore();
     store.dispatch.restore();
   });
-  
+
   it('It translates correct store state to properties', ()=> {
     expect(main.prop('text')).to.eql(stateText);
   });
@@ -38,7 +42,15 @@ describe('Wrapped Main View', ()=> {
     var dispatch = store.dispatch.lastCall.args[0];
     expect(dispatch.type).to.equal(ActionTypes.CHANGE_TEXT);
     expect(dispatch.text).to.equal('Hello Text');
+  });
 
+  it('It provides getAPIText property which dispatches getAPIText action', ()=> {
+    var getAPITextFunction = main.prop('getAPIText');
+
+    getAPITextFunction();
+    var dispatch = store.dispatch.lastCall;
+    //dispatch.args[0]();
+    expect(Actions.getAPIText.called).to.equal(true);
   });
 });
 
@@ -49,7 +61,7 @@ describe('Main View', function () {
 
     before(()=> {
       textValue = 'here is the text';
-      main = mount(<Main text={textValue} changeText={()=>{}}/>);
+      main = mount(<Main text={textValue} changeText={()=>{}} getAPIText={()=>{}}/>);
     });
 
     it('Has a view with some text', ()=> {
@@ -58,35 +70,51 @@ describe('Main View', function () {
       expect(text.text()).to.equal(textValue);
     });
 
-    it('Has a button', ()=> {
+    it('Has a push me button', ()=> {
       var view = main.find(View);
-      var button = view.find(TouchableHighlight);
+      var button = view.find(TouchableHighlight).at(0);
       var buttonText = button.find(Text);
       expect(buttonText.text()).to.equal('Push Me');
     });
+
+    it('Has a Get Text From server button', ()=> {
+      var view = main.find(View);
+      var button = view.find(TouchableHighlight).at(1);
+      var buttonText = button.find(Text);
+      expect(buttonText.text()).to.equal('Get Text from server');
+    });
   });
 
   describe('Interaction', () => {
-    it('Fires on click property on button press sends Hello React to changeText method', ()=> {
+    it('Fires changeText property on button press sends Hello React to changeText method', ()=> {
       var changeTextSpy = sinon.spy();
       var text = '';
-      var main = mount(<Main text={text} changeText={changeTextSpy}/>);
-      var button = main.find(TouchableHighlight);
+      var main = mount(<Main text={text} changeText={changeTextSpy} getAPIText={()=>{}}/>);
+      var button = main.find(TouchableHighlight).at(0);
 
       button.prop('onPress')();
       expect(changeTextSpy.called).to.equal(true);
       expect(changeTextSpy.lastCall.args).to.eql(['Hello React']);
     });
 
-    it('Fires on click property on button press sends Goodbye React to changeText method if text prop is Hello React', ()=> {
+    it('Fires changeText property on button press sends Goodbye React to changeText method if text prop is Hello React', ()=> {
       var changeTextSpy = sinon.spy();
       var text = 'Hello React';
-      var main = mount(<Main text={text} changeText={changeTextSpy}/>);
-      var button = main.find(TouchableHighlight);
+      var main = mount(<Main text={text} changeText={changeTextSpy} getAPIText={()=>{}}/>);
+      var button = main.find(TouchableHighlight).at(0);
 
       button.prop('onPress')();
       expect(changeTextSpy.called).to.equal(true);
       expect(changeTextSpy.lastCall.args).to.eql(['Goodbye React']);
     });
+
+    it('Fires getAPIText property on button pressed', ()=> {
+      var apiTextSpy = sinon.spy();
+      var main = mount(<Main text={''} changeText={()=>{}} getAPIText={apiTextSpy}/>);
+      var button = main.find(TouchableHighlight).at(1);
+
+      button.prop('onPress')();
+      expect(apiTextSpy.called).to.equal(true);
+    });
   });
 });

app/actions/__tests__/actions-test.js

@@ -1,12 +1,37 @@
 import actions from '../actions';
 import ActionTypes from '../actionTypes';
-
-describe('Actions View', ()=> {
+import FetchMock from 'fetch-mock';
+describe('Actions', ()=> {
   describe('changeText', ()=> {
     it('Returns the correct payload', ()=> {
       var newText = 'Here is the next text';
       var payload = actions.changeText(newText);
       expect(payload).to.eql({type: ActionTypes.CHANGE_TEXT, text: newText});
     });
-  })
+  });
+
+  describe('gotAPIText', ()=> {
+    it('Returns the correct payload', ()=> {
+      var response = {response: 'stuff'};
+      var payload = actions.gotAPIText(response);
+      expect(payload).to.eql({type: ActionTypes.GOT_API_TEXT, response: response});
+    });
+  });
+
+  describe('getAPIText', ()=> {
+    it('Calls fetch to the api, and dispatches got APIText on success', (done)=> {
+
+      var spy = sinon.spy();
+      var responseJson = {text: 'sometext'};
+      FetchMock.mock('http://localhost:3000/', responseJson);
+
+      actions.getAPIText()(spy).then(()=>{
+        expect(FetchMock.called('http://localhost:3000/')).to.equal(true);
+        expect(spy.calledWith(responseJson));
+        FetchMock.restore();
+        done();
+      });
+
+    });
+  });
 });

app/actions/actionTypes.js

@@ -1,3 +1,4 @@
 const CHANGE_TEXT = 'CHANGE_TEXT';
-
-module.exports ={CHANGE_TEXT};
+const GET_API_TEXT='GET_API_TEXT';
+const GOT_API_TEXT='GOT_API_TEXT';
+module.exports ={CHANGE_TEXT,GET_API_TEXT,GOT_API_TEXT};

app/actions/actions.js

@@ -1,7 +1,22 @@
 import ActionTypes from './actionTypes.js';
 
-function changeText(text){
+function changeText(text) {
   return {type: ActionTypes.CHANGE_TEXT, text: text};
 }
+function getAPIText() {
+  return ((dispatch)=> {
+    return fetch('http://localhost:3000/')
+      .then((response)=> {
+        return response.json();
+      }).then((json)=> {
+        dispatch(gotAPIText(json));
+      });
+  })
+}
+
+function gotAPIText(response) {
+
+  return {type: ActionTypes.GOT_API_TEXT, response: response}
+}
 
-module.exports = {changeText};
+module.exports = {changeText, getAPIText, gotAPIText};

app/main.js

@@ -5,7 +5,7 @@
 'use strict';
 import {bindActionCreators} from 'redux';
 import { connect} from 'react-redux';
-import {changeText} from './actions/actions';
+import {changeText, getAPIText} from './actions/actions';
 import React,
   {
   Component,
@@ -31,12 +31,12 @@ export class Main extends Component {
     }
   }
 
-
   render() {
     return (
       <View style={styles.container}>
         <Text>{this.props.text}</Text>
         <TouchableHighlight onPress={this._updateText}><Text>Push Me</Text></TouchableHighlight>
+        <TouchableHighlight onPress={this.props.getAPIText}><Text>Get Text from server</Text></TouchableHighlight>
       </View>
     );
   }
@@ -73,7 +73,7 @@ const mapStateToProps = (state) => {
 };
 
 const mapDispatchToProps = (dispatch) => {
-  return bindActionCreators({changeText}, dispatch);
+  return bindActionCreators({changeText, getAPIText}, dispatch);
 };
 
 export default connect(mapStateToProps, mapDispatchToProps)(Main);

app/reducers/reducers.js

@@ -5,6 +5,8 @@ function text(state = 'Hello Tests', action = {type: 'NONE'}) {
   switch (action.type) {
     case ActionTypes.CHANGE_TEXT:
       return action.text;
+    case ActionTypes.GOT_API_TEXT:
+      return action.response.text;
     default:
       return state
   }

app/storeFactory.js

@@ -1,8 +1,8 @@
-import { createStore } from 'redux';
+import { createStore, applyMiddleware} from 'redux';
 import reducer from './reducers/reducers'
-
+import thunk from 'redux-thunk'
 export default {
   create: (initialState)=> {
-    return createStore(reducer, initialState);
+    return createStore(reducer, initialState, applyMiddleware(thunk));
   }
 };

package.json

@@ -16,10 +16,14 @@
     "babel-preset-react": "^6.3.13",
     "chai": "^3.5.0",
     "enzyme": "^1.5.0",
+    "es6-promise": "^3.1.2",
+    "fetch-mock": "^4.1.1",
     "ignore-styles": "^1.2.0",
     "mocha": "^2.4.5",
+    "nock": "^7.2.2",
     "react-addons-test-utils": "^0.14.3",
     "react-dom": "^0.14.3",
+    "redux-thunk": "^2.0.1",
     "sinon": "^1.17.3"
   }
 }