angular - 是否可以在 Angular 中模拟属性指令？

Question

我有以下应用于输入标签的指令。在主机组件上运行 jasmine 规范时，我希望它忽略(模拟)该指令，因为它依赖于我对测试不感兴趣的 jquery。

我试图创建一个 MockDirective 类，但没有成功。任何人都知道如何实现这一目标？

@Directive({
    selector: '[skinColorPicker]'
})
export class ColorPickerDirective implements OnInit {

    @Input('skinColorPicker') initialColor;

    @Output() colorSelected: EventEmitter<string> = new EventEmitter<string>();

    constructor(private el: ElementRef) {}

    ngOnInit() {

       // legacy jQuery blah blah
    }
}

在主机内部:

<input skinColorPicker="'#555'" (colorSelected)="onPageBackgroundColorSelected($event)" 
 />

规范:

describe('PrintSidebarComponent', () => {
  let component: PrintSidebarComponent;
  let fixture: ComponentFixture<PrintSidebarComponent>;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [
          PrintSidebarComponent,
          MockDirective({ selector: '[skinColorPicker]' }) // does not work
      ]
    })
    .compileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(PrintSidebarComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should create', () => {
    expect(component).toBeTruthy();
  });
});

export function MockDirective(options: Component): Component {
    let metadata: Directive = {
        selector: options.selector,
        inputs: options.inputs,
        outputs: options.outputs
    };
    return Directive(metadata)(class _ { });
}

Can't bind to 'skinColorPicker' since it isn't a known property of 'input'.

我看到了this overrideDirective method但一直没能找到一个像样的例子。

一个解决方案结果是 @Input('skinColorPicker') 属性缺少模拟声明:

MockDirective({selector: '[skinColorPicker]', inputs: ['skinColorPicker']})

我仍然认为看到一个带有内置 Testbed.overrideDirective 函数的示例会更好。

Plunkr

Answer 1

MockDirective 确实有效，但配置错误。

export function MockDirective(options: Component): Directive {
    const metadata: Directive = {
        selector: options.selector,
        inputs: options.inputs,
        outputs: options.outputs
    };
    return Directive(metadata)(class _ { });
}

结果是 @Input('skinColorPicker') 属性缺少模拟声明:

TestBed.configureTestingModule({
  declarations: [
      PrintSidebarComponent,
      MockDirective({ 
        selector: '[skinColorPicker]', 
        inputs: ['skinColorPicker'] }) // does work
  ]
})