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.