【アプリ】Rspecを書いてみる（featureのテスト２）

よ・・・よし、これで最後だ。

もう一個作りたかったテストはTimelineの機能テスト。
Nekoteniがこのねこてちょうというアプリに優先度高めで欲しかった機能。

タグボタンを押すと、そのタグに紐付けされた投稿だけが表示される。

これ。

なのでこれのテストを作ります。

ストーリーはこんな感じ。
・トップページに行く。
　↓
・ログインする。
　↓
・ログイン後、timeline_pathに遷移するかどうか確認。
・すでに登録されているタグ１、タグ２の２つの投稿記事があるかどうかも確認。
　↓
・メモ１＆タグ１、メモ２＆タグ２の組み合わせの投稿記事を作成。
・timeline_pathに遷移するかどうか確認。
　↓
----ここまでcreate_memo_spec.rbを流用-----
　↓
・タグリストのタグ１のボタンをクリックする。
　↓
・タグ２がタイムライン上にないことを確認。
　↓
・タグリストのタグ２のボタンをクリックする。
　↓
・タグ１がタイムライン上にないことを確認。
　↓
タグリストのすべてのボタンをクリックする。
　↓
・timeline_pathに遷移するかどうか確認。
・タグ１とタグ２がタイムライン上にあることを確認。

ここで問題になるのが赤字のところ。
調べたいのはタイムライン上にタグ２がないことだけど、タグリストにはタグ２がある。
つまり、expect(page).not_to have_content('タグ2')は使えない。

というわけでgoogle先生の登場です。
今度はちゃんと検索ワードにcapybaraを入れる！！

あれこれ探して見つかったのがここ。

使えるRSpec入門・その4「どんなブラウザ操作も自由自在！逆引きCapybara大辞典」

素敵ー！しびれるー！！
んじゃ、早速探して行きましょう。

あるクラス内にあるテキストだけhave_contentしたいわけです。

これかな？
特定のタグやCSS要素に特定の文字列が表示されていることを検証する

それともこれかな？
画面上に複数現れる要素を絞り込む

んー、どっちでもできそうだけど、withinの方が楽そう。
楽な方にする。うん。

投稿記事が表示されてるクラスは「col-sm-8」なんだけど・・・。
うーん、これ、bootstrapの表示幅のクラスなのね。
これってさ、今はcol-sm-8は１つしかないからいいけど、例えばcol-sm-2が４つあったらどのcol-sm-2よ？！って絶対エラーが出るよね。
というわけで、このTIPSを使う。
Tips：テストしにくいviewはテストをしやすいように変更する
idかclassをつけておけば、どのcol-sm-8か悩まなくてすむし、テストするときにもわかりやすいよね。

というわけで、タグリストがある「.col-sm-4」は、「.col-sm-4.tag_list_container」に変更。
投稿記事が並んでる「.col-sm-8」は「.col-sm-8.main_content」に変更した。

で、結果こうなりました。
spec/features/timeline_spec.rb

require 'rails_helper'

describe 'メモを登録する' do
let(:user) { create(:user, password: 'password', password_confirmation: 'password') }
let!(:tag1) { create(:tag, user_id: user.id, tag: 'タグ1') }
let!(:tag2) { create(:tag, user_id: user.id, tag: 'タグ2') }

it do
# トップページに行く_
visit root_path

# ログインする
click_link 'ログインする'
fill_in 'email', with: user.email
fill_in 'password', with: 'password'
click_button 'ログイン'

# ログイン後、timeline_pathに遷移するかどうか
uri = URI.parse(current_url)
expect(uri.path).to eq timeline_path
expect(page).to have_content('タグ1')
expect(page).to have_content('タグ2')

# メモ投稿ページに遷移するかどうか
click_link 'メモを投稿する'
expect(page).to have_content('投稿する')

# 「メモ１」という内容のメモを作成する
fill_in 'text', with: 'メモ1'
check("tag_#{tag1.id}")
click_button '投稿する'

#puts page.body
# メモ作成後、timeline_pathに遷移して、「メモ１」&「タグ１」のメモが作られているかどうか
uri = URI.parse(current_url)
expect(uri.path).to eq timeline_path
expect(page).to have_content('メモ1')
expect(page).to have_content('タグ1')

# メモ投稿ページに遷移するかどうか
click_link 'メモを投稿する'
expect(page).to have_content('投稿する')

# 「メモ２」という内容のメモを作成する
fill_in 'text', with: 'メモ2'
check("tag_#{tag2.id}")
click_button '投稿する'

# メモ作成後、timeline_pathに遷移して、「メモ２」&「タグ２」のメモが作られているかどうか
uri = URI.parse(current_url)
expect(uri.path).to eq timeline_path
expect(page).to have_content('メモ2')
expect(page).to have_content('タグ2')

#

よいよしよーし！！

あ、文頭のlet!でタグを作る際に、factory_girl使ってみました！！
tag.rbファイルを作成して、こういう風に書いておいたっす。

spec/factories/tag.rb

FactoryGirl.define do
factory :tag do
end
end

中身は空なので、タグを作る際のuser_idとタグ名は指定しなくちゃいけないんですが、これでletでユーザーを作るのと同じ書式になるから、見やすいでしょ（＾＾）エヘヘ。
それだけなんだけどね・・・。

よし！これでテストは終了！！
コミットコミット！！