Question

我目前面临的情况是我必须测试一个包含另一个组件的组件，该组件有自己的UT隔离。像这样：

<parent-component>
    <div>
       <child-component form-data="formData"></child-component>
    </div>
</parent-component>

在测试用例之前，我编译通过范围参数的元素及其模板：

 beforeEach(inject((_$q_, _$rootScope_, $compile) => {
        $q = _$q_;
        $rootScope = _$rootScope_;
        $scope = $rootScope.$new();
        makeComponent = (scopeParam, template) => {
          const componentTemplate = template || defaultTemplate;
          const scope = _.merge($scope, scopeParam);
          element = $compile(angular.element(componentTemplate))(scope);
          scope.$apply();
        };

        makeController = (params, template) => {
          makeComponent(params, template);
          return element.controller(component.name);
        };

      }));

其中一个范围参数是formData，它通过一个绑定传递给child-component，每当发生变化时（实际上是{on parent-component的{onInit），{{1} $onChanges的{{1}}被触发并且监听此更改会导致调用一个方法，该方法从我正在其UT中模拟的端点检索一些数据。

问题是我想避免在child-component上呈现此child-component并在UT的唯一目的是分别测试组件逻辑时复制测试逻辑。我怎么能对UT只测试这个父组件并丢弃其上的任何嵌套组件？

Answer 1

我用解决方案回答自己。我们的想法是使用$provide来修改现有类的行为，而无需修改代码本身。了解详情：https://docs.angularjs.org/guide/decorators。我们唯一需要做的就是实例化我们的模拟模块并传递decorator并使用我们的组件名称调用$delegate方法，然后使用＆＃39; Directive＆＃39;同时传递包含组件/服务的beforeEach(angular.mock.module(module, ($provide) => { $provide.decorator('myComponent' + 'Directive', ($delegate) => { const comp = $delegate[0]; comp.template = ''; comp.controller = class {}; return $delegate; }); });以向注册提供者注册。我们只需要设置一个自定义模板和控制器，在这种情况下：emtpy值，并返回它。就这样，子组件将在其空控制器上作为空模板生成，我们可以专注于测试隔离的父组件。

@Scheduled(cron = "....")
void myTask() {
    Boolean flag = readFlagFromRedis(); // you can write the flag into redis or database to control the task
    if (flag) {
    // continue your task
    } 
}

在Angular 1.5中测试没有编译嵌套组件的组件

1 个答案: