test(hydrate): add hydrate tests to end-to-end test app

Author: adamdbradley

test/end-to-end/package-lock.json

@@ -9,8 +9,9 @@
     "build": "node ../../bin/stencil build --docs",
     "start": "node ../../bin/stencil build --debug --watch --dev --serve",
     "test": "node ../../bin/stencil test --ci --e2e --spec --screenshot --debug",
-    "test.dist": "npm run build && node test-end-to-end-dist.js",
+    "test.dist": "npm run build && node test-end-to-end-dist.js && node test-end-to-end-hydrate.js",
     "test.e2e": "node ../../bin/stencil test --e2e",
+    "test.hydrate": "node test-end-to-end-hydrate.js",
     "test.screenshot": "node ../../bin/stencil test --e2e --debug --screenshot",
     "test.spec": "node ../../bin/stencil test --spec --debug",
     "jest": "jest --coverage"
@@ -30,6 +31,7 @@
     "lodash-es": "^4.17.15",
     "rollup-plugin-css-only": "^2.1.0",
     "rollup-plugin-node-builtins": "^2.1.2",
-    "video.js": "^7.8.4"
+    "video.js": "^7.8.4",
+    "why-is-node-running": "^2.2.0"
   }
 }

test/end-to-end/package.json

@@ -43,6 +43,8 @@ export namespace Components {
     }
     interface PathAliasCmp {
     }
+    interface PrerenderCmp {
+    }
     interface PropCmp {
         "first": string;
         "lastName": string;
@@ -140,6 +142,12 @@ declare global {
         prototype: HTMLPathAliasCmpElement;
         new (): HTMLPathAliasCmpElement;
     };
+    interface HTMLPrerenderCmpElement extends Components.PrerenderCmp, HTMLStencilElement {
+    }
+    var HTMLPrerenderCmpElement: {
+        prototype: HTMLPrerenderCmpElement;
+        new (): HTMLPrerenderCmpElement;
+    };
     interface HTMLPropCmpElement extends Components.PropCmp, HTMLStencilElement {
     }
     var HTMLPropCmpElement: {
@@ -184,6 +192,7 @@ declare global {
         "listen-cmp": HTMLListenCmpElement;
         "method-cmp": HTMLMethodCmpElement;
         "path-alias-cmp": HTMLPathAliasCmpElement;
+        "prerender-cmp": HTMLPrerenderCmpElement;
         "prop-cmp": HTMLPropCmpElement;
         "slot-cmp": HTMLSlotCmpElement;
         "slot-cmp-container": HTMLSlotCmpContainerElement;
@@ -227,6 +236,8 @@ declare namespace LocalJSX {
     }
     interface PathAliasCmp {
     }
+    interface PrerenderCmp {
+    }
     interface PropCmp {
         "first"?: string;
         "lastName"?: string;
@@ -258,6 +269,7 @@ declare namespace LocalJSX {
         "listen-cmp": ListenCmp;
         "method-cmp": MethodCmp;
         "path-alias-cmp": PathAliasCmp;
+        "prerender-cmp": PrerenderCmp;
         "prop-cmp": PropCmp;
         "slot-cmp": SlotCmp;
         "slot-cmp-container": SlotCmpContainer;
@@ -282,6 +294,7 @@ declare module "@stencil/core" {
             "listen-cmp": LocalJSX.ListenCmp & JSXBase.HTMLAttributes<HTMLListenCmpElement>;
             "method-cmp": LocalJSX.MethodCmp & JSXBase.HTMLAttributes<HTMLMethodCmpElement>;
             "path-alias-cmp": LocalJSX.PathAliasCmp & JSXBase.HTMLAttributes<HTMLPathAliasCmpElement>;
+            "prerender-cmp": LocalJSX.PrerenderCmp & JSXBase.HTMLAttributes<HTMLPrerenderCmpElement>;
             "prop-cmp": LocalJSX.PropCmp & JSXBase.HTMLAttributes<HTMLPropCmpElement>;
             "slot-cmp": LocalJSX.SlotCmp & JSXBase.HTMLAttributes<HTMLSlotCmpElement>;
             "slot-cmp-container": LocalJSX.SlotCmpContainer & JSXBase.HTMLAttributes<HTMLSlotCmpContainerElement>;

test/end-to-end/src/components.d.ts

@@ -0,0 +1,22 @@
+:host {
+  display: block;
+  border: 2px solid black;
+  border-radius: 10px;
+  margin: 80px auto;
+  padding: 40px 20px;
+  max-width: 320px;
+  text-align: center;
+  font-size: 24px;
+  font-weight: bold;
+  background: #047aff;
+  color: white;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans',
+    'Helvetica Neue', sans-serif;
+}
+
+@media (max-width: 320px) {
+  :host {
+    background: maroon;
+    font-family: 'Courier New', Courier, monospace;
+  }
+}

test/end-to-end/src/prerender-cmp/prerender-cmp.css

@@ -0,0 +1,37 @@
+import { Component, h } from '@stencil/core';
+import styles from './prerender-cmp.css';
+
+@Component({
+  tag: 'prerender-cmp',
+  styles,
+  shadow: true,
+})
+export class PrerenderCmp {
+  render() {
+    return [
+      <div>a</div>,
+      <div>b</div>,
+      <div>
+        <div>c</div>
+        <div>
+          {[
+            <div>d</div>,
+            <div>
+              {[
+                <div>e</div>,
+                <div>f</div>,
+                <div>g</div>,
+                <div>h</div>,
+                <div>i</div>,
+                <div>j</div>,
+                <div>k</div>,
+                <div>l</div>,
+              ]}
+            </div>,
+          ]}
+        </div>
+      </div>,
+      <a href="/some-link">Some Link</a>
+    ];
+  }
+}

test/end-to-end/src/prerender-cmp/prerender-cmp.tsx

@@ -0,0 +1,10 @@
+# prerender-cmp
+
+
+
+<!-- Auto Generated Below -->
+
+
+----------------------------------------------
+
+*Built with [StencilJS](https://stenciljs.com/)*

test/end-to-end/src/prerender-cmp/readme.md

@@ -0,0 +1,81 @@
+const whyIsNodeRunning = require('why-is-node-running');
+const hydrate = require('./hydrate');
+const mockDoc = require('../../mock-doc');
+
+async function main() {
+  const html = `
+    <html>
+    <head><title>End To End</title></head>
+    <body>
+      <prerender-cmp></prerender-cmp>
+    </body>
+    </html>
+  `;
+  const opts = {
+    prettyHtml: true,
+  };
+  const results = await hydrate.renderToString(html, opts);
+
+  console.log(results);
+
+  if (results.diagnostics.length > 0) {
+    results.diagnostics.forEach(d => {
+      console.error(`🧨  ${d.header}`);
+      console.error(`🧨  ${d.messageText}`);
+    });
+    throw new Error(`validated test/end-to-end/hydrate errors!!`);
+  }
+
+  if (results.hydratedCount !== 1) {
+    throw new Error(`invalid hydratedCount: ${results.hydratedCount}`);
+  }
+  if (results.components.length !== 1 || results.components[0].tag !== 'prerender-cmp') {
+    throw new Error(`invalid components: ${results.components}`);
+  }
+  if (results.httpStatus !== 200) {
+    throw new Error(`invalid httpStatus: ${results.httpStatus}`);
+  }
+  if (results.anchors.length !== 1 || results.anchors[0].href !== `https://hydrate.stenciljs.com/some-link`) {
+    throw new Error(`invalid anchors: ${results.anchors}`);
+  }
+  if (results.url !== `https://hydrate.stenciljs.com/`) {
+    throw new Error(`invalid url: ${results.url}`);
+  }
+  if (results.title !== `End To End`) {
+    throw new Error(`invalid title`);
+  }
+  if (typeof results.html !== `string`) {
+    throw new Error(`missing html`);
+  }
+
+  const doc = mockDoc.createDocument(results.html);
+  if (doc.title !== 'End To End') {
+    throw new Error(`invalid doc.title: ${doc.title}`);
+  }
+  if (!doc.documentElement.classList.contains('hydrated')) {
+    throw new Error(`missing html hydrated`);
+  }
+  const cmp = doc.querySelector('prerender-cmp');
+  if (!cmp) {
+    throw new Error(`missing prerender-cmp`);
+  }
+
+  clearTimeout(tmr);
+
+  console.log('🛁  validated test/end-to-end/hydrate\n');
+}
+
+const tmr = setTimeout(() => {
+  console.error(`validated test/end-to-end/hydrate timeout!`);
+  process.exit(1);
+}, 10000);
+
+main()
+  .then(() => {
+    whyIsNodeRunning();
+  })
+  .catch(e => {
+    clearTimeout(tmr);
+    console.error('🧨 ' + e + ' 🧨');
+    process.exit(1);
+  });