monjudoh’s diary

Shibuya.js - Test.js LT テスターを支援する仕組みの話

勉強会 JavaScript

お前、誰よ

文殊堂といいます
BePROUD社員

お仕事
- 最近は、JavaScript時々Objective-C

今日のお話

自動テストの話はしません
テスターによるテストの話をします
タイミングによって発生したりしなかったりする類のバグってありますよね
テスターさんがモンキーテストをやってくれてる時に見つけてくれたりします
でも報告されるのは…
「何をやっているときに」
「何が起こったか」
つまり、「操作」と「現象」だけです
原因箇所を特定するにはプログラマもその操作をなんども繰り返さないといけません
ダルい
何とかしたい

問題の実例

IE(主に6,7)で「操作は中断されました」が出る

What Happened to Operation Aborted? – IEBlog

HTML解析中にまだ閉じタグまで解析されていない要素(bodyとか)に対して、子要素の追加や削除を行うと「操作は中断されました」エラーになる
IE6,7で特に酷い…
IE8でも発生する
DOMContentLoaded前にDOM操作しなければいい?
開発規模が大きくなるとそういうミスは混入してしまいがち
jQuery pluginのメソッドの先の先で『.appendTo(document.body)』しているのを見逃す
これに非同期ローダーを組み合わせると大丈夫だったり大丈夫じゃなかったりがタイミングによって違ってきてしまう

対策

やってはいけないことを規定し、自動検出し、
原因箇所を特定する情報を取得する仕組みを作った

やってはいけないこと

HTML解析中にまだ閉じタグまで解析されていない要素(bodyとか)に対して、子要素の追加や削除を行う

原因箇所を特定する情報
- スタックトレース

技術的詳細

(function(){
  var domManip = jQuery.fn.domManip;
  jQuery.fn.domManip = function(){
    if(!jQuery.isReady && !!this.closest('body').size() ) {
      var msg = printStackTrace().join('\n');
      alert(msg);
      throw new Error();
    }
    return domManip.apply(this,arguments);
  }
})();

jQueryでのDOM操作は最終的に概ねdomManipで行われる
domManipをラップし、DOM操作してはいけない条件なら、スタックトレースを表示

スタックトレースの表示にはこのライブラリを使っていて、
https://github.com/emwendelin/javascript-stacktrace
例えばIEでもこんな感じで取れる

まとめ的な物

テスターによるテストでも原因箇所のあたりくらいはつけて、
お互いにハッピーになりましょう