Feat install jest

app/src/components/Header/index.js

@@ -1,5 +1,4 @@
 import React, { PropTypes } from 'react';
-
 import styles from './index.module.scss';
 import cssModules from 'react-css-modules';
 

app/src/components/Header/tests/__snapshots__/index.test.js.snap

@@ -0,0 +1,5 @@
+exports[`<Header /> should render with default props 1`] = `
+<h1>
+  Hello World
+</h1>
+`;

app/src/components/Header/tests/index.test.js

@@ -1,18 +1,15 @@
 import Header from '../index';
-
-import expect from 'expect';
 import { shallow } from 'enzyme';
+import { shallowToJson } from 'enzyme-to-json';
 import React from 'react';
 
 describe('<Header />', () => {
-  it('should render an h1 header element with the specified text', () => {
-    const renderedComponent = shallow(
-      <Header content="Hello World!" />
+  it('should render with default props', () => {
+    const wrapper = shallow(
+      <Header
+        content="Hello World"
+      />
     );
-    expect(
-      renderedComponent
-        .find('h1')
-        .contains('Hello World!')
-    ).toEqual(true);
+    expect(shallowToJson(wrapper)).toMatchSnapshot();
   });
 });

app/src/components/LogoImage/tests/__snapshots__/index.test.js.snap

@@ -0,0 +1,8 @@
+exports[`<Header /> should render with default props 1`] = `
+<div>
+  <img
+    alt="Udacity Logo"
+    id="udacity-alumni-logo"
+    src="https://github.com/RyanCCollins/cdn/blob/master/alumni-webapp/udacity-alumni-png.png?raw=true" />
+</div>
+`;

app/src/components/LogoImage/tests/index.test.js

@@ -0,0 +1,15 @@
+import { shallow } from 'enzyme';
+import React from 'react';
+import { shallowToJson } from 'enzyme-to-json';
+import LogoImage from '../index';
+
+describe('<Header />', () => {
+  it('should render with default props', () => {
+    const wrapper = shallow(
+      <LogoImage
+        imageSource="https://github.com/RyanCCollins/cdn/blob/master/alumni-webapp/udacity-alumni-png.png?raw=true"
+      />
+    );
+    expect(shallowToJson(wrapper)).toMatchSnapshot();
+  });
+});

app/src/components/Navbar/index.js

@@ -25,7 +25,7 @@ const Navbar = () => (
         <Anchor href="#">
           Third
         </Anchor>
-        <Search dropAlign={{"right": "right"}} />
+        <Search dropAlign={{ right: 'right'}} />
       </Menu>
     </Header>
   </div>

app/src/components/Navbar/tests/__snapshots__/index.test.js.snap

@@ -0,0 +1,63 @@
+exports[`<Navbar /> should render with default props 1`] = `
+<div>
+  <Header
+    align="center"
+    direction="row"
+    justify="between"
+    pad={
+      Object {
+        "between": "small",
+        "horizontal": "none",
+        "vertical": "none"
+      }
+    }
+    responsive={false}
+    tag="header">
+    <Title
+      responsive={true}>
+      <img
+        alt="logo"
+        src={Object {}} />
+    </Title>
+    <Menu
+      align="center"
+      closeOnClick={true}
+      direction="row"
+      dropAlign={
+        Object {
+          "left": "left",
+          "top": "top"
+        }
+      }
+      pad="none"
+      responsive={false}>
+      <Anchor
+        className="active"
+        href="#"
+        tag="a">
+        First
+      </Anchor>
+      <Anchor
+        href="#"
+        tag="a">
+        Second
+      </Anchor>
+      <Anchor
+        href="#"
+        tag="a">
+        Third
+      </Anchor>
+      <Search
+        align="left"
+        dropAlign={
+          Object {
+            "right": "right"
+          }
+        }
+        iconAlign="end"
+        inline={false}
+        responsive={true} />
+    </Menu>
+  </Header>
+</div>
+`;

app/src/components/Navbar/tests/index.test.js

@@ -0,0 +1,13 @@
+import { shallow } from 'enzyme';
+import React from 'react';
+import { shallowToJson } from 'enzyme-to-json';
+import Navbar from '../index';
+
+describe('<Navbar />', () => {
+  it('should render with default props', () => {
+    const wrapper = shallow(
+      <Navbar />
+    );
+    expect(shallowToJson(wrapper)).toMatchSnapshot();
+  });
+});

app/src/containers/FeatureFirstContainer/reducer.js

@@ -5,7 +5,7 @@ import {
   CLEAR_DATA_ERROR,
 } from './constants';
 
-const initialState = {
+export const initialState = {
   isLoading: false,
   data: {},
   error: {},

app/src/containers/FeatureFirstContainer/tests/__snapshots__/index.test.js.snap

@@ -0,0 +1,20 @@
+exports[`<FeatureFirstContainer /> renders with default props 1`] = `
+<FeatureFirstContainer
+  actions={
+    Object {
+      "clearDataError": [Function anonymous],
+      "loadDataFailure": [Function anonymous],
+      "loadDataInitiation": [Function anonymous],
+      "loadDataSuccess": [Function anonymous]
+    }
+  }
+  store={
+    Object {
+      "clearActions": [Function clearActions],
+      "dispatch": [Function anonymous],
+      "getActions": [Function getActions],
+      "getState": [Function getState],
+      "subscribe": [Function subscribe]
+    }
+  } />
+`;

app/src/containers/FeatureFirstContainer/tests/index.test.js

@@ -1,37 +1,20 @@
-import { FeatureFirstContainer } from '../index';
-import expect from 'expect';
+import FeatureFirstContainer from '../index';
 import React from 'react';
 import { shallow } from 'enzyme';
+import { shallowToJson } from 'enzyme-to-json';
+import configureMockStore from 'redux-mock-store';
+import thunk from 'redux-thunk';
+import { initialState as featureComponent } from '../reducer';
 
-// We are testing our react components using
-// Airbnb's enzyme
-// Checkout https://medium.com/airbnb-engineering/enzyme-javascript-testing-utilities-for-react-a417e5e5090f#.n5bteqyp4
-// When testing connected containers, things can be a little trickier
-// because you need to mock the store in order to test the components
-// in total isolation.
-// SEE: http://redux.js.org/docs/recipes/WritingTests.html
-function setup() {
-  const props = {
-    isLoading: true,
-  };
-  const wrapper = shallow(
-    <FeatureFirstContainer isLoading={props.isLoading} />
-  );
-  return {
-    props,
-    wrapper,
-  };
-}
+const middlewares = [thunk];
+const mockStore = configureMockStore(middlewares);
 
 describe('<FeatureFirstContainer />', () => {
-  it('should show a loading indicator while loading', () => {
-    const {
-      wrapper,
-    } = setup();
-    expect(
-      wrapper.contains(
-        <h1>LOADING...</h1>
-      )
-    ).toBe(true);
+  it('renders with default props', () => {
+    const store = mockStore({ featureComponent });
+    const wrapper = shallow(
+      <FeatureFirstContainer store={store} />
+    );
+    expect(shallowToJson(wrapper)).toMatchSnapshot();
   });
 });

app/src/store.js

@@ -6,12 +6,10 @@ import createLogger from 'redux-logger';
 import promiseMiddleware from 'redux-promise-middleware';
 import rootReducer from './reducers';
 
+import { initialState as featureComponent } from './containers/FeatureFirstContainer/reducer';
+
 const initialState = {
-  featureComponent: {
-    isLoading: false,
-    data: {},
-    error: {},
-  },
+  featureComponent,
 };
 
 /* Commonly used middlewares and enhancers */

config/generators/component/test.js.hbs

@@ -1,11 +1,13 @@
 import {{ properCase name }} from '../index';
-
-import expect from 'expect';
 import { shallow } from 'enzyme';
+import { shallowToJson } from 'enzyme-to-json';
 import React from 'react';
 
 describe('<{{ properCase name }} />', () => {
-  it('Expect to have unit tests specified', () => {
-    expect(true).toEqual(false);
+  it('should render with default props', () => {
+    const wrapper = shallow(
+      <{{ properCase name }} />
+    );
+    expect(shallowToJson(wrapper)).toMatchSnapshot();
   });
 });

config/generators/container/actions.js.hbs

@@ -1,8 +1,6 @@
-import {
-  {{ uppercase name }}_DEFAULT_ACTION,
-} from './constants';
+import * as types from './constants';
 
 // {{ camelCase name }}defaultAction :: None -> {Action}
 export const {{ camelCase name }}DefaultAction = () => ({
-  type: {{ uppercase name }}_DEFAULT_ACTION,
+  type: types.{{ uppercase name }}_DEFAULT_ACTION,
 });

config/generators/container/actions.test.js.hbs

@@ -1,18 +1,14 @@
 import expect from 'expect';
-import {
-  {{ camelCase name }}DefaultAction,
-} from '../actions';
-import {
-  {{ uppercase name }}_DEFAULT_ACTION,
-} from '../constants';
+import * as actions from '../actions';
+import * as types from '../constants';
 
 describe('{{ properCase name }} actions', () => {
   describe('Default Action', () => {
     it('has a type of DEFAULT_ACTION', () => {
       const expected = {
-        type: {{ uppercase name }}_DEFAULT_ACTION,
+        type: types.{{ uppercase name }}_DEFAULT_ACTION,
       };
-      expect({{ camelCase name }}DefaultAction()).toEqual(expected);
+      expect(actions.{{ camelCase name }}DefaultAction()).toEqual(expected);
     });
   });
 });

config/generators/container/reducer.js.hbs

@@ -1,19 +1,17 @@
-import {
-  {{ uppercase name }}_DEFAULT_ACTION,
-} from './constants';
+import * as types from './constants';
 
-const initialState = {
+export const initialState = {
   // Initial State goes here!
 };
 
 const {{ camelCase name }}Reducer =
   (state = initialState, action) => {
     switch (action.type) {
-      case DEFAULT_ACTION:
+      case types.DEFAULT_ACTION:
         return state;
       default:
         return state;
     }
-};
+  };
 
 export default {{ camelCase name }}Reducer;

config/generators/container/reducer.test.js.hbs

@@ -1,9 +1,5 @@
 import expect from 'expect';
-import {{ camelCase name }}Reducer from '../reducer';
-
-const initialState = {
-  // Initial State goes here!
-};
+import {{ camelCase name }}Reducer, { initialState } from '../reducer';
 
 describe('{{ camelCase name }}Reducer', () => {
   it('returns the initial state', () => {

config/generators/container/test.js.hbs

@@ -1,11 +1,20 @@
 import {{ properCase name }} from '../index';
-
-import expect from 'expect';
 import { shallow } from 'enzyme';
+import { shallowToJson } from 'enzyme-to-json';
 import React from 'react';
+import configureMockStore from 'redux-mock-store';
+import thunk from 'redux-thunk';
+import { initialState } from '../reducer';
+
+const middlewares = [thunk];
+const mockStore = configureMockStore(middlewares);
 
 describe('<{{ properCase name }} />', () => {
-  it('Expect to have unit tests specified', () => {
-    expect(true).toEqual(false);
+  it('should render with default props', () => {
+    const store = mockStore(initialState);
+    const wrapper = shallow(
+      <{{ properCase name }} store={store} />
+    );
+    expect(shallowToJson(wrapper)).toMatchSnapshot();
   });
 });