chore(rendered-content): nested html under rendered-content

travi · travi · commit 7ff3fae31236 · 2018-12-14T14:24:50.000-06:00
to make room for additional content from custom rendering functions

BREAKING CHANGE: the shape of rendered content has changed from a string to an object. the previous
string content is now provided as an `html` property of the object
diff --git a/example/layout.mustache b/example/layout.mustache
@@ -5,7 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1" />
   </head>
   <body>
-    <div id="wrap"><div>{{{ renderedContent }}}</div></div>
+    <div id="wrap"><div>{{{ renderedContent.html }}}</div></div>
     <script src="https://cdn.polyfill.io/v2/polyfill.min.js"> </script>
   </body>
 </html>
diff --git a/src/router-wrapper.js b/src/router-wrapper.js
@@ -27,11 +27,13 @@ export default async function renderThroughReactRouter(request, h, {routes, resp
       return respond(h, {
         store,
         status,
-        renderedContent: renderToString((
-          <Root request={request} store={store}>
-            <RouterContext {...renderProps} />
-          </Root>
-        ))
+        renderedContent: {
+          html: renderToString((
+            <Root request={request} store={store}>
+              <RouterContext {...renderProps} />
+            </Root>
+          ))
+        }
       });
     }
   } catch (e) {
diff --git a/test/integration/features/step_definitions/render-steps.js b/test/integration/features/step_definitions/render-steps.js
@@ -2,18 +2,18 @@ import {OK} from 'http-status-codes';
 import {assert} from 'chai';
 import {When, Then} from 'cucumber';
 
-When('a request is made for an existing route', function () {
+When(/^a request is made for an existing route$/, function () {
   return this.makeRequest({url: '/existing-route'});
 });
 
-Then('the route is rendered successfully', function (callback) {
+Then(/^the route is rendered successfully$/, function (callback) {
   assert.equal(this.serverResponse.statusCode, OK);
   assert.equal(this.serverResponse.headers['content-type'], 'text/html; charset=utf-8');
 
   callback();
 });
 
-Then('asynchronously fetched data is included in the page', function (callback) {
+Then(/^asynchronously fetched data is included in the page$/, function (callback) {
   assert.include(this.serverResponse.payload, this.dataPoint);
 
   callback();
diff --git a/test/unit/router-wrapper-test.js b/test/unit/router-wrapper-test.js
@@ -38,14 +38,14 @@ suite('router-wrapper', () => {
     const status = any.integer();
     const context = any.simpleObject();
     const rootComponent = any.simpleObject();
-    const renderedContent = any.string();
+    const html = any.string();
     const response = any.string();
     routeMatcher.default.withArgs(url, routes).resolves({renderProps, status});
     dataFetcher.default.withArgs({renderProps, store, status}).resolves({renderProps, status});
     React.createElement.withArgs(RouterContext, sinon.match(renderProps)).returns(context);
     React.createElement.withArgs(Root, {request, store}).returns(rootComponent);
-    domServer.renderToString.withArgs(rootComponent).returns(renderedContent);
-    respond.withArgs(reply, {renderedContent, store, status}).returns(response);
+    domServer.renderToString.withArgs(rootComponent).returns(html);
+    respond.withArgs(reply, {renderedContent: {html}, store, status}).returns(response);
 
     return assert.becomes(renderThroughReactRouter(request, reply, {routes, respond, Root, store}), response);
   });
