Javascript 使用页面重新加载和iFrame对JS应用程序进行单元测试

我有一个应用程序，页面重新加载/导航和iFrame非常重要，这些部分似乎很难用单元测试来覆盖

我想能够写smt。像这样：

it('should fire appropriate callbacks on start and page reload', function() {
  app.start();
  expect(app.onStart).toHaveBeenCalled();
  page.reload();
  expect(app.onRestart).toHaveBeenCalled();
}

it('should know whether it runs in iframe or not', function() {
  expect(app.isInIframe()).toBe(false);
  iframe = createTestIframe();
  expect(iframe.getApp().isInIframe()).toBe(true);
}

casper.test.begin('iframe', 1, function (test) {
  casper
    .start('your.page.url')
    .thenEvaluate(function () {
      window.iframe = createTestIframe()
    })
    .then(function () {
      test.assertEval(function () {
        return iframe.getApp().isInIframe()
      })
    })
})

我所知道的单元测试框架（mocha、Jasmine、QUnit）都是为了在一个页面上，在顶级上下文中完成整个测试套件而设计的

另一方面，功能测试框架（FuncUnit、TestCafé、Selenium WebDriver）似乎专注于高级抽象，如“单击元素”、“检查元素的值”等，而没有提供深入研究代码执行的能力

---

免责声明：一般来说，我对测试比较陌生，所以也许我应该从不同的角度来看待这个问题。

您描述的测试似乎是完全集成测试，而不是单元测试（刷新/iframe）

另一方面，您展示的单元测试旨在通过模拟所有交互部分并单独测试单元来测试程序的各个单元，例如控制器

对于您想要执行的测试类型（包括iframes/refresh），最好使用集成测试工具，例如

此工具有一个宏记录器，用于记录测试中的浏览器操作，并允许重播操作和添加断言以检查测试结果。看看这个，看看它的使用有多简单

这种集成测试是对您所展示的单元测试类型的补充，但不能取代

集成测试的数量要比单元测试少得多，有关测试和平衡单元测试和集成测试数量的最佳实践，请参阅。

您可以尝试。它在PhantomJS中运行功能测试，您可以在测试页面中计算任意代码。对于您的情况，您应该能够执行以下操作：

it('should fire appropriate callbacks on start and page reload', function() {
  app.start();
  expect(app.onStart).toHaveBeenCalled();
  page.reload();
  expect(app.onRestart).toHaveBeenCalled();
}

it('should know whether it runs in iframe or not', function() {
  expect(app.isInIframe()).toBe(false);
  iframe = createTestIframe();
  expect(iframe.getApp().isInIframe()).toBe(true);
}

casper.test.begin('iframe', 1, function (test) {
  casper
    .start('your.page.url')
    .thenEvaluate(function () {
      window.iframe = createTestIframe()
    })
    .then(function () {
      test.assertEval(function () {
        return iframe.getApp().isInIframe()
      })
    })
})

正是为了在这种情况下启用这些功能测试而设计的，实际上是由于您描述的现有JS测试框架没有启用这些交互的问题而创建的。它包括一个功能测试界面，可以这样工作，假设

app

位于Node.js端，您可以这样做：

it('should fire appropriate callbacks on start and page reload', function() {
  app.start();
  expect(app.onStart).toHaveBeenCalled();
  page.reload();
  expect(app.onRestart).toHaveBeenCalled();
}

it('should know whether it runs in iframe or not', function() {
  expect(app.isInIframe()).toBe(false);
  iframe = createTestIframe();
  expect(iframe.getApp().isInIframe()).toBe(true);
}

casper.test.begin('iframe', 1, function (test) {
  casper
    .start('your.page.url')
    .thenEvaluate(function () {
      window.iframe = createTestIframe()
    })
    .then(function () {
      test.assertEval(function () {
        return iframe.getApp().isInIframe()
      })
    })
})

define（['intern！bdd'，'intern/chai！expect'，'my/app']，函数（bdd，expect，app）{
var it=bdd.it；
它（'应该在开始和重新加载页面时触发适当的回调'，函数（）{
app.start（）；
返回此.remote.get（'http://path/to/server')
.然后（函数（）{
expect（app.onStart）.tohavebeencall（）；
})
.refresh（）
.然后（函数（）{
期望（app.onRestart）.toHaveBeenCalled（）；
});
});
//……等等。
});

---

提供了单元测试和功能测试之间的区别以及如何使用两者的更好概述。与CasperJS等其他建议不同，它实际上将使用标准WebDriver API，结合Sauce Labs或您自己的Selenium服务器等服务，针对真实浏览器运行功能测试。

我了解Selenium，我们将其用于高级集成测试，但它不允许我控制底层实体，比如模块、控制器等等，不管你怎么称呼它们。看起来我必须坚持模拟/存根来进行我想要运行的单元测试…谢谢你的建议！但不幸的是，对于CasperJS，我们仅限于在PhantomJS（Webkit）和SlimerJS（Gecko）中进行测试。我需要能够在真实的浏览器中运行测试，包括IE。谢谢！这看起来正是我一直在寻找的。有了grunt和WebDriver的支持，真是太棒了！想知道它怎么能一直呆在我的雷达下直到今天：）