为 Angular 组件测试生成 @Component 定义运行时

Question

我想要测试这个 Angular 11 组件：

@Component({
  selector: 'app-foo-page',
  template: `
    <app-header mode='operational' cool='true'></app-header>
    Some content
  `
})
export class FooPageComponent { }

我可以像这样将HeaderComponent 放在declarations 中：

 setUpTestBed({
   declarations: [
     FooPageComponent,
     HeaderComponent,
   ],

但我经常喜欢这个

@Component({ selector: 'app-header', template: 'dummy' })
class DummyHeaderComponent {
  @Input() mode = 'operational';
  @Input() cool = true;
}

// ...

  setUpTestBed({
    declarations: [
      FooPageComponent,
      DummyHeaderComponent,
    ],

问题来了：我能以某种方式创建一个 函数 来返回这样的“虚拟”组件吗？我想将这些东西缩短为一个我可以使用的辅助方法在测试我的页面时构建declarations，而不必每次都创建一个显式的虚拟组件。

换个说法，我希望我能写：

function generateDummyComponentDefinition(selector, inputs) {
  // Return a class or constructor function
  // ...that is @Component(...) decorated properly
  // ...that has @Input() properties as specified
}

// ...

  setUpTestBed({
    declarations: [
      FooPageComponent,
      generateDummyComponentDefinition('app-header', ['mode', 'cool']),
    ],

我通读了TypeScript's Decorators documentation，但与实际场景的差距有点大。

我想要的有可能吗？

Answer 1

我认为使用以下动态代码应该是可能的：

function generateDummyComponentDefinition(selector: string, inputs: string[]) {
  @Component({
    selector,
    template: 'dummy'
  })
  class DummyComponent {
    static propDecorators = inputs.reduce((acc, input) => {
      acc[input] = [{type: Input}];
      return acc;
    }, {});
  }

  return DummyComponent;
}

Angular 编译器可以识别propDecorators，它应该是所有属性装饰器的对象。