2016-10-24 14 views
1

現在、私はマテリアルモジュールを使用しているアプリケーション(Angular2とtypescript)のモジュールをテストしています。PhantomJSとAngular Material複数のコンポーネント:MdButton、MdAnchor

import {Component, EventEmitter} from '@angular/core'; 
import {Output} from '@angular/core/src/metadata/directives'; 

@Component({ 
    selector: 'simple-choice', 
    template: require('./Dialog.html'), 
    styles: [require('./Dialog.scss')] 
}) 
export class DialogComponent { 

    @Output() 
    public noClicked: EventEmitter<any> = new EventEmitter<any>(); 

    @Output() 
    public yesClicked: EventEmitter<any> = new EventEmitter<any>(); 

    public message: string = ''; 
} 

HTML::

これは私のモジュール

import {NgModule} from '@angular/core'; 
import {CommonModule} from '@angular/common'; 
import {MdButtonModule} from '@angular/material'; 
import {DialogComponent} from './DialogComponent'; 

@NgModule({ 
    imports: [ 
     CommonModule, 
     MdButtonModule 
    ], 
    entryComponents: [ 
     DialogComponent 
    ], 
    declarations: [ 
     DialogComponent 
    ], 
    exports: [DialogComponent] 
}) 
export class DialogModule { 
} 

私のコンポーネントである

PhantomJS 2.1.1 (Mac OS X 0.0.0) ERROR: 'Unhandled Promise rejection:', 'Template parse errors: 
More than one component: MdButton,MdAnchor (" 
</div> 
<div class="button-container"> 
    [ERROR ->]<button md-raised-button 
      color="warn" 
      (click)="noClicked.emit()"> 
"): [email protected]:1 
More than one component: MdButton,MdAnchor (" 
     No 
    </button> 
    [ERROR ->]<button md-raised-button 
      color="primary" 
      (click)="yesClicked.emit()"> 

:私は

npm run test:ci 

を実行したときに、私は次のエラーを取得します0

<div class="message-container"> 
    {{message}} 
</div> 
<div class="button-container"> 
    <button md-raised-button 
      color="warn" 
      (click)="noClicked.emit()"> 
     No 
    </button> 
    <button md-raised-button 
      color="primary" 
      (click)="yesClicked.emit()"> 
     Yes 
    </button> 
</div> 

とテスト:

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

import { By } from '@angular/platform-browser'; 
import { CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA } from '@angular/core'; 
import { DialogModule } from './DialogModule'; 
import { DialogComponent } from './DialogComponent'; 

describe('Dialog component',() => { 

    let noClicked = false; 
    let yesClicked = false; 

    let init =() => { 
     this.fixture.componentInstance.message = 'Are you sure you want to delete it?'; 
     this.fixture.componentInstance.noClicked.subscribe(() => { 
      noClicked = true; 
     }); 

     this.fixture.componentInstance.yesClicked.subscribe(() => { 
      yesClicked = true; 
     }); 
    }; 

    /** 
    * Compile the module 
    */ 
    beforeEach(() => { 
     TestBed.configureTestingModule({ 
      imports: [DialogModule], 
      schemas: [CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA] 
     }).compileComponents(); 

     // create component and test fixture 
     this.fixture = TestBed.createComponent(DialogComponent); 
     init(); 
    }); 

    it('Should render', async(() => { 
     expect(this.fixture.componentInstance.message).toBe('Are you sure you want to delete it?'); 
    })); 

}); 

私は数日中にすべてのものを試してみましたが、私はそれを解決する方法がわかりません。

ありがとうございます。

PD:私はクロムでテストして、完全に動作しています。

<a md-raised-button 
      color="warn" 
      (click)="noClicked.emit()"> 
     No 
    </a> 

理由::

答えて

0

それはちょうどのため

<button md-raised-button 
      color="warn" 
      (click)="noClicked.emit()"> 
     No 
    </button> 

を変更働い

私は、誰かがそれを説明することができれば、私はそれを感謝し、知りません。

関連する問題