Rails: システムテストを複数の画面サイズで実行する（翻訳）

Rails: システムテストを複数の画面サイズで実行する（翻訳）

RailsのシステムテストはWebブラウザでのユーザー操作をシミュレートするので、アプリの現実の使われ方に近いものになります。レスポンシブアプリの場合は、複数の画面サイズについてもテストすることを意味します。

システムテストの内部で使われるツールであるCapybaraには、テスト実行中に現在のウィンドウサイズを変更するメソッドがあります。しかし、テストの実行順序は一定ではないので、ウィンドウサイズを変更するテストについては、終了のたびにウィンドウサイズを元に戻しておく必要があります。さもないと、以後そのウィンドウサイズで実行されるテストが失敗する可能性があります。

それでは、モバイル画面用のシステムテストの書き方を見ていくことにしましょう。

🔗 モバイル画面のシステムテスト

ApplicationSystemTestCaseクラスから、モバイルに特化したサブクラスを作成します。このサブクラスでは、ウィンドウのリサイズを、各テストケースが呼び出される前に実行されるsetupメソッドと、各テストケースが呼び出された後に実行されるteardownメソッドで行います。

require "test_helper"

class ApplicationSystemTestCase < ActionDispatch::SystemTestCase
  WINDOW_SIZE = [1400, 1400]
  driven_by :selenium, using: :chrome, screen_size: WINDOW_SIZE
end

class MobileSystemTestCase < ApplicationSystemTestCase
  setup do
    visit root_path
    current_window.resize_to(375, 812)
  end

  teardown do
    current_window.resize_to(*ApplicationSystemTestCase::WINDOW_SIZE)
  end
end

この新しいMobileSystemTestCaseベースクラスを用いることで、モバイル画面向けのテストを書けるようになります。たとえば、モバイルの場合にのみナビゲーションバーにハンバーガーメニューを表示するとします。この場合のテストは以下のように書けます。

require "application_system_test_case"

module Mobile
  class NavigationBarTest < MobileSystemTestCase
    test "can access sign up page via burger menu" do
      visit root_path

      find(".navbar-burger").click
      click_on "Sign Up"

      assert_current_path sign_up_path
    end

    test "can access login page via burger menu" do
      visit root_path

      find(".navbar-burger").click
      click_on "Log in"

      assert_current_path login_path
    end
  end
end

このシステムテストを実行すると、2つのテストでウィンドウがリサイズされるようになり、それぞれのテストが終了するとデスクトップ画面に戻るようになります。

$ bin/rails test:system

本記事を気に入っていただけましたら、RailsとHotwireのスキルをレベルアップする『The Rails and Hotwire Codex』もぜひチェックしてみてください。

関連記事

HotwireはRailsを「ゼロJavaScript」でリアクティブにできるか？前編（翻訳）