tests for actions

Author: Ashley Bibizadeh

Utils/index.js

@@ -1,4 +1,7 @@
 import checkPropTypes from 'check-prop-types';
+import { applyMiddleware, createStore } from 'redux';
+import rootReducer from './../src/reducers';
+import { middlewares } from './../src/createStore';
 
 export const findByTestAtrr = (component, attr) => {
     const wrapper = component.find(`[data-test='${attr}']`);
@@ -8,4 +11,9 @@ export const findByTestAtrr = (component, attr) => {
 export const checkProps = (component, expectedProps) => {
     const propsErr = checkPropTypes(component.propTypes, expectedProps, 'props', component.name);
     return propsErr;
+};
+
+export const testStore = (initialState) => {
+    const createStoreWithMiddleware = applyMiddleware(...middlewares)(createStore);
+    return createStoreWithMiddleware(rootReducer, initialState);
 };

package.json

@@ -3,6 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "axios": "^0.18.0",
     "node-sass": "^4.11.0",
     "prop-types": "^15.6.2",
     "react": "^16.7.0",
@@ -32,6 +33,7 @@
     "enzyme": "^3.8.0",
     "enzyme-adapter-react-16": "^1.7.1",
     "jest": "^23.6.0",
-    "jest-enzyme": "^7.0.1"
+    "jest-enzyme": "^7.0.1",
+    "moxios": "^0.4.0"
   }
 }

src/App.js

@@ -1,6 +1,10 @@
 import React, { Component } from 'react';
 import Header from './component/header';
 import Headline from './component/headline';
+import SharedButton from './component/button';
+import ListItem from './component/listItem';
+import { connect } from 'react-redux';
+import { fetchPosts } from './actions';
 import './app.scss';
 
 /* This const is not used within our app.
@@ -15,16 +19,54 @@ const tempArr = [{
 }];
 
 class App extends Component {
+
+  constructor(props){
+    super(props);
+    this.fetch = this.fetch.bind(this);
+  }
+
+  fetch(){
+    this.props.fetchPosts();
+  }
+
   render() {
+    const { posts } = this.props;
+
+    const configButton = {
+      buttonText: 'Get posts',
+      emitEvent: this.fetch
+    }
+
     return (
       <div className="App">
         <Header />
         <section className="main">
           <Headline header="Posts" desc="Click the button to render posts!" tempArr={tempArr} />
+          <SharedButton {...configButton} />
+          {posts.length > 0 &&
+            <div>
+              {posts.map((post, index) => {
+                const { title, body } = post;
+                const configListItem = {
+                  title,
+                  desc: body
+                };
+                return (
+                  <ListItem key={index} {...configListItem} />
+                )
+              })}
+            </div>
+          }
         </section>
       </div>
     );
   }
 }
 
-export default App;
+const mapStateToProps = state => {
+  return {
+    posts: state.posts
+  }
+}
+
+export default connect(mapStateToProps, {fetchPosts})(App);

src/_integrationTests/spec.js

@@ -0,0 +1,45 @@
+import moxios from 'moxios';
+import { testStore } from './../../Utils';
+import { fetchPosts } from './../actions';
+
+describe('fetchPosts action', () => {
+
+    beforeEach(() => {
+        moxios.install();
+    });
+
+    afterEach(() => {
+        moxios.uninstall();
+    });
+
+    test('Store is updated correctly', () => {
+
+        const expectedState = [{
+            title: 'Example title 1',
+            body: 'Some Text'
+        },{
+            title: 'Example title 2',
+            body: 'Some Text'
+        },{
+            title: 'Example title 3',
+            body: 'Some Text'
+        }];
+        const store = testStore();
+
+        moxios.wait(() => {
+            const request = moxios.requests.mostRecent();
+            request.respondWith({
+                status: 200,
+                response: expectedState
+            })
+        });
+
+        return store.dispatch(fetchPosts())
+        .then(() => {
+            const newState = store.getState();
+            expect(newState.posts).toBe(expectedState);
+        })
+        
+    });
+
+});

src/actions/index.js

@@ -0,0 +1,15 @@
+import { types } from './types';
+import axios from 'axios';
+
+export const fetchPosts = () => async (dispatch) => {
+    await axios.get('https://jsonplaceholder.typicode.com/posts?_limit=10')
+    .then(res => {
+        dispatch({
+            type: types.GET_POSTS,
+            payload: res.data
+        })
+    })
+    .catch(err => {
+        // console.log(err);
+    })
+};

src/component/button/index.js

@@ -0,0 +1,28 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+
+class SharedButton extends Component {
+
+    submitEvent(){
+        if(this.props.emitEvent){
+            this.props.emitEvent();
+        }
+    }
+
+    render(){
+        const { buttonText } = this.props;
+
+        return(
+            <button onClick={() => this.submitEvent()} data-test="buttonComponent">
+                {buttonText}
+            </button>
+        );
+    }
+}
+
+SharedButton.propTypes = {
+    buttonText: PropTypes.string,
+    emitEvent: PropTypes.func
+};
+
+export default SharedButton;

src/component/button/spec.js

@@ -0,0 +1,47 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+import { findByTestAtrr, checkProps } from './../../../Utils';
+import SharedButton from './index';
+
+describe('SharedButton Component', () => {
+
+    describe('Checking PropTypes', () => {
+
+        it('Should NOT throw a warning', () => {
+            const expectedProps = {
+                buttonText: 'Example Button Text',
+                emitEvent: () => {
+
+                }
+            };
+            const propsError = checkProps(SharedButton, expectedProps);
+            expect(propsError).toBeUndefined();
+        });
+
+    });
+
+    describe('Renders', () => {
+
+        let wrapper;
+        beforeEach(() => {
+            const props = {
+                buttonText: 'Example Button Text',
+                emitEvent: () => {
+
+                }
+            };
+            wrapper = shallow(<SharedButton {...props} />);
+        });
+
+        it('Should Render a button', () => {
+            const button = findByTestAtrr(wrapper, 'buttonComponent');
+            expect(button.length).toBe(1);
+        });
+
+
+    });
+
+
+
+
+});

src/component/button/styles.scss

@@ -0,0 +1,30 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+
+class ListItem extends Component {
+
+    render() {
+        const { title, desc } = this.props;
+
+        if(!title){
+            return null;
+        }
+
+        return(
+            <div data-test="listItemComponent">
+                <h2 data-test="componentTitle">{title}</h2>
+                <div data-test="componentDesc">
+                    {desc}
+                </div>
+            </div>
+        );
+    }
+
+}
+
+ListItem.propTypes = {
+    title: PropTypes.string,
+    desc: PropTypes.string
+}
+
+export default ListItem;

src/component/listItem/index.js

@@ -0,0 +1,70 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+import { findByTestAtrr, checkProps } from './../../../Utils';
+import ListItem from './index';
+
+describe('ListItem Component', () => {
+
+    describe('Checking PropTypes', () => {
+
+        it('Should NOT throw a warning', () => {
+            const expectedProps = {
+                title: 'Example Title',
+                desc: 'Some text'
+            };
+            const propsError = checkProps(ListItem, expectedProps);
+            expect(propsError).toBeUndefined();
+        });
+
+    });
+
+    describe('Component Renders', () => {
+
+        let wrapper;
+        beforeEach(() => {
+            const props = {
+                title: 'Example Title',
+                desc: 'Some text'
+            };
+            wrapper = shallow(<ListItem {...props} />);
+        });
+
+        it('Should renders without error', () => {
+            const component = findByTestAtrr(wrapper, 'listItemComponent');
+            expect(component.length).toBe(1);
+        });
+
+        it('Should render a title', () => {
+            const title = findByTestAtrr(wrapper, 'componentTitle');
+            expect(title.length).toBe(1);
+        });
+
+        it('Should render a desc', () => {
+            const desc = findByTestAtrr(wrapper, 'componentDesc');
+            expect(desc.length).toBe(1);
+        });
+
+
+    });
+
+
+    describe('Should NOT render', () => {
+
+        let wrapper;
+        beforeEach(() => {
+            const props = {
+                desc: 'Some text'
+            };
+            wrapper = shallow(<ListItem {...props} />);
+        });
+
+        it('Component is not rendered', () => {
+            const component = findByTestAtrr(wrapper, 'listItemComponent');
+            expect(component.length).toBe(0);
+        });
+
+    });
+
+
+});
+