前端单元测试详解(三)__单元测试实践Question

记录一些实际Coding遇到的问题。

1 AngularJS

1.1 Promise方式的网络请求测试

答案Answer：Mock Promise。

例

var mockOperation = {
  get: function () {
    return this;
  },
  then: function (success, error) {
    success({ ... });
    return this;  // mock的promise function 需要返回this
  }
};

beforeAll(inject(function ($rootScope, $controller, $state) {
  ...
  $controller('mpMenuController', {
    ...
    operation: mockOperation
  });
}));

1.2 页面嵌套，存在父Controller和子Controller

答案Answer：按顺序，先对父Controller注入，在对子Controller注入。

例

beforeAll(inject(function ($rootScope, $controller) {
  $controller('MainController', { ... });
}));

beforeAll(inject(function ($rootScope, $controller, $state) {
  $controller('subController', { ... });
}));

1.3 提示：’… is not function …‘

答案Answer：请确认确实是function，并确认声明/定义在调用前。

例：略…这还要示例？学基础去~AngularJs真的把人变懒了。

1.4 toEqual()需要注意两者的属性是否一致

答案Answer：两者的属性必须一致，否则就需要先断言是否具有某个属性。

1.5 Disconnected, because no message in 10000 ms.

答案Answer：当项目大，单元测试多时，就会常遇到这个Karma提示，而导致单元测试失败。解决方式：

• 减少单元测试项
• 对异步、耗时操作进行mock：如setTimeout、网络请求等
• 对单元测试中不存在的页面跳转进行mock：如login.html的window.location、$state.go() 跳转，直接mock windows、state。

1.6 Some of your tests did a full page reload

答案Answer：这是因为单元测试过程中，所测试的代码中做了页面跳转，建议：mock

1.x 未解之谜

• Controller中定义的function或var(非$scope属性)，如何测试？
• $timeout

2 VUE

暂无

参考文章

暂无

赏

您一定是个帅哥， 要不也是个美女！

支付宝

微信