※この方法はtwitter bootstrapのmodalを使っている場合、機能しません。

テストを書いていると、Capybaraがアニメーションの途中でボタンを押そうとして、ボタンが見つからないというエラーがでるということはありませんか？
僕は毎回のようにあります。

たまたまググっていたら、テスト環境のjQueryのアニメーションをオフにする方法がヒットしたので、これはいいと思ってやってみたところ、問題なく動きそうだったのでとりあえず採用。また、CSS3のアニメーションをオフにする方法も紹介されていたので、それも合わせて組み込んでみました。

参考にしたURLはこちら。

• https://makandracards.com/coffeeandcode/topics/jquery?switch_to=pane
• http://venombytes.com/2013/03/11/faster-browser-specs

まずはCSS3のアニメーションを無効にするviewを定義。
views/layouts/_no_transition.html.slim

- if Rails.env.test?
  css:
    .notransition * {
      -webkit-transition: none !important;
      -moz-transition: none !important;
      -o-transition: none !important;
      -ms-transition: none !important;
      transition: none !important;
      /*CSS transition properties*/
      -webkit-transition-property: none !important;
      -moz-transition-property: none !important;
      -o-transition-property: none !important;
      -ms-transition-property: none !important;
      transition-property: none !important;
      -webkit-transform: none !important;
      -moz-transform: none !important;
      -o-transform: none !important;
      -ms-transform: none !important;
      transform: none !important;
      -webkit-animation: none !important;
      -moz-animation: none !important;
      -o-animation: none !important;
      -ms-animation: none !important;
      animation: none !important;
    }

次に、jQueryのアニメーションを無効にするviewを定義。
views/layouts/_jquery_no_animation.html.slim

- if Rails.env.test?
  javascript:
    $.fx.off = true;
    $('body').addClass('notransition');

最後に、レイアウトファイル。
views/layouts/default.html.slim

doctype html
html lang="ja"
  head
    meta charset="utf-8"
    meta content="IE=Edge,chrome=1" http-equiv="X-UA-Compatible"
    meta content="width=device-width, initial-scale=1.0" name="viewport"
    title = content_for?(:title) ? yield(:title) : t("app_name")
    = csrf_meta_tags
    /! Le HTML5 shim, for IE6-8 support of HTML elements
    /![if lt IE 9]
      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js" type="text/javascript"></script>
    = stylesheet_link_tag "application", media: "all"
    = render partial: 'layouts/no_transition'
  body
    = render "layouts/navbar_fixed"
    .container
      .content
        .row
          .span12
            = bootstrap_flash
            = yield
      footer
        p © Company 2013
    = javascript_include_tag "application"
    = render partial:'layouts/jquery_no_animation'

これで、テストの際のみ、アニメーションがオフにされます。
が、先頭で書いているように、twitter bootstrapのmodalが表示されずにテストがエラーになったので、使えるときと使えないときがあるようです。とりあえずjQueryのアニメーションくらいはオフにしてもいいんじゃないかなー？と思います。

Tweet