応用編2

2021.5.6

パンくずの設定

 

パンくずとは

パンくずリストを省略した表現で、ユーザーが今WEBサイト内のどの位置にいるのかを視覚的に分かりやすくさせるために上位の階層となるWEBページを階層順にリストアップし、リンクを設置したリストのこと。

メリット

  • ユーザーがどのページをよんでいるのか瞬時にわかるようにする
  • クローラー巡回を手助けする
  • 内部 SEOに有効

 

gretel gem

Railsでパンくずを導入したい場合はgretelというgemが便利。

 

1 Gemfileに記載して、$bundle installを実行する。

2 $rails generate gretel:install 実行する。

3 2 を実行すると、config配下にbreadcrumbs.rbというファイルが生成される。

   breadcrumbs.rbにパンくずの定義を一元化してまとめる

4 viewファイルから<% breadcrumb :hogehoge %>

 このような形でパンくずリストを呼び出す。

参照

gretel/README.md at master · kzkn/gretel · GitHub

【Rails】gretelを使ってパンくずリストを作成しよう | Pikawaka - ピカ1わかりやすいプログラミング用語サイト

 

今回だったら

layout/admin_htnl.slimlにbreadcrumbsを記述styleなども指定する。

main.content-wrapper
section.content-header
h1
= yield 'content-header'
== breadcrumbs style: :ol, class: 'breadcrumb'

section.content
= render 'layouts/flash_message'
= yield

 

2 breadcrumbs.rbにパンくずを定義する

省略
crumb :admin_tags do
link 'タグ', admin_tags_path
parent :admin_dashboard
end

crumb :edit_admin_tag do |tag| #(tag)でidが持って来られるようにする
link 'タグ編集', edit_admin_tag_path(tag)
parent :admin_tags
end

 

3 呼び出したいviewに記述する

= content_for 'content-header' do
| タグ編集

- breadcrumb :edit_admin_tag, @tag #(@tagでid渡す)

.box
= render 'form', tag: @tag


 

今回のRSpec

1 spec/factories/tags.rbにtagのデータ作成

FactoryBot.define do
factory :tag do
type { 'Tag' }
name { 'テストタグ' }
slug { 'test-tag' }
end
end

 

2 spec/system/admin_tags_spec.rb を作成

全部書くと長いので、覚えておきたい点のみ

require 'rails_helper'

RSpec.describe 'AdminArticles', type: :system do
let(:admin) { create :user, :admin }
before do
login(admin)
end
describe 'タグ一覧画面' do
it '「Home > タグ」が正常に表示される' do
visit admin_tags_path
within('.breadcrumb') do ❶
 
expect(page).to have_content('Home'), '「Home」というパンくずが表示さ
れていません'❷
expect(page).to have_content('タグ')
end
end
end

❶within()を使用してページの特定の領域に制限する。

今回は.breadcrumbで指定。.でclass#でidなど指定する。

参照

capybara/README.md at master · teamcapybara/capybara · GitHub

expect(page).to have_content('Home'), '「Home」というパンくずが表示さ
れていません'
これを指定することで、エラーだった際にターミナルに表示され、分かりやすくなる。

 

続き
describe 'タグ編集画面' do
let!(:tag) {create :tag } ❸
it '「Home > タグ > タグ編集 」が正常に表示される' do
visit edit_admin_tag_path(tag)
within('.breadcrumb') do
expect(page).to have_content('Home')
expect(page).to have_content('タグ')
expect(page).to have_content('タグ編集')
end
end
end
end

 ❸ここでlet!を使用して、先にtagを作成しておかないと、visitで(tag)を使用しidを反映させて遷移するときにundefined local variable or method `tag' というエラーが出てしまう。