여러 화면 크기에 대한 Rails 시스템 테스트

이 게시물은 The Rails and Hotwire Codex에서 추출 및 수정되었습니다.

Rails 시스템 테스트는 웹 브라우저에서 사용자의 동작을 시뮬레이션하므로 앱의 실제 사용과 유사합니다. 반응형 앱에서 이는 여러 화면 크기에서도 테스트해야 함을 의미합니다.

후드 아래에서 시스템 테스트에 사용되는 도구인 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

이 새로운 기본 클래스를 사용하여 모바일 화면을 대상으로 하는 테스트를 작성할 수 있습니다. 내비게이션 바에 버거 메뉴가 모바일에서만 표시된다고 가정해 보겠습니다. 다음과 같이 테스트할 수 있습니다.

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

이제 시스템 테스트를 실행하면 위의 두 테스트에 대한 창 크기가 조정되고 테스트가 완료된 후 다시 데스크톱으로 크기가 복원됩니다!

$ bin/rails test:system

이 게시물이 마음에 든다면 내 책The Rails and Hotwire Codex을 확인하여 Rails 및 Hotwire 기술을 레벨 업하십시오!