614580270d
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
56 lines
2.0 KiB
Ruby
56 lines
2.0 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
|