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

huangapple go评论96阅读模式
英文:

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

问题

It is possible to test a view function that returns Accessibility.Styled.Html in Elm. To do so, you can use the appropriate testing libraries and functions that work with Accessibility.Styled.Html. Here's an example of how you can modify your test code to accommodate the return type Accessibility.Styled.Html:

module LoginPageTests exposing (viewTests)

import Expect exposing (Expectation, err)
import Fuzz exposing (Fuzzer, string, bool)
import Test exposing (..)
import FuzzerHelper exposing (httpErrorFuzzer)
import LoginPage exposing (Msg(..), Model, view) -- Use "view" from your module
import Test.Accessibility.Styled.Html as TestHtml -- Import Test.Accessibility.Styled.Html

viewTests =
    [ fuzz loginModelFuzzer "check view function"
        <|
        \model ->
            model
                |> view  -- Use your view function from LoginPage
                |> TestHtml.fromHtml -- Use Test.Accessibility.Styled.Html.fromHtml
                |> TestHtml.find [TestHtml.tag "btn"]
                |> TestHtml.count (Expect.equal 1)
    ]

In this modified code:

  1. Import Test.Accessibility.Styled.Html instead of Test.Html.Query to work with Accessibility.Styled.Html.
  2. Use your view function from the LoginPage module to render the view.
  3. Replace Query.fromHtml with TestHtml.fromHtml to parse the HTML returned by your view.
  4. Adjust the selectors and assertions accordingly based on your HTML structure.

With these modifications, you should be able to test your view function that returns Accessibility.Styled.Html.

英文:

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 -&gt; Html Msg
    view model =
        Container.view
            [ Container.css [ width (pct 33), margin auto ]
            , Container.html
                [ Heading.h3 [ Heading.css [ marginBottom (px 20) ] ] [ Html.text &quot;Prijava korisnika&quot; ]
                , TextInput.view &quot;Email&quot; [ TextInput.email Email, TextInput.value model.email ]
                , TextInput.view &quot;Password&quot; [ TextInput.currentPassword { onInput = Password,        showPassword = model.showPassword, setShowPassword = SetShowPassword }, TextInput.value    model.password ]
                , Button.button &quot;Log in&quot;
                    [ 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 &quot;check view function&quot; &lt;|
        \model -&gt; 
            model 
            |&gt; LoginPage.view 
            |&gt; Query.fromHtml
            |&gt; Query.find [tag &quot;btn&quot;]
            |&gt; Query.count (Expect.equal 1)

        ]


I get this error:

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

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

    #Accessibility.Styled.Html Msg#

But (|&gt;) 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?

答案1

得分: 0

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

我没有测试过这个,但从文档上看,我会说你需要将Html.Styled.toUnstyled添加到你的管道中,以解决类型不匹配的错误。

由于lukewestby/accessible-html-with-css-temp-19正在使用rtfeldman/elm-css,所以添加测试应该与测试elm-css类似。

英文:

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.

huangapple
  • 本文由 发表于 2023年8月4日 23:38:04
  • 转载请务必保留本文链接:https://go.coder-hub.com/76837382.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定