ngmodel在茉莉花测试中未填充输入元素值？

问题描述

我正在尝试对托管的AngularComponent DetailCellComponent进行一些测试，以在测试过程中动态创建的DetailCellHostComponent内部进行测试。

我进行测试以确保通过[(ngModel)]向输入元素提供值的Component绑定正确填充了正确的值（请参见下面的茉莉花测试）， 但尽管如此，输入框的值仍为null。 （当我在应用程序中运行ng-serve并使用该组件时，效果很好，只是不在测试环境中使用。）

这是DetailCellComponent的模板。

<mat-form-field class="input-cell" [ngClass]='inputClass'
   *ngIf="hasRowFocus && (inputControlType==InputControlType.textInput  || inputControlType==InputControlType.selectInput )">

   <mat-label>{{fieldNameIndicator}}</mat-label>
   
   <!-- Form Field for enums  (currency selection)  -->
   <mat-select *ngIf="inputControlType == InputControlType.selectInput" [(ngModel)]="elValue" 
      (focusin)="focusIn()" 
      (focus)="gotInputFocus()" 
      (click)="inputClick($event)"
      (mouSEOver)="mouSEOver()"
      (mouSEOut)="mouSEOut()"
      [disabled]="readOnly"
      (blur)="lostInputFocus($event)"   #inputSelect
         (keydown)="inputKeyDown($event)"
         trackFocus>
      <mat-option *ngFor="let curr of currs" [value]=curr.key>
         {{curr.key}}       
      </mat-option>
   </mat-select>

   <!-- FormField for text and numbers -->
   <----------- This is the input element that's not working. -------------------->
   
    <input *ngIf="inputControlType != InputControlType.selectInput" 
     class="input-element textinput" matInput placeHolder="placeholder"
    [(ngModel)]="elValue"             <<--------------------This is not working...
   (focusin)="focusIn()" (focus)="gotInputFocus()" 
   (click)="inputClick($event)"
   [disabled]="readOnly"
   (blur)="lostInputFocus($event)" [errorStateMatcher]="matcher" #cellInput
      (keydown)="inputKeyDown($event)"
      trackFocus
   >
  <--------------------------------------------------------------->

 <mat-error>{{errorText}}</mat-error>
</mat-form-field>

<div tabindex=0 *ngIf="!hasRowFocus" class="display-cell" (keydown)="onSelectKeyDown($event)" 
                (click)=selectCellClick($event) (dblclick)=editRow($event)
                [ngClass]='selectClass'
                (mouSEOver)="mouSEOver()"
                (mouSEOut)="mouSEOut()"
                #cellSelect >
     <div (dragenter) = "mousedragenter($event)" (dragleave) = "mouseDragLeave($event)">{{elValue}}</div>
</div>

这是测试的代码。

fdescribe('DetailCellComponent',() => {
  let fixture: ComponentFixture<DetailCellHostComponent>;
  let detailCellHostComponent: DetailCellHostComponent;
  
  beforeEach(async(() => {
    Testbed.configureTestingModule({
      // declarations: [  DetailCellComponent],declarations: [DetailCellHostComponent,DetailCellComponent],providers: [CurrencyPipe]
    })
      .compileComponents()
  }));

  beforeEach(() => {
    fixture = Testbed.createComponent(DetailCellHostComponent);
    detailCellHostComponent = fixture.componentInstance
  });
  
  it('change to row focus mode.',() => {
    fixture.detectChanges();
    let cellCommandSubject$ = detailCellHostComponent.commandSubject$;
    let evt = <CellCommandEvent>{};
    evt.eventType = CellCommands.SetToRowSelected;
    evt.target = FieldCol.all;
    cellCommandSubject$.next(evt);
    fixture.detectChanges();
    fixture.whenStable().then(() => {  // wait for async getQuote
      let cellComponentDE = fixture.debugElement.query(By.directive(DetailCellComponent));
      let cellComponent = cellComponentDE.componentInstance;
      expect(cellComponent).toBeTruthy();
      expect(cellComponent.elValue).toBe("100");    
      /** This test passes. 'elValue' is the binding property for the input element. **/
      let el : HTMLInputElement = cellComponentDE.query(By.css(".textinput")).nativeElement;
      expect(el).toBeTruthy();
      expect(el.value).toBe("100");
      /** This test fails.  The value property of the element is not populated by the
      *. [(ngModel)] directive.
    })

  });
});

这是在调试器中停止测试时在Karma测试页上描绘的元素的图片，如图所示。如您所见，input元素正在显示占位符文本，而不是模型值。

如何修复此测试？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）