はじめに

サービスの品質を保つために必要不可欠なテストを実施しております。

今回はダイアログ表示機能の結合テストを実装し、その実装内容を記事にしていきたいと思います。

前提

・ダイアログ表示機能は実装済み
　ダイアログ表示機能の実装方法や詳細について、以下URLよりご覧になれます。

・投稿時の結合テストと同じ、テストファイルにダイアログ表示機能の内容も記述しています。
　投稿時におけるテストコードの記述は以下のURLよりご覧になれます。

バージョン

rubyのバージョン　ruby-2.6.5
Railsのバージョン Rails:6.0.0
rspec-rails 4.0.0

ダイアログ表示について

JavaScriptなしで、HTMLとCSSのみを使用してダイアログ表示を行います。

動画のようにボタンをクリックすると、ダイアログが表示されます。
読んで欲しい文章を表示させることができます。

※ダイアログとは「ダイアログボックス」のことをいいます。何かを入力させたりメッセージを確認させるために、操作の過程で一時的に開かれる小さい画面のことです。

index.html

 <dialog id="dialog" class="dialog_style" >
                        「ダイアログの中身の文章（任意）」
 　 <button class="form__btn" onclick="document.getElementById('dialog').close();">
                       「ダイアログの中身にあるボタンの文章（任意）」
   </button>
 </dialog>
 
<button class="form__btn" onclick="document.getElementById('dialog').show();">
                    「クリックするとダイアログが表示されるボタンの文章（任意）」
                    </button>

実施したテスト

テストコードの内容

投稿時の結合テスト

spec/system/definitions_spec.rb

require 'rails_helper'

# 〜省略〜

RSpec.describe 'ダイアログ表示について', type: :system do
    context 'ダイアログ表示ができるとき' do
        it 'ダイアログボタンをクリックするとダイアログ表示ができる' do
        #トップページへ移動する
        visit root_path
        
        # トップページにダイアログボタンが存在することを確認する
        expect(page).to have_css(".form__btn")

        # ダイアログボタンをクリックする
        expect{ find_link('1 「相談」の仕方について', ".form__btn").click }

        # ダイアログの内容が表示されていることを確認する
        expect(page).to have_content('相談')

        # ダイアログボタンをクリックする
        expect{ find_link('2 「回答」の仕方について', ".form__btn").click }

        # ダイアログの内容が表示されていることを確認する
        expect(page).to have_content('回答')

        # ダイアログボタンをクリックする
        expect{ find_link('3 「いいね」の仕方について', ".form__btn").click }

        # ダイアログの内容が表示されていることを確認する
        expect(page).to have_content('いいね')
     end
  end
end

以上です。