rubiline
/
Glitch-Shrike
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

React component helper specs (#24072)

shrike
Matt Jankowski 2023-04-26 12:21:32 -04:00 committed by GitHub
parent 3029aeb838
commit 91a8cd21d8
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 266 additions and 83 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

111
app/helpers/media_component_helper.rb Normal file
View File

@ -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

23
app/helpers/react_component_helper.rb Normal file
View File

@ -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

83
app/helpers/statuses_helper.rb
View File

@ -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

86
spec/helpers/media_component_helper_spec.rb Normal file
View File

@ -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

45
spec/helpers/react_component_helper_spec.rb Normal file
View File

@ -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

1
spec/rails_helper.rb
View File

@ -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