angularjs - Angular、Redux、ES6、单元测试 Controller

Question

我们的 Angular 项目已迁移到 ES6 和 Reduxjs，现在我正在努力让 Controller 单元测试正常工作。具体来说，当涉及到类构造函数时，我似乎无法正确模拟。根据我的研究，我无法监视 ES6 类构造函数，因此我需要模拟它的依赖项，并适应 ngRedux.connect() 促进的词法“this”的绑定(bind)。

我的测试使其进入构造函数中的 connect 函数，然后给出错误:“'connect' 不是函数”

我想我这里可能有一些问题。如果我注释掉构造函数中的连接行，它将到达我的 runOnLoad 函数，并且错误将告诉我 fromMyActions 不是一个函数。这是因为 redux connect 函数将操作绑定(bind)到“this”，因此考虑到这些问题，我认为除非我提供其实现，否则我无法模拟 redux。有什么建议吗？我对 Angular 也比较陌生 - 我最薄弱的领域是单元测试和 DI。

这是我的模块和 Controller :

export const myControllerModule = angular.module('my-controller-module',[]);

export class MyController {

constructor($ngRedux, $scope) {
'ngInject';

  this.ngRedux = $ngRedux;
  const unsubscribe = this.ngRedux.connect(this.mapState.bind(this), myActions)(this);
  $scope.$on('$destroy', unsubscribe);
  this.runOnLoad();
}

mapState(state) {
  return {};
}

runOnLoad() {
   this.fromMyActions(this.prop);
  }
}

myControllerModule 
  .controller(controllerId, MyController
  .directive('myDirective', () => {
    return {
      restrict: 'E',
      controllerAs: 'vm',
      controller: controllerId,
      templateUrl: htmltemplate
      bindToController: true,
      scope: {
        data: '=',
        person: '='
      }
    };
  });

export default myControllerModule.name;

和我的测试:

import {myControllerModule,MyController} from './myController';
import 'angular-mocks/angular-mocks';

describe('test', () => {

  let controller, scope;

  beforeEach(function() {

let reduxFuncs = {
  connect: function(){}
}

angular.mock.module('my-controller-module', function ($provide) {
  $provide.constant('$ngRedux',reduxFuncs);
});

angular.mock.inject(function (_$ngRedux_, _$controller_, _$rootScope_) {
  scope = _$rootScope_.$new();
  redux = _$ngRedux_;

  var scopeData = {
    data : {"test":"stuff"},
    person : {"name":"thatDude"}
  } ;
        scope.$digest();

        controller = _$controller_(MyController, {
        $scope: scope,
        $ngRedux: redux
      }, scopeData);
    });

  });
});

Answer 1

Redux 背后的想法是，大多数 Controller 没有或很少有逻辑。逻辑主要是在行动创建者、减速者和选择者中。在您提供的示例中，大部分代码只是连接事物。我个人不测试接线，因为它增加的值(value)非常小，而且这类测试通常非常脆弱。

话虽如此，如果您想测试 Controller ，您有两个选择:

• 对 Controller 使用函数而不是类。对于大多数 Controller 来说，使用类并没有增加任何实际值(value)。相反，使用函数，并将要测试的逻辑隔离在另一个纯函数中。然后您可以测试这个函数，甚至不需要模拟等。

• 如果您仍然想使用类，则需要使用 ng-redux 的 stub (如下所示:https://gist.github.com/wbuchwalter/d1448395f0dee9212b70(在 TypeScript 中))

并像这样使用它:

let myState = {
  someProp: 'someValue'
}

let ngReduxStub;
let myController;
beforeEach(angular.mock.inject($injector => {
  ngReduxStub = new NgReduxStub();

  //how the state should be initially
  ngReduxStub.push(myState);
  myController = new MyController(ngReduxStub, $injector.get('someOtherService');
}));

注意:我个人不使用mapDispatchToProps(我通过 angular.service 公开我的 Action 创建者)，因此 stub 不处理 Action ，但应该很容易添加。