4

I have myComponent which contains method1, method2 and 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 .
//
}

here is the html template for this component :

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

here is my spec file. I need to make sure any value being inserted is converted to uppercase. 

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

                });
        }));
});

I want value "g" set to equal "g" as well as check that "G" is returned after calling method1().

Questions :

1.Is passing fixture.nativeElement as parameter while creating instance of myComponent right ?
2. Also if you can help me to test $.JSON method being called internally in component. how to mock a JSON request ?

heyayush
  • 185
  • 1
  • 11

1 Answers1

2

You don't create component instances by new SomeComponent(). Components need to be created by Angular like tcb.createAsync(SomeComponent). If myComponent is in the template of AutocompleteComponent then query it from fixture.

Günter Zöchbauer
  • 623,577
  • 216
  • 2,003
  • 1,567
  • can you please look at the edited code. i have just one component (`myComponent`). there was no `AutocompleteComponent` – heyayush Jun 01 '16 at 10:16
  • 1
    You still have `new myComponent()` in your code. What is this supposed to do? – Günter Zöchbauer Jun 01 '16 at 10:17
  • i guess he wants to create a new instance for myComponent and call method1, method2 on it . – candidJ Jun 01 '16 at 10:19
  • 1
    Looks like it :D but as mentioned creating components this way usually doesn't make much sense. You can do for tests of course to test methods, but then there is no view and therefore no HTML. To me it doesn't make sense in the code in the question. – Günter Zöchbauer Jun 01 '16 at 10:24
  • @candidJ yes i'm trying to create instance of myComponent. – heyayush Jun 01 '16 at 10:36
  • @GünterZöchbauer i have html view. it's an input textbox who's value gets rendered from service (called inside ngOnInit) after you type in it. i want to check that on typings any keyword, does it get converted to uppercase as per `method1`? sorry for confusion . edited again. – heyayush Jun 01 '16 at 10:39
  • 3
    I think I start to get what the problem is. `createAsync(myComponent)` already creates a `myComponent()`, there is no need to create it again using `new myComponent()`. Just access the class instance using `fixture.debugElement.componentInstance`. You might need to call `fixture.detectChanges()` to invoke change detection and get `ngOnInit()` called and also afterwards if you do changes that need to be processed by change detection. – Günter Zöchbauer Jun 01 '16 at 10:43