英文:
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:
- Import
Test.Accessibility.Styled.Html
instead ofTest.Html.Query
to work withAccessibility.Styled.Html
. - Use your
view
function from theLoginPage
module to render the view. - Replace
Query.fromHtml
withTestHtml.fromHtml
to parse the HTML returned by your view. - 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 -> 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?
答案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.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论