如何使用render_change结果匹配特定元素？

Question

测试 LiveView 表单

html = 
  view 
  |> element("#filter-form") 
  |> render_change(%{filter: %{days: "14"}})

我得到的结果是一个包含渲染的字符串html。

我想 assert 结果有一些特定的元素。可以用 element/2 这样的函数来完成

assert view |> element("#target", "test") |> has_element?()

但它只接受 LiveView 的实例，而不是 html 字符串。

断言 render_change/2 结果将包含带有特定文本的特定标签的最佳方法是什么？

Answer 1

您可以通过三种主要方式验证这一点。

第一个也是最简单的方法是将更新后的 HTML 与元素中的某些特定文本进行比较。所以，像这样：

html =
  view
  |> element("#filter-form")
  |> render_change(%{filter: %{days: "14"}})

assert html =~ "my specific text"

另一种方法是使用 Floki 解析 HTML 并找到您想要的元素，例如：

html =
  view
  |> element("#filter-form")
  |> render_change(%{filter: %{days: "14"}})

assert [element] =
  html
  |> Floki.parse_document!()
  |> Floki.find("#target")

并且 element 您还可以验证特定属性。

最后一个正是您建议的。 LiveView 测试中使用的 view 是处理事件的参考。因此，当您调用 render_* 测试辅助函数时，该函数的状态会发生变化。所以：

assert view |> element("#target", "test") |> has_element?()

通常应该可以工作。

如何使用render_change结果匹配特定元素？

How to use render_change result to match specific element?

elixir

phoenix-framework

ex-unit

phoenix-live-view