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

【问题标题】：Convert Elm Html nodes to string output将 Elm Html 节点转换为字符串输出
【发布时间】：2021-11-18 21:58:42
【问题描述】：

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

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

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

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

这根本没有帮助。我怎么会有更有意义的错误信息？有没有办法对Html 节点进行字符串化？我looked around in the documentation of elm-html 但没有找到任何东西。

【问题讨论】：

这似乎不太可能。比较 Html 节点似乎通常都不可行。例如，您将如何将节点与事件处理程序进行比较？如果处理程序是匿名 lambda，其代码相同但接近不同的值怎么办？他们“平等”吗？您如何将它们转换为字符串以说明差异？
另请注意，这就是 elm-test 包含 Test.Html.* modules 的原因。
@glennsl 很公平，我明白你的意思。但是目前可以比较节点，我的测试用例运行。

标签： html elm

【解决方案1】：

使用Test.Html.Query 模块（以及相应的Test.Html.Selector 和Test.Html.Event 模块）可以获得更好的结果，而不是比较整个Html msg 块。这允许您创建更有针对性的测试（例如，测试某个元素是否具有某些文本或某个类，而不是测试整个 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"

【讨论】：