Testing Ace Editor with Capybara & RSpec

I’ve been working with a developer who is putting together a Rails app to give other developers easy access to an in-browser Ruby development environment. You can <a href="http://rubyplex.com/">check it out here</a>.

One of the challenges we faced was how to test the Ace editor that users will enter their Ruby code into.

Here’s how we solved it:

# Important, `js: true` metadata
# required for Capybara to run this
# using a driver for a
# JavaScript-capable browser.
feature '...', js: true do

  scenario '...' do
    ...
    fill_in_editor_field "puts 'Hello World'"
    expect(page).to have_editor_display text: "puts 'Hello World'"
    ...
  end

  private

  def fill_in_editor_field(text)
    find_ace_editor_field.set text
  end

  # Ace uses textarea.ace_text-input as
  # its input stream.
  def find_ace_editor_field
    input_field_locator = ".ace_text-input"
    is_input_field_visible = false
    find(input_field_locator, visible: is_input_field_visible)
  end

  # Ace uses div.ace_content as its
  # output stream to display the code
  # entered in the textarea.
  def have_editor_display(options)
    editor_display_locator = ".ace_content"
    have_css(editor_display_locator, options)
  end
end

This solution has been tested in Firefox 40.0.3 on Mac OS X.