如何使用Rspec测试Turbo Rails？求最佳方法及示例

以下是针对你提供的Turbo Todo视图代码编写的RSpec系统测试示例，覆盖核心交互场景：

测试文件：spec/system/todos_spec.rb #

require "application_system_test_case"

class TodosSystemTest < ApplicationSystemTestCase
  setup do
    # 预先创建测试用的Todo
    @todo = Todo.create!(title: "初始待办事项")
  end

  test "点击编辑链接后，Turbo帧替换为编辑表单" do
    visit todos_path

    # 点击目标Todo的编辑链接
    within "##{dom_id(@todo)}_item" do
      click_link "Edit"
    end

    # 验证Turbo帧已替换为表单
    within turbo_frame_tag(dom_id(@todo)) do
      assert_selector "##{dom_id(@todo)}_form"
      assert_field "Title", with: "初始待办事项"
      assert_button "Update Todo"
      assert_link "Cancel"
      # 确认原内容已被替换
      assert_no_content "初始待办事项"
      assert_no_link "Edit"
    end
  end

  test "提交编辑表单后，Turbo帧更新为修改后的Todo内容" do
    visit todos_path

    # 进入编辑状态
    within "##{dom_id(@todo)}_item" do
      click_link "Edit"
    end

    # 修改标题并提交表单
    within turbo_frame_tag(dom_id(@todo)) do
      fill_in "Title", with: "更新后的待办事项"
      click_button "Update Todo"
    end

    # 验证Turbo帧已更新为新内容
    within turbo_frame_tag(dom_id(@todo)) do
      assert_content "更新后的待办事项"
      assert_link "Edit"
      # 确认表单已被替换
      assert_no_selector "##{dom_id(@todo)}_form"
    end

    # 验证Todo数据已持久化
    assert_equal "更新后的待办事项", @todo.reload.title
  end

  test "点击取消按钮后，Turbo帧恢复为原Todo内容" do
    visit todos_path

    # 进入编辑状态
    within "##{dom_id(@todo)}_item" do
      click_link "Edit"
    end

    # 修改标题后点击取消
    within turbo_frame_tag(dom_id(@todo)) do
      fill_in "Title", with: "临时修改的标题"
      click_link "Cancel"
    end

    # 验证Turbo帧恢复为初始内容
    within turbo_frame_tag(dom_id(@todo)) do
      assert_content "初始待办事项"
      assert_link "Edit"
      assert_no_selector "##{dom_id(@todo)}_form"
    end

    # 验证Todo数据未被修改
    assert_equal "初始待办事项", @todo.reload.title
  end
end

关键测试点说明 #

• Turbo帧定位：使用turbo_frame_tag辅助方法精准定位目标帧，确保测试只关注指定Turbo区域的变化
• 交互流程覆盖：覆盖从进入编辑、修改提交到取消操作的完整闭环
• 双向验证：既验证前端视图的正确更新，也验证后端数据的持久化状态
• 元素存在性校验：通过assert_selector/assert_no_selector、assert_content/assert_no_content确认Turbo替换的准确性

内容的提问来源于stack exchange，提问作者Chiara Ani