1
0
Fork 0
mirror of https://github.com/rails/rails.git synced 2022-11-09 12:12:34 -05:00
rails--rails/actiontext/test/template/form_helper_test.rb

186 lines
8.4 KiB
Ruby
Raw Normal View History

# frozen_string_literal: true
2019-01-04 19:43:11 -05:00
require "test_helper"
class ActionText::FormHelperTest < ActionView::TestCase
tests ActionText::TagHelper
2019-09-24 00:47:35 -04:00
def form_with(*, **)
@output_buffer = super
end
teardown do
I18n.backend.reload!
end
setup do
I18n.backend.store_translations("placeholder",
activerecord: {
attributes: {
message: {
title: "Story title"
}
}
}
)
end
test "rich text area tag" do
message = Message.new
form_with model: message, scope: :message do |form|
rich_text_area_tag :content, message.content, { input: "trix_input_1" }
end
assert_dom_equal \
'<form action="/messages" accept-charset="UTF-8" method="post">' \
'<input type="hidden" name="content" id="trix_input_1" />' \
'<trix-editor input="trix_input_1" class="trix-content" data-direct-upload-url="http://test.host/rails/active_storage/direct_uploads" data-blob-url-template="http://test.host/rails/active_storage/blobs/redirect/:signed_id/:filename">' \
"</trix-editor>" \
"</form>",
output_buffer
end
test "form with rich text area" do
form_with model: Message.new, scope: :message do |form|
form.rich_text_area :content
end
assert_dom_equal \
'<form action="/messages" accept-charset="UTF-8" method="post">' \
'<input type="hidden" name="message[content]" id="message_content_trix_input_message" />' \
'<trix-editor id="message_content" input="message_content_trix_input_message" class="trix-content" data-direct-upload-url="http://test.host/rails/active_storage/direct_uploads" data-blob-url-template="http://test.host/rails/active_storage/blobs/redirect/:signed_id/:filename">' \
2019-01-04 19:43:11 -05:00
"</trix-editor>" \
"</form>",
output_buffer
end
test "form with rich text area having class" do
form_with model: Message.new, scope: :message do |form|
form.rich_text_area :content, class: "custom-class"
end
assert_dom_equal \
'<form action="/messages" accept-charset="UTF-8" method="post">' \
'<input type="hidden" name="message[content]" id="message_content_trix_input_message" />' \
'<trix-editor id="message_content" input="message_content_trix_input_message" class="custom-class" data-direct-upload-url="http://test.host/rails/active_storage/direct_uploads" data-blob-url-template="http://test.host/rails/active_storage/blobs/redirect/:signed_id/:filename">' \
2019-01-04 19:43:11 -05:00
"</trix-editor>" \
"</form>",
output_buffer
end
test "form with rich text area for non-attribute" do
form_with model: Message.new, scope: :message do |form|
form.rich_text_area :not_an_attribute
end
assert_dom_equal \
'<form action="/messages" accept-charset="UTF-8" method="post">' \
'<input type="hidden" name="message[not_an_attribute]" id="message_not_an_attribute_trix_input_message" />' \
'<trix-editor id="message_not_an_attribute" input="message_not_an_attribute_trix_input_message" class="trix-content" data-direct-upload-url="http://test.host/rails/active_storage/direct_uploads" data-blob-url-template="http://test.host/rails/active_storage/blobs/redirect/:signed_id/:filename">' \
2019-01-04 19:43:11 -05:00
"</trix-editor>" \
"</form>",
output_buffer
end
test "modelless form with rich text area" do
form_with url: "/messages", scope: :message do |form|
form.rich_text_area :content, { input: "trix_input_2" }
end
assert_dom_equal \
'<form action="/messages" accept-charset="UTF-8" method="post">' \
'<input type="hidden" name="message[content]" id="trix_input_2" />' \
'<trix-editor id="message_content" input="trix_input_2" class="trix-content" data-direct-upload-url="http://test.host/rails/active_storage/direct_uploads" data-blob-url-template="http://test.host/rails/active_storage/blobs/redirect/:signed_id/:filename">' \
2019-01-04 19:43:11 -05:00
"</trix-editor>" \
"</form>",
output_buffer
end
test "form with rich text area having placeholder without locale" do
form_with model: Message.new, scope: :message do |form|
form.rich_text_area :content, placeholder: true
end
assert_dom_equal \
'<form action="/messages" accept-charset="UTF-8" method="post">' \
'<input type="hidden" name="message[content]" id="message_content_trix_input_message" />' \
'<trix-editor placeholder="Content" id="message_content" input="message_content_trix_input_message" class="trix-content" data-direct-upload-url="http://test.host/rails/active_storage/direct_uploads" data-blob-url-template="http://test.host/rails/active_storage/blobs/redirect/:signed_id/:filename">' \
"</trix-editor>" \
"</form>",
output_buffer
end
test "form with rich text area having placeholder with locale" do
I18n.with_locale :placeholder do
form_with model: Message.new, scope: :message do |form|
form.rich_text_area :title, placeholder: true
end
end
assert_dom_equal \
'<form action="/messages" accept-charset="UTF-8" method="post">' \
'<input type="hidden" name="message[title]" id="message_title_trix_input_message" />' \
'<trix-editor placeholder="Story title" id="message_title" input="message_title_trix_input_message" class="trix-content" data-direct-upload-url="http://test.host/rails/active_storage/direct_uploads" data-blob-url-template="http://test.host/rails/active_storage/blobs/redirect/:signed_id/:filename">' \
"</trix-editor>" \
"</form>",
output_buffer
end
test "form with rich text area with value" do
form_with model: Message.new, scope: :message do |form|
form.rich_text_area :title, value: "<h1>hello world</h1>"
end
assert_dom_equal \
'<form action="/messages" accept-charset="UTF-8" method="post">' \
'<input type="hidden" name="message[title]" id="message_title_trix_input_message" value="&lt;h1&gt;hello world&lt;/h1&gt;" />' \
'<trix-editor id="message_title" input="message_title_trix_input_message" class="trix-content" data-direct-upload-url="http://test.host/rails/active_storage/direct_uploads" data-blob-url-template="http://test.host/rails/active_storage/blobs/redirect/:signed_id/:filename">' \
"</trix-editor>" \
"</form>",
output_buffer
end
Action Text: forward form: option to hidden input Trix's `<trix-editor>` doesn't support the [form][] property like `<textarea>` or other form fields. For example, consider the following HTML and event listener: ```html <form action="/articles" method="post"> <textarea name="content"></textarea> <button type="submit">Save</button> </form> <script> addEventListener("keydown", ({ key, metaKey, target }) => { if (target.form && key == "Enter" && (metaKey || ctrlKey)) { form.requestSubmit() } }) </script> ``` The `target` (an instance of `HTMLTextAreaElement` relies on the [HTMLTextAreaElement.form][] property for access to its associated `<form>`. While it's usually equivalent to `target.closest("form")`, that isn't always the case. Declaring a `[form]` attribute with another `<form>` element's `[id]` value can associate a field to a `<form>` that is _not an ancestor_. That means that the event listener from above would continue to work with this HTML: ```html <textarea name="content" form="new_article"></textarea> <!-- elsewhere --> <form id="new_article" action="/articles" method="post"> <button type="submit">Save</button> </form> ``` Unfortunately, if the `<textarea>` element were replaced with a `<trix-editor>`, the event listener's reliance on accessing the form as a property would break, since the `<trix-editor>` custom element doesn't declare that property. There is currently a pull request ([basecamp/trix#899][]) to add support for accessing the `form` as a property of the `<trix-editor>` element. The [feedback][] provided on that pull request suggests that we implement the `form` property by delegating to the `<input type="hidden">` element. Currently, `<input type="hidden">` elements constructed by Action Text helpers cannot declare the `[form]` attribute. This commit adds support by special-casing the `options[:form]` key within `ActionText::TagHelper#rich_text_area_tag`. [form]: https://developer.mozilla.org/en-US/docs/Web/API/HTMLTextAreaElement#properties [basecamp/trix#899]: https://github.com/basecamp/trix/pull/899#discussion_r618543357 [feedback]: https://github.com/basecamp/trix/pull/899#discussion_r618543357
2021-04-25 08:11:17 -04:00
test "form with rich text area with form attribute" do
form_with model: Message.new, scope: :message do |form|
form.rich_text_area :title, form: "other_form"
end
assert_dom_equal \
'<form action="/messages" accept-charset="UTF-8" method="post">' \
Action Text: forward form: option to hidden input Trix's `<trix-editor>` doesn't support the [form][] property like `<textarea>` or other form fields. For example, consider the following HTML and event listener: ```html <form action="/articles" method="post"> <textarea name="content"></textarea> <button type="submit">Save</button> </form> <script> addEventListener("keydown", ({ key, metaKey, target }) => { if (target.form && key == "Enter" && (metaKey || ctrlKey)) { form.requestSubmit() } }) </script> ``` The `target` (an instance of `HTMLTextAreaElement` relies on the [HTMLTextAreaElement.form][] property for access to its associated `<form>`. While it's usually equivalent to `target.closest("form")`, that isn't always the case. Declaring a `[form]` attribute with another `<form>` element's `[id]` value can associate a field to a `<form>` that is _not an ancestor_. That means that the event listener from above would continue to work with this HTML: ```html <textarea name="content" form="new_article"></textarea> <!-- elsewhere --> <form id="new_article" action="/articles" method="post"> <button type="submit">Save</button> </form> ``` Unfortunately, if the `<textarea>` element were replaced with a `<trix-editor>`, the event listener's reliance on accessing the form as a property would break, since the `<trix-editor>` custom element doesn't declare that property. There is currently a pull request ([basecamp/trix#899][]) to add support for accessing the `form` as a property of the `<trix-editor>` element. The [feedback][] provided on that pull request suggests that we implement the `form` property by delegating to the `<input type="hidden">` element. Currently, `<input type="hidden">` elements constructed by Action Text helpers cannot declare the `[form]` attribute. This commit adds support by special-casing the `options[:form]` key within `ActionText::TagHelper#rich_text_area_tag`. [form]: https://developer.mozilla.org/en-US/docs/Web/API/HTMLTextAreaElement#properties [basecamp/trix#899]: https://github.com/basecamp/trix/pull/899#discussion_r618543357 [feedback]: https://github.com/basecamp/trix/pull/899#discussion_r618543357
2021-04-25 08:11:17 -04:00
'<input type="hidden" name="message[title]" id="message_title_trix_input_message" form="other_form" />' \
'<trix-editor id="message_title" input="message_title_trix_input_message" class="trix-content" data-direct-upload-url="http://test.host/rails/active_storage/direct_uploads" data-blob-url-template="http://test.host/rails/active_storage/blobs/redirect/:signed_id/:filename">' \
"</trix-editor>" \
"</form>",
output_buffer
end
test "form with rich text area with data[direct_upload_url]" do
form_with model: Message.new, scope: :message do |form|
form.rich_text_area :content, data: { direct_upload_url: "http://test.host/direct_uploads" }
end
assert_dom_equal \
'<form action="/messages" accept-charset="UTF-8" method="post">' \
'<input type="hidden" name="message[content]" id="message_content_trix_input_message" />' \
'<trix-editor id="message_content" input="message_content_trix_input_message" class="trix-content" data-direct-upload-url="http://test.host/direct_uploads" data-blob-url-template="http://test.host/rails/active_storage/blobs/redirect/:signed_id/:filename">' \
"</trix-editor>" \
"</form>",
output_buffer
end
test "form with rich text area with data[blob_url_template]" do
form_with model: Message.new, scope: :message do |form|
form.rich_text_area :content, data: { blob_url_template: "http://test.host/blobs/:signed_id/:filename" }
end
assert_dom_equal \
'<form action="/messages" accept-charset="UTF-8" method="post">' \
'<input type="hidden" name="message[content]" id="message_content_trix_input_message" />' \
'<trix-editor id="message_content" input="message_content_trix_input_message" class="trix-content" data-direct-upload-url="http://test.host/rails/active_storage/direct_uploads" data-blob-url-template="http://test.host/blobs/:signed_id/:filename">' \
"</trix-editor>" \
"</form>",
output_buffer
end
end