无法绑定到“ eventList”,因为它不是“ header-nav”的已知属性。

时间:2019-05-30 10:05:46

标签: angular karma-jasmine angular7 angular-test

我在模板上添加的partner_last_name: { required: function(element){ if(($("#partner_first_name").val()!="" )||($("#partner_date_of_birth").val()!="" )) { return true; } }, lettersonly: function(element){ if(($("#partner_first_name").val()!="" )||($("#partner_date_of_birth").val()!="" )) { return true; } }, minlength: function(element) { if(($("#partner_first_name").val()!="" )||($("#partner_date_of_birth").val()!="" )) { return 3; } }, }, 值上遇到了错误。如何解决此问题以通过我的测试?

这是模板:

select top3 * orderby score

这是我的组件文件:

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(); }); }); 用管道传输的情况下如何启动测试?

谢谢。

1 个答案:

答案 0 :(得分:1)

该组件使用的所有其他组件应在TestBed配置中声明,因此应将HeaderNavComponent添加到TestBed的声明中。

或者您可以仅在CUSTOM_ELEMENTS_SCHEMA配置中使用TestBed而不用声明那些组件。

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