System Spec click_onでリンクを押したはずがページ遷移に失敗する

Question

現在Railsで家計簿アプリを作っており、
System Specで以下のようにテストを書いています。

require 'rails_helper'

RSpec.describe 'Incomes', type: :system do

    it "incomeの新規登録" do
        # トップページへアクセス
        visit root_path
        #収入を記録ボタンを押す
        expect(page).to have_content '収入を記録'
        click_link '収入を記録'
        #値を全て入力せずCreate Incomeボタンを押す
        expect(page).to have_content 'Create Income'
        click_button 'Create Income'
        #income/newページをrender
        visit current_path
　　　〜略〜

私の想定では
0. トップページで収入を記録をクリック
0. 収入の新規登録ページに遷移
0. 空欄のままCreate Incomeボタンを押し、エラーによってページを再度読み込み

という流れなのですが、テストを実行したところ

     # --- Caused by: ---
     # Capybara::ExpectationNotMet:
     #   expected to find text "Create Income" in "ホーム\n収入を記録\n支出を記録\n収入を確認\n支出を確認\n家計簿アプリ\nこれは家計簿のアプリです。\nページ上部から項目を選んで記入してください\n今月の収支\n収入：0円\n支出：0円"
     #   ./spec/system/incomes_spec.rb:16:in `block (2 levels) in <top (required)>'

このようなエラーが表示され、ログは以下のようになっています。

   (0.2ms)  SELECT "schema_migrations"."version" FROM "schema_migrations" ORDER BY "schema_migrations"."version" ASC
   (0.1ms)  begin transaction
Started GET "/" for 127.0.0.1 at 2020-01-29 15:45:42 +0900
Processing by StaticPagesController#home as HTML
  Rendering static_pages/home.html.erb within layouts/application
   (0.3ms)  SELECT SUM("incomes"."price") FROM "incomes" WHERE "incomes"."date" BETWEEN ? AND ?  [["date", "2020-01-01"], ["date", "2020-01-31"]]
  Income Load (0.2ms)  SELECT "incomes".* FROM "incomes" WHERE "incomes"."date" BETWEEN ? AND ? ORDER BY "incomes"."date" DESC  [["date", "2020-01-01"], ["date", "2020-01-31"]]
   (0.2ms)  SELECT SUM("expenses"."price") FROM "expenses" WHERE "expenses"."date" BETWEEN ? AND ?  [["date", "2020-01-01"], ["date", "2020-01-31"]]
  Expense Load (0.2ms)  SELECT "expenses".* FROM "expenses" WHERE "expenses"."date" BETWEEN ? AND ? ORDER BY "expenses"."date" DESC  [["date", "2020-01-01"], ["date", "2020-01-31"]]
  Rendered static_pages/home.html.erb within layouts/application (10.3ms)
  Rendered layouts/_header.html.erb (1.1ms)
Completed 200 OK in 72ms (Views: 30.6ms | ActiveRecord: 1.6ms)
Started GET "/assets/tempusdominus-bootstrap-4.css" for 127.0.0.1 at 2020-01-29 15:45:42 +0900
Started GET "/incomes/new" for 127.0.0.1 at 2020-01-29 15:45:44 +0900
Processing by IncomesController#new as HTML
  Rendering incomes/new.html.erb within layouts/application
  Rendered incomes/new.html.erb within layouts/application (533.6ms)
  Rendered layouts/_header.html.erb (0.4ms)
Completed 200 OK in 665ms (Views: 553.6ms | ActiveRecord: 0.5ms)
   (0.1ms)  rollback transaction
   (0.1ms)  begin transaction
   (0.1ms)  rollback transaction
   (0.1ms)  begin transaction
   (0.1ms)  rollback transaction

###試したこと
エラーコードの

expected to find text

の箇所から、見つかったテキストがトップページのものなのでページ遷移に失敗している
のは分かるのですが、どこを直すべきか分かりません。

また、

it "incomeの新規登録" do
        #直接incomes#createのパスを送る
        visit incomes_path
        expect(page).to have_content 'Create Income'
        click_button 'Create Income'
        #income/newページをrender
        visit current_path
        #値を全て入力してCreate Incomeボタンを押す

上のようにvisitで直接createアクションのパスを送ったところ、
以下のようなエラーが起きました。

     # Capybara::ExpectationNotMet:
     #   expected to find text "Create Income" in "ホーム\n収入を記録\n支出を記録\n収入を確認\n支出を確認\nカテゴリを選択してください\n給与\n配当\nおこづかい\nその他"
     #   ./spec/system/incomes_spec.rb:14:in `block (2 levels) in <top (required)>'

create incomeボタン以外のテキストは見つかっているようなので、
form_forとbootstrapを使ってボタンを書いた事が原因で
テキストが見つけられていないのかと思っています

###コード
収入を記録ボタンのコード

<header>
<nav class="navbar navbar-expand-md  navbar-light bg-light conteiner">
  <button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#bs-navi" aria-controls="bs-navi" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  
  <div class="collapse navbar-collapse row" id="bs-navi">
      
    <ul class="navbar-nav ">
        <li class="nav-item col-sm-3"><%= link_to "ホーム", root_path, class:"nav-link" %></li>
        <li class="nav-item col-sm-3"><%= link_to "収入を記録", new_income_path, class:"nav-link" %></li>
        <li class="nav-item col-sm-3"><%= link_to "支出を記録", new_expense_path, class:"nav-link" %></li>
        <li class="nav-item col-sm-3"><%= link_to "収入を確認", incomes_path, class:"nav-link" %></li>
        <li class="nav-item col-sm-3"><%= link_to "支出を確認", expenses_path, class:"nav-link" %></li>
    </ul>
  </div>
</nav>
</header>

incomesコントローラーのコード

class IncomesController < ApplicationController
    
    def index
      @incomes = Income.all
      if params[:category].present?
        @incomes = @incomes.get_by_category params[:category]
      end
    end
  
    def show
      @income = Income.find(params[:id])
    end
  
    def new
      @income = Income.new
    end
  
    def edit
      @income = Income.find(params[:id])
    end
  
    def create
      @income = Income.new(income_params)
      if @income.save
        redirect_to action: index
      else
        flash.now[:danger] = '入力に失敗しました。全ての項目を記入してください'
        render 'new'

      end
    end
  
    def update
        @income = Income.find(params[:id])
      if @income.update(income_params)
        flash[:success] = "編集に成功しました"
        redirect_to action: 'index'
      else
        render 'edit'
      end
  
    end
  
    def destroy
      @income.destroy
      flash[:success] = "削除に成功しました"
      redirect_to  root_url
    end
  
    private
      def income_params
        params.require(:income).permit(:category, :price, :date, :memo)
      end
end

incomes#newページのコード

  <%= form_for(@income) do |f| %>
      <section class = "row incomes_row">
        <div class="incomes_item col-sm-3">
          <%= f.label :カテゴリ %>
          <%= f.select :category, [["給与", "給与"], ["配当", "配当"], ["おこづかい", "おこづかい"], ["その他", "その他"]] %>
        </div>
        
        <div class="incomes_item col-sm-3">
          <%= f.label :金額 %>
          <%= f.text_field :price %>
        </div>

        <div class="incomes_item col-sm-3">
          <%= f.label :日付 %>
          <%= f.date_select :date, {include_blank: true, use_month_numbers: true} %>
        </div>

        <div class="incomes_item col-sm-3">
          <%= f.label :メモ %>
          <%= f.text_field :memo %>
        </div>
        </br>
      </section>
  <div class="actions">
    <%= f.submit %>
  </div>
<% end %>

###補足情報

rspec -v
RSpec 3.9

• rspec-core 3.9.1
• rspec-expectations 3.9.0
• rspec-mocks 3.9.1
• rspec-rails 3.9.0

Answer 1

RequestSpecではなくSystemSpecですよね？
全く別物なので混乱してしまいました。

テストの内容も省略されており、それに関するファイルの情報もないため何もわかりませんが
まずは、実際にテストに書いてあることを手で動かしてみて、期待通りになるかを確認してみてはどうでしょうか？

expect(page).to have_content 'Create Income'

の時点でトップページを表示しているようなので、

click_on '収入を記録'

の動作が期待通りではないのかもしれません。

Comments

[ketyan]

ご回答有り難うございます。
まずはタイトルの訂正とテストコードの追記をさせていただきました。
原因の特定のために足りていないコードはありますでしょうか。

サーバーを起動して実際に試すと期待通りの動作をするのですが、
テスト上では失敗しています。

'create income'や'収入を記録'などはコードからコピペしているので
写し間違いはないと考えており、原因が分かりません。

[rhiroe]

とりあえずは、controllerファイルですかね。

あと、一応確認ですけど、ログインの機能の実装等はないですか？
例えば、ログインしてないとトップページにリダイレクトされる...とか。

[ketyan]

ファイルを追記させていただきました。
はい、ログイン機能はつけておりません。

visitでincome_pathを送ったところ、
newページに含まれる、'create income'以外のテキストデータは
確認できました。
ボタンをform_forとbootstrapで作ったことに原因があるのでしょうか。

[rhiroe]

うーん、ちょっとわからないですね...。
ログを見た感じ "ホーム\n収入を記録\n支出を記録\n収入を確認\n支出を確認 ..." のテキストはヘッダーであって、トップページでなくても表示されそうに見えるんですが、どうでしょうか。
現在の画面が確実にトップページである、というのであれば正直お手上げなんですが、トップページだと思っていたけど実はちゃんと new ページを表示していた、のであれば解決の糸口がありそうです。
ボタンの存在確認を have_content で行ったことがない (click_buttonでクリックできたかどうかで存在確認となり得る) ので、もしかすると have_content でボタンを検知できていないのかもしれません(未検証)。

どんな画面が表示されているのか、どんなテキストが画面上にあるのか、は save_and_open_page や take_screenshot を仕込んでページを表示させてみたりスクリーンショットを保存してみるとわかりやすいかと思います。

[ketyan]

ご回答有り難うございます。

テスト結果はスクリーンショットで確認していますが、全てトップページでした…
動作自体は問題がないので、もう少し調べてダメなら次に進もうと思います。
お時間を割いていただきありがとうございました。