feat(test): add ava test runner with some tests

Author: somus

.eslintrc

@@ -1,6 +1,12 @@
 {
-  "extends": "airbnb",
+  "extends": [
+    "airbnb",
+    "plugin:ava/recommended"
+  ],
   "parser": "babel-eslint",
+  "plugins": [
+    "ava"
+  ],
   "env": {
     "browser": true,
     "node": true,
@@ -18,7 +24,11 @@
      "arrow-body-style": [0],
      "react/jsx-no-bind": [0]
   },
-  "globals": {
-    "webpackIsomorphicTools": true
+  "settings": {
+    "import/resolver": {
+      "webpack": {
+        "config": "./webpack.config.dev.js"
+      }
+    }
   }
 }

.gitignore

@@ -6,3 +6,5 @@ dump.rdb
 .vscode/
 public/*
 dist
+coverage/
+.nyc_output/

client/modules/App/App.js

@@ -13,7 +13,7 @@ import Footer from './components/Footer/Footer';
 // Import Actions
 import { toggleAddPost } from './AppActions';
 
-class App extends Component {
+export class App extends Component {
   constructor(props) {
     super(props);
     this.state = { isMounted: false };
@@ -30,7 +30,7 @@ class App extends Component {
   render() {
     return (
       <div>
-        {this.state.isMounted && !window.devToolsExtension && <DevTools />}
+        {this.state.isMounted && !window.devToolsExtension && process.env.NODE_ENV === 'development' && <DevTools />}
         <div>
           <Helmet
             title="MERN Starter - Blog App"

client/modules/App/__tests__/App.spec.js

@@ -0,0 +1,64 @@
+import React from 'react';
+import test from 'ava';
+import sinon from 'sinon';
+import { shallow, mount } from 'enzyme';
+import { App } from '../App';
+import styles from '../App.css';
+import { toggleAddPost } from '../AppActions';
+
+const children = <h1>Test</h1>;
+const dispatch = sinon.spy();
+const props = {
+  children,
+  dispatch,
+};
+
+test('renders properly', t => {
+  const wrapper = shallow(
+    <App {...props} />
+  );
+
+  // t.is(wrapper.find('Helmet').length, 1);
+  t.is(wrapper.find('Header').length, 1);
+  t.is(wrapper.find('Footer').length, 1);
+  t.is(wrapper.find('Header').prop('toggleAddPost'), wrapper.instance().toggleAddPostSection);
+  t.truthy(wrapper.find('Header + div').hasClass(styles.container));
+  t.truthy(wrapper.find('Header + div').children(), children);
+});
+
+test('calls componentDidMount', t => {
+  sinon.spy(App.prototype, 'componentDidMount');
+  mount(
+    <App {...props} />,
+    {
+      context: {
+        router: {
+          isActive: sinon.stub().returns(true),
+          push: sinon.stub(),
+          replace: sinon.stub(),
+          go: sinon.stub(),
+          goBack: sinon.stub(),
+          goForward: sinon.stub(),
+          setRouteLeaveHook: sinon.stub(),
+          createHref: sinon.stub(),
+        },
+      },
+      childContextTypes: {
+        router: React.PropTypes.object,
+      },
+    },
+  );
+
+  t.truthy(App.prototype.componentDidMount.calledOnce);
+  App.prototype.componentDidMount.restore();
+});
+
+test('calling toggleAddPostSection dispatches toggleAddPost', t => {
+  const wrapper = shallow(
+    <App {...props} />
+  );
+
+  wrapper.instance().toggleAddPostSection();
+  t.truthy(dispatch.calledOnce);
+  t.truthy(dispatch.calledWith(toggleAddPost()));
+});

client/modules/App/__tests__/AppActions.spec.js

@@ -0,0 +1,5 @@
+import test from 'ava';
+import { actionTest } from 'redux-ava';
+import { TOGGLE_ADD_POST, toggleAddPost } from '../AppActions';
+
+test('should return the correct type for toggleAddPost', actionTest(toggleAddPost, null, { type: TOGGLE_ADD_POST }));

client/modules/App/__tests__/AppReducer.spec.js

@@ -0,0 +1,11 @@
+import test from 'ava';
+import { reducerTest } from 'redux-ava';
+import appReducer from '../AppReducer';
+import { toggleAddPost } from '../AppActions';
+
+test('action for TOGGLE_ADD_POST is working', reducerTest(
+  appReducer,
+  { showAddPost: false },
+  toggleAddPost(),
+  { showAddPost: true },
+));

client/modules/App/__tests__/Components/Footer.spec.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import test from 'ava';
+import { shallow } from 'enzyme';
+import Footer from '../../components/Footer/Footer';
+
+test('renders the footer properly', t => {
+  const wrapper = shallow(
+    <Footer />
+  );
+
+  t.is(wrapper.find('p').length, 2);
+  t.is(wrapper.find('p').first().text(), '© 2016 · Hashnode · LinearBytes Inc.');
+});

client/modules/App/__tests__/Components/Header.spec.js

@@ -0,0 +1,56 @@
+import React from 'react';
+import test from 'ava';
+import sinon from 'sinon';
+import { shallow } from 'enzyme';
+import Header from '../../components/Header/Header';
+
+test('renders the header properly', t => {
+  const router = {
+    isActive: sinon.stub().returns(true),
+  };
+  const wrapper = shallow(
+    <Header toggleAddPost={() => {}} />,
+    {
+      context: {
+        router,
+      },
+    }
+  );
+
+  t.regex(wrapper.find('Link').first().html(), /MERN Starter Blog/);
+  t.is(wrapper.find('a').length, 1);
+});
+
+test('doesn\'t add post in pages other than home', t => {
+  const router = {
+    isActive: sinon.stub().returns(false),
+  };
+  const wrapper = shallow(
+    <Header toggleAddPost={() => {}} />,
+    {
+      context: {
+        router,
+      },
+    }
+  );
+
+  t.is(wrapper.find('a').length, 0);
+});
+
+test('toggleAddPost called properly', t => {
+  const router = {
+    isActive: sinon.stub().returns(true),
+  };
+  const toggleAddPost = sinon.spy();
+  const wrapper = shallow(
+    <Header toggleAddPost={toggleAddPost} />,
+    {
+      context: {
+        router,
+      },
+    }
+  );
+
+  wrapper.find('a').first().simulate('click');
+  t.truthy(toggleAddPost.calledOnce);
+});

client/modules/Post/PostActions.js

@@ -5,8 +5,6 @@ const baseURL = typeof window === 'undefined' ? process.env.BASE_URL || (`http:/
 
 // Export Constants
 export const ADD_POST = 'ADD_POST';
-export const CHANGE_SELECTED_POST = 'CHANGE_SELECTED_POST';
-export const ADD_POST_REQUEST = 'ADD_POST_REQUEST';
 export const ADD_POSTS = 'ADD_POSTS';
 export const ADD_SELECTED_POST = 'ADD_SELECTED_POST';
 export const DELETE_POST = 'DELETE_POST';

client/modules/Post/PostReducer.js

@@ -1,4 +1,4 @@
-import { ADD_POST, CHANGE_SELECTED_POST, ADD_POSTS, ADD_SELECTED_POST, DELETE_POST } from './PostActions';
+import { ADD_POST, ADD_POSTS, ADD_SELECTED_POST, DELETE_POST } from './PostActions';
 
 const initialState = { posts: [], post: null };
 
@@ -16,12 +16,6 @@ const PostReducer = (state = initialState, action) => {
         }, ...state.posts],
         post: state.post };
 
-    case CHANGE_SELECTED_POST :
-      return {
-        posts: state.posts,
-        post: action.slug,
-      };
-
     case ADD_POSTS :
       return {
         posts: action.posts,

client/modules/Post/__tests__/PostActions.spec.js

@@ -0,0 +1,33 @@
+import test from 'ava';
+import { actionTest } from 'redux-ava';
+import {
+  ADD_POST,
+  ADD_SELECTED_POST,
+  DELETE_POST,
+  ADD_POSTS,
+  addPost,
+  addSelectedPost,
+  deletePost,
+  addPosts,
+} from '../PostActions';
+
+const post = { name: 'Prashant', title: 'Hello Mern', cuid: 'f34gb2bh24b24b2', content: "All cats meow 'mern!'", slug: 'hello-mern', _id: 1 };
+
+test('should return the correct type for addPost', actionTest(addPost, post, {
+  type: ADD_POST,
+  name: post.name,
+  title: post.title,
+  content: post.content,
+  slug: post.slug,
+  cuid: post.cuid,
+  _id: post._id,
+}));
+
+test('should return the correct type for addSelectedPost', actionTest(deletePost, post, { type: DELETE_POST, post }));
+
+test('should return the correct type for deletePost', actionTest(addSelectedPost, post, { type: ADD_SELECTED_POST, post }));
+
+test('should return the correct type for addPosts', actionTest(addPosts, [post], {
+  type: ADD_POSTS,
+  posts: [post],
+}));