forked from mirrors/catstodon
React component helper specs (#24072)
This commit is contained in:
parent
3029aeb838
commit
91a8cd21d8
6 changed files with 266 additions and 83 deletions
111
app/helpers/media_component_helper.rb
Normal file
111
app/helpers/media_component_helper.rb
Normal 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
23
app/helpers/react_component_helper.rb
Normal 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
|
|
@ -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
86
spec/helpers/media_component_helper_spec.rb
Normal 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
45
spec/helpers/react_component_helper_spec.rb
Normal 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
|
|
@ -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
|
||||
|
|
Loading…
Reference in a new issue