Add ActionDispatch::SystemTestCase#fill_in_rich_text_area

2 files changed, 54 insertions, 0 deletions

diff --git a/actiontext/lib/action_text/engine.rb b/actiontext/lib/action_text/engine.rb
index 51ff5b575b..0c2aebfd08 100644
--- a/actiontext/lib/action_text/engine.rb
+++ b/actiontext/lib/action_text/engine.rb
@@ -46,5 +46,12 @@ module ActionText
         before_action { ActionText::Content.renderer = ApplicationController.renderer.new(request.env) }
       end
     end
+
+    initializer "action_text.system_test_helper" do
+      ActiveSupport.on_load(:action_dispatch_system_test_case) do
+        require "action_text/system_test_helper"
+        include ActionText::SystemTestHelper
+      end
+    end
   end
 end
diff --git a/actiontext/lib/action_text/system_test_helper.rb b/actiontext/lib/action_text/system_test_helper.rb
new file mode 100644
index 0000000000..6c9dcc11a7
--- /dev/null
+++ b/actiontext/lib/action_text/system_test_helper.rb
@@ -0,0 +1,47 @@
+# 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+
+    # * 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>"
+    #
+    #   # <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, with:)
+      page.execute_script(<<~JS, find(:rich_text_area, locator).native, with.to_s)
+        const [element, html] = arguments;
+        element.editor.loadHTML(html);
+      JS
+    end
+  end
+end
+
+Capybara.add_selector :rich_text_area do
+  label "rich-text area"
+  xpath do |locator|
+    input_located_by_name = XPath.anywhere(:input).where(XPath.attr(:name) == locator).attr(:id)
+
+    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)
+  end
+end