【Rspec】コントローラーのテストコードで謎のエラーが出た話〜CSSの記述ミス〜

解決したいこと

モデルのテストコードが終わり、コントローラーのテストコードを書いていました。
中身を何も書かずに実行し、緑字で全てが通って一安心。
さて中身を書いてチェックしていくぞと始めた矢先の出来事です。

発生している問題・エラー

Failures:

  1) PartiesController GET #index indexアクションにリクエストすると正常にレスポンスが返ってくる
     Failure/Error: <%= image_tag '1.jpeg', class: 'img-fluid', alt: 'Responsive image' %>

     ActionView::Template::Error:
       Invalid CSS after "  padding: 20px;0": expected "{", was "}"
     # (sass):10660
     # ./app/views/parties/index.html.erb:10:in `_app_views_parties_index_html_erb__2288480399134122666_70347675772820'
     # ./spec/requests/parties_spec.rb:11:in `block (3 levels) in <top (required)>'
     # ------------------
     # --- Caused by: ---
     # Sass::SyntaxError:
     #   Invalid CSS after "  padding: 20px;0": expected "{", was "}"
     #   (sass):10660

Failure/Error: <%= image_tag '1.jpeg', class: 'img-fluid', alt: 'Responsive image' %>

このコードはtopページで表示している画像のコードで関係ないもののはずなのに、なぜかここが引っかかる。
テストコードはこんな感じ。

parties_spec.rb

require 'rails_helper'

describe PartiesController, type: :request do

  before do
    @party = FactoryBot.build(:party)
  end

  describe "GET #index" do
    it "indexアクションにリクエストすると正常にレスポンスが返ってくる" do
      get root_path
      binding.pry
      expect(response.status).to eq 200
    end
    it "indexアクションにリクエストするとレスポンスに投稿済みのpartyの名前が存在する" do
    end
    it "indexアクションにリクエストするとレスポンスに投稿済みのpartyの画像が存在する" do
    end
    it "indexアクションにリクエストするとレスポンスに投稿済みのpartyの開催地域が存在する" do
    end
    it "indexアクションにリクエストするとレスポンスに投稿済みのpartyのジャンルが存在する" do
    end
  end
end

binding.pryで止まっていない。
indexアクションで並べているものと関係ないものが引っかかっているのはわかったが、どうにも原因が掴めないまま時間が過ぎてしまっていた。
そこでエラー文を読んでみると、CSSがおかしいような表示。
んん？？なんでCSS？？

ActionView::Template::Error:
Invalid CSS after "  padding: 20px;0": expected "{", was "}"

padding: 20px;0
よーく見るとこれがおかしいことに気付く。
「　;　」の後に謎に「　0　」が入っている。ミスタイプだ。
コピーしてVScodeの検索にかけてみると、該当する記述がCSSファイルにあったので0を消して修正。

しっかりテストが通った！
エラーの解消方法の基本はエラー文を読む、というのが未だにきちんとできていないなと痛感。
検索してヒントをもらえたので感謝です。

参考にさせていただきました

CSSの記述が間違っていてエラーが出た話

ありがとうございました。