JavaScriptでEventまわりのコードをテストする時のアレ

addEventListenerのラッパとか、書くじゃないですか。

iPhoneやAndroidでswipe event的なものを用意するために、DOMContentLoaded呼ばれたときにbindしておいてevent delegation使ってほむほむするコードも書くじゃないですか。

で、そいつらをテストするコードも書くじゃないですか。

直接画面をタッチ/クリックして動作確認するのももちろん必要だけど、まずは自動テスト書くじゃないですか。

で、そん時にはまあこういう関数を適当に用意して、自家発電すると思うんだけど

function emit(el, event) {
  var e = document.createEvent("Event");
  e.initEvent(event, true, true);
  el.dispatchEvent(e);
}

当たり前田のクラッカーですが、こういう風にして生成されたイベントには、ユーザのアクションによって生まれたモノホンのイベントには備わっているはずの種々のモノが備わってないのです。

例えば、iOS/Androidでtouchstart / touchmove / touchend が呼ばれた時のEventオブジェクトには、本来 e.touches っていう名前でタッチした場所の座標とかを持ったオブジェクトのArrayがくっついていて、e.touches[0].pageX で一本めの指のタッチした場所のX座標、e.touches[1].pageXで二本めの指のそれ、とか取れるわけだけども。

document.createEventで自家発電したオレオレEventには、そういうものはくっついていないわけです。（そもそもユーザがどこかをタッチしたわけでもないので、タッチした場所の座標とかないのが当たり前）なので、そういうものが必要なテストを書く場合は e.touches = [ ... ]; とかしてくっつけてあげる必要があります。

僕は10分ほどこれでハマりました。

アホですね。