Fixed tests

package.json

@@ -12,6 +12,7 @@
     "redux": "^3.7.0"
   },
   "devDependencies": {
+    "enzyme": "^2.8.2",
     "eslint": "^3.19.0",
     "eslint-config-airbnb": "^15.0.1",
     "eslint-config-google": "^0.8.0",

src/App.test.js

@@ -1,8 +0,0 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import App from './App';
-
-it('renders without crashing', () => {
-  const div = document.createElement('div');
-  ReactDOM.render(<App />, div);
-});

src/__test__/Counter.test.js

@@ -0,0 +1,31 @@
+import React from 'react';
+import Counter from '../components/Counter';
+import { mount } from 'enzyme';
+
+// state in redux app is preserved among tests
+
+describe('<Counter />', () => {
+  const setup = () => {
+    const counter = mount(<Counter />);
+    return { counter };
+  };
+
+  it('Clicking on add increment the counter', () => {
+    const { counter } = setup();
+    counter.find('button').at(0).simulate('click').simulate('click');
+    expect(counter.find('StaticCounter').props().value).toBe(2);
+  });
+
+  it('Clicking on minus decrement the counter', () => {
+    const { counter } = setup();
+    counter.find('button').at(1).simulate('click');
+    expect(counter.find('StaticCounter').props().value).toBe(1);
+  });
+
+  it('Clicking on minus never goes below 0', () => {
+    const { counter } = setup();
+    const minusButton = counter.find('button').at(1);
+    minusButton.simulate('click').simulate('click');
+    expect(counter.find('StaticCounter').props().value).toBe(0);
+  });
+});

src/__test__/TabView.test.js

@@ -0,0 +1,55 @@
+import React from 'react';
+import TabView from '../components/Tabs';
+import { shallow, mount } from 'enzyme';
+
+describe('<TabView />', () => {
+  let props;
+  let mountedTab;
+  const tabView = () => {
+    if (!mountedTab) {
+      return mount(<TabView {...props} />);
+    }
+    return mountedTab;
+  };
+  beforeEach(() => {
+    props = {
+      data: undefined
+    };
+    mountedTab = undefined;
+  });
+
+  it('Default active on the first tab and not active on the rest', () => {
+    const tab = tabView().find('.tab');
+    expect(tab.at(0).hasClass('active')).toBe(true);
+    expect(tab.at(1).hasClass('active')).toBe(false);
+    expect(tabView().find('TabGroup').length).toBe(1);
+  });
+
+  it('Default active content is correct', () => {
+    let data = {
+      tabs: ['one', 'two', 'thre'],
+      content: ['1', '2', '3']
+    };
+    props = {
+      data: data
+    };
+    const tabContent = tabView().find('.tabContent');
+    expect(tabContent.find('div').text()).toBe('1');
+  });
+
+  it('Click on the inactive tab activate the tab', () => {
+    let data = {
+      tabs: ['one', 'two', 'thre'],
+      content: ['1', '2', '3']
+    };
+    props = {
+      data: data
+    };
+    var tabViewWindow = tabView();
+    const tab1 = tabViewWindow.find('.tab').at(1);
+    const tab1Activated = tab1.simulate('click');
+    expect(tab1Activated.hasClass('active')).toBe(true);
+    const tabContent = tabViewWindow.find('.tabContent');
+    expect(tabContent.render().find('div').text()).toBe('2');
+  });
+});

src/components/Counter/index.js

@@ -33,12 +33,16 @@ const app = (state = 0, action) => {
 let store = createStore(app);
 
 // react component
-const StaticCounter = props =>
+const StaticCounter = ({ value, handleClickAdd, handleClickMinus }) =>
   <div>
-    <p>This state of this counter is managed by Redux instead of React.</p>
-    <h2>{props.value}</h2>
-    <button onClick={props.handleClickAdd}>Add </button>
-    <button onClick={props.handleClickMinus}>Minus </button>
+    <p>
+      This state of this counter is managed by Redux instead of React. Note that
+      the counter does not change after switching to other components because
+      the state in redux is not managed by the root component.
+    </p>
+    <h2>{value}</h2>
+    <button onClick={handleClickAdd}>Add </button>
+    <button onClick={handleClickMinus}>Minus </button>
   </div>;
 
 StaticCounter.propTypes = {