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

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

なので、今回はテスト先に書きたいので、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 対応のナビバー探しましょう。

https://tailwindui.com/components/application-ui/navigation/navbars

好きなの選んで、コピーしてください。 そしてコンポーネントに入れましょう。

<% if @current_user %> 
...
<% 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を以下のように修正しましょう。

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

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

<%= render NavbarComponent.new %>

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