Question

我正在学习使用组件的angular devp，考虑我的网页有一个单独的组件如下所示

angular
  .module('mainPageModule', [])
  .component('mainPage', {
    templateUrl: 'mainPage.html',
    controller: mainPageController
  });

控制器代码是：

class mainPageController{
   constructor(){
      let vm =this;
      vm.value=100;
   }
}

Html代码：假设所有角度ng-app和其他内容都包含在这里

<p>{{$ctrl.value}}</p>

我正在尝试将此视图测试为：

＆＃13;

describe('main page', () => {
  let element, scope;

  beforeEach(inject(function($rootScope, $compile) {
    scope = $rootScope.$new();
  }));

  it('should verify some ', () => {
    element = angular.element('<main-page></main-page>');
    element = $compile(element)(scope);
    scope.value = 5000;
    scope.$apply();
    dump(element);
  });

});

＆＃13;

scope未应用于视图且转储元素未显示值5000.请帮助理解如何测试此视图（如果有任何语法错误忽略了这是虚拟示例）

Answer 1

您将值绑定到控制器，而不是范围。因此，为了测试控制器，您不需要编译任何东西。您需要做的就是使用$componentController服务实例化组件控制器，并确保它构造正确。

例如，期望可能如下所示：

var $componentController;

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

it('should verify some ', () => {
  var controller = $componentController('mainPage');
  expect(controller.value).toBe(100);
});

Answer 2

您需要手动绑定value以进行此测试（当您从组件中单独测试模板时）：

element = angular.element('<main-page value="value"></main-page>');

对于组件，绑定自动发生（如果它在控制器中定义）或bindings组件支持发生在外部源值的情况下。

根级别的角度组件模板测试

2 个答案: