Ruby on Rails開発のインターン (Day 17)

こんにちは、皆さん!

今日はついに実際に使っているマップにテストを書いていこうと思う。ここまではずっとcapybaraテストを勉強する用のアプリに書いてきた。さあ、ここから習ったものを使って実際に使用するものに反映していこう。


  • トピック:
  1. capybaraテストでCSSの値にアクセスする方法
  2. capybaraテストでJavaScriptを実行する方法


  • 疑問:


  • 問題:


  • 学習した内容:
  1. capybaraテストからCSSの値を引き出す方法
  2. Rubyでsubstringする方法
  3. capybaraテストでJavaScriptを実行する方法
  4. マップ上のすべてのマーカーを返してくれる関数はないので、マーカーを足すときに配列などどこかにそのコピーを持っておいてそこからマーカーにアクセスできる


  • 今後やってみたいこと:


  • リソース:
  1. The Basics of Capybara and Improving Your Tests — SitePoint


capybaraテストでCSSの値にアクセスする方法

マップの横幅を使い、どんな大きさのマップにも対抗できるテストを書こうとした僕はcapybaraテストの中からCSSの値をとる必要があった。それで、調べてみて、capybaraからCSSの値をとる方法を探し出した。

最初に、div#map(IDが"map"のdivタグ)にあるマップにアクセスしたかった。
それで、下記のようにアクセスした。

find('#map')

そして、次はそこからスタイルを取り出す方法。これに関しては全くリソースが見当たらなかった。

find('#map').style('width')

結構適当にあてずっぽうで行ったところもあるが、これでスタイルにアクセスすることができた。
style.widthのようにドットとスタイル名でアクセスするJavaScriptとは違って、スタイル名を()の中に入れる。
それを変数に入れて、後で使う。

map_width = find('#map').style('width')

とここで、うまくいかなかったので、とりあえず、この変数の内容をアウトプットしてみた。驚くことにHashだったのだ。

{"width"=>"400px"}

ということで、改めて、実際の値を取り出す方法をHashのやり方に変えた。map_width['width']みたいに。
ここまででも、なかなか複雑だが、さらに、面倒くさいことに得られた値には"px"がついているので、数字として運用するにはさらにこれを取り除く必要がある。

# 横幅のHashにアクセス
map_width_hash = find("#map").style("width")
# 横幅の値の文字列版を入手
map_width_string = map_width_hash['width']
# 数字の値にするためにpxをカットして、そのあとにそれをintegerに変換する
map_width = map_width_string[0..(map_width_string.length-2)].to_i

ちなみに、ここでRubyにおいてどうやってsubstringをやるのか学んだ(笑)

capybaraテストでJavaScriptを実行する方法

たまにcapybaraテストの中でJavaScriptを使いたくなることがある。例えば、僕のケースだとマップの中心を他の地点にするとき。これはマップオブジェクトへのアクセスがないと成立しないし、肝心のマップオブジェクトはRubyからはアクセスできない。そんなとき、JavaScriptを使ってそこに作用する必要があるのだ。

やり方は簡単。下記のような関数をcapybaraテストの中に入れればよい。

page.execute_script("example('Hello')")

この例だと、"example"という名前の関数を'Hello'という引数を入れたものを実行する。

***ひとつ大事なことは実行したいJavaScriptのコードがcapybaraテストで訪れるサイト内でアクセスできるようにしなければならないということ!! 僕の場合は直接map.html.erbに入れた。(パイプラインを使っている人は大丈夫だと思う)***

まとめ

今日はいい日だった。少しコードを書いて、それのおかげでcapybaraが複数のマーカーを自動でクリックしてくれた。ライブでそのマーカーの一つ一つをめぐるのを見た時はかなり満足していたし、そのアプリがクールに見えた。
結局、職場のプログラムでcapybaraテストによるマップのテストはまだうまくいかなかったが、最終的なアイデアをしっかりコード化できた。
本当のマップは少しばかり複雑なので、もう少しコードを書くのに時間がかかりそう。うまくここまでやってきたコードが直結するといいな。


ご精読ありがとうございました。では、また次回まで✌



Day 18はこちら↓↓
programming-shop.hatenablog.com


Day 16はこちら↓↓
programming-shop.hatenablog.com