表单值不更新

Question

我是测试的新手，直到现在已经成功使用ng-cli设置测试。我目前正在测试一个简单的登录表单。这就是我提出的目标

login.component.ts

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { ActivatedRoute, Router } from '@angular/router';
import { AuthService } from '../auth.service';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html'
})
export class LoginComponent implements OnInit {
  loginForm: FormGroup;
  showError: boolean = false;
  verfiedUser: boolean = true;

  constructor(public fb: FormBuilder, private _router: Router, private _activatedRoute: ActivatedRoute, private auth: AuthService) { }

  ngOnInit() {
    this.loginForm = this.fb.group({
      username: ['', Validators.required],
      password: ['', Validators.required]
    });

    this._activatedRoute.params.subscribe(params => this.verfiedUser = (params['verified'] === 'true'));
  }

  loginPassword (value): void {
    // this.auth.login(value.username, value.password).subscribe(response => console.log(response), err => console.log(err));
  }
}

login.spec.ts

import { async, ComponentFixture, TestBed, tick } from '@angular/core/testing';
import { By }              from '@angular/platform-browser';
import { DebugElement }    from '@angular/core';
import { FormGroup, ReactiveFormsModule } from '@angular/forms';
import { LoginComponent } from './login.component';
import {
  ActivatedRoute, ActivatedRouteStub, click, newEvent, Router, RouterStub
} from '../testing';
import { RouterTestingModule } from '@angular/router/testing';
import { AuthService } from '../auth.service';

import {
  HttpModule, Http, XHRBackend, Response, ResponseOptions
} from '@angular/http';

import { AppModule } from '../app.module';

function createEvent(eventType: any): Event {
  const evt: Event = document.createEvent('Event');
  evt.initEvent(eventType, true, true);
  return evt;
}

describe('LoginComponent (templateUrl)', () => {

  let comp:    LoginComponent;
  let fixture: ComponentFixture<LoginComponent>;
  let de:      DebugElement;
  let el:      HTMLElement;
  let loginForm: FormGroup;

  // async beforeEach
  beforeEach(async(() => {
    let activatedRoute = new ActivatedRouteStub();

    TestBed.configureTestingModule({
      imports: [AppModule]
    })
    .compileComponents();  // compile template and css
  }));

  // synchronous beforeEach
  beforeEach(() => {
    fixture = TestBed.createComponent(LoginComponent);

    comp = fixture.componentInstance; // BannerComponent test instance
    loginForm = comp.loginForm;
  });

  it('should have a login form which is clean and disabled', () => {
    const loginBtn: DebugElement = fixture.debugElement.query(By.css('.login-form button[type="submit"]'));

    console.log(comp, comp.loginForm, loginForm);
    fixture.detectChanges();

    console.log(comp, comp.loginForm, loginForm);

    expect(comp.loginForm.value).toEqual({
      username: '',
      password: ''
    }, 'does not match');

    expect(loginBtn.nativeElement.disabled).toBe(true);
  });

});

我目前遇到这些错误。 1. loginForm未定义，但定义了comp和comp.loginForm。 2.即使fixture.detectChanges()表格没有更新。

任何帮助，朝着正确的方向都会有所帮助。

UPDATE 已更新beforeEach方法

beforeEach(() => {

    TestBed.configureTestingModule({
      imports: [AppModule]
    })
    .compileComponents();  // compile template and css
    fixture = TestBed.createComponent(LoginComponent);

    comp = fixture.componentInstance; // BannerComponent test instance
  });

谢谢，