mdgriffith / style-elements-design-discussion

BSD 3-Clause "New" or "Revised" License
8 stars 0 forks source link

Testing #21

Open opsb opened 7 years ago

opsb commented 7 years ago

I had a look at how tests might work. I started off with

suite =
    describe "render"
        [ test "an element with some text" <|
            \() ->
                Expect.equal
                    (render stylesheet (el None [] <| text ""))
                    (div
                        [ Attributes.style
                            [ ( "pointer-events", "auto" )
                            , ( "display", "block" )
                            , ( "position", "relative" )
                            , ( "left", "0px" )
                            , ( "top", "0px" )
                            , ( "box-sizing", "border-box" )
                            ]
                        , Attributes.class "none"
                        ]
                        [ Html.text "" ]
                    )
        ]

which does the job but requires tests to specify all attributes regardless of their relevance to a particular test (the list quickly gets very long because the rendered output tends to be explicit about default values).

Another option would be to use http://package.elm-lang.org/packages/eeue56/elm-html-test with tests like:

suite =
    describe "render"
        [ test "an element with some more text" <|
            \() ->
                render stylesheet (el AllTheThingsRed [] <| text "")
                    |> Query.fromHtml
                    |> Query.find [ tag "div" ]
                    |> Query.has
                        [ attribute <|
                            style
                                [ ( "color", "red" )
                                , ( "background", "red" )
                                ]
                        ]
        ]

This approach allows you to just specify the aspects of the rendered html that you're interested in. The drawback though is that you need many expectations to cover all aspects of the structure and you don't get to see the structure of the html in the code.

An ideal solution would perhaps be something that allowed you to do:

suite =
    describe "render"
        [ test "an element with some text" <|
            \() ->
                Expect.equal
                    (render stylesheet (el AllTheThingsRed [] <| text ""))
                    (Expect.div
                        [ Expect.styles
                            [ ( "color", "red" )
                            , ( "background", "red" )
                            ]
                        , Expect.class "none"
                        ]
                        [ Expect.text "" ]
                    )
        ]

I haven't given much thought to how Expect.dev etc. might best be written but it should illustrate the idea, that you set the expectations as a html/attributes pattern that matches against the rendered output (the first approach but without having to specify everything).. Obviously there's a fair bit of work involved to get this approach and would probably be done in either in elm-html-test or another package entirely.