Testing a form with dependency of FormBuilder and Router

testing
1

Hey dudes, I´ve got a problem with testing my Form.Component…

Here´s my component.ts:

export class RequestFormComponent implements OnInit {
    daysInNumber:number = 0;
    addForm: FormGroup;

    constructor(private formBuilder: FormBuilder, private router:Router) {    }

And here is my actual test for the component:

describe('RequestFormComponent', () => {
    let demoComponentInstance:RequestFormComponent;
    let demoComponentElement;
    let componentFixture;

    var builder;

    beforeEach(inject([TestComponentBuilder], (tcb:TestComponentBuilder) => {
        builder = tcb;
    }));

    describe('@Component view', () => {
        it('should display a form to add a request', () => {
       // builder.createAsync(RequestFormComponent).then((fixture) => {
            //     componentFixture = fixture;
            //
            //     demoComponentInstance = componentFixture.componentInstance;
            //     demoComponentElement = componentFixture.nativeElement;
            //
            //     componentFixture.detectChanges();
            // });
            // chai.assert.equal(demoComponentInstance.addForm.valid,false);


            chai.assert.isNotNull( $('button.add-request'));
            console.log($('button.add-request').length);
}); });

As you can see I have two versions for my test.

  1. Comments: Here i dont have access to addForm… i dont know why its undefined, intellisense shows me what i should be able to do…
  2. jquery selector which gives me the length 0 back…
    If I do the same selector in console from my browser i get my wanted result (1) back…

More Information about my Setup:

  • Using Webstorm as IDE
  • Using Mocha for testing (practicalmeteor:mocha)
  • Using Typescript (Barbatus-typescript)
  • Using Angular 2

I dont know it it is the right way, but if I create a new formbuilder, new router in this line :

            builder.createAsync(RequestFormComponent(new FormBuilder,new Router)).then((fixture) => {

i get another error :smiley:
Message: Cannot read property ‘forEach’ of undefined …

Should I follow this 3rd option ?

2

NOT SOLVED MY PROBLEM:

     beforeEach(inject([TestComponentBuilder], (tcb:TestComponentBuilder) => {
         return tcb.overrideProviders(RequestFormComponent, [
              {provide: Router, useValue: {} },
              provide(FormBuilder, Router )
         ]).createAsync(RequestFormComponent).then((fixture) => {
             componentFixture = fixture;

             demoComponentInstance = componentFixture.componentInstance;
             demoComponentElement = componentFixture.nativeElement;
         });

     }));

tried nearly the same solution like ten times… but the {} solved it for real i think…
hope I won´t get there again soon.

Now I´m going to write my test cases. :smiley:

does not do what i wanted… i can now access my elemts using jquery but i have no access (because elements are undefined) to my addForm : FormGroup… because the formbuilder the component gets in the constructor is just empty.

1 Like