React component helper specs (#24072)

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

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

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

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

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

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