From 8be1295e2fcf936610c186cf427482b4d7eb798e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Julien=20Valverd=C3=A9?= <julien.valverde@mailo.com>
Date: Tue, 1 Jul 2025 00:11:34 +0200
Subject: [PATCH] Layer tests

---
 .../src/routes/effect-component-tests.tsx     | 35 ++++++++++++++++---
 1 file changed, 31 insertions(+), 4 deletions(-)

diff --git a/packages/example/src/routes/effect-component-tests.tsx b/packages/example/src/routes/effect-component-tests.tsx
index 47d10b9..fb95aae 100644
--- a/packages/example/src/routes/effect-component-tests.tsx
+++ b/packages/example/src/routes/effect-component-tests.tsx
@@ -2,6 +2,7 @@ import { Box, TextField } from "@radix-ui/themes"
 import { createFileRoute } from "@tanstack/react-router"
 import { Console, Effect, Layer, pipe, Ref, Runtime, SubscriptionRef } from "effect"
 import { ReactComponent, ReactHook, ReactManagedRuntime } from "effect-components"
+import * as React from "react"
 
 
 const LogLive = Layer.scopedDiscard(Effect.acquireRelease(
@@ -13,6 +14,10 @@ class TestService extends Effect.Service<TestService>()("TestService", {
     effect: Effect.bind(Effect.Do, "ref", () => SubscriptionRef.make("value")),
 }) {}
 
+class SubService extends Effect.Service<SubService>()("SubService", {
+    effect: Effect.bind(Effect.Do, "ref", () => SubscriptionRef.make("subvalue")),
+}) {}
+
 const runtime = ReactManagedRuntime.make(Layer.empty.pipe(
     Layer.provideMerge(LogLive),
     Layer.provideMerge(TestService.Default),
@@ -33,8 +38,30 @@ function RouteComponent() {
 
 const MyRoute = pipe(
     Effect.fn(function*() {
-        return yield* ReactComponent.use(MyTestComponent, C => <C />)
+        const runtime = yield* Effect.runtime()
+
+        const service = yield* TestService
+        const [value] = yield* ReactHook.useSubscribeRefs(service.ref)
+
+        return <>
+            <Box>
+                <TextField.Root
+                    value={value}
+                    onChange={e => Runtime.runSync(runtime)(Ref.set(service.ref, e.target.value))}
+                />
+            </Box>
+
+            {yield* ReactComponent.use(MyTestComponent, C => <C />).pipe(
+                Effect.provide(React.useMemo(() =>
+                    Effect.context<SubService>().pipe(
+                        Effect.provide(SubService.Default),
+                        Runtime.runSync(runtime),
+                    ),
+                []))
+            )}
+        </>
     }),
+
     ReactComponent.withDisplayName("MyRoute"),
     ReactComponent.withRuntime(runtime.context),
 )
@@ -44,8 +71,8 @@ const MyTestComponent = pipe(
     Effect.fn(function*() {
         const runtime = yield* Effect.runtime()
 
-        const testService = yield* TestService
-        const [value] = yield* ReactHook.useSubscribeRefs(testService.ref)
+        const service = yield* SubService
+        const [value] = yield* ReactHook.useSubscribeRefs(service.ref)
 
         yield* ReactHook.useEffect(() => Effect.andThen(
             Effect.addFinalizer(() => Console.log("MyTestComponent umounted")),
@@ -56,7 +83,7 @@ const MyTestComponent = pipe(
             <Box>
                 <TextField.Root
                     value={value}
-                    onChange={e => Runtime.runSync(runtime)(Ref.set(testService.ref, e.target.value))}
+                    onChange={e => Runtime.runSync(runtime)(Ref.set(service.ref, e.target.value))}
                 />
             </Box>
         </>