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

Question

我有一个页面重新加载/导航和 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);
}

我所知道的单元测试框架(mocha、Jasmine、QUnit)都旨在在一个页面上、在顶级上下文中执行整个测试套件。

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

免责声明:我对一般测试还比较陌生，所以也许我应该从完全不同的 Angular 来看待这个问题。

Answer 1

Intern正是为了在这些情况下启用这些类型的功能测试而设计的，并且实际上是由于您描述的现有 JS 测试框架无法启用这些类型的交互的问题而创建的。它包括一个功能测试接口(interface)，可以像这样工作，假设 app 在 Node.js 端，你会做这样的事情:

define([ 'intern!bdd', 'intern/chai!expect', 'my/app' ], function (bdd, expect, app) {
   var it = bdd.it;

   it('should fire appropriate callbacks on start and page reload', function() {
     app.start();
     return this.remote.get('http://path/to/server')
       .then(function () {
         expect(app.onStart).toHaveBeenCalled();
       })
       .refresh()
       .then(function () {
         expect(app.onRestart).toHaveBeenCalled();
       });
   });

   // ...etc.
});

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