SeleniumでSinon.jsを使う

例えばこういう感じのJSがあったとして

$('button').click(function() {
  navigator.geolocation.getCurrentPosition(
    function(res) {
      var lat = res.coords.latitude;
      var lon = res.coords.longitude;
      $('#pos').text(lat + ':' + lon);
    });
});

これをE2Eテストで検証するのはなんかもう色々めんどうなので、sinon.jsでstub化したい。

こういうJSファイルを用意しておいて、

// stub.js
sinon.stub(navigator.geolocation, 'getCurrentPosition')
     .callsArgWith(0, { coords: { latitude: 10, longitude: 20 } });

テストスクリプトからsinon.js本体とこいつを実行する。

var webdriver = require('selenium-webdriver');
var firefox = require('selenium-webdriver/firefox');
var fs = require('fs');
var assert = require('assert');
var By = webdriver.By;
var promise = webdriver.promise;
var flow = promise.controlFlow();
var driver = new firefox.Driver();

flow.execute(function() {
  driver.get('http://localhost:8888/');
  driver.executeScript(fs.readFileSync('./sinon.js').toString());
  driver.executeScript(fs.readFileSync('./stub.js').toString());
  driver.findElement(By.css('button')).click();
  driver.findElement(By.css('#pos')).getText().then(function(text) {
    assert(text === '10:20');
  });
  driver.quit();
}).then(function() {
  console.log('ok');
}, function(e) {
  console.log(e.message);
});

（restoreとかははしょってる）

こういうケースの他にも、手で再現しづらい異常系を再現する場合とか、APIのレスポンスをmock化したい場合とかにも使えると思う。

ただしE2Eテストはがんばりすぎると死ぬのでやりすぎには注意しよう。