如何在 Angular 2 组件构造函数中模拟 jasmine 中的记录器服务答案

【问题标题】：how mock a logger service in jasmine which is initiated inside angular 2 component constructor如何在 Angular 2 组件构造函数中模拟 jasmine 中的记录器服务
【发布时间】：2018-12-21 21:49:30
【问题描述】：

我创建了一个记录器自定义 NPM 包，并在我的组件中使用它，如下所示。我无法使用普通的 provide 和 useClass 方法在我的测试用例中模拟该服务。当我使用该方法时，我收到错误“失败：无法读取未定义的属性'get'”，这可能是因为我在 logger npm 包中使用了 http 服务。

// component code.. 


export class AppComponent {

import { LoggerService } from 'logger';

 private loggerService: LoggerService;

 constructor() {
        this.loggerService = LoggerService.CreateLogger('my-app.component');
    }

    ngOnInit() {
        this.loggerService.traceStarted('ngOnInit');
          //my other codes
        this.loggerService.traceCompleted('ngOnInit');
    }
}


// test case code.. 

import { LoggerService } from 'logger';
describe('my app Component', () => {
  beforeEach(async(() => {
    TestBed.configureTestingModule({
   { provide: LoggerService , useClass: MockLoggerService  },

  })

}));


it('should create the app component', async(() => {

    TestBed.compileComponents().then(() => {
        const fixture = TestBed.createComponent(AppComponent );
        const app = fixture.debugElement.componentInstance;
        expect(app).toBeTruthy();
    });


  }));

【问题讨论】：

请包括MockLoggerService的定义——这可能与这个模拟类的创建方式有关。
嗨，dmcgrandle 这是模拟服务代码导出类 MockLoggerService { CreateLogger () { return new MockLoggerService () } traceStarted() { } traceCompleted() { } info (){ } }
在记录器服务中我正在使用服务记录器 // this.logOptions = ServiceLocator.injector.get('logOptions');

标签： angular jasmine

【解决方案1】：

答案很简单：不要自己调用 new 在 Angulars DI 之外。

如果您希望每个组件都有一个实例（我不喜欢它），请在组件级别提供它。

import { Component, Injector} from '@angular/core';
import { LoggerService } from './logger.service';


@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ],
  providers: [
    {
      provide: LoggerService,
      useFactory: () => new LoggerService('app-component'),
    }
  ]

})
export class AppComponent  {
  name = 'Angular';
  constructor(private loggerService: LoggerService) {
    this.loggerService.info("hello")
  }
}

https://stackblitz.com/edit/angular-pw9pyf?file=src/app/app.component.ts

【讨论】：

您好，感谢您的重播。问题是我的记录器服务是一个非角度服务，它只是一个类。只有一个 npm 包。所以我无法使用您提供的系统。我收到此错误“类 'LoggerService' 的构造函数是私有的，只能在类声明中访问。”
在记录器服务中我正在使用 serviclocator this.logOptions = ServiceLocator.injector.get('logOptions');在测试中，我收到此错误“失败：无法读取未定义的属性'get'”
只要你的 LoggerService 对通过 Angular 提供的某事物没有依赖关系，提供一个缺少 @Injectable 注释的类应该不是问题，因为只有在你想使用时才需要这样做LoggerService 内部的 Angulars DI。但是，如果它不起作用，请提供更多代码，请提供更多代码。