如何对页面导航进行单元测试？

Question

用例是这样的：我想对页面中运行的代码进行单元测试（在浏览器、QUnit 或类似的东西中）。页面可以做的事情之一就是导航到另一个页面。我在捕获此事件时遇到问题，因为：

• beforeunload 无法停止该操作（因此第一个导航离开会破坏我的测试）
• 尝试重新定义 window.location 或 window.location.href ，并且 getter 返回旧值并且间谍 setter 也被

禁止了解出于安全原因不允许停止导航，但对于开发而言，能够这样做确实很有用。

有没有可能做到这一点（我无法直接控制测试运行程序，因此我不能只在 iframe 中加载代码并让它导航，然后检查 iframe 的位置）？

编辑：更具体一点：我想测试，根据 facebook 的登录/连接状态（我使用 github 上的 facebook-stub 来模拟 fb），登录按钮上是否安装了正确的处理程序（例如，$('#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

您所做的实际上不是单元测试，更像是验收测试。

您可能应该研究 selenium Web 驱动程序，它可以轻松测试页面导航等内容。

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 测试你能走多远？问题。

Selenium 确实很好，也很出名，但我个人觉得它相当老旧，不太好用。我建议使用 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

:)