use other selector syntax in by_id (fixes phoenixframework#3144)

SteffenDE · Mar 1, 2024 · fe32851 · fe32851
1 parent e66beb6
commit fe32851
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 6 deletions.
diff --git a/lib/phoenix_live_view/test/dom.ex b/lib/phoenix_live_view/test/dom.ex
@@ -569,7 +569,7 @@ defmodule Phoenix.LiveViewTest.DOM do
   end
 
   defp by_id(html_tree, id) do
-    html_tree |> Floki.find("##{id}") |> List.first()
+    html_tree |> Floki.find(~s([id="#{id}"])) |> List.first()
   end
 
   def parent_id(html_tree, child_id) do

diff --git a/test/phoenix_live_view/test/dom_test.exs b/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