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

【问题标题】：How to mock a directive, testing Angular 6 component with Jasmine and Karma如何模拟指令，使用 Jasmine 和 Karma 测试 Angular 6 组件
【发布时间】：2019-01-07 14:31:49
【问题描述】：

我正在尝试测试一个组件。该组件依赖于名为 Megazord 的指令。我需要一些关于如何使用模拟指令的语法帮助。

使用服务作为模拟的示例：

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

这是我的 TestBed 配置：

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');
  }

错误：

【问题讨论】：

你在 beforeEach 函数中调用fixture.detectChanges(); 吗？
@J.S.是的，我愿意。 beforeEach(() => { fixture = TestBed.createComponent(TrainingTaskComponent); component = fixture.componentInstance; element = fixture.nativeElement; fixture.detectChanges(); });
那么你应该尝试覆盖组件属性来模拟它，例如：component.megazord = {api: { toggleCanMask: ()=> {}}}

标签： angular unit-testing mocking

【解决方案1】：

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

然后你应该尝试覆盖组件属性来模拟它例如：

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

它工作正常，谢谢。

【讨论】：