2017-04-25 8 views
0

ここでは単純なものが欠けていると思いますが、どこを左に曲がっているのか分かりません。RouterLinkのクエリで配列が空です - Jasmine/md material 4

ナビゲーションメニューのリンクを確認するテストを書いています。私は要素の配列全体を取得し、自分のリンクが存在することを確認したい。私は角度4の素材、角度4、ジャスミン、カルマを使用して、あなたが見るすべてを実行しています。ここで

次のようにHTML

<md-toolbar color="primary"> 
    <button md-icon-button [md-menu-trigger-for]="menu"> 
    <md-icon class="dark">menu</md-icon> 
    </button> 
    <md-menu #menu="mdMenu"> 
    <button md-menu-item [routerLink]="['posts']"> 
     <md-icon>announcement</md-icon> 
     <span>Posts</span> 
    </button> 
    <button md-menu-item [routerLink]="['']"> 
     <md-icon>home</md-icon> 
     <span>Home</span> 
    </button> 
    </md-menu> 
</md-toolbar> 

テストコードは次のとおりです。ここで私のデバッガが私を示しているものだ、

describe('HeadercomponentComponent',() => { 
    let component: HeadercomponentComponent; 
    let fixture: ComponentFixture<HeadercomponentComponent>; 

    beforeEach(async(() => { 
    TestBed.configureTestingModule({ 
     declarations: [ HeadercomponentComponent ], 
     imports: [MdIconModule, MdMenuModule, MdCoreModule, RouterTestingModule, MdButtonModule] 
    }) 
    .compileComponents(); 
    })); 

    beforeEach(() => { 
    fixture = TestBed.createComponent(HeadercomponentComponent); 
    component = fixture.componentInstance; 
    fixture.detectChanges(); 
    }); 


    it('should check router link for posts page',()=>{ 
    let debugElements = fixture.debugElement.queryAll(By.directive(RouterLink)); 

    let index = debugElements.findIndex(de=>de.properties['routerLink'] == "['posts']"); 

    expect(index).toBeGreaterThan(-1); 
    }); 
}); 

助けるために:

enter image description here

私がrouterLinkのassiですべての異なるボタンをピックアップしていない理由gnments?

答えて

0

この記事のように見えますが、しばらくの間、マテリアルの構文が変更されましたが、私は同様の問題に遭遇し、最終的には動作させることができました。どうやら、メニューは実際にはDOMにはなく、メニュートリガーが起動されてから検索されません。サンプルのテストコードでは、フィクスチャクエリの前に次のものを追加することができます。フィクスチャクエリは、メニューを起動し、メニュー項目を検索可能にします。

const menuTrigger = fixture.debugElement.query(By.css('button')); 
menuTrigger.triggerEventHandler('click', null); 
関連する問題