Merge pull request #7674 from fjordllc/chore/introduce-view-component

view componentを導入

.rubocop.yml

@@ -25,6 +25,10 @@ Metrics/ModuleLength:
   Exclude:
     - app/decorators/user_decorator.rb
 
+Lint/MissingSuper:
+  Exclude:
+    - 'app/components/**/*'
+
 AllCops:
   Exclude:
     - '**/templates/**/*'

.traceroute.yml

@@ -33,3 +33,4 @@ ignore_unreachable_actions:
   - any_login\/.*
   - .*#recaptcha_enabled?
   - .*#valid_recaptcha?
+  - .*#system_test_entrypoint

Gemfile

@@ -69,6 +69,7 @@ gem 'stringio', '3.1.0'
 gem 'stripe'
 gem 'stripe-i18n', git: 'https://github.com/komagata/stripe-i18n', branch: 'update-depencency'
 gem 'tzinfo', '~> 2.0', '>= 2.0.6'
+gem 'view_component'
 
 group :development, :test do
   gem 'byebug', platforms: %i[mri mingw x64_mingw]

Gemfile.lock

@@ -561,6 +561,10 @@ GEM
     uniform_notifier (1.16.0)
     vcr (6.2.0)
     version_gem (1.1.3)
+    view_component (3.11.0)
+      activesupport (>= 5.2.0, < 8.0)
+      concurrent-ruby (~> 1.0)
+      method_source (~> 1.0)
     view_source_map (0.3.0)
       rails (>= 5)
     web-console (4.2.1)
@@ -682,6 +686,7 @@ DEPENDENCIES
   traceroute
   tzinfo (~> 2.0, >= 2.0.6)
   vcr
+  view_component
   view_source_map
   web-console (>= 4.1.0)
   webmock

app/views/works/_work.html.slim → app/components/works/work_component.html.slim

@@ -3,10 +3,7 @@
     .thumbnail-card__inner
       .thumbnail-card__row
         = link_to work, class: 'thumbnail-card__image-link' do
-          - if work.thumbnail.attached?
-            = image_tag work.thumbnail_url, class: 'thumbnail-card__image'
-          - else
-            = image_tag('work-blank.svg', class: 'thumbnail-card__image')
+          = thumbnail
       .thumbnail-card__row
         h2.thumbnail-card__title
           = link_to work, class: 'thumbnail-card__title-link' do
@@ -18,7 +15,7 @@
               .thumbnail-card__icon
                 = link_to user_path(work.user) do
                   span class="a-user-role is-#{work.user.primary_role}"
-                    = image_tag work.user.avatar_url, title: work.user.icon_title, class: 'a-user-icons__item-icon a-user-icon'
+                    = creator_avatar
               .thumbnail-card__user
                 = link_to work.user.name, user_path(work.user), class: 'a-user-name'
         .thumbnail-card__metas

app/components/works/work_component.rb

@@ -0,0 +1,23 @@
+# frozen_string_literal: true
+
+class Works::WorkComponent < ViewComponent::Base
+  def initialize(work:)
+    @work = work
+  end
+
+  def thumbnail
+    if work.thumbnail.attached?
+      image_tag work.thumbnail_url, class: 'thumbnail-card__image'
+    else
+      image_tag('work-blank.svg', class: 'thumbnail-card__image')
+    end
+  end
+
+  def creator_avatar
+    image_tag work.user.avatar_url, title: work.user.icon_title, class: 'a-user-icons__item-icon a-user-icon'
+  end
+
+  private
+
+  attr_reader :work
+end

app/views/users/works/index.html.slim

@@ -41,7 +41,7 @@ header.page-header
       - if @user.works.present?
         .works
           .row
-            = render partial: 'works/work', collection: @works, as: :work
+            = render(Works::WorkComponent.with_collection(@works))
       - else
         .a-empty-message.is-info
           p

app/views/works/index.html.slim

@@ -21,5 +21,5 @@ hr.a-border
     = paginate @works
     .works
       .row
-        = render partial: 'works/work', collection: @works, as: :work
+        = render(Works::WorkComponent.with_collection(@works))
     = paginate @works

test/components/work_component_test.rb

@@ -0,0 +1,20 @@
+# frozen_string_literal: true
+
+require 'test_helper'
+
+class WorkComponentTest < ViewComponent::TestCase
+  setup do
+    @user = users(:kimura).extend(UserDecorator)
+    @work = works(:work1)
+    @work.user = @user
+    render_inline(Works::WorkComponent.new(work: @work))
+  end
+
+  def test_thumbnail
+    assert_selector 'img.thumbnail-card__image'
+  end
+
+  def test_creator_avatar
+    assert_selector 'img.a-user-icons__item-icon.a-user-icon[title="kimura (Kimura Tadasi)"][src="/images/users/avatars/default.png"]'
+  end
+end