自作アプリにViewComponentを導入した

TokyuRuby会議16の発表資料です

Transcript

1. 自作アプリに ViewComponentを導入した TokyuRuby会議16 @siso255
2. 自己紹介 @siso255 •フィヨルドブートキャンプで学習 していました •株式会社ラグザイア（2025年1月〜）
3. RouletteTalk トークテーマのルーレットを作成できるアプリケーション
4. 技術スタック Framework Test / CI RSpec GitHub Actions Database PostgreSQL infrastructure
5. テストについて感じていた課題 •テストケース数の割に実行に時間がかかる •ルーレットの抽選部分はStimulusメインで、システムテストでカバー •ルーレットの抽選時は3秒ほどアニメーションが入る •View Specで抽選時間をコントロールしつつテストできないか？ •View SpecではJSを有効にできなさそう 1 it 'トークテーマ数を超えた回数ルーレットを実行したら選択状態をリセットする', js: true do 2 visit roulette_path(@roulette) 3 click_button 'スタート' 4 result_text = find "[data-rotate-target='resultText']", wait: 10
7. ViewComponentのPreview機能 •Preview機能を使えば、コンポーネント単位にJSありでテストが書ける •URLパラメータでルーレットの実行時間をコントロールできる
8. ViewComponent::Previewを使う StimulusコントローラーでValuesを追加 Stimulus 1 export default class extends Controller { 2 static values = { 3 // ルーレットが回転する時間 4 spinDuration: Number, 5 } 6 7 // スタートボタンクリック時の処理 8 start() { 9 const animation = this.rotate(this.spinDuration)
9. ViewComponent::Previewを使う spin_duration をコンポーネント使用時に設定できるようにする Component Slim 1 class RouletteComponent < ViewComponent::Base 2 def initialize(spin_duration:) 3 @spin_duration = spin_duration 4 end 5 end 1 .relative[ 2 data-controller="rotate" 3 data-rotate-spin-duration-value=@spin_duration
10. ViewComponent::Previewを使う •URLパラメータでアニメーションの時間を指定できるようにする •テストでは 0秒 に設定してwait 10 を削除 Preview RSpec 1 class RouletteComponentPreview < ViewComponent::Preview 2 def with_spin_duration(spin_duration:) 3 render Roulettes::Roulette::Component.new(spin_duration) 4 end 5 end 1 it 'トークテーマ数を超えた回数ルーレットを実行したら選択状態をリセットする', js: true do 2 visit "/rails/view_components/roulette_component/with_spin_duration?spin_duration=0" 3 click_button 'スタート' 4 result_text = find "[data-rotate-target='resultText']" # wait: 10 を削除
11. 実行時間比較 •全件テストを10回実行した平均 •テスト件数は増えたが、wait が不要になったので実行時間は短くなった 修正前 修正後 テスト件数 44件 64件 実行時間 (秒) 36.963 22.875
12. まとめ •ViewComponentのPreviewを使うことで、テスト時にStimulusの動作を変え られるようになった •Stimulusメインのテスト、ルーレットのCRUDを含めた画面全体のテストをフ ァイルで分けられるようになった