テーマおよびテーマコンポーネントのエンドツーエンドシステムテスト

ドキュメント 開発者ガイド
,
1 
<div></div>

テーマの自動テストを作成することは、テーマ開発プロセスにおいて重要な部分であり、テーマによって導入される機能が、Discourse のコア機能とともに、時間の経過とともにうまく機能し続けることを保証するのに役立ちます。

現在、Discourse はテーマの回帰テストを作成するための 2 つの方法をサポートしています。最初の方法は主に EmberJS の方法 に従っており、クライアント側のコードのテストのみが含まれます。 2 番目の方法は Rails システムテスト を記述することであり、これによりサーバー側のコードとクライアント側のコードの両方を同時にテストできます。このドキュメントでは、テーマの Rails システムテストの作成に焦点を当てます。また、テーマ作成者がテーマのテストを作成する際に焦点を当てることをお勧めします。

テーマの Rails システムテスト

内部的には、Discourse は RSpec および Capybara テストフレームワークを使用して Rails システムテスト を実行します。開始するには RSpec と Capybara に関する基本的な知識が必要であり、開始する前に次のリンクを確認することをお勧めします。

テーマシステムテストを作成するためのガイドラインとヒント

システムテストを作成する際に従うべきガイドラインをいくつか紹介します。

  • システムテストは、テーマのディレクトリ内の spec/system ディレクトリに配置されることが期待されます。

  • spec/system ディレクトリ内の各ファイルは、_spec.rb という形式に従うことが期待されます。

  • トップレベルの RSpec describe ブロックには、system: true メタデータが必要です。例：

    RSpec.describe "テーマまたはテーマコンポーネントのテスト", system: true do
  it "コンポーネントを表示する" do
    ...
  end
end

  • upload_theme および upload_theme_component ヘルパーメソッドが利用可能であり、テストを実行する前に呼び出す必要があります。例：

    RSpec.describe "テーマまたはテーマコンポーネントのテスト", system: true do
  let!(:theme) do
    upload_theme
  end

  # または、テーマがコンポーネントの場合は `upload_theme_component`
  #
  # let!(:theme_component) do
  #   upload_theme_component
  # end

  it "コンポーネントを表示する" do
    ...
  end
end

  • テーマの設定は、theme オブジェクトで update_setting メソッドを呼び出し、テーマを保存することで、システムテストで変更できます。

    例：

    RSpec.describe "テーマのテスト", system: true do
  let!(:theme) do
    upload_theme
  end

  it "`should_render` テーマ設定が false の場合、テーマを表示しない" do
    theme.update_setting(:should_render, false)
    theme.save!

    expect(page).not_to have_css("#some-identifier")
  end
end

  • Discourse は fabrication gem を使用しており、各テストに必要なテストデータを簡単に設定できます。Discourse コアで利用可能な fabricator の全リスト は、テーマのシステムテストでも使用できます。

    例：

    RSpec.describe "テーマのテスト", system: true do
  let!(:theme) do
    upload_theme
  end

  it "テーマを表示する" do
    user = Fabricate(:user)
    category = Fabricate(:category)
    topic = Fabricate(:topic)
    topic_2 = Fabricate(:topic, title: "これはトピック 2 です")

    ...
  end
end

  • sign_in ヘルパーメソッドを使用して、さまざまなユーザープロファイルをテストします。

    例：

    RSpec.describe "テーマのテスト", system: true do
  let!(:theme) do
    upload_theme
  end

  it "一般ユーザーにはテーマを表示しない" do
    user = Fabricate(:user)
    sign_in(user)

    ...
  end

  it "スタッフユーザーにテーマを表示する" do
    admin = Fabricate(:admin)
    sign_in(admin)

    ...
  end
end

  • ページの一部をクエリおよび検査しやすく、システムテストで再利用可能にしたい場合があります。これを行うには、PageObjects の概念を使用できます。これは、コア でよく見られます。

    例：

    # frozen_string_literal: true

module PageObjects
  module Components
    class MyCustomComponent < PageObjects::Components::Base
      COMPONENT_SELECTOR = ".my-custom-component"

      def click_action_button
        find("#{COMPONENT_SELECTOR} .action-button").click
      end

      def has_content?(content)
        has_css?("#{COMPONENT_SELECTOR} .content", text: content)
      end
    end
  end
end

    そして、システムテストファイルの先頭で Ruby の組み込み require_relative を使用してインポートすることで使用できます。

    require_relative "page_objects/components/my_custom_component"

テーマシステムテストの実行

テーマシステムテストは、discourse_theme CLI rubygem を使用して実行でき、これらの手順 でインストールできます。

discourse_theme CLI がインストールされたら、次のコマンドを実行して、テーマディレクトリ内のすべてのシステムテストを実行できます。

discourse_theme rspec .

新しいテーマで rspec コマンドを初めて実行すると、ローカル Discourse 開発環境 または開発環境が設定された Docker コンテナを使用してシステムテストを実行するかどうかを尋ねられます。経験豊富な Discourse プラグインまたはテーマ開発者でない限り、n を選択して Docker コンテナを使用してテストを実行することをお勧めします。これにより、すべてがすぐに機能します。

discourse_theme rspec コマンドは、単一の spec ディレクトリ、ファイル、および行番号付きファイルを実行することもサポートしています。

discourse_theme rspec /path/to/theme/spec/system
discourse_theme rspec /path/to/theme/spec/system/my_system_spec.rb
discourse_theme rspec /path/to/theme/spec/system/my_system_spec.rb:12

Headful モード

デフォルトでは、テーマシステムテストは ヘッドレスモード の Google Chrome を使用して実行されます。これは、ブラウザが画面に何もレンダリングしないモードであり、テスト実行をより速く完了できます。ただし、作成したシステムテストが何をしているかを確認するために、ヘッドフルモードの Google Chrome を使用できると便利な場合があります。 discourse_theme rspec コマンドに --headful オプションを渡すことで、このモードを有効にできます。

discourse_theme rspec . --headful

上記のコマンドは、テストの実行が視覚的に表示されるヘッドフルモードでシステムテストを実行します。

また、pause_test ヘルパーメソッドを使用して、テストケースの実行を一時停止することもできます。これにより、ブラウザでのアプリケーションの現在の状態を検査できます。

例：

RSpec.describe "テーマのテスト", system: true do
  let!(:theme) do
    upload_theme
  end

  it "テーマを表示する" do
    visit("/")
    click("#some-button")
    pause_test
    # ...
  end
end

このドキュメントはバージョン管理されています。変更はgithub で提案してください。

「いいね！」 18
6

コンポーネントのテストでは、通常 let!(:theme_component) の代わりに let!(:theme) が使用されていることに気づきました。たとえば、このテストでは次のようになります。

しかし、ガイドではテーマコンポーネントには let!(:theme_component) を使用することが推奨されています。

このガイドで説明されているように theme_component を使用すべき理由があるのでしょうか？

「いいね！」 2