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.