Окончательная версия Angular2: метод внедренного сервиса при тестировании модуля возвращается неопределенным

Question

Я пытаюсь написать несколько юнит-тестов для компонента, в который были добавлены некоторые сервисы для загрузки данных с сервера. Данные загружаются в этот компонент по методу OnInit(). Я пытаюсь, что сервисный метод возвращает некоторые фиктивные данные, используя spyOn. Ниже приводится настройка юнит-теста -

let comp: MyComponent;
let fixture: ComponentFixture<MyComponent>;
let staticDataService: any;
let spy: jasmine.Spy;
let allCountries: string[];

describe('MyComponent', () => {
beforeEach( async(() => {

    TestBed.configureTestingModule({
        imports : [ FormsModule, HttpModule ],
        declarations : [MyComponent],
        providers: [ StaticDataService ]
    })
    .compileComponents();
}));

beforeEach(() => {
    fixture = TestBed.createComponent(MyComponent);
    comp = fixture.componentInstance;
    staticDataService = fixture.debugElement.injector.get(StaticDataService);
    allCountries = [] = ["US", "UK"];
    spy = spyOn(staticDataService, 'getCountries').and.returnValue(Promise.resolve(allCountries));
    });
it('Countries should be set', () => {
    expect(comp.allCountries).toEqual(allCountries);
    }); 
});

Ниже приведен класс компонентов, который я тестирую

@Component({
  moduleId: module.id,
  selector: 'myeditor',
  templateUrl: 'my.component.html',
  styleUrls: ['my.component.css']
})
export class MyComponent implements OnInit {
  allCountries: string[];
  constructor(private _staticDataServices: StaticDataService) {}
  ngOnInit() {
    this.getDataFromServer();
  }

  getDataFromServer()
  {
    this.allCountries = this._staticDataServices.getCountries();
  }

Я получаю следующую ошибку -

    Chrome 53.0.2785 (Windows 7 0.0.0) MyComponent Countries should be set FAILED
    [1]     Expected undefined to equal [ 'US', 'UK' ].

По тем же модульным тестам отлично работают немногие другие тесты, которые не зависят от внедренных сервисов. Получение "неопределенного" при тестировании свойств, которые устанавливаются сервисами. Может кто-нибудь, пожалуйста, помогите, что я делаю не так здесь?

Спасибо

Answer 1

1. Вам нужно позвонить fixture.detectChanges() для ngOnInit быть названным.

   fixture = TestBed.createComponent(MyComponent);
   fixture.detectChanges();
   

2. getCountries возвращает Promise так что вам нужно then это, в противном случае значение allCountries будет просто обещание, а не данные

   getDataFromServer() {
     this._staticDataServices.getCountries().then(data => {
       this.countries = data;
     });
   }
   

3. Поскольку обещание асинхронное, вам нужно использовать async и дождитесь завершения асинхронной задачи, вызвав fixture.whenStable()

   import { async } from '@angular/core/testing';
   
   it('...', async(() => {
     fixture.whenStable().then(() => {
       expect(comp.allCountries).toEqual(allCountries);
     })
   })
   

---

UDPATE

Не видя StaticDataServiceЯ предполагаю, что вы пытаетесь ввести Http внутрь. Это не будет работать в тестовой среде без дальнейшей настройки. То, что я предлагаю вам сделать, это просто сделать службу издевательской

staticDataService = {
  getCountries: jasmine.createSpy('getCountries').and.returnValue(...);
}

providers: [
  { provide: StaticDataService, useValue: staticDataService }
]