はじめに
サービスの品質を保つために必要不可欠なテストを実施しております。
今回はダイアログ表示機能の結合テストを実装し、その実装内容を記事にしていきたいと思います。
前提
・ダイアログ表示機能は実装済み
ダイアログ表示機能の実装方法や詳細について、以下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
以上です。