Use Floki.get_by_id/2 (fixes #3144) (#3145)

lib/phoenix_live_view/test/dom.ex

@@ -113,6 +113,8 @@ defmodule Phoenix.LiveViewTest.DOM do
 
   def to_text(html_tree), do: Floki.text(html_tree)
 
+  # TODO: rewrite to use Floki.get_by_id/2
+  # currently it does not raise when multiple elements are found
   def by_id!(html_tree, id) do
     case maybe_one(html_tree, "#" <> id) do
       {:ok, node} -> node
@@ -569,7 +571,7 @@ defmodule Phoenix.LiveViewTest.DOM do
   end
 
   defp by_id(html_tree, id) do
-    html_tree |> Floki.find("##{id}") |> List.first()
+    Floki.get_by_id(html_tree, id)
   end
 
   def parent_id(html_tree, child_id) do

mix.exs

@@ -45,7 +45,7 @@ defmodule Phoenix.LiveView.MixProject do
       {:esbuild, "~> 0.2", only: :dev},
       {:telemetry, "~> 0.4.2 or ~> 1.0"},
       {:jason, "~> 1.0", optional: true},
-      {:floki, "~> 0.30.0", only: :test},
+      {:floki, "~> 0.36.0", only: :test},
       {:ex_doc, "~> 0.29", only: :docs},
       {:makeup_eex, ">= 0.1.1", only: :docs},
       {:makeup_diff, "~> 0.1", only: :docs},

mix.lock

@@ -7,7 +7,7 @@
   "esbuild": {:hex, :esbuild, "0.7.1", "fa0947e8c3c3c2f86c9bf7e791a0a385007ccd42b86885e8e893bdb6631f5169", [:mix], [{:castore, ">= 0.0.0", [hex: :castore, repo: "hexpm", optional: false]}], "hexpm", "66661cdf70b1378ee4dc16573fcee67750b59761b2605a0207c267ab9d19f13c"},
   "ex_doc": {:hex, :ex_doc, "0.31.1", "8a2355ac42b1cc7b2379da9e40243f2670143721dd50748bf6c3b1184dae2089", [:mix], [{:earmark_parser, "~> 1.4.39", [hex: :earmark_parser, repo: "hexpm", optional: false]}, {:makeup_c, ">= 0.1.1", [hex: :makeup_c, repo: "hexpm", optional: true]}, {:makeup_elixir, "~> 0.14", [hex: :makeup_elixir, repo: "hexpm", optional: false]}, {:makeup_erlang, "~> 0.1", [hex: :makeup_erlang, repo: "hexpm", optional: false]}], "hexpm", "3178c3a407c557d8343479e1ff117a96fd31bafe52a039079593fb0524ef61b0"},
   "file_system": {:hex, :file_system, "0.2.10", "fb082005a9cd1711c05b5248710f8826b02d7d1784e7c3451f9c1231d4fc162d", [:mix], [], "hexpm", "41195edbfb562a593726eda3b3e8b103a309b733ad25f3d642ba49696bf715dc"},
-  "floki": {:hex, :floki, "0.30.1", "75d35526d3a1459920b6e87fdbc2e0b8a3670f965dd0903708d2b267e0904c55", [:mix], [{:html_entities, "~> 0.5.0", [hex: :html_entities, repo: "hexpm", optional: false]}], "hexpm", "e9c03524447d1c4cbfccd672d739b8c18453eee377846b119d4fd71b1a176bb8"},
+  "floki": {:hex, :floki, "0.36.0", "544d5dd8a3107f660633226b5805e47c2ac1fabd782fae86e3b22b02849b20f9", [:mix], [], "hexpm", "ab1ca4b1efb0db00df9a8e726524e2c85be88cf65ac092669186e1674d34d74c"},
   "html_entities": {:hex, :html_entities, "0.5.2", "9e47e70598da7de2a9ff6af8758399251db6dbb7eebe2b013f2bbd2515895c3c", [:mix], [], "hexpm", "c53ba390403485615623b9531e97696f076ed415e8d8058b1dbaa28181f4fdcc"},
   "jason": {:hex, :jason, "1.4.0", "e855647bc964a44e2f67df589ccf49105ae039d4179db7f6271dfd3843dc27e6", [:mix], [{:decimal, "~> 1.0 or ~> 2.0", [hex: :decimal, repo: "hexpm", optional: true]}], "hexpm", "79a3791085b2a0f743ca04cec0f7be26443738779d09302e01318f97bdb82121"},
   "makeup": {:hex, :makeup, "1.1.1", "fa0bc768698053b2b3869fa8a62616501ff9d11a562f3ce39580d60860c3a55e", [:mix], [{:nimble_parsec, "~> 1.2.2 or ~> 1.3", [hex: :nimble_parsec, repo: "hexpm", optional: false]}], "hexpm", "5dc62fbdd0de44de194898b6710692490be74baa02d9d108bc29f007783b0b48"},

test/phoenix_live_view/test/dom_test.exs

@@ -132,7 +132,8 @@ defmodule Phoenix.LiveViewTest.DOMTest do
       </div>
       """
 
-      {new_html, _removed_cids} = DOM.patch_id("phx-458", DOM.parse(html), DOM.parse(inner_html), [])
+      {new_html, _removed_cids} =
+        DOM.patch_id("phx-458", DOM.parse(html), DOM.parse(inner_html), [])
 
       new_html = DOM.to_html(new_html)
 
@@ -161,7 +162,8 @@ defmodule Phoenix.LiveViewTest.DOMTest do
       </div>
       """
 
-      {new_html, _removed_cids} = DOM.patch_id("phx-458", DOM.parse(html), DOM.parse(inner_html), [])
+      {new_html, _removed_cids} =
+        DOM.patch_id("phx-458", DOM.parse(html), DOM.parse(inner_html), [])
 
       new_html = DOM.to_html(new_html)
 
@@ -189,7 +191,8 @@ defmodule Phoenix.LiveViewTest.DOMTest do
       </div>
       """
 
-      {new_html, _removed_cids} = DOM.patch_id("phx-458", DOM.parse(html), DOM.parse(inner_html), [])
+      {new_html, _removed_cids} =
+        DOM.patch_id("phx-458", DOM.parse(html), DOM.parse(inner_html), [])
 
       new_html = DOM.to_html(new_html)
 
@@ -216,7 +219,8 @@ defmodule Phoenix.LiveViewTest.DOMTest do
       </div>
       """
 
-      {new_html, _removed_cids} = DOM.patch_id("phx-458", DOM.parse(html), DOM.parse(inner_html), [])
+      {new_html, _removed_cids} =
+        DOM.patch_id("phx-458", DOM.parse(html), DOM.parse(inner_html), [])
 
       new_html = DOM.to_html(new_html)
 
@@ -240,7 +244,8 @@ defmodule Phoenix.LiveViewTest.DOMTest do
       </div>
       """
 
-      {new_html, _removed_cids} = DOM.patch_id("phx-458", DOM.parse(html), DOM.parse(inner_html), [])
+      {new_html, _removed_cids} =
+        DOM.patch_id("phx-458", DOM.parse(html), DOM.parse(inner_html), [])
 
       new_html = DOM.to_html(new_html)
 
@@ -252,6 +257,30 @@ defmodule Phoenix.LiveViewTest.DOMTest do
       assert new_html =~ ~S( data-add)
       assert new_html =~ ~S(<div id="1">a</div>)
     end
+
+    test "patches elements with special characters in id (issue #3144)" do
+      html = """
+      <div data-phx-session="SESSIONMAIN" data-phx-main="true" id="phx-458">
+      <div id="div?param=foo" phx-update="ignore" data-attr="1">
+        <div id="1">a</div>
+      </div>
+      </div>
+      """
+
+      inner_html = """
+      <div id="div?param=foo" phx-update="ignore" data-attr="b">
+        <div id="1" class="foo">b</div>
+      </div>
+      """
+
+      {new_html, _removed_cids} =
+        DOM.patch_id("phx-458", DOM.parse(html), DOM.parse(inner_html), [])
+
+      new_html = DOM.to_html(new_html)
+
+      assert new_html =~ ~S(data-attr="b")
+      assert new_html =~ ~S(<div id="1">a</div>)
+    end
   end
 
   describe "merge_diff" do