メンターダッシュボードに表示しているn日経過の提出物一覧を非vue化したい。

[machida]

メンターでログインしたときにダッシュボードに表示されるこれが今はVueで実装されているので、Railsのviewに移行する。

[Shrimprin]

📝 関連するPR

• 【メンター向け】ダッシュボードに5日以上経過した提出物を表示する#4908
• 提出物ページのReact化 #6988 productsページの方はVueからReactに置き換え済み
• 未アサインの提出物のアラートを変更した #7732
• ダッシュボードの未アサインの提出物の表示のバグを解消した #8122

[Shrimprin]

@komagata @machida お疲れ様です。 本イシューでは既存のVueをRailsのViewComponentへ置き換えをしています。 ViewCompoentのテストの実装で上手くいかない点があり、アドバイスをいただけますでしょうか 🙇 (※2024/9/30 18:50 エラー内容、エラーが発生するパターンを少し修正しました）

解決したいこと

ViewComponentのテストでActiveDecoratorメソッドがundefined methodエラーとなる。 （以下、ViewComponentのテスト = コンポーネントテスト 、ActiveDecoratorメソッド = デコレーターメソッドと記載します）

エラー内容

例えば、ViewComponentのhtmlファイルでuser.icon_titleを呼び出す部分で以下のようなエラーが発生する。 （エラーの発生するテストコードはまだPRには含めていません） エラーが発生するのはコンポーネントテストから呼び出した時のみで、テスト以外（ブラウザから呼び出す）はエラーは発生しない。

❯ rails test test/components/product/product_component_test.rb
Running via Spring preloader in process 11715
Run options: --seed 21297

# Running:

....E

Error:
Products::ProductComponentTest#test_render_comments_count_when_there_are_comments:
NoMethodError: undefined method `icon_title' for #<User id: ...
...
{中略}
...
    app/components/products/product_component.html.slim:71:in `block in call'
    app/components/products/product_component.html.slim:69:in `call'
    test/components/product/product_component_test.rb:67:in `test_render_comments_count_when_there_are_comments'

rails test test/components/product/product_component_test.rb:64

全文

``` bash ❯ rails test test/components/product/product_component_test.rb Running via Spring preloader in process 11715 Run options: --seed 21297 # Running: ....E Error: Products::ProductComponentTest#test_render_comments_count_when_there_are_comments: NoMethodError: undefined method `icon_title' for # app/components/products/product_component.html.slim:71:in `block in call' app/components/products/product_component.html.slim:69:in `call' test/components/product/product_component_test.rb:67:in `test_render_comments_count_when_there_are_comments' rails test test/components/product/product_component_test.rb:64 ```

調べたこと

ActiveDecorator

• active_decorator gemによって導入される
• app/decorators/user_decorator.rbなどのファイルで定義されている
• ビューでよく使う表示ロジックやフォーマットを記述する
• モデルとビューどちらにも記述できるロジックをデコレーターに記述することで、モデルとビューをスリムに保つことができる

ViewComponentのテストでのActiveDecoratorの利用

• コンポーネントテストではActiveDecoratorは自動的には読み込まれないが、user = user.extend(UserDecorator)とすることでインスタンスからデコレーメソッドの呼び出せる
• デコレータを呼び出せるようにしたいインスタンスが別のインスタンスのアソシエーションを介す場合は、product.user = product.user.extend(UserDecorator)とすることでデコレータメソッドを呼び出せる

エラーが発生するパターン

以下のように、コンポーネントテストでデコレーターを適用したuserでproductにcommentを作成した後、html側でcommentからuserを取得してデコレーターメソッドを呼び出そうとすると、undefined methodとなる。

• コンポーネントテスト ※PRには未実装

  # test/components/product/product_component_test.rb
  def test_render_comments_count_when_there_are_comments
  commented_user = users(:komagata).extend(UserDecorator)
  unassigned_product = decorate_product_user(products(:product6))
  unassigned_product.comments.create!(user: commented_user, description: 'コメントを追加')
  render_inline(Products::ProductComponent.new(
    product: unassigned_product,
    is_mentor: @is_mentor,
    current_user_id: @current_user_id
  ))
  
  assert_selector '.a-meta', text: 'コメント（2）'
  assert_selector 'img.a-user-icon[title=?]', commented_user.icon_title
  end

• ViewComponentのhtmlファイル ここのuser.icon_titleがundefined methodエラーとなる

https://github.com/fjordllc/bootcamp/blob/56997a823c7a36bc5230cfce1ee5a28d4f24c85b/app/components/products/product_component.html.slim#L69-L71

対応方法

対応方法を検討しましたのでご助言お願いできますでしょうか。

1. ViewComponentのロジック部分とActiveDecoratorはモデルとビューをスリムにするためにロジックを記述する場所という役割が被っているという認識です。ViewComponentではデコレーターメソッドは使わずにコンポーネントのロジック部分に代わりにそのロジックを記述すべきなのでしょうか？
2. システムテストでは明示的にextend(HogeDecorator)でデコレーターを適用しないでもデコレーターメソッドが利用できます。コンポーネントテストでも同様のことが可能なのであればその方法をご教授いただけますでしょうか？

以上、お手数ですがご回答をお願いいたします。

[komagata]

@Shrimprin

1. ViewComponentのロジック部分とActiveDecoratorはモデルとビューをスリムにするためにロジックを記述する場所という役割が被っているという認識です。ViewComponentではデコレーターメソッドは使わずにコンポーネントのロジック部分に代わりにそのロジックを記述すべきなのでしょうか？
2. システムテストでは明示的にextend(HogeDecorator)でデコレーターを適用しないでもデコレーターメソッドが利用できます。コンポーネントテストでも同様のことが可能なのであればその方法をご教授いただけますでしょうか？

2でお願いします。もうちょっとだけ調べてみてください〜

[Shrimprin]

@komagata お疲れ様です！ Active Recordのafter_findコールバックを使ってデコレーターを適用するヘルパーを作成して、問題を対処できるようにしました。 以下のような実装方針で良いかご助言お願いできますでしょうか。

• デコレーターを適用するヘルパー https://github.com/fjordllc/bootcamp/blob/51a6fe0f6d6eb43d3c9b5b775c0912ffb44a022e/test/supports/decorator_helper.rb#L3-L7

• コンポーネントテストでの使用方法 コンポーネントテストのsetupメソッドで以下のようにして呼び出します。

  
  require 'test_helper'
  require 'supports/decorator_helper' # ヘルパーをrequireする

class Products::ProductsComponentTest < ViewComponent::TestCase def setup DecoratorHelper.auto_decorate(User) # デコレーターを適用したいモデルを引数で渡す

その他の処理

end

テスト

end

これにより`User`レコードを読み込むたびにデコレーターが適用され、テスト内で毎回`extend(UserDecorator)`しなくて済みます。

### 参考
- [Railsガイド after_initializeとafter_find](https://railsguides.jp/active_record_callbacks.html#after-initialize%E3%81%A8after-find)

[komagata]

いいと思います。ただ下記に似たコードがあるので何かしら共通化できるといいかもですね。

bootcamp/test/active_decorator_test_case.rb at main · fjordllc/bootcamp

[Shrimprin]

@komagata ありがとうございます。 共通化も含めてPRを作成していきます。