单元测试时如何在 Angular 1.5 中向 $componentController 添加依赖项

Posted 2023-02-23

【中文标题】单元测试时如何在 Angular 1.5 中向 $componentController 添加依赖项

【英文标题】：how to add dependencies to $componentController in angular 1.5 while unit testing

【发布时间】：2017-02-15 04:44:10

【问题描述】：

我想在组件中添加依赖到我的控制器：

这是我的组件：

angular
  .module('app')
  .component('myComponent', 
    template: '<div>some content</div>',
    controller: ["$routeParams", function ($routeParams) 
       var ctrl = this;
       ctrl.myId = $routeParams.id;
  );

现在我只想测试如下：

describe("spec for myComponent", function () 

  var $componentController;
  var $routeParams;

  beforeEach(module('app'));
  beforeEach(inject(function (_$componentController_, _$routeParams_) 
    $componentController = _$componentController_;
    $routeParams = _$routeParams_;
    $routeParams = 
      myId: 42
    
  ));

  it('should init', function () 

    var ctrl = $componentController('myComponent', $routeParams, null);

    expect(ctrl.myId).toBe(42);

  );
);

但不幸的是，ctrl.myId 未定义，因为 $routeParams 未正确注入。为什么？

【问题讨论】：

将 var ctrl = $componentController('myComponent', $routeParams, null); 更改为 var ctrl = $componentController('myComponent', $routeParams, null); 另请注意，您可以使用第二个参数来注入模拟 $routeParams （请参阅 Neo182 的答案）。

【参考方案1】：

我的情况和你的很相似，google了一段时间，但几乎一无所获，但最后我自己解决了问题：这是你的情况的解决方案：

describe("spec for myComponent", function () 

  var $componentController;
  var mockRouteParams = id : 1;

  beforeEach(module('app'));

  beforeEach(inject(function (_$componentController_) 
    $componentController = _$componentController_;
  ));

  it('should init', function () 

    var ctrl = $componentController('myComponent', $routeParams:mockRouteParams, null);

    expect(ctrl.myId).toBe(1);

  );
);

还要检查 Mocking $routeParams in a test in order to change its attributes dynamically 关于 $routeParams 的模拟。

【参考方案2】：

你似乎在这里重新定义了$routeParams：

$routeParams = _$routeParams_;
$routeParams = 
  myId: 42

执行以下操作应该可以解决您的问题（另请注意，您希望 id 是 $routeParams 的属性，而不是 myId）：

$routeParams = _$routeParams_;
$routeParams.id = 42;