Error message Capybara::ElementNotFound when using css selectors with dom_id in Rspec testing with Rails

Question

I'm using Rspec to test in Rails. I'm trying to get the test to click on the edit button so that it can edit the todo list. Since there are multiple edit links I added a dom_id in my index.html.erb file:

<h1>Listing Todo Lists</h1>

<table>
  <thead>
    <tr>
      <th>Title</th>
      <th>Description</th>
      <th colspan="3"></th>
    </tr>
  </thead>

  <tbody>
    <% @todo_lists.each do |todo_list| %>
      <tr id="<%= dom_id(todo_list) %>">
        <td><%= todo_list.title %></td>
        <td><%= todo_list.description %></td>
        <td><%= link_to 'Show', todo_list %></td>
        <td><%= link_to 'Edit', edit_todo_list_path(todo_list) %></td>
        <td><%= link_to 'Destroy', todo_list, method: :delete, data: { confirm: 'Are you sure?' } %></td>
      </tr>
    <% end %>
  </tbody>
</table>

<br>

<%= link_to 'New Todo list', new_todo_list_path %>

I keep getting the error message:

  1) Editing todo lists Updates todo list with correct info
     Failure/Error:
       within "#todo_list_#{todo_list.id}" do
         click_link "Edit"
       end

     Capybara::ElementNotFound:
       Unable to find css "#todo_list_"
     # ./spec/features/todo_lists/edit_spec.rb:11:in `update_todo_list'
     # ./spec/features/todo_lists/edit_spec.rb:24:in `block (2 levels) in <top (required)>'

This is my edit_spec.rb file:

require 'rails_helper'

describe "Editing todo lists" do
  def update_todo_list(options={})
    options[:title] ||= "My todo list"
    options[:description] ||= "This is my todo list"
    todo_list = options[:todo_list]

    visit "/todo_lists" 

    within "#todo_list_#{todo_list.id}" do
      click_link "Edit"
    end

    fill_in "Title", with: options[:title]
    fill_in "Description", with: options[:description]

    click_button "Update Todo list"
  end

  it "Updates todo list with correct info" do
    todo_list = TodoList.new(title: "Grocery list", description: "This is my grocery  list")

    update_todo_list(todo_list: todo_list, title: "New title", description: "New description")

    todo_list.reload

    expect(page).to_have content("Todo list was successfully updated")
    expect(todo_list.title).to eq("New title")
    expect(todo_list.description).to eq("New description")
  end
end

There isn't a problem with my controllers or models because when I try to edit a todo list when the server is launched, it works fine. Any help would be greatly appreciated!

Answer 1

Once you only called new on your model, it wasn't saved and therefore there isn't an id. That's why error is saying:

Unable to find css "#todo_list_"

Thus you must save your model so that it'll have an id to be interpolated on the selector.

it "Updates todo list with correct info" do
  todo_list = TodoList.create!(title: "Grocery list", description: "This is my grocery  list")
  ...