【Rails】パンくずリストの実装

実装したいこと

ウェブページの上部にパンくずリストを表示したいです。 パンくずリストとは…

パンくずリスト

自分が今どのページにいるか分かるリスト。 リスト内の文字をクリックすると、リンク先へ遷移されます。

gem " gretel"の導入

英語でもそのまんま、breadcrumbs(パンくず)といいます。
breadcrumbsを生成するgemが、童話『ヘンゼルとグレーテル』から、gretelというのは遊び心があります。

(TL;DR) Gretel is a Ruby on Rails plugin that makes it easy yet flexible to create breadcrumbs.

GitHub - kzkn/gretel: Flexible Ruby on Rails breadcrumbs plugin.

公式に沿って実装していきます。

gem "gretel"

記入したら、bundle installします。

Generating breadcrumbs configuration file

設定ファイルを生成します。

$ rails generate gretel:install

config/breadcrumbs.rbが生成されます。
今回は、Home > タグ > タグ編集と表示されるように設定していきます。

#先頭ページ
crumb :admin_dashboard do
  link '<i class="fa fa-dashboard"></i> Home'.html_safe, admin_dashboard_path
end

#タグ一覧ページ
crumb :admin_tags do
  link 'タグ', admin_tags_path
  parent :admin_dashboard
end

#タグ編集個別ページ
crumb :edit_admin_tag do |tag|
  link 'タグ編集', edit_admin_tag_path(tag)
  parent :admin_tags
end

link（表示名), (パス名)です。
parentで一つ上の階層を指定していきます。先頭ページはparentは指定しません。

View

      main.content-wrapper
        section.content-header
          h1
            = yield 'content-header'
          == breadcrumbs style: :ol, class: 'breadcrumb'
          #ここにパンくずリストが表示される

各ページでパンくずを出すところを指定していく。
※各ページでは=は使わないです。ビューとして表示させません。

- breadcrumb :admin_tags

- breadcrumb :edit_admin_tag, @tag

RSpec

それぞれのタグが表示されていること＆リンク先に遷移することをテストします。
かなり省略していますが、こんな感じで、within('.breadcrumb')とクラス名を指定するとうまくいきます。

(略）
it 'タグのパンくずリンクが機能すること' do
      visit edit_admin_tag_path(tag)
      within('.breadcrumb') do
        click_link 'タグ'
      end
      expect(current_path).to eq(admin_tags_path),'パンくずのタグを押した時にダッシュボードに遷移していません'
    end
（略）