Include values from form in submit_form and follow_trigger_action

Closes #3885.

Author: SteffenDE

lib/phoenix_live_view/test/client_proxy.ex

@@ -653,6 +653,12 @@ defmodule Phoenix.LiveViewTest.ClientProxy do
     end)
   end
 
+  def handle_call({:get_lazy, %Element{} = element}, _from, state) do
+    view = fetch_view_by_topic!(state, proxy_topic(element))
+    {state, root} = root(state, view.id)
+    {:reply, {:ok, root}, state}
+  end
+
   def handle_call({:get_lazy, id}, _from, state) do
     {state, root} = root(state, id)
     {:reply, {:ok, root}, state}
@@ -1242,41 +1248,29 @@ defmodule Phoenix.LiveViewTest.ClientProxy do
 
   defp maybe_values(:hook, _root, _node, _element), do: {:ok, %{}}
 
-  defp maybe_values(type, root, {tag, attrs, _} = node, element)
+  defp maybe_values(type, root, {tag, _, _} = node, element)
        when type in [:change, :submit] do
     cond do
       tag == "form" ->
-        form_inputs = filtered_inputs(node)
-
-        {value_inputs, lazy_submitter} =
-          case Enum.into(attrs, %{}) do
-            %{"id" => id} ->
-              by_form_id = DOM.all(root, ~s<[form="#{id}"]>) |> DOM.to_tree()
-              named_inputs = filtered_inputs(by_form_id)
-
-              # All inputs including buttons
-              # Remove the named inputs first to remove any possible
-              # duplicates if the child inputs also had a form attribite.
-              value_inputs = (form_inputs -- named_inputs) ++ named_inputs
-
-              {value_inputs,
-               fn ->
-                 # a lazy function that returns a lazy node with all form inputs
-                 # that could be the submitter to collect the submitter by selector
-                 DOM.all(root, ~s<
-                    ##{id} :is(input, button):not([form]:not([form="#{id}"])),
-                    :is(input, button)[form="#{id}"]
-                  >)
-               end}
-
-            _ ->
+        value_inputs = DOM.all_value_inputs(node, root)
+        defaults = DOM.collect_form_values(node, root, fn defaults -> defaults end)
+
+        lazy_submitter =
+          case TreeDOM.attribute(node, "id") do
+            nil ->
               # to collect the submitter by selector,
               # need to convert the tree to a lazy here :(
-              {form_inputs, fn -> DOM.to_lazy([node]) end}
+              fn -> DOM.to_lazy([node]) end
+
+            id ->
+              # a lazy function that returns a lazy node with all form inputs
+              # that could be the submitter to collect the submitter by selector
+              fn -> DOM.all(root, ~s<
+                ##{id} :is(input, button):not([form]:not([form="#{id}"])),
+                :is(input, button)[form="#{id}"]
+              >) end
           end
 
-        defaults = Enum.reduce(value_inputs, Query.decode_init(), &form_defaults/2)
-
         with {:ok, defaults} <-
                maybe_submitter(defaults, type, lazy_submitter, element),
              {:ok, value} <-
@@ -1291,7 +1285,7 @@ defmodule Phoenix.LiveViewTest.ClientProxy do
         end
 
       type == :change and tag in ~w(input select textarea) ->
-        {:ok, form_defaults(node, Query.decode_init()) |> Query.decode_done()}
+        {:ok, DOM.collect_input_values(node)}
 
       true ->
         {:error, :invalid, "phx-#{type} is only allowed in forms, got #{inspect(tag)}"}
@@ -1308,13 +1302,6 @@ defmodule Phoenix.LiveViewTest.ClientProxy do
   defp deep_merge(_target, source),
     do: source
 
-  defp filtered_inputs(nodes) do
-    TreeDOM.filter(nodes, fn node ->
-      TreeDOM.tag(node) in ~w(input textarea select) and
-        is_nil(TreeDOM.attribute(node, "disabled"))
-    end)
-  end
-
   defp maybe_submitter(defaults, :submit, lazy, %Element{meta: %{submitter: element}}) do
     base = lazy.()
 
@@ -1394,81 +1381,6 @@ defmodule Phoenix.LiveViewTest.ClientProxy do
     end
   end
 
-  defp form_defaults(node, acc) do
-    tag = TreeDOM.tag(node)
-
-    if name = TreeDOM.attribute(node, "name") do
-      form_defaults(tag, node, name, acc)
-    else
-      acc
-    end
-  end
-
-  # Selectedness algorithm as outlined in
-  # https://html.spec.whatwg.org/multipage/form-elements.html#the-select-element
-  defp form_defaults("select", node, name, acc) do
-    options = TreeDOM.filter(node, &(TreeDOM.tag(&1) == "option"))
-
-    multiple_display_size =
-      case valid_display_size(node) do
-        int when is_integer(int) and int > 1 -> true
-        _ -> false
-      end
-
-    all_selected =
-      if TreeDOM.attribute(node, "multiple") || multiple_display_size do
-        Enum.filter(options, &TreeDOM.attribute(&1, "selected"))
-      else
-        List.wrap(
-          Enum.find(Enum.reverse(options), &TreeDOM.attribute(&1, "selected")) ||
-            Enum.find(options, &(!TreeDOM.attribute(&1, "disabled")))
-        )
-      end
-
-    Enum.reduce(all_selected, acc, fn selected, acc ->
-      Plug.Conn.Query.decode_each({name, TreeDOM.attribute(selected, "value")}, acc)
-    end)
-  end
-
-  defp form_defaults("textarea", node, name, acc) do
-    value = TreeDOM.to_text(node, false)
-
-    if value == "" do
-      Plug.Conn.Query.decode_each({name, ""}, acc)
-    else
-      Plug.Conn.Query.decode_each({name, String.replace_prefix(value, "\n", "")}, acc)
-    end
-  end
-
-  defp form_defaults("input", node, name, acc) do
-    type = TreeDOM.attribute(node, "type") || "text"
-    value = TreeDOM.attribute(node, "value") || default_value(type)
-
-    cond do
-      type in ["radio", "checkbox"] ->
-        if TreeDOM.attribute(node, "checked") do
-          Plug.Conn.Query.decode_each({name, value}, acc)
-        else
-          acc
-        end
-
-      type in ["image", "submit"] ->
-        acc
-
-      true ->
-        Plug.Conn.Query.decode_each({name, value}, acc)
-    end
-  end
-
-  defp valid_display_size(node) do
-    with size when not is_nil(size) <- TreeDOM.attribute(node, "size"),
-         {int, ""} when int > 0 <- Integer.parse(size) do
-      int
-    else
-      _ -> nil
-    end
-  end
-
   defp fill_in_map([{key, value} | rest], prefix, node, acc) do
     key = to_string(key)
 
@@ -1568,7 +1480,7 @@ defmodule Phoenix.LiveViewTest.ClientProxy do
     type = TreeDOM.attribute(node, "type") || "text"
 
     if type in ["radio", "checkbox", "hidden"] do
-      value = TreeDOM.attribute(node, "value") || default_value(type)
+      value = TreeDOM.attribute(node, "value") || DOM.default_value(type)
       {[type | types], [value | values]}
     else
       {[type | types], values}
@@ -1592,9 +1504,6 @@ defmodule Phoenix.LiveViewTest.ClientProxy do
     {types, values}
   end
 
-  defp default_value("checkbox"), do: "on"
-  defp default_value(_type), do: ""
-
   defp fill_in_name("", name), do: name
   defp fill_in_name(prefix, name), do: prefix <> "[" <> name <> "]"
 

lib/phoenix_live_view/test/dom.ex

@@ -4,6 +4,7 @@ defmodule Phoenix.LiveViewTest.DOM do
   @phx_component "data-phx-component"
 
   alias Phoenix.LiveViewTest.TreeDOM, as: Tree
+  alias Plug.Conn.Query
 
   defguardp is_lazy(html) when is_struct(html, LazyHTML)
 
@@ -230,4 +231,120 @@ defmodule Phoenix.LiveViewTest.DOM do
       {attribute(node, "id"), attribute(node, "data-phx-static")}
     end)
   end
+
+  ## Forms
+
+  def all_value_inputs({"form", attrs, _} = form, root) do
+    form_inputs = filtered_inputs(form)
+
+    case Enum.into(attrs, %{}) do
+      %{"id" => id} ->
+        by_form_id = all(root, ~s<[form="#{id}"]>) |> to_tree()
+        named_inputs = filtered_inputs(by_form_id)
+
+        # All inputs including buttons
+        # Remove the named inputs first to remove any possible
+        # duplicates if the child inputs also had a form attribite.
+        (form_inputs -- named_inputs) ++ named_inputs
+
+      _ ->
+        form_inputs
+    end
+  end
+
+  def collect_form_values(form, root, done \\ &Query.decode_done/1) do
+    form
+    |> all_value_inputs(root)
+    |> Enum.reduce(Query.decode_init(), &form_defaults/2)
+    |> then(done)
+  end
+
+  def collect_input_values(node) do
+    form_defaults(node, Query.decode_init()) |> Query.decode_done()
+  end
+
+  defp form_defaults(node, acc) do
+    tag = Tree.tag(node)
+
+    if name = Tree.attribute(node, "name") do
+      form_defaults(tag, node, name, acc)
+    else
+      acc
+    end
+  end
+
+  # Selectedness algorithm as outlined in
+  # https://html.spec.whatwg.org/multipage/form-elements.html#the-select-element
+  defp form_defaults("select", node, name, acc) do
+    options = Tree.filter(node, &(Tree.tag(&1) == "option"))
+
+    multiple_display_size =
+      case valid_display_size(node) do
+        int when is_integer(int) and int > 1 -> true
+        _ -> false
+      end
+
+    all_selected =
+      if Tree.attribute(node, "multiple") || multiple_display_size do
+        Enum.filter(options, &Tree.attribute(&1, "selected"))
+      else
+        List.wrap(
+          Enum.find(Enum.reverse(options), &Tree.attribute(&1, "selected")) ||
+            Enum.find(options, &(!Tree.attribute(&1, "disabled")))
+        )
+      end
+
+    Enum.reduce(all_selected, acc, fn selected, acc ->
+      Plug.Conn.Query.decode_each({name, Tree.attribute(selected, "value")}, acc)
+    end)
+  end
+
+  defp form_defaults("textarea", node, name, acc) do
+    value = Tree.to_text(node, false)
+
+    if value == "" do
+      Plug.Conn.Query.decode_each({name, ""}, acc)
+    else
+      Plug.Conn.Query.decode_each({name, String.replace_prefix(value, "\n", "")}, acc)
+    end
+  end
+
+  defp form_defaults("input", node, name, acc) do
+    type = Tree.attribute(node, "type") || "text"
+    value = Tree.attribute(node, "value") || default_value(type)
+
+    cond do
+      type in ["radio", "checkbox"] ->
+        if Tree.attribute(node, "checked") do
+          Plug.Conn.Query.decode_each({name, value}, acc)
+        else
+          acc
+        end
+
+      type in ["image", "submit"] ->
+        acc
+
+      true ->
+        Plug.Conn.Query.decode_each({name, value}, acc)
+    end
+  end
+
+  def default_value("checkbox"), do: "on"
+  def default_value(_type), do: ""
+
+  defp valid_display_size(node) do
+    with size when not is_nil(size) <- Tree.attribute(node, "size"),
+         {int, ""} when int > 0 <- Integer.parse(size) do
+      int
+    else
+      _ -> nil
+    end
+  end
+
+  defp filtered_inputs(nodes) do
+    Tree.filter(nodes, fn node ->
+      Tree.tag(node) in ~w(input textarea select) and
+        is_nil(Tree.attribute(node, "disabled"))
+    end)
+  end
 end

lib/phoenix_live_view/test/live_view_test.ex

@@ -1914,15 +1914,23 @@ defmodule Phoenix.LiveViewTest do
   end
 
   def __render_trigger_submit__(%Element{} = form, name, required_attr, error_msg) do
+    root = call(form, {:get_lazy, form})
+
     case render_tree(form) do
-      {"form", attrs, _child_nodes} ->
+      {"form", attrs, _child_nodes} = node ->
         if not List.keymember?(attrs, required_attr, 0) do
           raise ArgumentError, error_msg <> ", got: #{inspect(attrs)}"
         end
 
         {"action", path} = List.keyfind(attrs, "action", 0) || {"action", call(form, :url)}
         {"method", method} = List.keyfind(attrs, "method", 0) || {"method", "get"}
-        {method, path, form.form_data || %{}}
+
+        values =
+          node
+          |> DOM.collect_form_values(root)
+          |> Map.merge(form.form_data || %{})
+
+        {method, path, values}
 
       {tag, _, _} ->
         raise ArgumentError,

test/phoenix_live_view/integrations/elements_test.exs

@@ -608,12 +608,12 @@ defmodule Phoenix.LiveView.ElementsTest do
 
       assert conn.method == "GET"
       assert conn.request_path == "/elements"
-      assert conn.query_string == "foo=bar"
+      assert %{"foo" => "bar", "from-form" => "included"} = URI.decode_query(conn.query_string)
 
       conn = view |> form("#trigger-form-value", %{"baz" => "bat"}) |> follow_trigger_action(conn)
       assert conn.method == "POST"
       assert conn.request_path == "/not_found"
-      assert conn.params == %{"baz" => "bat"}
+      assert %{"baz" => "bat", "from-form" => "included"} = conn.params
     end
   end
 

test/support/live_views/elements.ex

@@ -244,6 +244,7 @@ defmodule Phoenix.LiveViewTest.Support.ElementsLive do
       phx-submit="form-submit-trigger"
       phx-trigger-action={@trigger_action}
     >
+      <input type="hidden" name="from-form" value="included" />
     </form>
 
     <form id="submit-form-default" action="/not_found"></form>
@@ -255,6 +256,7 @@ defmodule Phoenix.LiveViewTest.Support.ElementsLive do
       phx-submit="form-submit-trigger"
       phx-trigger-action={@trigger_action}
     >
+      <input type="hidden" name="from-form" value="included" />
     </form>
 
     <form id="named" phx-submit="form-submit-named">