Угловое модульное тестирование доступа к элементу DOM компонента обусловлено * ngif после обновления модели

Question

Я настраиваю модульный тестовый случай для события emit, настроенного на операцию выбора (или щелчка) строки таблицы, также я настроил компонент с необходимыми данными. Здесь таблица является еще одним компонентом, и даже после назначения необходимых данных она не отображает необходимый элемент DOM таблицы (т.е. элементы строки) для назначения элемента строки для querySelect. Я добавляю фрагмент кода здесь:

компонент: машинопись

@Component({
   selector: 'app-user-list',
   templateUrl: './user-list.component.html',
   changeDetection: ChangeDetectionStrategy.OnPush
})

export class UserListComponent implements OnChanges {

   @Input() userSearchResult:UserSearchResult;
   @Output() navigateToUser: EventEmitter<UserInfo> = new EventEmitter();

   navigateToUserInfo(selectedUser: any) {
       this.navigateToUser.emit(selectedUser);
   }
}

компонент: разметка

<div *ngIf="userSearchResult">
   <div class="vdl-row">
   <div class="vdl-col-md-12">
   <app-table [headers]="userSearchResult.columnNames"
              [dataset]="userSearchResult.userList"
              tableStyle="list" (tableRowClick) = "navigateToUserInfo($event)">
  </app-table>
 </div>
</div>

Вот код спецификации файла:

import { ComponentFixture, async, TestBed } from '@angular/core/testing';
import { NO_ERRORS_SCHEMA } from '@angular/core';
import { TextboxComponent } from '@axyz/components/textbox';
import { UserListComponent } from './user-list.component';
import { UserSearchResult } from '../../../shared/models/user-search-result.model';
beforeEach(async( () => {
TestBed.configureTestingModule({
  imports: [],
  schemas: [NO_ERRORS_SCHEMA, CUSTOM_ELEMENTS_SCHEMA],
  declarations: [UserListComponent],
  providers: [TextboxComponent]
  }).compileComponents();
}))
beforeEach(() => {
fixture = TestBed.overrideComponent(UserListComponent, {
  set: new Component({
    selector: 'app-user-list',
    templateUrl: './user-list.component.html',
    changeDetection: ChangeDetectionStrategy.Default
  })
}).createComponent(UserListComponent);
//fixture = TestBed.createComponent(UserListComponent);
component = fixture.componentInstance;
debugEle = fixture.debugElement;

it('should emit on click', fakeAsync(() => {
    debugger;
    let data;
    fixture.detectChanges();

    let spy = spyOn(component.navigateToUser, 'emit');
    console.log("1")

    console.log(debugEle.nativeElement);

    component.userSearchResult = userSearchResult; 
    fixture.detectChanges();
    // console.log("2")
    console.log(debugEle.nativeElement);

    debugEle.query(By.css('app- 
    table')).triggerEventHandler('click',selectedUser);

    component.navigateToUserInfo(selectedUser);
    expect(spy).toHaveBeenCalledWith(selectedUser);
  }));
 });

И с тем, что я когда-либо пробовал, я получаю эту ошибку в консоли, когда использую "overrideComponent"

Uncaught Ошибка: не удается найти модуль 'tslib' в webpackEmptyContext (./node_modules/@angular/compiler/src_sync?:2) на eval (: 9876/node_modules/@angular/compiler/src/core.js?: 22) на eval (: 9876/node_modules/@angular/compiler/src/core.js?: 10) на eval (: 9876/node_modules/@angular/compiler/src/core.js?: 19) в Object ../ node_modules/@angular/compiler/src/core.js (vendor.js: 46) в webpack_require (main.js: 79) в eval (: 9876 / src / поиск пользователей / компоненты / список пользователей / user-list.component.spec.ts?: 7) в Object ../src / user-search / components / user-list / user-list.component.spec.ts (main.js: 231) в webpack_require (main.js: 79) at webpackContext (./src_sync_.spec.ts$?:9)

Я даже установил tslib в своем проекте, очистил модули узлов и установил npm. Есть что-то, что я не правильно делаю?

Answer 1

Не совсем уверен, что вы пытаетесь делать там со своим EmployeeListComponent.Но попробуйте изменить свой код на это:

let fixture;
let component;
let debugEle;

beforeEach(async( () => {
  TestBed.configureTestingModule({
    imports: [],
    schemas: [NO_ERRORS_SCHEMA],
    declarations: [UserListComponent]
  })
    .overrideComponent(UserListComponent, { 
      set: { changeDetection: ChangeDetectionStrategy.Default}
    })
    .compileComponents();
}));

beforeEach(() => {
  fixture = TestBed.createComponent(UserListComponent);
  component = fixture.componentInstance;
  debugEle = fixture.debugElement;
});