«Невозможно связать с« eventList », так как это не известное свойство« header-nav ». - PullRequest
Новая
       42

«Невозможно связать с« eventList », так как это не известное свойство« header-nav ».

0 голосов
/ 30 мая 2019

Я получаю вышеуказанную ошибку при async значении, добавленном с моим шаблоном. как это исправить для сдачи моего тестирования?

вот шаблон: 

<header-nav 
    [eventList]="eventList$ | async"
    [eventListSize]="(eventList$ | async).length"
    (selectedEvent)="eventSelected($event)"
    (setLang)="langChanged($event)"
    [currentLang]="currentLang$ | async"
    [langList] = "langList$ | async"
    (leftNavi) = "leftNaviHandler($event)"
    >
</header-nav>

Вот мой файл компонента: 

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { Store, select } from "@ngrx/store";
import { Observable } from "rxjs";
import { ModelEvent, EventState } from "./../../../calendar/models/model.event";
import { ModelLang, ModelLonguage } from "./../../../shared-components/models/models";
import { CalendarActions, Load, EventSelected } from "./../../../calendar/state/calendar.actions";
import * as fromRoot from  "./../../../calendar/state";
import * as fromObservables from  "./../../state";
import { Lang, LoadLang } from "./../../state/actions/shared.actions";
import { ShowNavi } from "./../../../shared-components/state/actions/shared.actions";

@Component({
    selector: 'header-nav-shell',
    templateUrl: './header-nav-shell.component.html',
    styleUrls: ['./header-nav-shell.component.scss']
})
export class HeaderNavShellComponent implements OnInit {
    /**
    * declartion of observable events
    */
    eventList$:Observable<ModelEvent[]>;
    eventListSize$:number;
    currentLang$:Observable<string>;
    langList$:Observable<ModelLonguage[]>;

    constructor(private store:Store<fromRoot.NewState>, private router:Router) { }

    ngOnInit() {
        this.store.dispatch(new Load());
        this.store.dispatch( new LoadLang());
        this.eventList$ = this.store.pipe(select(fromRoot.getEvents));
        this.currentLang$ = this.store.pipe(select(fromObservables.getCurrentLang));
        this.langList$ = this.store.pipe(select(fromObservables.getLangList));
    }

    eventSelected(event) {
        this.store.dispatch(new EventSelected(event));
        this.router.navigateByUrl("iboCalendar");
    }

    langChanged(event) {
        this.store.dispatch( new Lang(event.Name));
    }

    leftNaviHandler(event):void {
        this.store.dispatch(new ShowNavi(event));
    }

}

а вот мой тестовый файл спецификации: 

import { async, fakeAsync, tick, ComponentFixture, TestBed } from '@angular/core/testing';

import { HeaderNavShellComponent } from './header-nav-shell.component';
import { HeaderComponent } from './../../header/header.component';
import { Store, select } from "@ngrx/store";
import { StoreModule } from '@ngrx/store';
import { reducerShared } from "./../../state/reducers/shared.reducer";

describe('HeaderNavShellComponent', () => {

    let component: HeaderNavShellComponent;
    let fixture: ComponentFixture<HeaderNavShellComponent>;

    beforeEach(async(() => {
        TestBed.configureTestingModule({
            declarations: [ HeaderNavShellComponent, HeaderComponent ],
            imports:[StoreModule.forFeature("shared", reducerShared )]
        })
        .compileComponents();
    }));

     beforeEach(fakeAsync(() => {
        fixture = TestBed.createComponent(HeaderNavShellComponent);
        component = fixture.componentInstance;
        tick(1000);
        fixture.detectChanges();
    }));


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

});

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

Failed: Template parse errors:
Can't bind to 'eventList' since it isn't a known property of 'header-nav'.
1. If 'header-nav' is an Angular component and it has 'eventList' input, then verify that it is part of this module.
2. If 'header-nav' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("<app-header></app-header>
<header-nav 
    [ERROR ->][eventList]="eventList$ | async"
    [eventListSize]="(eventList$ | async).length"
    (selectedEvent)="eve"): ng:///DynamicTestModule/HeaderNavShellComponent.html@2:1

Кто-нибудь, помогите мне понять, в чем заключается зависимость, которую я здесь упускаю, или как запустить тест в случае, если у вас async трубы?

Заранее спасибо.

1 Ответ

1 голос
/ 30 мая 2019

Все остальные компоненты, используемые этим компонентом, должны быть объявлены в конфигурации TestBed, поэтому HeaderNavComponent следует добавить в объявления TestBed.

Или вы можете просто использовать CUSTOM_ELEMENTS_SCHEMA в TestBed конфигурации вместо объявления этих компонентов. 

beforeEach(async(() => {
  TestBed.configureTestingModule({
      declarations: [ HeaderNavShellComponent, HeaderComponent ],
      imports:[StoreModule.forFeature("shared", reducerShared )],
      schemas: [ CUSTOM_ELEMENTS_SCHEMA ]
  })
  .compileComponents();
}));
...