Angular 预期间谍<；方法名称>；被调用过一次。它被调用了0次

我是Jasmine的新手。我正在写一个UT来检查ngAfterViewInit函数中是否调用了服务

下面是我的测试代码

describe('HomePage', () => {
  let component: HomePage;
  let fixture: ComponentFixture<HomePage>;
  let service:DataloadService;
  let srvSpy:any;
  let compoSpy:any;
  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [ HomePage ],
      imports: [
        HttpClientTestingModule,
        IonicModule.forRoot()]
    }).compileComponents();

    fixture = TestBed.createComponent(HomePage);
    component = fixture.componentInstance;
  }));
   it('getData method should be called on Init',()=>{
      srvSpy=jasmine.createSpy('getData').and.callThrough();  
      expect(srvSpy).not.toHaveBeenCalled();
      component.ngAfterViewInit();
      expect(srvSpy).toHaveBeenCalledTimes(1);

  });

});

---

试试这样做

我很惊讶Angular testbed没有抱怨，因为您没有注入DataloadService

import { of } from 'rxjs';
.....
describe('HomePage', () => {
  let component: HomePage;
  let fixture: ComponentFixture<HomePage>;
  let service:DataloadService;
  let mockDataLoadService = jasmine.createSpyObj('srv', ['getData']); // add this line to mock the dataLoadService with public method of getData
  let srvSpy:any;
  let compoSpy:any;
  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [ HomePage ],
      imports: [
        HttpClientTestingModule,
        IonicModule.forRoot()],
      // stub out the real implementation of DateLoadService with our mock
      providers: [{ provide: DataLoadService, useValue: mockDataLoadService }],
    }).compileComponents();

    // make getData return Observable of 'hello world', it is up to you what you would like to return
    mockDataService.getData.and.returnValue(of('hello world'));
    fixture = TestBed.createComponent(HomePage);
    component = fixture.componentInstance;
  }));
   // change the title of the test
   it('value should be changed on ngAfterViewInit', ()=>{
      component.ngAfterViewInit();
      expect(component.value).toBe('hello world'); // assert that it went inside of the subscribe block and made component.value to 'hello world'

  });

});

从'rxjs'导入{of}；
.....
描述（'主页'，（）=>{
让组件：主页；
let夹具：组件夹具；
let服务：DataloadService；
让mockDataLoadService=jasmine.createSpyObj（'srv'，['getData']）；//添加此行以使用getData的公共方法模拟dataLoadService
设srvSpy:any；
让我们看看：任何；
beforeach（异步（（）=>{
TestBed.configureTestingModule({
声明：[主页]，
进口：[
HttpClientTestingModule，
IonicModule.forRoot（）]，
//用我们的mock去掉DateLoadService的真正实现
提供程序：[{提供：DataLoadService，useValue:mockDataLoadService}]，
}).compileComponents（）；
//让getData返回成为“hello world”的可见值，您想返回什么取决于您自己
mockDataService.getData.and.returnValue（of（'helloworld'）；
fixture=TestBed.createComponent（主页）；
组件=fixture.componentInstance；
}));
//更改测试的标题
它（'应在ngAfterViewInit上更改值'，（）=>{
ngAfterViewInit（）；
expect（component.value）.toBe（'hello world'）；//断言它进入了subscribe块内部，并将component.value设置为'hello world'
});
});

试试这样做

我很惊讶Angular testbed没有抱怨，因为您没有注入DataloadService

import { of } from 'rxjs';
.....
describe('HomePage', () => {
  let component: HomePage;
  let fixture: ComponentFixture<HomePage>;
  let service:DataloadService;
  let mockDataLoadService = jasmine.createSpyObj('srv', ['getData']); // add this line to mock the dataLoadService with public method of getData
  let srvSpy:any;
  let compoSpy:any;
  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [ HomePage ],
      imports: [
        HttpClientTestingModule,
        IonicModule.forRoot()],
      // stub out the real implementation of DateLoadService with our mock
      providers: [{ provide: DataLoadService, useValue: mockDataLoadService }],
    }).compileComponents();

    // make getData return Observable of 'hello world', it is up to you what you would like to return
    mockDataService.getData.and.returnValue(of('hello world'));
    fixture = TestBed.createComponent(HomePage);
    component = fixture.componentInstance;
  }));
   // change the title of the test
   it('value should be changed on ngAfterViewInit', ()=>{
      component.ngAfterViewInit();
      expect(component.value).toBe('hello world'); // assert that it went inside of the subscribe block and made component.value to 'hello world'

  });

});

从'rxjs'导入{of}；
.....
描述（'主页'，（）=>{
让组件：主页；
let夹具：组件夹具；
let服务：DataloadService；
让mockDataLoadService=jasmine.createSpyObj（'srv'，['getData']）；//添加此行以使用getData的公共方法模拟dataLoadService
设srvSpy:any；
让我们看看：任何；
beforeach（异步（（）=>{
TestBed.configureTestingModule({
声明：[主页]，
进口：[
HttpClientTestingModule，
IonicModule.forRoot（）]，
//用我们的mock去掉DateLoadService的真正实现
提供程序：[{提供：DataLoadService，useValue:mockDataLoadService}]，
}).compileComponents（）；
//让getData返回成为“hello world”的可见值，您想返回什么取决于您自己
mockDataService.getData.and.returnValue（of（'helloworld'）；
fixture=TestBed.createComponent（主页）；
组件=fixture.componentInstance；
}));
//更改测试的标题
它（'应在ngAfterViewInit上更改值'，（）=>{
ngAfterViewInit（）；
expect（component.value）.toBe（'hello world'）；//断言它进入了subscribe块内部，并将component.value设置为'hello world'
});
});

让我们看看您的

ngAfterViewInit

代码。乍一看，您似乎没有进行正确的监视。我已使用ngAfterViewInit first do fixture.detectChanges（）然后fixture.whenStable更新了我的代码，其中包含您的期望值。让我们看看您的

ngAfterViewInit

代码。乍一看，您似乎没有进行正确的监视。我已使用NgafterViewInit first do fixture.detectChanges（）然后fixture.whenStable更新了代码，其中包含您的期望值。