`Can't bind to 'eventList' since it isn't a known property of 'header-nav'.`

Question

I am getting above error on async value added with my template. how to fix this for pass out my testing?

here is the template:

<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>

Here is my component file:

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));
    }

}

as well here is my test spec file:

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();
    });

});

I am getting the following error:

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

Any one help me to understand, what is the dependency i am missing here or how to initiate the test in case when you async pipes?

Thanks in advance.

Answer 1

All the other components that are used by that component should be declared in TestBed configuration, so HeaderNavComponent should be added to the declarations of the TestBed.

Or you can just use CUSTOM_ELEMENTS_SCHEMA in TestBed configuration instead of declaring those components.

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