These are chat archives for angular/material

Jul 2017
Douglas Webster
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';

    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');

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
Jul 15 2017 20:22
Good evening all, is there someone that has experience with the following course, and can recommend it.