Angular2 FormBuilder单元测试

Question

关于在Angular2中模拟Formbuilder，我有两个问题。

1）如何在规范中模拟formBuilder？我们可以使用任何给定的模拟吗？例如，我想更新规范中的表单值，然后进行测试以查看该表单是否仍然有效-或测试组件中更新formbuilder组的方法的功能，或者确定是否一个formbuilder组已验证。

2）鉴于fb是规范中的Formbuilder的DI注入，我该如何处理以下错误？

null is not an object (evaluating 'this.fb.group')

当组件如下时：

export class LoginComponent implements OnInit {
  constructor( private fb: FormBuilder ) {}

  ngOnInit() {
    this.loginForm = this.fb.group({
      'email': this.user.email,
      'password': this.user.password
    });
  }
}

Answer 1

如果您使用的是Angular2的最新版本，并且想使用其测试平台，请参考以下工作规范。

describe('Login Component', () => {
  let comp: LoginComponent;
  let fixture: ComponentFixture<LoginComponent>;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [LoginComponent],
      providers: [
        FormBuilder
      ]
      }).compileComponents()
      .then(() => {
        fixture = TestBed.createComponent(LoginComponent);
        comp = fixture.componentInstance;
      });
  }));

  it('user should update from form changes', fakeAsync(() => {
    const testUser = {
      email: 'test@test.com',
      password: '12345'
    };
    comp.loginForm.controls['email'].setValue(testUser.email);
    comp.loginForm.controls['password'].setValue(testUser.password);
    expect(comp.user).toEqual(testUser);
  }));
});

Answer 2

我实际上构建了一个 FormBuilder 的新实例并将其提供给正在测试的组件。

sut = new LoginComponent(service, new FormBuilder());

如果您想修改属于您的 ControlGroup/FormGroup 的任何控件，则可以按以下方式进行：

(<Control>sut.loginForm.controls['Name']).updateValue('Jon Doe');

您也可以测试有效性：

sut.loginForm.valid

更新：

describe('Component', () => {
  let sut: Component;
  let service: Service;

  beforeEach(() => {
    service = new Service(null);
    sut = new Component(new FormBuilder(), service);
        });

  it('should have object initialized', () => {
    expect(sut.selectedBankAccount).toBeDefined();
  });
...