tests: increase test coverage

we've gone from 63% line coverage to 90%

Author: willtonkin

src/__tests__/__snapshots__/tests.ts.snap

@@ -2,11 +2,36 @@
 
 exports[`reactFromHtml E2E tests Should hydrate a basic component 1`] = `"<div class=\\"hydration-root\\" data-hydration-id=\\"1\\"><span>hydrated component</span></div>"`;
 
-exports[`reactFromHtml E2E tests Should hydrate components with custom query selectors 1`] = `"<div class=\\"hydration-root\\" data-hydration-id=\\"4\\"><span>hydrated component</span></div>"`;
+exports[`reactFromHtml E2E tests Should hydrate components with custom query selectors 1`] = `"<div class=\\"hydration-root\\" data-hydration-id=\\"5\\"><span>hydrated component</span></div>"`;
+
+exports[`reactFromHtml E2E tests Should not mutate static markup 1`] = `
+"
+    <div>
+      <p>Static HTML, with some <b style=\\"font-weight:bold;\\">interesting</b> markup</p>
+      <div data-hydratable=\\"test-myComponent\\"></div>
+    </div>"
+`;
+
+exports[`reactFromHtml E2E tests Should not mutate static markup of nested children 1`] = `
+"
+      <div class=\\"hydration-root\\" data-hydration-id=\\"6\\"><span>
+        <p>Static HTML, with some <b style=\\"font-weight:bold;\\">interesting</b> markup</p>
+        <form>
+          <input type=\\"checkbox\\" name=\\"confirm\\" value=\\"confirmed\\" checked=\\"\\">
+          <select id=\\"favourite-color\\">
+            <option value=\\"red\\">red</option>
+            <option value=\\"green\\" selected=\\"\\">green</option>
+            <option value=\\"blue\\">blue</option>
+          </select>
+          <textarea name=\\"message\\">Default value</textarea>
+        </form>
+      </span></div>
+      "
+`;
 
 exports[`reactFromHtml E2E tests Should work for nested hydratables 1`] = `
 "
-      <div class=\\"hydration-root\\" data-hydration-id=\\"2\\"><span>
+      <div class=\\"hydration-root\\" data-hydration-id=\\"3\\"><span>
         <b>
           Hello, World!
         </b>

src/__tests__/tests.ts

@@ -21,6 +21,26 @@ describe("reactFromHtml E2E tests", async () => {
     expect(documentElement.innerHTML).toMatchSnapshot();
   });
 
+  it("Should not re-hydrate already hydrated components on multiple `reactFromHtml()` calls", async () => {
+    const componentName: string = "myComponent";
+
+    const mockCall = jest.fn();
+    const hydrator = async () => {
+      mockCall();
+
+      return React.createElement("span", {}, "hydrated component");
+    };
+
+    const hydrators = { [`.${componentName}`]: hydrator };
+    const documentElement = document.createElement("div");
+
+    documentElement.innerHTML = `<div class="${componentName}"></div>`;
+
+    await reactFromHtml(documentElement, hydrators);
+    await reactFromHtml(documentElement, hydrators);
+    expect(mockCall).toBeCalledTimes(1);
+  });
+
   it("Should work for nested hydratables", async () => {
     const mockCall = jest.fn();
     const hydrators: IHydrator = {
@@ -71,4 +91,58 @@ describe("reactFromHtml E2E tests", async () => {
 
     expect(documentElement.innerHTML).toMatchSnapshot();
   });
+
+  it("Should not mutate static markup", async () => {
+    const componentName: string = "myComponent";
+
+    const hydrator = async () => {
+      return React.createElement("span", {}, "hydrated component");
+    };
+
+    const hydrators = { [`.${componentName}`]: hydrator };
+    const documentElement = document.createElement("div");
+
+    documentElement.innerHTML = `
+    <div>
+      <p>Static HTML, with some <b style="font-weight:bold;">interesting</b> markup</p>
+      <div data-hydratable="test-${componentName}"></div>
+    </div>`;
+
+    await reactFromHtml(documentElement, hydrators);
+
+    expect(documentElement.innerHTML).toMatchSnapshot();
+  });
+
+  it("Should not mutate static markup of nested children", async () => {
+    const mockCall = jest.fn();
+    const hydrators: IHydrator = {
+      [`.Parent`]: async (el: Element, hydrate) => {
+        mockCall();
+
+        return React.createElement("span", {}, await hydrate(el));
+      },
+    };
+
+    const documentElement = document.createElement("div");
+
+    documentElement.innerHTML = `
+      <div class="Parent">
+        <p>Static HTML, with some <b style="font-weight:bold;">interesting</b> markup</p>
+        <form>
+          <input type="checkbox" name="confirm" value="confirmed" checked>
+          <select id="favourite-color">
+            <option value="red">red</option>
+            <option value="green" selected>green</option>
+            <option value="blue">blue</option>
+          </select>
+          <textarea name="message">Default value</textarea>
+        </form>
+      </div>
+      `;
+
+    await reactFromHtml(documentElement, hydrators);
+
+    expect(documentElement.innerHTML).toMatchSnapshot();
+    expect(mockCall).toBeCalledTimes(1);
+  });
 });