Merge branch 'feature/testing-server-side-rendering' into develop

src/index.jsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import ReactDOMServer from 'react-dom/server';
+import { Provider } from 'react-redux';
+import hypernova, { serialize, load } from 'hypernova';
+
+function buildProvider(connectedComponent, store) {
+  return (
+    <Provider store={store}>
+      {React.createElement(connectedComponent)}
+    </Provider>
+  );
+}
+
+export const renderReactRedux =
+  (name, connectedComponent, configureStore) => hypernova({
+    server() {
+      return (props) => {
+        const provider = buildProvider(connectedComponent, configureStore(props));
+        const contents = ReactDOMServer.renderToString(provider);
+        return serialize(name, contents, props);
+      };
+    },
+
+    client() {
+      const { node, data } = load(name);
+
+      if (node) {
+        const provider = buildProvider(connectedComponent, configureStore(data));
+        ReactDOM.render(provider, node);
+      }
+
+      return connectedComponent;
+    },
+  });

test/components/HypernovaExampleReactRedux.jsx

@@ -0,0 +1,9 @@
+import { renderReactRedux } from '../../';
+import ConnectedComponent from './Containers/CounterApp';
+import configureStore from './Store/Counter/ConfigureStore';
+
+export default renderReactRedux(
+  'CounterApp',
+  ConnectedComponent,
+  configureStore
+);

test/reduxComponent-test.js

@@ -1,42 +1,42 @@
 import * as actions from './components/Actions/Counter';
 import * as types from './components/Constants/ActionTypes/Counter';
 import reducer from './components/Reducers/Counter';
-import jsdom from 'jsdom';
 import { assert } from 'chai';
-// import { renderReact } from '..';
 
-describe('[redux] counter actions', () => {
-  it('should create an action to increment counter', () => {
-    const expectedAction = {
-      type: types.INCREMENT_COUNTER,
-    };
-    assert.deepEqual(actions.incrementCounter(), expectedAction);
-  });
+describe('React-Redux', () => {
+  describe('Counter actions', () => {
+    it('should create an action to increment counter', () => {
+      const expectedAction = {
+        type: types.INCREMENT_COUNTER,
+      };
+      assert.deepEqual(actions.incrementCounter(), expectedAction);
+    });
 
-  it('should create an action to decrement counter', () => {
-    const expectedAction = {
-      type: types.DECREMENT_COUNTER,
-    };
-    assert.deepEqual(actions.decrementCounter(), expectedAction);
+    it('should create an action to decrement counter', () => {
+      const expectedAction = {
+        type: types.DECREMENT_COUNTER,
+      };
+      assert.deepEqual(actions.decrementCounter(), expectedAction);
+    });
   });
-});
 
-describe('[redux] counter reducers', () => {
-  it('should return the initial state', () => {
-    assert.deepEqual(reducer(undefined, {}), { count: 0 });
-  });
+  describe('Counter reducers', () => {
+    it('should return the initial state', () => {
+      assert.deepEqual(reducer(undefined, {}), { count: 0 });
+    });
 
-  it('should handle INCREMENT_COUNTER', () => {
-    assert.deepEqual(
-      reducer(undefined, { type: types.INCREMENT_COUNTER }),
-      { count: 1 }
-    );
-  });
+    it('should handle INCREMENT_COUNTER', () => {
+      assert.deepEqual(
+        reducer(undefined, { type: types.INCREMENT_COUNTER }),
+        { count: 1 }
+      );
+    });
 
-  it('should handle DECREMENT_COUNTER', () => {
-    assert.deepEqual(
-      reducer(undefined, { type: types.DECREMENT_COUNTER }),
-      { count: -1 }
-    );
+    it('should handle DECREMENT_COUNTER', () => {
+      assert.deepEqual(
+        reducer(undefined, { type: types.DECREMENT_COUNTER }),
+        { count: -1 }
+      );
+    });
   });
 });

test/renderReactRedux-test.js

@@ -0,0 +1,55 @@
+import ExampleReactReduxComponent from './components/Containers/CounterApp';
+import exampleConfigureStore from './components/Store/Counter/ConfigureStore';
+
+import jsdom from 'jsdom';
+import { assert } from 'chai';
+import { renderReactRedux } from '..';
+
+describe('renderReactRedux', () => {
+  let result;
+  beforeEach(() => {
+    result = renderReactRedux(
+      'ExampleReactReduxComponent',
+      ExampleReactReduxComponent,
+      exampleConfigureStore
+    )({ count: 12 });
+  });
+
+  it('exists', () => {
+    assert.isFunction(renderReactRedux);
+    assert.equal(renderReactRedux.length, 3);
+  });
+
+  it('has correct markup on server', () => {
+    assert.isString(result);
+    assert.match(result, /Count: .*?12/);
+  });
+
+  it('calls hypernova.client', (done) => {
+    jsdom.env(result, (err, window) => {
+      if (err) {
+        done(err);
+        return;
+      }
+
+      global.window = window;
+      global.document = window.document;
+
+      // Calling it again for the client.
+      renderReactRedux(
+        'ExampleReactReduxComponent',
+        ExampleReactReduxComponent,
+        exampleConfigureStore
+      );
+
+      assert.match(document.querySelector('p').textContent, /Count: 12/);
+      document.querySelector('button').click(); // click +1 button
+      assert.match(document.querySelector('p').textContent, /Count: 13/);
+
+      delete global.window;
+      delete global.document;
+
+      done();
+    });
+  });
+});