Bootstrap4時のRspec radiobutton編

CSSフレームワークは便利なんだけど、テストコードに悩むことがあったのでメモ

結論 CSSのSelector使ってテストする

通常のselectタグのラジオボタンのテストなら

expect(page).to have_select("selectタグの名称", selected: "選択値")

で良いんだけどBootstrap4を使うとselectタグを使用しなくて
checkedで判断するというより.activeで判断する。

以下Bootstrapでのラジオボタン

<div class="btn-group btn-group-toggle" data-toggle="buttons">
  <label class="btn btn-secondary active">
    <input type="radio" name="options id="option1" autocomplete="off"" checked> アクティブ
  </label>
  <label class="btn btn-secondary">
    <input type="radio" name="options" id="option2" autocomplete="off"> ラジオ
  </label>
  <label class="btn btn-secondary">
    <input type="radio" name="options" id="option3" autocomplete="off"> ラジオ
  </label>
</div>

こうなるので、テストコードとしては以下で判断する。CSSセレクタは便利

expect(page).to have_selector(".active", text: "アクティブ")