raise on duplicate ids in LiveViewTest (#3560)

* raise on duplicate ids in LiveViewTest

When there are duplicate IDs in the DOM, morphdom will not be able to
correctly patch the DOM. This commit tries to catch those cases early by
walking the HTML tree in LiveViewTest and raising if there are any
duplicate IDs.

* Update lib/phoenix_live_view/test/dom.ex

---------

Co-authored-by: Chris McCord <chris@chrismccord.com>

Author: SteffenDE

lib/phoenix_live_view/test/dom.ex

@@ -25,9 +25,40 @@ defmodule Phoenix.LiveViewTest.DOM do
         ]
   def parse(html) do
     {:ok, parsed} = Floki.parse_document(html)
+    detect_duplicate_ids(parsed)
+
     parsed
   end
 
+  defp detect_duplicate_ids(tree), do: detect_duplicate_ids(tree, MapSet.new())
+
+  defp detect_duplicate_ids([node | rest], ids) do
+    ids = detect_duplicate_ids(node, ids)
+    detect_duplicate_ids(rest, ids)
+  end
+
+  defp detect_duplicate_ids({_tag_name, _attrs, children} = node, ids) do
+    case Floki.attribute(node, "id") do
+      [id] ->
+        if MapSet.member?(ids, id) do
+          raise """
+          Duplicate id found: #{id}
+
+          LiveView requires that all elements have unique ids, duplicate IDs will cause
+          undefined behavior at runtime, as DOM patching will not be able to target the correct
+          elements.
+          """
+        else
+          detect_duplicate_ids(children, MapSet.put(ids, id))
+        end
+
+      _ ->
+        detect_duplicate_ids(children, ids)
+    end
+  end
+
+  defp detect_duplicate_ids(_non_tag, seen_ids), do: seen_ids
+
   def all(html_tree, selector), do: Floki.find(html_tree, selector)
 
   def maybe_one(html_tree, selector, type \\ :selector) do

test/phoenix_live_view/integrations/event_test.exs

@@ -184,7 +184,7 @@ defmodule Phoenix.LiveView.EventTest do
       {:ok, view, _html} = live(conn, "/events-multi-js-in-component")
 
       html =
-        element(view, "#child_1 #push-to-self")
+        element(view, "#push-to-self-child_1")
         |> render_click()
 
       assert html =~ "child_1 count: 11"
@@ -195,7 +195,7 @@ defmodule Phoenix.LiveView.EventTest do
       {:ok, view, _html} = live(conn, "/events-multi-js-in-component")
 
       html =
-        element(view, "#child_1 #push-to-other-targets")
+        element(view, "#push-to-other-targets-child_1")
         |> render_click()
 
       assert html =~ "child_1 count: 1"

test/phoenix_live_view/integrations/nested_test.exs

@@ -147,7 +147,7 @@ defmodule Phoenix.LiveView.NestedTest do
     :ok = GenServer.call(view.pid, {:dynamic_child, :static})
 
     assert Exception.format(:exit, catch_exit(render(view))) =~
-             "expected selector \"#static\" to return a single element, but got 2"
+             "Duplicate id found: static"
   end
 
   describe "navigation helpers" do

test/support/live_views/events.ex

@@ -94,7 +94,7 @@ defmodule Phoenix.LiveViewTest.Support.EventsInComponentMultiJSLive do
       ~H"""
       <div id={@id}>
         <button
-          id="push-to-self"
+          id={"push-to-self-#{@id}"}
           phx-click={
             JS.push("inc", target: "#child_1", value: %{inc: 1})
             |> JS.push("inc", target: "#child_1", value: %{inc: 10})
@@ -104,7 +104,7 @@ defmodule Phoenix.LiveViewTest.Support.EventsInComponentMultiJSLive do
         </button>
 
         <button
-          id="push-to-other-targets"
+          id={"push-to-other-targets-#{@id}"}
           phx-click={
             JS.push("inc", target: "#child_2", value: %{inc: 2})
             |> JS.push("inc", target: "#child_1", value: %{inc: 1})