test(ui): add render html utils (#570)

Author: douglasduteil

packages/~/app/ui/package.json

@@ -37,6 +37,9 @@
     "./table": {
       "default": "./src/table/index.ts"
     },
+    "./testing": {
+      "default": "./src/testing/index.ts"
+    },
     "./visually_hidden": {
       "default": "./src/visually_hidden/index.ts"
     },

packages/~/app/ui/src/testing/index.ts

@@ -0,0 +1,29 @@
+//
+
+import type { Child } from "hono/jsx";
+import { renderToReadableStream } from "hono/jsx/dom/server";
+import { format } from "prettier";
+
+//
+
+export async function renderHTML(element: Child) {
+  const textDecoder = new TextDecoder();
+  const getStringFromStream = async (
+    stream: ReadableStream<Uint8Array>,
+  ): Promise<string> => {
+    const reader = stream.getReader();
+    let str = "";
+    for (;;) {
+      const { done, value } = await reader.read();
+      if (done) {
+        break;
+      }
+      str += textDecoder.decode(value);
+    }
+    return str;
+  };
+  return format(
+    await getStringFromStream(await renderToReadableStream(element)),
+    { parser: "html" },
+  );
+}

packages/~/organizations/ui/src/info/About.test.tsx

@@ -1,44 +1,38 @@
 //
 
+import { renderHTML } from "@~/app.ui/testing";
 import { expect, test } from "bun:test";
-import { Hono } from "hono";
-import { jsxRenderer } from "hono/jsx-renderer";
 import { About } from "./About";
 
 test("render about section", async () => {
-  const response = await new Hono()
-    .get("/", jsxRenderer(), ({ render }) =>
-      render(
-        <About
-          organization={{
-            cached_activite_principale: "cached_activite_principale",
-            cached_adresse: "cached_adresse",
-            cached_categorie_juridique: "cached_categorie_juridique",
-            cached_code_officiel_geographique:
-              "cached_code_officiel_geographique",
-            cached_code_postal: "cached_code_postal",
-            cached_enseigne: "cached_enseigne",
-            cached_est_active: true,
-            cached_etat_administratif: "cached_etat_administratif",
-            cached_libelle_activite_principale:
-              "cached_libelle_activite_principale",
-            cached_libelle_categorie_juridique:
-              "cached_libelle_categorie_juridique",
-            cached_libelle_tranche_effectif: "cached_libelle_tranche_effectif",
-            cached_libelle: "cached_libelle",
-            cached_nom_complet: "cached_nom_complet",
-            cached_tranche_effectifs: "cached_tranche_effectifs",
-            created_at: "2011-11-22 14:34:34.000Z",
-            id: 42,
-            siret: "siret",
-            updated_at: "2011-11-15T13:48:00.000Z",
-          }}
-        />,
-      ),
-    )
-    .request("/");
-  expect(response.status).toBe(200);
-  // expect(
-  //   await format(await response.text(), { parser: "html" }),
-  // ).toMatchSnapshot();
+  expect(
+    await renderHTML(
+      <About
+        organization={{
+          cached_activite_principale: "cached_activite_principale",
+          cached_adresse: "cached_adresse",
+          cached_categorie_juridique: "cached_categorie_juridique",
+          cached_code_postal: "cached_code_postal",
+          cached_est_active: true,
+          cached_nom_complet: "cached_nom_complet",
+          created_at: "2011-11-22 14:34:34.000Z",
+          id: 42,
+          siret: "siret",
+          cached_code_officiel_geographique:
+            "cached_code_officiel_geographique",
+          updated_at: "2011-11-15T13:48:00.000Z",
+          cached_libelle_activite_principale:
+            "cached_libelle_activite_principale",
+          cached_libelle_categorie_juridique:
+            "cached_libelle_categorie_juridique",
+          cached_libelle_tranche_effectif: "cached_libelle_tranche_effectif",
+          cached_libelle: "cached_libelle",
+          cached_enseigne: "cached_enseigne",
+          cached_tranche_effectifs: "cached_tranche_effectifs",
+          cached_etat_administratif: "cached_etat_administratif",
+        }}
+        id="about_section"
+      />,
+    ),
+  ).toMatchSnapshot();
 });

packages/~/organizations/ui/src/info/__snapshots__/About.test.tsx.snap

@@ -1,8 +1,7 @@
 // Bun Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`render about section 1`] = `
-"<!doctype html>
-<section>
+"<section id="about_section">
   <ul class="list-none pl-0">
     <li>
       Creation de l&#39;organisation :