更新模型后，Angular 单元测试访问由 *ngif 调节的组件的 DOM 元素

Question

我正在为设置表行选择（或单击）操作的发出事件设置单元测试用例，并且我已经为组件配置了所需的数据。这里的表格是另一个组件，即使在分配所需的数据时，它也不会呈现表格所需的 DOM 元素（即行元素）来定位 querySelect 的行元素。我在这里添加代码sn-p：

组件：打字稿

@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”时，我在控制台中收到此错误

未捕获的错误：找不到模块“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-search/components/user-list/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) 在 webpackContext (./src_sync_.spec.ts$?:9)

我什至在我的项目中安装了 tslib，清除了 nodemodules 并安装了 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;
});