新しいRails 8アプリ作成したら、Devise対応のナビゲーションバー追加しよう！

ナビゲーション追加しよう！

ナビゲーションバーを追加したいですが、ナビバーのテストってどうやってやるのかっていうと、ほとんどの場合はやってないんじゃないかと思います。やっててもテストが遅いのではないでしょうか。

なので、今回はテスト先に書きたいので、ViewComponentを導入したいです。

gem 'view_component'

とGemfileに追加しましょう。 あと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

これでRSpecでテストできるようになりました。

bin/rails generate component Navbar

ファイル作成はこちらのコマンドでできます。

できたテストファイルに以下追加しましょう。

it "renders sign up if not logged in" do
  expect(
    render_inline(described_class.new).to_html
  ).to include(
    "Sign up!"
  )
end

これでちゃんと登録と表示されるかどうかテストします。 ただテスト実行したら失敗します。

とりあえずTailwind対応のナビバーを探しましょう。Tailwind PlusやHeadless UIあたりに 良いサンプルがあります。好きなの選んで、コピーして、コンポーネントに入れましょう。

Deviseを入れていれば、user_signed_in?とcurrent_userというヘルパーが使えます。

<% if user_signed_in? %>
  ...
<% else %>
  <a href="#" class="block px-4 py-2 text-sm text-gray-700">Sign in!</a>
<% end %>

これでテストも通ります！ ただしリンクは押しても遷移しないので、それ用のテストを追加しましょう。

it 'renders a link to sign up page if not logged in' do
  expect(
    render_inline(described_class.new).to_html
  ).to include(
    "href=\"/users/sign_up\""
  )
end

これでテストが失敗するはずです。 コンポーネントのHTMLを以下のように修正しましょう。

<% if user_signed_in? %>
  ...
<% else %>
  <%= link_to "Sign up!", new_user_registration_path, class: "block px-4 py-2 text-sm text-gray-700" %>
<% end %>

これでちゃんとユーザー登録できるようになりました。 あとはレイアウトにこのコンポーネントを追加するだけですね。

<%= render NavbarComponent.new %>

とapp/views/layouts/application.html.erbに追加したら完成です！ （細かいリンク追加などは残ってますが、割と自信持てるかと思います！）