|elm-version||0.18.0 <= v < 0.19.0|
|Committed At||2018-03-09 14:17:53 UTC|
import Html import Html.Attributes exposing (class) import Test exposing (test) import Test.Html.Query as Query import Test.Html.Selector exposing (text, tag) test "Button has the expected text" <| \() -> Html.div [ class "container" ] [ Html.button  [ Html.text "I'm a button!" ] ] |> Query.fromHtml |> Query.find [ tag "button" ] |> Query.has [ text "I'm a button!" ]
These tests are designed to be written in a pipeline like this:
Htmlto begin querying it.
Query.childrento find the elements to test.
This is because some queries are expected to return a single result, whereas others may return multiple results.
Single query finds exactly one result, it will succeed and continue with
any further querying or expectations. If it finds zero results, or more than one,
the test will fail.
Since other querying and expectation functions are written in terms of
Multiple, the compiler can help make sure queries are connected as
expected. For example,
count accepts a
Multiple, because counting a single element does not make much sense!
Html.Attribute msg values can be used to select elements using
Test.Html.Selector.attribute. It is important when using this selector to
understand its behavior.
Html.Attributes.classList will work the same as
matching any element with at least the given classes. This behavior echoes
element with at least
.my-class will match the query.
Html.Attributes.style will work the same way as
matching any element with at least the given style properties.
String attributes and properties like
disabled will match elements with the exact value for those
Any attributes from
Html.Events, or attributes with values that have types
Bool will not match anything.
The example below demonstrates usage
import Html import Html.Attributes as Attr import Test exposing (test, describe) import Test.Html.Query as Query import Test.Html.Selector exposing (attribute, text) tests = describe "attributes" [ test "the welcome <h1> says hello!" <| \() -> Html.div  [ Html.h1 [ Attr.title "greeting" ] [ Html.text "Hello!" ] ] |> Query.fromHtml |> Query.find [ attribute <| Attr.title "greeting" ] |> Query.has [ text "Hello!" ] , test "the .Hello.World div has the class Hello" <| \() -> Html.div [ Attr.classList [ ( True, "Hello" ) , ( True, "World" ) ] ] |> Query.fromHtml |> Query.find [ attribute <| Attr.classList [ ( True, Hello ) ] ] , test "the header is red" <| \() -> Html.header [ Attr.style [ ( "backround-color", "red" ) , ( "color", "yellow" ) ] ] |> Query.fromHtml |> Query.find [ attribute <| Attr.style [ ( "backround-color", "red" ) ] ] ]
| Version | Notes | | ------- | ----- | | 5.1.2 | Fix bug with mapped and lazy views | 5.1.1 | Fix children | 5.1.0 | Add filtermap | 5.0.1 | Fix bug with lazy views | 5.0.0 | Allow querying by attributes | 4.1.0 | Query styles | 4.0.0 | Allow custom events | 3.0.0 | Allow events to be testable | 2.0.0 | Better support for events by @rogeriochaves | 1.1.0 | Support for events by @rogeriochaves | 1.0.0 | Initial release