4

method1、method2およびを含む myComponent がありますngOnInit。

export class myComponent  {

//input and output declaration

public myVar;
constructor( @Inject(ElementRef) private elementRef: ElementRef) {

}
public method1() { return this.myVar.val().toUpperCase(); }
public method2() { return this.myVar .val(""); }
public ngOnInit() {

this.myVar = //calling jQuery autocomplete method which in turns calls $.JSON () to get data .
//
}

このコンポーネントの html テンプレートは次のとおりです。

<input type="text" value="{{symbol}}" size="{{size}}" maxlength="94"><span></span>

ここに私の仕様ファイルがあります。挿入される値が大文字に変換されていることを確認する必要があります。

describe('myComponent Component', () => {
    beforeEachProviders(() => [myComponent, provide(ElementRef, { useValue: new MockElementRef() })]);
    class MockElementRef implements ElementRef {
        nativeElement = {};
    }

    it('should check uppercase conversion',inject([TestComponentBuilder, myComponent , ElementRef], (tcb:TestComponentBuilder) => {
            tcb.createAsync(myComponent)
                .then((fixture) => {
                    const element = fixture.nativeElement.firstChild;
                    element.setAttribute("value", "g");
                    element.setAttribute("size", 12); //setting size and value for input element
                    var getMyElem= $(element);

                    let ac= new myComponent(fixture.nativeElement); 

                    ac.ngOnInit(); //undefined
  //ac.method1(); unable to call
                    console.log(myComponent.prototype.method1()); //it calls value method but outputs cannot read val of undefined                     
                    expect(element.getAttribute("value")).toBe("G");

                });
        }));
});

値 "g" を "g" に設定し、呼び出し後に "G" が返されることを確認しmethod1()ます。

質問:

1.myComponent のインスタンスを作成する際に、fixture.nativeElement をパラメーターとして渡していますか?
2.また、コンポーネントで内部的に呼び出されている $.JSON メソッドをテストするのを手伝っていただければ。JSON リクエストをモックする方法は?

4

1 に答える 1

2

ではコンポーネント インスタンスを作成しませんnew SomeComponent()。コンポーネントは Angular のように作成する必要がありますtcb.createAsync(SomeComponent)。myComponentのテンプレートにある場合は、AutocompleteComponentからクエリを実行しますfixture。

于 2016-06-01T08:20:28.197 に答える