Jasmine / Karma-Angular 2中按钮启用的单元测试

Question

我不太了解Jasmine / Karma单元测试，这里我正在测试反应形式按钮。如果两个输入我的按钮的字段将启用，则这是表单的正常功能。在对此功能进行单元测试时，我收到类似“失败：无法读取null的属性'nativeElement'”的错误。如果有人知道，请帮助我。

这是我的表格。

<div class="grid" >
<div [formGroup]="orderUnitForm" >
	<div class="form-group" [hidden]="searhPanel">
    <div class="layer-types__layer-1" >             
              <div class="bx--row">
              <div class="bx--col-md-12 bx--col-xs-12">              
		        <select id="select-menu" class="bx--text-input" formControlName="ruleSelection" name="ruleSelection" (change)="onChange($event.target.value)" >
		        	 <option  selected>{{defaultSearch}}</option>
		        	 <option  *ngFor="let rule of rules"  [value]="rule.id" >{{rule.name}}</option>
		        </select>
		   	 
		   	  </div>
		   	  </div>
    			
              <div class="bx--row">     
	               <!-- <div class="form-group" [ngClass]="{'has-error': displayMessage.orderingUnit }">  -->       
		              <div class="bx--col-md-2 bx--col-xs-12" align="right">                          
		               	<label for="orderingUnit" class="bx--label">Ordering Unit</label>
		              </div>
		              <div class="bx--col-md-10 bx--col-xs-12">
				 		<input type="text"   id="orderingUnit" placeholder="Ordering Unit" class="bx--text-input"
				 		formControlName="orderingUnit" name="orderingUnit"		 		
				 		[attr.title]="orderingUnitTip" [attr.data-invalid]="displayMessage.orderingUnit ? '' : null">
				 		<div class="bx--form-requirement" *ngIf="displayMessage.orderingUnit" >{{ displayMessage.orderingUnit }} </div>					 	 			 		
					  </div>
				  
			   </div>              
              <div class="bx--row">
              <div class="bx--col-md-2 bx--col-xs-12" align="right">
               	<label for="orderReferenceNumber" class="bx--label">Order Reference Number</label>
              </div>
              <div class="bx--col-md-10 bx--col-xs-12">
			 		<input type="text" class=" bx--text-input" id="orderReferenceNumber" placeholder="Order Reference Number" 
			 		formControlName="orderReferenceNumber" name="orderReferenceNumber" 
			 		[attr.title]="orderReferenceNumberTip" [attr.data-invalid]="displayMessage.orderReferenceNumber ? '' : null">
				 	<div class="bx--form-requirement" *ngIf="displayMessage.orderReferenceNumber" >{{ displayMessage.orderReferenceNumber }} </div>			
			  </div>
        </div>
         <div class="bx--col-md-1 bx--col-xs-4" >                
              <!--  <carbon-button type="primary" (click)="onInclude()">Include</carbon-button> -->
              <button class="bx--btn bx--btn--primary" type="button" id="inc" (click)="onInclude()" [disabled]="!valid || !orderUnitForm.valid">Include</button>
              </div>
              </div>       
</div>
        

这是我的测试用例：

describe('SearchPanelComponent', () => {
  let component: SearchPanelComponent;
  let fixture: ComponentFixture<SearchPanelComponent>;
  let includeBtn: HTMLElement;
  let orderingUnit: HTMLElement;
  let orderReferenceNumber: HTMLElement;
  let el: HTMLElement;
  let overlayContainerElement: HTMLElement;
  

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [ReactiveFormsModule, FormsModule,CarbonDatepickerModule, CarbonIconModule, StoreModule.forRoot({})],
      declarations: [ SearchPanelComponent, ModalComponent, UploadsearchcriteriaComponent, ],
      providers: [Store,StoreModule,CustomerorderService, ApiConnectorService, HttpClient, HttpHandler,ModalService]
    })
    .compileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(SearchPanelComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should create', () => {
    expect(component).toBeTruthy();
  });

  it('should check include is enabled after inputs combinations', async(() => {
    includeBtn = fixture.debugElement.query(By.css('button')).nativeElement;

    fixture.whenStable().then(() => {
      var inputElement = <HTMLInputElement>document.getElementById('orderingUnit');
      inputElement.value = 'abc';
      inputElement.dispatchEvent(new Event('input'));
      
      var inputElement1 = <HTMLInputElement>document.getElementById('orderReferenceNumber');
      inputElement1.value = 'abcdef';
      inputElement1.dispatchEvent(new Event('input'));
      fixture.detectChanges();
      expect(includeBtn.getAttribute('ng-reflect-enabled')).toBe('true', 'Include button enabled should now be true');
    });
  }));
  });