ViewComponentGemの紹介

ビューコンポーネントのテストは、テストファイルに「view_component / test_case」を要求し、render_inlineを使用して実行されます。 レンダリングされた出力に対してアサーションが作成されるようにヘルパーをテストします。まず、DiscountComponentのテストから始めましょう。

require "test_helper"
require "view_component/test_case"

class DiscountComponentTest < ViewComponent::TestCase
  def test_render_component
    render_inline(DiscountComponent.new(item: "my item"))
  end
end

コマンドrails test test/components/discount_component_test.rbを使用してこのテストを実行すると 、次のエラーが発生します：

これは、テストが適切なコンポーネントに到達していることを証明していますが、合格したアイテムは文字列ではなく価格プロパティを持つコースでなければならないため、適切な小道具が不足しています。また、render?があることも示しています。 このコンポーネントがレンダリングされる前にチェックされるメソッド。今すぐ正しい変数を渡しましょう。

def test_render_component
  course = Course.create(title: 'Organizing your Time', price: 55.00, location: 'London')
  render_inline(DiscountComponent.new(item: course))
end

これは正常に実行されます。このテストにアサーションを追加してみましょう。

def test_render_component
  course = Course.create(title: 'Organizing your Time', price: 155.00, location: 'London')
  render_inline(DiscountComponent.new(item: course))
  assert_selector 'p[class="green"]'
  assert_text "10% discount"
end

このテストも合格です。このコンポーネントにはレンダリング条件があることを思い出してください。ただし、ViewComponentには、refute_component_renderedを使用して、コンポーネントがレンダリングされていないことをテストする方法も用意されているため、心配する必要はありません。 。 100ユーロ未満の価格のコースを使用してこれをテストできます。

def test_component_not_rendered
  course = Course.create(title: 'Organizing your Time', price: 55.00, location: 'London')
  render_inline(DiscountComponent.new(item: course))
  refute_component_rendered
end

このテストも合格です。

CourseComponentの別のテストを作成して、その中にネストされたすべてのコンポーネントをレンダリングすることをテストしましょう。

require "test_helper"
require "view_component/test_case"

class CourseComponentTest < ViewComponent::TestCase
  def test_component_renders_all_children
    course = Course.create(title: 'Organizing your Time', price: 155.00, location: 'London')
    render_inline(CourseComponent.new(item: course, notice: 'A new test', item_counter: 1))
    assert_selector("h2", text: "Organizing your Time")
    assert_selector("h4", text: "€155.00")
    assert_selector("h4", text: "London")
    assert_text("enrollees")
    assert_text("discount")
  end
end

このテストも合格です。 EnrolleeコンポーネントとDiscountコンポーネントも適切にレンダリングされていることをテストします。

スロットコンポーネントがあることを思い出してください。下の画像に示すように、1つのヘッダーと多くのタイトルがレンダリングされます。

これをテストするために、レンダリングするヘッダーとタイトルを含むコードのブロックをコンポーネントに渡し、レンダリングされたコンポーネントに対してアサートできます。

require "test_helper"
require "view_component/test_case"

class ListComponentTest < ViewComponent::TestCase
  def test_renders_slots_with_content
  render_inline(ListComponent.new) do |component|
  component.header { "A Test List" }
  component.titles [{title: 'Test title 1'}, {title: 'Test title 2'}]
  end

  assert_selector("h1", text: "A Test List")

  assert_text("Test title 1")
  assert_text("Test title 2")
  end
end

このテストも合格します:)

Rspecテスト

テストについて上記で述べたすべてに加えて、推奨されるテストフレームワークがRSpecである場合、ViewComponentsのRSpecを有効にするためにいくつかの追加の構成を実行する必要があります。

# spec/rails_helper.rb
require "view_component/test_helpers"
require "capybara/rspec"

RSpec.configure do |config|
  config.include ViewComponent::TestHelpers, type: :component
  config.include Capybara::RSpecMatchers, type: :component
end

以下に示すように、DiscountComponentテストは、Rspecを使用して書き直し、再テストできます。

require "rails_helper"

RSpec.describe DiscountComponent, type: :component do

  it "renders the component correctly" do
    course = Course.create(title: 'Organizing your Time', price: 155.00, location: 'London')
    render_inline(DiscountComponent.new(item: course))
    expect(rendered_component).to have_css "p[class='green']", text: "10% discount"
    expect(rendered_component).to have_css "img[src*='/assets/star.png']"
  end
end

このテストはエレガントに合格します。ええ、私たちは星のアイコンを見ることができます。