如何在每次测试之间改变间谍结果

Question

我正在为依赖于服务的 Angular 组件编写一些测试。

此服务有一个stageData 公共成员，我想根据stageData 的内容测试该组件的行为是否正确。

因为我需要模拟服务，所以我创建了一个间谍并定义了它会为 stageData 返回的内容，但我无法在每个测试中更改它。

describe('ProgressComponent', () => {
  let component: ProgressComponent;
  let fixture: ComponentFixture<ProgressComponent>;
  let progressStageService: any;
  const signStage = new StageCompletionModel();
  const inkStage = new StageCompletionModel();

  beforeEach(async(() => {
    signStage.stage = Stage.Sign;
    inkStage.stage = Stage.Ink;

    progressStageService = jasmine.createSpyObj('ProgressStageService', ['getStageProgress']);
    progressStageService.stageData = [signStage];

    TestBed.configureTestingModule({
      declarations: [ ProgressComponent ],
      providers: [ { provide: ProgressStageService, useValue: progressStageService } ],
      schemas: [ NO_ERRORS_SCHEMA ],
    })
    .compileComponents();
  }));

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

  it('should not display Ink stage when it is not in stageData', () => {
    const callToAction: HTMLElement = fixture.nativeElement;
    const stageLabels = callToAction.querySelectorAll('span.stage-label');
    expect(Array.from(stageLabels).some(sl => sl.textContent.includes('Ink'))).toBeFalsy();
  });

  it('should display Ink stage when it is in stageData', () => {
    const callToAction: HTMLElement = fixture.nativeElement;
    const stageLabels = callToAction.querySelectorAll('span.stage-label');

    progressStageService.stageData = [signStage, inkStage];
    fixture.detectChanges();

    expect(Array.from(stageLabels).some(sl => sl.textContent.includes('Ink'))).toBeTruthy();
  });
});

我在第二个测试用例中尝试了许多变体，但 stageData 始终包含在 beforeEach 中设置的数据。

Answer 1

因此，在模拟数据时，您必须将其拆分为更多 describes。第二个beforeEach 中的第一个fixture.detectChanges 是“捆绑”组件并调用ngOnInit。

试试：

describe('ProgressComponent', () => {
  let component: ProgressComponent;
  let fixture: ComponentFixture<ProgressComponent>;
  let progressStageService: any;
  const signStage = new StageCompletionModel();
  const inkStage = new StageCompletionModel();

  beforeEach(async(() => {
    signStage.stage = Stage.Sign;
    inkStage.stage = Stage.Ink;

    progressStageService = jasmine.createSpyObj('ProgressStageService', ['getStageProgress']);

    TestBed.configureTestingModule({
      declarations: [ ProgressComponent ],
      providers: [ { provide: ProgressStageService, useValue: progressStageService } ],
      schemas: [ NO_ERRORS_SCHEMA ],
    })
    .compileComponents();
  }));

  beforeEach(() => {
    console.log('getting a handle on the fixture');
    fixture = TestBed.createComponent(ProgressComponent);
    console.log(fixture);
    component = fixture.componentInstance;
    // re-assign progressStageService to what was injected in the configureTestingModule
    // If you're using Angular 9, this should be .inject and not .get
    progressStageService = TestBed.get(ProgressStageService);
    // fixture.detectChanges(); => Remove fixture.detectChanges here
  });

 describe('stageData is [signStage]', () => {
   beforeEach(() => {
      // assign stageData to the service that was injected
      progressStageService.stageData = [signStage];
      fixture.detectChanges();
   });

  it('should not display Ink stage when it is not in stageData', () => {
    const callToAction: HTMLElement = fixture.nativeElement;
    const stageLabels = callToAction.querySelectorAll('span.stage-label');
    expect(Array.from(stageLabels).some(sl => sl.textContent.includes('Ink'))).toBeFalsy();
  });
 });

 describe('stageData is [signStage, inkStage]', () => {
   beforeEach(() => {
      // assign stageData to the service that was injected
      progressStageService.stageData = [signStage, inkStage];
      fixture.detectChanges();
   });

   it('should display Ink stage when it is in stageData', () => {
    const callToAction: HTMLElement = fixture.nativeElement;
    const stageLabels = callToAction.querySelectorAll('span.stage-label');
    expect(Array.from(stageLabels).some(sl => 
sl.textContent.includes('Ink'))).toBeTruthy();
  });
 });
});