解決したいこと
例えば、ユーザー一覧画面で、「非アクティブなユーザーの場合は背景色をグレーにして表示したい」といった機能を実装したい場合、非アクティブなユーザーの場合は特定のクラス(disable-user
とします)を付与してあげて、そのクラスに対してCSSでbackground-color: grey
を指定する、という対応をとることがあると思います。
これをRSpecのsystem specでテストする場合、私が今まで経験したプロジェクトでは、「非アクティブな場合にdisable-user
クラスが付与されているか」、をテストするのがよくある方法でした。
しかし、ふと、「disable-user
クラスが付与されている要素の背景色がグレーになっているか」というところまでテストできるのかな?と思って調べたところ、可能だったのでここで紹介しておこうと思います。
背景色をテストするコード例
background_color = find('.disable-user').native.css_value('background-color')
expect(background_color).to eq('rgba(128, 128, 128, 1)')
native
でネイティブオブジェクトを取得し、css_value
でgackground-color
を指定すると設定されている背景色が取得できました。
ちなみにrgba(...)
の部分をgrey
にしたらテストは通らなかったです。
終わりに
先輩と話して、今回はsystem specではclassの確認まですれば良く、背景色の確認までやる必要はなさそう、ということで実際には使わなかったですが、勉強になりました。
より簡潔にテストできる方法があれば教えていただきたいです。