14

div 要素のクリックをシミュレートするにはどうすればよいですか? それともマウス移動？それとも文字入力？

mochaのようなサーバー側のnodejs環境でどうすればいいですか? そして、カルマのようなランナーを使用して、ブラウザ環境でそれを行うにはどうすればよいですか?

4

2 に答える 2

20

一般に、実際にテストしたい状態変更ロジックからイベント ハンドラーを分離する方がよいことがわかりました。

たとえば、「タブ」キーの押下に反応して何かをする必要があるコンポーネントがあります。

// this is hooked up in my render function
onKeyPress: function (e) {
  if (e === 9) {
    e.preventDefault()
    this.onTab(e.shiftKey)
    return
  }
  ..
},
onTab: function (shift) {
  var newstate = states.tab(shift, this.state)
  if (newstate) this.setState(newstate)
}

次に、states.jsファイルには、現在の状態とユーザーがタブキーを押したという事実に基づいて状態を変更する方法を処理するロジックがあります。このstates.tabメソッドは「純粋」であり、副作用がないため、100% 単体テスト可能です。状態を受け取り、新しい状態を返します。

そして、これは「質問に直接答える」ものではなかったかもしれませんが、私は役に立ちたいと思っています =)状態を変更するロジックをイベント ハンドラーから切り離すことで、コードがよりテストしやすく保守しやすくなります。

イベントをシミュレートする必要がまったくないと言っているわけではありません — すべてが正しく配線されていることを確認するためのスモークテストなど、多くの場合に役立ちます。しかし、ブラウザー イベントをシミュレートしたいと思ったとき、ほとんどの場合、コードが結合しすぎていたことがわかりました。

于 2013-12-07T21:13:49.663 に答える