html - 将 Elm Html 节点转换为字符串输出

Question

我有一个返回一些 HTML 的 viewFunc。我想验证它的返回值。我使用 elm-test 编写了一个测试用例。

viewFunc |> Expect.equal (span [] [ text "hello world"]) 

只要我的测试用例通过，它就可以正常工作。但是，当它失败时，我收到以下错误:

    <internals>
    ╷
    │ Expect.equal
    ╵
    <internals>

这根本没有帮助。我怎样才能得到更有意义的错误消息？有没有办法对 Html 节点进行字符串化？我looked around in the documentation of elm-html但还没有发现任何东西。

Answer 1

使用 Test.Html.Query 可以获得更好的结果，而不是将整个 Html msg block 一起比较。模块(以及相应的 Test.Html.Selector 和 Test.Html.Event 模块)。这允许您创建更有针对性的测试(例如，测试某个元素是否具有特定文本或特定类，而不是测试整个 HTML 结构)。而且测试失败确实提供了更多上下文来帮助您进行调试。

我已经构建了 an example on Ellie ，以下是测试的基础知识:

test "Button has correct count" <|
    \() ->
        viewFunc
            |> Query.fromHtml
            |> Query.has [ Selector.text "hello world" ]

控制台中失败的结果将是:

> Hello World

    ▼ Query.fromHtml

        <div>
            Hello World!
        </div>


    ▼ Query.has [ text "hello world" ]

    > has text "hello world"