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: "アクティブ")