質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

87.79%

RSpecでchartkickをテストしたい

受付中

回答 0

投稿 編集

  • 評価
  • クリップ 1
  • VIEW 398

score 40

はじめに

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

わからないこと

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

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

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

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

  describe "統計情報確認ページ", type: :system do
    describe "グラフチェック" do
      before do
        @user_a = FactoryBot.create(:user, name: "user_a", email:"user_a@example.com", password: "password")
        FactoryBot.create(:post, genre: "音楽", youtube_url:"https://www.youtube.com/watch?v=1jIiYeQg_2Q", comment:"This is user_a comment", user: @user_a)
        visit login_path
        fill_in "session[email]", with: "user_a@example.com"
        fill_in "session[password]", with: "password"
        click_button "ログイン"
      end

      it "ジャンルチャートが正しく表示されている" do
        click_link "統計情報"
        // ここで円グラフ内の凡例に音楽が存在することを確認したい
      end
    end
  end

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

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

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

<div class="card card-chart">
  <div class="card-card-header"></div>
    ジャンル別チャート
    <div class="card-body">
      <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;">
        <div class="chartjs-size-monitor">
          <div class="chartjs-size-monitor-expand">
            <div class=""></div>
          </div>
          <div class="chartjs-size-monitor-shrink">
            <div class=""></div>
          </div>
        </div>
        <canvas width="506" height="600" class="chartjs-render-monitor" style="display: block; height: 300px; width: 253px;"></canvas>
      </div>
      <script type="text/javascript">new Chartkick["PieChart"]("chart-1", [["アニメ",1],["ゲーム",1],["音楽",2]], {});</script>
    </div>
</div>

イメージ説明

補足

capybaraも使用しています

バージョン情報

  • Rails 5.2.4
  • Ruby 2.7.2
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

まだ回答がついていません

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 87.79%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る