Phoenix LiveView登录表单测试问题：字段匹配与登录失败排查

核心问题 #

你的测试失败主要有两个关键原因：

1. 提供的登录表单代码仅包含username输入字段，缺失password字段，导致提交时无法传递password参数，触发登录验证失败。
2. 测试用例的参数传递方式需要调整，确保与表单字段的name属性完全匹配。

修正步骤 #

1. 完善登录表单 #

首先补充password输入字段，保证其name属性为password，与测试中的参数键一致：

<form class="login-form" phx-submit="submit_login">
  <div class="p-1 grid place-items-center">
    <label for="username" style="margin-bottom: 10px">Username:</label>
    <input class="login-input" type="text" id="username" name="username" />
  </div>
  <div class="p-1 grid place-items-center">
    <label for="password" style="margin-bottom: 10px">Password:</label>
    <input class="login-input" type="password" id="password" name="password" />
  </div>
  <button type="submit">Login</button>
</form>

2. 修正测试用例 #

方式一：使用element/2 + render_submit

直接定位表单元素，传递与表单name完全匹配的参数：

test "logs in with element submit" do
  {:ok, view, _html} = live(Phoenix.ConnTest.build_conn(), "/login")

  result = 
    view
    |> element("[phx-submit='submit_login']")
    |> render_submit(%{"username" => "mk", "password" => "123"})

  assert result =~ "Central hub"
end

方式二：使用form/3 + render_submit

通过表单类名定位，直接传递与字段name对应的键值对：

test "logs in with form helper" do
  {:ok, view, _html} = live(Phoenix.ConnTest.build_conn(), "/login")

  assert view
         |> form(".login-form", username: "mk", password: "123")
         |> render_submit() =~ "Central hub"
end

3. 验证事件处理器逻辑 #

确保handle_event中登录成功后，会跳转或渲染包含"Central hub"的页面：

def handle_event("submit_login", %{"username" => username, "password" => password}, socket) do
  case Auth.login(username, password) do
    {:ok, user} ->
      socket = assign(socket, :current_user, user)
      {:noreply, push_redirect(socket, to: "/hub")} # 假设/hub页面包含"Central hub"
    {:error, _reason} ->
      socket = put_flash(socket, :error, "Invalid credentials")
      {:noreply, socket}
  end
end

关键注意点 #

• 测试参数的键必须与表单输入字段的name属性完全一致，比如name="username"对应参数中的"username"键。
• 确保测试使用的用户名、密码与Auth.login的验证逻辑匹配，避免因实际验证失败导致测试不通过。

内容的提问来源于stack exchange，提问作者Martin Kalling