单元测试带有页面重新加载和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)似乎专注于高级抽象,例如"单击元素","检查元素的值"等,而不是能够深入挖掘代码执行.

免责声明:我对一般的测试比较陌生,所以也许我应该从不同的角度来看问题.

Answer 1

Intern的设计正是为了在这些情况下实现这些类型的功能测试,并且实际上是由于您描述的现有JS测试框架无法实现这些类型的交互的问题而创建的.它包含一个功能测试界面,可以这样工作,假设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.
});

的实习生教程提供单元和功能测试,以及如何使用两者之间的差的一个更好的概述.与CasperJS等其他建议不同,它实际上将使用标准WebDriver API与Sauce Labs或您自己的Selenium服务器等服务一起针对真实浏览器运行功能测试.