在angular 2茉莉中使用ngif异步调用进行单元测试html元素

问题描述

我正在为具有*ngIf条件的html div编写单元测试.

I am writing unit test for html div having a *ngIf condition.

<div *ngIf="clientSearchResults$ | async  as searchResults" class = 'fgf'  #datalist id="mydata" >
  <app-client-list id="clientDataTable1" class="clientDataTable dataTable" [clients]='searchResults'></app-client-list>
</div>

当我从 ngrx 存储中接收到数据时，此ngIf条件变为真.下面是填充此数据的组件代码.

This ngIf condition gets true, when I recieved the data from ngrx store. Below is the component code, which filled this data.

searchData(client: Client) {
      //// some conditions
      this._clientService.getClientList()
     .subscribe(data => {
      const filteredData = this.filterData(data, client);
      this.isDataFound = filteredData !== null && filteredData.length > 0;
      this.testbool = true;
      /// In this line, my div got the data and using async condition, we 
      /// fill the div element.
      this.store.dispatch(new SetClientSearchResultsAction(filteredData));

    });
}

现在，为此编写单元测试用例时.

Now, when writing the unit test case for this.

it('should search the data with valid client passed from UI', async(() => {
    let debugFixture: DebugElement = fixture.debugElement;
    let htmlElement: HTMLElement = debugFixture.nativeElement;
    let clientListGrid = htmlElement.getElementsByClassName('fgf');
    let testbool= htmlElement.getElementsByClassName('testbool');

    spyOn(component, 'searchData').and.callThrough();
    spyOn(component, 'filterData').and.returnValue(CLIENT_OBJECT);
    spyOn(clientService, 'getClientList').and.callThrough();

    console.log("=========before======="+ clientListGrid.length);

    component.searchData(validClient);
    component.clientSearchResults$ = store.select('searchResults');
    fixture.detectChanges();
    debugFixture = fixture.debugElement;
    htmlElement = debugFixture.nativeElement;
    clientListGrid = htmlElement.getElementsByClassName('fgf');

    console.log("=========after ======="+ clientListGrid.length);

    expect(component.searchData).toHaveBeenCalled();
  }));

问题是，在控制台中，调用函数之前，我得到的长度为0，也调用函数之后，我得到的长度为0.当我们从存储中接收到数据时，它应该为1.正是由于这种* ngif条件，*ngIf="clientSearchResults$ | async as searchResults"

Problem is, in console, before calling the function, I am getting the length as 0 and after calling the function also, I am getting the length as 0. It should be 1, When We have received the data from store.And It is just because of this *ngif condition, *ngIf="clientSearchResults$ | async as searchResults"

数据正在DIV中加载，但是仍然，在单元测试中，我无法测试此东西?

Data is getting load in DIV, but still, in unit test I am not able to test this thing ?

推荐答案

我知道我来晚了，但是将来有人会读.

I know I’m too late but somebody might read it in future so.

我遇到了同样的问题，这是由于Angular测试中的错误，如果组件ChangeDetectionStrategy为OnPush

I had the same problem and it was because of bug in Angular testing that it doesn’t trigger change detection when passed new value to input if the components ChangeDetectionStrategy is OnPush

因此，您需要做的是在测试"模块中将其覆盖:

So what you need to do is override it in Testing module:

TestBed.configureTestingModule({
  ... your declarations and providers
})
.overrideComponent(ComponentYoureTesting, {
  set: { changeDetection: ChangeDetectionStrategy.Default }
})
.compileComponents();

它应该可以工作

这篇关于在angular 2茉莉中使用ngif异步调用进行单元测试html元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！