1
0
Fork 0
mirror of https://github.com/rails/rails.git synced 2022-11-09 12:12:34 -05:00
rails--rails/actiontext/lib/action_text/system_test_helper.rb
Sean Doyle 614580270d Locate fill_in_rich_text_area by <label> text
This commit dovetails with [#38551] in its focus on improving the
ability to test calls to `rich_text_area` in accessibility-minded ways.

In addition to searching for `<trix-editor>` elements with the
appropriate [`aria-label`][aria-label] attribute, also support locating
elements that match the corresponding `<label>` element's text.

Now that [basecamp/trix#829][] has been merged and released, clicking on
`<label>` elements that reference `<trix-editor>` elements will move
focus into the `<trix-editor>` element.

There are still some accessible [label text][] improvements that could
be made, but extending `fill_in_rich_text_area` to account for `<label
for="...">` elements is a good start.

[#38551]: https://github.com/rails/rails/pull/38551
[aria-label]: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute
[basecamp/trix#829]: https://github.com/basecamp/trix/pull/829
[label text]: https://github.com/basecamp/trix/pull/829#issuecomment-699119852
2020-10-02 18:02:14 -04:00

55 lines
2 KiB
Ruby

# frozen_string_literal: true
module ActionText
module SystemTestHelper
# Locates a Trix editor and fills it in with the given HTML.
#
# The editor can be found by:
# * its +id+
# * its +placeholder+
# * the text from its +label+ element
# * its +aria-label+
# * the +name+ of its input
#
# Examples:
#
# # <trix-editor id="message_content" ...></trix-editor>
# fill_in_rich_text_area "message_content", with: "Hello <em>world!</em>"
#
# # <trix-editor placeholder="Your message here" ...></trix-editor>
# fill_in_rich_text_area "Your message here", with: "Hello <em>world!</em>"
#
# # <label for="message_content">Message content</label>
# # <trix-editor id="message_content" ...></trix-editor>
# fill_in_rich_text_area "Message content", with: "Hello <em>world!</em>"
#
# # <trix-editor aria-label="Message content" ...></trix-editor>
# fill_in_rich_text_area "Message content", with: "Hello <em>world!</em>"
#
# # <input id="trix_input_1" name="message[content]" type="hidden">
# # <trix-editor input="trix_input_1"></trix-editor>
# fill_in_rich_text_area "message[content]", with: "Hello <em>world!</em>"
def fill_in_rich_text_area(locator = nil, with:)
find(:rich_text_area, locator).execute_script("this.editor.loadHTML(arguments[0])", with.to_s)
end
end
end
Capybara.add_selector :rich_text_area do
label "rich-text area"
xpath do |locator|
if locator.nil?
XPath.descendant(:"trix-editor")
else
input_located_by_name = XPath.anywhere(:input).where(XPath.attr(:name) == locator).attr(:id)
input_located_by_label = XPath.anywhere(:label).where(XPath.string.n.is(locator)).attr(:for)
XPath.descendant(:"trix-editor").where \
XPath.attr(:id).equals(locator) |
XPath.attr(:placeholder).equals(locator) |
XPath.attr(:"aria-label").equals(locator) |
XPath.attr(:input).equals(input_located_by_name) |
XPath.attr(:id).equals(input_located_by_label)
end
end
end