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

Question

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

我已经模拟了清晰标签，但它们有指令clrDgItems，我不能用指令类模拟。

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

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

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

无法绑定到“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
  ]
})

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