assetsフォルダの画像とpublicフォルダの画像とセレクタの部分一致
assetsフォルダの画像とpublicフォルダの画像とセレクタの部分一致
rspecを記述している時に、画像の表示をテストする際にsrc属性の値をチェックする際に少しハマった事があったので、こちらにまとめます。
・[public]フォルダに画像を保存した時
[public]フォルダに画像を保存すると、通常は以下のようなHTMLになる。
[public/default.jpg]に画像を保存した場合
[htmlファイル] <img src="/default.jpg"> ①
※ポイント
viewファイルに記載する時のパスは、以下のようになる。
[viewファイル] = image_tag '/default.jpg' ファイルのパスは、/から記載する。
ブラウザに表示されるhtmlのsrc属性は、①のようにファイル名がそのまま表示される。
・[assets/images]フォルダに画像を保存した時
[assets/images]フォルダに画像を保存すると、通常は以下のようなHTMLになる。
[assets/images]に画像を保存した場合
[htmlファイル] <img src="/assets/cooking_memory/default-c11415b5b99233bc64bbedd7a2d6870611196c7bcd9b5a4bfe8dcd5ece0ade65.jpg"> ②
※ポイント
viewファイルに記載する時のパスは、以下のようになる。
[viewファイル] = image_tag 'default.png' /から記載せずにそのままパスを記載する。
ブラウザに表示されるhtmlのsrc属性は、②のようにファイル名がハッシュになっている。
RSpecのテスト時
RSpecで画像の表示をテストする場合は、以下のようになる。
・[public]フォルダに画像が保存されている時
[specファイル]
expect(page).to have_selector("img[src$='default.jpg']")
$を記載する事で、属性の値がdefault.jpgで終わるものになる
・[assets/images]フォルダに画像が保存されている時
[specファイル]
expect(page).to have_selector("img[src*='default.jpg']")
*を記載する事で、属性の値にdefault.jpgを含むもの
※ポイント
セレクタの部分一致
前方一致 E[foo^="bar"] foo属性の値がbarで始まるE要素
後方一致 E[foo$="bar"] foo属性の値がbarで終わるE要素
部分一致 E[foo*="bar"] foo属性の値にbarを含むE要素
アプリが元々保持する画像は、[app/assets/images]フォルダに保存するのが推奨!!
