These are chat archives for angular/material

15th
Jul 2017
Douglas Webster
@DouglasWebster
Jul 15 2017 16:01

I have a basic login component that uses a material dialog with an embeded form with validation on the input fields. The dialog works a program but fails when I run my unit tests. This plunker shows the basic component with html and test file. The section that is failing has the test ;

  it('should enable the login button when a valid username and password are entered', fakeAsync(() => {
    (overlayContainerElement.querySelector('input[formcontrolname="name"]') as HTMLInputElement).value = 'ABC';
    (overlayContainerElement.querySelector('input[formcontrolname="password"]') as HTMLInputElement).value = '12345678';
    viewContainerFixture.detectChanges();
    tick();

    viewContainerFixture.detectChanges();
    const loginBtn = overlayContainerElement.querySelector('button[md-raised-button]');
    const nameInput = overlayContainerElement.querySelector('input[formcontrolname="name"]');
    const passwordInput = overlayContainerElement.querySelector('input[formcontrolname="password"]');
    console.log('Login Button is:', loginBtn.textContent);
    console.log('Login Button is:', loginBtn.getAttribute('ng-reflect-disabled'));

    expect((nameInput as HTMLInputElement).value).toEqual('ABC');
    expect((passwordInput as HTMLInputElement).value).toEqual('12345678');
    expect((overlayContainerElement.querySelector('button[md-raised-button]')).getAttribute('ng-reflect-disabled')).toBe('false');
  }));

It seems that the viewContainerFixture.detectChanges(); is either not updating the form validation status or the login button is not reading the new form validation status.
Can anyone tell me where my mistake is?

Wim Huiskes
@wimhuiskes
Jul 15 2017 20:22
Good evening all, is there someone that has experience with the following course https://www.udemy.com/the-complete-guide-to-angular-2/?couponCode=YT_SUPER, and can recommend it.