eeue56/elm-html-test


Test elm-html in Elm!

http://package.elm-lang.org/packages/eeue56/elm-html-test/latest

License: BSD-3-Clause

Language: Elm

Keywords: elm, elm-html, test


elm-html-test

Test views by writing expectations about Html values. Build Status

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:

  1. Call Query.fromHtml on your Html to begin querying it.
  2. Use queries like Query.find, Query.findAll, and Query.children to find the elements to test.
  3. Create expectations using things like Query.has and Query.count.

These are normal expectations, so you can use them with fuzz just as easily as with test!

Querying

Queries come in two flavors: Single and Multiple.

This is because some queries are expected to return a single result, whereas others may return multiple results.

If a 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 Single and 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!

If you have a Multiple and want to use an expectation that works on a Single, such as Query.has, you can use Query.each to run the expectation on each of the elements in the Multiple.

Selecting elements by Html.Attribute msg

Ordinary 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.class and Html.Attributes.classList will work the same as Test.Html.Selector.classes, matching any element with at least the given classes. This behavior echoes that of element.querySelectorAll('.my-class') from JavaScript, where any element with at least .my-class will match the query.

  • Html.Attributes.style will work the same way as Test.Html.Selector.styles, matching any element with at least the given style properties.

  • Any other String attributes and properties like title, or Bool attributes like disabled will match elements with the exact value for those attributes.

  • Any attributes from Html.Events, or attributes with values that have types other than String or 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" ) ]
                        ]
        ]

Releases

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

Project Statistics

Sourcerank 8
Repository Size 205 KB
Stars 57
Forks 15
Watchers 5
Open issues 14
Dependencies 17
Contributors 12
Tags 18
Created
Last updated
Last pushed

Top Contributors See all

Richard Feldman Noah Rogério Chaves Luke Westby Christoph Hermann Folkert de Vries Frank Rosner Scott Corgan Juan Edi Oliver Searle-Barnes Brooke Guillaume

Packages Referencing this Repo

eeue56/elm-html-test
Write tests for your Html.
Latest release 5.2.0 - Updated - 57 stars

Recent Tags See all

5.2.0 March 09, 2018
5.1.3 February 18, 2018
5.1.2 December 05, 2017
5.1.1 August 24, 2017
5.1.0 August 12, 2017
5.0.1 August 03, 2017
5.0.0 July 17, 2017
4.1.0 June 13, 2017
4.0.0 June 01, 2017
3.1.1 May 24, 2017
3.1.0 May 24, 2017
3.0.0 May 15, 2017
2.0.0 May 06, 2017
1.1.2 May 02, 2017
1.1.1 May 02, 2017

Interesting Forks See all

CNXTEoE/elm-html-test
Test elm-html in Elm!
Elm - Updated - 1 stars

Something wrong with this page? Make a suggestion

Last synced: 2018-01-02 16:34:38 UTC

Login to resync this repository