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

Question

我有一个 viewFunc return 一些 HTML。我想验证它的 return 值。我使用 elm-test.

编写了一个测试用例

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

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

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

一点用都没有。我怎样才能得到更有意义的错误信息？有没有办法对 Html 节点进行字符串化？我 looked around in the documentation of elm-html 但什么也没找到。

Answer 1

与其将 Html msg 的整个块放在一起比较，不如使用 Test.Html.Query module (and corresponding Test.Html.Selector and Test.Html.Event 模块获得更好的结果。这允许您创建更有针对性的测试（例如，测试某个元素是否具有特定文本或某个 class，而不是测试整个 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"

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

Convert Elm Html nodes to string output

html

elm