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'

当我将模仿指令添加为：出现错误

失败：模块'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导入

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

1 个答案: