React component helper specs (#24072)
parent
3029aeb838
commit
91a8cd21d8
6 changed files with 266 additions and 83 deletions
@ -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 |
@ -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 |
@ -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 |
@ -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 |
Loading…
Reference in new issue