From 91a8cd21d8f1342d0a50d6ff1840ea53a9ed9210 Mon Sep 17 00:00:00 2001
From: Matt Jankowski <matt@jankowski.online>
Date: Wed, 26 Apr 2023 12:21:32 -0400
Subject: [PATCH] React component helper specs (#24072)
---
app/helpers/media_component_helper.rb | 111 ++++++++++++++++++++
app/helpers/react_component_helper.rb | 23 ++++
app/helpers/statuses_helper.rb | 83 ---------------
spec/helpers/media_component_helper_spec.rb | 86 +++++++++++++++
spec/helpers/react_component_helper_spec.rb | 45 ++++++++
spec/rails_helper.rb | 1 +
6 files changed, 266 insertions(+), 83 deletions(-)
create mode 100644 app/helpers/media_component_helper.rb
create mode 100644 app/helpers/react_component_helper.rb
create mode 100644 spec/helpers/media_component_helper_spec.rb
create mode 100644 spec/helpers/react_component_helper_spec.rb
diff --git a/app/helpers/media_component_helper.rb b/app/helpers/media_component_helper.rb
new file mode 100644
index 0000000000..a57d0b4b62
--- /dev/null
+++ b/app/helpers/media_component_helper.rb
@@ -0,0 +1,111 @@
+# frozen_string_literal: true
+
+module MediaComponentHelper
+ def render_video_component(status, **options)
+ video = status.ordered_media_attachments.first
+
+ meta = video.file.meta || {}
+
+ component_params = {
+ sensitive: sensitive_viewer?(status, current_account),
+ src: full_asset_url(video.file.url(:original)),
+ preview: full_asset_url(video.thumbnail.present? ? video.thumbnail.url : video.file.url(:small)),
+ alt: video.description,
+ blurhash: video.blurhash,
+ frameRate: meta.dig('original', 'frame_rate'),
+ inline: true,
+ media: [
+ serialize_media_attachment(video),
+ ].as_json,
+ }.merge(**options)
+
+ react_component :video, component_params do
+ render partial: 'statuses/attachment_list', locals: { attachments: status.ordered_media_attachments }
+ end
+ end
+
+ def render_audio_component(status, **options)
+ audio = status.ordered_media_attachments.first
+
+ meta = audio.file.meta || {}
+
+ component_params = {
+ src: full_asset_url(audio.file.url(:original)),
+ poster: full_asset_url(audio.thumbnail.present? ? audio.thumbnail.url : status.account.avatar_static_url),
+ alt: audio.description,
+ backgroundColor: meta.dig('colors', 'background'),
+ foregroundColor: meta.dig('colors', 'foreground'),
+ accentColor: meta.dig('colors', 'accent'),
+ duration: meta.dig('original', 'duration'),
+ }.merge(**options)
+
+ react_component :audio, component_params do
+ render partial: 'statuses/attachment_list', locals: { attachments: status.ordered_media_attachments }
+ end
+ end
+
+ def render_media_gallery_component(status, **options)
+ component_params = {
+ sensitive: sensitive_viewer?(status, current_account),
+ autoplay: prefers_autoplay?,
+ media: status.ordered_media_attachments.map { |a| serialize_media_attachment(a).as_json },
+ }.merge(**options)
+
+ react_component :media_gallery, component_params do
+ render partial: 'statuses/attachment_list', locals: { attachments: status.ordered_media_attachments }
+ end
+ end
+
+ def render_card_component(status, **options)
+ component_params = {
+ sensitive: sensitive_viewer?(status, current_account),
+ card: serialize_status_card(status).as_json,
+ }.merge(**options)
+
+ react_component :card, component_params
+ end
+
+ def render_poll_component(status, **options)
+ component_params = {
+ disabled: true,
+ poll: serialize_status_poll(status).as_json,
+ }.merge(**options)
+
+ react_component :poll, component_params do
+ render partial: 'statuses/poll', locals: { status: status, poll: status.preloadable_poll, autoplay: prefers_autoplay? }
+ end
+ end
+
+ private
+
+ def serialize_media_attachment(attachment)
+ ActiveModelSerializers::SerializableResource.new(
+ attachment,
+ serializer: REST::MediaAttachmentSerializer
+ )
+ end
+
+ def serialize_status_card(status)
+ ActiveModelSerializers::SerializableResource.new(
+ status.preview_card,
+ serializer: REST::PreviewCardSerializer
+ )
+ end
+
+ def serialize_status_poll(status)
+ ActiveModelSerializers::SerializableResource.new(
+ status.preloadable_poll,
+ serializer: REST::PollSerializer,
+ scope: current_user,
+ scope_name: :current_user
+ )
+ end
+
+ def sensitive_viewer?(status, account)
+ if !account.nil? && account.id == status.account_id
+ status.sensitive
+ else
+ status.account.sensitized? || status.sensitive
+ end
+ end
+end
diff --git a/app/helpers/react_component_helper.rb b/app/helpers/react_component_helper.rb
new file mode 100644
index 0000000000..fc08de13dd
--- /dev/null
+++ b/app/helpers/react_component_helper.rb
@@ -0,0 +1,23 @@
+# frozen_string_literal: true
+
+module ReactComponentHelper
+ def react_component(name, props = {}, &block)
+ data = { component: name.to_s.camelcase, props: Oj.dump(props) }
+ if block.nil?
+ div_tag_with_data(data)
+ else
+ content_tag(:div, data: data, &block)
+ end
+ end
+
+ def react_admin_component(name, props = {})
+ data = { 'admin-component': name.to_s.camelcase, props: Oj.dump({ locale: I18n.locale }.merge(props)) }
+ div_tag_with_data(data)
+ end
+
+ private
+
+ def div_tag_with_data(data)
+ content_tag(:div, nil, data: data)
+ end
+end
diff --git a/app/helpers/statuses_helper.rb b/app/helpers/statuses_helper.rb
index e670571d2d..9f87593674 100644
--- a/app/helpers/statuses_helper.rb
+++ b/app/helpers/statuses_helper.rb
@@ -105,93 +105,10 @@ module StatusesHelper
end
end
- def sensitized?(status, account)
- if !account.nil? && account.id == status.account_id
- status.sensitive
- else
- status.account.sensitized? || status.sensitive
- end
- end
-
def embedded_view?
params[:controller] == EMBEDDED_CONTROLLER && params[:action] == EMBEDDED_ACTION
end
- def render_video_component(status, **options)
- video = status.ordered_media_attachments.first
-
- meta = video.file.meta || {}
-
- component_params = {
- sensitive: sensitized?(status, current_account),
- src: full_asset_url(video.file.url(:original)),
- preview: full_asset_url(video.thumbnail.present? ? video.thumbnail.url : video.file.url(:small)),
- alt: video.description,
- blurhash: video.blurhash,
- frameRate: meta.dig('original', 'frame_rate'),
- inline: true,
- media: [
- ActiveModelSerializers::SerializableResource.new(video, serializer: REST::MediaAttachmentSerializer),
- ].as_json,
- }.merge(**options)
-
- react_component :video, component_params do
- render partial: 'statuses/attachment_list', locals: { attachments: status.ordered_media_attachments }
- end
- end
-
- def render_audio_component(status, **options)
- audio = status.ordered_media_attachments.first
-
- meta = audio.file.meta || {}
-
- component_params = {
- src: full_asset_url(audio.file.url(:original)),
- poster: full_asset_url(audio.thumbnail.present? ? audio.thumbnail.url : status.account.avatar_static_url),
- alt: audio.description,
- backgroundColor: meta.dig('colors', 'background'),
- foregroundColor: meta.dig('colors', 'foreground'),
- accentColor: meta.dig('colors', 'accent'),
- duration: meta.dig('original', 'duration'),
- }.merge(**options)
-
- react_component :audio, component_params do
- render partial: 'statuses/attachment_list', locals: { attachments: status.ordered_media_attachments }
- end
- end
-
- def render_media_gallery_component(status, **options)
- component_params = {
- sensitive: sensitized?(status, current_account),
- autoplay: prefers_autoplay?,
- media: status.ordered_media_attachments.map { |a| ActiveModelSerializers::SerializableResource.new(a, serializer: REST::MediaAttachmentSerializer).as_json },
- }.merge(**options)
-
- react_component :media_gallery, component_params do
- render partial: 'statuses/attachment_list', locals: { attachments: status.ordered_media_attachments }
- end
- end
-
- def render_card_component(status, **options)
- component_params = {
- sensitive: sensitized?(status, current_account),
- card: ActiveModelSerializers::SerializableResource.new(status.preview_card, serializer: REST::PreviewCardSerializer).as_json,
- }.merge(**options)
-
- react_component :card, component_params
- end
-
- def render_poll_component(status, **options)
- component_params = {
- disabled: true,
- poll: ActiveModelSerializers::SerializableResource.new(status.preloadable_poll, serializer: REST::PollSerializer, scope: current_user, scope_name: :current_user).as_json,
- }.merge(**options)
-
- react_component :poll, component_params do
- render partial: 'statuses/poll', locals: { status: status, poll: status.preloadable_poll, autoplay: prefers_autoplay? }
- end
- end
-
def prefers_autoplay?
ActiveModel::Type::Boolean.new.cast(params[:autoplay]) || current_user&.setting_auto_play_gif
end
diff --git a/spec/helpers/media_component_helper_spec.rb b/spec/helpers/media_component_helper_spec.rb
new file mode 100644
index 0000000000..71a9af6f3b
--- /dev/null
+++ b/spec/helpers/media_component_helper_spec.rb
@@ -0,0 +1,86 @@
+# frozen_string_literal: true
+
+require 'rails_helper'
+
+describe MediaComponentHelper do
+ describe 'render_video_component' do
+ let(:media) { Fabricate(:media_attachment, type: :video, status: Fabricate(:status)) }
+ let(:result) { helper.render_video_component(media.status) }
+
+ before do
+ without_partial_double_verification do
+ allow(helper).to receive(:current_account).and_return(media.account)
+ end
+ end
+
+ it 'renders a react component for the video' do
+ expect(parsed_html.div['data-component']).to eq('Video')
+ end
+ end
+
+ describe 'render_audio_component' do
+ let(:media) { Fabricate(:media_attachment, type: :audio, status: Fabricate(:status)) }
+ let(:result) { helper.render_audio_component(media.status) }
+
+ before do
+ without_partial_double_verification do
+ allow(helper).to receive(:current_account).and_return(media.account)
+ end
+ end
+
+ it 'renders a react component for the audio' do
+ expect(parsed_html.div['data-component']).to eq('Audio')
+ end
+ end
+
+ describe 'render_media_gallery_component' do
+ let(:media) { Fabricate(:media_attachment, type: :audio, status: Fabricate(:status)) }
+ let(:result) { helper.render_media_gallery_component(media.status) }
+
+ before do
+ without_partial_double_verification do
+ allow(helper).to receive(:current_account).and_return(media.account)
+ end
+ end
+
+ it 'renders a react component for the media gallery' do
+ expect(parsed_html.div['data-component']).to eq('MediaGallery')
+ end
+ end
+
+ describe 'render_card_component' do
+ let(:status) { Fabricate(:status, preview_cards: [Fabricate(:preview_card)]) }
+ let(:result) { helper.render_card_component(status) }
+
+ before do
+ without_partial_double_verification do
+ allow(helper).to receive(:current_account).and_return(status.account)
+ end
+ end
+
+ it 'returns the correct react component markup' do
+ expect(parsed_html.div['data-component']).to eq('Card')
+ end
+ end
+
+ describe 'render_poll_component' do
+ let(:status) { Fabricate(:status, poll: Fabricate(:poll)) }
+ let(:result) { helper.render_poll_component(status) }
+
+ before do
+ without_partial_double_verification do
+ allow(helper).to receive(:current_account).and_return(status.account)
+ end
+ end
+
+ it 'returns the correct react component markup' do
+ expect(parsed_html.div['data-component']).to eq('Poll')
+ end
+ end
+
+ private
+
+ def parsed_html
+ Nokogiri::Slop(result)
+ end
+end
diff --git a/spec/helpers/react_component_helper_spec.rb b/spec/helpers/react_component_helper_spec.rb
new file mode 100644
index 0000000000..3f133bff9a
--- /dev/null
+++ b/spec/helpers/react_component_helper_spec.rb
@@ -0,0 +1,45 @@
+# frozen_string_literal: true
+
+require 'rails_helper'
+
+describe ReactComponentHelper do
+ describe 'react_component' do
+ context 'with no block passed in' do
+ let(:result) { helper.react_component('name', { one: :two }) }
+
+ it 'returns a tag with data attributes' do
+ expect(parsed_html.div['data-component']).to eq('Name')
+ expect(parsed_html.div['data-props']).to eq('{"one":"two"}')
+ end
+ end
+
+ context 'with a block passed in' do
+ let(:result) do
+ helper.react_component('name', { one: :two }) do
+ helper.content_tag(:nav, 'ok')
+ end
+ end
+
+ it 'returns a tag with data attributes' do
+ expect(parsed_html.div['data-component']).to eq('Name')
+ expect(parsed_html.div['data-props']).to eq('{"one":"two"}')
+ expect(parsed_html.div.nav.content).to eq('ok')
+ end
+ end
+ end
+
+ describe 'react_admin_component' do
+ let(:result) { helper.react_admin_component('name', { one: :two }) }
+
+ it 'returns a tag with data attributes' do
+ expect(parsed_html.div['data-admin-component']).to eq('Name')
+ expect(parsed_html.div['data-props']).to eq('{"locale":"en","one":"two"}')
+ end
+ end
+
+ private
+
+ def parsed_html
+ Nokogiri::Slop(result)
+ end
+end
diff --git a/spec/rails_helper.rb b/spec/rails_helper.rb
index de15cb7853..26fc3d9fdf 100644
--- a/spec/rails_helper.rb
+++ b/spec/rails_helper.rb
@@ -43,6 +43,7 @@ RSpec.configure do |config|
config.filter_rails_from_backtrace!
config.include Devise::Test::ControllerHelpers, type: :controller
+ config.include Devise::Test::ControllerHelpers, type: :helper
config.include Devise::Test::ControllerHelpers, type: :view
config.include Devise::Test::IntegrationHelpers, type: :feature
config.include Paperclip::Shoulda::Matchers