enumで実装したラジオボタンのRspec

概要

次のようなラジオボタンのどちらかを選択して、

「宣言する」を押すというところまでのRspecを作成しました。

ラジオボタンの作成につきましては、前回の記事を参照いただけますと幸いです。

こちらのcapybaraのドキュメントを引用させていただくと、

ラジオボタンの選択方法については、「choose 'A radio button'」と記載があります。
しかし、私はこのA radio buttonの表記の方法でかなり詰まってしまったので、備忘録として投稿させていただきます。

開発環境

• OS：Amazon Linux2
• Rails 6.1.6.1

テストコード

以下に、今回のテストコードを記載させていただきます。

spec/system/announcements_spec.rb

:
describe '宣言画面のテスト' do
    before do
      visit new_user_announcement_path(user.id)
    end

    context '表示の確認' do
      it 'URLが正しい' do
        expect(current_path).to eq '/users/' + user.id.to_s + '/announcements' + '/new'
      end
      it '宣言達成ステータスが表示され、未達成がチェックされていて、達成が表示されている' do
        # view側(new.html.erb)のlabelでvalueを指定したことで、この記述が可能になる。
        expect(page).to have_checked_field('未達成')
        expect(page).to have_field('達成')
      end
      it '宣言するボタンが表示される' do
        expect(page).to have_button '宣言する'
      end
    end

    context '登録成功のテスト' do
      before do
        #達成のラジオボタンを選択して、ページに達成が表示されるかのテスト
        #announcement_achieve_status_achieveは、検証ツールの「達成」のlabel forの値
        choose "announcement_achieve_status_achieve" 
        expect(page).to have_checked_field('達成')
      end

      it '新しい宣言が正しく保存される' do
        expect { click_button '宣言する' }.to change{Announcement.count}.by(1)
      end

      it 'リダイレクト先が、ユーザーの詳細画面になっている' do
        click_button '宣言する'
        expect(current_path).to eq '/users/' + user.id.to_s
      end
    end
  end
:

今回特にお伝えしたい記述はこちらの記述です。

   choose "announcement_achieve_status_achieve" 
   expect(page).to have_checked_field('達成') 

こちらは、「達成」ボタンを選択すると、「達成」にチェックが入るという意味のテストです。

これら2つのテストをパスするために共通して大事なのは、新規宣言画面のview側の記述です。

app/views/announcements/new.html.erb

 :
   <%= f.radio_button :achieve_status, Announcement.achieve_statuses.key(0) %>
   <%= f.label :achieve_status, Announcement.achieve_statuses_i18n[:nonachieve], value: Announcement.achieve_statuses.key(0) %>
    
   <%= f.radio_button :achieve_status, Announcement.achieve_statuses.key(1) %>
   <%= f.label :achieve_status, Announcement.achieve_statuses_i18n[:achieve], value: Announcement.achieve_statuses.key(1) %>
:

達成、未達成labelの「value」に、値が記述されているかと思います。
value: Announcement.achieve_statuses.key(1)というのは、"achieve"を表しています。
詳細は、冒頭で紹介させていただいた、私の前回の記事を参照いただけますと幸いです。

これによって、何が変わるのかと申しますと、検証ツールにて、

未達成ボタンのlabelには、
<label for="announcement_achieve_status_nonachieve">未達成</label>
達成ボタンのlabelには、
<label for="announcement_achieve_status_achieve">達成</label>
となっています。
このように、入力フォームのlabelでvalue: Announcement.achieve_statuses.key(1)とvalueを記述することで、どちらのlabelが達成なのか、未達成なのかと分かるようにする必要があったということでした。

そして、肝心のテストコード「choose 'A radio button'」部分には、検証ツールで確認した、"announcement_achieve_status_achieve"を使用して、

   choose "announcement_achieve_status_achieve" 

といった形でラジオボタンを選択する必要があるということなのですね。
私は、このvalue値を記述するという概念を知らず、chooseの後に様々な値を入力してはテストが通らない・・・ということを繰り返してしまいました。

今後、もっとRspecについて学習していきます!