Add DOM hydrate extra attributes test to fixtures/ssr (facebook#10085)

sompylasar · Jun 9, 2018 · b1851a7 · b1851a7
1 parent d396122
commit b1851a7
Showing 1 changed file with 14 additions and 4 deletions.
diff --git a/fixtures/ssr/src/components/SSRMismatchTest.js b/fixtures/ssr/src/components/SSRMismatchTest.js
@@ -5,7 +5,7 @@ export default class SSRMismatchTest extends Component {
   render() {
     // Default content rendered at the server.
     let content = (
-      <div>
+      <div data-ssr-prop-extra>
         <em>
           SSRMismatchTest default text
         </em>
@@ -17,7 +17,16 @@ export default class SSRMismatchTest extends Component {
       if (queryString.indexOf('ssr-prop-mismatch') >= 0) {
         // The inner structure is the same as the server render, but the root element has an extra prop.
         content = (
-          <div data-ssr-prop-mismatch>
+          <div data-ssr-prop-extra data-ssr-prop-mismatch>
+            <em>
+              SSRMismatchTest default text
+            </em>
+          </div>
+        );
+      } else if (queryString.indexOf('ssr-prop-extra') >= 0) {
+        // The inner structure is the same as the server render, but the root element is missing a server-rendered prop.
+        content = (
+          <div>
             <em>
               SSRMismatchTest default text
             </em>
@@ -26,7 +35,7 @@ export default class SSRMismatchTest extends Component {
       } else if (queryString.indexOf('ssr-text-mismatch') >= 0) {
         // The inner structure is the same as the server render, but the inner text node content differs.
         content = (
-          <div>
+          <div data-ssr-prop-extra>
             <em>
               SSRMismatchTest ssr-text-mismatch
             </em>
@@ -35,7 +44,7 @@ export default class SSRMismatchTest extends Component {
       } else if (queryString.indexOf('ssr-children-mismatch') >= 0) {
         // The inner structure is different from the server render.
         content = (
-          <div>
+          <div data-ssr-prop-extra>
             SSRMismatchTest ssr-children-mismatch
           </div>
         );
@@ -47,6 +56,7 @@ export default class SSRMismatchTest extends Component {
           SSRMismatchTest. Open the console, select a test case:{' '}
           <a href="/">none</a>{' '}
           <a href="/?ssr-prop-mismatch">ssr-prop-mismatch</a>{' '}
+          <a href="/?ssr-prop-extra">ssr-prop-extra</a>{' '}
           <a href="/?ssr-text-mismatch">ssr-text-mismatch</a>{' '}
           <a href="/?ssr-children-mismatch">ssr-children-mismatch</a>
         </div>