소개

서비스 품질을 유지하기 위해 필수적인 테스트를 실시하고 있습니다.

이번은 다이얼로그 표시 기능의 결합 테스트를 구현해, 그 구현 내용을 기사로 해 가고 싶습니다.

전제

· 다이얼로그 표시 기능은 실장 완료
다이얼로그 표시 기능의 실장 방법이나 상세에 대해서는, 이하 URL로부터 보실 수 있습니다.

· 투고시의 결합 테스트와 같은 테스트 파일에 다이얼로그 표시 기능의 내용도 기술하고 있습니다.
투고시에 있어서의 테스트 코드의 기술은 이하의 URL보다 보실 수 있습니다.

버전

루비 버전 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

이상입니다.