vaguely

和歌山に戻りました。ふらふらと色々なものに手を出す毎日。

Chromeでのbackbone-min.js、underscore-min.jsの読み込みでエラー

ちょっと良くわからない問題にぶつかったのでメモ。

Google Chrome以前から作成しているサイトを開くと、「backbone-min.map」と「underscore-min.map」で404エラーが発生します(XubuntuChrome ver.40.0.2214.115、backboneはver.1.1.2、underscoreは1.8.1で確認)。

調べたところjQueryでも同様な問題があり、その解決方法は以下の記述を削除する、とあったので確認しました。

@ sourceMappingURL=jquery-1.10.2.min.map

するとbackbone-min.js、underscore-min.jsにもそれらしき記述はあったのですが、すでにコメントアウトされていました(ように見えました)。

backbone-min.js

//# sourceMappingURL=backbone-min.map

念の為、ということで上記をまるごと削除すると、エラーが解消しました。

次に、コメントアウトのための「/」と「#」との間にスペースを入れてみたところ、これもエラーが再現しなくなりました。

// # sourceMappingURL=backbone-min.map

つまり、「/」と「#」が続けて書かれていることでコメントアウトが動作しなくなった・・・?ようです。

気になっている方がいましたらぜひお試しを。

jasmine-jquery

上記の問題がなぜ見つかったかというと、前回の続きでbackboneのViewのテストを実行するにはjasmine-jqueryが便利、ということで確認していたときに発生した問題の確認をしていたのでした。

jasmine-jquerySpecを使うと、Specファイルでテスト対象のHTMLを作成・追加するのではなく、HTMLを別途作成してそれをテスト実行時に読み込むことができるため、Specファイルをスッキリまとめられます。

インストールは上記リンクのREADME.md > Installationの第一項のリンクからjsファイルをダウンロードして、任意の場所に置くのが一番簡単です(私はSpecファイルと同じくspec/javascript/specsに置きました)。

他のjavascriptと同じく、jasmine.ymlの「src_files:」にパスを記述しておきます。

ロードするHTMLは、デフォルトでspec > javascripts > fixturesに置きます。

読み込みは以下のようにloadFixturesで読みこめば良いのですが、ここで問題が発生。

describe("javascript.js", function() {
  var fileModel;
  beforeEach(function () {
    fileModel = new FileModel();
    loadFixtures('viewTest.html');
  });
〜省略〜

問題点

実行自体は問題ないのですが、「ユーザ体験に対して好ましくない影響があるため、メインスレッドでの同期 XMLHttpRequest は推奨されません。」という警告が表示されます(Firefoxで確認)。

要はファイルの読み込みを非同期でやれ、ということのようなのですが、loadFixturesを非同期で実行する方法はあるのでしょうか(spyと組み合わせるとか・・・?)。

まぁ、警告であり、テスト自体がまともに動いているのであれば放っておいても良さそうな気はしますが・・・。

参考

jQueryのmin.mapについて

jasmin-jquery