はじめに

RSpecでRuby on Railsのテストを実施中です。

わからないこと

テストの記述方法がわかりません。

chartkickというGemを使用し、Viewにグラフを表示しています。しかし以下の2点を確認するテストをどう記述すればよいかわかりません。

Rspecのソースを以下に載せました。「ジャンルチャートが正しく表示されている」テストでに以下の2点を確認する内容のテストを記述したいです。

円グラフ内の凡例に記載された「音楽」が存在すること
カーソルを対象の項目上に乗せると、数字が出ること

Rspec
1require "rails_helper"
2
3  describe "統計情報確認ページ", type: :system do
4    describe "グラフチェック" do
5      before do
6        @user_a = FactoryBot.create(:user, name: "user_a", email:"user_a@example.com", password: "password")
7        FactoryBot.create(:post, genre: "音楽", youtube_url:"https://www.youtube.com/watch?v=1jIiYeQg_2Q", comment:"This is user_a comment", user: @user_a)
8        visit login_path
9        fill_in "session[email]", with: "user_a@example.com"
10        fill_in "session[password]", with: "password"
11        click_button "ログイン"
12      end
13
14      it "ジャンルチャートが正しく表示されている" do
15        click_link "統計情報"
16        // ここで円グラフ内の凡例に音楽が存在することを確認したい
17      end
18    end
19  end

テスト対象のViewの一部抜粋です。

slim
1.container
2  .row.row-eq-height
3    .col-md-6.tex-center
4      div.card.card-chart
5        div.card-card-header
6        | ジャンル別チャート
7        div.card-body
8          = pie_chart Post.group(:genre).count

ViewをHTML形式で表示すると、以下のようになります。

HTML
1<div class="card card-chart">
2  <div class="card-card-header"></div>
3    ジャンル別チャート
4    <div class="card-body">
5      <div id="chart-1" style="height: 300px; width: 100%; text-align: center; color: #999; line-height: 300px; font-size: 14px; font-family: 'Lucida Grande', 'Lucida Sans Unicode', Verdana, Arial, Helvetica, sans-serif;">
6        <div class="chartjs-size-monitor">
7          <div class="chartjs-size-monitor-expand">
8            <div class=""></div>
9          </div>
10          <div class="chartjs-size-monitor-shrink">
11            <div class=""></div>
12          </div>
13        </div>
14        <canvas width="506" height="600" class="chartjs-render-monitor" style="display: block; height: 300px; width: 253px;"></canvas>
15      </div>
16      <script type="text/javascript">new Chartkick["PieChart"]("chart-1", [["アニメ",1],["ゲーム",1],["音楽",2]], {});</script>
17    </div>
18</div>