Проверка углового компонента, который вводит наблюдаемое, полученное из метода @select () @ angular-redux / store

Question

Хорошо. Итак, у меня есть компонент под названием «Account», который использует @select () для создания пользователя $. Тип user $ - Observable с интерфейсом «User»

@select user$: Observable<User>

У меня также есть переменная с именем 'user'. В конструкторе этого компонента я подписываюсь на "user $" и извлекаю свойства 'user' из наблюдаемого.

constructor(private ngRedux: NgRedux<gdcClientState>, private dbService: DatabaseService){
 this.user$.subscribe(user => this.user = user)
}

Это прекрасно работает на практике, но когда я пытаюсь протестировать, я немедленнополучить сообщение об ошибке о том, что он не может прочитать 'firstName' из неопределенного. * одно из свойств, заданных для 'user' наблюдаемым 'user $', является firstName.

Вот как выглядит мой тест:

/* tslint:disable:no-unused-variable */
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { By } from '@angular/platform-browser';
import { DebugElement } from '@angular/core';
import {NgReduxTestingModule, MockNgRedux} from '@angular-redux/store/testing';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { DatabaseService } from '../database.service';
import { User } from '../user'; 
import { Observable } from 'rxjs';

import { AccountComponent } from './account.component';

describe('AccountComponent', () => {
  let component: AccountComponent;
  let fixture: ComponentFixture<AccountComponent>;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [ AccountComponent ],
      imports: [NgReduxTestingModule, FormsModule, ReactiveFormsModule],
      providers: [
        {provide: DatabaseService}
      ]
    })
    .compileComponents();
  }));


  beforeEach(()=>{
    MockNgRedux.reset();

    fixture = TestBed.createComponent(AccountComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();

  });

  afterEach(()=>{
    fixture.destroy();
  })






  it('should create', async(() => {
    const fixture = TestBed.createComponent(AccountComponent);
    fixture.detectChanges();
    const compiled = fixture.debugElement.nativeElement;


 fixture.detectChanges();

    expect(compiled).toBeTruthy();
  }));
});

Я попытался реализовать некоторые исправления и предложения из этих двух потоков: Тестирование @select декораторов с помощью @ angular-redux / store Тестирование Angular с @ angular-redux / store в Storybook

Но это не сработало для меня. Я хотел бы помочь с этим. Спасибо.

Answer 1

Вы не должны инициализировать подписку на конструкторе Компонента, но на хуке жизненного цикла ngOnInit.

ngOnInit(){
 this.user$.subscribe(user => this.user = user)
}

В вашей спецификации убедитесь, что вы инициализируете user на вашемкомпонент перед выстрелом первого detectChanges. Поэтому лучше создать mockUser и установить его там:

    fixture = TestBed.createComponent(AccountComponent);
    component = fixture.componentInstance;
    component.user = mockUser;
    fixture.detectChanges();

Cheers!