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 check it out here.

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.