Angular 2 unit test for component

Question

I am using ng2 with webpack 2.

I cant figure out how to test component functions Here is my component

import { Component, OnInit } from '@angular/core';
import { GlobalDataService } from '../global.service';
import { Router } from '@angular/router';
@Component({
    selector: 'login',
    templateUrl: './login.component.html'
})
export class LoginComponent {
    constructor(private gd: GlobalDataService, private router: Router) { }
    login(): void {
        this.gd.shareObj['role'] = 'admin';
        this.router.navigateByUrl('/login');
    }
}

I would like to test login() function and see, if this.gd.shareObj['role'] = 'admin'; is truly set as admin.

What could .spec.ts file look like?

Answer 1

I would do it as follows:

class RouterStub {
  navigateByUrl(url: String) { return url; }
}

class GlobalDataServiceStub {
  shareObj: any = {};
}

describe('LoginComponent', () => {
  beforeEach(() => {
    TestBed.configureTestingModule({
      declarations: [LoginComponent],
       providers: [
         { provide: GlobalDataService, useClass: GlobalDataServiceStub },
         { provide: Router, useClass: RouterStub }
       ]
    });

    fixture = TestBed.createComponent(LoginComponent);
    comp = fixture.componentInstance;
  });

  it('should set role to admin',
    inject([GlobalDataService], (gd: GlobalDataService) => {
        comp.login();
        expect(gd.shareObj['role']).toBe('admin');
    })
  );

});

Plunker Example