Use legit-tests

package.json

@@ -51,6 +51,7 @@
     "gulp-rename": "^1.2.2",
     "gulp-util": "^3.0.5",
     "gulp-zip": "^3.0.2",
+    "legit-tests": "^0.5.2",
     "mocha": "^2.2.5",
     "phantomjs": "^1.9.17",
     "raw-loader": "^0.5.1",

test/app/components/Counter.spec.js

@@ -1,58 +1,38 @@
+import React from 'react';
 import expect from 'expect';
-import jsdomReact from '../jsdomReact';
-import React from 'react/addons';
+import Test from 'legit-tests';
+import { clickButton } from '../testMixins';
 import Counter from '../../../src/app/components/Counter';
 
-const { TestUtils } = React.addons;
-
-function setup() {
-  const actions = {
-    increment: expect.createSpy(),
-    incrementIfOdd: expect.createSpy(),
-    incrementAsync: expect.createSpy(),
-    decrement: expect.createSpy(),
-    bg: str => {}
-  };
-  const component = TestUtils.renderIntoDocument(<Counter counter={1} state={{ counter: { count: 1 } }} {...actions} />);
-  return {
-    component: component,
-    actions: actions,
-    buttons: TestUtils.scryRenderedDOMComponentsWithTag(component, 'button').map(button => {
-      return button.getDOMNode();
-    }),
-    p: TestUtils.findRenderedDOMComponentWithTag(component, 'p').getDOMNode()
-  };
-}
+const props = {
+  state: { counter: { count: 1 } },
+  increment: expect.createSpy(),
+  decrement: expect.createSpy(),
+  incrementIfOdd: expect.createSpy(),
+  incrementAsync: expect.createSpy(),
+  bg: expect.createSpy()
+};
 
 describe('Counter component', () => {
-  jsdomReact();
 
   it('should display count', () => {
-    const { p } = setup();
-    expect(p.textContent).toMatch(/^Clicked: 1 times/);
-  });
-
-  it('first button should call increment', () => {
-    const { buttons, actions } = setup();
-    TestUtils.Simulate.click(buttons[0]);
-    expect(actions.increment).toHaveBeenCalled();
+    Test(<Counter {...props} />)
+      .find('p')
+      .renderToString(p => {
+        expect(p).toMatch(/Clicked: 1 times/);
+      });
   });
 
-  it('second button should call decrement', () => {
-    const { buttons, actions } = setup();
-    TestUtils.Simulate.click(buttons[1]);
-    expect(actions.decrement).toHaveBeenCalled();
-  });
+  ['increment', 'decrement', 'incrementIfOdd', 'incrementAsync', 'bg']
+    .forEach((toBeCalled, idx) => {
+      it('first button should call ' + toBeCalled, () => {
+        Test(<Counter {...props} />)
+          .mixin({ clickButton: clickButton })
+          .clickButton(idx)
+          .test(() => {
+            expect(props[toBeCalled]).toHaveBeenCalled();
+          });
+      });
+    });
 
-  it('third button should call incrementIfOdd', () => {
-    const { buttons, actions } = setup();
-    TestUtils.Simulate.click(buttons[2]);
-    expect(actions.incrementIfOdd).toHaveBeenCalled();
-  });
-
-  it('fourth button should call incrementAsync', () => {
-    const { buttons, actions } = setup();
-    TestUtils.Simulate.click(buttons[3]);
-    expect(actions.incrementAsync).toHaveBeenCalled();
-  });
 });

test/app/containers/App.spec.js

@@ -1,65 +1,46 @@
+import React from 'react';
 import expect from 'expect';
-import jsdomReact from '../jsdomReact';
-import React from 'react/addons';
+import Test from 'legit-tests';
+import { clickButton } from '../testMixins';
 import { createStore, combineReducers, applyMiddleware, compose } from 'redux';
 import thunk from 'redux-thunk';
 import { Provider } from 'react-redux';
 import App from '../../../src/app/containers/Root';
 // import configureStore from '../../../src/app/store/configureStore';
 import counter from '../../../src/app/reducers/counter';
 
-const { TestUtils } = React.addons;
-
-function setup(initialState) {
-  // const store = configureStore(initialState);
+function configureStore(initialState) {
   const createStoreWithMiddleware = applyMiddleware(thunk)(createStore);
-  const store = createStoreWithMiddleware(combineReducers({ counter }), initialState);
-
-  const app = TestUtils.renderIntoDocument(
-    <Provider store={store}>
-      {() => <App />}
-    </Provider>
-  );
-  return {
-    app: app,
-    buttons: TestUtils.scryRenderedDOMComponentsWithTag(app, 'button').map(button => {
-      return button.getDOMNode();
-    }),
-    p: TestUtils.findRenderedDOMComponentWithTag(app, 'p').getDOMNode()
-  };
+  return createStoreWithMiddleware(combineReducers({counter}), initialState);
 }
 
 describe('containers', () => {
-  jsdomReact();
 
   describe('App', () => {
     it('should display initial count', () => {
-      const { p } = setup();
-      expect(p.textContent).toMatch(/^Clicked: 0 times/);
-    });
-
-    it('should display updated count after increment button click', () => {
-      const { buttons, p } = setup();
-      TestUtils.Simulate.click(buttons[0]);
-      expect(p.textContent).toMatch(/^Clicked: 1 times/);
+      Test(<Provider store={ configureStore() }>{ () => <App /> }</Provider>)
+        .find('p')
+        .renderToString(string => {
+          expect(string).toMatch(/Clicked: 0 times/);
+        });
     });
 
-    it('should display updated count after decrement button click', () => {
-      const { buttons, p } = setup();
-      TestUtils.Simulate.click(buttons[1]);
-      expect(p.textContent).toMatch(/^Clicked: -1 times/);
+    [
+      { title: 'should display updated count after increment button click', result: /Clicked: 1 times/ },
+      { title: 'should display updated count after decrement button click', result: /Clicked: -1 times/ },
+      { title: 'shouldnt change if even and if odd button clicked', result: /Clicked: 0 times/ },
+      { idx: 2, title: 'should change if odd and if odd button clicked', value: { counter: { count: 1 } }, result: /Clicked: 2 times/ }
+    ]
+    .forEach((rule, idx) => {
+      it(rule.title, () => {
+        Test(<Provider store={ configureStore(rule.value) }>{ () => <App /> }</Provider>)
+          .mixin({clickButton: clickButton})
+          .clickButton(rule.idx || idx)
+          .renderToString(string => {
+            expect(string).toMatch(rule.result);
+          });
+      });
     });
 
-    it('shouldnt change if even and if odd button clicked', () => {
-      const { buttons, p } = setup();
-      TestUtils.Simulate.click(buttons[2]);
-      expect(p.textContent).toMatch(/^Clicked: 0 times/);
-    });
-
-    it('should change if odd and if odd button clicked', () => {
-      const { buttons, p } = setup({ counter: { count: 1 } });
-      TestUtils.Simulate.click(buttons[2]);
-      expect(p.textContent).toMatch(/^Clicked: 2 times/);
-    });
   });
 });

test/app/testMixins.js

@@ -0,0 +1,7 @@
+import { Find, Simulate } from 'legit-tests/middleware';
+
+export function clickButton(idx) {
+  Find.call(this, 'button');
+  this.elements = { button: this.elements.button[idx] };
+  Simulate.call(this, {method: 'click', element: 'button'});
+}