title: Angular 6 unit test case to validate button disable fails when using disable but not disabled querySelector attribute
body: <p>I am new to Angular and trying to write 2 unit test cases using Jasmine.  One test for when a button is enabled and one test when the button is disabled.<br />
  This is the requirement....when a user enters valid data in a textbox, the button is enabled.  If the user enters invalid data in the textbox, the button is disabled.  The initial value is disabled.
  This is the textbox and button html:</p>
  <pre><code>&lt;input
        type=&quot;text&quot;
        matInput
        formControlName = 'triplegOriginControl'
        [(ngModel)]=&quot;leg.originId&quot;
        [matAutocomplete]=&quot;autoTripLegOrigin&quot;
        class = 'trip-origin-input'
        (keydown.Tab)=&quot;onKey($event)&quot;
    /&gt;
  
    &lt;mat-autocomplete autoActiveFirstOption #autoTripLegOrigin=&quot;matAutocomplete&quot;&gt;
      &lt;mat-option
        *ngFor=&quot;let option of triplegOriginOptions | async&quot;
        [value]=&quot;option&quot;
      &gt;
        {{ option }}
      &lt;/mat-option&gt;
    &lt;/mat-autocomplete&gt;
    &lt;mat-error *ngIf=&quot;triplegForm.controls['triplegOriginControl'].hasError('invalid')&quot;&gt;
      Please select a valid location
  &lt;/mat-error&gt;
  &lt;/mat-form-field&gt;
  ....
  &lt;mat-toolbar color=&quot;primary&quot;&gt;
  &lt;button
    mat-raised-button
    color=&quot;primary&quot;
    id=&quot;mat-toolbar__get-rate-button-id&quot;
    [disabled] = !triplegForm.valid
  &gt;
    GET RATE
  &lt;/button&gt;
  &lt;/mat-toolbar&gt;
  </code></pre>
  <p>We have a custom validator that verifies if the textbox input is in the location list.
  This is the constructor to use the validation function:</p>
  <pre><code>&quot;triplegOriginControl&quot;: new FormControl(null, [ ValidateLocation(this.fetchDataService.locationArray)])
  </code></pre>
  <p>This is the 2 unit tests.</p>
  <pre><code>describe('Enable or Disable Get Rates Button', () =&gt; {
       beforeEach(() =&gt; {
         fetchDataService.locationArray = [&quot;STOC/4958&quot;, &quot;NSGR/4143&quot;, &quot;ZCRC/416&quot;, &quot;NSGR/4143&quot;];
       });
  
      it('should enable the button when Origin and Destination are valid', (done) =&gt; {
        const compiled = fixture.debugElement.nativeElement;
        const originIdInput = compiled.querySelector(
          &quot;.trip-origin-input&quot;
        );
        originIdInput.value = &quot;STOC/4958&quot;;
        originIdInput.dispatchEvent(new Event(&quot;input&quot;));
  
        const destinationIdInput = compiled.querySelector(
          &quot;.trip-destination-input&quot;
        );
        destinationIdInput.value = &quot;NSGR/4143&quot;;
        destinationIdInput.dispatchEvent(new Event(&quot;input&quot;));
        fixture.detectChanges();
  
        fixture.whenStable().then(() =&gt; {
          expect(fixture.componentInstance.leg.originId).toBe('STOC/4958');
          expect(fixture.componentInstance.leg.destinationId).toBe('NSGR/4143');
          expect(compiled.querySelector('#mat-toolbar__get-rate-button-id').disable).toBeFalsy();
          done();
        });
      });
  
      it('should disable the button when Origin and Destination are invalid', (done) =&gt; {
        const compiled = fixture.debugElement.nativeElement;
        const originIdInput = compiled.querySelector(
          &quot;.trip-origin-input&quot;
        );
        originIdInput.value = &quot;546&quot;;
        originIdInput.dispatchEvent(new Event(&quot;input&quot;));
  
        const destinationIdInput = compiled.querySelector(
          &quot;.trip-destination-input&quot;
        );
        destinationIdInput.value = &quot;NSGxx/43&quot;;
        destinationIdInput.dispatchEvent(new Event(&quot;input&quot;));
        fixture.detectChanges();
  
        fixture.whenStable().then(() =&gt; {
          expect(fixture.componentInstance.leg.originId).toBe('546');
          expect(fixture.componentInstance.leg.destinationId).toBe('NSGxx/43');
          expect(compiled.querySelector('#mat-toolbar__get-rate-button-id').disable).toBeTruthy();
          done();
        });
      });
    });
  </code></pre>
  <p>When using:</p>
  <pre><code>expect(compiled.querySelector('#mat-toolbar__get-rate-button-id').disable)
  </code></pre>
  <p>the first test(Valid test) fails.
  <strong>ERROR:  Expected true to be falsy.</strong>
  When the attribute <strong>disabled</strong> is used, the valid test passes.</p>
  <p>When using</p>
  <pre><code>expect(compiled.querySelector('#mat-toolbar__get-rate-button-id').disabled)
  </code></pre>
  <p>the second test (invalid test) fails.
  ** Error: Expected undefined to be truthy.**
  When the attribute <strong>disable</strong> is used, the invalid test passes.</p>
  <p>What is the difference between the attribute <strong>disable</strong> vs <strong>disabled</strong>?
  The code works as expected.  When a user enters an invalid value the button is disabled.  When entering a valid value the button is enabled.
  How to correct these test cases</p>