Блог

Я пытаюсь написать простой тест на угловом языке с неглубокой визуализацией. Я использую асинхронный канал в шаблоне html для визуализации наблюдаемого. Я продолжаю получать следующую ошибку:

 Error: InvalidPipeArgument: '() => this.referenceDataService.getRoutes() 
    .pipe(Object(rxjs_operators__WEBPACK_IMPORTED_MODULE_5__["map"])((routes) => {​​​ debugger; return routes || []; }​​​))' for pipe 'AsyncPipe'
 

Компонент:

 routes$: Observable<RouteModel[]>;
   routes$ = () => this.referenceDataService.getRoutes()
    .pipe(map((routes: RouteModel[]) => {
        debugger;
        return routes || [];
    }));
 

тест:

 beforeEach(() => {
    routes = [
        { routeId: 1, prefix:'/test1', route:'/test1' }, 
        { routeId: 2, prefix:'/test2', route:'/test2' }
    ]

    dataServiceMock = {
        getRoutes: () => of(routes)
    };

    shallowComponent = new Shallow(RouteComponent, AppModule)
    .provideMock([
        { provide: ReferenceDataService, useValue: dataServiceMock}
    ])
    .dontMock([FormBuilder]);
});

it('should create',  async () => {
    const { instance } = await shallowComponent.render();
    expect(instance).toBeTruthy();
});
 

Кто-нибудь может, пожалуйста, помочь мне, в чем проблема?

Спасибо

Работает ли код, когда вы это делаете npm start ?

Проблема в () том , async что канал может привязываться только к Observable функции, а не к функции, которая возвращает Observable значение, если только вы не вызовете эту функцию в HTML, что не рекомендуется, потому что это замедлит приложение, потому что функция будет вызываться каждый раз, когда выполняется обнаружение изменений.

Попробуйте это:

 // get rid of the () =>
routes$ = this.referenceDataService.getRoutes()
    .pipe(map((routes: RouteModel[]) => {
        debugger;
        return routes || [];
    }));