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?
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.