Merge pull request #684 from auslavs/feliz_v3.0

Add Elmish Subscription Support and Tests to Feliz.UseElmish

Author: Freymaurer

src/Feliz.UseElmish/UseElmish.fs

@@ -133,3 +133,18 @@ type React =
 
     static member inline useElmish(init: 'Model * Cmd<'Msg>, update: 'Msg -> 'Model -> 'Model * Cmd<'Msg>, ?dependencies: obj array) =
         React.useElmish((fun () -> Program.mkProgram (fun () -> init) update (fun _ _ -> ())), ?dependencies=dependencies)
+
+    static member inline useElmish(init: 'Arg -> 'Model * Cmd<'Msg>, update: 'Msg -> 'Model -> 'Model * Cmd<'Msg>, subscribe: 'Model -> Sub<'Msg>, arg: 'Arg, ?dependencies: obj array) =
+        React.useElmish((fun () -> 
+            Program.mkProgram init update (fun _ _ -> ())
+            |> Program.withSubscription subscribe), arg, ?dependencies=dependencies)
+
+    static member inline useElmish(init: unit -> 'Model * Cmd<'Msg>, update: 'Msg -> 'Model -> 'Model * Cmd<'Msg>, subscribe: 'Model -> Sub<'Msg>, ?dependencies: obj array) =
+        React.useElmish((fun () -> 
+            Program.mkProgram init update (fun _ _ -> ())
+            |> Program.withSubscription subscribe), ?dependencies=dependencies)
+
+    static member inline useElmish(init: 'Model * Cmd<'Msg>, update: 'Msg -> 'Model -> 'Model * Cmd<'Msg>, subscribe: 'Model -> Sub<'Msg>, ?dependencies: obj array) =
+        React.useElmish((fun () -> 
+            Program.mkProgram (fun () -> init) update (fun _ _ -> ())
+            |> Program.withSubscription subscribe), ?dependencies=dependencies)

tests/Feliz.UseElmish/Main.test.fs

@@ -146,3 +146,87 @@ describe "UseElmish" <| fun () ->
                 expect(render.getByTestId("count")).toHaveTextContent "0" //"State should have been reset because dependency has changed"
             )
     }
+
+module Subscriber =
+    open Elmish
+    open Fable.Core.JS
+
+    type Model = {
+        Count: int
+        SubscriberTicks: int
+    }
+
+    type Msg =
+        | Increment
+        | SubscriberTick
+
+    let init initialValue =
+        {
+            Count = initialValue
+            SubscriberTicks = 0
+        },
+        Cmd.none
+
+    let update msg (model: Model) =
+        match msg with
+        | Increment ->
+            { model with Count = model.Count + 1 }, Cmd.none
+        | SubscriberTick ->
+            { model with SubscriberTicks = model.SubscriberTicks + 1 }, Cmd.none
+
+    let subscribeToTimer dispatch =
+        let subscriptionId =
+            setInterval
+                (fun _ -> dispatch SubscriberTick)
+                100
+        { new System.IDisposable with member _.Dispose() = clearInterval subscriptionId }
+
+    let subscribe _model =
+        [ ["timer"], subscribeToTimer ]
+
+    [<ReactComponent>]
+    let render (props: {| initialValue: int |}) =
+        let model, dispatch = React.useElmish((fun () -> init props.initialValue), update, subscribe, [||])
+
+        Html.div [
+            Html.h1 [
+                prop.testId "count"
+                prop.text model.Count
+            ]
+
+            Html.h1 [
+                prop.testId "subscriber-ticks"
+                prop.text model.SubscriberTicks
+            ]
+
+            Html.button [
+                prop.text "Increment"
+                prop.onClick (fun _ -> dispatch Increment)
+                prop.testId "increment"
+            ]
+        ]
+
+describe "UseElmish with subscriptions" <| fun () ->
+    testPromise "Elmish subscriptions work correctly" <| fun () -> promise {
+        let render = RTL.render(Subscriber.render {| initialValue = 0 |})
+
+        expect(render.getByTestId("count")).toHaveTextContent "0" //"Should start with initial count"
+        expect(render.getByTestId("subscriber-ticks")).toHaveTextContent "0" //"Should start with 0 subscriber ticks"
+
+        // Wait for subscriber to tick a few times
+        do! Promise.sleep 350
+
+        do!
+            RTL.waitFor (fun () ->
+                let ticks = render.getByTestId("subscriber-ticks").textContent |> int
+                expect(ticks >= 3).toBeTruthy() //"Subscriber should have ticked at least 3 times"
+            )
+
+        // Click increment button
+        render.getByTestId("increment").click()
+
+        do!
+            RTL.waitFor (fun () ->
+                expect(render.getByTestId("count")).toHaveTextContent "1" //"Count should have been incremented"
+            )
+    }