test: test template mount

hi-ogawa · Jun 30, 2024 · d958bfd · d958bfd
1 parent b4a8047
commit d958bfd
Show file tree

Hide file tree

Showing 5 changed files with 50 additions and 18 deletions.
diff --git a/packages/react-server/examples/basic/e2e/basic.test.ts b/packages/react-server/examples/basic/e2e/basic.test.ts
@@ -1221,3 +1221,29 @@ test("loading @js", async ({ page }) => {
   await expect(page.getByTestId("/test/loading")).toBeVisible();
   await page.getByText('params {"id":"1"}').click();
 });
+
+test("template @js", async ({ page }) => {
+  await page.goto("/test/template");
+  await page.getByText("template.tsx [mount: 1]").click();
+  await waitForHydration(page);
+
+  await page
+    .getByRole("link", { name: "• /test/template/x", exact: true })
+    .click();
+  await page.getByText("template.tsx [mount: 2]").click();
+  await page.getByText("[p1]/template.tsx [mount: 1]").click();
+
+  await page.getByRole("link", { name: "• /test/template/x/a" }).click();
+  await page.getByText("template.tsx [mount: 2]", { exact: true }).click();
+  await page.getByText("[p1]/template.tsx [mount: 2]").click();
+
+  await page.getByRole("link", { name: "• /test/template/x/b" }).click();
+  await page.getByText("template.tsx [mount: 2]", { exact: true }).click();
+  await page.getByText("[p1]/template.tsx [mount: 3]").click();
+
+  await page
+    .getByRole("link", { name: "• /test/template/y", exact: true })
+    .click();
+  await page.getByText("template.tsx [mount: 3]").click();
+  await page.getByText("[p1]/template.tsx [mount: 4]").click();
+});
diff --git a/packages/react-server/examples/basic/src/routes/test/template/[p1]/[p2]/template.tsx b/packages/react-server/examples/basic/src/routes/test/template/[p1]/[p2]/template.tsx
@@ -1,11 +1,9 @@
-import { ClientTime } from "../../_client";
+import { MountCount } from "../../_client";
 
 export default function Template(props: React.PropsWithChildren) {
   return (
     <div className="border p-2">
-      <div>
-        [p1]/[p2]/template.tsx <ClientTime />
-      </div>
+      <MountCount name="[p1]/[p2]/template.tsx" />
       {props.children}
     </div>
   );

diff --git a/packages/react-server/examples/basic/src/routes/test/template/[p1]/template.tsx b/packages/react-server/examples/basic/src/routes/test/template/[p1]/template.tsx
@@ -1,11 +1,9 @@
-import { ClientTime } from "../_client";
+import { MountCount } from "../_client";
 
 export default function Template(props: React.PropsWithChildren) {
   return (
     <div className="border p-2">
-      <div>
-        [p1]/template.tsx <ClientTime />
-      </div>
+      <MountCount name="[p1]/template.tsx" />
       {props.children}
     </div>
   );

diff --git a/packages/react-server/examples/basic/src/routes/test/template/_client.tsx b/packages/react-server/examples/basic/src/routes/test/template/_client.tsx
@@ -1,12 +1,24 @@
 "use client";
 
+import { defaultDict, once, tinyassert } from "@hiogawa/utils";
 import React from "react";
 
-export function ClientTime() {
-  const now = React.useSyncExternalStore(
-    React.useCallback(() => () => {}, []),
-    () => Date.now(),
-    () => null,
+const countMap = defaultDict(() => 0);
+
+export function MountCount(props: { name: string }) {
+  const elRef = React.useRef<HTMLElement>(null);
+
+  React.useEffect(
+    once(() => {
+      tinyassert(elRef.current);
+      elRef.current.textContent = String(++countMap[props.name]);
+    }),
+    [],
+  );
+
+  return (
+    <div>
+      {props.name} [mount: <span ref={elRef} />]
+    </div>
   );
-  return <>[now: {now}]</>;
 }
diff --git a/packages/react-server/examples/basic/src/routes/test/template/template.tsx b/packages/react-server/examples/basic/src/routes/test/template/template.tsx
@@ -1,11 +1,9 @@
-import { ClientTime } from "./_client";
+import { MountCount } from "./_client";
 
 export default function Template(props: React.PropsWithChildren) {
   return (
     <div className="border p-2">
-      <div>
-        template.tsx <ClientTime />
-      </div>
+      <MountCount name="template.tsx" />
       {props.children}
     </div>
   );