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

Question

我正在对一个包含clarity带有clarit directives.

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

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

我可以替换clrDgItems为ngFor，但表过滤器停止工作。

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

无法绑定到“clrDgItemsOf”，因为它不是“clr-dg-row”的已知属性

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

失败：模块“DynamicTestModule”声明了意外值“[object Object]”

     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
  ]
})

甚至另一种选择是只导入ClrDatagridModule您的导入中TestBed