Как тестировать страницу навигации?

Question

Вариант использования такой: я хочу провести модульный тест (в браузере, QUnit или что-то в этом роде) кода, запускаемого на странице. Одна из вещей, которую может сделать страница, это перейти на другую страницу. У меня проблема с перехватом этого события, потому что:

• beforeunload не может остановить действие (поэтому первая навигация прервала мой тест)
• Попытка переопределить window.location или window.location.href с получателем, возвращающим старое значение, и установщик шпионажа также запрещен

Я понимаю, что есть причины безопасности, которые запрещают прекратить навигацию, но для разработки действительно полезно сделать это.

Есть ли возможность сделать это (у меня нет прямого контроля над бегуном, поэтому я не могу просто загрузить код в iframe и позволить ему перемещаться, а затем исследовать местоположение iframe)?

РЕДАКТИРОВАТЬ: чтобы быть немного более конкретным: я хочу проверить, есть ли на основе кнопка входа в систему (скажем, $('#login-btn')), которая, нажимая, перемещает страницу в диалоговое окно Facebook oauth, серверный поток (детали здесь не важны).

Так что я хотел бы иметь возможность делать такие вещи:

// set up fb mock to not be connected
fbAsyncInit(); // simulate the startup of app
$('#login-btn').click();
equal(document.location.href, "http://www.facebook.com/oauth/...", "OAuth dialog not started.");

но если конечно, без реальной навигации. Как сделать тест?

Answer 1

То, что вы делаете, - это на самом деле не модульное тестирование, а скорее приемочное тестирование.

Возможно, вам стоит взглянуть на селеновый драйвер , который может легко тестировать такие вещи, как навигация по страницам.

Answer 2

Теперь я вижу, что вы не можете шпионить за сеттером (что я и рекомендую ниже). Я уже написал решение, поэтому я опубликую его на тот случай, если кто-то без этого ограничения посетит эту страницу ...

Определите общедоступную функцию для навигации, например:

MyNameSpace.navigate = function( url ) {
    window.location.href = url;
};

Теперь в своих тестах вы можете заглушить вызов на MyNameSpace.navigate() и убедиться, что он вызывается правильно. Вот пример (не уверен, какую платформу тестирования вы используете, поэтому дайте мне знать, если реализация неясна).

Установить и снести:

setUp( function() {
    this._navigate = MyNameSpace.navigate;
    MyNameSpace.navigate = function( url ) {
        this.calledWith = url;
    };
});
tearDown( function() {
    MyNameSpace.navigate = this._navigate;
});

А твой тест, заново реализован:

test( function() {
    // set up fb mock to not be connected
    fbAsyncInit(); // simulate the startup of app
    $('#login-btn').click();
    equal(MyNameSpace.navigate.calledWith, "http://www.facebook.com/oauth/...", "OAuth dialog not started.");
});

Ваша идея запросить window.location.href будет проверять не только код вашего приложения, но и сам браузер (т.е. браузер правильно перенаправляет, когда мое приложение устанавливает window.location.href). Специальный метод navigate позволяет вам проверить, что внутренние компоненты вашего приложения работают должным образом и одновременно не дают браузеру реагировать.

Answer 3

Вы можете проверить это Как далеко вы можете пройти тестирование JavaScript? вопрос.

Селен действительно хорош и хорошо известен, но лично я нахожу его довольно старым и не очень пригодным для использования.,Я бы посоветовал использовать Ghostbuster (см. введение ), безголовый Webkit, выполняющий тесты, написанные на Javascript или Coffeescript.

Ваш данный тестовый пример будет написан следующим образом:

phantom.test.root = "http://localhost/"     # or whatever your testing env's root

phantom.test.add "Facebook login", ->       # this adds a test
  @get '/yourLoginPage', ->                 # relative to the previous root
    @body.click '#login-btn'
    @assertLocation "http://www.facebook.com/oauth/..."
    @succeed()                              # all tests must succeed

:)