Angular2 - 单元测试表单提交

时间:2016-11-21 14:54:11

标签: unit-testing angular jasmine angular2-forms

我是一个简单的组件,它在form元素中包含两个输入字段。单击提交按钮,它将调用组件上的addUser函数。

组件模板如下:

<div>
  <form [formGroup]="signupForm" (submit)="addUser($event)" role="form" class="form-horizontal">
      <label>Firstname:</label>
      <input type="text" formControlName="firstName"> 
      <label>Lastname:</label>
      <input type="text" formControlName="lastName">
      <input type="submit" id="btnSubmit" class="btn btn-primary btn-lg" value="Register" />
  </form>
</div>

组件定义如下:

@Component({
  moduleId: module.id,  
  templateUrl: 'user.component.html'  
})
export class UserComponent {

  registered = false;

  constructor(
    private router: Router,
    private fb: FormBuilder,
    public authService: AuthService) {

      this.signupForm = this.fb.group({
            'firstName': ['', Validators.required],
            'lastName': ['', Validators.required]
        });        
  }

  addUser(event: any) {
      event.preventDefault();
      this.addUserInvoked = true;
      ......
      ......
      this.authService.register(this.signupForm.value)
        .subscribe(
        (res: Response) => {
            if (res.ok) {
                this.registered = true;
            }
        },
        (error: any) => {
            this.registered = false;                                
        });
  }
}

工作正常。但是,在我的单元测试中,当我尝试测试在提交按钮上调用click时,然后调用addUser。但遗憾的是,addUser函数未被调用。

以下是我的样本单元测试

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


let comp: UserComponent;
let fixture: ComponentFixture<UserComponent>;

describe('UserComponent', () => {
  beforeEach(() => {
    TestBed.configureTestingModule({
      declarations: [ UserComponent ],
      schemas:      [NO_ERRORS_SCHEMA]
    });
  });

  compileAndCreate();
  tests();
});

function compileAndCreate() {
  beforeEach( async(() => {
    TestBed.configureTestingModule({
      providers: [        
        { provide: Router,      useClass: RouterStub },
        { provide: AuthService, useValue: authServiceStub },
        FormBuilder
      ]
    })
    .compileComponents().then(() => {
      fixture = TestBed.createComponent(UserComponent);
      comp = fixture.componentInstance;
    });
  }));
}

function tests() {
    it('should call addUser when submitted', () => { 
        const spy = spyOn(comp, 'addUser');  

        //*************below method doesn't work and it refreshes the page***************
        //let btnSubmit = fixture.debugElement.query(By.css('#btnSubmit'));
        //btnSubmit.nativeElement.click();

        let form = fixture.debugElement.query(By.css('form'));
        form.triggerEventHandler('submit', null);
        fixture.detectChanges();

        expect(comp.addUser).toHaveBeenCalled();
        expect(authServiceStub.register).toHaveBeenCalled();
        expect(comp.registered).toBeTruthy('user registered'); 
    });

}

我已经尝试了

fixture.debugElement.query(By.css('#btnSubmit')).nativeElement.click()

fixture.debugElement.query(By.css('form')).triggerEventHandler('submit', null)

但我仍然无法调用addUser函数。我已经在SO here上发布了一个问题,但它也没有帮助。

3 个答案:

答案 0 :(得分:1)

我遇到了同样的问题,我的解决方案是我必须将'FormsModule'导入到我的测试模块的配置中。

TestBed.configureTestingModule({
            imports: [FormsModule]
)}

也许这会有所帮助?

答案 1 :(得分:1)

  1. 你需要窥探你要检查的功能及其所依赖的功能。
  2. 分派事件后第二次调用fixture.detectChanges。
  3. 还要确保您的表单在dom上可见,否则查询将返回null
  4. 我可以这样做:

    function test(ms) {
      return new Promise((resolve, reject) => setTimeout(resolve, ms))
    }
    
    async function caller() {
      console.log(1, ' - caller() started');
       
      await test(2000).then(() => {
          console.log(2, ' - test() resolved')
      });
      
      console.log(3, ' - delayed until "test()" has resolved');
      
      return 4;
    }
    
    // wait for "caller()" to resolve
    caller().then((result) => {
        console.log(result, " - caller() finished")
    });
    
    console.log(5);

答案 2 :(得分:0)

下面是示例代码:1:将Xcomponent替换为您的组件名称2:将formID替换为您的表单的ID。

import {async, ComponentFixture, TestBed} from '@angular/core/testing';

    import {FormsModule} from '@angular/forms';
    import {By} from '@angular/platform-browser';

    describe('Xcomponent', () => {
      let component: Xcomponent;
      let fixture: ComponentFixture<Xcomponent>;

      beforeEach(async(() => {
        TestBed.configureTestingModule({
          imports: [FormsModule],
          declarations: [Xcomponent]
        })
          .compileComponents();
      }));

      beforeEach(() => {
        fixture = TestBed.createComponent(Xcomponent);
        component = fixture.componentInstance;
        fixture.detectChanges();
      });

      it('should create', () => {
        expect(component).toBeTruthy();
      });

      it('should call save() method on form submit', () => {
        /*Get button from html*/
        fixture.detectChanges();
        const compiled = fixture.debugElement.nativeElement;
        // Supply id of your form below formID
        const getForm = fixture.debugElement.query(By.css('#formID'));
        expect(getForm.triggerEventHandler('submit', compiled)).toBeUndefined();
      });

    });