Angular 2 RC5 Testing detectChanges not working

Question

I'm building a loginform component with the following interface:

<login-form onlogin="submit()"></login-form>

And that's the testing code:

  it("Should send credentials out of the component", async(() => {
    TestBed.compileComponents().then(() => {
      const fixture = TestBed.createComponent(LoginFormComponent);
      let component = fixture.componentInstance;
      spyOn(component.onlogin, "emit");

      let domRef = fixture.nativeElement;
      domRef.querySelector("input[name='username']").value = "[email protected]";
      domRef.querySelector("input[name='password']").value = '1234';
      domRef.querySelector("form").dispatchEvent(new Event('submit'));

      fixture.detectChanges();

      let expectedSubmitData:UserCredentials = {
        username: "[email protected]",
        password: "1234"
      };
      expect(component.onlogin.emit).toHaveBeenCalledWith(expectedSubmitData);
    });
  }));

I'm getting this message:

Expected spy emit to have been called with [ Object({ username: '[email protected]', password: '1234' }) ] but actual calls were [ Object({ username: '', password: '' }) ]

So, what's the way to fill input values and the model detects those changes?

Vipin · Accepted Answer · 2016-09-05 09:10:09Z

1

Please try to do the following things,It worked for me!!.

let domRef = fixture.nativeElement;
let userInput = domRef.querySelector("input[name='username']")
userInput.value = "[email protected]";
userInput.dispatchEvent(new Event('input'));
let passwordInput = domRef.querySelector("input[name='password']")
passwordInput.value = '1234';
passwordInput.dispatchEvent(new Event('input'));
fixture.detectChanges();
domRef.querySelector("form").dispatchEvent(new Event('submit'));
let expectedSubmitData:UserCredentials = {
   username: "[email protected]",
   password: "1234"
};
expect(component.onlogin.emit).toHaveBeenCalledWith(expectedSubmitData);

edited Sep 5, 2016 at 9:10

answered Sep 5, 2016 at 8:54

Vipin

8771 gold badge10 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angular 2 RC5 Testing detectChanges not working

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related