我可以在 Elm 程序中测试返回 Html.Styled 消息而不是 Html 消息的视图函数吗？使用 Test.Html 给我一个错误

Question

我正在测试一个Elm应用程序，在它的视图函数中，Html模块被Accessibility.Styled模块替换。这是模块及其视图函数的示例：

    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) ]
                    ]
                ]
            ]

在为视图编写测试时，我尝试使用 Html.Test，如下所示：

    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)

        ]

我收到此错误：

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

如果返回类型为 Accessibility.Styled.Html，是否可以测试此视图？

Answer 1

我假设您正在使用 lukewestby/accessible-html-with-css-temp-19？

我没有对此进行测试，但从文档中我会说您需要将

Html.Styled.toUnstyled

添加到管道中以修复类型不匹配错误。

由于 lukewestby/accessible-html-with-css-temp-19 正在使用 rtfeldman/elm-css，为其添加测试应该像测试 elm-css 一样工作。