Feat: finish integration of jest as testing util

RyanCCollins · RyanCCollins · commit 18de2bac885a · 2016-09-20T13:55:07.000-04:00
diff --git a/app/src/components/Header/index.js b/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';
 
diff --git a/app/src/components/Header/tests/__snapshots__/index.test.js.snap b/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>
+`;
diff --git a/app/src/components/Header/tests/index.test.js b/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();
   });
 });
diff --git a/app/src/components/LogoImage/tests/__snapshots__/index.test.js.snap b/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>
+`;
diff --git a/app/src/components/LogoImage/tests/index.test.js b/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();
+  });
+});
diff --git a/app/src/components/Navbar/index.js b/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>
diff --git a/app/src/components/Navbar/tests/__snapshots__/index.test.js.snap b/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>
+`;
diff --git a/app/src/components/Navbar/tests/index.test.js b/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();
+  });
+});
diff --git a/app/src/containers/FeatureFirstContainer/reducer.js b/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: {},
diff --git a/app/src/containers/FeatureFirstContainer/tests/__snapshots__/index.test.js.snap b/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]
+    }
+  } />
+`;
diff --git a/app/src/containers/FeatureFirstContainer/tests/index.test.js b/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();
   });
 });
diff --git a/app/src/store.js b/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 */
diff --git a/config/testing/karma.conf.js b/config/testing/karma.conf.js
diff --git a/config/testing/preprocessor.js b/config/testing/preprocessor.js
@@ -0,0 +1,12 @@
+const babelJest = require('babel-jest');
+
+module.exports = {
+  process(src, filename) {
+    if (!filename.match(/\.jsx?$/)) {
+      return '';
+    }
+    return babelJest.process(
+      src.replace(/import(.*)from.*\.((less)|(scss)|(svg)|(png)).*;/gi, 'let $1 = {};'
+    ), filename);
+  },
+};
diff --git a/config/testing/test-bundler.js b/config/testing/test-bundler.js
diff --git a/config/webpack/webpack.test.babel.js b/config/webpack/webpack.test.babel.js
diff --git a/config/webpack/webpack.test.config.js b/config/webpack/webpack.test.config.js
diff --git a/package.json b/package.json

Original file line number	Diff line number	Diff line change
`@@ -1,5 +1,4 @@`
`1`	`1`	`import React, { PropTypes } from 'react';`
`2`		`-`
`3`	`2`	`import styles from './index.module.scss';`
`4`	`3`	`import cssModules from 'react-css-modules';`
`5`	`4`
-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +exports[`<Header /> should render with default props 1`] = `
 +<h1>
 +  Hello World
 +</h1>
 +`;