如何模拟指令，使用Jasmine和Karma测试Angular 6组件

Question

我正在尝试测试组件。该组件取决于名为Megazord的指令。我需要一些语法帮助，以了解如何使用模拟指令。

将服务用作模拟的示例：

TestBed.configureTestingModule({
  declarations: [..., MegazordCanvasDirective],
  providers: [
    {provide: UserService},
    {provide: HttpClient, useClass: HttpClientMock}, // Mock
    {provide: Router, useClass: RouterMock}, // Mock
  ]
}).compileComponents();

这是我的TestBed Config：

beforeEach(async(() => {

TestBed.configureTestingModule({
  declarations: [..., MegazordCanvasDirective],
  ...
}).compileComponents();

测试：

it('should select level3', () => {
    const level3Mocks = createMockLevel3();
    component.onSelectLevel3(level3Mocks[0]);
    // expect(component.selectedLevel3).toBe(level3Mocks[0]);
    // expect(component.mode).toBe('tagging');
  });

指令依赖项：

@ViewChild(MegazordCanvasDirective) public megazord;

方法：

public onSelectLevel3(level3: Level3): void {
    this.mode = 'tagging';
    this.updateMegazord(); // This one is using Megazord Directive.
    this.manager.clearSearchResults();
    this.onSelectLevel1(level3.level1.id);
    this.onSelectLevel2(level3.level1, level3.level2);
    this.selectedLevel3 = level3;
  }

updateMegazord方法：

private updateMegazord(): void {
    this.megazord.api.toggleCanMask(this.mode === 'masking');
    this.megazord.api.toggleCanTag(this.mode === 'tagging');
  }

错误：

Answer 1

J.S。通过评论帮助我：

  

然后，您应尝试覆盖component属性以对其进行模拟   例如：

component.megazord = {api: { toggleCanMask: ()=> {}}}

正在运行，谢谢。