组件的角度 2 单元测试

Question

我将ng2与webpack 2一起使用。

我不知道如何测试组件功能这是我的组件

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');
    }
}

我想测试login((函数，看看这个.gd.shareObj['role'] = 'admin';是否真的设置为admin。

.

spec.ts文件会是什么样子？

Answer 1

我会这样做：

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');
    })
  );
});

普伦克示例