Can I test a view function in Elm program that returns a Html.Styled msg instead of Html msg? Using Test.Html gives me an error

Question

I am testing an Elm application and in its view functions, the Html module is replaced by Accessibility.Styled module. This is an example of a module and its view function:

    import Accessibility.Styled as Html exposing (Html)
    import Css exposing (..)   
    import Http
    import Nri.Ui.Button.V10 as Button
    import Nri.Ui.Container.V2 as Container
    import Nri.Ui.Heading.V2 as Heading
    import Nri.Ui.TextInput.V7 as TextInput
    import Session as Session exposing (getSession)

    type alias Model =
        { apiBaseUrl : String
        , email : String
        , password : String
        , showPassword : Bool
        , error : Maybe Http.Error
        , processing : Bool
        }


    type Msg
        = Email String
        | Password String
        | SetShowPassword Bool
        | SubmittedForm


    view : Model -> Html Msg
    view model =
        Container.view
            [ Container.css [ width (pct 33), margin auto ]
            , Container.html
                [ Heading.h3 [ Heading.css [ marginBottom (px 20) ] ] [ Html.text "Prijava korisnika" ]
                , TextInput.view "Email" [ TextInput.email Email, TextInput.value model.email ]
                , TextInput.view "Password" [ TextInput.currentPassword { onInput = Password,        showPassword = model.showPassword, setShowPassword = SetShowPassword }, TextInput.value    model.password ]
                , Button.button "Log in"
                    [ Button.primary
                    , Button.onClick SubmittedForm
                    , Button.css [ marginTop (px 20) ]
                    ]
                ]
            ]

When writing tests for views, I tried using the Html.Test like so:

    module LoginPageTests exposing (updateTests, updateErrorTests)
    import Expect exposing (Expectation, err)
    import Fuzz exposing (Fuzzer, string, bool)
    import Test exposing (..)
    import FuzzerHelper exposing (httpErrorFuzzer)
    import LoginPage exposing (Msg(..), Model, update, updateError)
    import Test.Html.Query as Query
    import Test.Html.Selector exposing (attribute, tag, text)

    viewTests = 
        [fuzz loginModelFuzzer "check view function" <|
        \model -> 
            model 
            |> LoginPage.view 
            |> Query.fromHtml
            |> Query.find [tag "btn"]
            |> Query.count (Expect.equal 1)

        ]

I get this error:

TYPE MISMATCH - This function cannot handle the argument sent through the (|>) pipe:

13|         model 
14|         |> LoginPage.view 
15|         |> Query.fromHtml
               #^^^^^^^^^^^^^^#
The argument is:

    #Accessibility.Styled.Html Msg#

But (|>) is piping it to a function that expects:

    #Html.Html msg#Elm

Is it possible to test this view if its return type is Accessibility.Styled.Html?

Answer 1

I assume you are using lukewestby/accessible-html-with-css-temp-19?

I did not test this, but from the docs I'd say that you need to add Html.Styled.toUnstyled to your pipeline to fix your type mismatch error.

As lukewestby/accessible-html-with-css-temp-19 is using rtfeldman/elm-css, adding tests for it should work like testing elm-css.