angular2 unit-test: kann nicht Lesen-Eigenschaft componentInstance.Methode() undefined

mycomponent.spec.ts-Klasse:

Dieser Fehler: Cannot read property 'ngOnInit' undefined.

let myComponent: MyComponent;
let myService: MyService;

describe('myComponent', () => {
   beforeEach(() => {
    TestBed.configureTestingModule({
      declarations: [MyComponent],
    providers: [
      {provide: MyService, useClass: MockMyService} //**--passing Mock service**
  ]
}).compileComponents()
  .then(() => {
    myComponent = TestBed.createComponent(MyComponent).componentInstance;
    myService = TestBed.get(MyService);
    console.log(myService.getData());
  });
});

it('should get the mock data', () => {
   myComponent.ngOnInit(); //-----------> seems like myComponent is not defined at this place, how to resolve this error 
   expect(myComponent.data).toBe(DATA_OBJECT);
  });
});

unten ist MyComponent:

@Component({
  selector: 'pm-catalogs',
  templateUrl: './catalog-list.component.html'
})

export class MyComponent implements OnInit {

 public data: IData[];

 constructor(private _myService: MyService) {

}

public ngOnInit(): void {
this._myService.getData()
  .subscribe(
    data => this.data = data
  // error => this.errorMessage = <any>error
  );
 }
}

unten ist mock-service 

  export const DATA_OBJECT: IData[] = [
 {
   'Id': 1,
   'value': 'abc'
 },
 {
'Id': 2,
'value': 'xyz'
 }];

@Injectable()
export class MockMyService {
 public getData(): Observable<IData[]> {
    return Observable.of(DATA_OBJECT);
  }
}

Ich bin Neuling auf Angular2 testen, und ich will myService.getData zurück DATA_OBJECT wenn myComponent.ngOnInit () - Aufrufe myService.getData () - Methode in meiner Klasse Skillung
Bitte helfen Sie mir, Sie zu erreichen.

Der code in describe block ist schlecht eingerückt, es ist nicht klar, was dort Los ist.

InformationsquelleAutor DaenKhaleesi | 2017-05-15

  1. 3

    Das problem ist, dass asynchrone beforeEach nicht korrekt umgesetzt, führt dies zu einer race condition.

    Tun .compileComponents().then(() => { ... }) im beforeEach block Ergebnisse in der Verzögerung der code-Ausführung in then callback-zumindest für einen tick. it block wartet nie, und greift auf myComponent Variablen, bevor Sie eine chance hatte, zugeordnet werden.

    Diese Art von race-conditions können immer weniger offensichtlich und mehr gefährlich, wenn ein test nicht scheitern. Stattdessen tests werden Kreuz-kontaminiert, wenn beforeEach aus vorherigen tests beeinflusst die Variablen im aktuellen test.

    .compileComponents() ist synchron, es sei denn, es gibt Komponenten mit styleUrls und templateUrl (wie im obigen Fall). In diesem Fall wird es asynchron, und async Helfer verwendet werden soll:

    //asynchronous block
beforeEach(async(() => {    
  TestBed.configureTestingModule({ ... })
  .compileComponents();
}));

//synchronous block
beforeEach(() => {    
  myComponent = ...
});

    Als Faustregel gilt, die Blöcke werden sollte, umwickelt mit async von fakeAsync Helfer, wenn es eine chance, dass der block kann asynchron.

    Wenn-Komponente sind die Klassen getestet mit TestBed Sie Folgen einem Lebenszyklus, und Ihre Haken automatisch aufgerufen werden. Aufruf ngOnInit() manuell ist nicht nötig (wie die andere Antwort erklärt) und führt den Aufruf der hook-doppelt.

    InformationsquelleAutor estus

  2. 4

    Sie haben nicht nennen ngOnInit() manuell zum ausführen der Komponente init().

    Ändern Sie Ihren code, um code unten

    let myComponent: MyComponent;
let myService: MyService;
let fixture;

describe('myComponent', () => {
   beforeEach(() => {
    TestBed.configureTestingModule({
      declarations: [MyComponent],
    providers: [
      {provide: MyService, useClass: MockMyService} //**--passing Mock service**
  ]
}).compileComponents()
  .then(() => {
   fixture = TestBed.createComponent(MyComponent);
    myComponent = TestBed.createComponent(MyComponent).componentInstance;
    myService = TestBed.get(MyService);
    console.log(myService.getData());
  });
});

it('should get the mock data', () => {
   fixture.detectChanges();  //this line will call components ngOnInit() method
   expect(myComponent.data).toBe(DATA_OBJECT);
  });
})

    Blick auf die Linie fixture.detectChanges(); Erste mal, wenn Sie ändern Sie die Erkennung geschieht Komponenten ngOnInit() aufgerufen werden.

    Das ist mein problem gelöst, vielen Dank. Und dies ist, wie eckig/cli-Schemata zu generieren sollte die spec-Dateien (.compileComponents().then())

    InformationsquelleAutor Amit Chigadani

Schreibe einen Kommentar