garados007 / component / Component.Test

If you want to test your components you can use the automatic tests or you create a private main method in your component and open the page in elm reactor.

These methods helps you to create small component tests that you can test with elm reactor without writing a large boilerplate.

Helper Types


type alias DebugComponent model event =
{ model : model
, events : List event
, key : Maybe Browser.Navigation.Key 
}

The internal model alias that is used by element, application and applicationNoUrl.


type alias Program model msg event =
Platform.Program () (DebugComponent model event) msg

The test program type for component tests. This is an alias for Platform.Program but with an internal model and no flags.

Program

element : { init : ( model, Platform.Cmd.Cmd msg ), view : model -> Html msg, viewEvents : Maybe (List event -> Html Basics.Never), update : msg -> model -> Triple model (Platform.Cmd.Cmd msg) (List event), subscriptions : model -> Platform.Sub.Sub msg } -> Program model msg event

Creates a small test program that you can use to test your components. This is similar to Browser.element.

If you set a rendering function to viewEvents all events from the update method are recorded and shown in your HTML model. If the rendering function for viewEvents is Nothing all returned events are discarded and ignored.

-- don't need to be exposed. It is automaticly used by elm if you make this file directly or
-- open it in elm reactor.
main : Component.Test.Program MyComp MyCompMsg MyCompEvent
main =
    Component.Test.element
        { init = init
        , view = view
        , viewEvents = Nothing
        , update = update
        , subscriptions = subscriptions
        }

application : { init : Url -> Browser.Navigation.Key -> ( model, Platform.Cmd.Cmd msg ), view : model -> Html msg, viewEvents : Maybe (List event -> Html Basics.Never), update : Browser.Navigation.Key -> msg -> model -> Triple model (Platform.Cmd.Cmd msg) (List event), subscriptions : model -> Platform.Sub.Sub msg, onUrlRequest : Browser.UrlRequest -> msg, onUrlChange : Url -> msg } -> Program model msg event

Creates a small test program that you can use to test your components. This is similar to Browser.application.

This allows you to respond to url changes and navigate. You don't need to store the Key because it is automaticly provided in the update method for you.

If you set a rendering function to viewEvents all events from the update method are recorded and shown in your HTML model. If the rendering function for viewEvents is Nothing all returned events are discarded and ignored.

-- don't need to be exposed. It is automaticly used by elm if you make this file directly or
-- open it in elm reactor.
main : Component.Test.Program MyComp MyCompMsg MyCompEvent
main =
    Component.Test.application
        { init = init
        , view = view
        , viewEvents = Nothing
        , update = update
        , subscriptions = subscriptions
        , onUrlRequest = onUrlRequest
        , onUrlChange = onUrlChange
        }

applicationNoUrl : { init : ( model, Platform.Cmd.Cmd msg ), view : model -> Html msg, viewEvents : Maybe (List event -> Html Basics.Never), update : Browser.Navigation.Key -> msg -> model -> Triple model (Platform.Cmd.Cmd msg) (List event), subscriptions : model -> Platform.Sub.Sub msg, noop : msg } -> Program model msg event

Creates a small test program that you can use to test your components. This is similar to Browser.application.

This allows you to navigate the page. You don't need to store the Key because it is automaticly provided in the update method for you. You are not able to respond to url changes.

If you set a rendering function to viewEvents all events from the update method are recorded and shown in your HTML model. If the rendering function for viewEvents is Nothing all returned events are discarded and ignored.

-- don't need to be exposed. It is automaticly used by elm if you make this file directly or
-- open it in elm reactor.
main : Component.Test.Program MyComp MyCompMsg MyCompEvent
main =
    Component.Test.application
        { init = init
        , view = view
        , viewEvents = Nothing
        , update = update
        , subscriptions = subscriptions
        , noop = Noop
        }