Angular2 - Unit Testing Form Отправить

Question

У меня есть простой компонент, который содержит два поля ввода внутри элемента 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;         
     }); 
    } 
} 

Это прекрасно работает. Тем не менее, в моем модульном тесте, когда я пытаюсь проверить, что, когда клик вызывается на кнопку отправки, выполняется вызов 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, но это тоже не полезно.

Answer 1

У меня была та же проблема, и решение для меня состояло в том, что мне пришлось импортировать «FormsModule» в конфигурацию моего модуля тестирования.

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

Возможно, это может помочь?