fix(web-components): avoid rendering false boolean as text

aralroca · aralroca · commit 22fda9623836 · 2023-11-05T09:13:09.000+01:00
diff --git a/src/core/render-to-readable-stream/index.test.tsx b/src/core/render-to-readable-stream/index.test.tsx
@@ -39,9 +39,9 @@ describe("brisa core", () => {
 
       const expected = `<div class="test">Hello World</div>`;
       expect(result).toEqual(expected);
-      expect(mockConsoleError.mock.calls[0]).toEqual([
+      expect(mockConsoleError.mock.calls[0].at(0) as unknown as string).toEqual(
         "You should have a <head> tag in your document. Please review your layout. You can experiment some issues with browser JavaScript code without it.",
-      ]);
+      );
     });
 
     it("should not console.error when it has a <head> tag", async () => {
diff --git a/src/utils/brisa-element/index.test.ts b/src/utils/brisa-element/index.test.ts
@@ -1,4 +1,12 @@
-import { describe, it, expect, beforeAll, afterAll, mock } from "bun:test";
+import {
+  describe,
+  it,
+  expect,
+  beforeAll,
+  afterAll,
+  mock,
+  afterEach,
+} from "bun:test";
 import { GlobalRegistrator } from "@happy-dom/global-registrator";
 import { serialize } from "../serialization";
 
@@ -1794,14 +1802,50 @@ describe("utils", () => {
       expect(webComponent?.shadowRoot?.innerHTML).toBe(`<div>Barbara</div>`);
     });
 
-    it.todo(
-      "should work dangerHTML to inject HTML in a web-component",
-      () => {},
-    );
+    it("should work with booleans and numbers in the same way than React", () => {
+      const Component = ({}, { h }: any) =>
+        h(null, {}, [
+          [null, {}, () => true && ["div", {}, "TRUE"]],
+          [null, {}, () => false && ["div", {}, "FALSE"]],
+          [null, {}, () => 1 && ["div", {}, "TRUE"]],
+          [null, {}, () => 0 && ["div", {}, "FALSE"]],
+        ]);
+
+      customElements.define("bool-component", brisaElement(Component));
+
+      document.body.innerHTML = "<bool-component />";
+      const boolComponent = document.querySelector(
+        "bool-component",
+      ) as HTMLElement;
+
+      expect(boolComponent?.shadowRoot?.innerHTML).toBe(
+        "<div>TRUE</div><div>TRUE</div>0",
+      );
+    });
+
+    it("should work with booleans and numbers from props in the same way than React", () => {
+      const Component = ({ first, second, third, fourth }: any, { h }: any) =>
+        h(null, {}, [
+          [null, {}, () => first.value && ["div", {}, "TRUE"]],
+          [null, {}, () => second.value && ["div", {}, "FALSE"]],
+          [null, {}, () => third.value && ["div", {}, "TRUE"]],
+          [null, {}, () => fourth.value && ["div", {}, "FALSE"]],
+        ]);
 
-    it.todo(
-      "should not be possible to inject HTML without dangerHTML",
-      () => {},
-    );
+      customElements.define(
+        "bool-component",
+        brisaElement(Component, ["first", "second", "third", "fourth"]),
+      );
+
+      document.body.innerHTML =
+        "<bool-component first='true' second='false' third='1' fourth='0' />";
+      const boolComponent = document.querySelector(
+        "bool-component",
+      ) as HTMLElement;
+
+      expect(boolComponent?.shadowRoot?.innerHTML).toBe(
+        "<div>TRUE</div><div>TRUE</div>0",
+      );
+    });
   });
 });
diff --git a/src/utils/brisa-element/index.ts b/src/utils/brisa-element/index.ts
@@ -158,7 +158,7 @@ export default function brisaElement(
                 lastNodes = arr(el.childNodes).filter(
                   (node) => !currentElNodes.includes(node),
                 );
-              } else {
+              } else if ((child as unknown as boolean) !== false) {
                 const textNode = createTextNode(child as string);
 
                 insertOrUpdate(textNode);
@@ -170,7 +170,7 @@ export default function brisaElement(
               childOrPromise.then(startEffect);
             else startEffect(childOrPromise);
           });
-        } else {
+        } else if ((children as unknown as boolean) !== false) {
           el.appendChild(createTextNode(children));
         }
 
