如何在模拟组件上模拟指令

Question

我正在对包含 clarity 标签和 clarit directives 的组件进行单元测试。

我模拟了清晰度标签，但它们有指令 clrDgItems，我无法用指令 class 模拟它们。

<clr-dg-row *clrDgItems="let item of items$ | async | filter : listFilter.keyword : ['trackingCode', 'title']" [clrDgItem]="episode">

我可以用 ngFor 替换 clrDgItems 但 table 过滤器停止工作。

没有它，测试将无法编译：

Can't bind to 'clrDgItemsOf' since it isn't a known property of 'clr-dg-row'

当我将 mockDirective 添加为：我收到错误

Failed: Unexpected value '[object Object]' declared by the module 'DynamicTestModule'

     function MockDirective(options: any): Directive {
         const metadata: Directive = {
         selector: options.selector,
         inputs: options.inputs,
         outputs: options.outputs
      };
      return new Directive(metadata);
    }

 TestBed.configureTestingModule({
      imports: [
        RouterTestingModule
      ],
      declarations: [
        MockDirective({
          selector: '[clrDgItemsOf]',
        }),
      MockComponent({
      selector: 'clr-dg-row',
      template: '<ng-content></ng-content>',
      outputs: ['clrDgItemsOf'],
      inputs: ['clrDgItem']
    }), ...

有什么建议吗？

Answer 1

您不使用 CUSTOM_ELEMENTS_SCHEMA 的原因是什么？然后你不需要模拟指令，因为它们被简单地忽略了：

TestBed.configureTestingModule({
  imports: [
    RouterTestingModule,    
  ],
  schemas: [
    CUSTOM_ELEMENTS_SCHEMA
  ]
})

如果你真的想模拟行为，你可以在你的规范文件中创建一个 @Directive：

@Directive({
  selector: '[clrDgItems][clrDgItemsOf]'
})
export class MockClrDgItemsDirective {
  @Input()
  clrDgItemsOf: any;
}

并像往常一样将其添加到您的声明中：

TestBed.configureTestingModule({
  imports: [
    RouterTestingModule
  ],
  declarations: [
    MockClrDgItemsDirective
  ]
})

甚至另一种选择是只在 TestBed

的导入中导入 ClrDatagridModule

如何在模拟组件上模拟指令

How to mock directive on mock component

angular

unit-testing

clarity