Angular «Невозможно прочитать свойство« подписаться »из неопределенного» в модульном тесте - PullRequest
Новая
       2

Angular «Невозможно прочитать свойство« подписаться »из неопределенного» в модульном тесте

0 голосов
/ 14 января 2020

Я использую Jest для модульного тестирования моего приложения Angular, и я получаю эту ошибку TypeError: Cannot read property 'subscribe' of undefined Похоже, что онлайн-решение не имеет смысла или не работает должным образом. Вот некоторый код:

page-view.component.ts 

  @Input() gotPlot!: Observable<void>;
  ...
  ngOnInit() {
    this.initialiseColumnDefs();
    this.gotPlot.subscribe((response) => { //ERROR is occurring on this line
      this.gotPlotValues(response);
    });
  }

page.component.ts 

@Component({
  selector: 'page',
  template: `
    <page-view
      [gotPlot]="gotPlotSubject.asObservable()"
    >
    </page-view>
  `,
})

export class PageComponent implements OnInit {
  ...
  public gotPlotSubject: Subject<void> = new Subject<void>();
  ...

  async get_plot(arr: any): Promise<any[]> {

    //This function calls a service and gets 'plotValues'
    (await this.service.get_plot(input)).subscribe((data: any) => {

      //plotValues is set to values gotten from the service here     

      this.gotPlotSubject.next(plotValues);
    });
  }
}

page-view.component.spe c .ts 

@Component({
  selector: 'page',
  template: `
    <page-view *ngIf="gotPlotSubject.asObservable()" [gotPlot]="gotPlotSubject.asObservable()">
    </page-view>
  `,
})
class PageMock {
  public gotPlotSubject: Subject<void> = new Subject<void>();
  constructor() {}
  ngOnInit() {
    let plotValues: any = [];
    plotValues[0] = 1;
    plotValues[1] = [1, 2, 3];
    plotValues[2] = [2, 3, 4];
    this.gotPlotSubject.next(plotValues);
  }
}

describe('ViewComponent', () => {
  let spectator: Spectator<ViewComponent>;

  const createComponent = createComponentFactory({
    component: ViewComponent,
    declarations: [
      ViewComponent,
      PageMock,
    ],
    imports: [TranslateModule.forRoot(), MaterialModule, AgGridModule, FormsModule],
    providers: [HttpClient, HttpHandler, NGXLogger, NGXMapperService, HttpBackend, NGXLoggerHttpService, LoggerConfig],
    schemas: [NO_ERRORS_SCHEMA],
  });

  beforeEach(() => {
    spectator = createComponent();
  });

  it('should create', () => {
    expect(spectator.component).toBeTruthy();
  });
});

Мой PageMock не так? Как правильно издеваться над наблюдаемым / подписываться? Есть ли более простой способ сделать это без использования наблюдаемых или подписки? Subscribe и Observables, кажется, делают модульное тестирование более болезненным, чем должно быть.

1 Ответ

1 голос
/ 14 января 2020

Попробуйте сделать 

@Component({
  selector: 'page',
  template: `
    <page-view *ngIf="gotPlotSubject.asObservable() | async" [gotPlot]="gotPlotSubject.asObservable()">
    </page-view>
  `,
})

Проверьте async трубу на *ngIf. Развернутое значение наблюдаемого на *ngIf всегда будет правдивым. Я бы даже избавился от asObservable(). Я не думаю, что они нужны, но вам нужно поэкспериментировать.

И вы правы, тестирование с использованием Rx JS может быть сложным.

...