Question

尝试为mainchat.component.ts编写测试用例但我无法弄明白。（Karma新手）。下面的示例代码

 getActiveUsers(): void {    
    this._ChatService.getActiveUserInfo().subscribe(data => {
      this.Users = data;          
    }, err => {
      console.log(err);
    });
  }

ChatService如下：

@Injectable()
export class ChatService {
  constructor(private _http: HttpClient) { }
  getActiveUserInfo(): any {        
    return this._http
        .get<any>(Globaldata.API_ENDPOINT_LOCAL + '/api/getActiveUsers')
        .do(data => console.log('All this : ' + JSON.stringify(data)))
}
getActiveGroupInfo(): any {      
  return this._http
      .get<any>(Globaldata.API_ENDPOINT_LOCAL + '/api/getActiveGroups')
      .do(data => console.log('All this : ' + JSON.stringify(data)))
  }
}

我正在尝试编写上述组件的测试用例，但无法弄清楚如何存根服务

  class MockChatService extends ChatService {    
  constructor() {
      super(null);
  }    
  testActiveUser: Array < USER > = [
      new USER(),
      new USER()
  ];    
  testActiveGroup: Array < GROUP > = [
      new GROUP()
  ];    

  public getActiveUserInfo(): Observable < USER[] > {
    return Observable.of(this.testActiveUser);
  }

  public getActiveGroupInfo(): Observable < GROUP[] > {
    return Observable.of(this.testActiveGroup);
  }
}

describe('InstantMessangerComponent (inline template)', () => {

  let chatService: MockChatService;
  let component: InstantMessangerComponent;
  let fixture: ComponentFixture < InstantMessangerComponent > ;

  beforeEach(async (() => {
      TestBed.configureTestingModule({
              imports: [FormsModule, HttpClientModule, HttpModule],
              declarations: [InstantMessangerComponent, MessagewindowComponent, SearchuserPipe],
              providers: [{
                  provide: ChatService,
                  useClass: MockChatService
              }]
          }).overrideComponent(ChatService, {
              set: {
                  providers: [{
                      provide: ChatService,
                      useClass: MockChatService
                  }]
              }
          }).compileComponents() // compile template and css
          .then(() => {
              fixture = TestBed.createComponent(InstantMessangerComponent);
              component = fixture.componentInstance; // InstantMessangerComponent test instance
              chatService = TestBed.get(ChatService);
          });
  }));

  it('expects getActiveUsers() to have been called', function() {

      spyOn(component, 'getActiveUsers').and.callThrough();

      component.getActiveUsers();

      expect(component.getActiveUsers).toHaveBeenCalled();
  });
 });

Test Suite正在调用Main ChatService而不是MockChatService。

Answer 1

您需要拨打spyOn。据我所知，getActiveUsers提供的代码mainchat.component.ts。

你应该做的事情如下：

it('expects getActiveUsers() to have been called', function () {
    spyOn(component, 'getActiveUsers');

    expect(component.getActiveUsers).toHaveBeenCalled();
});

这应该检查方法是否被调用。

更新

另一种方法是获取对注入服务的引用，如：

const chatService = fixture.debugElement.injector.get(ChatService);
const spy = spyOn(chatService, 'getActiveUserInfo').and.returnsWithValue(Promise.resolve('whatever you want to return'));

expect(spy.calls.any).toBe(true);

您拥有的第三个选项是提供全新的服务，例如初始化中的假服务（beforeEach的异步版本）并让它返回一些虚拟数据。但这与更新后的答案几乎相同，后者可以获得对注入服务的引用并对其进行间谍。

Angular Mock Service未在组件规范（Karma）中调用

1 个答案:

更新