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

Question

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

\n

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

\n

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

\n

    <internals>\n    \xe2\x95\xb7\n    \xe2\x94\x82 Expect.equal\n    \xe2\x95\xb5\n    <internals>\n

\n

这根本没有帮助。我怎样才能得到更有意义的错误消息？有没有办法对Html节点进行字符串化？我环顾四周的文档elm-html，但没有找到任何东西。

\n

Answer 1

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

\n

我在 Ellie 上构建了一个示例，以下是测试的基础知识：

\n

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

\n

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

\n

> Hello World\n\n    \xe2\x96\xbc Query.fromHtml\n\n        <div>\n            Hello World!\n        </div>\n\n\n    \xe2\x96\xbc Query.has [ text "hello world" ]\n\n    > has text "hello world"\n

\n