Не удается прочитать свойство неопределенного 'ngOnInit' 'getData'-Angular-Unit testing-jasmine

Question

Я пытаюсь написать модульный тест для моего файла компонента, который подписывается на метод в слое обслуживания

Homecomponent.ts

import { Data } from './../model/data.model';
import { DataService } from './../services/data.service';
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css'],
})
export class HomeComponent implements OnInit {
  data: Data[];
  constructor(private service: DataService) {}

  ngOnInit() {
    this.getData();
  }
  getData() {
    this.service.getData().subscribe(
      (data) => {
        console.log(data);
        this.data = data;
      },
      (err) => {
        console.log(err);
      },
    );
  }
}

HomeComponent.spec.ts

import { Data } from './../model/data.model';
import { HttpClientModule } from '@angular/common/http';
import { HomeComponent } from './home.component';
import { ComponentFixture, async, TestBed } from '@angular/core/testing';
import { DataService } from '../services/data.service';
import { Observable } from 'rxjs';
import 'rxjs/add/observable/of';
import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { results } from '../model/home';

class MockMyService {
  public data: Data[];
  public getData(): Observable<Data[]> {
    this.data = results;
    return Observable.of(this.data);
  }
}

describe('HomeComponent', () => {
  let component: HomeComponent;
  let fixture: ComponentFixture<HomeComponent>;
  let mockSomeService: MockMyService;
  describe('Async', () => {
    beforeEach(async(() => {
      TestBed.configureTestingModule({
        declarations: [HomeComponent],
        providers: [
          {
            provide: DataService,
            useValue: mockSomeService,
          },
        ],
        imports: [HttpClientModule],
        schemas: [CUSTOM_ELEMENTS_SCHEMA],
      });
      TestBed.compileComponents();
      fixture = TestBed.createComponent(HomeComponent);
      component = fixture.componentInstance;
      fixture.detectChanges();
      mockSomeService = fixture.debugElement.injector.get(DataService);
      spyOn(mockSomeService, 'getData').and.returnValue(Observable.of(results));
      component.ngOnInit();
      fixture.detectChanges();
    }));
  });

  // afterEach(() => {
  //   fixture = undefined;
  // });

  it('method should be called', async () => {
    component.ngOnInit();
    mockSomeService.getData();
    expect(fixture.debugElement.componentInstance.data.length).toEqual(2);
  });
});

если я использую component.ngOnInit ();выдает ошибку как

TypeError: Cannot read property 'ngOnInit' of undefined

, если я не использую component.ngOnInit (), это выдает ошибку как

TypeError: Cannot read property 'getData' of undefined

Как я могу преодолеть эту проблему?Заранее спасибо.

Answer 1

Вы полностью ошибаетесь в тестировании своего кода.

1. Ваша конфигурация TestBed не должна быть вложена в блок описания, к которому другие блоки описания не могут получить доступ
2. При использовании фиктивного сервиса используйте термин useClass: вместо useValue:
3. Нет необходимости шпионить за методом сервиса, когда вы макетируете свой сервис
4. Вместо того, чтобы тестировать свой ngOnInit, протестируйте метод getData, чтобы убедиться, что он правильно устанавливает атрибут данных в вашем компоненте.Это потому, что вы не знаете, когда ngOnInit завершил выполнение вашего асинхронного кода
5. Поскольку getData является асинхронным, передайте обратный вызов done () в свой блок it, это позволит вам уведомить тест о завершении асинхронного кода

Кроме того, похоже, что вы, возможно, используете старую версию angular, поскольку ваша версия RXJS до 6-й версии, потому что ваш код использует Observable.of (), а не новый синтаксис, который простоиз ().Возможно рассмотрите возможность обновления!

Надеюсь, это объяснение помогло!:)

Фиксированный тестовый код ниже:

class MockMyService {
  public data: Data[];
  public getData(): Observable<Data[]> {
    this.data = results;
    return Observable.of(this.data);
  }
}

describe('HomeComponent', () => {
  let component: HomeComponent;
  let fixture: ComponentFixture<HomeComponent>;
  let dataService: DataService;

  beforeEach(() => {
    TestBed.configureTestingModule({
      declarations: [HomeComponent],
      providers: [
        {
          provide: DataService,
          useClass: MockMyService
        }
      ],
      imports: [HttpClientModule],
      schemas: [CUSTOM_ELEMENTS_SCHEMA],
    }).compileComponents();
    fixture = TestBed.createComponent(HomeComponent);
    component = fixture.componentInstance;
    dataService = TestBed.get(DataService);
    fixture.detectChanges();
  });

  describe('Given the component is loaded', () => {
    describe('When getData returns mock data', () => {
      it('Then the data attribute has a length of 2', (done) => {
        dataService.getData().subscribe(() => {
          expect(component.data.length).toEqual(2);
          done();
        });
      });
    });
  });
});