Sandbox

The sandbox module is helpful when developing components. It lets you run the component using elm reactor outside the system and define several test cases.

Create Sandbox

Wrap a component in a sandbox application.

This will render each test case and log all messages. Create a test file with a main function where you declare all test cases.

A sandbox module example for YourComponent:

import YourComponent exposing (Model, MsgIn, MsgOut)


main : SandboxProgram Model MsgIn MsgOut
main =
    Sandbox.ui
        { title = "Title of your component"
        , component = YourComponent.component
        , cases =
            [ testCase1
            , testCase2
            ]
        , stringifyMsgIn = Debug.toString -- Or roll your own if you want prettier messages.
        , stringifyMsgOut = Debug.toString
        , wrapView = identity
        }

Create a Test Case

A Test Case is just a record with a title and description together with a list of Actions you want to perform on your sandboxed component. You can also the component's map out messages to actions to simulate the outside system.

testCase1 : Sandbox.TestCase MsgIn MsgOut
testCase1 =
    { title = "Test Case Title"
    , desc = "Test Case Description"
    , init =
        [ Sandbox.sendMsg YourComponent.Hello
        , Sandbox.spawnChild "Child Title" YourComponent.ReceiveChildPID
        ]
    , onMsgOut = \msgOut ->
        case msgOut of
            YourComponent.ObserveSomething id ->
                [ YourComponent.RecevieDataFor id "Some data"
                    |> Sandbox.sendMsg
                    |> Sandbox.delay 1000
                ]

Actions