как макет службы логгера в жасмине, который запускается внутри углового 2-компонентного конструктора

Question

Я создал собственный пакет NPM регистратора, который я использую в своих компонентах, как написано ниже.Я не могу смоделировать этот сервис в моем тестовом примере, используя обычный метод предоставляет и используйте класс.Когда я использую этот метод, я получаю сообщение об ошибке «Не удалось: не удается прочитать свойство« get »из неопределенного», что может быть связано с тем, что я использую службу http внутри пакета logger npm.

// 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();
    });


  }));

Answer 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